:root {
  color-scheme: light;   /* tema ÚNICO e claro (05/11/2026).. o contraste foi medido nele; sem isto o modo escuro do navegador escurece campos e barras de rolagem e ninguém mediu */
  --navy: #212b3d;
  --azul: #2E82F7;
  --azul-claro: #4BA8FD;
  --azul-texto: #1769cc;
  --papel: #f7f8fc;
  --branco: #ffffff;
  --texto-2: rgba(33, 43, 61, .72);
  --linha: rgba(33, 43, 61, .16);
  --suave: rgba(33, 43, 61, .05);
  --sombra-cor: rgba(33, 43, 61, .08);
  --azul-suave: rgba(46, 130, 247, .10);
  --azul-borda: rgba(46, 130, 247, .40);
  --erro-fundo: #fdecec;
  --erro: #9b1c1c;
  --raio: 16px;
  --raio-p: 12px;
  /* autocompletar (05/11/2026).. vidro escuro; o fundo sólido vale onde não há backdrop-filter */
  --ac-fundo-solido: #172033;
  --ac-fundo: rgba(20, 29, 46, .92);
  --ac-sub-ativo: #e8eefb;
  --ac-borda: rgba(255, 255, 255, .22);
  --ac-texto: #dfe6f5;
  --ac-forte: #ffffff;
  --ac-sub: #bcc7de;
  --ac-hover: rgba(46, 130, 247, .24);
  --ac-ativo: rgba(46, 130, 247, .44);
  --ac-barra: #9cc0ff;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--navy);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
[hidden] { display: none !important; }
a { color: var(--azul-texto); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ic { display: inline-flex; width: 20px; height: 20px; flex: none; }
.ic svg { width: 100%; height: 100%; }

/* Topo */
.topo { background: var(--navy); color: var(--claro); }
.topo-in { max-width: 1180px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topo-marca { display: flex; flex-direction: column; gap: 0; }
.marca { font-weight: 800; font-size: 30px; letter-spacing: -.03em; line-height: 1.1; color: inherit; text-decoration: none; display: inline-block; padding: 2px 0; border-radius: 6px; }
.marca:hover { opacity: .9; }
.marca:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 3px; }
.marca-ai { background: linear-gradient(90deg, var(--azul), var(--azul-claro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topo-sub { font-size: 14px; color: rgba(255, 255, 255, .84); }

/* ===== Menu global do site (04/11/2026, pedido do dono.. "a capa precisa herdar 100% o visual da home").
   CÓPIA ESTÁTICA, sem React, de src/components/MenuSite.jsx e src/components/menu-site.css (variante "faixa", navy #142130, 61 px, Plus Jakarta Sans)
   e do botão Anunciar grátis (src/components/botao-anunciar.css, sem as animações). O chat do site fica de fora. Só existe na vitrine pública.
   Se o menu do site mudar, copiar de novo. O comportamento (abrir painéis, gaveta do celular) está em iniciarMenu(), no localizador.js. ===== */
.ms {
  --ms-navy: #142130; --ms-blue: #2E82F7; --ms-blue-2: #4BA8FD; --ms-blue-ink: #1769cc;
  --ms-c-w: 440px; --ms-vidro: rgba(255, 255, 255, .08); --ms-vidro-borda: rgba(255, 255, 255, .22);
  --ms-r-sm: 6px; --ms-r-md: 8px; --ms-pad-x: clamp(16px, 4vw, 56px); --ms-barra-h: 61px; --ms-ladrilho: 30px; --ms-item-h: 48px;
  --ms-fonte: 'Plus Jakarta Sans', 'Plus Jakarta Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-family: var(--ms-fonte); -webkit-font-smoothing: antialiased;
  position: sticky; top: 0; z-index: 1000; width: 100%; background: var(--ms-navy); line-height: 1.5;
}
.ms, .ms *, .ms *::before, .ms *::after { box-sizing: border-box; }
.ms a { text-decoration: none; }
.ms button { font-family: inherit; }
.ms--gaveta { z-index: 10000; }
.ms-bar { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); width: 100%; height: var(--ms-barra-h); padding: 0 max(var(--ms-pad-x), calc((100% - 1120px) / 2)); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ms .ms-logo { font-size: 23px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; flex: none; }
.ms .ms-logo:hover { color: #fff; }
.ms-logo__ai { background: linear-gradient(135deg, #4BA8FD, #2E82F7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-nav { display: flex; align-items: stretch; gap: 2px; margin: 0 auto; height: 100%; }
.ms-nav > .ms-nav__item { align-self: center; }
.ms-grupo-nav { position: relative; display: flex; align-items: center; }
.ms .ms-nav__item { display: flex; align-items: center; gap: 6px; height: 36px; background: transparent; border: 0; color: #fff; font-weight: 600; font-size: 14px; line-height: 1; padding: 0 12px; border-radius: var(--ms-r-sm); cursor: pointer; white-space: nowrap; }
.ms .ms-nav__item:hover, .ms .ms-nav__item[aria-expanded="true"] { background: rgba(255, 255, 255, .08); color: #fff; }
.ms-nav__seta { flex: none; transition: transform .2s ease; }
.ms-nav__item[aria-expanded="true"] .ms-nav__seta { transform: rotate(180deg); }
.ms-direita { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.ms .ms-nav__item:focus-visible, .ms .ms-btn:focus-visible, .ms .ms-burger:focus-visible, .ms .ms-logo:focus-visible { outline: 2px solid var(--ms-blue-2); outline-offset: 2px; }
.ms .ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px; white-space: nowrap; border-radius: var(--ms-r-md); font-weight: 700; font-size: 14px; line-height: 1; cursor: pointer; color: #fff; transition: background .2s; }
.ms .ms-btn:hover { color: #fff; }
.ms .ms-btn--vidro { border: 1px solid var(--ms-vidro-borda); background: var(--ms-vidro); font-weight: 600; }
.ms .ms-btn--vidro:hover { background: rgba(255, 255, 255, .16); }
.ms .ms-btn--icone { width: 36px; padding: 0; }
.ms .ms-btn--icone svg { display: block; }
.ms-login-g { flex: none; display: grid; place-items: center; width: 18px; height: 18px; }
.ms-login-g svg { display: block; }
.ms-burger { display: none; width: 44px; height: 44px; flex: none; border-radius: var(--ms-r-md); border: 1px solid var(--ms-vidro-borda); background: rgba(255, 255, 255, .08); color: #fff; place-items: center; cursor: pointer; }
.ms-burger svg { display: block; }

/* o painel claro de cada aba (computador) */
.ms-mega { position: absolute; left: 0; top: 100%; padding-top: 11px; display: none; z-index: 5; }
.ms-grupo-nav.is-aberto .ms-mega { display: block; }
.ms-mega__painel { width: var(--ms-c-w); max-width: calc(100vw - 32px); padding: 12px; background: #fff; color: var(--ms-navy); border: 1px solid rgba(20, 33, 48, .1); border-radius: 12px; box-shadow: 0 20px 48px -12px rgba(20, 33, 48, .32), 0 2px 6px rgba(20, 33, 48, .08); animation: ms-sobe .2s ease both; }
.ms-painel__titulo { padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(20, 33, 48, .7); }
.ms-lista { display: flex; flex-direction: column; gap: 2px; }
.ms .ms-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--ms-item-h); padding: 6px 10px; border-radius: 8px; color: var(--ms-navy); background: transparent; border: 0; text-align: left; cursor: pointer; }
.ms .ms-item:hover { background: rgba(46, 130, 247, .08); color: var(--ms-navy); }
.ms .ms-item:hover .ms-item__t, .ms .ms-item:hover .ms-ico { color: var(--ms-blue-ink); }
.ms .ms-mega .ms-item:focus-visible, .ms .ms-gaveta .ms-item:focus-visible, .ms .ms-gaveta__aba:focus-visible, .ms .ms-dest__bt:focus-visible, .ms .ms-gaveta .ms-btn:focus-visible, .ms .ms-gaveta .ms-logo:focus-visible, .ms .ms-gaveta .ms-burger:focus-visible { outline: 2px solid var(--ms-blue-ink); outline-offset: -2px; }
.ms-ico { flex: none; width: var(--ms-ladrilho); height: var(--ms-ladrilho); border-radius: 8px; display: grid; place-items: center; background: rgba(46, 130, 247, .1); color: var(--ms-blue-ink); transition: color .15s ease; }
.ms-ico svg { display: block; width: 18px; height: 18px; }
.ms-item__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ms-item__t { display: block; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ms-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-item__d { display: block; font-size: 12.5px; line-height: 18px; font-weight: 500; color: rgba(20, 33, 48, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes ms-sobe { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }

/* a gaveta do celular (branca, com abas) */
.ms-gaveta { position: fixed; inset: 0; z-index: 1001; display: flex; flex-direction: column; background: #fff; color: var(--ms-navy); }
.ms-gaveta__topo { flex: none; height: var(--ms-barra-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--ms-pad-x); border-bottom: 1px solid rgba(20, 33, 48, .1); }
.ms .ms-gaveta .ms-logo, .ms .ms-gaveta .ms-logo:hover { color: var(--ms-navy); }
.ms .ms-gaveta .ms-burger--fechar { display: grid; order: 0; border-color: rgba(20, 33, 48, .16); background: #fff; color: var(--ms-navy); }
.ms-gaveta__corpo { flex: 1; overflow-y: auto; padding: 12px var(--ms-pad-x) 20px; display: flex; flex-direction: column; gap: 12px; }
.ms-gaveta__grupo { display: flex; flex-direction: column; gap: 2px; }
.ms-gaveta__abas { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 10px; background: rgba(20, 33, 48, .06); }
.ms .ms-gaveta__aba { height: 44px; padding: 0 2px; border: 0; border-radius: 8px; background: transparent; color: rgba(20, 33, 48, .72); font-size: 13px; font-weight: 600; line-height: 1.15; cursor: pointer; }
.ms .ms-gaveta__aba.is-on { background: #fff; color: var(--ms-navy); box-shadow: 0 1px 3px rgba(20, 33, 48, .16); }
.ms-dest { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 16px; border-radius: 10px; background: radial-gradient(120% 90% at 100% 0, rgba(46, 130, 247, .35), transparent 60%), var(--ms-navy); }
.ms-dest__e { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-blue-2); }
.ms-dest__t { font-size: 16px; font-weight: 700; line-height: 22px; color: #fff; }
.ms-dest__p { font-size: 13px; line-height: 19px; font-weight: 500; color: rgba(255, 255, 255, .86); }
.ms .ms-dest__bt { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 8px; background: var(--ms-blue-ink); color: #fff; font-weight: 700; font-size: 14px; }
.ms .ms-dest__bt:hover { color: #fff; background: var(--ms-blue); }
.ms-gaveta__pe { flex: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 14px var(--ms-pad-x) calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(20, 33, 48, .1); }
.ms-gaveta__pe .ms-btn { flex: 1 1 auto; }
.ms .ms-gaveta__pe .ms-btn--vidro { height: 48px; border: 1px solid rgba(20, 33, 48, .2); background: #fff; color: var(--ms-navy); }
.ms .ms-gaveta__pe .ms-btn--vidro:hover { background: rgba(20, 33, 48, .04); color: var(--ms-navy); }

@media (max-width: 1039px) {
  .ms-nav { display: none; }
  .ms-burger { display: grid; order: -1; }
}
@media (min-width: 1040px) { .ms-gaveta { display: none; } }
@media (min-width: 1040px) and (max-width: 1199px) { .ms-bar { gap: 12px; } .ms .ms-nav__item { padding: 0 8px; } }
@media (min-width: 1040px) and (max-width: 1439px) { .ms .ms-nav__item { padding: 0 6px; font-size: 13.5px; gap: 4px; } .ms-nav { gap: 0; } }
@media (min-width: 1040px) and (max-width: 1199px) { .ms .ms-nav__item { padding: 0 5px; font-size: 13px; } }
@media (min-width: 1040px) and (max-width: 1099px) { .ms-bar { gap: 8px; } .ms .ms-nav__item { padding: 0 4px; font-size: 12.5px; } .ms .ms-nav__seta { display: none; } }
@media (max-width: 639px) {
  .ms .ms-hide-phone { display: none; }
  .ms-bar { gap: 10px; }
  .ms-direita { gap: 8px; }
  .ms .ms-btn { padding: 0 14px; }
  .ms .ms-btn--icone { padding: 0; }
}
@media (max-width: 420px) { .ms .ms-logo { font-size: 24px; } .ms-bar { gap: 8px; } }
@media (max-width: 430px) {
  .ms-bar { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .ms-direita { gap: 6px; }
  .ms .ms-btn--entrar { width: 44px; padding: 0; }
}
@media (max-width: 380px) { .ms .ms-logo { font-size: 22px; } }
@media (pointer: coarse), (max-width: 900px) {
  .ms .ms-btn { height: 44px; padding: 0 18px; font-size: 15px; }
  .ms .ms-nav__item { height: 44px; font-size: 15px; padding: 0 14px; }
  .ms .ms-btn--icone { width: 44px; padding: 0; }
}
@media (max-width: 639px) { .ms .ms-btn { padding: 0 14px; } .ms .ms-btn--icone { padding: 0; } .ms .ms-btn--entrar { padding: 0 14px; } }
@media (max-width: 430px) { .ms .ms-btn--entrar { width: 44px; padding: 0; } }
.ms .ms-nav__item--construtoras { position: relative; margin-left: 14px; }
.ms .ms-nav__item--construtoras::before { content: ""; position: absolute; left: -8px; top: 50%; width: 1px; height: 16px; transform: translateY(-50%); background: rgba(255, 255, 255, .22); pointer-events: none; }
.ms .ms-nav__item--guias { margin-left: 6px; }
@media (max-width: 1100px) { .ms .ms-nav__item--construtoras { margin-left: 8px; } .ms .ms-nav__item--construtoras::before { left: -5px; } .ms .ms-nav__item--guias { margin-left: 2px; } }
@media (prefers-reduced-motion: reduce) { .ms *, .ms *::before, .ms *::after { animation: none !important; transition: none !important; } }
/* 04/11/2026.. o menu principal do site aparece também na tela da ferramenta (pedido do dono); antes ele sumia quando a página virava ferramenta */

/* Barra de demonstração */
.demo { background: var(--branco); border-bottom: 1px solid var(--linha); }
.demo-in { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 14px; }
.demo-selo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-texto); }
.demo-campo { display: flex; align-items: center; gap: 8px; }
.demo-campo span { color: var(--texto-2); }
.demo-campo select { min-height: 44px; border: 1px solid var(--linha); border-radius: 10px; padding: 0 10px; background: var(--branco); max-width: 260px; }
.demo-check { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.demo-check input { width: 20px; height: 20px; accent-color: var(--azul-texto); }

/* Página */
.pagina { max-width: 1180px; margin: 0 auto; padding: 16px 16px 40px; display: grid; gap: 16px; }
.saida { display: grid; gap: 16px; min-width: 0; }
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; box-shadow: 0 1px 2px var(--sombra-cor); min-width: 0; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: var(--raio-p);
  border: 1.5px solid transparent; font-weight: 500; font-size: 16px; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .15s ease;
}
.btn:active { transform: scale(.98); }
.btn--pri { background: var(--azul-texto); color: var(--claro); }
.btn--pri:hover { background-image: linear-gradient(rgba(33, 43, 61, .18), rgba(33, 43, 61, .18)); }
.btn--sec { background: var(--branco); color: var(--azul-texto); border-color: var(--linha); }
.btn--sec:hover { background: var(--azul-suave); }
.btn--escuro { background: var(--navy); color: var(--branco); }
.btn--escuro:hover { background-image: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)); }
.btn--bloco { width: 100%; }
.btn--grande { min-height: 56px; font-size: 17px; border-radius: 14px; }
.btn--pequeno { min-height: 44px; padding: 0 14px; font-size: 15px; }
.btn[disabled] { opacity: .55; cursor: progress; }

/* Busca */
.busca h2 { font-size: clamp(26px, 6.4vw, 32px); letter-spacing: -.02em; }
.busca .ajuda { margin-top: 6px; }
.ajuda { color: var(--texto-2); }
.form { display: grid; gap: 14px; margin-top: 18px; }
.campos { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; }
.campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label { font-weight: 650; font-size: 15px; }
.opcional { font-weight: 400; color: var(--texto-2); }
.campo input, .campo-in {
  width: 100%; min-height: 50px; padding: 10px 14px;
  border: 1.5px solid var(--linha); border-radius: var(--raio-p);
  background: var(--branco); font-size: 16px;
}
.campo input::placeholder, .campo-in::placeholder { color: var(--texto-2); opacity: .75; }
.campo input:focus-visible, .campo-in:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 0; border-color: var(--azul-texto); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.dica { font-size: 14px; color: var(--texto-2); }

.alt { margin-top: 18px; border-top: 1px solid var(--linha); padding-top: 6px; }
.alt-cab { display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font-weight: 650; color: var(--azul-texto); list-style: none; border-radius: 10px; }
.alt-cab::-webkit-details-marker { display: none; }
.alt-txt { flex: 1; }
.chev { transition: transform .2s ease; }
details[open] > summary .chev { transform: rotate(180deg); }
.alt-form { margin-top: 4px; }

.busca-resumo { display: none; align-items: center; gap: 10px; }
.busca-resumo .ic { color: var(--azul-texto); }
.busca-resumo-lado { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }   /* 06/11/2026.. lupa + texto da busca num bloco só (vai para o topo da coluna esquerda) */
.busca-resumo-lado .ic { flex: none; }
.busca-resumo-txt { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1023px) {
  .busca--recolhida { padding: 10px 12px 10px 16px; }
  .busca--recolhida .busca-area { display: none; }
  .busca--recolhida .busca-resumo { display: flex; }
}

@media (min-width: 1024px) {
  .pagina { padding: 40px 24px 56px; }
  body.tem-saida .pagina { grid-template-columns: 380px minmax(0, 1fr); align-items: start; gap: 24px; padding-top: 28px; }
  body.tem-saida .busca { position: sticky; top: 20px; }
  body.tem-saida .busca h2 { font-size: 24px; }
}

/* Status */
.estado { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--raio-p); font-weight: 550; animation: entra .25s ease-out both; }
.estado .ic { margin-top: 2px; }
.estado-corpo { display: grid; gap: 10px; flex: 1; min-width: 0; }
.estado--erro { background: var(--erro-fundo); color: var(--erro); }
.estado--aviso { background: var(--azul-suave); color: var(--navy); border: 1px solid var(--azul-borda); }
.estado--aviso .ic { color: var(--azul-texto); }
.estado .btn { justify-self: start; }

/* Espera */
.espera { display: grid; gap: 16px; }
.cena-moldura { border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, var(--azul-suave), rgba(46, 130, 247, .03)); border: 1px solid var(--linha); }
.cena { display: block; width: 100%; height: auto; }
/* O orbe da busca (07/11/2026) substitui a cena do mapa na espera.. a cena antiga fica no HTML, escondida, para os testes e o texto do andamento (classes f0..f5) seguirem iguais */
.cena-moldura .cena { display: none; }
.orbe-busca { display: block; width: min(300px, 70vw); aspect-ratio: 1; height: auto; margin: 0 auto; }
.cena-moldura:has(.orbe-busca) { background: #0e1526; border-color: rgba(207, 224, 253, .14); }
.espera-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.espera-cab h2 { font-size: 20px; letter-spacing: -.01em; }
.cronometro { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--azul-texto); background: var(--azul-suave); border-radius: 999px; padding: 6px 12px; }
.cronometro .ic { width: 18px; height: 18px; }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.etapa { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px; color: var(--texto-2); }
.etapa-marca { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha); display: grid; place-items: center; flex: none; }
.etapa-marca .ic { width: 16px; height: 16px; }
.etapa--feita { color: var(--navy); }
.etapa--feita .etapa-marca { background: var(--azul-texto); border-color: var(--azul-texto); color: var(--claro); }
.etapa--ativa { background: var(--azul-suave); color: var(--navy); font-weight: 650; }
.etapa--ativa .etapa-marca { border-color: var(--azul-borda); border-top-color: var(--azul-texto); animation: gira .8s linear infinite; }
.espera-nota { display: flex; gap: 10px; font-size: 15px; color: var(--texto-2); border-top: 1px solid var(--linha); padding-top: 14px; animation: entra .25s ease-out both; }

/* Cena animada (só transform e opacity) */
.cena .rua { fill: rgba(33, 43, 61, .07); }
.cena .faixas rect { fill: var(--branco); }
.cena .lotes rect { fill: var(--branco); stroke: var(--linha); stroke-width: 1; }
.cena .alvo { fill: url(#g-azul); opacity: 0; transition: opacity .3s ease; }
.cena .alvo-anel { fill: none; stroke: var(--azul); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cena .num { font: 700 9px system-ui, sans-serif; fill: rgba(33, 43, 61, .72); text-anchor: middle; opacity: 0; }
.cena .pino-pos { transform: translate(24px, 90px); transition: transform .3s ease; }
.cena .pino { animation: cai .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.cena .pino-corpo { fill: url(#g-azul); }
.cena .pino-olho { fill: var(--branco); }
.cena .radar { fill: none; stroke: var(--azul); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: radar 1.6s ease-out infinite; }
.cena .radar--2 { animation-delay: .8s; }
.cena .doc-pos { opacity: 0; transform: translate(196px, 36px) scale(.2); }
.cena .doc-sombra { fill: rgba(33, 43, 61, .12); }
.cena .doc-papel { fill: var(--branco); stroke: var(--linha); }
.cena .doc-cab { fill: var(--navy); }
.cena .ln { fill: rgba(33, 43, 61, .18); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.cena .ln-nome { fill: url(#g-azul); opacity: 0; transition: opacity .3s ease; }
.cena .doc-selo { fill: none; stroke: var(--azul); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cena .scan { fill: var(--azul-claro); opacity: 0; }
.cena .chip { opacity: 0; }
.cena .chip rect { fill: var(--navy); }
.cena .chip path { fill: none; stroke: var(--branco); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.cena .chip1 { --dx: 150px; --dy: -40px; }
.cena .chip2 { --dx: 116px; --dy: -62px; }
.cena .chip3 { --dx: 82px; --dy: -40px; }

.cena.f1 .faixas { animation: anda 1s linear infinite; }
.cena.f1 .pino-pos { animation: varre 4.6s ease-in-out infinite alternate; }
.cena.f1 .num { animation: pisca 4.6s ease-in-out infinite; }
.cena .d1 { animation-delay: 0s; } .cena .d2 { animation-delay: .5s; } .cena .d3 { animation-delay: 1s; }
.cena .d4 { animation-delay: 1.5s; } .cena .d5 { animation-delay: 2s; } .cena .d6 { animation-delay: 2.5s; } .cena .d7 { animation-delay: 3s; }

.cena.f2 .faixas { animation: none; }
.cena.f2 .pino-pos { animation: none; transform: translate(204px, 44px); }
.cena.f2 .num { animation: none; opacity: .4; }
.cena.f2 .num-alvo { opacity: 0; }
.cena.f2 .alvo { opacity: 1; }
.cena.f2 .alvo-anel { animation: anel 1.4s ease-out infinite; }

.cena.f3 .doc-pos { animation: sobe .7s cubic-bezier(.2, .8, .2, 1) forwards; }
.cena.f3 .ln { animation: imprime .4s ease-out forwards; }
.cena.f3 .ln.d1 { animation-delay: .5s; } .cena.f3 .ln.d2 { animation-delay: .65s; } .cena.f3 .ln.d3 { animation-delay: .8s; }
.cena.f3 .ln.d4 { animation-delay: .95s; } .cena.f3 .ln.d5 { animation-delay: 1.1s; }
.cena.f3 .doc-selo { animation: carimbo .4s 1.3s cubic-bezier(.2, .9, .3, 1.4) forwards; }

.cena.f4 .ln-nome { opacity: 1; }
.cena.f4 .scan { opacity: .7; animation: scan 1.4s ease-in-out infinite alternate; }

.cena.f5 .scan { opacity: 0; animation: none; }
.cena.f5 .chip { opacity: 1; animation: brota .5s cubic-bezier(.2, .9, .3, 1.2) both, flutua 2s ease-in-out .6s infinite alternate; }
.cena.f5 .chip2 { animation-delay: .12s, .72s; }
.cena.f5 .chip3 { animation-delay: .24s, .84s; }

@keyframes cai { from { transform: translateY(-34px); opacity: 0; } }
@keyframes radar { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes anda { to { transform: translateX(-28px); } }
@keyframes varre { from { transform: translate(24px, 90px); } to { transform: translate(296px, 90px); } }
@keyframes pisca { 0%, 100% { opacity: 0; } 12%, 32% { opacity: 1; } 50% { opacity: 0; } }
@keyframes anel { from { transform: scale(1); opacity: .8; } to { transform: scale(1.28); opacity: 0; } }
@keyframes sobe { to { opacity: 1; transform: translate(232px, 38px) scale(1); } }
@keyframes imprime { to { transform: scaleX(1); } }
@keyframes carimbo { from { opacity: 0; transform: scale(2); } to { opacity: 1; transform: scale(1); } }
@keyframes scan { from { transform: translateY(20px); } to { transform: translateY(94px); } }
@keyframes brota { from { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flutua { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }

/* Resultado */
.resultado { display: grid; gap: 14px; }
.dono { padding: 0; overflow: hidden; animation: entra .3s ease-out both; }
.dono-topo { background: var(--navy); color: var(--claro); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
.dono-topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--azul), var(--azul-claro)); }
.inscr { display: flex; flex-direction: column; }
.inscr-rot { font-size: 13px; color: rgba(255, 255, 255, .84); }
.inscr-num { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.selo { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 650; background: var(--branco); color: var(--navy); border: 1.5px solid var(--linha); }
.selo .ic { width: 16px; height: 16px; color: var(--azul-texto); }
.selo--atencao { border: 2px solid var(--azul); }
.selo--atencao .ic { color: var(--navy); }
.dono-corpo { padding: 20px; display: grid; gap: 12px; }
.dono-unidade { display: flex; gap: 10px; align-items: flex-start; padding: 12px 20px; background: var(--azul-suave); font-weight: 600; font-size: 15px; }
.dono-unidade .ic { color: var(--azul-texto); margin-top: 1px; }
.rotulo { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.dono-nome { font-size: clamp(22px, 5.6vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.doc-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-tipo { font-size: 13px; font-weight: 700; color: var(--azul-texto); background: var(--azul-suave); border-radius: 6px; padding: 2px 8px; }
.doc-num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.btn-icone { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--linha); background: var(--branco); color: var(--azul-texto); font-weight: 600; font-size: 14px; cursor: pointer; transition: transform .15s ease; }
.btn-icone:active { transform: scale(.97); }
.btn-icone .ic { width: 18px; height: 18px; }
.dono-end { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--texto-2); }
.dono-end .ic { width: 18px; height: 18px; margin-top: 2px; }
.rapido { display: grid; gap: 8px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--linha); }
.rapido-btns { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.rapido-btns > :only-child { grid-column: 1 / -1; }
.rapido-num { font-size: 14px; color: var(--texto-2); }
.sem-contato { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--suave); color: var(--navy); font-size: 15px; }
.sem-contato .ic { color: var(--texto-2); margin-top: 2px; }
.nota-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--azul-suave); border: 1px solid var(--azul-borda); font-size: 15px; }
.nota-aviso .ic { color: var(--azul-texto); margin-top: 2px; }
.dono .nota-aviso { margin: 0 20px; margin-top: 16px; }

.atalhos { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.atalhos::-webkit-scrollbar { display: none; }
.atalho { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--branco); border: 1px solid var(--linha); color: var(--navy); text-decoration: none; font-weight: 600; font-size: 15px; }
.atalho:hover { background: var(--azul-suave); }

.sec { padding: 0; animation: entra .3s ease-out both; }
.sec-cab { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 18px; cursor: pointer; list-style: none; border-radius: var(--raio); }
.sec-cab::-webkit-details-marker { display: none; }
.sec-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--azul-suave); color: var(--azul-texto); display: grid; place-items: center; flex: none; }
.sec-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sec-tit h3 { font-size: 17px; }
.sec-resumo { font-size: 14px; color: var(--texto-2); }
.sec-corpo { padding: 4px 18px 20px; display: grid; gap: 16px; }

.dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 14px 20px; margin: 0; }
.dado { min-width: 0; }
.dado--largo { grid-column: 1 / -1; }
.dados dt { font-size: 13px; color: var(--texto-2); }
.dados dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.bloco { display: grid; gap: 8px; }
.bloco-tit { font-size: 15px; }
.lista-param { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px; }
.lista-param li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--suave); font-size: 15px; }
.lista-simples { margin: 0; padding: 4px 0 0 20px; display: grid; gap: 4px; columns: 2 200px; }
.lista-simples li { break-inside: avoid; }
.sub { border: 1px solid var(--linha); border-radius: var(--raio-p); }
.sub-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; cursor: pointer; font-weight: 650; list-style: none; }
.sub-cab::-webkit-details-marker { display: none; }
.sub > .lista-simples { padding: 0 14px 14px 34px; }

.debitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.debitos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border-radius: 10px; background: var(--suave); }
.debitos .deb-ano { font-size: 13px; color: var(--texto-2); grid-column: 1; }
.debitos .deb-valor { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-variant-numeric: tabular-nums; }

.contatos { list-style: none; margin: 0; padding: 0; }
.contato { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linha); }
.contato:first-child { border-top: 0; padding-top: 0; }
.contato-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--suave); display: grid; place-items: center; color: var(--navy); }
.contato-info { display: flex; flex-direction: column; min-width: 0; }
.contato-valor { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.atualizado { font-size: 13px; color: var(--texto-2); }
.contato-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.contato-acoes .btn { flex: 1 1 120px; }
.sem-whats { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; font-size: 14px; color: var(--texto-2); border: 1px dashed var(--linha); border-radius: var(--raio-p); flex: 1 1 120px; justify-content: center; }
@media (min-width: 640px) {
  .contato { grid-template-columns: auto minmax(0, 1fr) auto; }
  .contato-acoes { grid-column: auto; flex-wrap: nowrap; }
  .contato-acoes .btn, .sem-whats { flex: none; }
}

.mini-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }   /* 07/11/2026.. trilha minmax(0,1fr): o conteúdo nowrap do cartão não alarga a coluna além dos 320 px */
.mini { border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 16px; display: grid; gap: 12px; }
.mini-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.mini-nome { font-size: 16px; overflow-wrap: anywhere; }
.mini-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-acoes .btn { flex: 1 1 120px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--azul-suave); color: var(--navy); }
/* Dados do cadastro (04/11/2026).. cada valor com o botão de copiar; uma coluna, alvo de 44 px no toque */
.dados--copia { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.mini .dados--copia { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.dados--copia .dado { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; border-top: 1px solid var(--linha); padding: 2px 0; }
.dados--copia .dado:first-child { border-top: 0; }
.dados--copia dt { grid-column: 1 / -1; font-size: 12px; color: var(--texto-2); }
.dados--copia dd { display: contents; }
.dado-valor { min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.btn-copia { justify-content: center; padding: 0; min-width: 40px; min-height: 40px; }
@media (pointer: coarse) { .btn-copia, .dono .btn-copia { min-width: 44px; min-height: 44px; } }
.cad-enderecos { display: grid; gap: 8px; border-top: 1px solid var(--linha); padding-top: 10px; }
.cad-end { display: grid; gap: 4px; }
.cad-end-tit { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--navy); }
.cad-end-tit .ic { width: 16px; height: 16px; color: var(--azul-texto); }
.contato-rotulo { font-size: 12px; color: var(--texto-2); }
.achada { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--texto-2); }
.achada .ic { width: 16px; height: 16px; color: var(--azul-texto); }

.acoes { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(247, 248, 252, 0), var(--papel) 30%); }

/* Escolhas */
.escolha { display: grid; gap: 14px; animation: entra .3s ease-out both; }
.escolha-tit { font-size: 21px; letter-spacing: -.01em; }
.escolha-grupo { display: grid; gap: 10px; }
.escolha-sub { font-size: 16px; padding-top: 6px; }
.escolha > .btn { justify-self: start; }
.lista-botoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.btn-escolha { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: left; background: var(--branco); border: 1.5px solid var(--linha); border-radius: var(--raio-p); cursor: pointer; transition: transform .15s ease; }
.btn-escolha:hover { border-color: var(--azul-texto); background: var(--azul-suave); }
.btn-escolha:active { transform: scale(.98); }
.be-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.be-txt strong { font-size: 16px; overflow-wrap: anywhere; }
.be-txt span { font-size: 14px; color: var(--texto-2); }
.btn-escolha > .ic { color: var(--azul-texto); }

.pesq { display: grid; gap: 10px; }
.pesq label { font-weight: 650; font-size: 15px; }
.pesq-grupos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pesq-grupos::-webkit-scrollbar { display: none; }
.pesq-grupos .atalho { min-height: 40px; font-size: 14px; }
.pesq-cont { font-size: 14px; color: var(--texto-2); }
.rolagem { position: relative; max-height: 440px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 0 10px 10px; }
.grupo-tit { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: 8px; padding: 12px 4px 8px; background: var(--branco); font-size: 14px; }
.grupo-n { color: var(--texto-2); font-weight: 500; }
.rolagem .lista-botoes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.rolagem .btn-escolha { min-height: 52px; }

@media (prefers-reduced-motion: reduce) {
  .cena-moldura { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .etapa--ativa .etapa-marca { border-color: var(--azul-texto); }
}

/* Painel tecnológico */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.resultado > * { animation: entra .4s ease-out both; }
.resultado > :nth-child(2) { animation-delay: .05s; } .resultado > :nth-child(3) { animation-delay: .1s; } .resultado > :nth-child(4) { animation-delay: .15s; }
.resultado > :nth-child(5) { animation-delay: .2s; } .resultado > :nth-child(6) { animation-delay: .25s; } .resultado > :nth-child(n+7) { animation-delay: .3s; }

.dono {
  position: relative; overflow: hidden; border-radius: var(--raio); color: var(--claro);
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(46, 130, 247, .35), transparent 60%),
    linear-gradient(rgba(75, 168, 253, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(75, 168, 253, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--navy);
  box-shadow: 0 18px 40px rgba(33, 43, 61, .25);
}
.dono .dono-topo { background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.dono .dono-topo::after { height: 2px; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dono .dono-unidade { background: rgba(46, 130, 247, .2); color: var(--claro); }
.dono .dono-unidade .ic { color: var(--azul-claro); }
.dono .nota-aviso { background: rgba(46, 130, 247, .14); border-color: rgba(75, 168, 253, .4); color: var(--claro); }
.dono .nota-aviso .ic { color: var(--azul-claro); }
.dono .rotulo { color: rgba(255, 255, 255, .78); }
.dono .doc-tipo { background: rgba(75, 168, 253, .22); color: var(--claro); }
.dono .dono-end { color: rgba(255, 255, 255, .8); }
.dono .rapido { border-top-color: rgba(255, 255, 255, .14); }
.dono .rapido-num { color: rgba(255, 255, 255, .78); }
.dono .sem-contato { background: rgba(255, 255, 255, .08); color: var(--claro); }
.dono .sem-contato .ic { color: var(--azul-claro); }
.dono .btn--pri { background: linear-gradient(90deg, var(--azul-texto), var(--azul)); box-shadow: 0 8px 22px rgba(46, 130, 247, .35); }
.inscr-num { font-size: 34px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; }
.kpi { position: relative; overflow: hidden; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 14px 12px; display: grid; gap: 2px; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--azul), var(--azul-claro)); }
.kpi-ic { color: var(--azul-texto); margin-bottom: 4px; }
.kpi-rot { font-size: 13px; color: var(--texto-2); }
.kpi-val { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-sub { font-size: 12px; color: var(--texto-2); }

.duas { display: grid; gap: 14px; min-width: 0; }
@media (min-width: 760px) { .duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.pc { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; display: grid; gap: 14px; min-width: 0; }
.pc-cab { display: flex; align-items: center; gap: 12px; }
.pc-tit { display: flex; flex-direction: column; min-width: 0; }
.pc-tit h3 { font-size: 17px; }
.pc--escuro {
  color: var(--claro); border-color: transparent;
  background:
    linear-gradient(rgba(75, 168, 253, .08) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(75, 168, 253, .08) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--navy);
}
.pc--escuro .sec-ic { background: rgba(46, 130, 247, .22); color: var(--azul-claro); }
.pc--escuro .sec-resumo { color: rgba(255, 255, 255, .78); }

.rx-nota { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--branco); }
.rx-nota .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--azul-claro); }
.rx { display: grid; gap: 16px; align-items: center; }
@media (min-width: 640px) { .rx { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.rx-fig { margin: 0; display: grid; gap: 6px; justify-items: center; }
.rx-fig figcaption { font-size: 12px; color: rgba(255, 255, 255, .7); }
.esquema { width: 100%; max-width: 280px; height: auto; display: block; }
.lt-lote { fill: rgba(46, 130, 247, .12); stroke: var(--azul-claro); stroke-width: 1.5; }
.lt-area { stroke: var(--azul-claro); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .55; }
.lt-rua { fill: rgba(255, 255, 255, .08); }
.lt-cota { stroke: rgba(255, 255, 255, .45); stroke-width: 1; stroke-dasharray: 2 2; }
.lt-txt { fill: var(--branco); font: 700 10px system-ui, sans-serif; text-anchor: middle; }
.lt-txt--p { font-weight: 600; font-size: 9px; fill: rgba(255, 255, 255, .85); }
.lt-txt--rua { letter-spacing: .3em; fill: rgba(255, 255, 255, .7); }
.rx-lado { display: grid; gap: 12px; }
.medidor { width: 100%; max-width: 260px; height: auto; justify-self: center; display: block; }
.g-trilho { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 14; stroke-linecap: round; }
.g-arco { fill: none; stroke-width: 14; stroke-linecap: round; }
.g-tick { stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.g-pct { fill: var(--branco); font: 800 30px ui-monospace, Menlo, Consolas, monospace; text-anchor: middle; }
.g-sub { fill: rgba(255, 255, 255, .78); font: 500 10.5px system-ui, sans-serif; text-anchor: middle; }
.rx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rx-stat { border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.rx-stat span { font-size: 12px; color: rgba(255, 255, 255, .75); }
.rx-stat strong { font-size: 15px; overflow-wrap: anywhere; }
.rx-stat--dest { border-color: rgba(75, 168, 253, .6); background: rgba(46, 130, 247, .16); }

.barras { display: grid; gap: 12px; }
.barra { display: grid; gap: 6px; }
.barra-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.barra-top span { color: var(--texto-2); }
.barra svg { width: 100%; height: 10px; display: block; }
.b-trilho { fill: var(--suave); }
.b-val { transform-box: fill-box; transform-origin: left center; animation: cresce .8s cubic-bezier(.2, .8, .2, 1) both; }
.b-val--dest { fill: var(--navy); }
@keyframes cresce { from { transform: scaleX(0); } }

.nota-zona { display: flex; gap: 8px; font-size: 14px; color: var(--texto-2); }
.nota-zona .ic { width: 18px; height: 18px; color: var(--azul-texto); }
.usos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.uso { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 12px; min-width: 0; }
.uso-cod { flex: none; min-width: 44px; height: 36px; padding: 0 6px; border-radius: 9px; background: linear-gradient(135deg, var(--azul-texto), var(--azul)); color: var(--claro); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.uso-txt { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.uso-txt small { font-size: 12px; font-weight: 500; color: var(--texto-2); }
.uso--perm { border-style: dashed; }
.uso--perm .uso-cod { background: var(--branco); color: var(--azul-texto); border: 1.5px dashed var(--azul-texto); }

.un-graf { display: grid; gap: 12px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: 8px; }
.stat { background: var(--azul-suave); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.stat span { font-size: 12px; color: var(--texto-2); }
.stat strong { font-size: 16px; }
.histo { width: 100%; height: auto; display: block; }
.hb { fill: rgba(46, 130, 247, .3); transform-box: fill-box; transform-origin: center bottom; animation: cresceY .7s cubic-bezier(.2, .8, .2, 1) both; }
.hb--on { fill: var(--azul-texto); }
.h-eixo { stroke: var(--linha); }
.h-txt { fill: var(--texto-2); font: 700 10px system-ui, sans-serif; text-anchor: middle; }
.h-txt--e { text-anchor: start; } .h-txt--d { text-anchor: end; }
.h-txt--on { fill: var(--azul-texto); }
@keyframes cresceY { from { transform: scaleY(0); } }

.fiscal { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; background: var(--azul-suave); }
.fiscal > div { display: flex; flex-direction: column; }
.fiscal strong { font-size: 17px; }
.fiscal span { font-size: 14px; color: var(--texto-2); }
.fiscal-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--azul-texto); color: var(--claro); display: grid; place-items: center; flex: none; }
.fiscal--pos { background: var(--suave); border: 2px solid var(--azul); }
.fiscal--pos .fiscal-ic { background: var(--navy); }

.emp-graf { display: flex; align-items: center; gap: 16px; }
.rosca { width: 104px; height: 104px; flex: none; }
.d-trilho { fill: none; stroke: var(--suave); stroke-width: 12; }
.d-arco { fill: none; stroke-width: 12; stroke-linecap: round; }
.d-num { font: 800 26px ui-monospace, Menlo, Consolas, monospace; fill: var(--navy); text-anchor: middle; }
.d-sub { font: 600 11px system-ui, sans-serif; fill: var(--texto-2); text-anchor: middle; }
.emp-leg { display: flex; flex-direction: column; }
.emp-leg span { font-size: 14px; color: var(--texto-2); }
.contatos .contato-acoes .btn { min-width: 0; }

/* Ficha própria para PDF */
.ficha { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body > *:not(.ficha) { display: none !important; }
  .ficha { display: block; padding: 14mm; box-sizing: border-box; color: var(--navy); font-size: 11pt; line-height: 1.45; }
  .fi-topo { display: flex; justify-content: space-between; align-items: center; background: var(--navy); color: #fff; padding: 14px 18px; border-radius: 10px; }
  .fi-topo .marca { font-size: 22pt; }
  .fi-topo-info { display: flex; flex-direction: column; align-items: flex-end; font-size: 10pt; }
  .fi-topo-info strong { font-size: 12pt; }
  .fi-dono { padding: 18px 2px 14px; border-bottom: 3px solid var(--azul); display: grid; gap: 6px; }
  .fi-nome { font-size: 20pt; line-height: 1.15; letter-spacing: -.01em; }
  .fi-linha { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 600; }
  .fi-bloco { padding: 12px 2px; border-bottom: 1px solid var(--linha); break-inside: avoid; }
  .fi-tit { font-size: 10pt; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-texto); margin-bottom: 8px; }
  .fi-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
  .fi-dado { display: flex; flex-direction: column; }
  .fi-rot { font-size: 9pt; color: var(--texto-2); }
  .fi-val { font-weight: 600; overflow-wrap: anywhere; }
  .fi-nota { margin-top: 16px; font-size: 9pt; color: var(--texto-2); }
}

/* Cabeçalho numerado */
.nc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nc-n { background: linear-gradient(135deg, var(--azul), var(--azul-claro)); color: var(--claro); font-weight: 800; font-size: 13px; border-radius: 8px; padding: 4px 8px; line-height: 1; }
.nc-t { font-size: 20px; letter-spacing: -.02em; }
.nc-linha { flex: 1; min-width: 24px; height: 1px; background: var(--linha); }
.nc-sub { font-size: 14px; color: var(--texto-2); }
.rotulo--azul { color: var(--azul-texto); }
.chip-esc, .chip-cl { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.chip-esc { background: rgba(33, 43, 61, .88); color: var(--claro); }
.chip-esc .ic { width: 16px; height: 16px; color: var(--azul-claro); }
.chip-cl { background: rgba(255, 255, 255, .94); color: var(--navy); border: 1px solid var(--linha); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--azul-claro); box-shadow: 0 0 0 3px rgba(75, 168, 253, .3); }

/* Imagens */
.img { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(46, 130, 247, .14), rgba(33, 43, 61, .08)); border-radius: 12px; }
.img img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.img--ok img { opacity: 1; }
.img-vazia { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto-2); text-align: center; padding: 8px; }
.img-vazia .ic { width: 26px; height: 26px; color: var(--azul-texto); }
.img--vazia .img-vazia { display: flex; }

/* Fachada e mapa */
.local-midia { display: grid; gap: 12px; }
@media (min-width: 760px) { .local-midia { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.local-midia > :only-child { grid-column: 1 / -1; }
.fach { position: relative; margin: 0; }
.fach-img { aspect-ratio: 16 / 10; }
.fach-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33, 43, 61, 0) 55%, rgba(33, 43, 61, .55)); pointer-events: none; }
.fach-leg { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 1; }
.mapa { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--linha); aspect-ratio: 16 / 10; background: var(--papel); }
.mapa-svg, .mapa-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 0; }
.mapa-a { position: absolute; left: 12px; top: 12px; }
.mapa-b { position: absolute; right: 12px; bottom: 12px; }
.mp-fundo { fill: var(--papel); }
.mp-rua { stroke: var(--branco); stroke-width: 5; }
.mp-av { fill: none; stroke: rgba(46, 130, 247, .28); stroke-width: 9; stroke-linecap: round; }
.mp-verde { fill: rgba(46, 130, 247, .1); }
.mp-reg { fill: rgba(46, 130, 247, .16); stroke: var(--azul); stroke-width: 2.5; }
.mp-pulso { fill: none; stroke: var(--azul); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: mpPulso 2.4s ease-out infinite; }
.mp-pino-a { fill: rgba(75, 168, 253, .35); }
.mp-pino { fill: var(--azul); stroke: var(--branco); stroke-width: 2.5; }
@keyframes mpPulso { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }

/* Entorno */
.ent { display: grid; gap: 10px; }
.ent-cab h4, .hist-cab h4 { font-size: 17px; }
.ent-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.ent-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 12px 14px; }
.ent-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--azul-suave); color: var(--azul-texto); display: grid; place-items: center; grid-row: span 2; }
.ent-txt { display: flex; flex-direction: column; min-width: 0; }
.ent-txt strong { font-size: 15px; }
.ent-faixa { font-size: 14px; font-weight: 600; color: var(--azul-texto); }
.ent-medidor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ent-seg { height: 5px; border-radius: 3px; background: rgba(33, 43, 61, .1); }
.ent-seg--p { background: rgba(46, 130, 247, .3); }
.ent-seg--on { background: linear-gradient(90deg, var(--azul), var(--azul-claro)); }

/* Linha do tempo */
.hist { display: grid; gap: 10px; border-top: 1px solid var(--linha); padding-top: 16px; }
.hist-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hist-cab h4 { padding-left: 12px; border-left: 4px solid var(--azul); }
.hist-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 28px; }
@media (min-width: 760px) { .hist-lista { display: block; columns: 2; column-gap: 28px; } .hist-item { break-inside: avoid; } }
.hist-item { position: relative; padding-left: 26px; }
.hist-item::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: rgba(33, 43, 61, .12); }
.hist-det { border-bottom: 1px solid var(--linha); }
.hist-sum { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 0; cursor: pointer; list-style: none; }
.hist-sum::-webkit-details-marker { display: none; }
.hist-marca { position: absolute; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--branco); border: 3px solid rgba(33, 43, 61, .2); }
.hist-det[open] .hist-marca { border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-suave); }
.hist-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hist-ano { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.hist-det[open] .hist-ano { color: var(--azul-texto); }
.hist-tt strong { font-size: 16px; }
.hist-corpo { padding: 0 0 14px; display: grid; gap: 10px; color: var(--texto-2); }
.hist-nums { display: flex; gap: 8px; flex-wrap: wrap; }
.hist-num { display: inline-flex; align-items: baseline; gap: 8px; border-radius: 999px; background: var(--suave); border: 1px solid var(--linha); padding: 6px 14px; color: var(--navy); }
.hist-num small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }

/* Comparativo */
.cp-intro { display: grid; gap: 6px; }
.cp-tit { font-size: clamp(18px, 4.4vw, 22px); letter-spacing: -.02em; max-width: 620px; text-wrap: balance; }
.cp-hero { display: grid; gap: 16px; border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; background: linear-gradient(180deg, rgba(46, 130, 247, .05), var(--branco)); }
@media (min-width: 760px) { .cp-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); align-items: start; } }
.cp-foto { display: grid; gap: 6px; }
.cp-img { aspect-ratio: 4 / 3; margin-top: 4px; }
.cp-preco { font-size: 22px; font-weight: 800; }
.cp-spec { font-size: 13px; color: var(--texto-2); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.cp-spec em { font-style: normal; font-weight: 600; color: var(--navy); }
.cp-onde { display: grid; gap: 10px; }
.cp-ext { display: flex; justify-content: space-between; gap: 12px; }
.cp-ext > span { display: flex; flex-direction: column; }
.cp-ext-d { text-align: right; }
.cp-ext small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.cp-pontos { position: relative; height: 64px; }
.cp-faixa { position: absolute; left: 0; right: 0; top: 4px; width: 100%; height: 22px; }
.cp-trilho { fill: rgba(46, 130, 247, .14); }
.cp-iqr { fill: rgba(46, 130, 247, .34); }
.cp-ponto { position: absolute; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--branco); border: 2.5px solid var(--azul); animation: popPonto .4s cubic-bezier(.2, .9, .3, 1.3) both; }
.cp-ponto--b { border-color: var(--azul-claro); }
.cp-med { position: absolute; top: 0; width: 2px; height: 30px; margin-left: -1px; background: var(--navy); }
.cp-med-txt { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: var(--texto-2); }
.cp-este { position: absolute; top: 4px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--navy); border: 4px solid var(--branco); box-shadow: 0 0 0 2px var(--navy), 0 6px 14px rgba(33, 43, 61, .3); }
.cp-este-txt { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); background: var(--navy); color: var(--branco); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.cp-res { display: grid; gap: 2px; }
.cp-res-v { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.cp-res-v small { font-size: 14px; color: var(--texto-2); margin-left: 4px; font-family: system-ui, sans-serif; }
.cp-res > span { font-weight: 650; }
.cp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.cp-k { display: grid; gap: 2px; padding: 14px 16px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); margin: 0 -1px -1px 0; }
.cp-k strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.cp-k > span:last-child { font-size: 13px; color: var(--texto-2); }
.cp-tab { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.cp-tab-cab > span { white-space: nowrap; }
.cp-mini .img-vazia { font-size: 0; gap: 0; }
.cp-tab-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 16px; background: var(--azul-suave); font-size: 14px; }
.cp-cols { display: none; }
@media (min-width: 640px) { .cp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; gap: 12px; padding: 10px 16px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); border-bottom: 1px solid var(--linha); } .cp-cols span + span { text-align: right; } }
.cp-lista { list-style: none; margin: 0; padding: 0; }
.cp-linha { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "f i t" "f i m"; gap: 2px 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--linha); animation: entra .3s ease-out both; }
@media (min-width: 640px) { .cp-linha { grid-template-columns: 56px minmax(0, 1fr) 96px 96px; grid-template-areas: "f i m t"; } }
.cp-linha--este { box-shadow: inset 0 0 0 2px var(--navy); border-radius: 10px; background: rgba(33, 43, 61, .03); }
.cp-mini { grid-area: f; width: 56px; height: 48px; border-radius: 8px; }
.cp-mini .img-vazia .ic { width: 18px; height: 18px; }
.cp-info { grid-area: i; display: grid; gap: 2px; min-width: 0; }
.cp-info > strong { font-size: 16px; }
.cp-trilho2 { display: block; height: 5px; border-radius: 3px; background: rgba(33, 43, 61, .08); overflow: hidden; margin-top: 4px; }
.cp-barra { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--azul-claro), var(--azul)); transform-origin: left center; animation: cresceX .7s cubic-bezier(.2, .8, .2, 1) both; }
.cp-barra--c { background: linear-gradient(90deg, var(--azul), var(--azul-texto)); }
.cp-barra--este { background: var(--navy); }
.cp-m2 { grid-area: m; text-align: right; font-size: 15px; }
.cp-tag { grid-area: t; justify-self: end; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.cp-tag--b { background: var(--azul-suave); color: var(--azul-texto); }
.cp-tag--c { background: rgba(33, 43, 61, .08); color: var(--navy); }
.cp-tag--igual { background: var(--suave); color: var(--texto-2); border: 1px solid var(--linha); }
.cp-tag--este { background: var(--navy); color: var(--branco); }
.cp-mais { width: 100%; min-height: 48px; border: 0; background: var(--branco); color: var(--azul-texto); font-weight: 700; cursor: pointer; }
.cp-mais:hover { background: var(--azul-suave); }
@keyframes popPonto { from { transform: scale(0); opacity: 0; } }
@keyframes cresceX { from { transform: scaleX(0); } }

/* Planta 3D */
.p3-grade { display: grid; gap: 16px; }
@media (min-width: 900px) { .p3-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; } }
.p3 { position: relative; min-height: 320px; border-radius: var(--raio); overflow: hidden; perspective: 900px; cursor: grab; touch-action: pan-y; user-select: none;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, var(--branco), rgba(46, 130, 247, .10) 70%), var(--papel); border: 1px solid var(--linha); }
.p3::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(33, 43, 61, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(33, 43, 61, .05) 1px, transparent 1px); background-size: 24px 24px; }
.p3--arrasta { cursor: grabbing; }
.p3-incl, .p3-giro, .p3-cena { position: absolute; left: 50%; top: 56%; width: 0; height: 0; transform-style: preserve-3d; }
.p3-giro { left: 0; top: 0; }
.p3-cena { left: 0; top: 0; }
.p3-giro--auto { animation: p3Gira 22s linear infinite; }
@keyframes p3Gira { to { transform: rotateY(360deg); } }
.p3-f { position: absolute; left: 0; top: 0; backface-visibility: visible; }
.p3-parede { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(46, 130, 247, .16)); border: 1.5px solid rgba(46, 130, 247, .55); }
.p3-teto { border: 1.5px dashed rgba(46, 130, 247, .4); }
.p3-chao { background: linear-gradient(135deg, rgba(46, 130, 247, .28), rgba(75, 168, 253, .18)); border: 2px solid var(--azul); display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); grid-auto-rows: 1fr; gap: 3px; padding: 4px; box-shadow: 0 0 40px rgba(46, 130, 247, .35); }
.p3-t { display: grid; place-items: center; background: rgba(255, 255, 255, .7); border-radius: 4px; color: var(--azul-texto); }
.p3-t .ic { width: 14px; height: 14px; }
.p3-a { position: absolute; left: 12px; top: 12px; }
.p3-b { position: absolute; right: 12px; top: 12px; }
.p3-rot { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.p3-rot-t { background: rgba(255, 255, 255, .94); border: 1px solid var(--linha); border-radius: 999px; padding: 5px 14px; font-size: 14px; font-weight: 700; }
.p3-icones { display: flex; gap: 6px; background: rgba(255, 255, 255, .94); border: 1px solid var(--linha); border-radius: 999px; padding: 6px; }
.p3-ico { display: inline-flex; align-items: center; gap: 2px; height: 32px; min-width: 32px; justify-content: center; border-radius: 50%; padding: 0 6px; background: var(--navy); color: var(--branco); font-size: 13px; }
.p3-ico .ic { width: 16px; height: 16px; }
.p3-foto { position: absolute; left: 12px; bottom: 12px; width: 44%; max-width: 190px; aspect-ratio: 4 / 3; border: 3px solid var(--branco); border-radius: 14px; padding: 0; overflow: hidden; background: var(--branco); cursor: pointer; box-shadow: 0 10px 24px rgba(33, 43, 61, .25); }
.p3-foto .img { position: absolute; inset: 0; border-radius: 0; }
.p3-foto .chip-esc { position: absolute; left: 8px; bottom: 8px; padding: 4px 10px; font-size: 11px; }
.p3-dots { position: absolute; right: 8px; bottom: 12px; display: flex; gap: 4px; }
.p3-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.p3-dots i.on { background: var(--branco); }
.p3-lado { display: grid; gap: 14px; align-content: start; }
.p3-big { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.p3-big strong { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(90deg, var(--azul-texto), var(--azul)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.p3-big span { font-weight: 650; color: var(--texto-2); }
.p3-big--m { border: 0; padding: 0; }
.p3-big--m strong { font-size: 32px; }
.p3-comodos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 10px 14px; max-height: 196px; overflow: auto; }
.p3-comodos li { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; }
.p3-cic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--navy); color: var(--branco); display: grid; place-items: center; }
.p3-cic .ic { width: 18px; height: 18px; }
.p3-q { display: grid; gap: 4px; }
.p3-reg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.p3-reg-t { display: flex; flex-direction: column; font-size: 12px; color: var(--texto-2); }
.p3-reg-t strong { font-size: 14px; color: var(--navy); }
.p3-reg-b { display: grid; gap: 4px; }
.p3-reg-b i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--azul), var(--azul-claro)); transform-origin: left center; }
.p3-reg-b i.u { background: rgba(33, 43, 61, .25); }
.p3-nota { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--texto-2); }
.p3-nota .ic { width: 16px; height: 16px; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .p3-giro--auto, .mp-pulso, .cp-ponto, .cp-barra { animation: none !important; }
}

/* Tela única em vidro */
:root { --claro: #ffffff; --noite: #212b3d; --vidro: rgba(255, 255, 255, .62); --vidro-borda: rgba(255, 255, 255, .75); }
body.modo-painel .pagina { grid-template-columns: minmax(0, 1fr); max-width: 1440px; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
body.modo-painel .busca { position: static; width: auto; max-width: none; margin: 0; }
body.modo-painel .busca.busca--recolhida { padding: 8px 10px 8px 16px; }
body.modo-painel .busca--recolhida .busca-area { display: none; }
body.modo-painel .busca--recolhida .busca-resumo { display: flex; }
body.modo-painel .saida { gap: 10px; }

.painel { display: grid; gap: 12px; min-width: 0; }
.pn-hero { min-width: 0; }
.pn-hero .dono { min-height: 100%; }   /* 04/11/2026.. com height: 100% + overflow hidden o fim do cartão (índice de oportunidade) era cortado */
@media (min-width: 760px) {
  .painel { height: calc(100dvh - var(--pn-top, 160px) - 12px); min-height: 520px;
    grid-template-columns: minmax(280px, 30%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pn-hero { grid-row: 1 / -1; overflow: auto; border-radius: var(--raio); scrollbar-width: thin; }
  .pn-nav { grid-column: 2; }
  .pn-palco { grid-column: 2; min-height: 0; }
}
@media (min-width: 1280px) { .painel { grid-template-columns: 360px minmax(0, 1fr); } }
@media (max-width: 1023px) {
  .pn-hero .dono-end, .pn-hero .dono-unidade, .pn-hero .nota-aviso:not(.nota-aviso--correcao) { display: none; }   /* o aviso de correção da busca nunca some no celular */
  .pn-hero .dono-topo { padding: 12px 16px; }
  .pn-hero .inscr-num { font-size: 24px; }
  .pn-hero .dono-corpo { padding: 14px 16px; gap: 8px; }
  .pn-hero .dono-nome { font-size: 20px; }
  .pn-hero .doc-num { font-size: 16px; }
  .pn-hero .rapido { padding-top: 10px; }
  .pn-hero .nota { margin: 0 16px; padding: 10px 12px; gap: 12px; }
  .pn-hero .nota-anel { width: 64px; height: 64px; }
  .pn-hero .nota-niv { font-size: 16px; }
  .pn-hero .hero-acoes { padding: 12px 16px 16px; }
  .pn-hero .hb-btn { min-height: 44px; font-size: 13px; }
}
@media (max-width: 759px) {
  .painel { height: calc(100dvh - var(--pn-top, 120px) - 8px); min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; }
  .pn-hero { max-height: 46dvh; overflow: auto; border-radius: var(--raio); }
  .pn-hero .dono-topo .hero-chips { display: none; }
  .pn-hero .nota { display: none; }
  .pn-hero .rapido-num { display: none; }
  .pn-palco { min-height: 0; }
}
.pn-nav { position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: 18px;
  background: var(--vidro); border: 1px solid var(--vidro-borda); box-shadow: 0 10px 30px rgba(33, 43, 61, .10), inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
.pn-nav::-webkit-scrollbar { display: none; }
.pn-ind { position: absolute; left: 0; top: 6px; bottom: 6px; width: 0; border-radius: 12px; background: linear-gradient(120deg, var(--azul-texto), var(--azul) 60%, var(--azul-claro));
  box-shadow: 0 6px 18px rgba(46, 130, 247, .4); transition: transform .35s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.pn-tab { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent;
  color: var(--texto-2); font-weight: 650; font-size: 14px; cursor: pointer; transition: color .2s ease; white-space: nowrap; }
.pn-tab .ic { width: 18px; height: 18px; }
.pn-tab:hover { color: var(--navy); }
.pn-tab[aria-selected="true"] { color: var(--claro); }

.pn-palco { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--vidro-borda);
  background: linear-gradient(160deg, rgba(46, 130, 247, .10), rgba(247, 248, 252, .6)); box-shadow: 0 20px 50px rgba(33, 43, 61, .10); isolation: isolate; }
.pn-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pn-fundo i { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; filter: blur(40px); opacity: .55; }
.pn-fundo .b1 { left: -8%; top: -14%; background: radial-gradient(circle, rgba(46, 130, 247, .55), transparent 70%); animation: deriva 18s ease-in-out infinite alternate; }
.pn-fundo .b2 { right: -10%; top: 20%; background: radial-gradient(circle, rgba(75, 168, 253, .5), transparent 70%); animation: deriva 22s ease-in-out -6s infinite alternate-reverse; }
.pn-fundo .b3 { left: 30%; bottom: -24%; background: radial-gradient(circle, rgba(23, 105, 204, .35), transparent 70%); animation: deriva 26s ease-in-out -12s infinite alternate; }
@keyframes deriva { to { transform: translate(14%, 10%) scale(1.15); } }
.pn-veu { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-100%); }
.pn-palco--troca .pn-veu { animation: veu .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes veu { 0% { opacity: 0; transform: translateX(-100%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }

.pn-pg { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; display: grid; align-content: start; gap: 14px;
  background: rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); scrollbar-width: thin; }
@media (min-width: 760px) { .pn-pg { padding: 22px; } }
.pn-pg .pc { background: rgba(255, 255, 255, .86); border-color: rgba(255, 255, 255, .9); box-shadow: 0 8px 26px rgba(33, 43, 61, .07); }
.pn-pg .pc.pc--escuro { background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(46, 130, 247, .4), transparent 60%), var(--noite); }
.pn-pg--entra { animation: pgIn .5s cubic-bezier(.2, .8, .2, 1) both; }
.pn-pg--entra > *, .pn-pg--entra > .visao > *, .pn-pg--entra .duas > * { animation: pgItem .55s cubic-bezier(.2, .8, .2, 1) both; }
.pn-pg--entra > :nth-child(2), .pn-pg--entra .duas > :nth-child(2), .pn-pg--entra > .visao > :nth-child(2) { animation-delay: .07s; }
.pn-pg--entra > :nth-child(3) { animation-delay: .14s; } .pn-pg--entra > :nth-child(4) { animation-delay: .21s; } .pn-pg--entra > :nth-child(n+5) { animation-delay: .28s; }
@keyframes pgIn { from { opacity: 0; transform: scale(.985); } }
@keyframes pgItem { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.resultado > .painel { animation: none; }
.pn-pg .duas { align-items: start; }
.pn-pg .pc { align-content: start; }

/* Hero */
.dono > :not(.dono-foto):not(.dono-scan) { position: relative; z-index: 1; }
.dono-foto { position: absolute; inset: 0; z-index: 0; }
.dono-foto .img { position: absolute; inset: 0; border-radius: 0; background: transparent; }
.dono-foto img { filter: saturate(.8); }
.dono-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33, 43, 61, .55), rgba(33, 43, 61, .92) 55%, var(--noite)); }
.dono-foto .img--ok img { opacity: .55; }
.dono-scan { position: absolute; left: 0; top: 0; z-index: 2; width: 45%; height: 2px; background: linear-gradient(90deg, transparent, var(--azul-claro), transparent); animation: scanH 3.6s ease-in-out infinite; }
@keyframes scanH { from { transform: translateX(-100%); } to { transform: translateX(240%); } }
.nota { display: flex; align-items: center; gap: 16px; margin: 0 20px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.nota-anel { width: 92px; height: 92px; flex: none; animation: popIn .6s cubic-bezier(.2, .9, .3, 1.3) both .15s; }
.na-trilho { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 10; }
.na-arco { fill: none; stroke-width: 10; stroke-linecap: round; }
.na-num { font: 800 34px system-ui, sans-serif; fill: var(--branco); text-anchor: middle; }
.na-sub { font: 600 11px system-ui, sans-serif; fill: rgba(255, 255, 255, .7); text-anchor: middle; }
.nota-txt { display: grid; gap: 2px; min-width: 0; }
.nota-niv { font-size: 20px; letter-spacing: -.02em; text-transform: none; }
.nota-sub { font-size: 13px; color: rgba(255, 255, 255, .75); }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } }
.hero-acoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 20px 20px; }
.dono .hb-btn { min-height: 46px; padding: 0 8px; font-size: 14px; background: rgba(255, 255, 255, .08); color: var(--claro); border-color: rgba(255, 255, 255, .2); }
.hero-acoes .hb-btn--cheio { grid-column: 1 / -1; }   /* relatório e cópias.. rótulo longo, largura toda da grade de três */
.dono .hb-btn:hover { background: rgba(255, 255, 255, .16); }
.dono .hb-btn .ic { width: 18px; height: 18px; }
@media (max-width: 1023px) { .dono .dono-end { display: none; } }

/* Visão geral */
.visao { display: grid; gap: 14px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; align-content: start; }
.tile { position: relative; display: grid; gap: 2px; text-align: left; padding: 14px; border-radius: 16px; cursor: pointer; overflow: hidden;
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 18px rgba(33, 43, 61, .06); transition: transform .2s ease; color: var(--navy); }
.tile:hover { transform: translateY(-3px); }
.tile:active { transform: scale(.98); }
.tile-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--claro); background: linear-gradient(135deg, var(--azul-texto), var(--azul-claro)); margin-bottom: 6px; }
.tile-ic .ic { width: 18px; height: 18px; }
.tile-rot { font-size: 13px; color: var(--texto-2); font-weight: 600; }
.tile-v { font-size: 20px; font-weight: 800; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-sub { font-size: 12px; color: var(--texto-2); }
.tile-seta { position: absolute; right: 12px; top: 14px; color: var(--azul-texto); opacity: .6; }
.tile-seta .ic { width: 16px; height: 16px; }
.sinais { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sinal { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.sinal-s { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; }
.sinal--p .sinal-s { background: var(--azul-suave); color: var(--azul-texto); }
.sinal--n .sinal-s { background: var(--erro-fundo); color: var(--erro); }
.sinal--z .sinal-s { background: var(--suave); color: var(--texto-2); }

/* Mercado */
.stat--dest { background: linear-gradient(135deg, var(--azul-texto), var(--azul)); }
.stat--dest span { color: rgba(255, 255, 255, .85); }
.stat--dest strong { color: var(--claro); }
.lt-svg { width: 100%; height: auto; display: block; overflow: visible; }
.lt-grade { stroke: rgba(33, 43, 61, .08); }
.lt-area2 { opacity: .22; }
.lt-traco { fill: none; stroke: var(--azul); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: traco 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes traco { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.lt-p { fill: var(--branco); stroke: var(--azul); stroke-width: 3; }
.lt-p--q { stroke: var(--azul-texto); fill: var(--azul-claro); }
.lt-p--r { stroke: var(--navy); fill: var(--branco); }
.lt-v { font: 700 10px system-ui, sans-serif; fill: var(--navy); text-anchor: middle; }
.lt-x { font: 600 10px system-ui, sans-serif; fill: rgba(33, 43, 61, .72); text-anchor: middle; }
.eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.evento { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--suave); font-size: 14px; }
.evento--q { background: var(--azul-suave); }
.evento--r { background: rgba(33, 43, 61, .08); }
.ev-data { color: var(--texto-2); }

/* Acompanhamento e recentes */
.acomp-st { display: flex; flex-wrap: wrap; gap: 8px; }
.acomp-b { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linha); background: var(--branco); color: var(--navy); font-weight: 650; cursor: pointer; transition: transform .15s ease; }
.acomp-b .ic { width: 16px; height: 16px; }
.acomp-b:active { transform: scale(.97); }
.acomp-b.on { background: var(--navy); color: var(--branco); border-color: var(--navy); }
.acomp-nota { min-height: 110px; resize: vertical; font: inherit; line-height: 1.5; }
.acomp-info { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--texto-2); }
.acomp-info .ic { width: 16px; height: 16px; color: var(--azul-texto); }
.recentes { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha); display: grid; gap: 8px; }
.rec-cab { display: flex; justify-content: space-between; align-items: center; }
.rec-limpar { border: 0; background: none; color: var(--azul-texto); font-weight: 650; min-height: 44px; padding: 0 6px; cursor: pointer; }
.rec-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rec-b { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 12px; background: var(--branco); cursor: pointer; color: var(--navy); }
.rec-b:hover { background: var(--azul-suave); }
.rec-st { flex: none; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--navy); color: var(--branco); }

@media print {
  #ficha *, #ficha *::before, #ficha *::after { animation: none !important; transition: none !important; }
  .fi-graf > * { break-inside: avoid; margin: 8px 0; }
  .fi-graf .nota { background: var(--noite); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .pn-fundo i, .dono-scan, .pn-veu { animation: none !important; }
  .pn-ind { transition: none; }
}


.visao .kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr)); }
@media (max-width: 520px) { .visao .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Capa (tela inicial).. herda o HERÓI da home do site (04/11/2026, pedido do dono.. "a capa precisa herdar 100% o visual da home").
   Fonte das regras.. src/pages/home-captacao-heroi.css (.hc-hero*, .hc-selo, .hc-h1, .hc-grad, .hc-hero__sub, .hc-garantias, .hc-bt), com o prefixo capa- no lugar de hc-.
   O texto vem na <aside class="vitrine"> e o formulário na <section class="busca">; no resultado a vitrine fica só para o leitor de tela e o topo antigo (.topo) volta. */
.vitrine { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.capa-fundo { display: none; }
/* o logo solto da capa dos links (a vitrine pública usa o menu do site no lugar) */
.capa-marca { display: none; }
body:not(.tem-saida) .capa-marca { display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px; }
.capa-marca .marca { font-size: 34px; }
.capa-sub { font-size: 14px; color: rgba(255, 255, 255, .78); }
body:not(.tem-saida) .topo { display: none; }
body:not(.tem-saida) .pagina {
  --hc-px: max(24px, calc((100% - 1120px) / 2));
  --hc-fonte: 'Plus Jakarta Sans', 'Plus Jakarta Fallback', system-ui, -apple-system, sans-serif;
  position: relative; isolation: isolate; overflow: hidden; max-width: none; margin: 0; gap: 56px; align-items: center;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  padding: 80px var(--hc-px) 48px; color: #fff; font-family: var(--hc-fonte); -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse 55% 70% at 80% 10%, #2c5199 0%, transparent 60%), radial-gradient(ellipse 45% 60% at 0% 100%, #24427d 0%, transparent 60%), #1a2238;
}
@media (min-width: 1100px) { body:not(.tem-saida) .pagina { --hc-px: max(4vw, calc((100% - 1120px) / 2)); grid-template-columns: 1.1fr 1fr; } }
/* 05/11/2026, pedido do dono (print da faixa branca embaixo do herói).. "aqui é só a sessão de login, ela deve se ajustar ao computador e ao dispositivo".. na capa deslogada o herói ocupa a tela INTEIRA (menu do site em cima e o resto da altura para o herói, sem faixa clara por baixo), em qualquer tamanho; o conteúdo fica centralizado na vertical e, se o celular for baixo demais, a página rola normalmente */
body:not(.tem-saida):not(.modo-painel) { background: #1a2238; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:not(.tem-saida):not(.modo-painel) .pagina { flex: 1 0 auto; align-content: center; }

/* o fundo do herói.. foto, véu e a grade suave (as mesmas camadas da home) */
body:not(.tem-saida) .capa-fundo { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.capa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capa-veu { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26, 34, 56, .94) 0%, rgba(26, 34, 56, .8) 45%, rgba(26, 34, 56, .55) 100%); }
.capa-grade { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px; }
@media (max-width: 1023px) { .capa-foto { bottom: auto; height: 548px; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%); } }

/* o texto */
body:not(.tem-saida) .vitrine { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; order: -1; }
@media (min-width: 1100px) { body:not(.tem-saida) .vitrine { align-self: start; } }
.capa-txt { display: flex; flex-direction: column; gap: 26px; }
.capa-selo { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 12px; font-weight: 600; color: #d3dbec; }
.capa-pulso { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: capaPulso 1.6s ease-out infinite; flex: none; }
@keyframes capaPulso { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 100% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } }
.capa-h1 { margin: 0; font-size: clamp(44px, min(6.2vw, 8.6vh), 78px); line-height: .98; letter-spacing: -.05em; font-weight: 800; text-wrap: balance; color: #fff; }
.capa-grad { background: linear-gradient(90deg, #7fb0ff, #9cc0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.capa-resumo { font-size: 18px; line-height: 1.6; color: #c9d2e6; max-width: 520px; text-wrap: pretty; }
.capa-garantias { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 13px; color: #a9b4cc; }
.capa-garantias li { display: inline-flex; align-items: center; gap: 8px; }
.capa-garantias .ic { width: 14px; height: 14px; color: #9cc0ff; }
@media (max-width: 700px) { .capa-h1 { letter-spacing: -.03em; word-spacing: .06em; } body:not(.tem-saida) .pagina { padding-top: 28px; } .capa-txt { gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .capa-pulso { animation: none; } }

/* o cartão do formulário.. o mesmo vidro escuro do painel da direita da home (.hc-painel) */
body:not(.tem-saida) .busca {
  position: relative; z-index: 2; width: 100%; max-width: 520px; justify-self: center; margin: 0; padding: 28px; display: block; overflow: visible; color: #fff;
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(32, 43, 72, .82); box-shadow: 0 40px 80px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body:not(.tem-saida) .busca-area { position: relative; width: 100%; max-width: none; margin: 0; }
body:not(.tem-saida) .busca h2 { font-size: 24px; line-height: 1.15; letter-spacing: -.03em; font-weight: 800; color: #fff; }
body:not(.tem-saida) .busca .ajuda, body:not(.tem-saida) .busca .dica, body:not(.tem-saida) .busca .opcional { color: rgba(255, 255, 255, .74); }
body:not(.tem-saida) .busca .campo label { color: #dfe3ec; font-size: 14px; font-weight: 600; }
body:not(.tem-saida) .busca .campo input { min-height: 48px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .24); border-radius: 10px; color: #fff; }
body:not(.tem-saida) .busca .campo input::placeholder { color: rgba(255, 255, 255, .62); opacity: 1; }
body:not(.tem-saida) .busca .campo input:focus-visible { border-color: #9cc0ff; outline: 3px solid #9cc0ff; outline-offset: 3px; background: rgba(255, 255, 255, .09); }
body:not(.tem-saida) .busca .campo input[aria-invalid="true"] { border-color: #ffb4a8; }
body:not(.tem-saida) .busca .btn:focus-visible, body:not(.tem-saida) .busca .btn-google:focus-visible, body:not(.tem-saida) .busca summary:focus-visible, body:not(.tem-saida) .busca .rec-b:focus-visible { outline: 3px solid #9cc0ff; outline-offset: 3px; }
/* o botão Localizar.. o botão claro da home (.hc-bt--claro) */
body:not(.tem-saida) .busca .btn--pri { background: #fff; color: #1a2238; border: 0; border-radius: 10px; min-height: 52px; font-size: 15px; font-weight: 500; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
body:not(.tem-saida) .busca .btn--pri:hover { background-image: linear-gradient(rgba(26, 34, 56, .1), rgba(26, 34, 56, .1)); }
body:not(.tem-saida) .alt { border-top-color: rgba(255, 255, 255, .12); }
body:not(.tem-saida) .alt-cab { color: #9cc0ff; }
body:not(.tem-saida) .recentes { border-top-color: rgba(255, 255, 255, .12); }
body:not(.tem-saida) .recentes .rotulo { color: rgba(255, 255, 255, .74); }
body:not(.tem-saida) .rec-limpar { color: #9cc0ff; }
body:not(.tem-saida) .rec-b { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #fff; }
body:not(.tem-saida) .rec-b:hover { background: rgba(255, 255, 255, .09); }
body:not(.tem-saida) .rec-st { background: var(--azul); }
.capa-nota { display: none; }
body:not(.tem-saida) .capa-nota { display: flex; gap: 10px; align-items: center; margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.capa-nota .ic { width: 16px; height: 16px; color: #9cc0ff; }
/* notebook e janela baixa.. o herói e o formulário cabem na primeira dobra (as mesmas folgas da home) */
@media (min-width: 1024px) and (max-height: 820px) {
  body:not(.tem-saida) .pagina { padding-top: 44px; padding-bottom: 52px; }
  .capa-txt { gap: 18px; }
  .capa-resumo { font-size: 16px; line-height: 1.55; }
  body:not(.tem-saida) .busca { padding: 22px 24px; }
  body:not(.tem-saida) .form { margin-top: 12px; gap: 10px; }
  body:not(.tem-saida) .busca .dica { display: none; }
  body:not(.tem-saida) .busca .recentes { display: none; }
}

body:not(.tem-saida) .saida { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; max-width: 420px; }
body:not(.tem-saida) .saida:empty, body:not(.tem-saida) .saida > [hidden] { pointer-events: none; }

.recentes, .rec-lista { grid-template-columns: minmax(0, 1fr); }
.rec-lista > li, .rec-b { min-width: 0; }


/* Login Google */
.login { display: none; }
body.sem-login .login { display: grid; gap: 14px; }
body.sem-login #f-endereco, body.sem-login .recentes, body.sem-login .busca-tit, body.sem-login .busca-area > .ajuda { display: none; }
.login-tit { font-size: clamp(30px, 7vw, 40px); letter-spacing: -.03em; line-height: 1.08; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; margin-top: 8px; border-radius: 14px; background: #fff; color: #1f1f1f;
  font-weight: 650; font-size: 16px; text-decoration: none; border: 1px solid #dadce0; box-shadow: 0 14px 34px rgba(33, 43, 61, .3); transition: transform .15s ease; }
.btn-google:hover { box-shadow: 0 18px 40px rgba(33, 43, 61, .38); }
.btn-google:active { transform: scale(.98); }
.btn-google:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; }
.g-logo { width: 22px; height: 22px; flex: none; }
.btn-google--carregando { opacity: .75; pointer-events: none; }
.btn-google--carregando .g-logo { animation: gira 1s linear infinite; }
.login-nota { display: flex; gap: 8px; align-items: center; font-size: 13px; color: rgba(255, 255, 255, .6); }
.login-nota .ic { width: 16px; height: 16px; color: var(--azul-claro); }
/* Entrada por usuário e senha e botão oficial do Google (05/11/2026; sobreposto em 06/11/2026, "um clique só").
   O botão oficial do Google (GIS, abre a escolha de conta num clique) fica SOBRE o botão branco da marca: transparente (opacity, nunca display
   nem visibility, senão o teclado e o leitor de tela o perdem), do mesmo tamanho, acima na pilha. O branco é só o rótulo. O GIS limita o botão a
   400 px, então o grupo para em 400 px e o branco acompanha */
.login-google { position: relative; width: 100%; max-width: 400px; margin: 8px auto 0; border-radius: 14px; }
.login-google .btn-google { margin-top: 0; }
.login-google-oficial { display: none; }
.login-google--sobre .login-google-oficial { display: block; position: absolute; inset: 0; z-index: 2; opacity: 0; overflow: hidden; }   /* retangular de propósito.. os cantos arredondados do branco também respondem ao clique */
.login-google--sobre .login-google-oficial > div, .login-google--sobre .login-google-oficial > div > div, .login-google--sobre .login-google-oficial iframe { width: 100% !important; height: 100% !important; max-width: none !important; min-width: 0 !important; }
.login-google--sobre .login-google-oficial [role="button"] { display: block; box-sizing: border-box; width: 100% !important; height: 100% !important; max-width: none !important; min-width: 0 !important; cursor: pointer; }
/* foco do teclado no controle oficial (invisível).. o anel aparece no grupo, com a mesma cor do foco do botão branco */
.login-google:focus-within { outline: 3px solid var(--azul-claro); outline-offset: 3px; }
@supports selector(:has(*)) {
  .login-google:focus-within { outline: 0; }
  .login-google:has(:focus-visible) { outline: 3px solid var(--azul-claro); outline-offset: 3px; }
}
.login-google--sobre:hover .btn-google { box-shadow: 0 18px 40px rgba(33, 43, 61, .38); }
.login-ou { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .72); font-size: 14px; }
.login-ou::before, .login-ou::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .24); }
.login-senha { display: grid; gap: 12px; }
#login .campo input { min-height: 48px; }
#login .campo input:focus-visible { outline: 3px solid #9cc0ff; outline-offset: 3px; border-color: #9cc0ff; }
.senha-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.login-ver { min-height: 48px; min-width: 88px; padding: 0 14px; border-radius: 10px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.login-ver:hover { background: rgba(255, 255, 255, .1); }
.login-ver:focus-visible { outline: 3px solid #9cc0ff; outline-offset: 3px; }
.login-entrar { min-height: 52px; border: 0; border-radius: 14px; background: var(--azul-claro); color: var(--navy); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.login-entrar:hover { filter: brightness(1.08); }
.login-entrar:disabled { opacity: .7; cursor: progress; }
.login-entrar:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.login-erro { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 180, 168, .14); border: 1px solid #ffb4a8; color: #ffd9d3; font-size: 14px; line-height: 1.45; }
.login-erro[hidden], .login-aviso[hidden] { display: none; }
.login-nota--acesso { color: rgba(255, 255, 255, .72); }
.sessao { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 26px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.sessao-av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--azul-texto), var(--azul-claro)); }
.sessao-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sessao-t strong, .sessao-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessao-t strong { font-size: 14px; }
.sessao-t span { font-size: 12px; color: rgba(255, 255, 255, .62); }
.sessao-sair { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font-weight: 650; cursor: pointer; }
.sessao-sair:hover { background: rgba(255, 255, 255, .1); }
body.tem-saida .sessao { display: none; }

/* ===== Uma tela só no computador (pedido do dono, 03/11/2026.. "precisa tudo caber em uma única tela quando aberto no
   computador" e "o mais responsivo possível"). A ilustração da espera encolhe com a altura da janela; etapas e margens
   ficam compactas; a capa aperta em janela baixa. No celular a rolagem continua (o conteúdo não cabe numa tela de bolso). */
@media (min-width: 1024px) {
  body.tem-saida:not(.modo-painel) .pagina { padding-top: 16px; padding-bottom: 16px; gap: 20px; }
  body.tem-saida:not(.modo-painel) .busca { top: 12px; padding: 20px 24px; }
  body.tem-saida:not(.modo-painel) .busca h2 { font-size: 22px; }
  .espera { gap: 10px; padding-top: 16px; padding-bottom: 16px; }
  .cena-moldura { height: clamp(110px, calc(100dvh - 500px), 380px); }
  .cena { height: 100%; width: 100%; }
  .espera-cab h2 { font-size: 18px; }
  .etapa { min-height: 34px; padding: 2px 10px; }
  .espera-nota { padding-top: 8px; font-size: 14px; }
}
@media (min-width: 1024px) and (max-height: 940px) {
  .campo .dica { margin-top: 2px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .busca .ajuda, .campo .dica { display: none; }
  .topo-in { padding-top: 8px; padding-bottom: 8px; }
  body.tem-saida:not(.modo-painel) .busca { padding: 14px 20px; }
  body.tem-saida:not(.modo-painel) .busca h2 { font-size: 20px; margin-bottom: 4px; }
  body.tem-saida:not(.modo-painel) .form { gap: 10px; margin-top: 10px; }
  body.tem-saida:not(.modo-painel) .alt { margin-top: 8px; padding-top: 8px; }
  /* o painel do resultado rola por dentro das colunas.. a página não ganha barra */
  .painel { min-height: 0; }
}

/* consultas recentes no computador.. duas colunas baixas, e quantas cabem pela altura da janela (03/11/2026) */
@media (min-width: 1024px) {
  .busca .rec-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .busca .rec-b { min-height: 44px; padding: 4px 10px; gap: 8px; }
  .busca .rec-lista > li:nth-child(n+5) { display: none; }
  .painel { height: calc(100dvh - var(--pn-top, 160px) - 14px); }
}
@media (min-width: 1024px) and (max-height: 940px) {
  .busca .recentes { margin-top: 10px; padding-top: 8px; gap: 4px; }
  .busca .rec-lista > li:nth-child(n+3) { display: none; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  body.tem-saida .busca .recentes { display: none; }
}

/* a espera não pode passar nem 1 px */
@media (min-width: 1024px) { .cena-moldura { height: clamp(110px, calc(100dvh - 520px), 380px); } }
@media (min-width: 1024px) { body.tem-saida:not(.modo-painel) .pagina { padding-bottom: 12px; } }

/* topo alinhado à página em todos os estados (pedido do dono, 03/11/2026.. "alinhe isso melhor") */
@media (min-width: 1024px) {
  .topo-in { padding-left: 24px; padding-right: 24px; }
  body.modo-painel .topo-in { max-width: 1440px; }
}

/* ===== Cartão do resultado mais fino (pedido do dono, 03/11/2026.. "está muito grosseiro tudo muito grande.. padronizar estilo de
   botões.. o nome do proprietário deve ser menor e sem negrito" e "os botões ficam escondidos.. aparecer tudo sem barra de rolagem").
   Tamanhos menores, um padrão único de botão, e os botões de contato e as ações presos à base do cartão (sempre à vista). */
.inscr-num { font-size: 26px; font-weight: 700; }
.inscr-rot { font-size: 12px; }
.dono-topo, .dono .dono-topo { padding: 12px 16px; }
.selo { padding: 4px 10px; font-size: 13px; font-weight: 600; gap: 5px; }
.selo .ic { width: 14px; height: 14px; }
.dono-unidade, .dono .dono-unidade { padding: 8px 16px; font-size: 14px; font-weight: 500; }
.nota-aviso { padding: 8px 12px; font-size: 14px; line-height: 1.45; }
.dono .nota-aviso { margin: 12px 16px 0; }
.dono-corpo { padding: 14px 16px; gap: 8px; }
.dono .rotulo { font-size: 11px; letter-spacing: .08em; }
.dono-nome { font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.doc-num { font-size: 16px; font-weight: 600; }
.doc-tipo { font-size: 12px; }
.dono-end { font-size: 14px; line-height: 1.45; }
.dono-end .ic { width: 16px; height: 16px; }

/* um padrão só de botão no cartão.. mesma altura, raio, fonte e peso */
.dono .btn, .dono .btn-icone, .dono .hb-btn {
  min-height: 40px; border-radius: 10px; font-size: 14px; font-weight: 600; padding: 0 12px; gap: 6px; box-shadow: none;
}
.dono .btn .ic, .dono .btn-icone .ic, .dono .hb-btn .ic { width: 16px; height: 16px; }
.dono .btn-icone { border-width: 1px; }
@media (pointer: coarse) { .dono .btn, .dono .btn-icone, .dono .hb-btn { min-height: 44px; } }

/* contatos e ações presos à base do cartão.. o resto rola por cima, os botões nunca somem */
.pn-hero .dono { display: flex; flex-direction: column; min-height: 100%; }
.pn-hero .dono-corpo { flex: 1 0 auto; }
.pn-hero .rapido { position: sticky; bottom: 60px; z-index: 1; margin-top: 6px; padding: 10px 0 6px; background: var(--navy); }
.pn-hero .hero-acoes { position: sticky; bottom: 0; z-index: 2; padding: 8px 16px 12px; gap: 6px; background: var(--navy); }
.pn-hero .hero-acoes--rel { position: static; background: transparent; grid-template-columns: minmax(0, 1fr); }   /* os três botões do relatório ficam fora da barra fixa de baixo */
.pn-hero .hero-acoes--rel .hb-btn, .hero-acoes--rel .hb-btn { min-width: 0; max-width: 100%; overflow: hidden; }   /* 09/11/2026.. os três botões do relatório em UMA linha */
.hero-acoes--rel .hb-btn > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }   /* rede de segurança.. nunca quebra, corta com reticências */

/* ===== Painel do resultado compacto e organizado (pedido do dono, 03/11/2026.. "está tudo muito grande grosseiro sem organização") */
.pn-pg { font-size: 14px; gap: 12px; padding: 14px; }
.pn-pg .pc { padding: 14px 16px; gap: 10px; border-radius: 14px; }
.pc-cab { gap: 10px; }
.pc-tit h3 { font-size: 15px; }
.pn-pg .sec-ic { width: 32px; height: 32px; border-radius: 10px; }
.pn-pg .sec-ic .ic { width: 16px; height: 16px; }
.pn-pg .sec-resumo { font-size: 13px; }

/* contatos.. uma linha por contato, número sem quebrar, botões pequenos e iguais à direita */
.contato { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; }
.contato-ic { width: 28px; height: 28px; }
.contato-ic .ic { width: 14px; height: 14px; }
.contato-valor { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.contato-acoes { grid-column: auto; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
.contato-acoes .btn, .contatos .contato-acoes .btn { flex: none; min-height: 32px; padding: 0 10px; font-size: 13px; font-weight: 600; border-radius: 8px; gap: 5px; box-shadow: none; }
.contato-acoes .btn .ic { width: 14px; height: 14px; }
.sem-whats { min-height: 32px; padding: 0 8px; font-size: 12px; border-radius: 8px; white-space: nowrap; }
@media (pointer: coarse) { .contato-acoes .btn, .sem-whats { min-height: 44px; } }
@media (max-width: 520px) {
  .contato { grid-template-columns: 28px minmax(0, 1fr); }
  .contato-acoes { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
}

/* pendências e empresas no mesmo padrão */
.fiscal { padding: 10px 12px; gap: 10px; border-radius: 10px; }
.fiscal strong { font-size: 14px; }
.fiscal span { font-size: 13px; }
.fiscal-ic { width: 32px; height: 32px; }
.fiscal-ic .ic { width: 16px; height: 16px; }
.mini { padding: 12px; gap: 8px; }
.mini-nome { font-size: 14px; }
.mini-acoes .btn { flex: none; min-height: 32px; padding: 0 10px; font-size: 13px; }

/* atalhos da visão geral.. grade regular e compacta */
.tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.tile { padding: 10px 12px; border-radius: 12px; gap: 0; }
.tile-ic { width: 26px; height: 26px; border-radius: 8px; margin-bottom: 6px; }
.tile-ic .ic { width: 14px; height: 14px; }
.tile-rot { font-size: 12px; }
.tile-v { font-size: 17px; font-weight: 700; }
.tile-sub { font-size: 11px; }
.tile-seta { right: 10px; top: 10px; }
.tile-seta .ic { width: 14px; height: 14px; }

/* cartões de escolha (unidades, ruas, imóveis).. uma linha só, sem quebra, mais baixos (pedido do dono, 03/11/2026) */
.btn-escolha { min-height: 48px; padding: 8px 12px; gap: 10px; border-width: 1px; border-radius: 10px; }
.be-txt strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.be-txt span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-escolha > .ic { width: 16px; height: 16px; flex: none; }

/* gráfico de unidades.. não estica com o painel (texto fixo), número de cima não corta, cor da marca */
.histo { max-width: 560px; max-height: 210px; margin: 6px auto 0; overflow: visible; padding-top: 14px; }
.hb { fill: rgba(46, 130, 247, .45); }
.hb--on { fill: var(--azul); filter: drop-shadow(0 4px 10px rgba(46, 130, 247, .35)); }
.h-txt { font-size: 9px; font-weight: 600; }
.h-txt--on { font-weight: 700; }

/* empresas.. cartões compactos e organizados, duas colunas no computador (pedido do dono, 03/11/2026.. "muito ruim, sem organização") */
.mini-lista { gap: 8px; }
@media (min-width: 1100px) { .pn-pg .mini-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini { padding: 10px 12px; gap: 6px; border-radius: 12px; background: var(--branco); }
.mini-cab { align-items: center; gap: 8px; flex-wrap: nowrap; }
.mini-nome { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; min-width: 0; }
.mini .selo { padding: 2px 8px; font-size: 11px; border-width: 1px; flex: none; }
.mini .selo .ic { width: 12px; height: 12px; }
.mini .dados { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.mini .dados dt { font-size: 11px; }
.mini .dados dd { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.mini .dados > :nth-last-child(-n+2) { grid-column: 1 / -1; }
.mini-acoes { gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
.mini-acoes .btn, .pn-pg .mini-acoes .btn { flex: none; min-height: 30px; padding: 0 10px; font-size: 12px; font-weight: 600; border-radius: 8px; gap: 4px; }
.mini-acoes .btn .ic { width: 13px; height: 13px; }
@media (pointer: coarse) { .mini-acoes .btn, .pn-pg .mini-acoes .btn { min-height: 44px; } }
.pn-pg .btn--bloco.btn--sec { min-height: 36px; font-size: 13px; border-radius: 10px; }
.pn-pg .rosca { width: 72px; height: 72px; }

/* "Alterar" com resultado na tela.. a busca abre como janela compacta POR CIMA do painel, sem empurrar nada (pedido do dono, 03/11/2026) */
body.modo-painel .busca:not(.busca--recolhida) {
  position: fixed; z-index: 60; top: 72px; left: 50%; transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 96px); overflow-y: auto;
  padding: 18px 20px; border-radius: 16px; box-shadow: 0 24px 60px rgba(33, 43, 61, .28), 0 0 0 100vmax rgba(33, 43, 61, .38);
  animation: entra .2s ease-out both;
}
body.modo-painel .busca:not(.busca--recolhida) h2 { font-size: 18px; }
body.modo-painel .busca:not(.busca--recolhida) .form { margin-top: 10px; gap: 10px; }
body.modo-painel .busca:not(.busca--recolhida) .campo input { min-height: 40px; }
body.modo-painel .busca:not(.busca--recolhida) .btn--grande { min-height: 44px; font-size: 15px; }
body.modo-painel .busca:not(.busca--recolhida) .busca-resumo { display: none; }
body.modo-painel .busca:not(.busca--recolhida) .busca-area { display: block; }
@media (prefers-reduced-motion: reduce) { body.modo-painel .busca:not(.busca--recolhida) { animation: none; } }


/* ===== Planos da vitrine (04/11/2026, ordem do dono.. "precisamos replicar o estilo já da nossa página").. CÓPIA FIEL das regras dos
   planos da home (src/pages/home-captacao.css, linhas 158 a 250, com ":where(.hc)" trocado por ".lp"), a mesma foto de fundo, a mesma
   fonte e as mesmas variáveis --hc-*. Se a home mudar, copiar de novo. A regra antiga .lp-* desta página foi substituída. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/plus-jakarta-sans.woff2') format('woff2'); }
.lp { display: none; }
body:not(.tem-saida) .lp { display: block; }
.lp { --hc-tinta: #1d2640; --hc-mudo: #5a6480; --hc-fonte: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --hc-px: max(24px, calc((100% - 1180px) / 2)); --hc-anel: #9cc0ff;
  font-family: var(--hc-fonte); -webkit-font-smoothing: antialiased; }
.lp h2, .lp h3, .lp p { margin: 0; }
.lp a { text-decoration: none; }
.lp .hc-cab { display: flex; flex-direction: column; gap: 10px; }
.lp .hc-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.lp .hc-h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.05; letter-spacing: -.045em; font-weight: 800; }
.lp a.hc-plano__bt--vazado { color: #1d2640; }
.lp a.hc-plano__bt--cheio { color: #fff; }
.lp .hc-plano__bt { text-decoration: none; }
.lp .hc-plano__bt:focus-visible, .lp a.hc-ultra__bt:focus-visible { outline: 2px solid var(--hc-anel); outline-offset: 3px; }
.hc-planos{position:relative;overflow:hidden;background:#121a2e;color:#fff}
.hc-planos__fundo{position:absolute;inset:0;pointer-events:none}
.hc-planos__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-planos__veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,26,46,.72) 0%,rgba(18,26,46,.3) 40%,rgba(18,26,46,.78) 100%)}
.hc-planos__grade{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px}
.hc-planos .hc-sec{position:relative;z-index:1}
@media (max-width:1023px){.hc-planos__foto{bottom:auto;height:760px;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%)}.hc-planos__veu{background:linear-gradient(180deg,rgba(18,26,46,.8) 0%,rgba(18,26,46,.6) 30%,#121a2e 100%)}}
.hc-planos .hc-rotulo{color:#7fb0ff}
.hc-planos .hc-h2{color:#fff}
.hc-planos .hc-sec{padding:56px var(--hc-px) 48px;display:flex;flex-direction:column;gap:40px}
.hc-planos__cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hc-planos .hc-h2{max-width:600px}
.hc-planos__apoio{font-size:15px;line-height:1.6;color:#c9d2e6;max-width:360px}
.hc-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;align-items:stretch}
.hc-plano{position:relative;background:#fff;color:var(--hc-tinta);border:2px solid #d6dce8;border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:18px;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .35s;will-change:transform}
.hc-plano--pro{border-color:#1565ff}
.hc-plano--ultra{background:radial-gradient(ellipse 90% 60% at 100% 0%,#2f5aa8 0%,transparent 60%),#1f2840;color:#fff;border-color:#1565ff;box-shadow:0 32px 64px rgba(21,101,255,.3)}
.hc-plano__brilho{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle 220px at var(--mx,50%) var(--my,0%),rgba(21,101,255,.10),transparent 70%);opacity:var(--o,0);transition:opacity .35s}
.hc-plano--pro .hc-plano__brilho{background:radial-gradient(circle 220px at var(--mx,50%) var(--my,0%),rgba(21,101,255,.14),transparent 70%)}
.hc-plano--ultra .hc-plano__brilho{background:radial-gradient(circle 220px at var(--mx,50%) var(--my,0%),rgba(127,176,255,.22),transparent 70%)}
.hc-plano__selo{position:absolute;top:-13px;left:30px;background:#1565ff;color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:6px 12px}
.hc-plano__cab{display:flex;flex-direction:column;gap:6px}
.hc-plano__nome{font-size:12px;font-weight:700;letter-spacing:.1em;color:#5a6480}
.hc-plano--pro .hc-plano__nome{color:#1565ff}
.hc-plano--ultra .hc-plano__nome{color:#4d8dff}
.hc-plano__desc{font-size:14px;color:#5a6480;line-height:1.45;min-height:2.9em}
.hc-plano--ultra .hc-plano__desc{color:#c4cde0}
.hc-plano__preco{display:flex;align-items:baseline;gap:4px}
.hc-plano__preco b{font-size:44px;font-weight:800;letter-spacing:-.045em}
.hc-plano__preco span{font-size:13px;color:#5a6480}
.hc-plano--ultra .hc-plano__preco span{color:#c4cde0}
.hc-plano__nums{background:#eef3fb;border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hc-plano--pro .hc-plano__nums{background:#1652d9;color:#fff}
.hc-plano--ultra .hc-plano__nums{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.hc-plano__nums b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em}
.hc-plano__nums span{display:block;font-size:12px;color:#5a6480}
.hc-plano--pro .hc-plano__nums span{color:#f4f7ff}
.hc-plano--ultra .hc-plano__nums span{color:#c4cde0}
.hc-plano__cpc{font-size:13px;color:#5a6480}
.hc-plano--ultra .hc-plano__cpc{color:#c4cde0}
.hc-plano__cpc strong{color:#1d2640}
.hc-plano--ultra .hc-plano__cpc strong{color:#fff}
.hc-plano__cpc .hc-azul{color:#1565ff}
.hc-plano__itens{display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.45;flex:1}
.hc-plano__itens div{display:flex;gap:10px}
.hc-plano__itens div>span:first-child{color:#1565ff;font-weight:800}
.hc-plano--ultra .hc-plano__itens div>span:first-child{color:#4d8dff}
.hc-plano__bt{font:700 14px var(--hc-fonte);border-radius:10px;padding:14px;cursor:pointer;min-height:48px;text-align:center;display:flex;align-items:center;justify-content:center}
/* 26/10/2026.. os três botões ficam na MESMA altura.. o bloco do botão desce para o fundo do cartão (os cartões têm a mesma altura na grade) e os três terminam com a mesma linha reservada de 44 px */
.hc-plano>.hc-plano__bt,.hc-plano>.hc-ultra{margin-top:auto}
.hc-plano__bt--vazado{background:#fff;color:#1d2640;border:1px solid #1d2640}
.hc-plano__bt--cheio{background:#1565ff;color:#fff;border:0}
.lp a.hc-plano__bt--vazado{color:#1d2640}
.lp a.hc-plano__bt--cheio{color:#fff}
/* 25/10/2026.. a alternativa discreta "Prefere falar com a equipe?" abaixo do botao do Pro e do Ultra (so aparece com a venda ligada). Alvo de 44 px, foco visivel, cores que a pagina ja usa. */
.hc-plano__equipe{font-size:13px;font-weight:600;color:#1565ff;text-align:center;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:flex;align-items:center;justify-content:center}
.hc-plano--ultra .hc-plano__equipe{color:#c4cde0}
.hc-plano__equipe:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:6px}
/* 25/10/2026 (F12).. o espaço da linha "Prefere falar com a equipe?" fica reservado também quando ela não aparece (venda desligada ou resposta ainda não chegou), e o botão do Pro e do Ultra espera a resposta do servidor com a mesma caixa (sem texto visível).. a home não salta quando o interruptor responde */
.hc-plano__equipe--reserva{visibility:hidden}
.hc-plano__bt--espera{opacity:.35;cursor:default;color:transparent;user-select:none}
.lp .hc-ultra__bt--espera{position:relative;width:100%;box-sizing:border-box;font:700 15px var(--hc-fonte);background:#fff;color:transparent;border-radius:12px;padding:16px 18px;min-height:52px;display:flex;align-items:center;justify-content:center;opacity:.35;user-select:none}
/* 25/10/2026 (F4).. a frase do limite mensal de segurança do Ultra, 12 px (o piso da casa) na cor que o cartão escuro já usa para o texto de apoio */
.hc-plano__limite{margin:0;font-size:12px;line-height:1.5;color:#c4cde0}
/* 26/10/2026.. a linha da recarga de créditos nos cards do Captador e do Captador Pro (so aparece com a recarga a venda). 13 px como os itens do cartao, na cor de apoio que o cartao claro ja usa */
.hc-plano__recarga{margin:0;font-size:13px;line-height:1.45;color:#5a6480;border-top:1px solid #eef3fb;padding-top:12px}
/* o botão do Ultra, com o anel que pulsa e a seta que troca (o hover do protótipo vira CSS, e o foco do teclado faz o mesmo) */
.hc-ultra{position:relative;border-radius:12px;display:block}
.hc-ultra__anel{position:absolute;inset:0;border-radius:12px;pointer-events:none;animation:ucPing 2.8s cubic-bezier(.2,.7,.3,1) 0s infinite}
.hc-ultra__anel+.hc-ultra__anel{animation-delay:1.4s}
.hc-ultra:hover .hc-ultra__anel,.hc-ultra:focus-within .hc-ultra__anel{display:none}
.lp a.hc-ultra__bt{position:relative;width:100%;overflow:hidden;font:700 15px var(--hc-fonte);letter-spacing:-.01em;background:#fff;color:#1a2238;border:0;border-radius:12px;padding:16px 18px;min-height:52px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:color .35s ease .05s,transform .3s,box-shadow .35s;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.hc-ultra__fundo{position:absolute;inset:0;background:linear-gradient(90deg,#1565ff,#3b7bff);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.hc-ultra__txt{position:relative}
.hc-ultra__setas{position:relative;display:inline-block;width:16px;height:20px;overflow:hidden}
.hc-ultra__seta{position:absolute;left:0;top:0;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.hc-ultra__seta:first-child{transform:translateX(0)}
.hc-ultra__seta:last-child{transform:translateX(-22px)}
.hc-ultra:hover a.hc-ultra__bt,.hc-ultra:focus-within a.hc-ultra__bt{color:#fff;transform:translateY(-2px);box-shadow:0 16px 36px rgba(21,101,255,.45)}
.hc-ultra:hover .hc-ultra__fundo,.hc-ultra:focus-within .hc-ultra__fundo{transform:scaleX(1)}
.hc-ultra:hover .hc-ultra__seta:first-child,.hc-ultra:focus-within .hc-ultra__seta:first-child{transform:translateX(22px)}
.hc-ultra:hover .hc-ultra__seta:last-child,.hc-ultra:focus-within .hc-ultra__seta:last-child{transform:translateX(0)}

/* 29/10/2026 (ordem do dono, "esse card precisa ter um ar mais premium, dourado").. o dourado dos leads pagos (champanhe a dourado, tinta escura #2a2008). Contrastes medidos.. texto 6,8 a 12 sobre o pior ponto do degradê, selo 11,2. O brilho fica ATRÁS do texto (::before) e é estático. */
.hc-premium{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(100deg,#fbf0cf 0%,#f0d68d 48%,#d9b35c 100%);border:1px solid #c9a24c;border-radius:16px;padding:16px 20px;box-shadow:0 10px 30px rgba(201,162,76,.28),inset 0 1px 0 rgba(255,255,255,.6)}
.hc-planos__nota{font-size:12px;line-height:1.6;color:#b4bdd2}
.lp .hc-planos__nota a{color:#9cc0ff}

/* quatro planos.. quatro colunas no computador (a home tem três) */
@media (min-width: 1100px) { .lp .hc-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lp .hc-plano { padding: 26px 22px; } .lp .hc-plano__preco b { font-size: 38px; } }
.lp .hc-plano__selo--valor { background: #1d2640; border: 1px solid #4d8dff; }
.lp .hc-plano__cheio { font-size: 15px; font-weight: 700; color: var(--hc-mudo); text-decoration: line-through; margin-right: 6px; }
.lp .hc-plano__nums--um { grid-template-columns: 1fr; }
.lp .hc-plano__itens div > span:first-child { flex: none; }
.lp .hc-faq-lp { display: grid; gap: 10px; max-width: 860px; }
.lp .hc-faq-lp h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.lp .hc-faq-lp details { border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; background: rgba(255, 255, 255, .05); }
.lp .hc-faq-lp summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 12px 18px; font-weight: 700; font-size: 15px; }
.lp .hc-faq-lp summary:focus-visible { outline: 2px solid var(--hc-anel); outline-offset: 2px; border-radius: 14px; }
.lp .hc-faq-lp p { padding: 0 18px 16px; font-size: 14px; line-height: 1.6; color: #c9d2e6; }
@media (prefers-reduced-motion: reduce) { .lp .hc-ultra__anel { animation: none; } .lp .hc-plano, .lp a.hc-ultra__bt, .lp .hc-ultra__fundo, .lp .hc-ultra__seta { transition: none; } }

@keyframes ucPing{0%{box-shadow:0 0 0 0 rgba(156,192,255,.55)}100%{box-shadow:0 0 0 16px rgba(156,192,255,0)}}

.lp .hc-cupom { display: block; margin: 0; font-size: 15px; line-height: 1.5; color: #dfe3ec; }
.lp .hc-cupom__cod { font-weight: 800; letter-spacing: .04em; color: #fff; }
.lp .hc-cupom__bt { display: inline; white-space: nowrap; padding: 11px 2px; margin-left: 6px; font-weight: 700; color: #9cc0ff; text-decoration: underline; text-underline-offset: 3px; }
.lp .hc-cupom__bt:hover { color: #fff; }
.lp .hc-cupom__bt:focus-visible { outline: 3px solid #9cc0ff; outline-offset: 3px; }
.lp .hc-inf { flex-shrink: 0; overflow: visible; transform-origin: 50% 50%; animation: hc-inf-pulso 3.2s ease-in-out infinite; }
.lp .hc-inf__luz { animation: hc-inf-luz 3.2s ease-in-out infinite; }
@keyframes hc-inf-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes hc-inf-luz { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .lp .hc-inf, .lp .hc-inf__luz { animation: none; } .lp .hc-inf__luz { opacity: .45; } }

/* ===== Janela de planos no estilo dos planos da home (04/11/2026, pedido do dono.. "melhore esse design tb pra ficar mais atraente").
   Os cartões usam as classes hc-plano* (regras copiadas da home acima). EXCEÇÃO DE PALETA.. a paleta da home de captação (#1565ff, #121a2e,
   #1d2640, #5a6480, #9cc0ff, #c9d2e6, #dfe3ec, dourado do infinito), autorizada pelo dono em 22/10/2026 para a home e estendida a estes planos
   pela ordem de 04/11/2026 "precisamos replicar o estilo já da nossa página". Fora desta janela e da seção .lp vale a paleta de cinco cores. */
.hc-ok { display: inline-flex; flex: none; color: #1565ff; }
.hc-plano--ultra .hc-ok { color: #4d8dff; }
.hc-ok .ic, .hc-ok svg { width: 16px; height: 16px; margin-top: 1px; }
dialog.planos { --hc-tinta: #1d2640; --hc-mudo: #5a6480; --hc-fonte: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --hc-anel: #9cc0ff;
  width: min(1240px, calc(100vw - 24px)); padding: 28px 28px 24px; border: 1px solid rgba(127, 176, 255, .28); border-radius: 24px; color: #fff;
  font-family: var(--hc-fonte); -webkit-font-smoothing: antialiased;
  background: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(21, 101, 255, .28), transparent 70%), #121a2e;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
dialog.planos::backdrop { background: rgba(10, 14, 26, .72); }
.planos .planos-cab { margin-bottom: 26px; }
.planos .planos-cab h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: -.04em; font-weight: 800; color: #fff; }
.planos .planos-motivo { color: #c9d2e6; font-size: 15px; }
.planos .planos-espera { color: #9cc0ff; }
.planos .planos-fechar { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.planos .planos-fechar:hover { background: rgba(255, 255, 255, .16); }
.planos .planos-fechar:focus-visible { outline: 2px solid var(--hc-anel); outline-offset: 2px; }
.planos .planos-grade { gap: 16px; align-items: stretch; padding-top: 12px; }
.planos .hc-plano { padding: 26px 22px 22px; gap: 16px; border-radius: 22px; }
.planos .hc-plano__preco b { font-size: 38px; }
.planos .hc-plano__desc { min-height: 2.9em; }
.planos .hc-plano > .hc-plano__bt, .planos .hc-plano > .hc-ultra, .planos .hc-plano > .planos-sel { margin-top: auto; }
.planos .hc-plano__bt { font-family: var(--hc-fonte); text-decoration: none; border-radius: 10px; }
.planos a.hc-plano__bt--vazado, .planos button.hc-plano__bt--vazado { color: #1d2640; }
.planos a.hc-plano__bt--cheio, .planos button.hc-plano__bt--cheio { color: #fff; }
.planos .hc-plano__bt:focus-visible, .planos .hc-ultra__bt:focus-visible { outline: 2px solid var(--hc-anel); outline-offset: 3px; }
.planos .hc-plano__bt:disabled { opacity: .55; cursor: wait; }
.planos .hc-ultra__bt { position: relative; width: 100%; overflow: hidden; font: 700 15px var(--hc-fonte); letter-spacing: -.01em; background: #fff; color: #1a2238; border: 0; border-radius: 12px; padding: 16px 18px; min-height: 52px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; transition: color .35s ease .05s, transform .3s, box-shadow .35s; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.planos .hc-ultra:hover .hc-ultra__bt, .planos .hc-ultra:focus-within .hc-ultra__bt { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(21, 101, 255, .45); }
.planos .hc-plano__selo--valor { background: #1d2640; border: 1px solid #4d8dff; }
.planos .hc-plano__cheio { font-size: 15px; font-weight: 700; color: var(--hc-mudo); text-decoration: line-through; margin-right: 6px; }
.planos .hc-plano__nums--um { grid-template-columns: 1fr; }
.planos .hc-plano__itens div > span:first-child { flex: none; }
.planos .planos-sel { min-height: 48px; border-radius: 10px; color: #1565ff; border: 1.5px dashed #9cc0ff; }
.planos .hc-plano--ultra .planos-sel { color: #fff; border-color: rgba(255, 255, 255, .5); }
.planos .plano--atual { box-shadow: 0 0 0 3px rgba(156, 192, 255, .55); }
.planos .planos-aceite { color: #dfe3ec; }
.planos .planos-aceite a { color: #9cc0ff; }
.planos .hc-inf { flex-shrink: 0; overflow: visible; transform-origin: 50% 50%; animation: hc-inf-pulso 3.2s ease-in-out infinite; }
.planos .hc-inf__luz { animation: hc-inf-luz 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .planos .hc-inf, .planos .hc-inf__luz, .planos .hc-ultra__anel { animation: none; } .planos .hc-plano, .planos .hc-ultra__bt { transition: none; } }
@media (max-width: 640px) { dialog.planos { padding: 20px 14px; border-radius: 18px; } }
/* janela.. o preço cheio riscado em linha própria e os números menores, para caber no cartão de 240 px */
.planos .hc-plano__preco { flex-wrap: wrap; row-gap: 2px; }
.planos .hc-plano__cheio { flex-basis: 100%; }
.planos .hc-plano__nums b { font-size: 19px; }
.planos .hc-plano__nums { gap: 10px; }
/* vitrine.. o preço cheio riscado em linha própria e os números do combo menores (quatro colunas) */
.lp .hc-plano__preco { flex-wrap: wrap; row-gap: 2px; }
.lp .hc-plano__cheio { flex-basis: 100%; }
.lp .hc-plano__nums b { font-size: 19px; }

/* combo com infinito (04/11/2026, "esse plano de R$3.950 tb deve ter o simbolo de infinito").. a caixa fica escura como no Ilimitado */
.hc-plano--pro .hc-plano__nums:has(.hc-inf) { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #1d2640; color: #fff; }
.hc-plano--pro .hc-plano__nums:has(.hc-inf) span { color: #c4cde0; }

/* Pendências detalhadas.. total, tabela das parcelas e o download do extrato (04/11/2026) */
.pend-topo { margin-bottom: 12px; }
.fiscal .pend-valor { font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fiscal .pend-sub { font-size: 14px; }
.pend-rolagem { overflow-x: auto; container-type: inline-size; }
.pend-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.pend-leg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pend-tab th { text-align: left; padding: 8px 10px; font-weight: 650; color: var(--texto-2); border-bottom: 2px solid var(--linha); white-space: nowrap; }
.pend-tab td { padding: 10px; border-bottom: 1px solid var(--linha); }
.pend-tab .pend-num { text-align: right; font-variant-numeric: tabular-nums; }
.pend-aviso { margin: 8px 0 12px; font-size: 13px; color: var(--texto-2); }
.pend-baixar { min-height: 48px; }
/* a tabela vira lista de cartões quando o espaço do próprio cartão é curto (o painel tem colunas estreitas até em tela grande) */
@container (max-width: 560px) {
  .pend-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pend-tab, .pend-tab tbody, .pend-tab tr, .pend-tab td { display: block; }
  .pend-tab tr { padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; background: var(--suave); }
  .pend-tab td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .pend-tab td::before { content: attr(data-label); color: var(--texto-2); font-weight: 600; text-align: left; }
}
/* atalho "Buscar na web" ao lado do nome do proprietário (04/11/2026) */
.dono-nome-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.mais-nome { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: var(--branco); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mais-nome:hover { background: rgba(255, 255, 255, .12); }
.mais-nome:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.mais-nome .ic { width: 16px; height: 16px; }
/* Painel lateral de processo e de "Mais sobre este nome" (04/11/2026).. gaveta à direita; só opacity e transform, sem animação com movimento reduzido */
dialog.painel-dlg { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: var(--papel); color: var(--navy); box-shadow: -20px 0 60px rgba(8, 14, 22, .4); overflow: hidden; }
dialog.painel-dlg[open] { display: flex; flex-direction: column; animation: painel-entra .22s ease-out; }
dialog.painel-dlg::backdrop { background: rgba(10, 14, 26, .6); }
@keyframes painel-entra { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.painel-dlg[open] { animation: none; } }
.painel-cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--branco); border-bottom: 1px solid var(--linha); }
.painel-tit { flex: 1; min-width: 0; }
.painel-tit h2 { margin: 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.painel-tit h2:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 2px; }
.painel-sub { margin: 2px 0 0; font-size: 14px; color: var(--texto-2); overflow-wrap: anywhere; }
.painel-corpo { flex: 1; overflow: auto; padding: 16px; display: grid; gap: 14px; align-content: start; font-size: 16px; line-height: 1.5; }
.painel-espera { display: flex; align-items: center; gap: 10px; color: var(--texto-2); margin: 0; }
.proc-resumo { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 6px 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--branco); }
.proc-resumo dt { color: var(--texto-2); font-weight: 600; }
.proc-resumo dd { margin: 0; overflow-wrap: anywhere; }
.proc-sub { margin: 4px 0 0; font-size: 16px; }
.proc-partes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.proc-partes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--branco); overflow-wrap: anywhere; }
.proc-tempo { list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 12px; border-left: 2px solid var(--azul-borda); }
.proc-mov { display: grid; gap: 4px; }
.proc-mov-corpo { display: grid; gap: 4px; min-width: 0; }
.proc-orgao { color: var(--texto-2); font-size: 14px; }
.proc-texto { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.proc-mais { justify-self: start; min-height: 44px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--branco); color: var(--azul-texto); font: inherit; font-weight: 600; cursor: pointer; }
.proc-mais:focus-visible, .reg-proc:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 2px; }
.proc-pe { display: flex; flex-wrap: wrap; gap: 10px; }
.proc-rodape { margin: 0; font-size: 14px; }
.reg-item--proc { padding: 0; }
.reg-proc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; width: 100%; min-height: 44px; padding: 12px 14px; border: 0; border-radius: var(--raio-p); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.reg-proc:hover { background: var(--azul-suave); }
.reg-proc .selo, .reg-proc .reg-abrir, .reg-proc .reg-oficial { grid-column: 2; justify-self: start; }
/* DataJud depois da ficha (07/11/2026).. texto e ícone, nunca só cor; sem animação */
.reg-oficial { font-size: 14px; line-height: 1.5; color: var(--texto-2, inherit); overflow-wrap: anywhere; }
.selo--ofc[data-ofc="pendente"] { border-style: dashed; }
.selo--risco { border-color: var(--azul-texto); }
.selo--risco .ic { color: var(--azul-texto); }
.selo--empresa { background: var(--azul-suave); }
.reg-proc .selo--risco, .reg-proc .selo--empresa, .reg-proc .reg-cnpj { grid-column: 2; justify-self: start; }
.reg-cnpj { color: var(--texto-2); font-size: 14px; }
.proc-empresas { display: grid; gap: 8px; border-top: 1px solid var(--linha); padding-top: 14px; }
.reg-abrir { display: inline-flex; align-items: center; gap: 6px; color: var(--azul-texto); font-weight: 650; font-size: 15px; text-decoration: underline; }
.reg-abrir .ic { width: 16px; height: 16px; }
.mn-sec { display: grid; gap: 8px; }
@media (max-width: 479px) { .proc-resumo { grid-template-columns: 1fr; } }
/* Registros públicos (04/11/2026).. menções e processos; sem animação, alvo de leitura (não clicável) */
.reg-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.reg-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 12px 14px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.reg-data { color: var(--texto-2); white-space: nowrap; }
.reg-txt { min-width: 0; }
.reg-item .selo { grid-column: 2; justify-self: start; }
.reg-sub { margin: 14px 0 8px; font-size: 16px; }
.reg-mais { color: var(--texto-2); font-size: 15px; margin: 0 0 12px; }
@media (max-width: 520px) { .reg-item { grid-template-columns: 1fr; } .reg-item .selo { grid-column: 1; } }
/* Linha do tempo do proprietário */
.lt-resumo { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lt-resumo li { font-size: 14px; line-height: 1.5; color: var(--navy); background: var(--azul-suave); border: 1px solid var(--azul-borda); border-radius: 999px; padding: 6px 12px; }
.lt { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 16px; }
.lt::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--linha); }
.lt-item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.lt-marca { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--branco); border: 2px solid var(--azul-texto); color: var(--azul-texto); }
.lt-marca .ic { width: 18px; height: 18px; }
.lt-item--debito .lt-marca, .lt-item--empresa-baixada .lt-marca { border-color: var(--erro); color: var(--erro); }
.lt-item--imovel-antigo .lt-marca { border-style: dashed; }
.lt-corpo { min-width: 0; display: grid; gap: 4px; padding-top: 2px; }
.lt-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lt-data { font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.lt-tipo { font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); background: var(--suave); border: 1px solid var(--linha); border-radius: 6px; padding: 1px 8px; }
.lt-tit { font-size: 16px; line-height: 1.5; color: var(--navy); }
.lt-proc { padding: 0; min-height: 44px; border: 0; background: none; font: inherit; color: var(--navy); text-align: left; text-decoration: underline; cursor: pointer; }
.proc-oficial { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); text-decoration: underline; }
.lt-det { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texto-2); overflow-wrap: anywhere; }
.lt-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .06em; }
/* Sugestão de abertura (04/11/2026) */
.pitch-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.pitch-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--suave); border: 1px solid var(--linha); }
.pitch-texto { margin: 0; font-size: 16px; line-height: 1.5; color: var(--navy); }
.pitch-item .btn-icone { flex: none; }
@media (max-width: 560px) { .pitch-item { flex-direction: column; align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { .pitch-item .btn-icone { transition: none; } }
/* Entorno com seletor de distância e Mercado do condomínio (04/11/2026) */
.ent-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ent-raio { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ent-raio-b { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1.5px solid var(--linha); border-radius: 10px; background: var(--branco); color: var(--navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ent-raio-b[aria-pressed="true"] { border-color: var(--azul-texto); background: var(--azul-suave); color: var(--azul-texto); font-weight: 800; box-shadow: inset 0 -3px 0 var(--azul-texto); }
.ent-estado { margin: 0; font-size: 13px; color: var(--texto-2); }
.mc-lista-box { display: grid; gap: 8px; }
.mc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mc-item { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--suave); font-size: 14px; }
.mc-preco small { font-size: 12px; color: var(--texto-2); }
.mc-var { justify-self: end; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--linha); font-size: 13px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.mc-var--baixou { background: var(--azul-suave); border-color: var(--azul-borda); }
.mc-var--subiu { background: var(--suave); border-style: dashed; }
.mc-data { grid-column: 1 / -1; font-size: 12px; color: var(--texto-2); }
.mc-aviso { margin: 0; font-size: 14px; color: var(--texto-2); }
@media (max-width: 560px) { .mc-item { grid-template-columns: 1fr auto; } .mc-desc { grid-column: 1 / -1; font-weight: 600; } }
/* janela de planos ~30% menor no computador, para caber sem barra de rolagem (pedido do dono, 04/11/2026) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { dialog.planos { zoom: .72; max-height: calc((100vh - 24px) / .72); } }

/* Situação do imóvel, marca d'água e agrupamento das abas (04/11/2026) */
.sit-manual { display: grid; gap: 12px; border-top: 1px solid var(--linha); padding-top: 14px; }
.sit-reg { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); }
.sit-reg-tit { grid-column: 1 / -1; font-size: 15px; }
.sit-campo { min-height: 44px; }
@media (max-width: 479px) { .sit-reg { grid-template-columns: 1fr; } }
.marca-dagua { margin: 0; padding: 0 20px 14px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .72); overflow-wrap: anywhere; user-select: none; }
.fi-fundo { display: none; }
.fi-marca { margin-top: 6px; font-size: 9pt; color: var(--texto-2); }
@media print {
  .fi-fundo { display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; gap: 70px 50px; position: fixed; top: -30%; left: -30%; width: 160%; height: 160%;
    transform: rotate(-28deg); opacity: .07; pointer-events: none; overflow: hidden; z-index: 0; font-size: 12pt; font-weight: 700; color: var(--navy); }
  .fi-fundo span { white-space: nowrap; }
}

/* faixa "Em toda ficha" na janela de planos (04/11/2026) */
dialog.planos .planos-ficha { margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
dialog.planos .planos-ficha-tit { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9cc0ff; }
dialog.planos .planos-ficha ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
dialog.planos .planos-ficha li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: #dfe3ec; }
dialog.planos .planos-ficha .hc-ok { color: #4d8dff; }
@media (min-width: 1024px) { dialog.planos .planos-ficha ul { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* avisos na capa (04/11/2026, "janela sobreposta difícil de ler").. o de sessão fica no cartão de login; os demais, sólidos e do lado do formulário */
.login-aviso { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(75, 168, 253, .14); border: 1px solid rgba(75, 168, 253, .45); color: var(--branco); font-size: 14px; line-height: 1.45; }
.login-aviso .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--azul-claro); }
body:not(.tem-saida) .saida { left: auto; right: 24px; bottom: 24px; max-width: 440px; }
body:not(.tem-saida) .estado { background: var(--branco); color: var(--navy); border: 1px solid var(--azul-borda); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
body:not(.tem-saida) .estado--erro { background: var(--erro-fundo); color: var(--erro); }

/* Histórico empresarial (04/11/2026).. resumo em números e linha do tempo; estado sempre com ícone e texto, nunca só cor */
.emph-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 14px; }
.emph-stat { border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 12px 14px; background: var(--branco); }
.emph-stat dt { font-size: 13px; color: var(--texto-2); }
.emph-stat dd { margin: 2px 0 0; font-size: 18px; font-weight: 750; color: var(--navy); overflow-wrap: anywhere; }
.emph-stat dd.emph-sub { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.emph-linha-txt { margin: 0 0 10px; font-size: 15px; }
.emph-tempo { list-style: none; margin: 14px 0 12px; padding: 0 0 0 30px; display: grid; gap: 12px; border-left: 2px solid var(--azul-borda); margin-left: 11px; }
.emph-item { position: relative; }
.emph-marca { position: absolute; left: -43px; top: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--branco); border: 2px solid var(--azul); color: var(--azul-texto); }
.emph-marca .ic { width: 14px; height: 14px; }
.emph-item--inativa .emph-marca { border-color: var(--texto-2); color: var(--navy); }
.emph-item .mini { background: var(--branco); }
.emph-quando { margin: 0; font-size: 14px; color: var(--texto-2); }
.emph-mais summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; color: var(--azul-texto); }
.emph-mais summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 6px; }
.emph-mais[open] summary { margin-bottom: 8px; }
.emph-socios ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.emph-socios li { display: flex; flex-direction: column; font-size: 15px; }
.emph-socios small { font-size: 13px; color: var(--texto-2); }

/* "Minha área" no menu do topo (04/11/2026), a mesma do site (menu-site.css), com os valores literais das variáveis de lá */
.ms-conta { position: relative; }
.ms .ms-conta__btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 8px; min-height: 44px; }
.ms-conta__nome { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ms-blue-ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; line-height: 1; }
.ms-avatar--grande { width: 40px; height: 40px; font-size: 16px; }
.ms-conta__painel { position: absolute; right: 0; top: calc(100% + 10px); width: 320px; max-width: calc(100vw - 32px); padding: 8px; display: flex; flex-direction: column; gap: 2px; border-radius: 8px; background: #142130; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 44px rgba(8, 14, 22, .55); z-index: 60; }
.ms-conta__painel[hidden] { display: none; }
.ms-conta__cab { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); margin-bottom: 6px; }
.ms-conta__cab-txt { display: flex; flex-direction: column; min-width: 0; }
.ms-conta__cab-txt b { display: block; font-size: 16px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-conta__cab-txt span { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.ms-conta__secao { padding: 10px 12px; margin: 4px 0; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.ms-conta__secao-titulo { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .72); }
.ms-conta .ms-item { min-height: 44px; }
.ms-conta button.ms-item { width: 100%; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }

/* o painel da conta é ESCURO (como no site).. os itens, desenhados para os painéis claros, ficavam navy sobre navy (04/11/2026) */
.ms .ms-conta__painel .ms-item { color: #fff; border-radius: 8px; }
.ms .ms-conta__painel .ms-item:hover, .ms .ms-conta__painel .ms-item:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
.ms .ms-conta__painel .ms-item__t { color: #fff; }
.ms .ms-conta__painel .ms-item__d { color: rgba(255, 255, 255, .72); }
.ms .ms-conta__painel .ms-item:hover .ms-item__t, .ms .ms-conta__painel .ms-item:hover .ms-ico { color: #9cc0ff; }
.ms .ms-conta__painel .ms-ico { background: rgba(255, 255, 255, .08); color: #9cc0ff; }
.ms .ms-conta__painel .ms-item:focus-visible { outline: 2px solid #9cc0ff; outline-offset: 2px; }

/* Capivara, o simbolo da ferramenta (04/11/2026, pedido do dono).. o desenho mora em <symbol id="capivara"> no index.html */
.capi-ico { width: 1.7em; height: 1.7em; flex: none; vertical-align: -.5em; margin-right: .35em; }
.topo-sub { display: inline-flex; align-items: center; }
.capa-sub { display: inline-flex; align-items: center; }
.capa-selo .capi-ico { width: 22px; height: 22px; margin: 0 8px 0 -2px; }
.capa-selo .capa-pulso { display: none; }
.ms-conta__secao-titulo { display: inline-flex; align-items: center; }

/* ---- A tela da ferramenta (logado) alinhada ao menu do site (04/11/2026, pedido do dono) ---- */
body[data-app].tem-saida .pagina { max-width: none; padding-left: max(clamp(16px, 4vw, 56px), calc((100% - 1120px) / 2)); padding-right: max(clamp(16px, 4vw, 56px), calc((100% - 1120px) / 2)); }
body[data-app].tem-saida .topo { background: #1b2a3d; border-bottom: 1px solid rgba(255, 255, 255, .1); }
body[data-app].tem-saida .topo-in { max-width: none; padding: 8px max(clamp(16px, 4vw, 56px), calc((100% - 1120px) / 2)); }
body[data-app] .topo-marca .marca { display: none; }
body[data-app] .topo-sub { font-size: 15px; font-weight: 700; color: #fff; }
body[data-app].modo-painel .pagina { padding-left: max(clamp(16px, 3vw, 40px), calc((100% - 1440px) / 2)); padding-right: max(clamp(16px, 3vw, 40px), calc((100% - 1440px) / 2)); }
body[data-app].modo-painel .topo-in { padding-left: max(clamp(16px, 3vw, 40px), calc((100% - 1440px) / 2)); padding-right: max(clamp(16px, 3vw, 40px), calc((100% - 1440px) / 2)); }
body[data-app].modo-painel .ms-bar { padding-left: max(clamp(16px, 3vw, 40px), calc((100% - 1440px) / 2)); padding-right: max(clamp(16px, 3vw, 40px), calc((100% - 1440px) / 2)); }
.ferramenta-boasvindas { display: none; }
body.sem-consulta .ferramenta-boasvindas { display: flex; gap: 20px; align-items: center; padding: 28px; }
.ferramenta-boasvindas .capi-grande { flex: none; width: 112px; height: 112px; }
.ferramenta-boasvindas h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.02em; }
.ferramenta-boasvindas p { margin: 0 0 12px; color: var(--cinza, #4a5670); line-height: 1.5; }
.ferramenta-boasvindas ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--cinza, #4a5670); line-height: 1.45; }
@media (max-width: 700px) { body.sem-consulta .ferramenta-boasvindas { flex-direction: column; align-items: flex-start; } }

/* Unidades do endereço (04/11/2026, pedido do dono) */
.btn-unidades { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 10px 0; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .38); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.btn-unidades:hover { background: rgba(255, 255, 255, .18); }
.btn-unidades:focus-visible { outline: 3px solid #9cc0ff; outline-offset: 2px; }
.btn-unidades .ic { width: 18px; height: 18px; }
dialog.unidades-dlg { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 22px; border: 0; border-radius: 18px; background: #fff; color: #1d2640; box-shadow: 0 30px 80px rgba(8, 14, 22, .5); }
dialog.unidades-dlg::backdrop { background: rgba(10, 14, 26, .72); }
.unidades-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.unidades-cab h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.unidades-outra { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); display: grid; gap: 8px; }
.unidades-outra label { font-weight: 700; }

/* Consulta em fases (04/11/2026).. barra de progresso real e esqueletos que dão lugar às seções quando elas chegam */
/* A barra de evolução da pesquisa (09/11/2026).. o desenho mora em barra-pesquisa.css (<barra-pesquisa>); aqui fica só a caixa que a leva. */
.progresso { display: block; position: relative; }
.sk { min-height: 132px; }
.sk-linhas { display: grid; gap: 10px; padding: 4px 2px 2px; }
.sk-linhas i { display: block; height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--suave), rgba(33, 43, 61, .11), var(--suave)); background-size: 200% 100%;
  animation: skBrilho 1.6s ease-in-out infinite; }
.sk-linhas i:nth-child(2) { width: 82%; } .sk-linhas i:nth-child(3) { width: 58%; }
@keyframes skBrilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-msg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 2px; color: var(--erro); }
.sk-msg .ic { flex: none; }
.sk-de-novo { min-height: 44px; min-width: 44px; }
.nota--sk .sk-anel { width: 92px; height: 92px; border-radius: 50%; border: 8px solid rgba(255, 255, 255, .16); animation: none; }
.nota--sk .nota-niv, .nota--sk .nota-sub { color: rgba(255, 255, 255, .88); }
.nota--sk .sk-de-novo { justify-self: start; }
.ent.sk { min-height: 96px; }
.resultado[aria-busy] .tiles { min-height: 208px; align-content: start; }   /* duas linhas de atalhos reservadas.. as que chegam depois não empurram nada */
.viva-entra { animation: vivaEntra .18s ease-out both; }
@keyframes vivaEntra { from { opacity: .35; } to { opacity: 1; } }
.vazio-aba { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .sk-linhas i, .viva-entra { animation: none; }
}

/* o sprite da capivara não ocupa lugar (sem style embutido.. a CSP da página só aceita o CSS do próprio domínio) */
.capi-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Busca reversa (04/11/2026).. campo único e botão "Buscar este contato" (alvo de 44 px, mesmo dentro da linha compacta do contato) */
.reversa { margin: 0 0 20px; }
.reversa-tit { font-size: 17px; margin: 0 0 8px; }
.reversa-saida { margin-top: 14px; display: grid; gap: 12px; }
.reversa-saida:empty { margin-top: 0; }   /* a região viva fica na árvore de acessibilidade, só sem espaço */
.reversa-resumo { font-weight: 650; margin: 0; }
.contatos .contato-acoes .btn.btn-reversa, .mini-acoes .btn.btn-reversa, .btn-reversa { min-height: 44px; padding: 0 14px; font-size: 15px; }
.contato-acoes:has(.btn-reversa) { flex-wrap: wrap; }

/* a animação de consulta em miniatura, dentro do painel "Buscar este contato" (04/11/2026) */
.etapas--inline { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.etapas--inline .etapa { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--cinza, #5a6480); }
.etapas--inline .etapa--ativa { color: var(--tinta, #1d2640); font-weight: 700; }
.etapas--inline .etapa-marca { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; }
.etapas--inline .etapa--feita .etapa-marca { background: #1652d9; border-color: #1652d9; color: #fff; }
.etapas--inline .etapa--ativa .etapa-marca { border-color: #1652d9; animation: pulso-etapa 1.2s ease-in-out infinite; }
@keyframes pulso-etapa { 50% { box-shadow: 0 0 0 5px rgba(22, 82, 217, .18); } }
@media (prefers-reduced-motion: reduce) { .etapas--inline .etapa--ativa .etapa-marca { animation: none; } }

/* a marca aicapivara (kit oficial, 04/11/2026).. logo horizontal no menu e na gaveta, símbolo oficial no lugar do desenho provisório */
.ms .ms-logo { display: inline-flex; align-items: center; }
.ms .ms-logo .capi-logo { display: block; height: 30px; width: auto; }
.ms .ms-gaveta .ms-logo .capi-logo { height: 28px; }
.capi-logo--marca { height: 34px; width: auto; display: block; }
.capa-marca .capi-logo--marca { height: 40px; }
.ms-conta__plano { display: block; margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .8); }
/* a barra de planos e do diretor sai da tela da ferramenta (pedido do dono).. o plano e o uso ficam na Minha área */
body[data-app] .topo { display: none; }

/* O botão "Nova busca" (04/11/2026, pedido do dono.. "mais destacado e animado").. cor de ação cheia, ícone e um pulso suave só em transform e sombra */
.btn-nova-busca { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px; background: #1652d9; color: #fff; font: inherit; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(22, 82, 217, .35); animation: nova-busca-pulso 2.6s ease-in-out infinite; transition: transform .2s ease, box-shadow .2s ease; }
.btn-nova-busca .ic { width: 18px; height: 18px; color: #fff; }
.btn-nova-busca:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 24px rgba(22, 82, 217, .5); animation-play-state: paused; }
.btn-nova-busca:active { transform: translateY(0) scale(.98); }
.btn-nova-busca:focus-visible { outline: 3px solid #9cc0ff; outline-offset: 3px; }
@keyframes nova-busca-pulso { 0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(22, 82, 217, .35); } 50% { transform: scale(1.04); box-shadow: 0 8px 26px rgba(22, 82, 217, .6); } }
@media (prefers-reduced-motion: reduce) { .btn-nova-busca { animation: none; transition: none; } .btn-nova-busca:hover { transform: none; } }

/* Tela inicial (04/11/2026, refeita em 05/11/2026 pelo handoff aicapivara).. as regras novas estão no bloco "Redesign aicapivara" no fim deste arquivo.
   Abaixo ficam o seletor Endereço | Contato, o texto de uso responsável e o diálogo do aceite. */
/* o seletor Endereço | Contato */
.busca-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-top: var(--ini-gap, 10px); border-radius: 12px; background: var(--papel); border: 1px solid var(--linha); }
.busca-seg .busca-seg__aba { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--navy); font-weight: 500; font-size: 15px; cursor: pointer; transition: transform .15s ease-out, opacity .15s ease-out; }
.busca-seg .busca-seg__aba:hover { background: var(--azul-suave); }
.busca-seg .busca-seg__aba[aria-selected="true"] { background: var(--navy); color: var(--branco); font-weight: 500; }
/* cartão ESCURO da tela inicial (sem login).. texto claro e aba marcada em branco */
body:not(.tem-saida):not(.modo-painel) .busca-seg { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); }
body:not(.tem-saida):not(.modo-painel) .busca-seg .busca-seg__aba { color: #fff; }
body:not(.tem-saida):not(.modo-painel) .busca-seg .busca-seg__aba:hover { background: rgba(255, 255, 255, .12); }
body:not(.tem-saida):not(.modo-painel) .busca-seg .busca-seg__aba[aria-selected="true"] { background: #fff; color: var(--navy); }
.busca-seg__aba:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 2px; }
body:not(.tem-saida):not(.modo-painel) .busca-seg__aba:focus-visible { outline-color: #9cc0ff; }
body[data-app].sem-consulta .busca-seg ~ .reversa { margin: 0; }
body[data-app].sem-consulta .busca-seg ~ .reversa .reversa-tit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body[data-app].sem-consulta .reversa .reversa-resumo, body[data-app].sem-consulta .reversa .nota-aviso { color: #fff; }
/* O resultado da busca por contato mora na coluna do resultado, num cartao claro (06/11/2026).. antes ficava na lateral escura e o texto herdava branco sobre o cartao branco */
#saida > .reversa-saida:not(:empty) { margin: 0; padding: 20px; background: #fff; border: 1px solid var(--linha, #dfe3ec); border-radius: 14px; color: var(--navy, #1a2238); }
#saida > .reversa-saida .reversa-resumo { color: var(--navy, #1a2238); font-size: 17px; }
#saida > .reversa-saida .nota-aviso { color: var(--navy, #1a2238); }
body[data-app].sem-consulta.com-reversa .ferramenta-boasvindas.ap { display: none; }
.aviso-uso { display: none; }
.uso-resp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px 10px; align-content: start; }
.uso-bloco { padding: clamp(6px, 1.1dvh, 10px) 12px; border-radius: 12px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .9); }
.uso-tit { margin: 0 0 2px; font-size: clamp(12px, 1.7dvh, 14px); font-weight: 800; color: var(--azul-texto); }
.uso-txt { margin: 0; font-size: clamp(12px, 1.6dvh, 13.5px); line-height: 1.4; color: var(--navy); }
.uso-aviso { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: clamp(12px, 1.7dvh, 14px); font-weight: 700; }
.uso-aviso .ic { width: 16px; height: 16px; color: var(--azul-texto); }
/* o diálogo do aceite */
dialog.aceite-dlg { width: min(520px, calc(100vw - 24px)); padding: 24px; border: 0; border-radius: 18px; background: #fff; color: var(--navy); box-shadow: 0 30px 80px rgba(8, 14, 22, .5); }
dialog.aceite-dlg::backdrop { background: rgba(10, 14, 26, .72); }
.aceite-tit { margin: 0 0 10px; font-size: 22px; letter-spacing: -.02em; }
.aceite-txt { margin: 0 0 10px; font-size: 16px; line-height: 1.5; }
.aceite-linha { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 12px 0; }
.aceite-linha input { flex: none; width: 24px; height: 24px; accent-color: var(--azul-texto); }
.aceite-linha label { font-weight: 700; font-size: 16px; }
.aceite-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.aceite-acoes .btn { min-height: 44px; }
.aceite-acoes .btn[disabled] { opacity: .55; cursor: not-allowed; }
dialog.aceite-dlg a:focus-visible, dialog.aceite-dlg input:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 2px; }
@media print { .fi-aviso { font-size: 8.5pt; } }
.uso-resp .uso-txt { display: block; }
/* revisão de 04/11/2026.. alvos de 44 px no diálogo do aceite, texto completo dentro do diálogo e telas baixas (notebook com barras do navegador) sem rolagem */
.aceite-txt a { display: inline-flex; align-items: center; min-height: 44px; }
.aceite-texto { max-height: 38dvh; overflow: auto; margin: 0 0 10px; padding: 4px; border-radius: 12px; background: #f1f4fb; }
.aceite-texto:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 2px; }
@media (pointer: coarse) { .uso-txt a { display: inline-flex; align-items: center; min-height: 44px; } }

/* Débitos (04/11/2026).. o selo do cartão do dono é botão; a seção recebe o foco e imprime sozinha */
button.selo--botao { cursor: pointer; font-family: inherit; min-height: 44px; padding: 8px 14px; }
button.selo--botao .ic:last-child { width: 16px; height: 16px; margin-left: 2px; }
button.selo--botao:hover { background: var(--azul-fundo, #eef4ff); }
button.selo--botao:focus-visible, #sec-fiscal:focus-visible, #sec-fiscal:focus { outline: 3px solid var(--azul); outline-offset: 2px; }
.pend-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pend-imprimir { min-height: 48px; }
.imp-debitos { display: none; }
@media print {
  body.imprimindo-debitos { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.imprimindo-debitos > *:not(#impressao-debitos) { display: none !important; }
  body.imprimindo-debitos #impressao-debitos { display: block !important; padding: 14mm; box-sizing: border-box; color: var(--navy); font-size: 11pt; line-height: 1.45; }
  .imp-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--navy); color: #fff; padding: 14px 18px; border-radius: 10px; margin-bottom: 14px; }
  .imp-logo .capi-logo { height: 30px; width: auto; display: block; }
  .imp-info { display: flex; flex-direction: column; align-items: flex-end; font-size: 10pt; }
  .imp-info strong { font-size: 13pt; }
  .imp-debitos .pc { border: 0; box-shadow: none; background: #fff; padding: 0; }
  .imp-debitos .pend-rolagem { overflow: visible; }
  .imp-debitos table { width: 100%; border-collapse: collapse; }
  .imp-debitos th, .imp-debitos td { border-bottom: 1px solid var(--linha); padding: 4px 6px; text-align: left; }
  .imp-debitos tr { break-inside: avoid; }
  .imp-debitos .debitos { break-inside: auto; }
  .imp-nota { margin-top: 16px; font-size: 9pt; color: var(--texto-2); }
}

/* Revelar o CPF/CNPJ (05/11/2026, LGPD).. rótulo visível, alvo de 44 px, foco visível, erro em texto (nunca só cor) */
.revelar { display: grid; gap: 8px; margin-top: 10px; max-width: 520px; }
.revelar-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.revelar-campo { display: grid; gap: 4px; flex: 1 1 220px; }
.revelar-rot { font-size: 14px; font-weight: 600; }
.revelar-sel { min-height: 44px; border: 1.5px solid var(--linha); border-radius: 10px; padding: 0 10px; background: var(--branco); color: var(--navy); }
.revelar-sel:focus-visible, .revelar-btn:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 2px; }
.revelar-sel[aria-invalid="true"] { border-color: var(--erro); border-width: 2px; }
.revelar-btn { min-height: 44px; }
.revelar-nota { font-size: 14px; line-height: 1.45; color: var(--texto-2); }
.revelar-msg { font-size: 14px; font-weight: 600; min-height: 1.45em; }
.dono .revelar-rot, .dono .revelar-msg { color: var(--claro); }
.dono .revelar-nota { color: var(--claro); opacity: .85; }

/* ===== Passada de visual (05/11/2026, pedido do dono.. "precisamos melhorar muita coisa no visual, está difícil, acumulou muita coisa").
   Este bloco é a ÚLTIMA palavra da ficha. Regras, nesta ordem..
   1) uma só rolagem em tela estreita (menos de 1280 px).. nada de rolagem dentro de rolagem; as abas grudam no topo
   2) abas que quebram de linha em vez de cortar o texto; aba ativa com cor sólida (contraste) e a marca "ativa" também no peso da letra
   3) o formulário do CPF fica atrás de "Ver o CPF completo" (o dado continua a um clique)
   4) quatro números do topo viram UMA faixa; valor que não veio escreve "Sem dado" em vez de um ponto solto
   5) alvos de 44 px, texto de leitura em 16 px, nada abaixo de 13 px, foco visível também no cartão escuro
   6) movimento só de transform/opacity em 150 a 300 ms, sem pulso nem deriva infinitos (e nada disso com prefers-reduced-motion) */

/* 1) uma rolagem só em tela estreita */
@media (max-width: 1099px) {   /* 06/11/2026.. a partir de 1100 px são duas colunas desde o topo (bloco @@layout-coluna-topo, no fim do arquivo) */
  body.modo-painel .resultado .painel { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 10px; }
  .resultado .pn-hero { grid-row: auto; max-height: none; overflow: visible; }
  .resultado .pn-nav, .resultado .pn-palco { grid-column: 1; }
  .resultado .pn-palco { overflow: visible; min-height: 0; }
  .resultado .pn-pg { position: static; inset: auto; overflow: visible; }
  .resultado .pn-hero .dono { min-height: 0; }
  .resultado .pn-hero .rapido, .resultado .pn-hero .hero-acoes { position: static; }
  .resultado .pn-nav { position: sticky; top: 0; z-index: 20; }
  .resultado .pn-hero .dono-end, .resultado .pn-hero .dono-unidade { display: flex; }
}

/* 2) abas.. UMA linha so (06/11/2026, ordem do dono).. cabem no computador; se faltar largura a barra rola na horizontal (nunca quebra em duas linhas) */
.resultado .pn-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 32px; gap: 2px; padding: 4px; }
.resultado .pn-nav::-webkit-scrollbar { display: none; }
.resultado .pn-nav.pn-nav--fe { -webkit-mask-image: linear-gradient(to right, transparent, var(--claro) 28px); mask-image: linear-gradient(to right, transparent, var(--claro) 28px); }
.resultado .pn-nav.pn-nav--fd { -webkit-mask-image: linear-gradient(to left, transparent, var(--claro) 28px); mask-image: linear-gradient(to left, transparent, var(--claro) 28px); }
.resultado .pn-nav.pn-nav--fe.pn-nav--fd { -webkit-mask-image: linear-gradient(to right, transparent, var(--claro) 28px, var(--claro) calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, var(--claro) 28px, var(--claro) calc(100% - 28px), transparent); }
.resultado .pn-ind { display: none; }
.resultado .pn-tab { flex: 1 0 auto; justify-content: center; scroll-snap-align: center; padding: 0 11px; font-size: 14px; font-weight: 500; color: var(--navy); }
.resultado .pn-tab[aria-selected="true"] { background: var(--azul-texto); color: var(--claro); font-weight: 600; }
.resultado .pn-tab:hover:not([aria-selected="true"]) { background: var(--azul-suave); }
.resultado .pn-tab:focus-visible { outline-offset: -3px; }
.resultado .pn-tab .ic { display: none; }
@media (max-width: 759px) { .resultado .pn-nav { position: static; } .resultado .pn-tab { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .resultado .pn-nav { scroll-behavior: auto; } }
.tile-v, .tile-sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* 3) CPF atrás de um botão */
.revelar-det { margin-top: 2px; }
.revelar-sum { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 700; color: var(--claro); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .34); }
.revelar-sum[hidden] { display: none; }
.revelar-sum::-webkit-details-marker { display: none; }
.revelar-sum .ic { width: 18px; height: 18px; }
.revelar-sum::after { content: ""; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.revelar-det[open] .revelar-sum::after { transform: translateY(1px) rotate(-135deg); }
.revelar-sum:hover { background: rgba(255, 255, 255, .16); }
.revelar-det[open] .revelar-sum { margin-bottom: 4px; }
.dono :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* 4) faixa única de números e "Sem dado" */
.resultado .visao .kpis { gap: 0; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; }
.resultado .visao .kpi { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 12px 14px; }
.resultado .visao .kpi::before { display: none; }
.resultado .visao .kpi + .kpi { border-left: 1px solid var(--linha); }
@media (max-width: 520px) { .resultado .visao .kpi:nth-child(n+3) { border-top: 1px solid var(--linha); } .resultado .visao .kpi:nth-child(3) { border-left: 0; } }
.kpi-val.vazio, .tile-v.vazio { font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--texto-2); }
.kpi-rot, .kpi-sub, .tile-rot, .tile-sub { font-size: 13px; line-height: 1.4; }
.tile-v { font-size: 17px; }

/* 5) alvos de 44 px, texto de leitura em 16 px, mínimo de 13 px */
.resultado .pn-pg { font-size: 16px; line-height: 1.5; }
.resultado .pn-pg .sec-resumo, .resultado .pn-pg .pc-tit p, .resultado .pn-pg th, .resultado .pn-pg td { font-size: 14px; }
.resultado .pn-pg small, .resultado .pn-pg .p3-nota, .resultado .pn-pg .nota-aviso, .resultado .pn-pg .rx-nota, .resultado .pn-pg figcaption { font-size: 13px; line-height: 1.45; }
.resultado .pn-pg .p3-nota, .resultado .pn-pg .nota-aviso { color: var(--texto-2); }
.resultado .pn-hero .btn, .resultado .pn-hero .btn-icone, .resultado .pn-hero .hb-btn, .resultado .pn-pg .btn, .resultado .pn-pg .btn-icone, .resultado .pn-pg .btn--bloco.btn--sec,
.resultado .pn-pg .mini-acoes .btn, .mini-acoes .btn, .busca-resumo .btn { min-height: 44px; }
.resultado .pn-pg select, .resultado .pn-pg input:not([type=checkbox]):not([type=radio]) { min-height: 44px; }
.resultado .pn-hero .dono-corpo .rotulo, .resultado .pn-hero .inscr-rot, .resultado .pn-hero .marca-dagua, .resultado .pn-hero .revelar-nota { font-size: 13px; }
.resultado .pn-hero .revelar-nota, .resultado .pn-hero .marca-dagua { color: rgba(255, 255, 255, .86); opacity: 1; }
.dono .btn--pri, .resultado .pn-hero .btn--pri { background: var(--azul-texto); box-shadow: none; }
.topo .marca, .topo-in .marca { min-height: 44px; display: inline-flex; align-items: center; }

/* 6) movimento curto e sem repetição */
.resultado .pn-pg--entra { animation-duration: .22s; }
.resultado .pn-pg--entra > *, .resultado .pn-pg--entra > .visao > *, .resultado .pn-pg--entra .duas > * { animation-duration: .22s; animation-delay: 0s; }
.resultado .pn-palco--troca .pn-veu { animation: none; }
.resultado .pn-fundo i { animation: none; }
.btn-nova-busca { animation: none; }
.tile:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .resultado *, .resultado *::before, .resultado *::after { animation: none !important; transition: none !important; }
}

/* contraste e texto inteiro (fecha o que a medição achou) */
.stat--dest { background: var(--azul-texto); }
.stat--dest span { color: #fff; font-size: 13px; }
.nc-n { background: var(--azul-texto); }
.sessao-av { background: var(--azul-texto); }
.busca-resumo-txt, .ent-nome { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
a.selo { min-height: 44px; display: inline-flex; align-items: center; }
.resultado .btn-icone { min-width: 44px; }
@media (min-width: 1100px) {
  /* 05/11/2026 (revisão).. altura MÍNIMA, não fixa.. o cartão do dono (771 px) ficava num painel de 538 px e rolava por dentro, escondendo telefone e nota.
     Agora o painel cresce com o cartão e a página rola uma vez só */
  body.modo-painel .resultado .painel { height: auto; min-height: max(520px, var(--pn-h, calc(100dvh - 200px))); grid-template-rows: auto 1fr; }   /* 1fr (e não minmax(0, 1fr)) para o cartão contar na altura */
  .resultado .pn-hero { overflow: visible; }
  .resultado .pn-hero .rapido, .resultado .pn-hero .hero-acoes { position: static; }
}
/* abas coladas no topo cobrem o início da seção alvo dos atalhos (scrollIntoView).. margem para a barra de até 3 linhas */
@media (max-width: 1099px) { .resultado .pn-pg [id^="sec-"] { scroll-margin-top: 150px; } }

/* Seletor de bairros com caixas de marcar (05/11/2026).. botão, painel com filtro e lista, pílulas removíveis. Alvos de 44 px, foco visível */
.bairros { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bairros-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--linha); border-radius: var(--raio-p); background: var(--branco); color: var(--navy);
  font: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
.bairros-btn:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 2px; }
.bairros-seta { width: 10px; height: 10px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.bairros-btn[aria-expanded="true"] .bairros-seta { transform: rotate(225deg) translate(-2px, -2px); }
.bairros-pilulas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bairros-pilulas[hidden], .bairros-painel[hidden], .bairros-vazio[hidden], .bairros-aviso:empty { display: none; }
.bairros-pilula { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 0 0 14px; border-radius: 22px; background: #fff; color: var(--navy); border: 1.5px solid var(--azul-borda); font-size: 15px; font-weight: 600; max-width: 100%; }
.bairros-pilula span { overflow-wrap: anywhere; }
.bairros-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--azul-texto); font-size: 22px; line-height: 1; cursor: pointer; }
.bairros-x:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: -3px; }
.bairros-painel {
  position: absolute; z-index: 30; top: 54px; left: 0; right: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: #fff; color: var(--navy); border: 1.5px solid var(--azul-borda); border-radius: 14px; box-shadow: 0 18px 40px rgba(33, 43, 61, .28);
}
.bairros-lista { max-height: min(264px, 42vh); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--linha); border-radius: 10px; }
.bairro-op { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; cursor: pointer; font-size: 16px; }
.bairro-op[hidden] { display: none; }
.bairro-op:hover { background: var(--azul-suave); }
.bairro-op input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--azul-texto); }
.bairro-op:has(input:focus-visible) { outline: 3px solid var(--azul-texto); outline-offset: -3px; }
.bairros-cont, .bairros-vazio { margin: 0; font-size: 14px; color: var(--navy); }
.bairros-aviso { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--erro-fundo); color: var(--erro); font-size: 14px; }
.bairros-acoes { display: flex; gap: 8px; }
.bairros-acoes .btn { flex: 1; min-height: 44px; }
body:not(.tem-saida) .busca .bairros-btn, body[data-app].sem-consulta .busca .bairros-btn { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .24); border-radius: 10px; color: #fff; }
body:not(.tem-saida) .busca .bairros-btn:focus-visible, body[data-app].sem-consulta .busca .bairros-btn:focus-visible { outline: 3px solid #9cc0ff; outline-offset: 2px; }
.campo .bairros-painel label, body:not(.tem-saida) .busca .campo .bairros-painel label, body[data-app].sem-consulta .busca .campo .bairros-painel label { color: var(--navy); font-size: 15px; font-weight: 650; }
.campo .bairros-painel input[type="search"], body:not(.tem-saida) .busca .campo .bairros-painel input[type="search"], body[data-app].sem-consulta .busca .campo .bairros-painel input[type="search"], body.modo-painel .busca:not(.busca--recolhida) .campo .bairros-painel input[type="search"] {
  min-height: 48px; padding: 8px 12px; background: #fff; color: var(--navy); border: 1.5px solid var(--linha); border-radius: 10px; font-size: 16px;
}
body:not(.tem-saida) .busca .campo .bairros-painel input[type="search"]::placeholder, body[data-app].sem-consulta .busca .campo .bairros-painel input[type="search"]::placeholder { color: var(--texto-2); }
body:not(.tem-saida) .busca .campo .bairros-painel input[type="search"]:focus-visible, body[data-app].sem-consulta .busca .campo .bairros-painel input[type="search"]:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 0; border-color: var(--azul-texto); background: #fff; }
body:not(.tem-saida) .busca .campo .bairros-painel .bairro-op input, body[data-app].sem-consulta .busca .campo .bairros-painel .bairro-op input, body.modo-painel .busca:not(.busca--recolhida) .campo .bairros-painel .bairro-op input { min-height: 0; width: 22px; padding: 0; background: #fff; }
body:not(.tem-saida) .busca .campo .bairros-painel .bairro-op, body[data-app].sem-consulta .busca .campo .bairros-painel .bairro-op { color: var(--navy); font-size: 16px; font-weight: 400; }
body:not(.tem-saida) .busca .campo .bairros-painel .btn--pri, body[data-app].sem-consulta .busca .campo .bairros-painel .btn--pri { background: var(--azul-texto); color: #fff; min-height: 44px; box-shadow: none; }
body:not(.tem-saida) .busca .campo .bairros-painel .btn--sec, body[data-app].sem-consulta .busca .campo .bairros-painel .btn--sec { background: #fff; color: var(--azul-texto); border: 1.5px solid var(--linha); min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .bairros-seta { transition: none; } }

/* ===== Autocompletar de Rua e Condominio (05/11/2026).. combobox ARIA 1.2 (combobox.js). Vidro escuro nos dois estados da página. ===== */
.ac { position: relative; min-width: 0; }
.ac-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: 4px; list-style: none;
  max-height: var(--ac-max, 320px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--ac-fundo-solido); color: var(--ac-texto); border: 1px solid var(--ac-borda); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(10, 16, 30, .38);
  animation: ac-entra 150ms ease-out;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ac-lista { background: var(--ac-fundo); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
}
.ac-lista[hidden] { display: none; }
.ac-lista--cima { top: auto; bottom: calc(100% + 6px); }
.ac-op {
  display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 44px; padding: 6px 12px; border-radius: 8px;
  cursor: pointer; font-size: 16px; line-height: 1.35; color: var(--ac-texto); overflow-wrap: anywhere;
}
.ac-op:hover { background: var(--ac-hover); }
.ac-op[aria-selected="true"] { background: var(--ac-ativo); box-shadow: inset 3px 0 0 var(--ac-barra); color: var(--ac-forte); }
.ac-op--usar { border-top: 1px solid var(--ac-borda); border-radius: 0 0 8px 8px; margin-top: 2px; font-style: italic; }
.ac-op--info { cursor: default; }
.ac-op--info:hover { background: transparent; }
.ac-casa { font-weight: 800; color: var(--ac-forte); }
.ac-sub { font-size: 14px; color: var(--ac-sub); }
.ac-op:hover .ac-sub, .ac-op[aria-selected="true"] .ac-sub { color: var(--ac-sub-ativo); }
@keyframes ac-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.aviso-auto { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--ac-fundo-solido); color: var(--ac-texto); border: 1px solid var(--ac-borda); font-size: 14px; }
.aviso-auto[hidden] { display: none; }
.aviso-auto__bt { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--ac-barra); border-radius: 10px; background: transparent; color: var(--ac-forte); font-weight: 500; cursor: pointer; }
.aviso-auto__bt:hover { background: var(--ac-hover); }
.aviso-auto__bt:focus-visible { outline: 3px solid var(--ac-barra); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ac-lista { animation: none; } }

/* ===== Redesign aicapivara (handoff 05/11/2026) =====
   Tela de consulta logada (body[data-app].sem-consulta).. grade de duas colunas, lateral escura sticky com o bloco LGPD, cabeçalho com abas
   segmentadas, três cartões de passo e o infográfico "Do endereço à ficha completa". Cores do handoff como custom properties (nada de hex solto).
   Desvios declarados.. a fonte do handoff fica fora (a CSP é font-src 'self'; vale a pilha da página); hover do Localizar mais escuro e
   sem-aceite a 72% (contraste 4,5:1 com texto branco); placeholder e data dos recentes um tom mais claros (contraste 4,5:1); rótulo azul sobre
   claro usa --ap-primary-texto. As transições de cor do infográfico seguem o handoff (cortadas no prefers-reduced-motion). */
:root {
  --ap-primary: #1E6FE0; --ap-primary-hover: #2A7BEE; --ap-primary-hover-texto: #1A63CC; --ap-primary-texto: #1559BD; --ap-primary-light: #3B82F6;
  --ap-link-on-dark: #7FB0FF; --ap-link-on-dark-2: #A9CBFF;
  --ap-navy-900: #18233A; --ap-navy-800: #1E2C44;
  --ap-page-bg: #F3F6FB; --ap-surface: #FFFFFF; --ap-surface-2: #F8FAFD; --ap-tint: #F1F6FE; --ap-tint-2: #E6EFFD; --ap-input-bg: #F5F9FF;
  --ap-border: #E3E9F2; --ap-border-2: #EDF1F7; --ap-chip-border: #DCE7F8; --ap-tint-border: #CFE0FB; --ap-tile-active-border: #9DC0F5;
  --ap-arrow: #9DB8E6; --ap-bar-off: #D6E2F5;
  --ap-text: #16233A; --ap-text-2: #3A4A63; --ap-muted: #5B6B84; --ap-chip-text: #1F3B66;
  --ap-on-dark-1: #C8D3E4; --ap-on-dark-2: #A9B6CB; --ap-on-dark-3: #9AA8BF; --ap-placeholder: #A9B6CB;
  --ap-success: #12805C; --ap-success-on-dark: #34D399; --ap-success-on-dark-texto: #A7F3D0;
  --ap-warning: #B45309; --ap-warning-bg: #FFFBF0; --ap-warning-on-dark: #FFD98A; --ap-warning-on-dark-borda: #F5B942;
}
body[data-app].sem-consulta { background: var(--ap-page-bg); color: var(--ap-text); }
body[data-app].sem-consulta.tem-saida .pagina { max-width: none; width: 100%; margin: 0; display: grid; grid-template-columns: minmax(300px, 368px) minmax(0, 1fr); gap: 16px; padding: 12px; align-items: start; }
body[data-app].sem-consulta .saida { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* a lateral */
body[data-app].sem-consulta .busca {
  position: sticky; top: calc(var(--ms-barra-h, 61px) + 12px); align-self: start; display: flex; flex-direction: column; min-height: calc(100dvh - var(--ms-barra-h, 61px) - 24px);
  padding: 20px; border: 0; border-radius: 14px; color: var(--ap-surface); box-shadow: none; overflow: visible;
  background: linear-gradient(180deg, var(--ap-navy-800) 0%, var(--ap-navy-900) 100%);
}
body[data-app].sem-consulta .busca-area { display: flex; flex-direction: column; flex: 1; gap: 16px; min-height: 0; }
body[data-app].sem-consulta .busca-marca { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--ap-surface); }
body[data-app].sem-consulta .busca-marca .capi-ico { width: 26px; height: 14px; margin: 0; vertical-align: 0; }
body[data-app].sem-consulta .busca h2 { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; color: var(--ap-surface); }
body[data-app].sem-consulta .busca-area > .ajuda, body[data-app].sem-consulta .capa-nota { display: none; }
body[data-app].sem-consulta .busca .form { display: grid; gap: 16px; margin: 0; }
body[data-app].sem-consulta .busca .campos { grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; }
body[data-app].sem-consulta .busca .campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body[data-app].sem-consulta .busca .campos-2:has(> .campo:only-child) { grid-template-columns: minmax(0, 1fr); }
body[data-app].sem-consulta .busca .campo { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body[data-app].sem-consulta .busca .campo label { color: var(--ap-surface); font-size: 12px; font-weight: 700; }
body[data-app].sem-consulta .busca .opcional { color: var(--ap-on-dark-2); font-weight: 400; }
body[data-app].sem-consulta .busca .campo input {
  width: 100%; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06);
  color: var(--ap-surface); font: inherit; font-size: 14px; font-weight: 400; outline: none;
}
body[data-app].sem-consulta .busca .campo input::placeholder { color: var(--ap-placeholder); opacity: 1; }
body[data-app].sem-consulta .busca .campo input:focus-visible { border-color: var(--ap-primary-light); outline: 3px solid var(--ap-primary-light); outline-offset: 1px; background: rgba(255, 255, 255, .09); }
body[data-app].sem-consulta .busca .campo input[aria-invalid="true"] { border-color: var(--ap-warning-on-dark-borda); }
body[data-app].sem-consulta .busca .bairros-btn { min-height: 40px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: var(--ap-surface); font-size: 14px; font-weight: 400; }
body[data-app].sem-consulta .busca .bairros-btn:focus-visible { border-color: var(--ap-primary-light); outline: 3px solid var(--ap-primary-light); outline-offset: 1px; }
/* a dica sob demanda.. fica na árvore de acessibilidade (aria-describedby) e aparece sobre o campo só com o foco */
body[data-app].sem-consulta .busca .campo .dica { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 6; margin: 2px 0 0; padding: 6px 10px; border-radius: 8px;
  background: var(--ap-surface); color: var(--ap-text); font-size: 13px; line-height: 1.35; box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease-out, transform .15s ease-out; }
body[data-app].sem-consulta .busca .campo:focus-within .dica { opacity: 1; transform: none; }
body[data-app].sem-consulta .busca .ap-sem-aceite { margin: -6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ap-warning-on-dark); }
body[data-app].sem-consulta .busca .btn--pri {
  min-height: 44px; border: 0; border-radius: 9px; background: var(--ap-primary); color: var(--ap-surface); font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 18px rgba(30, 111, 224, .35); transition: transform .15s ease-out;
}
body[data-app].sem-consulta .busca .btn--pri:hover { background: var(--ap-primary-hover-texto); box-shadow: 0 6px 18px rgba(30, 111, 224, .35), 0 0 0 2px var(--ap-primary-hover); }
body[data-app].sem-consulta .busca .btn--pri.btn--sem-aceite { opacity: .72; }
body[data-app].sem-consulta .busca .btn--sec { min-height: 44px; border-radius: 9px; background: rgba(255, 255, 255, .08); color: var(--ap-surface); border: 1px solid rgba(255, 255, 255, .4); }
body[data-app].sem-consulta .busca .btn:focus-visible, body[data-app].sem-consulta .busca .rec-b:focus-visible, body[data-app].sem-consulta .busca .rec-limpar:focus-visible,
body[data-app].sem-consulta .busca .lgpd button:focus-visible, body[data-app].sem-consulta .busca .lgpd a:focus-visible { outline: 3px solid var(--ap-link-on-dark-2); outline-offset: 2px; }
/* consultas recentes (casco do handoff.. a busca e o histórico completo vêm na etapa 3) */
body[data-app].sem-consulta .busca .recentes { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
body[data-app].sem-consulta .busca .rec-cab { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
body[data-app].sem-consulta .busca .recentes .rotulo { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ap-on-dark-1); }
body[data-app].sem-consulta .busca .rec-limpar { min-height: 28px; padding: 0 4px; font-size: 12px; font-weight: 800; color: var(--ap-link-on-dark); }
body[data-app].sem-consulta .busca .rec-lista { display: flex; flex-direction: column; gap: 8px; }
body[data-app].sem-consulta .busca .rec-lista > li { display: block; min-width: 0; }
body[data-app].sem-consulta .busca .rec-b { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; min-height: 0; width: 100%; padding: 10px 12px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--ap-surface); text-align: left; cursor: pointer; }
body[data-app].sem-consulta .busca .rec-b:hover { background: rgba(255, 255, 255, .09); border-color: rgba(127, 176, 255, .5); }
.rec-l1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.rec-pill { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(59, 130, 246, .22); color: var(--ap-link-on-dark-2); }
.rec-quando { font-size: 11px; color: var(--ap-on-dark-3); }
.rec-end { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; line-height: 1.3; }
body[data-app].sem-consulta .busca .rec-st { align-self: flex-start; padding: 1px 8px; font-size: 11px; background: rgba(59, 130, 246, .22); color: var(--ap-link-on-dark-2); }
/* o texto de uso restrito vive no bloco LGPD ("Rastreio").. aqui só para leitor de tela */
body[data-app].sem-consulta .aviso-uso { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* bloco LGPD */
.lgpd { display: none; }
body[data-app].sem-consulta .lgpd { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.lgpd-tit { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 800; color: var(--ap-surface); }
.lgpd-ico { flex: none; color: var(--ap-link-on-dark); }
.lgpd-linhas { display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; line-height: 1.45; color: var(--ap-on-dark-1); }
.lgpd-linhas p { margin: 0; }
.lgpd-linhas strong { color: var(--ap-surface); }
.lgpd a { color: var(--ap-link-on-dark); font-weight: 700; overflow-wrap: anywhere; }
.lgpd-aceito { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(18, 128, 92, .18); border: 1px solid rgba(52, 211, 153, .35); font-size: 11.5px; line-height: 1.4; color: var(--ap-on-dark-1); }
.lgpd-check { flex: none; margin-top: 1px; color: var(--ap-success-on-dark); }
.lgpd-aceito__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.lgpd-aceito__tit { font-weight: 800; color: var(--ap-success-on-dark-texto); }
.lgpd-ver { align-self: flex-start; margin-top: 3px; padding: 0; border: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.4; color: var(--ap-link-on-dark); cursor: pointer; }
.lgpd-termo { min-height: 36px; border-radius: 8px; border: 1px solid var(--ap-warning-on-dark-borda); background: rgba(245, 185, 66, .12); color: var(--ap-warning-on-dark); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.lgpd-termo:hover { background: rgba(245, 185, 66, .2); }
/* a área principal */
body[data-app].sem-consulta .ferramenta-boasvindas.ap { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; align-items: stretch; }
.ap-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ap-cab__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ap-logo { flex: none; display: grid; place-items: center; width: 44px; height: 36px; border-radius: 9px; background: var(--ap-navy-800); }
.ap-logo .capi-ico { width: 30px; height: 18px; margin: 0; vertical-align: 0; }
.ap-cab__txt { min-width: 0; }
.ap-cab h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.01em; color: var(--ap-text); }
.ap .ap-cab p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ap-muted); }
.ap-abas { display: flex; gap: 4px; max-width: 100%; padding: 4px; border-radius: 10px; background: var(--ap-surface); border: 1px solid var(--ap-border); overflow-x: auto; scrollbar-width: none; }
.ap-abas::-webkit-scrollbar { display: none; }
.ap-aba { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ap-text-2); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.ap-aba:hover { background: var(--ap-tint); }
.ap-aba[aria-selected="true"] { background: var(--ap-primary); color: var(--ap-surface); }
.ap-aba:focus-visible { outline: 3px solid var(--ap-primary); outline-offset: 2px; }
.ap-palco { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ap-pg { display: flex; flex-direction: column; flex: 1; gap: 12px; min-width: 0; }
.ap-pg:focus-visible { outline: 3px solid var(--ap-primary); outline-offset: 3px; border-radius: 14px; }
/* passos */
.ap-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.ap--lt640 .ap-passos { grid-template-columns: minmax(0, 1fr); }
.ap-passo { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; border-radius: 14px; background: var(--ap-surface); border: 1px solid var(--ap-border); }
.ap-passo__topo { display: flex; align-items: center; gap: 10px; }
.ap-passo__n { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ap-primary); color: var(--ap-surface); font-size: 15px; font-weight: 900; }
.ap-passo__tit { min-width: 0; margin: 0; font-size: 15px; font-weight: 900; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.ap .ap-passo__txt { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ap-muted); text-wrap: pretty; }
.ap .ap-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 4px 0 0; }
.ap-chip { display: flex; align-items: center; gap: 6px; padding: 4px 9px; line-height: 1.35; border-radius: 7px; background: var(--ap-tint); border: 1px solid var(--ap-chip-border); color: var(--ap-chip-text); font-size: 12px; font-weight: 700; }
.ap-chip__ponto { flex: none; width: 5px; height: 5px; border-radius: 3px; background: var(--ap-primary); }
/* infográfico */
.ap-info { display: flex; flex-direction: column; flex: 1; gap: 18px; padding: 22px; border-radius: 14px; background: var(--ap-surface); border: 1px solid var(--ap-border); }
.ap-info__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.ap .ap-info__tit { margin: 0; font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.ap .ap-info__sub { margin: 0; font-size: 12px; color: var(--ap-muted); }
.ap-fluxo { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1fr); align-items: stretch; }
.ap--lt720 .ap-fluxo { grid-template-columns: minmax(0, 1fr); }
.ap-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border-radius: 12px; border: 1px solid var(--ap-border); }
.ap-col__rot { font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ap-muted); }
.ap-col--hub { background: var(--ap-navy-800); border-color: var(--ap-navy-800); color: var(--ap-surface); transition: box-shadow .4s; }
.ap-col--hub .ap-col__rot { color: var(--ap-link-on-dark-2); }
.ap-col--hub.is-cruzando { box-shadow: 0 0 0 4px rgba(30, 111, 224, .25), 0 10px 24px rgba(30, 44, 68, .25); }
.ap-col--ficha { background: var(--ap-tint); border-color: var(--ap-tint-border); transition: box-shadow .4s; }
.ap-col--ficha .ap-col__rot { color: var(--ap-primary-texto); }
.ap-col--ficha.is-feito { box-shadow: 0 0 0 4px rgba(18, 128, 92, .15); }
.ap-campo { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1.5px solid var(--ap-primary); background: var(--ap-input-bg); font-size: 13px; font-weight: 700; color: var(--ap-text); white-space: nowrap; overflow: hidden; transition: box-shadow .3s; }
.ap-campo.is-glow { box-shadow: 0 0 0 4px rgba(30, 111, 224, .15); }
.ap-campo .ap-ico { display: flex; flex: none; color: var(--ap-primary); }
.ap-digitado { overflow: hidden; text-overflow: ellipsis; }
.ap-caret { flex: none; width: 2px; height: 16px; margin-left: -6px; background: var(--ap-primary); opacity: 0; }
.ap-caret.is-on { opacity: 1; }
.ap-extras { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--ap-muted); }
.ap-seta { position: relative; display: flex; align-items: center; justify-content: center; min-height: 32px; color: var(--ap-arrow); }
.ap--lt720 .ap-seta { transform: rotate(90deg); }
.ap-ponto { position: absolute; top: 50%; left: var(--ap-ponto, 0%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 4px; background: var(--ap-primary); box-shadow: 0 0 0 4px rgba(30, 111, 224, .18); opacity: 0; transition: opacity .2s; }
.ap-ponto.is-on { opacity: 1; }
.ap-fontes { display: flex; flex-wrap: wrap; gap: 5px; }
.ap-fonte { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: var(--ap-on-dark-2); font-size: 11.5px; font-weight: 700; transition: background-color .3s, color .3s; }
.ap-fonte__ponto { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .25); transition: background-color .3s; }
.ap-fonte.is-on { background: rgba(59, 130, 246, .35); color: var(--ap-surface); }
.ap-fonte.is-on .ap-fonte__ponto { background: var(--ap-success-on-dark); }
.ap-hub-status { font-size: 11.5px; color: var(--ap-on-dark-1); }
.ap-ficha__tit { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 900; }
.ap-selo { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 9px; background: var(--ap-success); color: var(--ap-surface); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s; }
.is-feito .ap-selo { opacity: 1; transform: scale(1); }
.ap-barras { display: flex; gap: 4px; }
.ap-barra { flex: 1; height: 6px; border-radius: 3px; background: var(--ap-bar-off); transition: background-color .3s; }
.ap-barra.is-on { background: var(--ap-primary); }
.ap-ficha-status { font-size: 11.5px; color: var(--ap-text-2); }
.ap-info__fichaw { display: flex; flex-direction: column; gap: 10px; }
.ap-info__rotulo { margin: 0; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ap-muted); }
.ap-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ap--lt720 .ap-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap--lt720 .ap-tile:last-child { grid-column: span 2; }
.ap-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; border-radius: 12px; background: var(--ap-surface-2); border: 1px solid var(--ap-border); transition: background-color .3s, border-color .3s, transform .3s; }
.ap-tile.is-on { background: var(--ap-surface); border-color: var(--ap-tile-active-border); }
.ap-tile.is-sobe { transform: translateY(-3px); }
.ap-tile__ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ap-tint-2); color: var(--ap-primary); transition: background-color .3s, color .3s; }
.ap-tile.is-on .ap-tile__ic { background: var(--ap-primary); color: var(--ap-surface); }
.ap-tile__tit { font-size: 13.5px; font-weight: 900; }
.ap-tile__txt { font-size: 12px; line-height: 1.45; color: var(--ap-muted); }
.ap-faixa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: auto; border-radius: 12px; overflow: hidden; background: var(--ap-border); border: 1px solid var(--ap-border); }
.ap--lt720 .ap-faixa { grid-template-columns: minmax(0, 1fr); }
.ap-faixa__item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ap-warning-bg); }
.ap-faixa__item .ap-ico { display: flex; flex: none; color: var(--ap-warning); }
.ap-faixa__item strong { display: block; font-size: 12.5px; font-weight: 900; }
.ap-faixa__item span { display: block; font-size: 11.5px; color: var(--ap-muted); }
/* as outras duas abas */
.ap-gets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ap-get { padding: 12px 14px; border-radius: 12px; background: var(--ap-surface); border: 1px solid var(--ap-border); }
.ap .ap-get__tit { margin: 0; font-size: 13.5px; font-weight: 800; }
.ap .ap-get__txt { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--ap-muted); }
.ap-regras { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ap-regra { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ap-surface); border: 1px solid var(--ap-border); font-size: 12.5px; line-height: 1.45; color: var(--ap-text-2); }
.ap-regra .ap-ico { display: flex; flex: none; margin-top: 2px; color: var(--ap-primary); }
.ap-uso-completo { border-radius: 12px; background: var(--ap-surface); border: 1px solid var(--ap-border); }
.ap-uso-completo summary { display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 12.5px; font-weight: 800; color: var(--ap-primary-texto); cursor: pointer; }
.ap-uso-completo[open] summary { border-bottom: 1px solid var(--ap-border-2); }
.ap-uso-completo .uso-resp { padding: 12px; }
.ap-uso-completo summary:focus-visible { outline: 3px solid var(--ap-primary); outline-offset: -3px; border-radius: 12px; }
/* toque e tela estreita */
@media (pointer: coarse) {
  .ap-aba { min-height: 44px; }
  body[data-app].sem-consulta .busca .rec-limpar, .lgpd-ver { min-height: 44px; padding: 0 8px; }
  .lgpd-termo { min-height: 44px; }
}
@media (max-width: 899px) {
  body[data-app].sem-consulta.tem-saida .pagina { grid-template-columns: minmax(0, 1fr); }
  body[data-app].sem-consulta .busca { position: static; min-height: 0; }
}
@media (max-width: 480px) {
  .ap-abas { width: 100%; }
  .ap-aba { flex: 1 1 auto; padding: 0 8px; }
  .ap-info { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-campo, .ap-col, .ap-ponto, .ap-fonte, .ap-fonte__ponto, .ap-selo, .ap-barra, .ap-tile, .ap-tile__ic, body[data-app].sem-consulta .busca .btn--pri, body[data-app].sem-consulta .busca .campo .dica { transition: none; }
  .busca-seg .busca-seg__aba { transition: none; }
}
@media (min-width: 900px) and (max-height: 700px) {   /* janela baixa.. a lateral sticky seria maior que a tela e esconderia o bloco LGPD */
  body[data-app].sem-consulta .busca { position: static; min-height: 0; }
}
/* ===== fim do redesign aicapivara */
/* ===== Termo de Uso e Responsabilidade (etapa 2, 05/11/2026).. o modal do handoff: cabeçalho, 10 cláusulas rolando, rodapé com a assinatura eletrônica */
dialog.termo-dlg { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 14px; background: var(--ap-surface); color: var(--ap-text); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); overflow: hidden; }
dialog.termo-dlg[open] { display: flex; flex-direction: column; }
dialog.termo-dlg::backdrop { background: rgba(10, 18, 32, .6); }
.termo-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--ap-border-2); }
.termo-tit { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.3; color: var(--ap-text); }
.termo-sub { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--ap-muted); }
.termo-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 7px; background: var(--ap-page-bg); color: var(--ap-text-2); cursor: pointer; }
.termo-x .ic svg { width: 14px; height: 14px; stroke-width: 2.6; }
.termo-corpo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.55; color: var(--ap-text-2); }
.termo-clausula { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
.termo-num { font-weight: 900; color: var(--ap-primary-texto, var(--ap-primary)); }
.termo-clausula strong { color: var(--ap-text); }
.termo-rodape { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--ap-border-2); background: var(--ap-surface-2); }
.termo-campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ap-text); }
.termo-nome { height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ap-border); background: var(--ap-surface); font: inherit; font-weight: 400; font-size: 16px; color: var(--ap-text); }
.termo-concordo { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ap-text-2); }
.termo-concordo input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--ap-primary); }
.termo-concordo label { cursor: pointer; }
.termo-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.termo-nota { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ap-muted); }
.termo-msg { margin: 0; font-size: 12.5px; line-height: 1.4; font-weight: 700; color: var(--ap-warning); }
.termo-msg[hidden] { display: none; }
.termo-ok { min-height: 40px; padding: 0 18px; font-size: 14px; font-weight: 800; }
.termo-ok[disabled] { background: var(--ap-on-dark-2); color: var(--ap-text); cursor: not-allowed; opacity: 1; }
dialog.termo-dlg button:focus-visible, dialog.termo-dlg input:focus-visible, .termo-corpo:focus-visible { outline: 3px solid var(--ap-primary); outline-offset: 2px; }
@media (pointer: coarse) {
  .termo-x { width: 44px; height: 44px; }
  .termo-nome, .termo-ok, dialog.termo-dlg .btn { min-height: 44px; }
  .termo-concordo input { width: 24px; height: 24px; }
  .termo-concordo label { display: flex; align-items: center; min-height: 44px; }
}
@media (max-width: 480px) { .termo-topo, .termo-corpo, .termo-rodape { padding-left: 16px; padding-right: 16px; } }
/* ===== fim do Termo */

/* ===== Consultas recentes do servidor (etapa 3, 05/11/2026).. busca, contador, lista rolável */
.rec-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rec-busca { position: relative; display: flex; align-items: center; }
.rec-busca .ic { position: absolute; left: 11px; width: 16px; height: 16px; pointer-events: none; color: var(--muted, #5b6b84); }
.rec-q { width: 100%; min-height: 40px; padding: 0 10px 0 34px; border: 1px solid var(--linha, #e3e9f2); border-radius: 9px; background: var(--branco, #fff); color: var(--navy, #18233a); font: inherit; font-size: 13px; }
.rec-contador { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--muted, #5b6b84); }
.rec-vazio { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted, #5b6b84); }
.rec-prop { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 11.5px; line-height: 1.35; }
.rec-prop-rot { flex: none; }
.rec-prop-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
body[data-app].sem-consulta .busca .rec-busca .ic { color: var(--ap-on-dark-3); }
body[data-app].sem-consulta .busca .rec-q { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); color: var(--ap-surface); }
body[data-app].sem-consulta .busca .rec-q::placeholder { color: var(--ap-placeholder); opacity: 1; }
body[data-app].sem-consulta .busca .rec-q:focus-visible { outline: 3px solid var(--ap-link-on-dark-2); outline-offset: 2px; }
body[data-app].sem-consulta .busca .rec-contador, body[data-app].sem-consulta .busca .rec-vazio { color: var(--ap-on-dark-2); }
body[data-app].sem-consulta .busca .rec-prop-rot { color: var(--ap-on-dark-3); }
body[data-app].sem-consulta .busca .rec-prop-nome { color: var(--ap-on-dark-1); }
body[data-app].sem-consulta .busca .rec-lista { max-height: min(42vh, 340px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
@media (pointer: coarse) {
  .rec-q { min-height: 44px; }
  body[data-app].sem-consulta .busca .rec-limpar { min-height: 44px; min-width: 44px; }
  body[data-app].sem-consulta .busca .rec-b { min-height: 44px; }
}
/* ===== fim das consultas recentes */

/* ===== Vínculos & Regularidade Fiscal Pública (05/11/2026).. só o proprietário recebe o bloco; sem animação, sem estilo inline */
.dd { display: grid; gap: 20px; padding: 4px 20px 20px; }
.dd-sec { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--linha); }
.dd-sec:first-child { border-top: 0; padding-top: 0; }
.dd-sec-t { margin: 0; font-size: 16px; line-height: 1.5; color: var(--navy); }
.dd-campo:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.dd-pilula { display: inline-flex; align-items: center; gap: 6px; justify-self: start; max-width: 100%; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--linha); background: var(--branco); color: var(--navy); font-size: 14px; line-height: 1.5; font-weight: 650; }
.dd-pilula .ic { width: 16px; height: 16px; flex: none; color: var(--azul-texto); }
.dd-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dd-rotulo { margin: 0; font-size: 16px; line-height: 1.5; color: var(--navy); }
.dd-rot { font-size: 16px; line-height: 1.5; font-weight: 650; color: var(--navy); }
.dd-nota { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.dd-nota .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--azul-texto); }
.dd-vazio { margin: 0; font-size: 16px; line-height: 1.5; color: var(--texto-2); }
.dd-lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dd-emp { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--branco); }
.dd-emp-nome { font-size: 16px; line-height: 1.5; color: var(--navy); }
.dd-emp-cnpj, .dd-emp-det { font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.dd-item { font-size: 15px; line-height: 1.5; color: var(--navy); }
.dd-badge { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 12px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 14px; line-height: 1.5; font-weight: 700; }
.dd-badge .ic { width: 16px; height: 16px; flex: none; }
.dd-badge--verde { background: #e3f3ea; color: #0b5d36; }
.dd-badge--amarelo { background: #fff1c9; color: #6b4200; }
.dd-badge--vermelho { background: var(--erro-fundo); color: var(--erro); }
.dd-badge--cinza { background: var(--suave); color: var(--navy); }
.dd-campo { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--linha); border-radius: var(--raio-p); background: var(--branco); color: var(--navy); font: inherit; font-size: 16px; }
.dd-selo { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--azul-suave); border: 1px solid var(--azul-borda); color: var(--navy); font-size: 14px; line-height: 1.5; font-weight: 650; }
.dd-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--azul-suave); border: 1px solid var(--azul-borda); font-size: 15px; line-height: 1.5; color: var(--navy); }
.dd-aviso .ic { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--azul-texto); }
/* ===== fim de Vínculos & Regularidade Fiscal Pública */

/* Fonte fora do ar (05/11/2026).. cartao com a mensagem padrao e "Tentar de novo" so daquela fonte (status-fonte.js). Nunca vira "sem resultado". */
.sf .sf-corpo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; }
.sf .sf-msg { margin: 0; flex: 1 1 240px; font-size: 1rem; line-height: 1.5; }
.sf .sf-btn { min-height: 44px; }

/* Contatos da cascata (05/11/2026).. grupos por relevância, confiança em texto (ícone só acompanha), vínculo e aviso de terceiro */
.contatos-grupo + .contatos-grupo { margin-top: 14px; }
.contatos-grupo-tit { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--navy); }
.contato-rotulo { white-space: normal; overflow-wrap: anywhere; }
.contato-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; font-size: 12px; color: var(--texto-2); }
.contato-conf { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--navy); }
.contato-conf .ic { width: 13px; height: 13px; color: var(--azul-texto); }
.contato-conf--baixa { font-weight: 600; color: var(--texto-2); }
.contato-conf--baixa .ic { color: var(--erro); }
.contato-prov { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--azul-suave); border: 1px solid var(--azul-borda); font-weight: 700; color: var(--navy); }
.contato-prov .ic { width: 13px; height: 13px; color: var(--azul-texto); }
.contato-aviso { display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--azul-suave); border: 1px solid var(--azul-borda); font-size: 12px; line-height: 1.4; color: var(--navy); }
.contato-aviso .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--azul-texto); }

/* ===== Pendências e Raio-x compactos (ordem do dono, 05/11/2026.. "ESTÁ ENORME ESSE INFOGRÁFICO, MELHORE PARA OCUPAR MENOS ESPAÇO")
   Pendências sem débito = uma linha só; Raio-x = faixa baixa (lote, medidor e 4 números lado a lado; no celular, 2 colunas).
   Guarda de altura em tests/test_prefeitura_cartoes_compactos_05_11.py (menos da metade da altura antiga, 1366 px). */
.pn-pg .pc.pc--linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 14px; min-height: 44px; }
.pc--linha h3 { font-size: 15px; }
.pc--linha .sec-ic { width: 28px; height: 28px; border-radius: 8px; }
.pc--linha .linha-estado { font-size: 15px; padding: 2px 10px; border-radius: 999px; background: var(--azul-suave); color: var(--azul-texto); }
.pc--linha .sec-resumo { font-size: 14px; flex: 1 1 200px; min-width: 0; }

.pn-pg .pc.pc--compacto { padding: 8px 14px 10px; gap: 6px; }
.pc--compacto .pc-cab { gap: 8px; }
.pc--compacto .sec-ic { width: 28px; height: 28px; border-radius: 8px; }
.pc--compacto .pc-tit { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.pc--compacto .rx-nota { margin: 0 0 4px; }
/* Partes opcionais (esquema, medidor, numeros).. flex que quebra linha, nada de grade fixa: cada parte presente ocupa o que precisa e os numeros pegam o resto */
.pc--compacto .rx { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.pc--compacto .rx-fig { flex: 0 0 200px; }
.pc--compacto .rx-med { flex: 0 0 150px; }
.pc--compacto .rx-fig, .pc--compacto .rx-med { margin: 0; gap: 2px; justify-items: center; min-width: 0; }
.pc--compacto .rx-fig figcaption, .pc--compacto .rx-med figcaption { font-size: 12px; line-height: 1.25; text-align: center; color: rgba(255, 255, 255, .78); }
.pc--compacto .esquema { max-width: 200px; }
.pc--compacto .medidor { max-width: 150px; }
.pc--compacto .lt-txt { font-size: 10px; }
.pc--compacto .lt-txt--p { font-size: 10px; }
.pc--compacto .rx-stats { flex: 1 1 380px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.pc--compacto .rx-stat { padding: 6px 8px; gap: 1px; align-content: start; }
.pc--compacto .rx-stat span { font-size: 13px; line-height: 1.2; color: rgba(255, 255, 255, .82); }
.pc--compacto .rx-stat strong { font-size: 16px; line-height: 1.2; }
@media (max-width: 899px) {
  .pc--compacto .rx-fig { flex: 3 1 0; }
  .pc--compacto .rx-med { flex: 2 1 0; }
  .pc--compacto .lt-txt { font-size: 13px; }
  .pc--compacto .lt-txt--p { font-size: 12px; }
  .pc--compacto .rx-stats { flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Palco da consulta nao concluida (06/11/2026, pedido do dono).. no lugar da faixa rosa. A area inteira da ficha (a coluna a direita do formulario; no
   celular, a area abaixo dele) e o palco e a animacao fica no centro geometrico dela. Minimalista.. a mesma familia do restante da pagina, so tokens
   (azul da marca no anel e no arco, navy no texto), sem sombra, sem gradiente. So transform (o arco gira) e opacity (a linha de status troca a cada
   1,8 s) animam. Movimento reduzido.. anel parado e a linha fixa em "Cruzando as fontes". Montado por status-fonte.js, tentativas em localizador.js. */
body.palco-ativo .saida { align-self: stretch; grid-template-rows: minmax(0, 1fr); }
.palco { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; min-height: 420px; min-width: 0; padding: 24px 16px; text-align: center; font-family: inherit; color: var(--navy); }
.palco-miolo { grid-row: 2; display: grid; justify-items: center; gap: 20px; }
.palco-pe { grid-row: 3; align-self: start; display: grid; justify-items: center; gap: 8px; margin-top: 28px; }
.palco-anel { position: relative; display: grid; place-items: center; width: 136px; height: 136px; border: 1px solid var(--azul); border-radius: 50%; }
.palco-arco { position: absolute; inset: -1px; border: 2px solid transparent; border-top-color: var(--azul); border-radius: 50%; animation: palco-gira 1.4s linear infinite; }
.palco-titulo { font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--navy); }
.palco-frases { display: grid; justify-items: center; min-height: 24px; font-size: 15px; line-height: 24px; color: var(--navy); }
.palco-frases > span { grid-area: 1 / 1; opacity: 0; animation: palco-frase 9s linear infinite; }
.palco-frases > span:nth-child(2) { animation-delay: 1.8s; }
.palco-frases > span:nth-child(3) { animation-delay: 3.6s; }
.palco-frases > span:nth-child(4) { animation-delay: 5.4s; }
.palco-frases > span:nth-child(5) { animation-delay: 7.2s; }
.palco-frases > .palco-fixa { display: none; }
.palco-nota { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.palco--nota .palco-nota { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 14px; line-height: 1.5; color: var(--navy); }
.palco-btn { min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: transparent; color: var(--azul-texto); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.palco-btn:hover { background: var(--azul-suave); }
@keyframes palco-gira { to { transform: rotate(360deg); } }
@keyframes palco-frase { 0% { opacity: 0; } 4% { opacity: 1; } 16% { opacity: 1; } 20%, 100% { opacity: 0; } }
@media (max-width: 1023px) { .palco { min-height: 340px; } }
@media (prefers-reduced-motion: reduce) {
  .palco-arco, .palco-frases > span { animation: none; }
  .palco-frases > span:not(.palco-fixa) { display: none; }
  .palco-frases > .palco-fixa { display: block; opacity: 1; }
}
/* fim do palco */

/* @@layout-coluna-topo */
/* 06/11/2026, ordem do dono (print anotado).. "o filtro da esquerda deve ir até em cima.. tudo em uma só linha cada sessão".
   No computador (>= 1100 px) a PÁGINA é a grade de duas colunas desde o topo.. esquerda = resumo da busca + cartão do proprietário (vai até o pé da janela);
   direita = Nova busca, progresso, abas, conteúdo (uma linha cada, <= 56 px). A busca, a saída, o resultado e o painel viram subgrades da mesma grade.
   Abaixo de 1100 px nada disto vale e a coluna única segue a ordem natural. A busca aberta por cima (janela fixa) não entra na grade. */
@media (min-width: 1100px) {
  body.modo-painel .pagina { grid-template-columns: minmax(280px, 30%) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 12px; row-gap: 0;
    align-items: stretch; min-height: var(--pn-pag-h, 0px); }
  body.modo-painel .busca.busca--recolhida { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; padding: 0; margin: 0 0 10px;
    background: none; border: 0; box-shadow: none; border-radius: 0; }
  body.modo-painel .busca--recolhida .busca-resumo { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; gap: 0 12px; }
  body.modo-painel .busca-resumo-lado { grid-column: 1; min-height: 48px; padding: 0 14px; background: var(--branco); border: 1px solid var(--linha);
    border-radius: var(--raio); box-shadow: 0 1px 2px var(--sombra-cor); }
  body.modo-painel .busca-resumo-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  body.modo-painel .busca-resumo > .btn-nova-busca { grid-column: 2; justify-self: end; align-self: center; }
  body.modo-painel .saida { grid-column: 1 / -1; grid-row: 2 / 5; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: 0 12px; min-height: 0; }
  body.modo-painel .saida > #estado, body.modo-painel .saida > #carregando { grid-column: 2; grid-row: 1; }
  body.modo-painel .saida > .progresso { grid-column: 2; grid-row: 1; margin-bottom: 10px; }
  body.modo-painel .saida > .resultado:not([hidden]) { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: 0 12px; min-height: 0; }
  body.modo-painel .resultado .painel { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: 0 12px; height: auto; min-height: 0; }
  body.modo-painel .resultado .pn-hero { grid-column: 1; grid-row: 1 / -1; overflow: visible; }
  body.modo-painel .resultado .pn-nav { grid-column: 2; grid-row: 2; margin-bottom: 10px; }
  body.modo-painel .resultado .pn-palco { grid-column: 2; grid-row: 3; min-height: 0; }
}
@media (min-width: 1280px) { body.modo-painel .pagina { grid-template-columns: 360px minmax(0, 1fr); } }
/* @@fim-layout-coluna-topo */

/* janela de planos da tela antiga sem barra de rolagem visivel (ordem do dono, 09/11/2026).. rola por toque, roda e teclado; nunca na horizontal */
dialog.planos { overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
dialog.planos::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Espera do localizador.. cena e marcadores das etapas (entra depois do localizador.css e vence por ordem).
   A história contada.. do endereço ao dono do imóvel (rua, lote, ficha, dono, contatos).
   Regras da casa.. só transform, opacity e stroke-dashoffset animam; o estado final de cada fase mora nas propriedades
   comuns (sem animation-fill), então com movimento reduzido a cena fica parada, completa e legível.
   Fases que o JS põe em #cena.. f0 pino, f1 varredura, f2 lote, f3 ficha, f4 leitura, f5 contatos (cumulativas). */

.cena-moldura { position: relative; background: linear-gradient(180deg, rgba(46, 130, 247, .12), rgba(46, 130, 247, .02)); }
.cena { overflow: hidden; }
.cena * { transform-box: fill-box; transform-origin: center; }

/* ---------- fundo e laje ---------- */
.cena .x-halo { opacity: .6; animation: x-halo 7s ease-in-out infinite alternate; }
.cena .x-lado { stroke: none; }
.cena .x-lado1 { fill: rgba(33, 43, 61, .20); }
.cena .x-lado2 { fill: rgba(33, 43, 61, .32); }
.cena .x-laje { fill: rgba(33, 43, 61, .09); }
.cena .x-quadra { fill: rgba(33, 43, 61, .05); }
.cena .x-lote { fill: var(--branco); stroke: rgba(33, 43, 61, .16); stroke-width: .7; }
.cena .x-luz { fill: url(#x-g1); opacity: 0; }
.cena .x-resto { transition: opacity .6s ease; }

/* ---------- camera (f3 em diante) ---------- */
.cena .x-cam { transform-box: view-box; transform-origin: 0 0; transition: transform .9s cubic-bezier(.65, 0, .25, 1); }
.cena.f3 .x-cam { transform: translate(-20px, 25px) scale(.72); }
.cena.f3 .x-resto { opacity: .55; }

/* ---------- f0.. o pino do endereço ---------- */
.cena .x-pino { transition: opacity .4s ease; }
.cena .x-pino-q { opacity: 0; }
.cena .x-pino-corpo { fill: url(#x-g1); }
.cena .x-pino-olho { fill: var(--branco); }
.cena .x-pino-som { fill: rgba(33, 43, 61, .22); }
.cena.f0 .x-pino-q { opacity: 1; animation: x-cai .8s cubic-bezier(.2, .9, .3, 1.15) backwards, x-flutua 2.6s ease-in-out .8s infinite alternate; }
.cena.f2 .x-pino { opacity: 0; }
.cena .x-onda { fill: none; stroke: var(--azul); stroke-width: 1.3; opacity: .35; transform: scale(.85); }
.cena.f0 .x-onda { animation: x-onda 2.8s ease-out infinite; }
.cena.f0 .x-onda2 { animation-delay: 1.4s; }
.cena.f2 .x-onda { animation: none; opacity: 0; }

/* ---------- f1.. a onda de radar acende as quadras ---------- */
.cena .x-varre { fill: url(#x-g3); opacity: 0; }
.cena.f1:not(.f2) .x-varre { animation: x-varre 5s cubic-bezier(.45, .1, .5, 1) infinite; }
.cena.f1:not(.f2) .x-luz { animation: x-acende 5s ease-in-out infinite; }

/* ---------- f2.. as linhas de luz convergem e o lote sobe ---------- */
.cena .x-conv { fill: none; stroke: var(--azul-claro); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: .22 .78; opacity: 0; transition: opacity .5s ease; }
.cena.f2:not(.f3) .x-conv { opacity: .95; animation: x-fluxo 2.4s linear infinite; }
.cena .x-prisma { opacity: 0; transition: opacity .3s ease; }
.cena.f2 .x-prisma { opacity: 1; }
.cena .x-face { transform-origin: 50% 100%; transform: scaleY(0); transition: transform .7s cubic-bezier(.2, .9, .25, 1); }
.cena .x-faceL { fill: var(--azul-texto); }
.cena .x-faceR { fill: var(--azul); }
.cena .x-topo { fill: url(#x-g1); stroke: var(--branco); stroke-width: .8; stroke-linejoin: round; transition: transform .7s cubic-bezier(.2, .9, .25, 1); }
.cena .x-topo-luz { fill: var(--branco); opacity: 0; transition: transform .7s cubic-bezier(.2, .9, .25, 1); }
.cena.f2 .x-face { transform: scaleY(1); }
.cena.f2 .x-topo, .cena.f2 .x-topo-luz { transform: translateY(-12px); }
.cena.f2 .x-topo-luz { animation: x-luz 2.6s ease-in-out .7s infinite; }
.cena .x-feixe { fill: url(#x-g2); opacity: 0; transition: opacity .6s ease .4s; }
.cena.f2 .x-feixe { opacity: .8; animation: x-feixe 3.2s ease-in-out .9s infinite; }
.cena .x-anel { fill: none; stroke: var(--azul); stroke-width: 1.4; opacity: 0; transform: scale(.6); }
.cena.f2 .x-anel { animation: x-anel 2.8s ease-out infinite; }
.cena.f2 .x-anel2 { animation-delay: 1.4s; }

/* ---------- f3.. o fio leva a ficha, que se desenha linha a linha ---------- */
.cena .x-fio { fill: none; stroke: var(--azul); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s ease-in-out .15s; }
.cena.f3 .x-fio { stroke-dashoffset: 0; }
.cena .x-fio-fluxo { fill: none; stroke: var(--azul-claro); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .07 .93; opacity: 0; transition: opacity .3s ease .9s; }
.cena.f3 .x-fio-fluxo { opacity: 1; animation: x-fluxo 2.2s linear .9s infinite; }
.cena .x-ficha-q { opacity: 0; transform: translateY(10px) scale(.94); transform-origin: left center; transition: opacity .5s ease .35s, transform .7s cubic-bezier(.2, .9, .25, 1) .35s; }
.cena.f3 .x-ficha-q { opacity: 1; transform: none; }
.cena .x-fi-som { fill: rgba(33, 43, 61, .09); }
.cena .x-fi-papel { fill: var(--branco); stroke: rgba(33, 43, 61, .16); stroke-width: .8; }
.cena .x-fi-cab { fill: var(--navy); }
.cena .x-fi-pt { fill: url(#x-g1); }
.cena .x-fi-div { fill: rgba(33, 43, 61, .12); }
.cena .x-ln { fill: rgba(33, 43, 61, .17); transform-origin: left center; transform: scaleX(0); opacity: 0;
  transition: transform .5s cubic-bezier(.3, .7, .2, 1) calc(.8s + var(--n, 0) * .13s), opacity .2s ease calc(.8s + var(--n, 0) * .13s); }
.cena .x-ln-cab { fill: rgba(255, 255, 255, .92); }
.cena .x-ln-cab2 { fill: rgba(255, 255, 255, .45); }
.cena .x-chp { fill: rgba(46, 130, 247, .14); }
.cena.f3 .x-ln { transform: none; opacity: 1; }
.cena .x-brilho { fill: url(#x-g6); opacity: 0; }
.cena.f3:not(.f4) .x-brilho { animation: x-brilho 3.4s ease-in-out 2s infinite; }

/* ---------- f4.. a ficha lê o dono ---------- */
.cena .x-av-fundo { fill: rgba(46, 130, 247, .12); opacity: 0; transform: scale(.6); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.3); }
.cena .x-av-corpo { fill: rgba(33, 43, 61, .5); opacity: 0; transform: scale(.6); transition: opacity .5s ease .2s, transform .6s cubic-bezier(.2, .9, .3, 1.3) .2s; }
.cena .x-av-contorno { fill: none; stroke: var(--azul); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transition: stroke-dashoffset .9s ease-in-out .1s; }
.cena .x-nome { fill: url(#x-g1); transform-origin: left center; transform: scaleX(0); opacity: 0; transition: transform .8s cubic-bezier(.3, .7, .2, 1) .5s, opacity .2s ease .5s; }
.cena .x-dl { fill: rgba(33, 43, 61, .17); transform-origin: left center; transform: scaleX(0); opacity: 0;
  transition: transform .5s cubic-bezier(.3, .7, .2, 1) calc(.9s + var(--n, 0) * .15s), opacity .2s ease calc(.9s + var(--n, 0) * .15s); }
.cena.f4 .x-av-fundo, .cena.f4 .x-av-corpo { opacity: 1; transform: none; }
.cena.f4 .x-av-contorno { stroke-dashoffset: 0; }
.cena.f4 .x-nome, .cena.f4 .x-dl { transform: none; opacity: 1; }
.cena .x-leitor { fill: url(#x-g4); opacity: 0; }
.cena.f4:not(.f5) .x-leitor { opacity: .9; animation: x-leitura 2s ease-in-out .8s infinite alternate; }

/* ---------- f5.. aneis no avatar e tres pontos de contato ligados por linhas finas ---------- */
.cena .x-anel-av { fill: none; stroke: rgba(46, 130, 247, .3); stroke-width: 1; opacity: 0; transform: scale(.7); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .9, .3, 1.2); }
.cena .x-anel-av2 { transition-delay: .12s; }
.cena.f5 .x-anel-av { opacity: 1; transform: none; }
.cena .x-pulso { fill: none; stroke: var(--azul-claro); stroke-width: 1.2; opacity: 0; }
.cena.f5 .x-pulso { animation: x-pulso 3s ease-out infinite; }
.cena.f5 .x-pulso2 { animation-delay: 1s; }
.cena.f5 .x-pulso3 { animation-delay: 2s; }
.cena .x-lig { fill: none; stroke: rgba(46, 130, 247, .55); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s ease-in-out calc(.3s + var(--n, 0) * .22s); }
.cena.f5 .x-lig { stroke-dashoffset: 0; }
.cena .x-lig-fluxo { fill: none; stroke: var(--azul-texto); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: .09 .91; opacity: 0; transition: opacity .3s ease 1.3s; }
.cena.f5 .x-lig-fluxo { opacity: 1; animation: x-fluxo 1.9s linear calc(1.3s + var(--n, 0) * .3s) infinite; }
.cena .x-no { transform: scale(0); transition: transform .55s cubic-bezier(.2, .9, .3, 1.4) calc(.6s + var(--n, 0) * .22s); }
.cena.f5 .x-no { transform: none; }
.cena .x-no-aro { fill: var(--branco); stroke: var(--azul-texto); stroke-width: 1.5; }
.cena .x-no-miolo { fill: url(#x-g1); }
.cena .x-no-onda { fill: none; stroke: var(--azul-claro); stroke-width: 1.2; opacity: 0; }
.cena.f5 .x-no-onda { animation: x-pulso 2.4s ease-out calc(1.4s + var(--n, 0) * .5s) infinite; }

/* ---------- marcadores das etapas ---------- */
.etapa { position: relative; }
.etapa-marca { position: relative; }
.etapa-marca .ic { position: relative; z-index: 1; }

/* ativo.. dois arcos com cauda girando em sentidos opostos e um nucleo que respira */
.etapa--ativa .etapa-marca { border-color: transparent; animation: none; }
.etapa--ativa .etapa-marca::before,
.etapa--ativa .etapa-marca::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.etapa--ativa .etapa-marca::before { inset: -2px;
  background: conic-gradient(from 0deg, rgba(23, 105, 204, 0) 0deg, var(--azul-texto) 210deg, var(--azul-claro) 340deg, rgba(75, 168, 253, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--navy) calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), var(--navy) calc(100% - 2.5px));
  animation: x-gira 1.8s linear infinite; }
.etapa--ativa .etapa-marca::after { inset: 3px;
  background: conic-gradient(from 0deg, rgba(75, 168, 253, 0) 0deg, var(--azul) 220deg, var(--azul-claro) 340deg, rgba(75, 168, 253, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), var(--navy) calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), var(--navy) calc(100% - 1.5px));
  animation: x-gira 1.2s linear infinite reverse; }
.etapa--ativa::before { content: ""; position: absolute; left: 10px; top: calc(50% - 13px); width: 26px; height: 26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--azul-claro) 0, var(--azul-claro) 2.2px, rgba(46, 130, 247, .45) 3.6px, rgba(46, 130, 247, 0) 8px);
  animation: x-respira 2.2s ease-in-out infinite; }

/* feito.. o circulo se preenche, o visto se desenha e um brilho curto sai do marcador */
.etapa--feita .etapa-marca { background: transparent; border-color: var(--azul-texto); color: var(--branco); }
.etapa--feita .etapa-marca::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: linear-gradient(135deg, var(--azul-texto), var(--azul)); }
.etapa--feita .etapa-marca .ic path { stroke-dasharray: 26; stroke-dashoffset: 0; }
.etapa--feita::after { content: ""; position: absolute; left: 10px; top: calc(50% - 13px); width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--azul-claro); opacity: 0; pointer-events: none; }
.etapa--feita:has(+ .etapa--ativa) .etapa-marca::before { animation: x-preenche .5s cubic-bezier(.2, .9, .3, 1) backwards; }
.etapa--feita:has(+ .etapa--ativa) .etapa-marca .ic path { animation: x-risca .45s cubic-bezier(.4, 0, .2, 1) .28s backwards; }
.etapa--feita:has(+ .etapa--ativa)::after { animation: x-flash .8s ease-out .15s backwards; }

/* ---------- ordem e atraso por classe (a CSP do localizador veda atributo style) ---------- */
.cena .n0 { --n: 0; } .cena .n1 { --n: 1; } .cena .n2 { --n: 2; } .cena .n3 { --n: 3; } .cena .n4 { --n: 4; } .cena .n5 { --n: 5; } .cena .n6 { --n: 6; } .cena .n7 { --n: 7; }
.cena .t0 { --k: 0; } .cena .t1 { --k: 1; } .cena .t2 { --k: 2; } .cena .t3 { --k: 3; } .cena .t4 { --k: 4; } .cena .t5 { --k: 5; } .cena .t6 { --k: 6; } .cena .t7 { --k: 7; } .cena .t8 { --k: 8; } .cena .t9 { --k: 9; } .cena .t10 { --k: 10; } .cena .t11 { --k: 11; } .cena .t12 { --k: 12; } .cena .t13 { --k: 13; } .cena .t14 { --k: 14; } .cena .t15 { --k: 15; } .cena .t16 { --k: 16; } .cena .t17 { --k: 17; } .cena .t18 { --k: 18; } .cena .t19 { --k: 19; } .cena .t20 { --k: 20; } .cena .t21 { --k: 21; } .cena .t22 { --k: 22; } .cena .t23 { --k: 23; } .cena .t24 { --k: 24; } .cena .t25 { --k: 25; } .cena .t26 { --k: 26; } .cena .t27 { --k: 27; } .cena .t28 { --k: 28; } .cena .t29 { --k: 29; } .cena .t30 { --k: 30; } .cena .t31 { --k: 31; }
.cena.f1:not(.f2) .x-luz { animation-delay: calc(var(--k, 0) * .1s - .3s); }
.cena .x-conv { animation-delay: calc(var(--n, 0) * .22s); }

/* ---------- movimentos ---------- */
@keyframes x-halo { from { opacity: .45; transform: scale(1); } to { opacity: .9; transform: scale(1.05); } }
@keyframes x-cai { from { transform: translateY(-36px); opacity: 0; } }
@keyframes x-flutua { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes x-onda { from { transform: scale(.2); opacity: .85; } to { transform: scale(1.6); opacity: 0; } }
@keyframes x-varre { 0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; } 54% { opacity: 1; } 62% { transform: translate(187px, 108px); opacity: 0; } 100% { transform: translate(187px, 108px); opacity: 0; } }
@keyframes x-acende { 0% { opacity: 0; } 8% { opacity: .8; } 24% { opacity: .22; } 46% { opacity: 0; } 100% { opacity: 0; } }
@keyframes x-fluxo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes x-luz { 0%, 100% { opacity: 0; } 50% { opacity: .38; } }
@keyframes x-feixe { 0%, 100% { opacity: .5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes x-anel { from { transform: scale(.5); opacity: .85; } to { transform: scale(1.5); opacity: 0; } }
@keyframes x-brilho { 0% { transform: translateX(0); opacity: 0; } 14% { opacity: 1; } 66% { opacity: 1; } 78% { transform: translateX(170px); opacity: 0; } 100% { transform: translateX(170px); opacity: 0; } }
@keyframes x-leitura { from { transform: translateY(0); } to { transform: translateY(34px); } }
@keyframes x-pulso { from { transform: scale(1); opacity: .65; } to { transform: scale(2.2); opacity: 0; } }
@keyframes x-gira { to { transform: rotate(360deg); } }
@keyframes x-respira { 0%, 100% { transform: scale(.75); opacity: .75; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes x-preenche { from { transform: scale(0); } }
@keyframes x-risca { from { stroke-dashoffset: 26; } }
@keyframes x-flash { from { transform: scale(.9); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }

/* ---------- movimento reduzido.. a cena fica parada, completa e legivel (o localizador.css esconderia a moldura) ---------- */
@media (prefers-reduced-motion: reduce) {
  .cena-moldura { display: block; }
  .cena, .cena *, .etapa::before, .etapa::after, .etapa-marca::before, .etapa-marca::after { animation: none !important; transition: none !important; }
  .cena .x-conv { stroke-dasharray: none; stroke-opacity: .45; }
  .cena .x-fio-fluxo, .cena .x-lig-fluxo { opacity: 0; }
  .cena.f1:not(.f2) .x-luz:nth-of-type(3n) { opacity: .4; }
  .etapa--ativa .etapa-marca::before { transform: rotate(0deg); }
  .etapa--ativa .etapa-marca { border-color: var(--azul-texto); }
}

/* Conta, energia e planos do localizador (03/11/2026).. só variáveis e cores da paleta (navy, azul, azul-texto, papel, branco, neutros por opacidade, erro). */

/* A barra da conta, no topo (sobre o navy) */
.planos-barra { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px 14px; margin-left: auto; color: var(--branco); }
.planos-selo {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
  font-size: 14px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.planos-barra[data-plano="ilimitado"] .planos-selo,
.planos-barra[data-plano="combo"] .planos-selo { background: var(--azul-texto); border-color: transparent; color: var(--branco); }
.planos-medidor { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .92); }
.planos-medidor:empty { display: none; }

/* Cota (grátis e essencial).. trilho e preenchimento por escala, nunca largura */
.cota { position: relative; display: block; width: 96px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.cota i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--azul), var(--azul-claro)); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .3s ease; }

/* Energia (ilimitado).. cinco cargas; a próxima pulsa enquanto recarrega */
.energia { display: inline-flex; gap: 4px; align-items: center; }
.carga { position: relative; display: block; width: 18px; height: 22px; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, .55); overflow: hidden; }
.carga::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--azul-claro), var(--azul)); transform-origin: bottom center; transform: scaleY(0); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.carga--cheia { border-color: var(--azul-claro); }
.carga--cheia::before { transform: scaleY(1); opacity: 1; }
.carga--vem::before { transform: scaleY(1); opacity: .35; animation: carga-vem 1.6s ease-in-out infinite; }
@keyframes carga-vem { 0%, 100% { opacity: .15; } 50% { opacity: .6; } }
.energia-txt, .cota-txt { white-space: nowrap; }

.planos-abrir {
  min-height: 44px; padding: 0 18px; border-radius: var(--raio-p); border: 1.5px solid transparent;
  background: var(--branco); color: var(--navy); font-weight: 700; font-size: 15px; cursor: pointer;
  transition: transform .15s ease;
}
.planos-abrir:hover { background-image: linear-gradient(var(--azul-suave), var(--azul-suave)); }
.planos-abrir:active { transform: scale(.98); }
.planos-barra--capa { margin: -12px 0 22px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); justify-content: space-between; }
/* com resultado na tela a conta já está na barra do topo.. a da capa, feita para fundo escuro, ficava branca sobre branco no cartão claro da busca */
body.tem-saida .planos-barra--capa,
body.modo-painel .planos-barra--capa { display: none; }
.planos-barra--capa .planos-selo { order: 1; }
.planos-barra--capa .planos-abrir { order: 2; margin-left: auto; min-height: 44px; }
.planos-barra--capa .planos-medidor { order: 3; flex-basis: 100%; }
.planos-barra :focus-visible { outline-color: var(--azul-claro); }

/* A janela de planos */
.planos {
  width: min(1080px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; margin: auto; padding: 22px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); color: var(--navy);
  box-shadow: 0 24px 60px rgba(33, 43, 61, .35);
}
.planos[open] { animation: planos-entra .22s ease both; }
.planos::backdrop { background: rgba(33, 43, 61, .62); }
@keyframes planos-entra { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.planos-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.planos-cab h2 { font-size: 24px; }
.planos-motivo { margin-top: 6px; color: var(--texto-2); max-width: 62ch; }
.planos-espera { margin-top: 6px; font-weight: 700; color: var(--azul-texto); }
.planos-fechar {
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--raio-p);
  border: 1px solid var(--linha); background: var(--branco); color: var(--navy); cursor: pointer;
}
.planos-fechar:hover { background: var(--azul-suave); }
.planos-x { width: 20px; height: 20px; }

.planos-grade { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .planos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .planos-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.plano {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 16px;
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 1px 2px var(--sombra-cor);
}
.plano--atual { border-color: var(--azul-borda); box-shadow: 0 0 0 2px var(--azul-suave); }
.plano--combo { background: var(--navy); color: var(--branco); border-color: var(--navy); overflow: hidden; }
.plano--combo::after {   /* brilho que passa devagar pelo cartão do combo */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(75, 168, 253, .22), transparent);
  transform: translateX(-120%); animation: plano-brilho 5s ease-in-out 1s infinite;
}
@keyframes plano-brilho { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(260%); } }
.plano-faixa {
  align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--azul-texto); color: var(--branco);
}
.plano-nome { font-size: 18px; }
.plano-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.plano-preco strong { font-size: 28px; line-height: 1.1; }
.plano-preco del { flex-basis: 100%; font-size: 15px; opacity: .78; text-decoration-thickness: 2px; }
.plano-por { font-size: 14px; opacity: .78; }
.plano-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; align-content: start; }
.plano-itens li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.plano-itens .ic { margin-top: 2px; width: 18px; height: 18px; color: var(--azul-texto); }
.plano--combo .plano-itens .ic { color: var(--azul-claro); }
.planos-sel { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; font-weight: 700; color: var(--azul-texto); border: 1.5px dashed var(--azul-borda); border-radius: var(--raio-p); }
.plano--combo .btn--pri { background: var(--azul-texto); color: var(--branco); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); }
.plano--combo .btn--sec { background: var(--branco); color: var(--azul-texto); }
.planos-aviso { margin-top: 14px; padding: 10px 14px; border-radius: var(--raio-p); background: var(--erro-fundo); color: var(--erro); font-weight: 600; }

/* No computador a janela cabe numa tela só */
@media (min-width: 1024px) and (max-height: 820px) {
  .planos { padding: 16px 18px; }
  .planos-cab { margin-bottom: 10px; }
  .plano { gap: 8px; padding: 14px 14px 14px; }
  .plano-preco strong { font-size: 24px; }
  .plano-itens li { font-size: 14px; }
}
@media (max-width: 639px) {
  .planos-barra { justify-content: flex-start; width: 100%; }
  /* o texto da cota (cortesia, grátis do dia) é longo e, sem quebra, saía da tela de 320 px (revisão de 04/11/2026).. a energia segue sem quebra */
  .cota-txt { white-space: normal; }
  .energia-txt { white-space: normal; }
  .planos-medidor { min-width: 0; flex-wrap: wrap; }
  .planos { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .planos[open], .carga--vem::before, .plano--combo::after { animation: none; }
  .plano--combo::after { display: none; }
  .cota i, .carga::before, .planos-abrir { transition: none; }
}

/* ===== Ficha em uma tela só no computador, atalhos em grade de duas linhas, cartão "Onde fica", gráfico de unidades em barras (03/11/2026) ===== */

/* A página nunca ganha barra no computador.. o painel vai até o pé da janela (altura medida pelo JS em --pn-h) e as abas rolam por dentro */
@media (min-width: 1024px) {
  body.modo-painel .pagina { padding-bottom: 12px; }
  body.modo-painel .painel { height: var(--pn-h, auto); min-height: 0; }
}

/* Atalhos.. duas linhas, colunas iguais, sem buraco (o último ocupa duas colunas quando o total é ímpar) */
.visao .tiles { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; align-content: stretch; }
.visao .tile { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 9px; align-content: center; min-height: 0; padding: 8px 10px; }
.visao .tile-ic { grid-row: 1 / span 3; align-self: center; margin: 0; width: 28px; height: 28px; }
.visao .tile-rot, .visao .tile-v, .visao .tile-sub { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.visao .tile-seta { right: 8px; top: 8px; }
.tile--largo { grid-column: span 2; }
@media (max-width: 759px) {
  .visao .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
}

/* Visão geral.. indicadores, depois a nota ao lado dos atalhos, depois "Onde fica" ocupando a largura toda */
.visao .duas { align-items: stretch; }
@media (min-width: 760px) { .visao .duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.visao .kpi { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; align-content: center; padding: 9px 12px 8px; }
.visao .kpi-ic { grid-row: 1 / span 3; align-self: center; margin: 0; }
.visao .kpi-rot, .visao .kpi-val, .visao .kpi-sub { grid-column: 2; line-height: 1.25; }
.visao .kpi-val { font-size: 18px; }
.visao .pc { padding: 12px 14px; gap: 8px; }
.visao .sinais { gap: 5px; }
.visao .sinal { font-size: 13px; gap: 8px; }
.visao .sinal-s { width: 22px; height: 22px; border-radius: 7px; }
.visao .p3-nota { font-size: 12px; }

/* Onde fica.. mapa, rua em 360 graus, link e a legenda do entorno */
.onde { align-content: start; }
.onde .pc-cab { flex-wrap: wrap; }
.onde .pc-tit { flex: 1 1 auto; }
.onde-abrir { flex: none; min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; gap: 6px; }
.onde-abrir .ic { width: 14px; height: 14px; }
@media (pointer: coarse) { .onde-abrir { min-height: 44px; } }
.onde-quadros { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .onde-quadros { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.onde-quadro { position: relative; height: auto; aspect-ratio: 4 / 3; width: 100%; min-width: 0; min-height: 240px; max-height: 72dvh; border-radius: 12px; overflow: hidden; border: 1px solid var(--linha); background: var(--azul-suave); }
.onde-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 1024px) { .visao .onde-quadro { height: clamp(150px, calc(100dvh - 850px), 460px); } }
/* mapa do bairro no endereço (04/11/2026) */
.onde-bairro { background: var(--papel); }
.bairro-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bairro-fundo { fill: var(--papel); }
.bz { stroke: rgba(33, 43, 61, .55); stroke-width: .6; vector-effect: non-scaling-stroke; }
.bz-residencial { fill: rgba(46, 130, 247, .28); background: rgba(46, 130, 247, .28); }
.bz-central { fill: rgba(46, 130, 247, .62); background: rgba(46, 130, 247, .62); }
.bz-industrial { fill: rgba(33, 43, 61, .70); background: rgba(33, 43, 61, .70); }
.bz-protecao { background: repeating-linear-gradient(45deg, rgba(46, 130, 247, .45) 0 2px, var(--branco) 2px 5px); }
.bz-protecao-fundo { fill: var(--branco); }
.bz-protecao-linha { stroke: rgba(46, 130, 247, .55); stroke-width: 2; }
.bz-especial { fill: var(--branco); background: var(--branco); }
.bz-outras { fill: rgba(33, 43, 61, .12); }
.bz-alvo { fill: var(--navy); background: var(--navy); stroke: var(--azul-claro); stroke-width: 2.5; }
.bairro-pino { fill: var(--azul); stroke: var(--branco); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bairro-pino-halo { fill: rgba(46, 130, 247, .22); stroke: var(--azul); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bairro-espera { position: absolute; inset: 0; margin: 0; display: flex; gap: 6px; align-items: center; justify-content: center; padding: 12px; font-size: 13px; color: var(--texto-2); text-align: center; }
.bairro-espera .ic { width: 14px; height: 14px; }
.bairro-zoom { position: absolute; top: 8px; right: 8px; display: grid; gap: 6px; }
.bairro-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--linha); background: var(--branco); color: var(--navy); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.bairro-btn:disabled { opacity: .4; cursor: default; }
.bairro-btn:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 2px; }
@media (pointer: coarse) { .bairro-btn { width: 44px; height: 44px; } }
.bairro-nome { position: absolute; top: 8px; left: 8px; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); border: 1px solid var(--linha); font-size: 12px; font-weight: 700; color: var(--navy); }
.bairro-legenda { position: absolute; left: 8px; bottom: 8px; margin: 0; padding: 8px 10px; list-style: none; display: grid; gap: 3px; border-radius: 8px; background: rgba(255, 255, 255, .94); border: 1px solid var(--linha); font-size: 12px; line-height: 1.3; color: var(--navy); max-width: calc(100% - 64px); }
@media (max-width: 520px) { .bairro-legenda { grid-template-columns: repeat(2, auto); column-gap: 10px; } }
.bairro-legenda li { display: flex; align-items: center; gap: 6px; }
.visao .bairro-legenda { display: none; }   /* quadro pequeno.. a legenda cobria o alfinete (revisão de 04/11); fica na aba Onde fica */
.bairro-chave { width: 14px; height: 10px; flex: none; border-radius: 2px; border: 1px solid rgba(33, 43, 61, .55); }
.onde-aviso { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; display: flex; gap: 6px; align-items: flex-start; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .94); border: 1px solid var(--azul-borda); color: var(--navy); font-size: 12px; line-height: 1.35; }
.onde-aviso .ic { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--azul-texto); }

/* O que tem perto.. linhas compactas, do mais perto ao mais longe */
.ent { gap: 6px; }
.ent-tit { margin: 0; font-size: 13px; font-weight: 700; color: var(--navy); }
.ent-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 4px 12px; }
.ent-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 0; border: 0; border-bottom: 1px solid var(--suave); border-radius: 0; font-size: 13px; }
.ent-ic { grid-row: auto; width: 24px; height: 24px; border-radius: 7px; }
.ent-ic .ic { width: 14px; height: 14px; }
.ent-nome { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-dist { font-size: 12px; font-weight: 600; color: var(--azul-texto); white-space: nowrap; }
.ent-atrib { margin: 0; font-size: 11px; line-height: 1.3; color: var(--texto-2); }
@media (min-width: 1024px) { .visao .ent-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); } }

/* Gráfico de unidades.. barras em HTML, texto de tamanho fixo, número em cima de cada barra, a unidade do cliente em destaque */
.gu { margin: 4px 0 0; display: grid; gap: 4px; max-width: 620px; width: 100%; justify-self: center; }
.gu-plot { list-style: none; margin: 0; padding: 0 0 2px; height: 136px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; align-items: stretch; border-bottom: 1px solid var(--linha); }
.gu-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }
.gu-num { font-size: 12px; font-weight: 700; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; min-height: 12px; }
.gu-barra { display: block; width: 100%; max-width: 44px; height: calc((100% - 34px) * var(--h, 0)); min-height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--azul-claro), var(--azul)); opacity: .6; }
.gu-col--on .gu-barra { opacity: 1; background: var(--azul-texto); box-shadow: 0 4px 10px rgba(46, 130, 247, .35); }
.gu-col--on .gu-num { color: var(--azul-texto); }
.gu-tag { font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 999px; white-space: nowrap; background: var(--azul-texto); color: var(--branco); }
.gu-eixo { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; color: var(--texto-2); }
.gu-eixo-t { font-weight: 500; }
@media (max-width: 520px) { .gu-eixo-t { display: none; } .gu-plot { gap: 4px; } }

/* Selo como link */
.selo--link { text-decoration: none; color: var(--azul-texto); }
.selo--link:hover { background: var(--azul-suave); }
.selo--link .ic:last-child { width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .visao .tile { transition: none; }
}

/* ajuste fino de altura da visão geral (cabe em 1600x810 sem rolagem interna) */
@media (min-width: 1024px) {
  .pn-pg { padding: 12px; }
  .visao, .visao .duas { gap: 10px; }
  .visao .tile { padding: 6px 10px; }
  .visao .tile-ic { width: 26px; height: 26px; }
  .visao .tile-sub { font-size: 11px; }
  .visao .kpi { padding: 7px 12px 6px; }
  .visao .pc { padding: 10px 12px; }
  .visao .onde-quadro { height: clamp(150px, calc(100dvh - 850px), 460px); }
  .visao .ent-item { padding: 2px 0; }
  .visao .ent-lista { gap: 2px 12px; }
}
@media (min-width: 1024px) {
  .visao .ent-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
  .visao .p3-nota { font-size: 11px; line-height: 1.3; gap: 6px; }
  .visao #sec-sinais .pc-cab { margin-bottom: 0; }
}

/* Empresas.. CNPJ e vínculo lado a lado, só o endereço ocupa a linha toda; cartões não esticam ao da vizinha */
.pn-pg .mini .dados > :nth-last-child(-n+2):not(.dado--largo) { grid-column: auto; }
.pn-pg .mini { align-content: start; }
.pn-pg .mini-lista { align-items: start; }

/* Espera sem rolagem de página em janela baixa.. o formulário perde as dicas enquanto a consulta roda */
@media (min-width: 1024px) and (max-height: 900px) {
  body.tem-saida:not(.modo-painel) .busca .ajuda, body.tem-saida:not(.modo-painel) .busca .campo .dica { display: none; }
}
@media (min-width: 1700px) { .visao .ent-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); } }

/* Aceite do termo antes de assinar */
.planos-aceite { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; font-size: 15px; color: var(--navy); cursor: pointer; }
.planos-aceite input { width: 20px; height: 20px; flex: none; accent-color: var(--azul-texto); }

/* A gestão do plano.. cancelar e mudar de plano numa faixa própria, longe do botão de assinar (04/11/2026) */
.planos-gestao { margin-top: 16px; }
.planos-gestao:empty { display: none; }
.planos-gestao-txt { margin: 0; color: var(--navy); max-width: 70ch; }
.planos-gestao-acoes { display: flex; justify-content: flex-end; margin-top: 10px; }
.planos-cancelar, .planos-confirma {
  min-height: 44px; padding: 0 18px; border-radius: var(--raio-p); border: 1.5px solid var(--erro); background: var(--branco); color: var(--erro);
  font-weight: 700; font-size: 15px; cursor: pointer;
}
.planos-cancelar:hover, .planos-confirma:hover { background: var(--erro-fundo); }
.planos-confirma:disabled, .planos-manter:disabled { opacity: .6; cursor: default; }
.planos-confirma-caixa { padding: 16px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); display: grid; gap: 10px; }
.planos-confirma-caixa h3 { margin: 0; font-size: 18px; }
.planos-confirma-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.planos-confirma-separa { flex: 1 1 24px; min-width: 24px; align-self: stretch; border-left: 1px solid var(--linha); margin: 0 4px; }
.planos-gestao :focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 2px; }
@media (max-width: 639px) { .planos-confirma-separa { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--linha); min-height: 1px; margin: 4px 0; } }

/* ===== Onde fica sem barra de rolagem (05/11/2026, ordem do dono com print) =====
   "e proibido abrir essa barra de rolagem! os mapas precisam ser responsivos e se ajustarem a area!"
   Painel fixo (1280 px ou mais).. a aba é um flex em coluna dentro do painel (que já tem altura definida), UMA gaveta aparece por vez e os quadros de mapa
   ocupam a altura que sobra (height: 100% da linha, sem px fixo nem número mágico de 100dvh). Entorno, fachada e história ficam a um clique e rolam só
   por dentro da própria gaveta. Abaixo de 1280 px a página rola como documento, todas as gavetas aparecem empilhadas e os quadros usam aspect-ratio + dvh. */
.local-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.local-aba { min-height: 44px; padding: 0 16px; border: 1px solid var(--linha); border-radius: 12px; background: var(--branco); color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.local-aba:hover { background: var(--azul-suave); }
.local-aba[aria-pressed="true"] { background: var(--azul-texto); border-color: var(--azul-texto); color: #fff; font-weight: 800; box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .75); }
.local-aba:focus-visible, .onde-modo-b:focus-visible, .bairro-leg > summary:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 2px; }
@media (max-width: 1279px) { .local-abas { display: none; } }
@media (min-width: 1280px) {
  #pg-local { display: flex; flex-direction: column; }
  #pg-local > #sec-local { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  .local-abas { flex: none; }
  .local-painel:not(.local-painel--on) { display: none; }
  .local-painel--on { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; scrollbar-width: thin; }
  .pn-pg .onde--grande { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; }
  .onde--grande .onde-quadros { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .onde--grande .onde-quadro { height: 100%; min-height: 220px; aspect-ratio: auto; max-height: none; }
}
/* seletor Street View | Mapa por cima do quadro, no alto e no meio (o cartão do Google fica à esquerda e a bússola à direita) */
.onde-modo { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .94); border: 1px solid var(--linha); box-shadow: 0 2px 8px rgba(33, 43, 61, .2); }
.onde-modo-b { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.onde-modo-b[aria-pressed="true"] { background: var(--azul-texto); color: #fff; font-weight: 800; box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .75); }
/* legenda do bairro em gaveta.. fechada não cobre o alfinete, aberta rola dentro dela e nunca passa do quadro */
.bairro-leg { position: absolute; left: 8px; bottom: 8px; z-index: 1; max-width: calc(100% - 64px); max-height: calc(100% - 56px); display: flex; flex-direction: column; border-radius: 8px; background: rgba(255, 255, 255, .94); border: 1px solid var(--linha); overflow: hidden; }
.bairro-leg > summary { min-height: 36px; padding: 0 12px; display: flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--navy); cursor: pointer; }
@media (pointer: coarse) { .bairro-leg > summary { min-height: 44px; } }
.bairro-leg .bairro-legenda { position: static; max-width: none; border: 0; border-radius: 0; background: none; overflow: auto; }


/* Aba Despachante (05/11/2026). Só variáveis da paleta; nenhum texto em content (os textos moram no JS do dono). Animação só em transform. */
.desp { display: grid; gap: 14px; min-width: 0; }
.desp-intro { color: var(--texto-2); max-width: 70ch; }
.desp-cartoes { display: grid; gap: 14px; min-width: 0; }
.desp-corpo { display: grid; gap: 12px; min-width: 0; }
.desp-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.desp-btn { min-height: 44px; min-width: 44px; }
.desp-progresso { display: flex; align-items: center; gap: 12px; }
.desp-prog { flex: 1 1 auto; height: 14px; border-radius: 999px; background: var(--suave); border: 1px solid var(--linha); overflow: hidden; }
.desp-prog i { display: block; width: 100%; height: 100%; background: var(--azul-texto); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .3s ease; }
.desp-pct, .desp-pct-f { font-weight: 700; font-variant-numeric: tabular-nums; }
.desp-meta { font-size: 14px; color: var(--texto-2); }
.desp-msg { min-height: 1.5em; font-weight: 600; }
.desp-erro { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--raio-p); background: var(--erro-fundo); color: var(--erro); font-weight: 600; }
.desp-ressalva { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--texto-2); }
.desp-ressalva .ic { margin-top: 2px; }
.desp-bloco { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linha); min-width: 0; }
.desp-bloco:first-child { border-top: 0; padding-top: 0; }
.desp-bloco h4 { font-size: 16px; }
.desp-cache, .desp-job { display: grid; gap: 8px; min-width: 0; justify-items: start; }
.desp-cache[hidden], .desp-job[hidden] { display: none; }
.desp-par { overflow-wrap: anywhere; }
.desp-lista { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; overflow-wrap: anywhere; }
.desp-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--linha); min-width: 0; }
.desp-linha:last-child { border-bottom: 0; }
.desp-rot { font-weight: 600; }
.desp-st { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.desp-end { display: grid; gap: 8px; justify-items: start; }
.desp-end strong { overflow-wrap: anywhere; }
.desp .dd-badge { max-width: 100%; text-align: left; }
/* Ver detalhes (06/11/2026).. disclosure por item, abre na própria tela. Só variáveis da paleta; o ícone gira por transform. */
.desp-detwrap { display: grid; gap: 10px; justify-items: start; min-width: 0; max-width: 100%; }
.desp-ver { justify-self: start; }
.desp-ver .ic { transition: transform .2s ease; }
.desp-ver[aria-expanded="true"] .ic { transform: rotate(180deg); }
.desp-det { display: grid; gap: 10px; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--suave); }
.desp-det[hidden] { display: none; }
.desp-det-t { font-weight: 700; }
.desp-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; min-width: 0; }
.desp-dl dt { font-weight: 700; font-size: 14px; color: var(--texto-2); margin-top: 8px; }
.desp-dl dt:first-child { margin-top: 0; }
.desp-dl dd { margin: 0; overflow-wrap: anywhere; }
.desp-item { display: grid; gap: 6px; padding: 10px 0 0; border-top: 1px solid var(--linha); min-width: 0; }
.desp-item-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.desp-item-cab strong { overflow-wrap: anywhere; }
.desp-cert { display: grid; gap: 8px; min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--linha); }
.desp-cert:last-of-type { border-bottom: 0; }
.desp-cert .desp-linha { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 720px) { .desp-dl { grid-template-columns: minmax(150px, 1fr) minmax(0, 3fr); gap: 6px 14px; } .desp-dl dt { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .desp-prog i, .desp-ver .ic { transition: none; } }

/* Impressão do dossiê.. só o documento, marca d'água diagonal em todas as páginas quando há item simulado, rodapé fixo em todas */
.imp-dossie { display: none; }
@media print {
  body.imprimindo-dossie { background: var(--branco); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.imprimindo-dossie > *:not(#impressao-dossie) { display: none !important; }
  body.imprimindo-dossie #impressao-dossie { display: block !important; position: relative; padding: 0 6mm; color: var(--navy); font-size: 11pt; line-height: 1.45; }
  /* A faixa do rodapé é reservada em TODA folha: o conteúdo mora numa tabela cujo tfoot (e o thead) o Chromium repete em cada folha, então o texto
     nunca desce até o rodapé fixo, nem na primeira folha nem na última. O @page do localizador.css (margin 0) continua valendo. */
  .imp-dossie .imp-folha { width: 100%; border-collapse: collapse; }
  .imp-dossie .imp-folha > thead { display: table-header-group; }
  .imp-dossie .imp-folha > tfoot { display: table-footer-group; }
  .imp-dossie .imp-folha > thead > tr > td { height: 7mm; padding: 0; }
  .imp-dossie .imp-folha > tfoot > tr > td { height: 25mm; padding: 0; }
  .imp-dossie .imp-folha > tbody > tr > td { padding: 0; vertical-align: top; }
  .imp-dossie .imp-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--navy); color: var(--branco); padding: 14px 18px; border-radius: 10px; margin-bottom: 12px; }
  .imp-dossie .imp-logo .capi-logo { height: 30px; width: auto; display: block; }
  .imp-dossie .imp-info { display: flex; flex-direction: column; align-items: flex-end; font-size: 10pt; }
  .imp-dossie .imp-info strong { font-size: 13pt; }
  .imp-dossie .imp-sec { margin-bottom: 12px; }
  .imp-dossie h2 { font-size: 13pt; border-bottom: 1px solid var(--linha); padding-bottom: 3px; margin-bottom: 6px; break-after: avoid; }
  .imp-dossie .imp-par { margin: 3px 0; overflow-wrap: anywhere; }
  .imp-dossie .imp-lista { margin: 2px 0 6px; padding-left: 18px; font-size: 10pt; overflow-wrap: anywhere; }
  .imp-dossie .imp-lista li { break-inside: avoid; }
  .imp-dossie .imp-nota { font-size: 9pt; color: var(--texto-2); margin: 6px 0; }
  .imp-dossie .imp-tab { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .imp-dossie .imp-tab caption { text-align: left; font-weight: 700; padding-bottom: 4px; }
  .imp-dossie .imp-tab th, .imp-dossie .imp-tab td { border-bottom: 1px solid var(--linha); padding: 3px 6px; text-align: left; }
  .imp-dossie .imp-tab tr { break-inside: avoid; }
  .imp-dossie .imp-rodape { position: fixed; bottom: 0; left: 6mm; right: 6mm; height: 20mm; box-sizing: border-box; display: flex; justify-content: space-between;
    gap: 12px; padding: 5px 0 0; border-top: 1px solid var(--linha); background: var(--branco); font-size: 8.5pt; z-index: 6; }
  .imp-dossie .imp-marca { font-weight: 800; white-space: nowrap; }
}
/* Transparência federal (07/11/2026).. classes novas, prefixo tp-. Só variáveis da paleta, alvos de 44 px, foco visível, sem animação. */
.tp { display: grid; gap: 12px; min-width: 0; }
.tp-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tp-texto { margin: 0; font-size: 16px; line-height: 1.5; color: var(--navy); overflow-wrap: anywhere; }
.tp-grupos, .tp-social-corpo { display: grid; gap: 10px; min-width: 0; }
.tp-grupo { border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--branco); min-width: 0; }
.tp-grupo > :not(summary) { margin-left: 14px; margin-right: 14px; min-width: 0; }
.tp-grupo > :not(summary) + :not(summary) { margin-top: 10px; }
.tp-grupo > :last-child { margin-bottom: 14px; }
.tp-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 8px 14px; cursor: pointer; font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--navy); }
.tp-regsdet > .tp-sum { padding-left: 0; font-weight: 650; }
.tp-sum:focus-visible, .tp-btn:focus-visible, .tp-rota:focus-visible, .tp-confirma:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.tp-nome { overflow-wrap: anywhere; }
.tp-oficial { font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--texto-2); }
.tp-alvo { display: grid; gap: 4px; min-width: 0; }
.tp-alvo-t { margin: 0; font-size: 14px; font-weight: 700; color: var(--texto-2); }
.tp-rota { display: grid; gap: 8px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--linha); justify-items: start; }
.tp-rota:first-child { border-top: 0; }
.tp-rota-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.tp-rota-t { font-size: 16px; line-height: 1.5; color: var(--navy); overflow-wrap: anywhere; }
.tp-regsdet { width: 100%; min-width: 0; }
.tp-regs { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; min-width: 0; }
.tp-reg { min-width: 0; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--suave); }
.tp-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; min-width: 0; }
.tp-dl dt { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--texto-2); }
.tp-dl dt:first-child { margin-top: 0; }
.tp-dl dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--navy); overflow-wrap: anywhere; }
.tp-sub { display: grid; gap: 8px; margin: 0; padding-left: 18px; }
.tp-btn { min-height: 44px; min-width: 44px; justify-self: start; }
.tp-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-confirma { display: grid; gap: 10px; padding: 12px; border: 1.5px solid var(--navy); border-radius: var(--raio-p); background: var(--azul-suave); }
.tp-confirma p { margin: 0; font-weight: 650; color: var(--navy); }
.tp-campo { display: grid; gap: 4px; min-width: 0; }
.tp-fin { max-width: 100%; }
.tp-erro { margin: 0; }
.tp-lista { margin-top: 4px; }
.tp-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tp .dd-badge, .tp-grupo .dd-badge { max-width: 100%; text-align: left; }
.dd-origem { display: grid; gap: 6px; min-width: 0; }
.dd-origem-t { margin: 0; font-size: 16px; line-height: 1.5; color: var(--navy); }
/* alvo de 44 px também no desenho escuro (07/11/2026).. ".ua .btn" (0,2,0) vem depois no arquivo e baixava o botão para 38 px; o seletor composto vence */
.ua .btn.tp-btn, .ua .dd-campo.tp-fin { min-height: 44px; }

/* Análise visual (grafo), 05/11/2026. Entra no pacote do CSS depois de planos.css (app.py e montar.py). Só tokens que já existem; nenhum hex novo.
   O desenho em si é um canvas do Cytoscape, que lê as cores destas variáveis --gf-* pelo JS. Sem animação em CSS.. a pulsação do indício é ciclo de
   estilo no canvas e para sozinha com prefers-reduced-motion. */
.gf {
  --gf-tinta: var(--navy);
  --gf-mudo: var(--ap-muted);
  --gf-fundo: var(--branco);
  --gf-info: var(--azul-texto);
  --gf-atencao: var(--ap-warning);
  --gf-alto: var(--erro);
  --gf-linha: var(--ap-muted);
  /* 09/11/2026.. paleta dos nós por tipo (tokens da marca, com reserva para o tema claro antigo). O canvas lê estas variáveis pelo JS */
  --gf-contorno: var(--capi-texto-2, var(--gf-linha));
  --gf-halo: var(--capi-fundo, var(--branco));
  --gf-t-titular: var(--capi-azul, var(--azul));        --gf-i-titular: var(--capi-texto, var(--branco));
  --gf-t-imovel: var(--capi-sucesso, var(--azul-texto)); --gf-i-imovel: var(--capi-fundo, var(--navy));
  --gf-t-empresa: var(--capi-azul-link, var(--azul-texto)); --gf-i-empresa: var(--capi-fundo, var(--navy));
  --gf-t-pessoa: var(--capi-texto-2, var(--ap-muted));  --gf-i-pessoa: var(--capi-fundo, var(--navy));
  --gf-t-processo: var(--capi-ouro, var(--ap-warning)); --gf-i-processo: var(--capi-fundo, var(--navy));
  --gf-t-divida: var(--capi-erro, var(--erro));         --gf-i-divida: var(--capi-texto, var(--branco));
  --gf-t-item: var(--capi-texto-3, var(--ap-muted));    --gf-i-item: var(--capi-fundo, var(--navy));
  display: grid; gap: 16px; min-width: 0;
}
.gf-cartao { min-width: 0; }
.gf-grade { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
@media (min-width: 1024px) { .gf-grade { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); } }
.gf-col-desenho, .gf-col-texto, .gf-textos { display: grid; gap: 12px; min-width: 0; align-content: start; }

/* desenho.. proporção como o "Onde fica", sem barra de rolagem própria */
.gf-palco { position: relative; min-width: 0; }
.gf-tela { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 300px; max-height: 70vh; overflow: hidden; touch-action: manipulation;
  border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--gf-fundo); }
.gf-tela[hidden] { display: none; }
/* a altura acompanha a quantidade de nós (data-porte vem do JS).. poucos nós, área baixa e desenho grande; muitos nós, área mais alta */
.gf .gf-tela[data-porte] { aspect-ratio: auto; min-height: 300px; }
.gf .gf-tela[data-porte="p"] { height: 320px; }
.gf .gf-tela[data-porte="m"] { height: 420px; }
.gf .gf-tela[data-porte="g"] { height: 500px; }
.gf .gf-tela[data-porte="gg"] { height: 580px; }
@media (max-width: 520px) { .gf .gf-tela[data-porte="p"] { height: 360px; } .gf .gf-tela[data-porte="m"] { height: 460px; } .gf .gf-tela[data-porte="g"] { height: 540px; } }
/* rótulos em HTML sobre o canvas.. tipo pequeno em cima, nome em caixa normal (até 2 linhas), sem caixa; o halo mantém a leitura sobre as linhas */
.gf-rotulos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gf-rot { position: absolute; left: 0; top: 0; width: max-content; max-width: 132px; display: grid; justify-items: center; gap: 1px; text-align: center; line-height: 1.25;
  color: var(--gf-tinta); text-shadow: 0 0 2px var(--gf-halo), 0 0 2px var(--gf-halo); will-change: transform; }
.gf-rot--oculto { visibility: hidden; }
.gf .gf-rot-tipo { font-size: 11px; font-weight: 400; color: var(--gf-mudo); }
.gf .gf-rot-nome { font-size: 13px; font-weight: 600; max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.gf .gf-rot-nivel { font-size: 11px; font-weight: 700; color: var(--gf-atencao); }
.gf .gf-rot--alerta .gf-rot-nivel { color: var(--gf-alto); }
@media (max-width: 420px) { .gf-rot { max-width: 108px; } }
/* dica.. nome completo do item ou relação da linha, ao passar o mouse ou tocar */
.gf-dica { position: absolute; left: 0; top: 0; z-index: 2; max-width: min(280px, calc(100% - 8px)); display: grid; gap: 2px; padding: 8px 10px; pointer-events: none;
  font-size: 13px; line-height: 1.4; color: var(--gf-tinta); background: var(--capi-painel-1, var(--branco)); border: 1px solid var(--capi-borda, var(--linha)); border-radius: var(--raio-p); }
.gf-dica[hidden] { display: none; }
.gf .gf-dica-tit { font-weight: 700; overflow-wrap: anywhere; }
.gf .gf-dica-sub { font-size: 12px; font-weight: 400; color: var(--gf-mudo); overflow-wrap: anywhere; }
.__________cytoscape_container { position: relative; }   /* o que o Cytoscape injetaria num <style>, que a CSP barra (ver grafo.js) */
.gf-tela:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.gf-estado { margin: 0; padding: 12px 14px; font-size: 16px; line-height: 1.5; color: var(--gf-tinta); background: var(--suave); border-radius: var(--raio-p); }
.gf-palco:not(.gf-palco--sem-desenho) .gf-estado { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; background: transparent; }
.gf-estado[hidden] { display: none; }
.gf-estado--erro { background: var(--erro-fundo); color: var(--erro); }

.gf-barra { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-barra[hidden] { display: none; }
.gf-bt { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.gf-bt:disabled { opacity: .55; cursor: not-allowed; }
.gf button:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* aviso do indício */
.gf-alerta { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--raio-p); border: 2px solid var(--gf-atencao); background: var(--branco); color: var(--gf-tinta); font-size: 16px; line-height: 1.5; }
.gf-alerta--alto { border-color: var(--gf-alto); border-style: double; border-width: 4px; }
.gf-alerta p { margin: 0; }
.gf-alerta-tit { display: flex; align-items: center; gap: 8px; }
.gf-alerta-tit .ic { width: 22px; height: 22px; flex: none; }
.gf-alerta--alto .gf-alerta-tit { color: var(--gf-alto); }
.gf-motivos { margin: 0; padding-left: 20px; display: grid; gap: 2px; }

/* texto */
.gf-sub { margin: 0 0 6px; font-size: 16px; line-height: 1.5; color: var(--gf-tinta); }
.gf-nota { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--gf-mudo); }
.gf-nota .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.gf-det { padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--branco); display: grid; gap: 8px; min-width: 0; }
.gf-det-tit { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; color: var(--gf-tinta); }
.gf-det-alerta { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--gf-alto); }
.gf-det-alerta .ic { width: 20px; height: 20px; flex: none; }
.gf-dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; font-size: 14px; line-height: 1.5; }
.gf-dl dt { color: var(--gf-mudo); }
.gf-dl dd { margin: 0; overflow-wrap: anywhere; color: var(--gf-tinta); }

.gf-nos, .gf-rels, .gf-resumo ul, .gf-leg, .gf-motivos { list-style: none; }
.gf-nos { margin: 0; padding: 0; display: grid; gap: 8px; }
.gf-no { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--branco); min-width: 0; }
.gf-no--alerta { border-color: var(--gf-alto); border-width: 2px; }
.gf-no-bt { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 4px 10px; align-items: center; width: 100%; min-height: 44px; padding: 6px 10px;
  text-align: left; font: inherit; font-size: 16px; line-height: 1.5; color: var(--gf-tinta); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.gf-no-bt:hover { background: var(--azul-suave); }
.gf-no-bt[aria-pressed="true"] { background: var(--azul-suave); border-color: var(--gf-info); border-width: 2px; font-weight: 700; }
.gf-no-tipo { font-size: 14px; color: var(--gf-mudo); }
.gf-no-nome { overflow-wrap: anywhere; }
.gf-no-nivel { font-size: 14px; font-weight: 700; padding: 0 8px; border: 2px solid var(--gf-info); border-radius: 999px; color: var(--gf-info); white-space: nowrap; }
.gf-nv-atencao { border-color: var(--gf-atencao); color: var(--gf-atencao); border-style: dashed; }
.gf-nv-alto, .gf-nv-alerta { border-color: var(--gf-alto); color: var(--gf-alto); border-style: double; border-width: 4px; }
@media (max-width: 520px) { .gf-no-bt { grid-template-columns: minmax(0, 1fr); } }
.gf-rels { margin: 0; padding: 0 10px 4px; display: grid; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--gf-mudo); }
.gf-rels li { overflow-wrap: anywhere; }
.gf-resumo ul { margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--gf-tinta); }
.gf-resumo li { overflow-wrap: anywhere; }

/* legenda */
.gf-legenda { display: grid; gap: 8px; }
.gf-leg { margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--gf-tinta); }
.gf-leg li { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* chips da legenda.. mesma cor, mesma forma e mesmo ícone do nó no desenho */
.gf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.gf-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.2; color: var(--gf-tinta); white-space: nowrap; }
.gf .gf-chip-ic { width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center; padding: 4px; box-sizing: border-box; border-radius: 50%; }
.gf .gf-chip-ic svg { width: 100%; height: 100%; }
.gf .gf-chip-ic--titular { background: var(--gf-t-titular); color: var(--gf-i-titular); }
.gf .gf-chip-ic--imovel { background: var(--gf-t-imovel); color: var(--gf-i-imovel); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.gf .gf-chip-ic--empresa { background: var(--gf-t-empresa); color: var(--gf-i-empresa); border-radius: 7px; }
.gf .gf-chip-ic--pessoa { background: var(--gf-t-pessoa); color: var(--gf-i-pessoa); }
.gf .gf-chip-ic--processo { background: var(--gf-t-processo); color: var(--gf-i-processo); border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.gf .gf-chip-ic--divida { background: var(--gf-t-divida); color: var(--gf-i-divida); border-radius: 0; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.gf-como-ler { border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 0 12px; min-width: 0; }
.gf-como-ler[open] { display: grid; gap: 8px; padding-bottom: 12px; }
.gf-como-ler summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; color: var(--gf-info); }
.gf-como-ler summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.gf-amostra { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--gf-info); background: var(--gf-fundo); }
.gf-amostra--atencao { border-color: var(--gf-atencao); border-style: dashed; }
.gf-amostra--alto { border-color: var(--gf-alto); border-style: double; border-width: 6px; }
.gf-amostra--alerta { border-color: var(--gf-alto); border-style: double; border-width: 8px; }
.gf-traco { flex: none; width: 32px; height: 0; border-top: 3px solid var(--gf-linha); }
.gf-traco--media { border-top-style: dashed; }
.gf-traco--baixa { border-top-style: dotted; border-top-width: 4px; }

/* ui-tokens.css (painel novo, F3 06/11/2026).. tokens --capi-*, fonte Nunito, @property do neon, @keyframes do prototipo e movimento reduzido.
   Escopo: tudo que PINTA fica sob body.ui-novo (canario ?ui=novo, so no link do dono, ver ui-casca.js).. ate a virada (F10) a pagina nao muda.
   Sem hex solto fora de :root.. use var(--capi-*). Guarda: test_prefeitura_ui_tokens_06_11.py.

   CONTRASTE (calculado, WCAG). Pares do desenho que REPROVAM como texto e o que usar no lugar..
   --capi-texto-4 sobre --capi-painel-1 = 4,04  ->  --capi-texto-4-forte (4,70 ou mais em todas as superficies)
   --capi-texto-4 sobre --capi-campo = 4,27 (placeholder e rotulo de 11-12 px)  ->  --capi-texto-4-forte
   (texto-4-forte nao vai sobre o vidro empilhado no painel-1.. la da 4,18; use texto-3)
   --capi-azul-claro sobre --capi-fundo = 4,03 (texto de link e :hover)  ->  --capi-azul-link e --capi-azul-link-hover; o azul-claro fica para brilho e borda
   --capi-azul sobre --capi-fundo = 2,75 (nunca como texto; so como preenchimento com texto branco, 6,48)  ->  --capi-azul-link
   --capi-erro sobre --capi-painel-2 = 4,41  ->  --capi-erro-texto
   --capi-erro sobre --capi-campo = 4,04  ->  --capi-erro-texto
   Aprovados como texto de corpo e de 11-12 px sobre fundo, painel-1, painel-2, campo e sub (todos >= 4,5).. texto, texto-3, texto-4-forte,
   azul-link, azul-link-hover, ouro, ouro-texto, sucesso, sucesso-texto, erro-texto. texto-2 (c8d3e4) tambem passa (>= 9,3), mas nao sobre o botao azul (4,28). */
:root {
  /* Marca */
  --capi-azul: #1652d9;
  --capi-azul-hover: #1d5fe8;
  --capi-azul-claro: #3d72e6;
  --capi-azul-link: #9db6f5;
  --capi-azul-link-hover: #c3d3fa;   /* acrescentado.. hover de link em texto precisa de >= 4,5; o azul-claro do desenho da 4,03 */
  --capi-ouro: #f5b942;
  --capi-ouro-texto: #ffd98a;
  --capi-sucesso: #34d399;
  --capi-sucesso-texto: #a7f3d0;
  --capi-erro: #e4572e;
  --capi-erro-texto: #ffd9d3;
  /* Superficies (navy) */
  --capi-fundo: #0b1730;
  --capi-painel-1: #1b2b4b;
  --capi-painel-2: #132039;
  --capi-cartao: rgba(14,24,46,.62);
  --capi-campo: #1a2742;
  --capi-sub: #152037;
  --capi-borda: #2c3b5a;
  --capi-linha: #26344f;
  --capi-vidro: linear-gradient(160deg,rgba(40,60,104,.46),rgba(16,26,50,.52));
  --capi-vidro-borda: rgba(255,255,255,.16);
  --capi-grade: rgba(120,150,210,.10);
  /* Texto */
  --capi-texto: #ffffff;
  --capi-texto-2: #c8d3e4;
  --capi-texto-3: #9aa8bf;
  --capi-texto-4: #7d8aa3;   /* so em fundo/painel-2/sub e texto grande.. NAO em painel-1 nem campo (ver cabecalho) */
  --capi-texto-4-forte: #8896ae;   /* acrescentado.. o texto-4 que passa em todas as superficies (placeholder, rotulo de 11 px) */
  /* Tipografia.. Nunito hospedada (R21), pesos 400, 500, 600; o fallback usa size-adjust para o texto nao pular quando a fonte chega */
  --capi-fonte: 'Nunito', 'Nunito Fallback', system-ui, sans-serif;
  --capi-t-hero: 30px; --capi-t-h2: 22px; --capi-t-h3: 16px; --capi-t-corpo: 14px; --capi-t-meta: 12px; --capi-t-rotulo: 11px;
  /* Raios e espacos (base 4px) */
  --capi-r-campo: 8px; --capi-r-botao: 10px; --capi-r-cartao: 14px; --capi-r-painel: 16px; --capi-r-modal: 20px; --capi-r-pilula: 999px;
  --capi-e-1: 4px; --capi-e-2: 8px; --capi-e-3: 12px; --capi-e-4: 16px; --capi-e-5: 20px; --capi-e-6: 24px;
  /* Alturas */
  --capi-h-campo: 42px; --capi-h-campo-principal: 46px; --capi-h-botao: 46px; --capi-h-toque: 44px;
  /* Motion */
  --capi-neon-volta: 16s; --capi-neon-respira: 5s; --capi-neon-carregando: 1.6s;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/nunito-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/nunito-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/nunito-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Fallback';
  src: local('Arial');
  size-adjust: 101%;
  ascent-override: 100%;
  descent-override: 28%;
  line-gap-override: 0%;
}

@property --neon-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes neonSpin { to { --neon-a: 360deg; } }
@keyframes neonBreath { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes capiWave { 0%,100% { opacity: .15; } 35%,60% { opacity: 1; } }
@keyframes capiBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes capiSpin { to { transform: rotate(360deg); } }
@keyframes planForca { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes planDrift { 0%,100% { transform: translateX(-8%); } 50% { transform: translateX(8%); } }
@keyframes planHalo { 0%,100% { box-shadow: 0 0 6px var(--halo); } 50% { box-shadow: 0 0 22px var(--halo); } }
@keyframes planGlow { 0%,100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes planFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes planPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,82,217,0); } 50% { box-shadow: 0 0 0 3px rgba(22,82,217,.16); } }
@keyframes tzFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(var(--dx),var(--dy)); } }
@keyframes tzIn { 0%,100% { opacity: .25; } 50% { opacity: .85; } }
@keyframes tzBlob { 0%,100% { transform: translate(-6%,-4%) scale(1); } 50% { transform: translate(6%,5%) scale(1.15); } }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes capiRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

:root:has(> body.ui-novo) { color-scheme: dark; }   /* R1.. a RAIZ tambem e escura (barra de rolagem da pagina, fundo de sobrescrita); localizador.css declara light na raiz para o desenho de ?ui=antigo */
/* ---- base do tema escuro (R1).. so com a classe do canario; a virada da F10 passa a ligar a classe para todos */
body.ui-novo {
  color-scheme: dark;
  background: var(--capi-fundo);
  color: var(--capi-texto);
  font-family: var(--capi-fonte);
  font-size: var(--capi-t-corpo);
  line-height: 1.5;
}
/* link comum.. especificidade ZERO do escopo (:where) para que o botao-link de um componente (.up-cta, .uc-btn...) mande na propria cor. Com `body.ui-novo a` (0,1,2) o
   azul-link vencia a classe (0,1,0) e o texto do "Assinar pelo WhatsApp" e do "WhatsApp" da ficha saia azul claro sobre azul (revisao final 06/11/2026). */
:where(body.ui-novo) a { color: var(--capi-azul-link); }
:where(body.ui-novo) a:where(:hover) { color: var(--capi-azul-link-hover); }
body.ui-novo ::placeholder { color: var(--capi-texto-4-forte); opacity: 1; }
body.ui-novo :focus-visible { outline: 2px solid var(--capi-azul-link); outline-offset: 2px; }

/* ---- movimento reduzido (fora de @supports, de proposito).. cobre neon (neonSpin/neonBreath), teaser (capiWave/capiBob/capiSpin),
   luzes dos planos (planForca/planDrift/planHalo/planGlow/planFloat/planPulse), tz* , skel, capiRise e as transicoes (largura do aside). */
@media (prefers-reduced-motion: reduce) {
  body.ui-novo,
  body.ui-novo *,
  body.ui-novo *::before,
  body.ui-novo *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ui-casca.css (painel novo, F4 06/11/2026).. a CASCA.. aside de busca (360/68 px), neon, area da ficha com barra, fundo, Suporte.
   Regras da casa.. nenhum seletor vale sem body.ui-novo (canario ?ui=novo no link do dono) fora do primeiro bloco, que so ESCONDE o que e novo;
   nada de hex fora de :root; animar so transform/opacity, com a unica excecao registrada da LARGURA do aside (R22, design aprovado);
   movimento reduzido ja e zerado em ui-tokens.css. O JS (ui-casca.js) escreve o fundo por CSSOM (--casca-fundo-img), nunca style=. */
:root {
  --cs-borda-saida: #1a2a4a;
  --cs-pilula-fundo: rgba(15,28,55,.8);
  --cs-pilula-borda: #2a3a5c;
  --cs-btn-texto: #e2e8f2;
  --cs-sombra-aside: 0 24px 70px rgba(22,82,217,.28), 0 0 0 1px rgba(22,82,217,.35);
  --cs-neon-fio: rgba(22,82,217,.22);
  --cs-neon-giro: conic-gradient(from var(--neon-a), transparent 0deg, rgba(22,82,217,0) 90deg, rgba(22,82,217,.55) 150deg, rgba(22,82,217,1) 180deg, rgba(22,82,217,.55) 210deg, transparent 270deg, transparent 360deg);
  --cs-grade: linear-gradient(var(--capi-grade) 1px, transparent 1px), linear-gradient(90deg, var(--capi-grade) 1px, transparent 1px);
  --cs-tint: linear-gradient(180deg, rgba(11,25,52,.62) 0%, rgba(12,22,44,.74) 70%, rgba(9,16,32,.86) 100%);
  --cs-tint-sem-imagem: linear-gradient(180deg, rgba(11,25,52,.88) 0%, rgba(12,22,44,.92) 70%, rgba(9,16,32,.96) 100%);
  --cs-sombra-suporte: 0 12px 30px rgba(0,0,0,.45), 0 0 0 4px rgba(22,82,217,.18);
  --cs-sombra-pop: 0 24px 60px rgba(0,0,0,.5);
  --cs-miniatura: rgba(5,10,22,.85);
  --cs-mascara: #000;
}

/* tudo que a F4 acrescenta ao HTML nasce escondido, em qualquer perfil, sem body.ui-novo */
[data-casca] { display: none; }

/* @@casca-layout */
body.ui-novo .ms, body.ui-novo .topo, body.ui-novo .vitrine, body.ui-novo #busca .busca-resumo { display: none; }

body.ui-novo #pagina {
  display: flex; flex-direction: row; gap: 12px; align-items: stretch;
  box-sizing: border-box; width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 10px;
  background: var(--capi-fundo);
}
body.ui-novo #busca {
  position: relative; inset: auto; z-index: 2; box-sizing: border-box; flex: 0 0 auto; width: 360px; max-width: none; height: calc(100vh - 20px); max-height: none; margin: 0; padding: 22px 20px;
  overflow: visible; transform: none; animation: none;   /* desfaz a janela por cima do painel (modo-painel).. aqui o aside e fixo */
  display: flex; flex-direction: column; gap: 16px; border: 0; border-radius: 16px; color: var(--capi-texto);
  background: linear-gradient(180deg, var(--capi-painel-1) 0%, var(--capi-painel-2) 100%); box-shadow: var(--cs-sombra-aside);
  transition: width .25s ease;
}
body.ui-novo #busca.busca--recolhida { width: 68px; padding: 18px 10px; }
body.ui-novo #busca:not(.busca--recolhida) .busca-area { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }   /* flex: o filtro novo ocupa a altura e a LGPD desce ao rodape (design) */
body.ui-novo .busca-area > .uf-ponte-raiz { display: flex; flex-direction: column; flex: 1 0 auto; min-width: 0; }
/* UM filtro so.. o formulario, os recentes, o aviso e o titulo antigos saem por regra ESTATICA (nao dependem de CSSOM nem de ordem de carga); o ui-ponte.js repete por CSSOM */
body.ui-novo.ui-ponte-filtro #busca .busca-area > :not([class*="uf-"]) { display: none !important; }
body.ui-novo.ui-ponte-filtro .uf .uf-cab { display: none !important; }   /* a casca ja desenha a marca e o recolher */
body.ui-novo #busca.busca--recolhida > :not(.neon):not(.busca-mini) { display: none; }

body.ui-novo #saida {
  position: relative; inset: auto; z-index: auto; box-sizing: border-box; flex: 1 1 0; min-width: 0; max-width: none; height: calc(100vh - 20px);
  display: flex; flex-direction: column; gap: 12px; align-self: stretch; padding: 14px; overflow: auto;
  border: 1px solid var(--cs-borda-saida); border-radius: 16px; color: var(--capi-texto);
  background-color: var(--capi-fundo);
  background-image: var(--cs-grade), var(--cs-tint), var(--casca-fundo-img, none);
  background-size: 32px 32px, 32px 32px, cover, cover; background-position: 0 0, 0 0, center, center;
}
body.ui-novo #saida > #resultado { display: block; min-width: 0; }   /* a grade em subgrade da pagina antiga nao existe mais.. o interior e das frentes da ficha */
body.ui-novo #saida[data-fundo="nenhum"] { background-image: var(--cs-grade), var(--cs-tint-sem-imagem); background-size: 32px 32px, 32px 32px, cover; }

@media (max-width: 899.98px) {
  body.ui-novo #pagina { flex-direction: column; }
  body.ui-novo.tem-saida #pagina { padding-bottom: 84px; }   /* reserva da barra fixa WhatsApp/Ligar (ui-ficha-barra.js) */
  body.ui-novo #busca, body.ui-novo #busca.busca--recolhida { width: 100%; height: auto; min-height: 0; }
  body.ui-novo #busca:not(.busca--recolhida) { max-height: none; }
  body.ui-novo #busca:not(.busca--recolhida) .busca-area { overflow: visible; }
  body.ui-novo #saida { height: auto; min-height: 60vh; overflow: visible; }
}
/* @@fim-casca-layout */

/* neon.. duas camadas (aro que gira e fio fixo) dentro do aside; fica parado com movimento reduzido (ui-tokens.css) */
body.ui-novo #busca > .neon { display: block; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; }
body.ui-novo .neon-giro, body.ui-novo .neon-aro { position: absolute; inset: -1px; border-radius: 17px; pointer-events: none; }
body.ui-novo .neon-giro {
  padding: 1.5px; background: var(--cs-neon-giro);
  -webkit-mask: linear-gradient(var(--cs-mascara) 0 0) content-box, linear-gradient(var(--cs-mascara) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--cs-mascara) 0 0) content-box exclude, linear-gradient(var(--cs-mascara) 0 0);
  animation: neonSpin var(--capi-neon-volta) linear infinite, neonBreath var(--capi-neon-respira) ease-in-out infinite;
}
body.ui-novo .neon-aro { border: 1px solid var(--cs-neon-fio); }
body.ui-novo[data-ui-ocupado="1"] .neon-giro { animation-duration: var(--capi-neon-carregando), var(--capi-neon-respira); }

/* cabecalho do aside e trilho recolhido */
body.ui-novo #busca:not(.busca--recolhida) > .busca-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.ui-novo .casca-marca { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
body.ui-novo .casca-logo { display: block; width: 44px; height: 24px; }   /* design: logo do cabecalho com 24 px de altura (960 x 520) */
body.ui-novo .busca-mini .casca-logo { width: 33.2px; height: 18px; }   /* trilho recolhido (print 18).. simbolo de 18 px (960 x 520), nao os 24 do cabecalho */
body.ui-novo .casca-recolher, body.ui-novo .casca-abrir {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; color: var(--capi-texto-2);
  width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 1px solid var(--capi-borda); background: transparent;
}
body.ui-novo:not(.tem-saida) .casca-recolher, body.ui-novo[data-ui-estado="vazio"] .casca-recolher { display: none; }   /* design: o recolher so existe depois de uma busca */
body.ui-novo .casca-abrir { width: 44px; height: 44px; border-radius: 12px; border-color: var(--capi-azul); background: var(--capi-azul); color: var(--capi-texto); box-shadow: 0 8px 20px rgba(22,82,217,.35); }
body.ui-novo .casca-abrir:hover { background: var(--capi-azul-hover); }
body.ui-novo #busca.busca--recolhida > .busca-mini { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 16px; min-height: 0; }
body.ui-novo .casca-mini-resumo {
  max-height: 52vh; padding: 0; border: 0; background: transparent; color: var(--capi-texto-2); font-family: inherit; font-size: 13px; cursor: pointer;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ui-novo .casca-mini-extra { line-height: normal; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
body.ui-novo .casca-mini-extra:empty { display: none; }

/* area da ficha.. barra superior */
body.ui-novo #ficha-barra { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
body.ui-novo .casca-espaco { flex: 1 1 0; }
body.ui-novo .casca-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
body.ui-novo .casca-resumo {
  display: flex; align-items: center; gap: 8px; min-height: 36px; max-width: 100%; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--cs-pilula-borda); background: var(--cs-pilula-fundo); color: var(--capi-texto-2); font-size: 13px;
}
body.ui-novo .casca-resumo svg { flex: 0 0 auto; color: var(--capi-azul-link); }
body.ui-novo #casca-resumo-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui-novo .casca-nao-este { height: 36px; padding: 0 4px; border: 0; background: transparent; color: var(--capi-ouro-texto); font-family: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
body.ui-novo .casca-btn, body.ui-novo .casca-nova {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--cs-pilula-borda); background: var(--cs-pilula-fundo); color: var(--cs-btn-texto); font-family: inherit; font-size: 13px; font-weight: 500;
}
body.ui-novo .casca-btn:hover, body.ui-novo .casca-btn[aria-expanded="true"] { border-color: var(--capi-azul); }
body.ui-novo .casca-btn--planos { border-color: var(--capi-azul); background: rgba(22,82,217,.18); color: var(--capi-texto); }
body.ui-novo .casca-nova { border-radius: 999px; border-color: var(--capi-azul); background: var(--capi-azul); color: var(--capi-texto); padding: 0 16px; }
body.ui-novo .casca-nova:hover { background: var(--capi-azul-hover); }
body.ui-novo[data-ui-estado="vazio"] .casca-resumo, body.ui-novo[data-ui-estado="vazio"] .casca-nao-este, body.ui-novo[data-ui-estado="vazio"] .casca-nova { display: none; }

/* popover de fundo */
body.ui-novo .casca-fundo-caixa { position: relative; }
body.ui-novo .casca-fundo-pop {
  position: absolute; top: 44px; right: 0; z-index: 30; display: flex; flex-direction: column; gap: 14px; width: 340px; max-width: calc(100vw - 40px); box-sizing: border-box; padding: 14px;
  border: 1px solid rgba(22,82,217,.5); border-radius: 14px; color: var(--capi-texto); box-shadow: var(--cs-sombra-pop);
  background: linear-gradient(180deg, var(--capi-painel-1) 0%, var(--capi-painel-2) 100%);
}
body.ui-novo .casca-fundo-pop[hidden] { display: none; }
body.ui-novo .casca-rotulo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--capi-texto-3); }
body.ui-novo .casca-nota { font-size: 12px; line-height: 1.45; color: var(--capi-texto-3); }
body.ui-novo .casca-fundo-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.ui-novo .casca-fundo-op {
  position: relative; aspect-ratio: 4 / 3; min-height: 44px; padding: 0; overflow: hidden; cursor: pointer; border-radius: 10px; border: 2px solid transparent;
  background-color: var(--capi-campo); background-size: cover; background-position: center;
}
body.ui-novo .casca-fundo-op[aria-pressed="true"] { border-color: var(--capi-azul); }
body.ui-novo .casca-fundo-nome {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: inherit; font-size: 12px; color: var(--capi-texto); background: linear-gradient(0deg, var(--cs-miniatura), transparent);
}
body.ui-novo .casca-fundo-op[aria-pressed="true"] .casca-fundo-nome::after { content: " (em uso)"; }

/* estado vazio */
body.ui-novo[data-ui-estado="vazio"] #casca-vazio {
  display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--capi-texto-3);
}
body.ui-novo .casca-capivara { display: block; width: 103px; height: 56px; }
body.ui-novo .casca-vazio-tit { font-size: 18px; font-weight: 500; color: var(--capi-texto); }
body.ui-novo .casca-vazio-sub { max-width: 420px; font-size: 14px; line-height: 1.5; }

/* Suporte flutuante (a janela e do ui-modais.js; sobe para 88 px quando existe a barra fixa mobile) */
body.ui-novo .casca-suporte {
  position: fixed; right: 20px; bottom: var(--ub-suporte-bottom, 20px); z-index: 45; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px;
  border-radius: 999px; border: 1px solid var(--capi-azul); background: var(--capi-azul); color: var(--capi-texto); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  box-shadow: var(--cs-sombra-suporte);
}
body.ui-novo .casca-suporte:hover { background: var(--capi-azul-hover); }

/* rolagem.. barras ocultas SO no filtro e na ficha (R24), nunca global */
body.ui-novo #busca, body.ui-novo #busca .busca-area, body.ui-novo #saida, body.ui-novo #resultado { scrollbar-width: none; }
body.ui-novo #busca::-webkit-scrollbar, body.ui-novo #busca .busca-area::-webkit-scrollbar, body.ui-novo #saida::-webkit-scrollbar, body.ui-novo #resultado::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* toque.. alvos de 44 px sem mudar o desenho do computador (R23) */
@media (pointer: coarse), (max-width: 899.98px) {
  body.ui-novo .casca-recolher, body.ui-novo .casca-btn, body.ui-novo .casca-nova, body.ui-novo .casca-nao-este, body.ui-novo .casca-resumo { min-width: 44px; min-height: 44px; }
  body.ui-novo .casca-recolher { width: 44px; height: 44px; }
  body.ui-novo .casca-mini-resumo { writing-mode: horizontal-tb; transform: none; max-width: 60vw; min-height: 44px; }
  body.ui-novo #busca.busca--recolhida > .busca-mini { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  body.ui-novo .casca-mini-extra { margin-top: 0; margin-left: auto; }
}

/* Painel inicial explicativo da vitrine logada (.ap, desenho claro de 05/11).. no tema escuro unico o texto herdava o branco do corpo e os titulos
   ficavam brancos sobre cartao branco (contraste 1,0). Ganha uma folha clara propria, com as cores do proprio painel. */
body.ui-novo[data-app].sem-consulta .ferramenta-boasvindas.ap { padding: 16px; border-radius: 16px; background: var(--ap-page-bg); color: var(--ap-text); }

/* faixa de aviso da ficha (#estado) no painel novo (07/11/2026).. localizador.css deixava texto navy sobre fundo escuro; texto claro sobre vidro azul escuro, sempre sobre base opaca (contraste >= 4,5) */
body.ui-novo.tem-saida .estado--aviso { background-color: var(--capi-painel-2); background-image: var(--capi-vidro); color: var(--capi-texto); border: 1px solid var(--capi-vidro-borda); }
body.ui-novo.tem-saida .estado--aviso .ic { color: var(--capi-azul-link); }

/* ui-filtro.css (painel novo, frente FILTRO por dentro, 06/11/2026).. prefixo .uf-, tokens var(--capi-*) de design-tokens.css (o ui-tokens.css final os fornece).
   Sem style= no HTML e sem innerHTML com style=.. valor dinamico entra so por custom property pelo CSSOM (--p, --custo).
   Os poucos tons que o design usa e que nao tem token ficam neste bloco, para o integrador promover ao ui-tokens.css. */
:root {
  --uf-titulo-2: #a9b6cb;
  --uf-lgpd-texto: #b4bfd0;
  --uf-aceite-borda: #b8995a;
  --uf-aceite-fundo: #3b3c42;
  --uf-aceite-texto: #f5d68c;
}

.uf {
  --uf-azul-12: rgba(22, 82, 217, .12);
  --uf-azul-14: rgba(22, 82, 217, .14);
  --uf-azul-18: rgba(22, 82, 217, .18);
  --uf-azul-28: rgba(22, 82, 217, .28);
  --uf-azul-35: rgba(22, 82, 217, .35);
  --uf-azul-55: rgba(22, 82, 217, .55);
  --uf-azul-borda: rgba(22, 82, 217, .6);
  --uf-azul-fundo: rgba(22, 82, 217, .07);
  --uf-ok-borda: rgba(52, 211, 153, .45);
  --uf-ok-fundo: rgba(52, 211, 153, .08);
  --uf-aviso-borda: rgba(245, 185, 66, .5);
  --uf-aviso-fundo: rgba(245, 185, 66, .08);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  gap: 16px;
  color: var(--capi-texto);
  font-family: var(--capi-fonte);
  font-size: 14px;
  line-height: normal;   /* o design nao fixa altura de linha (so nos paragrafos) .. 1.5 aqui deixava cada linha 2 a 3 px mais alta */
  text-align: left;
}
.uf *, .uf *::before, .uf *::after { box-sizing: border-box; }
.uf [hidden] { display: none !important; }
.uf button, .uf input { font-family: inherit; }
.uf button { cursor: pointer; }
.uf :focus-visible { outline: 2px solid var(--capi-azul-claro); outline-offset: 2px; }
.uf input:focus { border-color: var(--capi-azul); }
.uf input::placeholder { color: var(--capi-texto-4-forte); opacity: 1; }   /* o design usa #7d8aa3 (4,27 sobre o campo, reprova AA).. o forte e o mais proximo que passa (4,97) */
.uf a { color: var(--capi-azul-link); }
.uf p { margin: 0; }
.uf .uf-ic { flex-shrink: 0; }
.uf .uf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.uf .uf-ic--azul { color: var(--capi-azul); }
.uf .uf-ic--ok { color: var(--capi-sucesso); }

/* ---------- logo animada ---------- */
.uf .uf-logo { position: relative; display: inline-block; flex-shrink: 0; aspect-ratio: 960 / 520; }
.uf .uf-logo--h { height: 24px; }
.uf .uf-logo--m { height: 18px; }
.uf .uf-logo-corpo { position: absolute; inset: 0; width: 100%; height: 100%; animation: uf-bob 3.2s ease-in-out infinite; }
.uf .uf-logo-ondas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.uf .uf-onda { fill: none; stroke: var(--capi-azul); stroke-width: 30; stroke-linecap: round; animation: uf-wave 2.4s ease-in-out infinite; }
.uf .uf-onda--2 { animation-delay: .35s; }

/* ---------- cabecalho e titulo ---------- */
.uf .uf-aberto { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.uf .uf-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uf .uf-marca { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.uf .uf-marca-nome { letter-spacing: -.01em; }
/* a marca é botão (voltar ao painel inicial).. alvo de 44 px, sem aparência de botão, foco visível */
.uf .uf-marca--voltar { background: none; border: 0; margin: 0; padding: 0 6px 0 0; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; min-height: 44px; border-radius: 10px; }
.uf .uf-marca--voltar:hover .uf-marca-nome { text-decoration: underline; text-underline-offset: 3px; }
.uf .uf-recolher { width: 32px; height: 32px; border-radius: var(--capi-r-campo); border: 1px solid var(--capi-borda); background: transparent; color: var(--capi-texto-2); display: flex; align-items: center; justify-content: center; padding: 0; }
.uf .uf-recolher:hover { border-color: var(--capi-azul); }
.uf .uf-titulo-bloco { display: flex; flex-direction: column; gap: 10px; }
.uf .uf-titulo { margin: 0; display: flex; flex-direction: column; font-weight: 500; letter-spacing: -.96px; line-height: 1.02; }
.uf .uf-titulo-1, .uf .uf-titulo-2 { font-size: var(--uf-t-titulo, 30px); }   /* 30px do design; "Todo imovel tem dono." cabe em 320px (era 25px so enquanto o texto era "proprietario", 371px a 30px) */
.uf .uf-titulo-1 { color: var(--capi-texto); text-wrap: balance; }
.uf .uf-titulo-2 { color: var(--uf-titulo-2); white-space: nowrap; }
.uf .uf-traco { width: 44px; height: 3px; border-radius: var(--capi-r-pilula); background: var(--capi-azul); }

/* ---------- formulario ---------- */
.uf .uf-form { display: flex; flex-direction: column; gap: 14px; border: 1px solid transparent; }   /* a borda transparente do cartao do design (1px) */
.uf .uf-painel { display: flex; flex-direction: column; gap: 8px; }
.uf .uf-seg { display: grid; gap: 2px; padding: 3px; border-radius: var(--capi-r-botao); border: 1px solid var(--capi-borda); background: var(--capi-sub); }
.uf .uf-seg--3 { grid-template-columns: 1fr 1fr 1fr; }
.uf .uf-seg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* 08/11/2026.. aba CNPJ.. uma linha so, tambem a 360 px */
.uf .uf-seg--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.uf .uf-seg--4 .uf-seg-bt, .uf .uf-seg--5 .uf-seg-bt { padding: 0 2px; font-size: 12px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.uf .uf-seg--2 { grid-template-columns: 1fr 1fr; }
.uf .uf-seg-bt { height: 34px; border: 0; border-radius: var(--capi-r-campo); background: transparent; color: var(--capi-texto); font-size: 13px; padding: 0 8px; }
.uf .uf-seg-bt:hover { background: var(--uf-azul-14); }
.uf .uf-seg-bt[aria-pressed="true"] { background: var(--capi-azul); }
.uf .uf-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uf .uf-campo--cheio { grid-column: 1 / -1; }
.uf .uf-rotulo { font-weight: 500; font-size: 13px; line-height: 18px; white-space: nowrap; }
.uf .uf-opc { font-weight: 400; color: var(--capi-texto-3); }
.uf .uf-campo-q { position: relative; }
.uf .uf-q { height: var(--capi-h-campo-principal); width: 100%; border-radius: var(--capi-r-botao); border: 1px solid var(--capi-borda); background: var(--capi-campo); color: var(--capi-texto); padding: 0 64px 0 38px; font-size: 15px; outline: none; }
.uf .uf-q:focus-visible { outline: 2px solid var(--capi-azul-claro); outline-offset: 2px; }
.uf .uf-pino { position: absolute; left: 12px; top: 15px; color: var(--capi-texto-3); pointer-events: none; }
.uf .uf-campo-acoes { position: absolute; right: 8px; top: 0; height: var(--capi-h-campo-principal); display: flex; align-items: center; gap: 6px; }
.uf .uf-kbd { display: none; }   /* o design traz a dica "Ctrl K" com display:none (referencia 109 nao a mostra); o atalho segue valendo */
.uf .uf-mic { width: 32px; height: 32px; border-radius: var(--capi-r-campo); border: 1px solid var(--capi-borda); background: transparent; color: var(--capi-texto); display: flex; align-items: center; justify-content: center; padding: 0; }
.uf .uf-mic:hover { border-color: var(--capi-azul); }
.uf .uf-mic--on { background: var(--capi-azul); border-color: var(--capi-azul); }
.uf .uf-nota { font-size: 12px; line-height: 1.333; color: var(--capi-texto-3); }
.uf .uf-nota-fraca { font-size: 12px; color: var(--capi-texto-3); }
.uf .uf-nota-forte { font-size: 13px; line-height: 1.45; color: var(--capi-texto-2); }
.uf .uf-nota--ok { color: var(--capi-sucesso-texto); }
.uf .uf-nota--aviso { color: var(--capi-ouro-texto); }
.uf .uf-partes { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--capi-texto-3); }
.uf .uf-parte-v { color: var(--capi-texto); }

/* autocompletar */
.uf .uf-ac-ancora { position: relative; z-index: 6; }
.uf .uf-ac-caixa { position: absolute; top: -2px; left: 0; right: 0; background: var(--capi-campo); border: 1px solid var(--capi-borda); border-radius: var(--capi-r-botao); padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.uf .uf-ac { display: flex; flex-direction: column; gap: 2px; }
.uf .uf-ac-bairros { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--capi-linha); margin-bottom: 4px; }
.uf .uf-rotulo-mini { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--capi-texto-3); }
.uf .uf-ac-op { width: 100%; border: 0; border-radius: 7px; background: transparent; color: var(--capi-texto); padding: 8px 10px; display: flex; align-items: center; gap: 10px; text-align: left; }
.uf .uf-ac-op[aria-selected="true"] { background: var(--uf-azul-28); }
.uf .uf-ac-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.uf .uf-ac-nome { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf .uf-ac-resto { color: var(--capi-texto-2); }
.uf .uf-ac-hit { color: var(--capi-texto); font-weight: 600; }
.uf .uf-ac-sub { font-size: 12px; color: var(--capi-texto-3); }
.uf .uf-ac-vazio { padding: 8px 10px; font-size: 13px; color: var(--capi-texto-3); }

/* chips */
.uf .uf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.uf .uf-chip { height: 28px; padding: 0 10px; border-radius: var(--capi-r-pilula); border: 1px solid var(--capi-borda); background: transparent; color: var(--capi-texto); font-size: 12px; }
.uf .uf-chip:hover { border-color: var(--capi-azul); }
.uf .uf-chip--on { background: var(--uf-azul-35); border-color: var(--capi-azul); }
.uf .uf-bairro-sel { height: 28px; padding: 0 4px 0 10px; border-radius: var(--capi-r-pilula); background: var(--uf-azul-18); border: 1px solid var(--uf-azul-55); color: var(--capi-texto); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.uf .uf-bairro-x { width: 22px; height: 22px; border: 0; border-radius: var(--capi-r-pilula); background: transparent; color: var(--capi-texto-2); display: flex; align-items: center; justify-content: center; padding: 0; }

/* validacao */
.uf .uf-val { border: 1px solid var(--capi-borda); border-radius: var(--capi-r-campo); padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--capi-texto-2); }
.uf .uf-val--ok { color: var(--capi-sucesso-texto); border-color: var(--uf-ok-borda); background: var(--uf-ok-fundo); }
.uf .uf-val--aviso { color: var(--capi-ouro-texto); border-color: var(--uf-aviso-borda); background: var(--uf-aviso-fundo); }
.uf .uf-val-linha { display: flex; align-items: center; gap: 8px; }
.uf .uf-val-ic { display: inline-flex; }

/* refinar */
.uf .uf-refinar-btn { width: 100%; min-height: 40px; padding: 0 12px; border-radius: var(--capi-r-botao); border: 1px dashed var(--uf-azul-borda); background: var(--uf-azul-fundo); color: var(--capi-texto); font-size: 13px; display: flex; align-items: center; gap: 10px; white-space: nowrap; transition: background .2s, border-color .2s; }
.uf .uf-refinar-btn:hover, .uf .uf-refinar-btn--aberto { border-color: var(--capi-azul); background: var(--uf-azul-14); }
.uf .uf-refinar-btn--aberto { background: rgba(22, 82, 217, .16); }
.uf .uf-refinar-rot { flex: 1; text-align: left; }
.uf .uf-refinar-info { font-size: 11px; color: var(--capi-texto-3); }
.uf .uf-refinar-seta { transition: transform .2s; }
.uf .uf-refinar-btn--aberto .uf-refinar-seta { transform: rotate(180deg); }
.uf .uf-refinar { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--capi-linha); border-radius: var(--capi-r-botao); background: var(--capi-sub); }
.uf .uf-aviso-azul { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--capi-r-campo); background: var(--uf-azul-14); border: 1px solid rgba(22, 82, 217, .5); font-size: 12px; line-height: 1.45; }
.uf .uf-aviso-azul .uf-ic { margin-top: 2px; }
.uf .uf-grade2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.uf .uf-in { height: var(--capi-h-campo); width: 100%; border-radius: var(--capi-r-campo); border: 1px solid var(--capi-borda); background: var(--capi-campo); color: var(--capi-texto); padding: 0 12px; font-size: 14px; outline: none; font-variant-numeric: tabular-nums; }
.uf .uf-in:focus-visible { outline: 2px solid var(--capi-azul-claro); outline-offset: 2px; }
.uf .uf-in--grande { height: var(--capi-h-campo-principal); border-radius: var(--capi-r-botao); font-size: 16px; letter-spacing: .04em; }
.uf .uf-bloco { text-transform: uppercase; }
.uf .uf-bairros-box, .uf .uf-condo-box { position: relative; }
.uf .uf-bairros-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; color: var(--capi-texto-2); }
.uf .uf-bairros-btn--on { color: var(--capi-texto); }
.uf .uf-bairros-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf .uf-bairros-painel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; max-height: 260px; overflow-y: auto; background: var(--capi-campo); border: 1px solid var(--capi-borda); border-radius: var(--capi-r-botao); padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); scrollbar-width: none; }
.uf .uf-bairros-painel::-webkit-scrollbar { display: none; }
.uf .uf-bairro-op { min-height: 34px; border: 0; border-radius: 7px; background: transparent; color: var(--capi-texto); font-size: 13px; display: flex; align-items: center; gap: 10px; padding: 0 10px; text-align: left; }
.uf .uf-bairro-op:hover, .uf .uf-bairro-op--on { background: var(--uf-azul-18); }
.uf .uf-bairro-op[aria-disabled="true"] { opacity: .5; cursor: default; }
.uf .uf-caixa { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--capi-texto-4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--capi-texto); }
.uf .uf-bairro-op--on .uf-caixa { background: var(--capi-azul); border-color: var(--capi-azul); }
.uf .uf-bairro-nome { flex: 1; }
.uf .uf-sugerido { font-size: 10px; color: var(--capi-texto-3); }
.uf .uf-sg { position: absolute; top: 70px; left: 0; right: 0; z-index: 5; background: var(--capi-campo); border: 1px solid var(--capi-borda); border-radius: var(--capi-r-botao); padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.uf .uf-sg-op { border: 0; border-radius: 7px; background: transparent; color: var(--capi-texto); font-size: 13px; padding: 8px 10px; text-align: left; }
.uf .uf-sg-op[aria-selected="true"] { background: var(--uf-azul-28); }

/* CPF bloqueado */
.uf .uf-cpf-bloqueado, .uf .uf-cnpj-bloqueado { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--capi-borda); border-radius: var(--capi-r-botao); background: var(--capi-sub); }
.uf .uf-cpf-bloq-tit { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.uf .uf-btn-sec { height: 40px; padding: 0 16px; border-radius: var(--capi-r-botao); border: 1px solid var(--capi-azul); background: var(--uf-azul-18); color: var(--capi-texto); font-size: 13px; font-weight: 600; }
.uf .uf-btn-sec:hover { background: var(--uf-azul-35); }

/* Localizar, energia e cota */
.uf .uf-acoes { display: flex; flex-direction: column; gap: 8px; }
.uf .uf-localizar { height: var(--capi-h-botao); width: 100%; border: 1px solid var(--capi-azul); border-radius: var(--capi-r-botao); background: var(--capi-azul); color: var(--capi-texto); font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 24px var(--uf-azul-28); padding: 0 12px; }
.uf .uf-localizar:hover { background: var(--capi-azul-hover); }
.uf .uf-localizar--sem-aceite, .uf .uf-localizar--sem-energia, .uf .uf-localizar--sem-cota, .uf .uf-localizar--cpf-bloqueado { background: transparent; box-shadow: none; }
.uf .uf-localizar--sem-aceite:hover, .uf .uf-localizar--sem-energia:hover, .uf .uf-localizar--sem-cota:hover, .uf .uf-localizar--cpf-bloqueado:hover { background: var(--uf-azul-14); }
.uf .uf-localizar--sem-energia { cursor: default; }
.uf .uf-localizar--carregando { cursor: progress; }
.uf .uf-loc-ic { display: inline-flex; }
.uf .uf-gira { animation: uf-spin .8s linear infinite; }
.uf .uf-energia-bloco { display: flex; flex-direction: column; gap: 6px; }
.uf .uf-energia-cab { line-height: normal; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; }
.uf .uf-energia-rot { display: flex; align-items: center; gap: 6px; color: var(--capi-texto-2); }
.uf .uf-energia-raio { color: var(--capi-azul-claro); }
.uf .uf-energia-bloco--baixa .uf-energia-raio { color: var(--capi-ouro); }
.uf .uf-energia-pct { color: var(--capi-texto); font-variant-numeric: tabular-nums; }
.uf .uf-energia-status { color: var(--capi-texto-3); }
.uf .uf-energia { position: relative; height: 8px; border-radius: var(--capi-r-pilula); background: var(--capi-campo); border: 1px solid var(--capi-linha); overflow: hidden; }
.uf .uf-energia-fill { position: absolute; inset: 0; border-radius: var(--capi-r-pilula); background: var(--capi-azul); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .6s ease; }
.uf .uf-energia-bloco--baixa .uf-energia-fill { background: var(--capi-ouro); }
.uf .uf-energia-marca { position: absolute; top: 0; bottom: 0; left: var(--custo, 20%); width: 1px; background: rgba(255, 255, 255, .55); }
.uf .uf-cota { display: flex; flex-direction: column; gap: 5px; }
.uf .uf-cota-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--capi-texto-3); white-space: nowrap; }
.uf .uf-cota-txt { color: var(--capi-texto-2); }
.uf .uf-cota-barra { position: relative; height: 4px; border-radius: var(--capi-r-pilula); background: var(--capi-linha); overflow: hidden; }
.uf .uf-cota-fill { position: absolute; inset: 0; border-radius: var(--capi-r-pilula); background: var(--capi-azul); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .4s ease; }

/* ---------- secoes de baixo ---------- */
.uf .uf-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--capi-linha); }
.uf .uf-rec { margin-top: 6px; }
.uf .uf-sec-cab { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.uf .uf-rec-toggle { height: 24px; padding: 0; border: 0; background: transparent; color: var(--capi-texto-3); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; align-self: flex-start; }
.uf .uf-rec-seta { transform: rotate(-90deg); transition: transform .2s; }
.uf .uf-rec--aberta .uf-rec-seta { transform: none; }
.uf .uf-rec-qtd { padding: 0 6px; border-radius: var(--capi-r-pilula); background: var(--capi-campo); color: var(--capi-texto-2); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.uf .uf-rec-limpar { height: 24px; padding: 0; border: 0; background: transparent; color: var(--capi-texto-2); font-size: 12px; }
.uf .uf-rec-limpar--confirma { color: var(--capi-ouro-texto); font-weight: 600; }
.uf .uf-rec-corpo { display: flex; flex-direction: column; gap: 6px; }
.uf .uf-rec-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.uf .uf-rec-caixa { border: 1px solid var(--capi-linha); border-radius: 9px; padding: 6px 8px; display: flex; flex-direction: column; }
.uf .uf-rec-num { font-size: 15px; font-variant-numeric: tabular-nums; }
.uf .uf-rec-num--ok { color: var(--capi-sucesso-texto); }
.uf .uf-rec-rot { font-size: 10.5px; color: var(--capi-texto-3); white-space: nowrap; }
.uf .uf-rec-busca { position: relative; }
.uf .uf-rec-q { height: 36px; width: 100%; border-radius: 9px; border: 1px solid var(--capi-linha); background: var(--capi-campo); color: var(--capi-texto); padding: 0 32px; font-size: 13px; outline: none; }
.uf .uf-rec-lupa { position: absolute; left: 11px; top: 11px; color: var(--capi-texto-3); pointer-events: none; }
.uf .uf-rec-q-x { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--capi-texto-2); display: flex; align-items: center; justify-content: center; padding: 0; }
.uf .uf-rec-filtros { display: flex; gap: 4px; flex-wrap: wrap; }
.uf .uf-pilula { height: 26px; padding: 0 10px; border-radius: var(--capi-r-pilula); border: 1px solid var(--capi-borda); background: transparent; color: var(--capi-texto); font-size: 11.5px; }
.uf .uf-pilula[aria-pressed="true"] { background: var(--capi-azul); border-color: var(--capi-azul); }
.uf .uf-rec-lista { display: flex; flex-direction: column; gap: 6px; }
.uf .uf-rec-card { width: 100%; border: 1px solid var(--capi-linha); background: var(--capi-sub); border-radius: var(--capi-r-botao); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; text-align: left; color: var(--capi-texto); }
.uf .uf-rec-card:hover { border-color: var(--capi-azul); }
.uf .uf-rec-l1, .uf .uf-rec-l3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }
.uf .uf-rec-l1 { color: var(--capi-texto-3); }
.uf .uf-rec-cod { padding: 1px 7px; border-radius: var(--capi-r-pilula); background: var(--capi-campo); font-variant-numeric: tabular-nums; }
.uf .uf-rec-end { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uf .uf-rec-prop { font-size: 11px; color: var(--capi-texto-2); }
.uf .uf-rec-prop-rot { color: var(--capi-texto-3); }
.uf .uf-st { display: flex; align-items: center; gap: 6px; }
.uf .uf-st--ok { color: var(--capi-sucesso); }
.uf .uf-st--deb { color: var(--capi-ouro-texto); }
.uf .uf-st-ponto { width: 6px; height: 6px; border-radius: var(--capi-r-pilula); background: currentColor; }
.uf .uf-rec-tag { padding: 1px 8px; border-radius: var(--capi-r-pilula); border: 1px solid var(--capi-azul); color: var(--capi-texto); }
.uf .uf-rec-lembrete { font-size: 11px; color: var(--capi-ouro-texto); display: flex; align-items: center; gap: 6px; }
.uf .uf-rec-todas { height: 30px; padding: 0; border: 0; background: transparent; color: var(--capi-texto-2); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }

/* LGPD */
.uf .uf-lgpd { margin-top: auto; gap: 10px; font-size: 12px; line-height: 1.5; color: var(--uf-lgpd-texto); }
.uf .uf-lgpd-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uf .uf-lgpd-tit { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--capi-texto-3); }
.uf .uf-lgpd-toggle, .uf .uf-ver-termo { height: 24px; padding: 0; border: 0; background: transparent; color: var(--capi-texto-2); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.uf .uf-lgpd-det { display: flex; flex-direction: column; gap: 8px; }
.uf .uf-lgpd-det b { font-weight: 500; color: var(--capi-texto); }
.uf .uf-aceitar { height: 38px; width: 100%; border-radius: var(--capi-r-campo); border: 1px solid var(--uf-aceite-borda); background: var(--uf-aceite-fundo); color: var(--uf-aceite-texto); font-weight: 500; font-size: 13px; }
.uf .uf-aceito { border: 1px solid var(--uf-ok-borda); background: var(--uf-ok-fundo); border-radius: var(--capi-r-campo); padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uf .uf-aceito-esq { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--capi-sucesso-texto); font-size: 12px; }
.uf .uf-aceito-col { display: flex; flex-direction: column; min-width: 0; }
.uf .uf-aceito-txt { white-space: nowrap; }
.uf .uf-aceito-prot { font-size: 11px; color: var(--capi-texto-3); }
.uf .uf-ver-termo { height: 26px; padding: 0 4px; flex-shrink: 0; }

/* ---------- estado recolhido (68 px) ---------- */
.uf .uf-mini { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.uf .uf-mini-abrir { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--capi-azul); background: var(--capi-azul); color: var(--capi-texto); display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 8px 20px var(--uf-azul-35); }
.uf .uf-mini-resumo { border: 0; background: transparent; color: var(--capi-texto-2); font-size: 13px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 52vh; padding: 0; }
.uf .uf-mini-medidor, .casca-mini-extra .uf-mini-medidor { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.uf .uf-mini-barra, .casca-mini-extra .uf-mini-barra { position: relative; width: 8px; height: 64px; border-radius: var(--capi-r-pilula); background: var(--capi-campo); border: 1px solid var(--capi-linha); overflow: hidden; }
.uf .uf-mini-fill, .casca-mini-extra .uf-mini-fill { position: absolute; inset: 0; border-radius: var(--capi-r-pilula); background: var(--capi-azul); transform-origin: center bottom; transform: scaleY(var(--p, 0)); transition: transform .6s ease; }
.uf .uf-mini-medidor--baixa .uf-mini-fill, .casca-mini-extra .uf-mini-medidor--baixa .uf-mini-fill { background: var(--capi-ouro); }
.uf .uf-mini-valor, .casca-mini-extra .uf-mini-valor { font-size: 14px; font-variant-numeric: tabular-nums; }
.uf .uf-mini-rotulo, .casca-mini-extra .uf-mini-rotulo { font-size: 10px; color: var(--capi-texto-3); }

/* area de toque ampliada sem mudar o desenho */
.uf .uf-hit, .uf .uf-chip, .uf .uf-pilula { position: relative; }

@keyframes uf-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4%); }
}
@keyframes uf-wave {
  0%, 100% { opacity: .15; }
  35%, 60% { opacity: 1; }
}
@keyframes uf-spin {
  to { transform: rotate(360deg); }
}

@media (pointer: coarse) {
  .uf .uf-kbd { display: none; }
  .uf .uf-seg-bt { min-height: 44px; }
  .uf .uf-recolher, .uf .uf-mic { width: 44px; height: 44px; }
  .uf .uf-q { padding-right: 60px; }
  .uf .uf-campo-acoes { right: 1px; }
  .uf .uf-in, .uf .uf-rec-q { min-height: 44px; }
  .uf .uf-refinar-btn, .uf .uf-btn-sec, .uf .uf-aceitar, .uf .uf-bairro-op, .uf .uf-ac-op, .uf .uf-sg-op { min-height: 44px; }
  .uf .uf-mini-resumo { min-width: 44px; }
  .uf .uf-hit::after, .uf .uf-chip::after, .uf .uf-pilula::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .uf *, .uf *::before, .uf *::after { animation: none !important; transition: none !important; }
}
.uf .uf-modulo-aviso { margin: 8px 0 0; padding: 8px 12px; border: 1px solid var(--capi-ouro-texto); border-radius: 8px; color: var(--capi-ouro-texto); }
.uf .uf-modulo-aviso[hidden] { display: none; }
/* 09/11/2026.. frase sob as abas.. altura de duas linhas reservada (sem salto de layout), 12 px do token de nota, so opacity */
.uf .uf-aba-dica { margin: 6px 0 0; min-height: calc(2 * 1.333em); font-size: 12px; line-height: 1.333; color: var(--capi-texto-3); animation: uf-dica-a 150ms ease-out; }
.uf .uf-aba-dica[data-par="1"] { animation-name: uf-dica-b; }
@keyframes uf-dica-a { from { opacity: 0; } to { opacity: 1; } }
@keyframes uf-dica-b { from { opacity: 0; } to { opacity: 1; } }

/* ui-ficha-barra.css (painel novo, frente C, 06/11/2026).. barra superior da ficha, estados vazio e carregando, alerta de busca imprecisa,
   popovers (fundo e conta) e barra fixa mobile. Prefixo .ub-. Cores só por tokens var(--capi-*) (design-tokens.css) e pelos --ub-* daqui.
   Valor dinâmico só por CSSOM (--ub-img, --ub-mini, --ub-suporte-bottom). Animação só de transform e opacity. */

:root {
  --ub-suporte-bottom: 20px;           /* o botão Suporte lê esta variável; o JS sobe para 88px com a barra fixa */
  --ub-btn-bg: rgba(15, 28, 55, .8);
  --ub-btn-borda: #2a3a5c;
  --ub-btn-texto: #e2e8f2;
  --ub-vazio-sub: #a9b6cb;
  --ub-ambar-borda: rgba(245, 185, 66, .55);
  --ub-ambar-fundo: rgba(40, 32, 12, .88);
  --ub-ambar-texto: #e8dcc0;
  --ub-ambar-linha: #5a4a26;
  --ub-espera-borda: rgba(245, 185, 66, .45);
  --ub-espera-fundo: rgba(14, 24, 46, .9);
  --ub-espera-icone: rgba(245, 185, 66, .14);
  --ub-pop-borda: rgba(22, 82, 217, .5);
  --ub-pop-sombra: 0 24px 60px rgba(0, 0, 0, .5);
  --ub-pulso: rgba(22, 82, 217, .16);
  --ub-planos-fundo: rgba(22, 82, 217, .18);
  --ub-cartao-borda: #1d2943;
  --ub-sk-1: #16223b;
  --ub-sk-2: #22345a;
  --ub-fixa-fundo: rgba(11, 23, 48, .96);
  --ub-grade-mini: rgba(120, 150, 210, .18);
  --ub-veu: linear-gradient(180deg, rgba(11, 25, 52, .62) 0%, rgba(12, 22, 44, .74) 70%, rgba(9, 16, 32, .86) 100%);
  --ub-veu-liso: linear-gradient(180deg, rgba(11, 25, 52, .88) 0%, rgba(12, 22, 44, .92) 70%, rgba(9, 16, 32, .96) 100%);
}

/* ---------- fundo do painel (a imagem vem de --ub-img, por CSSOM) ---------- */
.ub-fundo {
  background-color: var(--capi-fundo);
  background-image:
    linear-gradient(var(--capi-grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--capi-grade) 1px, transparent 1px),
    var(--ub-veu),
    var(--ub-img, none);
  background-size: 32px 32px, 32px 32px, cover, cover;
  background-position: center;
}
.ub-fundo[data-ub-fundo="nenhum"] {
  background-image:
    linear-gradient(var(--capi-grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--capi-grade) 1px, transparent 1px),
    var(--ub-veu-liso);
  background-size: 32px 32px, 32px 32px, cover;
}

/* ---------- raiz ---------- */
.ub-raiz {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  min-height: 100%;
  box-sizing: border-box;
  color: var(--capi-texto);
  font-family: var(--capi-fonte);
  line-height: normal;                 /* o desenho nao fixa entrelinha fora dos textos corridos (esses levam a sua); o 1.5 do corpo deixava os rotulos mais altos */
}
#ficha-barra-nova.ub-raiz { padding: 0; flex: 0 0 auto; min-height: 0; min-width: 0; }
#ficha-barra-nova.ub-raiz[data-estado="vazio"] { flex: 1 0 auto; }   /* na pagina o #saida ja tem os 14 px do desenho; sem isto a barra descia e recuava 14 px a mais */
.ub-raiz *, .ub-raiz *::before, .ub-raiz *::after { box-sizing: border-box; }
.ub-raiz [hidden], .ub-barra-fixa[hidden] { display: none !important; }
.ub-raiz button, .ub-raiz a, .ub-barra-fixa a { font-family: var(--capi-fonte); }
.ub-raiz :focus-visible, .ub-barra-fixa a:focus-visible {
  outline: 2px solid var(--capi-azul-claro);
  outline-offset: 2px;
}

/* ---------- barra superior ---------- */
.ub-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ub-resumo {
  min-height: 36px;
  max-width: 100%;
  padding: 0 14px;
  border-radius: var(--capi-r-pilula);
  border: 1px solid var(--ub-btn-borda);
  background: var(--ub-btn-bg);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--capi-texto-2);
}
.ub-resumo-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-ico { flex-shrink: 0; }
.ub-ico--azul { color: var(--capi-azul); }
.ub-ico--ouro { color: var(--capi-ouro); }
.ub-nao-este {
  height: 36px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--capi-ouro-texto);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.ub-acoes { display: flex; gap: 8px; flex-wrap: wrap; max-width: 100%; }
.ub-dinamico { display: contents; }
.ub-btn, .ub-planos {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--capi-r-campo);
  border: 1px solid var(--ub-btn-borda);
  background: var(--ub-btn-bg);
  color: var(--ub-btn-texto);
  font-size: 13px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.ub-btn:hover, .ub-btn--on { border-color: var(--capi-azul); }
.ub-fundo-btn { color: var(--capi-texto-2); }
.ub-imoveis { color: var(--capi-texto-2); text-decoration: none; white-space: nowrap; }   /* link com cara de botao ghost; 7 botoes quebram em linhas pelo flex-wrap de .ub-acoes */
.ub-sair { padding: 0 12px; color: var(--capi-texto-2); }
.ub-planos {
  position: relative;
  border-color: var(--capi-azul);
  background: var(--ub-planos-fundo);
  color: var(--capi-texto);
  font-weight: 400;
}
.ub-planos::after {                    /* o anel pulsante: só opacity (design animava box-shadow) */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 3px var(--ub-pulso);
  opacity: 0;
  animation: ub-pulse 2.8s ease-in-out infinite;
}
.ub-badge {
  padding: 1px 8px;
  border-radius: var(--capi-r-pilula);
  background: var(--capi-azul);
  color: var(--capi-texto);
  font-size: 11px;
  font-weight: 400;
}
.ub-nova {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--capi-r-pilula);
  border: 1px solid var(--capi-azul);
  background: var(--capi-azul);
  color: var(--capi-texto);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.ub-nova:hover { background: var(--capi-azul-hover); border-color: var(--capi-azul-hover); }

/* ---------- popovers ---------- */
.ub-caixa { position: relative; }
.ub-pop {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 30;
  background: linear-gradient(180deg, var(--capi-painel-1) 0%, var(--capi-painel-2) 100%);
  border: 1px solid var(--ub-pop-borda);
  border-radius: var(--capi-r-cartao);
  box-shadow: var(--ub-pop-sombra);
  color: var(--capi-texto);
}
.ub-fundo-pop { width: 340px; max-width: calc(100vw - 24px); padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.ub-fundo-sec { display: flex; flex-direction: column; gap: 8px; }
.ub-rotulo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--capi-texto-3); }
.ub-fundo-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ub-fundo-op {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0;
  border-radius: 10px;
  border: 2px solid transparent;
  background-color: var(--capi-campo);
  background-image: var(--ub-mini, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  cursor: pointer;
}
.ub-fundo-op--nenhum {
  background-image:
    linear-gradient(var(--ub-grade-mini) 1px, transparent 1px),
    linear-gradient(90deg, var(--ub-grade-mini) 1px, transparent 1px);
}
.ub-fundo-op[aria-pressed="true"] { border-color: var(--capi-azul); }
.ub-fundo-nome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 6px;
  font-size: 10.5px;
  line-height: normal;
  color: var(--capi-texto);
  background: linear-gradient(0deg, rgba(5, 10, 22, .85), rgba(5, 10, 22, 0));
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ub-check {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: var(--capi-r-pilula);
  background: var(--capi-azul);
  color: var(--capi-texto);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ub-nota { font-size: 11.5px; color: var(--capi-texto-3); line-height: 1.45; }
.ub-pop.ub-pop--esq { left: 0; right: auto; }   /* 08/11/2026.. o JS liga quando o popover sairia pela borda esquerda de quem recorta */
.ub-conta-pop { width: 280px; max-width: calc(100vw - 24px); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.ub-atalho {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--capi-texto);
  text-decoration: none;
}
button.ub-atalho { width: 100%; min-height: 44px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.ub-atalho:hover { background: var(--ub-planos-fundo); }
.ub-atalho-tit { font-size: 14px; font-weight: 500; }
.ub-atalho-desc { font-size: 12px; color: var(--capi-texto-3); }

/* ---------- a barra e sempre a primeira coisa da area da ficha (07/11/2026, bug do dono: "esse menu some") ---------- */
/* o resultado da busca por contato (#reversa-saida) e posto no INICIO do #saida pelo localizador, antes de a barra montar.. sem isto a barra descia para baixo do
   bloco Pessoa (y de 2220 px) e sumia da tela. order -1 vale em qualquer ordem de montagem. Com o resultado na tela, a capivara do vazio sai e a barra nao cresce. */
body.ub-ponte #saida > #ficha-barra-nova { order: -1; }
body.ub-ponte.com-reversa #ficha-barra-nova.ub-raiz[data-estado="vazio"] { flex: 0 0 auto; }
body.ub-ponte.com-reversa #ficha-barra-nova .ub-vazio { display: none; }

/* ---------- estado vazio ---------- */
/* a vitrine logada ainda monta o painel explicativo antigo (Como funciona) no vazio; o desenho tem so a capivara e a frase.. fica escondido
   (o no continua no DOM; a especificidade vence a regra da casca) */
body.ub-ponte.ui-novo[data-app].sem-consulta .ferramenta-boasvindas.ap { display: none; }
.ub-vazio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 40px 20px;
  color: var(--ub-vazio-sub);
}
.ub-logo-g { position: relative; display: inline-block; flex-shrink: 0; height: 56px; aspect-ratio: 960 / 520; }
.ub-capivara { position: absolute; inset: 0; width: 100%; height: 100%; animation: ub-bob 3.2s ease-in-out infinite; }
.ub-ondas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ub-onda { fill: none; stroke: var(--capi-azul); stroke-width: 30; stroke-linecap: round; animation: ub-onda 2.4s ease-in-out infinite; }
.ub-onda--2 { animation-delay: .35s; }
@keyframes ub-onda { 0%, 100% { opacity: .15; } 35%, 60% { opacity: 1; } }
.ub-vazio-tit { font-size: 18px; font-weight: 500; color: var(--capi-texto); }
.ub-vazio-sub { font-size: 14px; max-width: 420px; line-height: 1.5; }   /* sem balance.. o design preenche a 1a linha (420px) e a 2a leva o resto */

/* ---------- alerta de busca imprecisa ---------- */
.ub-alerta {
  border: 1px solid var(--ub-ambar-borda);
  background: var(--ub-ambar-fundo);
  border-radius: var(--capi-r-cartao);
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ub-alerta-ico { margin-top: 2px; }
.ub-alerta-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ub-alerta-titulo { font-size: 15px; font-weight: 500; color: var(--capi-texto); }
.ub-alerta-texto { font-size: 13px; line-height: 1.5; color: var(--ub-ambar-texto); }
.ub-dicas { display: flex; flex-direction: column; gap: 4px; }
.ub-dica { display: flex; gap: 8px; font-size: 13px; color: var(--capi-ouro-texto); line-height: 1.45; }
.ub-dica-m { flex-shrink: 0; }
.ub-alerta-acoes { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.ub-refinar {
  height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid var(--capi-azul);
  background: var(--capi-azul);
  color: var(--capi-texto);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ub-refinar:hover { background: var(--capi-azul-hover); border-color: var(--capi-azul-hover); }
.ub-este {
  height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--ub-ambar-linha);
  background: transparent;
  color: var(--ub-ambar-texto);
  font-size: 13px;
  cursor: pointer;
}

/* ---------- carregando ---------- */
.ub-carregando { display: flex; flex-direction: column; gap: 12px; }
.ub-carregando-linha { display: block; }   /* 09/11/2026.. a linha leva a barra de evolução (barra-pesquisa) */
.ub-espera {
  border: 1px solid var(--ub-espera-borda);
  background: var(--ub-espera-fundo);
  border-radius: var(--capi-r-cartao);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ub-espera-cab { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ub-espera-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ub-espera-icone);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ub-espera-txt { display: flex; flex-direction: column; gap: 2px; }
.ub-espera-tit { font-size: 15px; font-weight: 500; color: var(--capi-texto); }
.ub-espera-sub { font-size: 13px; color: var(--capi-texto-2); }

/* esqueleto: o brilho é um gradiente que desliza por transform (o design animava background-position) */
.ub-esqueleto { display: flex; flex-wrap: wrap; gap: 12px; }
.ub-sk-cartao {
  border: 1px solid var(--ub-cartao-borda);
  border-radius: var(--capi-r-cartao);
  background: var(--capi-cartao);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ub-sk-lateral { flex: 1 1 280px; max-width: 340px; min-height: 420px; }
.ub-sk-direita { flex: 999 1 480px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ub-sk-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ub-sk { position: relative; overflow: hidden; height: 12px; border-radius: 8px; background: var(--ub-sk-1); }
.ub-sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--ub-sk-2) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: ub-skel 1.2s linear infinite;
}
.ub-sk--w25 { width: 25%; } .ub-sk--w30 { width: 30%; } .ub-sk--w40 { width: 40%; } .ub-sk--w50 { width: 50%; }
.ub-sk--w60 { width: 60%; } .ub-sk--w70 { width: 70%; } .ub-sk--w80 { width: 80%; } .ub-sk--w90 { width: 90%; }
.ub-sk--w100 { width: 100%; }
.ub-sk--h18 { height: 18px; } .ub-sk--h22 { height: 22px; } .ub-sk--h44 { height: 44px; }
.ub-sk--h48 { height: 48px; } .ub-sk--h60 { height: 60px; }

.ub-slot { min-width: 0; }
.ub-slot:empty { display: none; }   /* vazio nao entra no gap do flex (abria 12 px a mais entre a barra e a ficha) */

/* ---------- barra fixa mobile (WhatsApp e Ligar) ---------- */
.ub-barra-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--ub-fixa-fundo);
  border-top: 1px solid var(--capi-linha);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}
.ub-fixa-wa, .ub-fixa-ligar {
  height: 48px;
  border-radius: 12px;
  color: var(--capi-texto);
  text-decoration: none;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ub-fixa-wa { background: var(--capi-azul); font-weight: 500; }
.ub-fixa-ligar { border: 1px solid var(--capi-borda); }
@media (min-width: 900px) { .ub-barra-fixa { display: none !important; } }
@media (max-width: 899.98px) {
  body.ub-com-barra-fixa { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ---------- toque: alvos de 44 px sem mudar o desenho no desktop ---------- */
@media (pointer: coarse) {
  .ub-btn, .ub-planos, .ub-nova, .ub-nao-este, .ub-resumo, .ub-refinar, .ub-este, .ub-atalho { min-height: 44px; }
  .ub-nao-este { min-width: 44px; }
}
@media (max-width: 899.98px) {   /* sem espaço à direita: o popover ancora na barra inteira, nunca fora da tela */
  .ub-topo { position: relative; }
  .ub-caixa { position: static; }
  .ub-pop { top: calc(100% + 8px); right: 0; left: auto; max-width: 100%; }
}

/* ---------- movimento ---------- */
@keyframes ub-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes ub-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes ub-skel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .ub-planos::after, .ub-capivara, .ub-onda, .ub-sk::after { animation: none !important; }
  .ub-raiz *, .ub-raiz *::before, .ub-raiz *::after { transition: none !important; }
}

/* ui-ficha.css (painel novo, frente cartao do proprietario, menu e abas Geral, Contato e Ponto, 06/11/2026).
   Prefixo .uc-. Cores so por tokens var(--capi-*) (design-tokens.css / ui-tokens.css) e pelos derivados do bloco :root abaixo.
   Nada de hex fora de :root, nada de style= no HTML. Peso de fonte maximo 600. */
:root {
  --uc-linha-cartao: #1d2943;
  --uc-proximo-fundo: #0f1a33;
  --uc-proximo-brilho: rgba(22, 82, 217, .32);
  --uc-texto-pitch: #e2e8f2;
  --uc-aviso-fundo: rgba(245, 185, 66, .12);
  --uc-sombra-ativa: 0 10px 24px rgba(22, 82, 217, .35);
  --uc-aba-fundo: rgba(14, 24, 46, .78);
  --uc-papel: #ffffff;
  --uc-tinta: #101828;
  --uc-texto-sub: #a9b6cb;   /* subtitulo dos cartoes, kpis e atalhos no prototipo (169,182,203) */
}
.uc-ficha, .uc-ficha * { box-sizing: border-box; }
.uc-ficha { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; font-family: var(--capi-fonte); font-weight: 400; color: var(--capi-texto); }
.uc-ficha button, .uc-ficha select, .uc-ficha a { font-family: inherit; }
/* o prototipo mede tudo com line-height normal; o corpo da pagina viva herda 1.5 e empurrava cada linha do cartao e dos cartoes da aba (print 09) */
.uc-cartao, .uc-menu, .uc-rodape-menu, .uc-geral, .uc-card--contatos, .uc-ponto, .uc-card-tit, .uc-proximo-tit, .uc-grupo-tit, .uc-ponto-tit, .uc-btn, .uc-mini, .uc-tile, .uc-raio, .uc-cpf-toggle, .uc-selo, .uc-avise { line-height: normal; }
.uc-ficha :focus-visible { outline: 2px solid var(--capi-azul-link); outline-offset: 2px; }
.uc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uc-ic { display: inline-flex; flex-shrink: 0; }
.uc-ic svg { width: 1em; height: 1em; }
.uc-vazio[hidden] { display: none; }

/* ---------- cartao do proprietario ---------- */
.uc-cartao { flex: 1 1 280px; max-width: 340px; min-width: 0; background: var(--capi-cartao); border: 1px solid var(--uc-linha-cartao); border-radius: var(--capi-r-cartao); overflow: hidden; display: flex; flex-direction: column; }
.uc-cartao-topo { padding: 16px; display: flex; flex-direction: column; gap: 10px; border-bottom: 3px solid var(--capi-azul); }
.uc-rot-s { font-size: 12px; color: var(--capi-texto-3); }
.uc-codigo { font-size: 24px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .02em; overflow-wrap: anywhere; }
.uc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-selo { min-height: 28px; padding: 0 10px; border-radius: var(--capi-r-pilula); border: 1px solid var(--capi-borda); background: transparent; color: var(--capi-texto-2); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.uc-selo .uc-ic { font-size: 12px; }
.uc-selo--atencao { border-color: var(--capi-ouro); background: var(--uc-aviso-fundo); color: var(--capi-ouro-texto); cursor: pointer; }
.uc-selo--atencao:hover { background: transparent; }
.uc-selo--ok { border-color: var(--capi-sucesso); color: var(--capi-sucesso-texto); }
.uc-cartao-corpo { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.uc-rot { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--capi-texto-3); }
.uc-nome-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -6px; }
.uc-nome-linha .mais-nome { min-height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--capi-borda); background: transparent; color: var(--capi-texto-2); font: 400 12px/1 var(--capi-fonte); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.uc-nome-linha .mais-nome:hover { border-color: var(--capi-azul); color: var(--capi-texto); }
.uc-nome-linha .mais-nome .ic { width: 14px; height: 14px; }
.uc-nome { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.uc-doc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.uc-doc-tipo { padding: 2px 7px; border-radius: 6px; background: var(--capi-campo); color: var(--capi-texto-3); font-size: 11px; }
.uc-doc-num { font-variant-numeric: tabular-nums; color: var(--capi-texto-2); overflow-wrap: anywhere; }
.uc-mini { min-height: 28px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--capi-borda); background: transparent; color: var(--capi-texto-2); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.uc-mini:hover { border-color: var(--capi-azul); color: var(--capi-texto); }
.uc-mini[hidden] { display: none; }
.uc-mais-nome:empty { display: none; }
.uc-cpf { border: 1px solid var(--uc-linha-cartao); border-radius: var(--capi-r-botao); background: var(--capi-sub); display: flex; flex-direction: column; }
.uc-cpf[hidden] { display: none; }
.uc-cpf-toggle .uc-ic { font-size: 15px; }
.uc-cpf-toggle { min-height: 38px; border: 0; background: transparent; color: var(--capi-texto-2); font-size: 13px; display: flex; align-items: center; gap: 8px; padding: 0 12px; cursor: pointer; text-align: left; }
.uc-cpf-painel { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--capi-texto-2); }
.uc-cpf-painel[hidden] { display: none; }
.uc-cpf-rot { font-size: 12px; color: var(--capi-texto-2); }
.uc-sel { min-height: 40px; border-radius: var(--capi-r-campo); border: 1px solid var(--capi-borda); background: var(--capi-campo); color: var(--capi-texto); font-size: 13px; padding: 0 10px; }
.uc-sel[aria-invalid="true"] { border-color: var(--capi-erro); }
.uc-cpf-nota { margin: 0; line-height: 1.45; color: var(--capi-texto-2); }
.uc-cpf-msg { margin: 0; font-size: 12px; color: var(--capi-texto-2); }
.uc-cpf-msg:empty { display: none; }
.uc-end-titular { margin: 0; display: flex; gap: 8px; font-size: 13px; color: var(--capi-texto-2); line-height: 1.45; }
.uc-end-titular .uc-ic { margin-top: 2px; color: var(--capi-texto-3); font-size: 15px; }
.uc-nota-aviso { margin: 0; display: flex; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--capi-ouro-texto); }
.uc-nota-aviso .uc-ic { margin-top: 2px; }

/* botoes */
.uc-btn { min-height: 40px; padding: 0 14px; border-radius: var(--capi-r-botao); border: 1px solid var(--capi-borda); background: transparent; color: var(--capi-texto); font-size: 14px; font-weight: 400; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .15s, border-color .15s; }
.uc-btn:hover { border-color: var(--capi-azul); }
.uc-btn .uc-ic { font-size: 16px; }
.uc-btn--pri { background: var(--capi-azul); border-width: 0; font-weight: 500; }   /* sem borda como no desenho: o botao cheio mede 160 px, nao 162 */
.uc-btn--pri:hover { background: var(--capi-azul-hover); }
.uc-btn--grande { min-height: 44px; }
.uc-btn--cheio { width: 100%; }
.uc-btn--mini { min-height: 34px; padding: 0 12px; font-size: 13px; font-weight: 400; border-radius: var(--capi-r-campo); }
.uc-btn--acao { font-size: 13px; font-weight: 400; padding: 0 6px; min-width: 0; white-space: nowrap; }
.uc-btn--acao .uc-ic { display: none; }
.uc-btn[disabled] { opacity: .6; cursor: default; }
.uc-rapido { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.uc-rapido-btns { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.uc-rapido-btns--um { grid-template-columns: 1fr; }
.uc-tel { font-size: 13px; color: var(--capi-texto-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.uc-aviso-linha { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--capi-texto-2); line-height: 1.45; }
.uc-aviso-linha .uc-ic { margin-top: 2px; }

/* indice de oportunidade */
.uc-nota { display: flex; align-items: center; gap: 14px; border: 1px solid var(--uc-linha-cartao); background: var(--capi-sub); border-radius: 12px; padding: 12px; }
.uc-nota-anel { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.uc-anel { display: block; }
.uc-anel-trilho { fill: none; stroke: var(--capi-linha); stroke-width: 6; }
.uc-anel-arco { fill: none; stroke: var(--capi-azul); stroke-width: 6; stroke-linecap: round; }
.uc-nota-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-variant-numeric: tabular-nums; }
.uc-nota-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uc-nota-niv { font-size: 15px; font-weight: 500; }
.uc-nota-sub { font-size: 12px; color: var(--uc-texto-sub); }
.uc-acoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.uc-marca { margin: 0; font-size: 11px; color: var(--capi-texto-4); line-height: normal; }
.uc-marca:empty { display: none; }

/* esqueleto.. so opacidade */
.uc-esq { display: block; height: 12px; border-radius: 6px; background: var(--capi-linha); animation: uc-pulsa 1.2s ease-in-out infinite; width: 60%; margin: 6px 0; }
.uc-esq--g { width: 100%; }
.uc-esq--m { width: 70%; }
.uc-esq--p { width: 40%; }
.uc-esq--anel { width: 72px; height: 72px; border-radius: var(--capi-r-pilula); margin: 0; flex-shrink: 0; }
@keyframes uc-pulsa { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* ---------- menu em grade ---------- */
.uc-direita { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.uc-menu { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; overscroll-behavior-x: contain; padding-bottom: 4px; }   /* UMA linha so (ordem do dono 09/11).. se nao couber, rola de lado */
.uc-aba { min-height: 48px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--uc-linha-cartao); background: var(--uc-aba-fundo); color: var(--capi-texto-2); font-size: 13px; display: flex; flex: 0 0 auto; align-items: center; gap: 10px; cursor: pointer; text-align: left; white-space: nowrap; transition: background .15s, border-color .15s; }
.uc-aba:hover { border-color: var(--capi-azul); }
.uc-aba[aria-selected="true"] { background: var(--capi-azul); border-color: var(--capi-azul); color: var(--capi-texto); box-shadow: var(--uc-sombra-ativa); }
.uc-aba-ic { flex-shrink: 0; }
.uc-aba-t { white-space: nowrap; }
.uc-rodape-menu { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 2px; font-size: 12px; color: var(--capi-texto-3); }
.uc-atualiz { display: flex; align-items: center; gap: 6px; }
.uc-atualiz .uc-ic { font-size: 12px; }
.uc-avise { min-height: 26px; padding: 0; border: 0; background: transparent; color: var(--capi-texto-2); font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.uc-pg { min-width: 0; }
.uc-pg[hidden] { display: none; }

/* ---------- cartoes genericos ---------- */
.uc-geral { display: flex; flex-direction: column; gap: 10px; }
.uc-card { border: 1px solid var(--uc-linha-cartao); border-radius: var(--capi-r-cartao); background: var(--capi-cartao); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.uc-card-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.uc-card-cab--linha { align-items: center; }
.uc-card-cab--coluna { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 2px; }
.uc-card-tit { margin: 0; font-size: 16px; font-weight: 500; }
.uc-card-sub { font-size: 12px; color: var(--capi-texto-3); }
.uc-card-nota { margin: 0; font-size: 12px; color: var(--uc-texto-sub); }
.uc-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }   /* estica: os 4 atalhos dividem a altura do cartao de sinais, como no prototipo */

/* proximo passo */
.uc-proximo { border: 1px solid var(--capi-azul); border-radius: var(--capi-r-cartao); background: linear-gradient(135deg, var(--uc-proximo-brilho) 0%, transparent 70%), var(--uc-proximo-fundo); padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.uc-proximo-corpo { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.uc-proximo-ic { width: 36px; height: 36px; border-radius: var(--capi-r-botao); background: var(--capi-azul); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.uc-proximo-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.uc-proximo .uc-rot-s { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--capi-texto-2); }
.uc-proximo-tit { margin: 0; font-size: 17px; font-weight: 500; }
.uc-proximo-sub { margin: 0; font-size: 13px; color: var(--capi-texto-2); line-height: 1.45; }
.uc-proximo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.uc-proximo-acoes .uc-btn { min-height: 42px; }
.uc-proximo-acoes .uc-btn--pri { padding: 0 16px; }
.uc-proximo-acoes .uc-btn .uc-ic { font-size: 15px; }
.uc-proximo-ic .uc-ic { font-size: 18px; }

/* kpis */
.uc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--uc-linha-cartao); border-radius: var(--capi-r-cartao); background: var(--capi-cartao); overflow: hidden; }
.uc-kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--capi-linha); min-width: 0; }
.uc-kpi:last-child { border-right: 0; }
.uc-kpi-rot { font-size: 12px; color: var(--capi-texto-3); }
.uc-kpi-val { font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
.uc-kpi-sub { font-size: 12px; color: var(--uc-texto-sub); }

/* sinais */
.uc-sinais { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--capi-texto-2); }
.uc-sinal { display: flex; gap: 8px; }
.uc-sinal-s { width: 10px; flex-shrink: 0; }
.uc-sinal--p .uc-sinal-s { color: var(--capi-sucesso); }
.uc-sinal--n .uc-sinal-s { color: var(--capi-erro-texto); }
.uc-nota-rodape { margin: 0; font-size: 12px; color: var(--capi-texto-4); line-height: 1.45; }

/* atalhos */
.uc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.uc-tile { border: 1px solid var(--uc-linha-cartao); border-radius: 12px; background: var(--capi-cartao); padding: 12px; min-height: 44px; display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; color: var(--capi-texto); min-width: 0; transition: border-color .15s; }
.uc-tile:hover { border-color: var(--capi-azul); }
.uc-tile--largo { grid-column: 1 / -1; }
.uc-tile-rot { font-size: 12px; color: var(--capi-texto-3); }
.uc-tile-val { font-size: 18px; font-weight: 400; overflow-wrap: anywhere; }
.uc-tile-sub { font-size: 12px; color: var(--uc-texto-sub); }

/* sugestao de abertura */
.uc-pitch { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.uc-pitch-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--uc-linha-cartao); border-radius: var(--capi-r-botao); padding: 10px 12px; background: var(--capi-sub); }
.uc-pitch-txt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--uc-texto-pitch); }
.uc-mini--copia { min-height: 32px; padding: 0 12px; flex-shrink: 0; color: var(--capi-texto); }

/* ---------- contato ---------- */
.uc-card--contatos { gap: 14px; }
.uc-grupo { display: flex; flex-direction: column; gap: 6px; }
.uc-grupo-tit { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--capi-texto-3); }
.uc-contatos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.uc-contato { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--uc-linha-cartao); border-radius: var(--capi-r-botao); padding: 10px 12px; background: var(--capi-sub); }
.uc-contato-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uc-contato-valor { font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.uc-contato-meta { font-size: 12px; color: var(--uc-texto-sub); }
.uc-contato-rotulo { font-size: 12px; color: var(--capi-texto-3); }
.uc-aviso-terceiro { margin: 4px 0 0; display: flex; gap: 6px; font-size: 12px; color: var(--capi-ouro-texto); line-height: 1.4; }
.uc-aviso-terceiro .uc-ic { margin-top: 2px; }
.uc-contato-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.uc-contato-acoes .uc-btn { min-height: 34px; padding: 0 12px; border-radius: var(--capi-r-campo); font-size: 13px; font-weight: 400; }
.uc-contato-acoes .uc-btn--pri { border-width: 1px; }   /* na lista de contatos o desenho mantem a borda azul de 1 px */

/* ---------- ponto ---------- */
.uc-ponto { display: flex; flex-direction: column; gap: 10px; }
.uc-ponto-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.uc-ponto-tit { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 16px; font-weight: 500; }
.uc-ponto-n { font-size: 12px; font-weight: 400; color: var(--capi-azul-claro); font-variant-numeric: tabular-nums; }
.uc-ponto-end { font-size: 13px; font-weight: 400; color: var(--uc-texto-sub); }
@media (min-width: 641px) {   /* o desenho mantem titulo, endereco e botao numa linha so; o endereco longo corta com reticencias */
  .uc-ponto-cab { flex-wrap: nowrap; }
  .uc-ponto-tit { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; white-space: nowrap; }
  .uc-ponto-end { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .uc-ponto-cab .uc-btn { flex-shrink: 0; }
}
.uc-quadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.uc-quadro { height: 260px; min-width: 0; border: 1px solid var(--capi-borda); border-radius: var(--capi-r-cartao); background: var(--capi-cartao); overflow: hidden; }
.uc-fach { margin: 0; min-height: 200px; border: 1px solid var(--capi-borda); border-radius: var(--capi-r-cartao); overflow: hidden; background: var(--capi-cartao); display: flex; flex-direction: column; }
.uc-fach-img { width: 100%; flex: 1; object-fit: cover; display: block; min-height: 0; }
.uc-fach-leg { padding: 8px 12px; font-size: 12px; color: var(--capi-texto-2); }
.uc-raios { display: flex; gap: 2px; padding: 3px; border-radius: 9px; border: 1px solid var(--uc-linha-cartao); background: var(--capi-sub); }
.uc-raio { min-height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--capi-texto); font-size: 12px; cursor: pointer; }
.uc-raio[aria-pressed="true"] { background: var(--capi-azul); color: var(--capi-texto); }
.uc-ent-estado { margin: 0; font-size: 12px; color: var(--capi-texto-3); }
.uc-card--ent { gap: 12px; }
.uc-ent-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.uc-ent-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--uc-linha-cartao); border-radius: var(--capi-r-botao); padding: 8px 12px; background: var(--capi-sub); font-size: 13px; }
.uc-ent-nome-bloco { display: flex; flex-direction: column; min-width: 0; }
.uc-ent-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-ent-tipo { font-size: 11px; color: var(--capi-texto-3); }
.uc-ent-dist { font-size: 12px; color: var(--uc-texto-sub); white-space: nowrap; }
.uc-atrib { margin: 0; font-size: 11px; color: var(--capi-texto-4); }

/* ---------- toque, movimento, impressao ---------- */
@media (pointer: coarse) {
  .uc-nome-linha .mais-nome, .uc-mini, .uc-btn, .uc-tile, .uc-raio, .uc-sel, .uc-selo--atencao, .uc-cpf-toggle, .uc-avise, .uc-contato-acoes .uc-btn, .uc-btn--mini, .uc-proximo-acoes .uc-btn, .uc-aba { min-height: 44px; }
  .uc-aba { min-height: 48px; }
  .uc-selo--atencao { padding: 0 14px; }
  .uc-raio { padding: 0 14px; }
  .uc-avise { padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-ficha *, .uc-ficha *::before, .uc-ficha *::after { animation: none !important; transition: none !important; }
}
@media print {
  .uc-ficha { color: var(--uc-tinta); display: block; }
  .uc-cartao, .uc-card, .uc-kpis, .uc-nota, .uc-contato, .uc-tile, .uc-pitch-item, .uc-ent-item, .uc-proximo { background: var(--uc-papel); color: var(--uc-tinta); border-color: var(--uc-tinta); box-shadow: none; }
  .uc-ficha .uc-rot-s, .uc-ficha .uc-card-sub, .uc-ficha .uc-kpi-rot, .uc-ficha .uc-kpi-sub, .uc-ficha .uc-marca, .uc-ficha .uc-contato-meta, .uc-ficha .uc-contato-rotulo, .uc-ficha .uc-tel, .uc-ficha .uc-sinais, .uc-ficha .uc-pitch-txt, .uc-ficha .uc-proximo-sub, .uc-ficha .uc-nota-sub { color: var(--uc-tinta); }
  .uc-menu, .uc-rodape-menu, .uc-acoes, .uc-rel, .uc-rapido-btns, .uc-cpf, .uc-mini { display: none; }
  .uc-pg[hidden] { display: none; }
}

/* relatorio completo em PDF (09/11/2026).. botao largo abaixo da grade de 3, alvo >= 44 px, foco herda o de .uc-btn */
.uc-rel { display: flex; flex-direction: column; gap: 8px; }
.uc-rel-btn { min-width: 0; max-width: 100%; overflow: hidden; text-align: center; }   /* 09/11/2026.. rótulo numa linha só; o nome completo está no aria-label */
.uc-rel-btn > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }   /* rede de segurança.. nunca quebra, corta com reticências */
.uc-rel-msg { margin: 0; font-size: 12px; color: var(--capi-texto-2); }
.uc-rel-msg:empty { display: none; }

/* ui-entorno.css (09/11/2026).. "O que tem perto" ilustrado.. principais, radar, lista por distância ou categoria e melhor acesso.
   Tokens da paleta atual (--capi-*, ui-tokens.css); as cores de categoria são tokens próprios em :root (nada de hex solto fora daqui).
   Texto sempre em --capi-texto / --capi-texto-2 / --capi-texto-3 (>= 4,5:1 nos painéis); a cor da categoria só pinta ícone e ponto, e o nome da categoria
   vem sempre escrito (nunca estado só por cor). Animação só de transform e opacity, 150-300 ms, desligada em prefers-reduced-motion. */
:root {
  --ent-c-mercado: #f5b942;
  --ent-c-saude: #ff8f7a;
  --ent-c-educacao: #8fb0ff;
  --ent-c-lazer: #34d399;
  --ent-c-alimentacao: #ffa45c;
  --ent-c-transporte: #5fd3f0;
  --ent-c-servico: #c4a9ff;
  --ent-c-via: #e6edf8;
}

.ent .uc-esq--radar { display: block; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; border-radius: var(--capi-r-cartao); }
.ent-corpo { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ent-secao { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ent-sub { margin: 0; font-size: 14px; font-weight: 600; color: var(--capi-texto); }

/* ---------- cores por categoria (ícone, ponto e swatch) ---------- */
.ent-cat--mercado, .ent-cor--mercado, .ent-pt--mercado { --ent-cor: var(--ent-c-mercado); }
.ent-cat--saude, .ent-cor--saude, .ent-pt--saude { --ent-cor: var(--ent-c-saude); }
.ent-cat--educacao, .ent-cor--educacao, .ent-pt--educacao { --ent-cor: var(--ent-c-educacao); }
.ent-cat--lazer, .ent-cor--lazer, .ent-pt--lazer { --ent-cor: var(--ent-c-lazer); }
.ent-cat--alimentacao, .ent-cor--alimentacao, .ent-pt--alimentacao { --ent-cor: var(--ent-c-alimentacao); }
.ent-cat--transporte, .ent-cor--transporte, .ent-pt--transporte { --ent-cor: var(--ent-c-transporte); }
.ent-cat--servico, .ent-cor--servico, .ent-pt--servico { --ent-cor: var(--ent-c-servico); }
.ent-cat--via { --ent-cor: var(--ent-c-via); }

/* ---------- ícones ---------- */
.ent-ic { width: 22px; height: 22px; flex: none; display: block; }
.ent-it-ic, .ent-princ-ic { color: var(--ent-cor, var(--capi-texto-2)); }
.ent-it-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--capi-sub); border: 1px solid var(--capi-borda); }
.ent-it-ic .ent-ic { width: 20px; height: 20px; }

/* ---------- os principais ---------- */
.ent-principais { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; counter-reset: ent; }
.ent-princ { display: flex; align-items: flex-start; gap: 12px; padding: 14px; min-width: 0; border-radius: var(--capi-r-cartao); border: 1px solid var(--capi-vidro-borda); background: var(--capi-vidro); }
.ent-princ-ic { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--capi-painel-2); border: 1px solid var(--ent-cor, var(--capi-borda)); }
.ent-princ-ic .ent-ic { width: 26px; height: 26px; }
.ent-num { position: absolute; top: -8px; left: -8px; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; background: var(--capi-azul); color: var(--capi-texto); font-size: 12px; font-weight: 600; line-height: 1; }
.ent-princ-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ent-nome { color: var(--capi-texto); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ent-princ .ent-nome { font-size: 15px; white-space: normal; overflow-wrap: anywhere; }
.ent-tipo { color: var(--capi-texto-3); font-size: 12px; }
.ent-motivo { color: var(--capi-ouro-texto); font-size: 13px; }

/* ---------- radar + acesso ---------- */
.ent-duas { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ent-duas--so { grid-template-columns: minmax(0, 1fr); }
.ent-radar { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ent-radar-svg { display: block; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; height: auto; border-radius: var(--capi-r-cartao); background: var(--capi-painel-2); border: 1px solid var(--capi-borda); }
.ent-anel { fill: none; stroke: var(--capi-borda); stroke-width: 1; }
.ent-anel--atual { stroke: var(--capi-azul-link); stroke-width: 1.5; }
.ent-anel-rot { fill: var(--capi-texto-3); font-size: 9px; font-family: var(--capi-fonte); }
.ent-centro { fill: var(--capi-azul); stroke: var(--capi-texto); stroke-width: 2; }
.ent-centro-miolo { fill: var(--capi-texto); }
.ent-pt-bola { fill: var(--ent-cor); stroke: var(--capi-fundo); stroke-width: 1.5; }
.ent-pt--principal .ent-pt-bola { stroke: var(--capi-texto); stroke-width: 2; }
.ent-pt-num { fill: var(--capi-fundo); font-size: 11px; font-weight: 700; font-family: var(--capi-fonte); }
.ent-via-linha { stroke: var(--ent-c-via); stroke-width: 3; stroke-linecap: round; opacity: .85; }
.ent-via-rot { fill: var(--capi-texto-2); font-size: 9px; font-family: var(--capi-fonte); paint-order: stroke; stroke: var(--capi-painel-2); stroke-width: 3; }
.ent-bus { fill: var(--ent-c-transporte); stroke: var(--capi-fundo); stroke-width: 1.5; }
.ent-radar-leg { margin: 0; font-size: 12px; color: var(--capi-texto-3); }
.ent-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--capi-texto-2); }
.ent-leg-it { display: inline-flex; align-items: center; gap: 6px; }
.ent-leg-cor { width: 10px; height: 10px; border-radius: 50%; background: var(--ent-cor); }
.ent-leg-via { width: 14px; height: 3px; border-radius: 2px; background: var(--ent-c-via); }
.ent-leg-bus { width: 9px; height: 9px; border-radius: 2px; background: var(--ent-c-transporte); }
.ent-leg-num { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--capi-texto); color: var(--capi-fundo); font-size: 10px; font-weight: 700; }

.ent-acesso { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: var(--capi-r-cartao); border: 1px solid var(--capi-vidro-borda); background: var(--capi-vidro); }
.ent-aviso { margin: 0; font-size: 12px; color: var(--capi-texto-3); }
.ent-vias, .ent-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ent-via, .ent-it { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border-radius: var(--capi-r-botao); border: 1px solid var(--uc-linha-cartao, var(--capi-linha)); background: var(--capi-sub); }
.ent-it-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
/* nome de via pode ser longo.. quebra em vez de cortar (o texto é a informação principal do cartão) */
.ent-via .ent-nome { white-space: normal; overflow-wrap: anywhere; }
.ent-dist { color: var(--capi-texto-2); font-size: 13px; white-space: nowrap; }
.ent-direcao { display: inline-flex; align-items: center; gap: 6px; color: var(--capi-texto-2); flex: none; }
.ent-seta { width: 20px; height: 20px; color: var(--capi-azul-link); }
.ent-como { border-top: 1px solid var(--capi-linha); padding-top: 10px; }
.ent-como-tit { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--capi-texto-3); letter-spacing: .02em; }
.ent-como-txt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--capi-texto); }

/* ---------- lista completa ---------- */
.ent-contagem { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ent-cont { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--capi-borda); background: var(--capi-sub); color: var(--capi-texto-2); font-size: 12px; }
.ent-lista { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ent-grupos { display: grid; gap: 14px; }
.ent-grupo { display: flex; flex-direction: column; gap: 8px; }
.ent-grupo-tit { margin: 0; font-size: 13px; font-weight: 600; color: var(--capi-texto-2); }
.ent-modos { align-self: center; }

/* ---------- foco, toque, movimento ---------- */
/* os dois botões de ordem da lista (mesmo desenho dos botões de raio, classe própria para não entrarem na conta deles) */
.ent-modo-b { min-height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--capi-texto); font-size: 12px; cursor: pointer; }
.ent-modo-b[aria-pressed="true"] { background: var(--capi-azul); color: var(--capi-texto); }
.ent .uc-raio:focus-visible, .ent .ent-modo-b:focus-visible { outline: 2px solid var(--capi-azul-link); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 640px) {
  .ent .uc-raio, .ent .ent-modo-b { min-height: 44px; padding: 0 14px; }
}
@media (max-width: 760px) {
  .ent-duas { grid-template-columns: minmax(0, 1fr); }
  .ent-radar-svg { max-width: none; }
  .ent-principais { grid-template-columns: minmax(0, 1fr); }
  .ent-lista { grid-template-columns: minmax(0, 1fr); }
}
@keyframes ent-surge { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.ent-pt { transform-box: fill-box; transform-origin: center; animation: ent-surge .24s ease-out both; }
.ent-pt:nth-of-type(3n+1) { animation-delay: 30ms; }
.ent-pt:nth-of-type(3n+2) { animation-delay: 70ms; }
.ent-pt:nth-of-type(3n) { animation-delay: 110ms; }
@media (prefers-reduced-motion: reduce) {
  .ent-pt { animation: none; }
}
@media print {
  .ent-radar { display: none; }
  .ent .uc-raios { display: none; }
  .ent-princ, .ent-acesso, .ent-it, .ent-via { background: var(--uc-papel); color: var(--uc-tinta); border-color: var(--uc-tinta); box-shadow: none; }
  .ent-nome, .ent-dist, .ent-como-txt, .ent-motivo, .ent-tipo, .ent-aviso { color: var(--uc-tinta); }
}

/* ui-ficha-abas.css (painel novo, frente "abas", 06/11/2026).. pele escura das abas Lote, Situação, Perfil, Despachante, Análise e Status.
   Prefixo .ua-. Só tokens var(--capi-*) (design-tokens.css / ui-tokens.css); sem hex solto, sem style= no HTML. Animação só em opacity/transform. */
.ua {
  /* os blocos VIVOS (despachante, grafo, due diligence, mercado) usam as variáveis do tema claro antigo.. aqui elas apontam para os tokens escuros */
  --navy: var(--capi-texto);
  --branco: var(--capi-sub);
  --papel: var(--capi-fundo);
  --texto-2: var(--capi-texto-2);
  --linha: var(--capi-linha);
  --suave: var(--capi-sub);
  --azul: var(--capi-azul-claro);
  --azul-texto: var(--capi-azul-link);
  --azul-suave: color-mix(in srgb, var(--capi-azul) 16%, transparent);
  --azul-borda: var(--capi-azul);
  --erro: var(--capi-erro-texto);
  --erro-fundo: color-mix(in srgb, var(--capi-erro) 22%, transparent);
  --ap-muted: var(--capi-texto-3);
  --ap-warning: var(--capi-ouro-texto);
  --raio-p: var(--capi-r-botao);
  --ua-texto-2b: color-mix(in srgb, var(--capi-texto-2) 33%, var(--capi-texto-3));   /* #a9b6cb do design, entre texto-2 e texto-3 */
  font-family: var(--capi-fonte);
  font-size: var(--capi-t-corpo);
  line-height: normal;   /* paridade com o design aprovado: Nunito em "normal" (1,364).. 12 px = 16, 16 px = 22, 26 px = 35 */
  color: var(--capi-texto);
  min-width: 0;
}
.ua-pilha { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ua :where(strong, b, h1, h2, h3, h4, th) { font-weight: 600; }
.ua :where(button, .selo, .btn, [class*="desp-"], [class*="gf-"], .stat strong) { font-weight: 500; }
.ua :focus-visible { outline: 2px solid var(--capi-azul-link); outline-offset: 2px; }

/* cartão */
.ua-cartao, .ua .pc {
  border: 1px solid var(--capi-linha); border-radius: var(--capi-r-cartao); background: var(--capi-cartao);
  padding: var(--capi-e-4); display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--capi-texto);
}
.ua-cartao--alerta { border-color: var(--capi-ouro); }
.ua-cartao--raiox { background: linear-gradient(160deg, color-mix(in srgb, var(--capi-painel-1) 72%, var(--capi-fundo)), var(--capi-fundo)); }
.ua-cartao--linha { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ua-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.ua-cartao--raiox > .ua-cab { flex-direction: column; align-items: flex-start; gap: 2px; }
.ua-cab-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ua-tit { margin: 0; font-size: var(--capi-t-h3); font-weight: 500; line-height: normal; }
.ua :where(h3, h4) { line-height: normal; }
.ua-sub { font-size: var(--capi-t-meta); color: var(--capi-texto-3); }
.ua-sub-tit { margin: 4px 0 0; font-size: var(--capi-t-corpo); color: var(--capi-texto-2); }
.ua-txt { margin: 0; font-size: 13px; color: var(--capi-texto-2); line-height: 1.5; overflow-wrap: anywhere; }
.ua-txt--1 { line-height: normal; }
.ua-peq { margin: 0; font-size: var(--capi-t-meta); color: var(--capi-texto-4); line-height: normal; }
.ua-nota { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--capi-ouro-texto); }
.ua-num { font-variant-numeric: tabular-nums; }
.ua-ic { display: inline-block; width: 18px; height: 18px; }
.ua .ic { width: 18px; height: 18px; flex: none; }
.ua-valor { font-size: 22px; font-variant-numeric: tabular-nums; }
.ua-valor-ano { font-size: 13px; color: var(--capi-texto-3); }

/* selos e pílulas (sempre com texto, nunca só cor) */
.ua-selo, .ua-pilula { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--capi-r-pilula); border: 1px solid var(--capi-borda); font-size: var(--capi-t-meta); color: var(--capi-texto); white-space: nowrap; }
.ua-selo { padding: 4px 12px; }
.ua-selo--ok, .ua-pilula--ok { border-color: var(--capi-sucesso); color: var(--capi-sucesso-texto); }
.ua-selo--aviso, .ua-pilula--aviso { border-color: var(--capi-ouro); color: var(--capi-ouro-texto); }
.ua-pilula--azul { border-color: var(--capi-azul); }

/* pendências */
.ua-total { display: flex; flex-direction: column; gap: 2px; }
.ua-total-rot { font-size: var(--capi-t-meta); color: var(--capi-ouro-texto); }
.ua-total-val { font-size: 26px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ua-total-sub { font-size: var(--capi-t-meta); color: var(--capi-texto-2); }
.ua-tab-caixa { min-width: 0; }
.ua-tab { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ua-tab caption { text-align: left; font-size: var(--capi-t-meta); color: var(--capi-texto-3); padding-bottom: 6px; }
.ua-tab th { font-weight: 400; text-align: left; color: var(--capi-texto-3); padding: 6px 8px; border-bottom: 1px solid var(--capi-linha); }
.ua-tab td { padding: 8px; border-bottom: 1px solid var(--capi-linha); }
.ua-tab tr:last-child td { border-bottom: 0; }
.ua-tab .ua-num { text-align: right; }
.ua-venc { color: var(--capi-ouro-texto); }
.ua-lista-deb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 13px; }
.ua-lista-deb li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--capi-linha); flex-wrap: wrap; }
.ua-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ua-btn, .ua .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--capi-borda); background: transparent; color: var(--capi-texto); font: inherit; font-size: 13px; font-weight: 400; cursor: pointer;
}
.ua-btn:hover { background: color-mix(in srgb, var(--capi-azul) 14%, transparent); }
.ua-btn--pri { background: var(--capi-azul); border-color: var(--capi-azul); }
.ua-btn--pri:hover { background: var(--capi-azul-hover); }
.ua .btn--pri { background: var(--capi-azul); border-color: var(--capi-azul); color: var(--capi-texto); }
.ua .btn--pri:hover:not(:disabled) { background: var(--capi-azul-hover); }

.ua-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; min-width: 0; }
.ua-grade > .ua-cartao { gap: 8px; }
.ua-cartao--det { gap: 0; }
.ua-cartao--det > summary { cursor: pointer; min-height: 24px; list-style: none; }
.ua-cartao--det > summary::-webkit-details-marker { display: none; }
.ua-cartao--det[open] > summary { margin-bottom: 12px; }
.ua-cartao--det > summary { align-items: center; }
.ua-cartao--det > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border: solid var(--capi-texto-3); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ua-cartao--det[open] > summary::after { transform: rotate(225deg); }
.ua-cartao--det > summary .ua-sub { margin-left: 8px; }
/* raio-x, áreas, zona, usos, ficha */
.ua-esquema { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ua-uso { display: flex; flex-direction: column; gap: 6px; }
.ua-uso-txt { font-size: 13px; color: var(--capi-texto-2); }
.ua-medidor { height: 8px; border-radius: var(--capi-r-pilula); background: var(--capi-linha); overflow: hidden; }
.ua-medidor i { display: block; width: 100%; height: 100%; border-radius: var(--capi-r-pilula); background: var(--capi-azul); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.ua-celulas { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.ua-celulas--peq { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ua-cel { border: 1px solid var(--capi-linha); border-radius: var(--capi-r-botao); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ua-cel-rot { font-size: var(--capi-t-meta); color: var(--capi-texto-3); }
.ua-cel-val { font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ua-cel--dest { border-color: var(--capi-azul); background: color-mix(in srgb, var(--capi-azul) 14%, transparent); }
.ua-cel--dest .ua-cel-rot { color: var(--capi-texto-2); }
.ua-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ua-barras li { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.ua-barras-rot { color: var(--capi-texto-2); }
.ua-pares { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ua-par { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--capi-linha); }
.ua-par:last-child { border-bottom: 0; }
.ua-par dt { color: var(--ua-texto-2b); }
.ua-par dd { margin: 0; text-align: right; }
.ua-usos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ua-uso-item { display: flex; gap: 10px; padding: 6px 0; }
.ua-uso-item--perm, .ua-uso-item--perm .ua-uso-cod { color: var(--ua-texto-2b); }
.ua-uso-cod { width: 28px; flex: none; font-variant-numeric: tabular-nums; color: var(--capi-texto-3); }
.ua-ficha { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 20px; font-size: 13px; }
.ua-ficha-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ua-ficha-item--largo { grid-column: 1 / -1; }
.ua-ficha dt { font-size: var(--capi-t-meta); color: var(--capi-texto-3); }
.ua-ficha dd { margin: 0; overflow-wrap: anywhere; }

/* menções */
.ua-mencoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ua-mencao { border: 1px solid var(--capi-linha); border-radius: var(--capi-r-botao); padding: 10px 12px; background: var(--capi-sub); display: flex; flex-direction: column; gap: 6px; }
.ua-mencao-topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ua-mencao-topo .ua-pilula { padding: 1px 8px; }
#sec-situacao { gap: 8px; }
.ua .sit-sem-consulta { font-size: 13px; color: var(--capi-texto-2); line-height: 1.5; }
#sec-mencoes, #sec-linha { gap: 10px; }

/* perfil */
.ua-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ua-chips li { padding: 2px 10px; border: 1px solid var(--capi-borda); border-radius: var(--capi-r-pilula); font-size: var(--capi-t-meta); color: var(--capi-texto-2); }
.ua-emps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ua-emp { border: 1px solid var(--capi-linha); border-radius: var(--capi-r-botao); padding: 10px 12px; background: var(--capi-sub); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ua-emp-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ua-emp-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ua-emp-nome { font-size: var(--capi-t-corpo); overflow-wrap: anywhere; }
.ua-mais summary { cursor: pointer; font-size: 13px; color: var(--capi-azul-link); min-height: 24px; }
.ua-socios { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin-top: 8px; }
.ua-socios ul { margin: 0; padding-left: 18px; }
.ua-socios small { display: block; color: var(--capi-texto-3); }
.ua-socio { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ua-socio-abrir { align-self: flex-start; min-height: 44px; padding: 0 14px; border: 1px solid var(--capi-azul); border-radius: var(--capi-r-pilula); background: none; color: var(--capi-azul-link); font: inherit; cursor: pointer; }
.ua-socio-abrir:hover { background: color-mix(in srgb, var(--capi-azul) 14%, transparent); }
.ua-socio-abrir:focus-visible { outline: 2px solid var(--capi-azul-link); outline-offset: 2px; }
.ua-socio-resp:empty { display: none; }
.ua-socio-outras { list-style: none; margin: 4px 0 0; padding-left: 0; display: flex; flex-direction: column; gap: 6px; }
.ua-lt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ua-lt-item { display: grid; grid-template-columns: max-content 12px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; }
.ua-lt-ano { min-width: 64px; white-space: nowrap; color: var(--capi-texto-3); font-variant-numeric: tabular-nums; }   /* 08/11/2026.. "08/07/2026" mede 69,8 px; na coluna fixa de 64 px quebrava no Safari */
.ua-lt-ponto { width: 10px; height: 10px; border-radius: var(--capi-r-pilula); border: 2px solid var(--capi-azul); margin-top: 5px; }
.ua-lt-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.ua-lt-tit { color: var(--capi-texto); }
.ua-lt-proc { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--capi-azul-link); text-align: left; text-decoration: underline; cursor: pointer; }
.ua-lt-proc:hover { color: var(--capi-azul-hover); }

/* status */
.ua-estados { display: flex; flex-wrap: wrap; gap: 6px; }
.ua-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--capi-r-pilula); border: 1px solid var(--capi-borda); background: var(--capi-sub); color: var(--capi-texto); font: inherit; font-size: 13px; cursor: pointer; }
.ua-chip--on { background: var(--capi-azul); border-color: var(--capi-azul); }
.ua-rotulo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ua-campo { min-height: 110px; border-radius: var(--capi-r-botao); border: 1px solid var(--capi-borda); background: var(--capi-campo); color: var(--capi-texto); padding: 10px 12px; font: inherit; font-size: var(--capi-t-corpo); resize: vertical; }

/* esqueleto de fase em andamento */
.ua-esq-barra { height: 12px; border-radius: var(--capi-r-pilula); background: var(--capi-linha); animation: ua-esq 1.2s ease-in-out infinite; }
.ua-esq-barra--curta { width: 60%; }
@keyframes ua-esq { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* blocos vivos dentro das abas (pele) */
.ua .cartao, .ua .sub, .ua .mini { color: var(--capi-texto); }
.ua .pc-cab { display: flex; gap: 10px; align-items: baseline; }
.ua .pc-cab .sec-ic { display: none; }
.ua .pc-cab { flex: 1 1 auto; }
.ua .pc-tit { display: flex; flex: 1 1 auto; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 2px 12px; flex-wrap: wrap; }   /* design.. título à esquerda, rótulo à direita, na mesma linha */
.ua .pc-tit h3 { margin: 0; font-size: var(--capi-t-h3); font-weight: 500; }
.ua .sec-resumo, .ua .ajuda, .ua .p3-nota { font-size: var(--capi-t-meta); color: var(--capi-texto-3); }
.ua .selo { background: transparent; color: var(--capi-texto); border: 1px solid var(--capi-borda); padding: 2px 10px; font-size: var(--capi-t-meta); }
.ua .selo .ic { color: var(--capi-azul-link); }
.ua .stat, .ua .mini { border: 1px solid var(--capi-linha); border-radius: var(--capi-r-botao); background: var(--capi-sub); }
.ua .dados { gap: 10px 20px; font-size: 13px; }
.ua .dado dt { color: var(--capi-texto-3); font-size: var(--capi-t-meta); }
.ua .btn--sec, .ua .btn-icone { background: transparent; color: var(--capi-texto); border-color: var(--capi-borda); }
.ua .desp { color: var(--capi-texto); }

/* pele escura dos blocos legados (Situacao manual, Vinculos e Regularidade, Despachante).. tamanho e peso do desenho (corpo 13-14, titulo 14-16, peso <= 600) */
.ua .campo { gap: 6px; }
.ua .campo label, .ua .dd-rot, .ua .dd-rotulo { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--capi-texto-2); }
.ua .campo select, .ua .campo input, .ua .sit-campo, .ua .dd-campo { min-height: 40px; padding: 0 12px; border: 1px solid var(--capi-borda); border-radius: var(--capi-r-campo); background: var(--capi-campo); color: var(--capi-texto); font: 400 14px/1.4 var(--capi-fonte); color-scheme: dark; }
.ua .dd-campo { flex: 1 1 220px; }
.ua .campo select:focus-visible, .ua .campo input:focus-visible, .ua .dd-campo:focus-visible { outline: 2px solid var(--capi-azul-link); outline-offset: 2px; border-color: var(--capi-azul); }
.ua .sit-manual { gap: 10px; border-top: 1px solid var(--capi-linha); padding-top: 12px; }
.ua .sit-manual .ent-tit { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--capi-texto-3); }
.ua .sit-reg { padding: 12px; border: 1px solid var(--capi-linha); border-radius: var(--capi-r-botao); background: var(--capi-sub); }
.ua .sit-reg-tit { font-size: 14px; font-weight: 500; }
.ua .acomp-info { font-size: 12px; color: var(--capi-texto-3); }
.ua .acomp-info .ic { width: 14px; height: 14px; color: var(--capi-azul-link); }
.ua .dd-sec { gap: 8px; padding-top: 14px; border-top-color: var(--capi-linha); }
.ua .dd-sec-t { font-size: 14px; font-weight: 500; color: var(--capi-texto); }
.ua .dd-pilula, .ua .dd-selo { padding: 0 10px; min-height: 26px; border: 1px solid var(--capi-borda); background: transparent; color: var(--capi-texto-2); font-size: 12px; font-weight: 500; line-height: 1.2; }
.ua .dd-selo { border-color: var(--capi-azul); background: color-mix(in srgb, var(--capi-azul) 16%, transparent); color: var(--capi-texto); }
.ua .dd-pilula .ic, .ua .dd-badge .ic { width: 14px; height: 14px; }
.ua .dd-badge { padding: 0 10px; min-height: 26px; border: 1px solid currentColor; font-size: 12px; font-weight: 500; line-height: 1.2; }
.ua .dd-badge--verde { background: transparent; color: var(--capi-sucesso-texto); }
.ua .dd-badge--amarelo { background: var(--uc-aviso-fundo); color: var(--capi-ouro-texto); }
.ua .dd-badge--vermelho { background: color-mix(in srgb, var(--capi-erro) 18%, transparent); color: var(--capi-erro-texto); }
.ua .dd-badge--cinza { background: transparent; color: var(--capi-texto-2); }
.ua .dd-vazio, .ua .dd-item, .ua .dd-emp-nome { font-size: 14px; color: var(--capi-texto); }
.ua .dd-nota, .ua .dd-emp-cnpj, .ua .dd-emp-det { font-size: 12px; color: var(--capi-texto-3); }
.ua .dd-nota .ic, .ua .dd-aviso .ic { width: 14px; height: 14px; color: var(--capi-azul-link); }
.ua .dd-emp { padding: 10px 12px; border-color: var(--capi-linha); border-radius: var(--capi-r-botao); background: var(--capi-sub); }
.ua .dd-aviso { padding: 10px 12px; border-radius: var(--capi-r-botao); border-color: var(--capi-linha); background: var(--capi-sub); font-size: 13px; color: var(--capi-texto-2); }
.ua .desp-intro, .ua > .ajuda { font-size: 13px; color: var(--capi-texto-2); }
/* icone vivo que o localizador nao conhece chega como svg vazio.. nao reserva espaco */
.ua .ic:has(> svg:empty), .uc-ficha .ic:has(> svg:empty) { display: none; }
@media (max-width: 640px) { .ua .sit-reg { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse) { .ua .campo select, .ua .campo input, .ua .sit-campo, .ua .dd-campo { min-height: 44px; } }

/* toque (>= 44 px) */
@media (pointer: coarse) {
  .ua-btn, .ua .btn, .ua-chip, .ua-mais summary, .ua .desp-btn { min-height: 44px; min-width: 44px; }
  .ua-lt-proc { display: inline-flex; align-items: center; min-height: 44px; }
  .ua-mais summary, .ua-cartao--det > summary { display: inline-flex; align-items: center; min-height: 44px; }
  .ua-cartao--det > summary { display: flex; width: 100%; }
}

/* tela estreita.. a tabela segue tabela (como no desenho), mais justa e com quebra de linha; sem rolagem horizontal */
@media (max-width: 640px) {
  .ua-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ua-tab, .ua-tab tbody { display: block; width: 100%; }
  .ua-tab tr { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "tipo tipo tipo tot" "ano par ven sit"; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--capi-linha); }
  .ua-tab tr:last-child { border-bottom: 0; }
  .ua-tab td { display: block; padding: 0; border: 0; min-width: 0; }
  .ua-tab td:nth-child(1) { grid-area: ano; color: var(--capi-texto-3); }
  .ua-tab td:nth-child(2) { grid-area: tipo; }
  .ua-tab td:nth-child(3) { grid-area: par; color: var(--capi-texto-3); }
  .ua-tab td:nth-child(4) { grid-area: ven; color: var(--capi-texto-3); white-space: nowrap; }
  .ua-tab caption { display: block; width: 100%; }
  .ua-tab td:nth-child(5) { grid-area: tot; text-align: right; }
  .ua-tab td:nth-child(6) { grid-area: sit; text-align: right; }
  .ua-tab td:nth-child(3)::before { content: "Parcela "; }
  .ua-tab td:nth-child(4)::before { content: "Vence "; }
  .ua-barras li { grid-template-columns: 1fr auto; }
  .ua-barras .ua-medidor { grid-column: 1 / -1; order: 3; }
  .ua-lt-item { grid-template-columns: max-content 12px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ua-esq-barra { animation: none; opacity: .7; }
  .ua *, .ua *::before, .ua *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* impressão legível.. fundo branco, texto escuro (cores do sistema), cartões sem quebra no meio, botões fora */
@media print {
  .ua, .ua-cartao, .imp-debitos .ua-cartao {
    background: Canvas; color: CanvasText; border-color: GrayText;
  }
  .ua-cartao, .ua-emp, .ua-mencao, .ua-cel { background: Canvas; color: CanvasText; border-color: GrayText; break-inside: avoid; }
  .ua :where(.ua-sub, .ua-peq, .ua-txt, .ua-cel-rot, .ua-total-rot, .ua-total-sub, .ua-venc, .ua-tab th, .ua-uso-txt, .ua-barras-rot) { color: CanvasText; }
  .ua-acoes, .ua-estados, .ua-btn, .ua .btn, .ua-mais summary { display: none; }
  .ua-medidor { border: 1px solid GrayText; background: Canvas; }
  .ua-medidor i { background: CanvasText; }
}

/* ---- Despachante, pele do design aprovado (06/11/2026).. cartão "Dossiê completo" com ações na linha do título, seções A, B e C com linhas de rótulo e selo com ponto.
   O conteúdo detalhado do dossiê (blocos, "Ver detalhes") continua na mesma ordem, abaixo de cada linha. Textos de apoio saem só da vista, nunca do DOM. */
.ua .desp { gap: 10px; }
.ua .desp-intro { order: 3; margin: 0; max-width: none; font-size: var(--capi-t-meta); color: var(--capi-texto-4); }
.ua .desp-cartoes { gap: 10px; }
.ua .desp-cartao { gap: 8px; }
.ua .desp-cartao .sec-resumo, .ua .desp-linha > .desp-rot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ua .desp-cartoes .pc-tit h3 { font-size: 15px; }
#sec-desp-job { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
#sec-desp-job > * { grid-column: 1 / -1; }
#sec-desp-job > .pc-cab { grid-column: 1; grid-row: 1; }
#sec-desp-job > .desp-acoes { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 8px; }
.ua .desp-btn { min-height: 36px; min-width: 0; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 400; }
.ua .desp-btn .ic, .ua .desp-acoes .ic { display: none; }
.ua .desp-ver .ic { display: inline-block; }
.ua .desp-progresso:has(> [aria-valuenow="100"]) { display: none; }
.ua .desp-msg { margin: 0; min-height: 0; font-size: 13px; font-weight: 400; color: var(--ua-texto-2b); }
.ua .desp-msg { order: 1; }
.ua #sec-desp-job .desp-selo { order: 3; }
.ua #sec-desp-job .desp-ressalva { order: 4; }
.ua #sec-desp-job .desp-erro { order: 5; }
.ua .desp-meta { order: 2; margin: 0; font-size: var(--capi-t-meta); color: var(--capi-texto-3); }
.ua .desp-ressalva { margin: 0; font-size: var(--capi-t-meta); color: var(--capi-texto-4); }
.ua .desp-ressalva .ic { display: none; }
.ua .desp-par { margin: 0; font-size: 13px; }
.ua .desp-corpo { gap: 0; }
/* linha do design.. rótulo à esquerda, selo à direita, 8px de respiro, filete embaixo */
.ua .desp-bloco { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 8px; padding: 8px 0; border-top: 0; border-bottom: 1px solid var(--capi-linha); }
.ua .desp-bloco:last-child { border-bottom: 0; }
.ua .desp-bloco > * { grid-column: 1 / -1; }
.ua .desp-bloco > h4 { grid-column: 1; grid-row: 1; margin: 0; font-size: 13px; font-weight: 400; color: var(--capi-texto-2); }
.ua .desp-bloco > .desp-linha { grid-column: 2; grid-row: 1; padding: 0; border-bottom: 0; justify-self: end; }
.ua .desp-bloco > .dd-badge { grid-column: 2; grid-row: 1; justify-self: end; }
.ua .desp-linha { padding: 0; }
.ua .dd-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 10px; border: 1px solid currentColor; font-weight: 400; line-height: normal; }
.ua .dd-badge .ic { display: none; }
.ua .dd-badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ua .dd-badge--verde { color: var(--capi-sucesso); }
.ua .dd-badge--cinza { color: var(--capi-texto-3); }
.ua .dd-badge--amarelo { color: var(--capi-ouro-texto); border-color: var(--capi-ouro); background: color-mix(in srgb, var(--capi-ouro) 12%, transparent); }

/* ---- Análise visual, pele do design aprovado (06/11/2026).. mapa em largura total (283 px) com filete tracejado, legenda em linha embaixo, textos no tamanho do desenho.
   Os padrões que não dependem de cor (contorno duplo, tracejado, texto) ficam; só muda tamanho, espaço e cor. */
.ua .gf { --gf-tinta: var(--capi-texto); --gf-mudo: var(--capi-texto-3); --gf-fundo: transparent; --gf-info: var(--capi-azul-link); --gf-atencao: var(--capi-ouro-texto);
  --gf-alto: var(--capi-erro-texto); --gf-linha: var(--capi-texto-3); gap: 10px; font-size: 13px; }
.ua .gf-grade { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ua .gf-col-texto { display: contents; }
.ua .gf-col-desenho { order: 1; }
.ua .gf-legenda { order: 2; display: grid; gap: 8px; }
.ua .gf-det { order: 3; }
.ua .gf-legenda .gf-sub { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ua .gf-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; line-height: normal; color: var(--capi-texto-2); }
.ua .gf-amostra { width: 16px; height: 16px; }
.ua .gf-amostra { border-width: 2px; }
.ua .gf-amostra--alto { border-width: 4px; }
.ua .gf-amostra--alerta { border-width: 5px; }
.ua .gf-traco { width: 24px; border-top-width: 2px; }
.ua .gf-tela { aspect-ratio: auto; max-height: 70vh; border: 1px dashed var(--capi-borda); border-radius: 10px; background: transparent; }
.ua .gf-estado { font-size: 13px; line-height: normal; color: var(--capi-texto-3); }
.ua .gf-estado--erro { color: var(--capi-erro-texto); }
.ua .gf-barra { gap: 8px; }
.ua .gf-bt { min-height: 44px; min-width: 44px; padding: 0 14px; font-size: 13px; }
.ua .gf-alerta { gap: 4px; padding: 10px 12px; font-size: 13px; line-height: normal; border: 1px solid var(--capi-ouro); border-radius: 10px; background: color-mix(in srgb, var(--capi-ouro) 12%, transparent); color: var(--capi-texto); }
.ua .gf-alerta--alto { border: 3px double var(--capi-erro-texto); background: color-mix(in srgb, var(--capi-erro) 18%, transparent); }
.ua .gf-alerta-tit { font-size: 14px; font-weight: 500; }
.ua .gf-alerta-tit .ic { width: 18px; height: 18px; }
.ua .gf-det, .ua .gf-no { padding: 10px 12px; border-radius: 10px; background: var(--capi-sub); }
.ua .gf-det-tit, .ua .gf-sub { margin: 0; font-size: 14px; font-weight: 500; line-height: normal; }
.ua .gf-nota, .ua .gf-dl, .ua .gf-rels, .ua .gf-resumo ul, .ua .gf-det-alerta { font-size: 13px; line-height: normal; }
.ua .gf-no-bt { min-height: 36px; font-size: 13px; line-height: normal; }
.ua .gf-no-tipo, .ua .gf-no-nivel { font-size: 12px; }
.ua .gf-no-nivel { font-weight: 500; border-width: 1px; }
.ua .gf-nv-alto, .ua .gf-nv-alerta { border-width: 3px; }
.ua .gf-no--alerta { border-width: 1px; border-color: var(--capi-erro-texto); }
@media (pointer: coarse) { .ua .gf-bt, .ua .gf-no-bt { min-height: 44px; min-width: 44px; } }

/* ui-modais.css (painel novo, frente LOGIN + CONFIRMACAO RAPIDA, 06/11/2026). Prefixo .um-. Tokens var(--capi-*) de ui-tokens.css.
   Os poucos valores sem token oficial ficam nesta :root, nunca soltos nas regras. Animar so transform/opacity.
   z-index.. login 70, confirmacao rapida 60 (planos 80 e termo 85 ficam por cima, de outras frentes). */
:root {
  --um-tinta-google: #16233a;
  --um-selo-txt: #e2e8f2;
  --um-erro-borda: #ffb4a8;
  --um-fundo-veu: rgba(5, 10, 22, .35);
  --um-fundo-veu-forte: rgba(5, 10, 22, .78);
  --um-vidro-campo: rgba(255, 255, 255, .07);
  --um-vidro-borda: rgba(255, 255, 255, .18);
  --um-azul-vidro: rgba(22, 82, 217, .16);
  --um-azul-borda: rgba(22, 82, 217, .6);
  --um-foco: var(--capi-azul-claro, #3d72e6);
}

/* ---------- camada do login ---------- */
body.um-sem-rolagem { overflow: hidden; }
.um-login {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: hidden; background: var(--um-fundo-veu);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  font-family: var(--capi-fonte); color: var(--capi-texto); font-size: 16px; line-height: normal;
}
.um-login[hidden], .um-humano[hidden], .um-login [hidden], .um-humano [hidden] { display: none; }
.um-teaser { position: absolute; inset: 0; pointer-events: none; }
.um-mancha { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; filter: blur(30px); animation: um-blob 14s ease-in-out infinite; }
.um-mancha--azul { background: radial-gradient(closest-side, rgba(22, 82, 217, .45), transparent); }
.um-mancha--azul2 { background: radial-gradient(closest-side, rgba(22, 82, 217, .35), transparent); }
.um-mancha--ouro { background: radial-gradient(closest-side, rgba(245, 185, 66, .14), transparent); }
.um-teaser-cartao {
  position: absolute; width: 230px; padding: 12px 14px; border-radius: var(--capi-r-cartao);
  background: rgba(17, 28, 52, .72); border: 1px solid rgba(22, 82, 217, .45); box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  filter: blur(1.5px); display: flex; flex-direction: column; gap: 4px;
  animation: um-flutua 7s ease-in-out infinite, um-pisca 5s ease-in-out infinite;
}
.um-teaser-t { font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--capi-azul-link); }
.um-teaser-s { font-size: 14px; line-height: 1.4; }

.um-cartao {
  position: relative; z-index: 1; width: min(440px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto;
  scrollbar-width: none; display: flex; flex-direction: column; gap: 16px; padding: 28px; box-sizing: border-box;
  background: linear-gradient(160deg, rgba(40, 60, 104, .55) 0%, rgba(16, 26, 50, .62) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--capi-vidro-borda); border-radius: 24px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.um-cartao::-webkit-scrollbar { display: none; }
.um-cartao > * { flex: 0 0 auto; min-width: 0; }   /* sem isto o rodapé encolhe e vaza por cima da borda quando o cartão rola */
.um-cartao:focus { outline: none; }
/* body.ui-novo :focus-visible (ui-tokens) vence a regra acima; sem isto o cartao, focado por codigo ao abrir, ganha um anel que o design nao tem */
body.ui-novo .um-cartao:focus-visible, body.ui-novo .um-humano-cartao:focus-visible { outline: none; }
.um-topo { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.um-titulo { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
/* selos (08/11/2026).. uma linha de texto simples com separador, sem pílulas; se faltar largura quebra por selo, nunca passa da margem do cartão */
.um-selos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 0; row-gap: 2px; max-width: 100%; min-width: 0; }
.um-selo { font-size: 12px; line-height: 1.4; color: var(--um-selo-txt); display: inline-flex; align-items: center; white-space: nowrap; }
.um-selo + .um-selo::before { content: "·"; margin: 0 8px; color: var(--capi-texto-3); }
.um-selo-ok { display: none; }

/* logo animada (corpo + 2 ondas) */
.um-logo { position: relative; display: inline-block; flex: 0 0 auto; height: var(--um-h, 56px); width: calc(var(--um-h, 56px) * 960 / 520); color: var(--capi-azul); }
.um-logo-corpo { position: absolute; inset: 0; width: 100%; height: 100%; animation: um-bob 3.2s ease-in-out infinite; }
.um-logo-ondas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.um-logo-arco { animation: um-onda 2.4s ease-in-out infinite; }

.um-modo { display: flex; flex-direction: column; gap: 14px; }
.um-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }

/* Google.. o no oficial do GIS fica transparente SOBRE o botao branco */
.um-google { position: relative; display: block; width: 100%; height: 56px; }
.um-google--peq { height: 46px; }
.um-btn-google {
  position: absolute; inset: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 12px;
  border: 0; border-radius: 14px; background: var(--capi-texto); color: var(--um-tinta-google); text-decoration: none;
  font-family: inherit; font-size: 16px; font-weight: 600; box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}
.um-google--peq .um-btn-google { border-radius: 12px; font-size: 14px; box-shadow: none; }
.um-google--peq .um-g { display: none; }
/* 06/11/2026.. o no oficial so cobre o botao branco DEPOIS que o GIS desenhou o botao (o localizador poe .login-google--sobre no grupo);
   antes disso (ou com o script do Google barrado) ele some, senao uma caixa vazia e transparente engole o clique e o aviso nunca aparece */
.um-google-oficial { display: none; }
.um-google.login-google--sobre .um-google-oficial { display: block; position: absolute; inset: 0; z-index: 2; opacity: 0; overflow: hidden; }
.um-google.login-google--sobre .um-google-oficial > div, .um-google.login-google--sobre .um-google-oficial > div > div, .um-google.login-google--sobre .um-google-oficial iframe { width: 100% !important; height: 100% !important; max-width: none !important; min-width: 0 !important; }
.um-google.login-google--sobre .um-google-oficial [role="button"] { display: block; box-sizing: border-box; width: 100% !important; height: 100% !important; max-width: none !important; min-width: 0 !important; cursor: pointer; }
.um-google:focus-within .um-btn-google { outline: 2px solid var(--um-foco); outline-offset: 2px; }

.um-manter {
  display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--capi-texto-2); font-family: inherit; font-size: 13px; text-align: left;
}
.um-caixa { width: 18px; height: 18px; box-sizing: border-box; border-radius: 5px; border: 1.5px solid var(--capi-texto-3); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.um-caixa-ok { stroke: var(--capi-texto); opacity: 0; }
.um-manter[aria-pressed="true"] .um-caixa { background: var(--capi-azul); border-color: var(--capi-azul); }
.um-manter[aria-pressed="true"] .um-caixa-ok { opacity: 1; }

.um-aviso, .um-erro { margin: 0; border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 1.4; }
.um-aviso { border: 1px solid var(--um-azul-borda); background: var(--um-azul-vidro); color: var(--um-selo-txt); }
.um-erro { border: 1px solid var(--um-erro-borda); background: rgba(255, 180, 168, .14); color: var(--capi-erro-texto); }
.um-erro--simples { border: 0; background: transparent; padding: 0; }
.um-slot-erro, .um-slot-aviso, .um-slot-google { display: contents; }

.um-divisor { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--capi-texto-3); }
.um-divisor-linha { flex: 1; height: 1px; background: rgba(255, 255, 255, .14); }

.um-rotulo-campo { display: flex; flex-direction: column; gap: 6px; }
.um-rotulo { font-size: 13px; font-weight: 500; }
.um-campo {
  height: 48px; width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--um-vidro-borda);
  background: var(--um-vidro-campo); color: var(--capi-texto); padding: 0 14px; font-family: inherit; font-size: 15px;
}
.um-campo::placeholder { color: var(--capi-texto-3); }
.um-campo--senha { padding-right: 96px; }
.um-campo:focus-visible { outline: 2px solid var(--um-foco); outline-offset: 1px; }
.um-campo[aria-invalid="true"] { border-color: var(--um-erro-borda); }
.um-senha-linha { position: relative; }
.um-ver {
  position: absolute; right: 4px; top: 3px; height: 42px; width: 84px; border: 0; border-radius: 9px; background: transparent;
  color: var(--capi-texto-2); font-family: inherit; font-size: 13px; cursor: pointer;
}
.um-esqueci { align-self: flex-end; margin: -6px 0 0; font-size: 13px; }
.um-nota { margin: 0; font-size: 13px; color: var(--capi-texto-2); text-align: center; }
.um-texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--capi-texto-2); }
.um-dica { font-size: 12px; color: var(--capi-texto-3); }
.um-dica--bloco { margin: 0; line-height: 1.45; }
.um-dica--centro { margin: 0; text-align: center; }

.um-link {
  padding: 0; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: inherit; line-height: normal;
  color: var(--capi-azul-link); text-decoration: underline; text-underline-offset: 3px;
}
.um-link--claro { color: var(--capi-texto-2); }

.um-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%;
  font-family: inherit; font-weight: 600; cursor: pointer; color: var(--capi-texto);
}
.um-btn--azul { height: 50px; border-radius: 14px; border: 1px solid var(--capi-azul); background: var(--capi-azul); font-size: 16px; box-shadow: 0 12px 28px rgba(22, 82, 217, .4); }
.um-btn--azul:hover:not(:disabled) { background: var(--capi-azul-hover); }
.um-btn--azul:disabled { opacity: .75; cursor: progress; }
.um-btn--vidro { height: 44px; border-radius: 12px; border: 1px solid var(--um-vidro-borda); background: rgba(255, 255, 255, .06); font-size: 14px; font-weight: 400; }
.um-modo--criar .um-btn--vidro { height: 40px; }
.um-modo--rec .um-form { gap: 14px; }
.um-spinner { stroke: currentColor; animation: um-gira .8s linear infinite; }

.um-rec-ok { border: 1px solid rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .1); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.um-rec-ok-t { font-size: 15px; font-weight: 500; color: var(--capi-sucesso-texto); }
.um-rec-ok-s { font-size: 13px; line-height: 1.5; color: var(--capi-texto-2); }

.um-rodape {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12px; color: var(--capi-texto-3); text-align: center; line-height: 1.5;
}
.um-rodape-linha { white-space: nowrap; }

.um-login button:focus-visible, .um-login a:focus-visible, .um-humano button:focus-visible { outline: 2px solid var(--um-foco); outline-offset: 2px; }

/* ---------- confirmacao rapida ---------- */
.um-humano {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--um-fundo-veu-forte); font-family: var(--capi-fonte); color: var(--capi-texto); font-size: 16px; line-height: 1.5;
}
.um-humano-cartao {
  width: min(420px, 100%); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; text-align: center;
  background: linear-gradient(180deg, var(--capi-painel-1) 0%, var(--capi-painel-2) 100%);
  border: 1px solid rgba(22, 82, 217, .5); border-radius: 18px;
}
.um-humano-cartao:focus { outline: none; }
.um-humano-t { margin: 0; font-size: 19px; font-weight: 500; }
.um-humano-d { margin: 0; font-size: 14px; line-height: 1.5; color: var(--capi-texto-2); }
.um-humano-nota { margin: 0; font-size: 12px; color: var(--capi-texto-4); }
.um-humano-erro { margin: 0; font-size: 13px; color: var(--capi-erro-texto); }
.um-segurar {
  position: relative; overflow: hidden; width: 100%; height: 50px; box-sizing: border-box; border-radius: 12px;
  border: 1px solid var(--capi-azul); background: var(--um-azul-vidro); color: var(--capi-texto);
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
}
.um-segurar-barra {
  position: absolute; inset: 0; background: var(--capi-azul); transform: scaleX(0); transform-origin: left center;
  transition: transform .2s;
}
.um-segurando .um-segurar-barra { transform: scaleX(1); transition: transform 2s linear; }
.um-segurar-txt { position: relative; }
.um-segurar:disabled { cursor: progress; }

/* ---------- movimento ---------- */
@keyframes um-blob { 0%, 100% { transform: translate(-6%, -4%) scale(1); } 50% { transform: translate(6%, 5%) scale(1.15); } }
@keyframes um-flutua { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--dx), var(--dy)); } }
@keyframes um-pisca { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
@keyframes um-onda { 0%, 100% { opacity: .15; } 35%, 60% { opacity: 1; } }
@keyframes um-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes um-gira { to { transform: rotate(360deg); } }
.um-mancha--azul2 { animation-duration: 18s; }

@media (prefers-reduced-motion: reduce) {
  .um-mancha, .um-teaser-cartao, .um-logo-corpo, .um-logo-arco, .um-spinner { animation: none; }
  .um-teaser-cartao { opacity: .6; }
  .um-segurar-barra, .um-segurando .um-segurar-barra { transition: none; }
}

/* ---------- telas estreitas e toque ---------- */
@media (max-width: 480px) {
  .um-login { padding: 16px; }
  .um-cartao { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .um-cartao { padding: 20px; gap: 10px; }
  .um-selo { font-size: 11px; }
  .um-selo + .um-selo::before { margin: 0 6px; }
  .um-rodape-linha { white-space: normal; }
}
@media (pointer: coarse) {
  .um-campo { font-size: 16px; }   /* 16 px no toque evita o zoom automatico do iOS; no mouse vale os 15 px do design */
  .um-link, .um-manter, .um-ver { min-height: 44px; }
  .um-link { display: inline-flex; align-items: center; }
  .um-ver { min-width: 64px; }
  .um-btn--vidro, .um-segurar { min-height: 44px; }
  .um-esqueci { margin-top: -10px; }
}

/* ui-planos.css (painel novo, 06/11/2026).. Planos, Termo de Uso e Suporte/Sugerir melhoria (prefixo .up-).
   Estilos so por classe. Cores de marca vem de var(--capi-*) (design-tokens.css); os poucos tons que o design usa e que os
   tokens nao cobrem ficam em --up-* aqui no :root, nunca soltos nas regras. Sem style= no HTML (CSP style-src 'self'). */
@property --up-neon-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --up-azul-rotulo: #6f95f5;
  --up-azul-claro-txt: #dbe6ff;
  --up-texto-claro: #e2e8f2;
  --up-texto-suave: #a9b6cb;
  --up-escuro-sobre-branco: #0f1a33;
  --up-ouro-sobre-ouro: #2a1d00;
  --up-selo-atual: #0f7a55;
  --up-rodape-termo: #111a2e;
  --up-perigo-borda: #5a2a2a;
  --up-perigo-texto: #ffb4a8;
  --up-perigo-caixa-borda: #7a3a32;
  --up-perigo-caixa-bg: rgba(80, 24, 20, .35);
  --up-perigo-caixa-texto: #e8d2cf;
  --up-perigo-botao-borda: #c0533f;
  --up-perigo-botao-bg: #8f2f22;
  --up-mic-ativo: #c2362b;
  --up-mic-borda-ativo: #ef4444;
  --up-aviso-ambar: #f5b942;
  --up-cartao-topo: #1c2a4a;
  --up-cartao-base: #121c33;
}

/* ---- base das janelas ---- */
.up-sem-rolagem { overflow: hidden; }
.up-sobre {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: var(--capi-fonte, 'Nunito', system-ui, sans-serif); color: var(--capi-texto); box-sizing: border-box; line-height: normal;   /* o design nao fixa altura de linha, so onde declara */
}
.up-sobre *, .up-sobre *::before, .up-sobre *::after { box-sizing: border-box; }
.up-sobre[hidden] { display: none; }
.up-sobre--planos { z-index: 80; background: rgba(5, 10, 22, .76); }
.up-sobre--termo { z-index: 85; background: rgba(5, 10, 22, .72); }
.up-sobre--suporte { z-index: 55; background: rgba(5, 10, 22, .38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.up-sobre button, .up-sobre input, .up-sobre textarea { font-family: inherit; }
:where(.up-sobre button) { font-weight: 400; }   /* peso 400 do design; 500/600 vem da classe de cada botao (:where mantem a especificidade zero) */
.up-sobre :focus-visible { outline: 2px solid var(--capi-azul-link); outline-offset: 2px; }
/* a janela recebe o foco por codigo (tabindex -1) so para o leitor de tela; sem anel (body.ui-novo :focus-visible vence sem isto) */
body.ui-novo .up-sobre .up-janela:focus-visible { outline: none; }

.up-janela {
  display: flex; flex-direction: column; color: var(--capi-texto);
  background: linear-gradient(180deg, var(--capi-painel-1) 0%, var(--capi-painel-2) 100%);
  border: 1px solid rgba(22, 82, 217, .5); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.up-cab {
  padding: 20px 24px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--capi-linha);
}
.up-cab-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.up-cab-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.up-titulo { font-size: 22px; font-weight: 500; line-height: normal; margin: 0; }   /* o design nao fixa altura de linha nem espacamento no titulo; so o do Termo tem -.01em */
.up-tm .up-titulo { letter-spacing: -.01em; }
.up-sub { font-size: 13px; color: var(--up-texto-suave); line-height: normal; margin: 0; }
.up-sp .up-sub { line-height: 1.45; }
.up-fechar {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--capi-borda); background: transparent; color: var(--capi-texto-2);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0;
}
.up-fechar:hover { background: rgba(255, 255, 255, .06); }

/* ---- logo animada ---- */
.up-logo { position: relative; display: inline-block; flex-shrink: 0; height: 34px; width: 62.77px; }
.up-logo-img { position: absolute; inset: 0; width: 100%; height: 100%; animation: up-balanco 3.2s ease-in-out infinite; }
.up-logo-ondas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.up-onda { fill: none; stroke: var(--capi-azul); stroke-width: 30; stroke-linecap: round; animation: up-onda 2.4s ease-in-out infinite; }
.up-onda--2 { animation-delay: .35s; }
@keyframes up-onda { 0%, 100% { opacity: .15; } 35%, 60% { opacity: 1; } }
@keyframes up-balanco { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes up-giro { to { transform: rotate(360deg); } }

/* ---- botao flutuante Suporte (z 45) ---- */
.up-flutuante {
  position: fixed; right: 20px; bottom: var(--ub-suporte-bottom, 20px); z-index: 45; height: 48px; padding: 0 18px 0 14px; border-radius: 999px;
  border: 1px solid var(--capi-azul); background: var(--capi-azul); color: var(--capi-texto); font-family: var(--capi-fonte, 'Nunito', system-ui, sans-serif);
  font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 4px rgba(22, 82, 217, .18);
}
.up-flutuante:hover { background: var(--capi-azul-hover); }
.up-flutuante--alto { bottom: 88px; }
.up-flutuante:focus-visible { outline: 2px solid var(--capi-azul-link); outline-offset: 3px; }

/* ---- PLANOS ---- */
.up-pl { position: relative; width: min(1080px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; }
/* 09/11/2026.. sem barra de rolagem visivel (ordem do dono).. o cabecalho com o X fica fora do corpo, o corpo rola por toque, roda e teclado SEM barra,
   e uma sombra no pe da janela avisa que ha mais conteudo (so a opacidade anima). */
.up-pl-corpo { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.up-pl-corpo::-webkit-scrollbar { display: none; width: 0; height: 0; }
.up-pl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: linear-gradient(180deg, rgba(5, 10, 22, 0) 0%, rgba(5, 10, 22, .85) 100%);
}
.up-pl--mais::after { opacity: 1; }
.up-pl-aviso-troca {
  margin: 16px 24px 0; border: 1px solid var(--capi-azul); border-radius: 12px; background: rgba(22, 82, 217, .14); padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.up-pl-aviso-troca-txt { font-size: 13px; line-height: 1.5; color: var(--up-texto-claro); max-width: 620px; }
.up-pl-aviso-troca-txt strong { color: var(--capi-texto); font-weight: 600; }
.up-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.up-btn-sec, .up-btn-pri {
  height: 38px; padding: 0 14px; border-radius: 9px; font-size: 13px; cursor: pointer; color: var(--capi-texto); border: 1px solid var(--capi-borda); background: transparent;
}
.up-btn-pri { border-color: var(--capi-azul); background: var(--capi-azul); font-weight: 500; }
.up-btn-pri:hover { background: var(--capi-azul-hover); }
.up-btn-sec:hover { background: rgba(255, 255, 255, .06); }
.up-btn-perigo { border-color: var(--up-perigo-botao-borda); background: var(--up-perigo-botao-bg); }
.up-btn-perigo:hover { background: var(--up-perigo-botao-bg); filter: brightness(1.12); }
.up-btn-pri:disabled, .up-btn-sec:disabled { opacity: .55; cursor: default; }

.up-pl-grade {
  position: relative; z-index: 0; padding: 26px 24px 16px; display: grid; gap: 16px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.up-plano {
  position: relative; border: 1px solid var(--capi-linha); border-radius: 16px; background: var(--capi-cartao);
  padding: 22px 18px 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.up-plano--ouro, .up-plano--azul { background-color: var(--capi-painel-2); box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.up-plano--ouro {
  border-color: var(--capi-ouro);
  background-image: radial-gradient(120% 60% at 50% 0%, rgba(245, 185, 66, .16) 0%, rgba(245, 185, 66, 0) 60%), linear-gradient(180deg, var(--up-cartao-topo) 0%, var(--up-cartao-base) 100%);
}
.up-plano--azul {
  border-color: var(--capi-azul-claro);
  background-image: radial-gradient(120% 60% at 50% 0%, rgba(61, 114, 230, .28) 0%, rgba(61, 114, 230, 0) 60%), linear-gradient(180deg, var(--up-cartao-topo) 0%, var(--up-cartao-base) 100%);
}
.up-plano--atual:not(.up-plano--ouro):not(.up-plano--azul) { border-color: var(--capi-sucesso); }   /* no print o Ilimitado atual mantem a borda dourada */
.up-selo {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: var(--capi-azul);
  color: var(--capi-texto); font-size: 10.5px; font-weight: 400; letter-spacing: .08em; white-space: nowrap; z-index: 1;
}
.up-selo--ouro { background: var(--capi-ouro); color: var(--up-ouro-sobre-ouro); }
.up-selo--atual { background: var(--up-selo-atual); color: var(--capi-texto); }
.up-plano-cab { display: flex; flex-direction: column; gap: 6px; }
.up-marca {
  align-self: flex-start; display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(22, 82, 217, .18);
  color: var(--capi-texto-2); font-size: 10.5px; letter-spacing: .08em;
}
.up-chip-combo {
  align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: rgba(52, 211, 153, .14); border: 1px solid rgba(52, 211, 153, .45);
  color: var(--capi-sucesso-texto); font-size: 10.5px; letter-spacing: .06em;
}
.up-plano-nome { font-size: 12px; font-weight: 400; line-height: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--up-azul-rotulo); margin: 0; }
.up-plano-tag { font-size: 13.5px; color: var(--capi-texto-2); line-height: 1.4; min-height: 38px; margin: 0; }
.up-preco { display: flex; flex-direction: column; gap: 2px; min-height: 78px; justify-content: flex-end; }
.up-preco-cheio { font-size: 12px; color: var(--capi-texto-3); text-decoration: line-through; }
.up-preco-linha { display: flex; align-items: baseline; gap: 6px; }
.up-preco-valor { font-size: 32px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; font-weight: 400; }
.up-preco-por { font-size: 12px; color: var(--capi-texto-3); }
.up-preco-nota { font-size: 11.5px; color: var(--capi-texto-3); }
.up-destaque {
  min-height: 54px; border-radius: 12px; border: 1px solid var(--capi-borda); background: rgba(255, 255, 255, .04);
  padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.up-destaque--azul { border-color: var(--capi-azul); background: var(--capi-azul); }
.up-destaque-e { display: flex; flex-direction: column; min-width: 0; }
.up-destaque-n { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.up-destaque-t { font-size: 11.5px; color: var(--capi-texto-3); }
.up-destaque--azul .up-destaque-t { color: var(--up-azul-claro-txt); }
.up-destaque-d { display: flex; flex-direction: column; text-align: right; min-width: 0; }
.up-destaque-d .up-destaque-n { font-size: 13px; }
.up-inf { flex-shrink: 0; }
.up-linha-extra { font-size: 13px; color: var(--capi-texto-2); margin: -4px 0 0; }
.up-linha-extra strong { color: var(--capi-ouro); font-weight: 500; }
.up-itens { display: flex; flex-direction: column; gap: 7px; flex: 1; margin: 0; padding: 0; list-style: none; }
.up-item { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.45; color: var(--capi-texto-2); }
.up-item strong { color: var(--capi-texto); font-weight: 600; }
.up-item-ok { flex-shrink: 0; margin-top: 3px; color: var(--capi-azul); }   /* marca do item em azul da marca, como no design */
.up-cta {
  height: 48px; border-radius: 12px; border: 1.5px solid var(--capi-azul); background: var(--capi-azul); color: var(--capi-texto); font-size: 15px;
  font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; padding: 0 12px;
  box-shadow: 0 10px 24px rgba(22, 82, 217, .35); transition: transform .15s;
}
.up-cta:hover { transform: translateY(-1px); background: var(--capi-azul-hover); }
.up-cta--claro { background: var(--capi-texto); border-color: var(--capi-texto); color: var(--up-escuro-sobre-branco); }
.up-cta--claro:hover { background: var(--capi-texto); }
.up-cta--ouro { box-shadow: 0 10px 26px rgba(245, 185, 66, .28); }
.up-cta--azul { box-shadow: 0 10px 26px rgba(22, 82, 217, .45); }
.up-cta--atual { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .6); color: var(--capi-sucesso-texto); box-shadow: none; cursor: default; }
.up-cta--atual:hover { transform: none; background: rgba(52, 211, 153, .12); }
.up-cta:disabled { cursor: default; }
.up-cta:disabled:not(.up-cta--atual) { opacity: .6; }
.up-equipe { align-self: center; font-size: 12.5px; color: var(--capi-texto-2); text-decoration: none; padding: 2px 0; }
.up-equipe:hover { color: var(--capi-texto); text-decoration: underline; }

/* neon atras do cartao (a grade tem z-index 0; as camadas ficam em -1) */
.up-neon-brilho, .up-neon-brilho2 { position: absolute; pointer-events: none; z-index: -1; }
.up-neon-brilho { inset: -18px; border-radius: 30px; filter: blur(18px); animation: up-brilho 4.5s ease-in-out infinite, up-deriva 12s ease-in-out infinite; }
.up-neon-brilho2 { inset: -10px; border-radius: 24px; filter: blur(14px); animation: up-brilho 5.5s ease-in-out 1.5s infinite; }
.up-neon-halo { position: absolute; inset: -1px; border-radius: 16px; pointer-events: none; z-index: 0; animation: up-halo 3.4s ease-in-out infinite; }
.up-neon-luz {
  position: absolute; inset: -2px; border-radius: 17px; padding: 2.5px; pointer-events: none; z-index: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: up-neon-giro var(--up-neon-dur, 9s) linear infinite, up-forca 3.4s ease-in-out infinite;
}
.up-plano--ouro { --up-neon-cor: var(--capi-ouro); --up-neon-dur: 9s; --up-halo: rgba(245, 185, 66, .4); }
.up-plano--azul { --up-neon-cor: var(--capi-azul-claro); --up-neon-dur: 10s; --up-halo: rgba(61, 114, 230, .4); }
.up-neon-brilho { background: radial-gradient(60% 55% at 50% 30%, color-mix(in srgb, var(--up-neon-cor) 33%, transparent), transparent 75%); }
.up-neon-brilho2 { background: radial-gradient(70% 50% at 50% 100%, color-mix(in srgb, var(--up-neon-cor) 20%, transparent), transparent 75%); }
.up-neon-halo { border: 1.5px solid color-mix(in srgb, var(--up-neon-cor) 50%, transparent); }
.up-neon-luz {
  background: conic-gradient(from var(--up-neon-a), transparent 0deg, transparent 200deg, color-mix(in srgb, var(--up-neon-cor) 33%, transparent) 250deg,
    var(--up-neon-cor) 295deg, var(--capi-texto) 302deg, var(--up-neon-cor) 310deg, color-mix(in srgb, var(--up-neon-cor) 33%, transparent) 340deg, transparent 360deg);
}
@keyframes up-neon-giro { to { --up-neon-a: 360deg; } }
@keyframes up-forca { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes up-brilho { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes up-deriva { 0%, 100% { transform: translateX(-8%); } 50% { transform: translateX(8%); } }
@keyframes up-halo { 0%, 100% { box-shadow: 0 0 6px var(--up-halo); } 50% { box-shadow: 0 0 22px var(--up-halo); } }

.up-pl-ficha { margin: 0 24px; padding: 14px 16px; border: 1px solid var(--capi-linha); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.up-pl-ficha-tit { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--capi-texto-3); margin: 0; }
.up-pl-ficha-txt { font-size: 12.5px; color: var(--capi-texto-2); line-height: 1.6; margin: 0; }
.up-pl-aceite { margin: 12px 24px 0; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--capi-texto-2); }
.up-pl-aceite input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--capi-azul); }
.up-pl-aceite a { color: var(--capi-azul-link); }
.up-pl-aceite { min-height: 44px; align-items: center; }   /* a linha inteira do aceite e alvo de 44 px */
.up-pl-aviso { margin: 12px 24px 0; font-size: 13px; color: var(--capi-ouro-texto); }
.up-pl-aviso[hidden], .up-pl-espera[hidden] { display: none; }
.up-pl-espera { font-size: 13px; color: var(--capi-ouro-texto); margin: 2px 0 0; }
.up-gestao { margin: 12px 24px 0; padding: 14px 16px; border: 1px solid var(--capi-linha); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.up-gestao[hidden] { display: none; }
.up-gestao-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.up-gestao-e { display: flex; flex-direction: column; gap: 2px; }
.up-gestao-tit { font-size: 14px; font-weight: 500; }
.up-gestao-txt { font-size: 13px; color: var(--capi-texto-3); margin: 0; }
.up-cancelar { border-color: var(--up-perigo-borda); color: var(--up-perigo-texto); }
.up-confirma {
  border: 1px solid var(--up-perigo-caixa-borda); background: var(--up-perigo-caixa-bg); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.up-confirma-tit { font-size: 14px; font-weight: 500; margin: 0; }
.up-confirma-txt { font-size: 13px; line-height: 1.5; color: var(--up-perigo-caixa-texto); margin: 0; }
.up-pl-rodape { padding: 12px 24px 18px; font-size: 12px; color: var(--capi-texto-4-forte); margin: 0; }

/* ---- TERMO ---- */
.up-tm { width: min(860px, 100%); height: calc(100vh - 48px); height: calc(100dvh - 48px); max-height: 900px; overflow: hidden; }
.up-tm .up-cab { padding-bottom: 16px; }
.up-tm-versao { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--capi-texto-3); }
.up-tm-corpo { flex: 1; min-height: 0; overflow: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.up-clausula { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.up-clausula-n { font-size: 13px; color: var(--capi-azul-claro); font-variant-numeric: tabular-nums; padding-top: 1px; }
.up-clausula-c { display: flex; flex-direction: column; gap: 4px; }
.up-clausula-t { font-size: 15px; font-weight: 500; margin: 0; }
.up-clausula-x { font-size: 13px; line-height: 1.6; color: var(--capi-texto-2); margin: 0; text-wrap: pretty; }
.up-tm-nota { font-size: 12px; color: var(--capi-texto-4); line-height: 1.5; padding-top: 6px; border-top: 1px solid var(--capi-linha); margin: 0; }
.up-tm-rodape {
  padding: 12px 24px 16px; border-top: 1px solid var(--capi-linha); display: flex; flex-direction: column; gap: 10px; background: var(--up-rodape-termo); flex-shrink: 0;
}
.up-tm-decls { display: grid; gap: 2px 20px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.up-decl {
  width: 100%; min-height: 30px; border: none; background: transparent; color: var(--up-texto-claro); font-size: 12.5px; line-height: 1.35;
  display: flex; align-items: center; gap: 10px; padding: 2px 0; cursor: pointer; text-align: left;
}
.up-decl:disabled { cursor: default; }
.up-decl--bloq { color: var(--capi-texto-4); }
.up-caixa {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--capi-texto-4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--capi-texto);
}
.up-decl[aria-pressed="true"] .up-caixa, .up-caixa--on { border-color: var(--capi-azul); background: var(--capi-azul); }
.up-tm-nome { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--capi-texto-2); }
.up-tm-nome input { height: 44px; border-radius: 9px; border: 1px solid var(--capi-borda); background: var(--capi-campo); color: var(--capi-texto); padding: 0 12px; font-size: 14px; }
.up-tm-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.up-tm-estado { font-size: 12px; color: var(--capi-texto-3); margin: 0; }
.up-tm-estado--ok { color: var(--capi-sucesso-texto); }
.up-tm-estado--erro { color: var(--capi-ouro-texto); }
.up-tm-btn { height: 42px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.up-tm-btn.up-btn-pri { padding: 0 18px; }
.up-tm-btn.up-btn-pri:disabled { background: transparent; opacity: .55; }

/* ---- SUPORTE ---- */
.up-sp {
  width: min(600px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto;
  background: linear-gradient(160deg, rgba(40, 60, 104, .46) 0%, rgba(16, 26, 50, .52) 100%);
  backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--capi-vidro-borda); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.up-sp .up-cab { border-bottom-color: rgba(255, 255, 255, .1); }
.up-sp .up-fechar { border-color: var(--capi-vidro-borda); background: rgba(255, 255, 255, .06); color: var(--up-texto-claro); }
.up-sp-form { padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.up-sp-par { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.up-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.up-campo-rot { font-weight: 500; font-size: 13px; }
.up-campo-topo { display: flex; justify-content: space-between; gap: 8px; }
.up-campo-cont { font-size: 12px; color: var(--capi-texto-3); font-variant-numeric: tabular-nums; }
.up-campo-cont--ok { color: var(--capi-sucesso-texto); }
.up-input, .up-area {
  width: 100%; border-radius: 9px; border: 1px solid var(--capi-vidro-borda); background: rgba(255, 255, 255, .06); color: var(--capi-texto); padding: 0 12px;
  font-size: 14px; outline: none;
}
.up-input { height: 44px; }
.up-input:focus-visible, .up-area:focus-visible { outline: 2px solid var(--capi-azul-link); outline-offset: 1px; }
.up-input--zap { font-variant-numeric: tabular-nums; }
.up-input--invalido, .up-area--invalido { border-color: var(--up-aviso-ambar); }
.up-area-caixa { position: relative; display: flex; }
.up-area { min-height: 130px; padding: 10px 56px 10px 12px; line-height: 1.5; resize: vertical; }
.up-mic {
  position: absolute; right: 10px; top: 10px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--capi-azul); background: var(--capi-azul);
  color: var(--capi-texto); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.up-mic[aria-pressed="true"] { background: var(--up-mic-ativo); border-color: var(--up-mic-borda-ativo); animation: up-pulso 1.4s ease-in-out infinite; }
@keyframes up-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 82, 217, 0); } 50% { box-shadow: 0 0 0 3px rgba(22, 82, 217, .16); } }
.up-ouvindo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--capi-texto-2); }
.up-ouvindo[hidden], .up-sem-voz[hidden] { display: none; }
.up-ouvindo-ponto { width: 8px; height: 8px; border-radius: 999px; background: var(--up-mic-borda-ativo); animation: up-brilho 1s ease-in-out infinite; }
.up-sem-voz { font-size: 12px; color: var(--capi-ouro-texto); }
.up-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.up-chip {
  height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--capi-vidro-borda); background: rgba(255, 255, 255, .05); color: var(--capi-texto);
  font-size: 12.5px; cursor: pointer;
}
.up-chip[aria-pressed="true"] { background: var(--capi-azul); border-color: var(--capi-azul); }
.up-ctx { border: none; background: transparent; color: var(--capi-texto-2); font-size: 13px; display: flex; align-items: flex-start; gap: 10px; padding: 0; cursor: pointer; text-align: left; }
.up-ctx-txt { flex: 1; min-width: 0; line-height: 1.45; }
.up-ctx-txt span { color: var(--capi-texto-3); }
.up-ctx[aria-pressed="true"] .up-caixa { border-color: var(--capi-azul); background: var(--capi-azul); }
.up-sp-erro { font-size: 13px; color: var(--capi-ouro-texto); margin: 0; }
.up-sp-erro[hidden] { display: none; }
.up-sp-acoes { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.up-sp-btn { height: 44px; padding: 0 16px; border-radius: 10px; font-size: 14px; border: 1px solid var(--capi-vidro-borda); background: rgba(255, 255, 255, .06); color: var(--capi-texto); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.up-sp-btn--pri { border-color: var(--capi-azul); background: var(--capi-azul); padding: 0 20px; font-weight: 500; }
.up-sp-btn--pri:hover { background: var(--capi-azul-hover); }
.up-sp-btn:disabled { opacity: .7; cursor: default; }
.up-giro { animation: up-giro .8s linear infinite; }
.up-sp-ok { padding: 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.up-sp-ok[hidden], .up-sp-form[hidden] { display: none; }
.up-sp-ok-ico { width: 52px; height: 52px; border-radius: 999px; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .5); display: flex; align-items: center; justify-content: center; color: var(--capi-sucesso); }
.up-sp-ok-tit { font-size: 18px; font-weight: 500; margin: 0; }
.up-sp-ok-prot { font-size: 14px; color: var(--capi-texto-2); margin: 0; font-variant-numeric: tabular-nums; }
.up-sp-ok-prot strong { color: var(--capi-texto); font-weight: 600; }
.up-sp-ok-txt { font-size: 13px; color: var(--up-texto-suave); max-width: 420px; line-height: 1.5; margin: 0; }

/* ---- Planos em computador (>= 1024 x 700).. a janela inteira cabe na tela, sem rolar, com os 4 cartoes lado a lado ---- */
@media (min-width: 1024px) and (min-height: 700px) {
  .up-sobre--planos { padding: clamp(6px, 1.6vh, 24px) 24px; }
  .up-pl { width: min(1240px, 100%); max-height: calc(100dvh - clamp(12px, 3.2vh, 48px)); }
  .up-pl .up-cab { padding: clamp(6px, 1.2vh, 14px) 18px clamp(6px, 1vh, 10px); }
  .up-pl .up-cab-id { gap: 12px; }
  .up-pl .up-cab-txt { gap: 2px; }
  .up-pl .up-titulo { font-size: clamp(17px, 2.3vh, 22px); }
  .up-pl .up-sub { font-size: 12.5px; }
  .up-pl .up-logo { height: 26px; width: 47.9px; }
  .up-pl .up-fechar { width: 44px; height: 44px; }
  .up-pl-grade { padding: clamp(12px, 2vh, 20px) 14px clamp(4px, .8vh, 10px); gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .up-plano { padding: clamp(8px, 1.4vh, 16px) 11px clamp(6px, 1vh, 10px); gap: clamp(3px, .6vh, 8px); border-radius: 14px; }
  .up-plano-cab { gap: 3px; }
  .up-plano-tag { min-height: 0; font-size: 13.5px; line-height: 1.3; }
  .up-preco { min-height: 0; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; }
  .up-preco-nota { flex-basis: 100%; }
  .up-preco-valor { font-size: clamp(22px, 3.2vh, 28px); }
  .up-destaque { min-height: 0; padding: 5px 10px; }
  .up-linha-extra { margin: 0; font-size: 12.5px; line-height: 1.3; }
  .up-itens { gap: clamp(2px, .4vh, 4px); }
  .up-item { font-size: 12.5px; line-height: 1.3; }
  .up-item-ok { margin-top: 2px; }
  .up-cta { height: 44px; font-size: 15px; }
  .up-equipe { min-height: 44px; margin-bottom: calc(-1 * clamp(6px, 1vh, 10px)); display: inline-flex; align-items: center; padding: 0 8px; line-height: 1; }
  .up-pl-ficha { margin: 0 14px; padding: 6px 12px; gap: 12px; border-radius: 10px; flex-direction: row; align-items: center; }
  .up-pl-ficha-tit { flex: 0 0 150px; font-size: 10.5px; line-height: 1.3; }
  .up-pl-ficha-txt { font-size: 12px; line-height: 1.35; }
  /* aceite e gestao da assinatura dividem a mesma linha (cada um com 44 px de altura) */
  .up-pl-pe { display: flex; align-items: stretch; gap: 10px; margin: 6px 14px 0; }
  .up-pl-pe > * { margin: 0; }
  .up-pl-aceite { flex: 1 1 0; min-width: 0; min-height: 44px; align-items: center; font-size: 12.5px; line-height: 1.3; }
  .up-pl-aviso, .up-pl-aviso-troca { margin: 6px 14px 0; }
  .up-gestao { flex: 0 1 auto; padding: 0 12px; gap: 0; justify-content: center; }
  .up-gestao-linha { gap: 8px; }
  .up-gestao-e { flex-direction: row; align-items: baseline; gap: 10px; }
  .up-pl .up-btn-sec, .up-pl .up-btn-pri { height: 44px; }
  .up-pl-rodape { padding: 3px 14px clamp(5px, 1vh, 10px); font-size: 11.5px; }
}

/* computador de tela baixa (700 a 760 de altura).. mais um degrau de compactacao */
@media (min-width: 1024px) and (min-height: 700px) and (max-height: 760px) {
  .up-pl .up-cab { padding-top: 4px; padding-bottom: 4px; }
  .up-pl .up-logo { height: 22px; width: 40.5px; }
  .up-pl-grade { padding-top: 12px; padding-bottom: 4px; }
  .up-plano { padding-top: 6px; padding-bottom: 5px; gap: 3px; }
  .up-marca, .up-chip-combo { padding-top: 2px; padding-bottom: 2px; }
  .up-preco-valor { font-size: 22px; }
  .up-item { font-size: 11.5px; line-height: 1.25; }
  .up-itens { gap: 2px; }
  .up-equipe { margin-bottom: -5px; }
  .up-pl-ficha { padding-top: 4px; padding-bottom: 4px; }
  .up-pl-pe, .up-pl-aviso, .up-pl-aviso-troca { margin-top: 4px; }
}

/* ---- celular e toque ---- */
@media (max-width: 899px) {
  .up-cab, .up-sp-form, .up-tm-corpo { padding-left: 16px; padding-right: 16px; }
  .up-pl-grade { padding-left: 16px; padding-right: 16px; }
  .up-pl-ficha, .up-gestao, .up-pl-aceite, .up-pl-aviso, .up-pl-aviso-troca { margin-left: 16px; margin-right: 16px; }
  .up-pl-rodape { padding-left: 16px; padding-right: 16px; }
  .up-tm-rodape { padding-left: 16px; padding-right: 16px; }
  .up-titulo { font-size: 20px; }
}
/* telefone.. "Agora nao" e "Aceitar" lado a lado como no design (o texto de ajuda fica numa linha so dele) */
@media (max-width: 480px) {
  .up-tm-linha { flex-direction: column; align-items: stretch; gap: 10px; }
  .up-tm .up-acoes { flex-wrap: nowrap; }
  .up-tm .up-tm-btn { padding: 0 12px; white-space: nowrap; }
  .up-tm .up-btn-pri.up-tm-btn { flex: 1 1 auto; min-width: 0; }
}
@media (pointer: coarse) {
  .up-fechar { width: 44px; height: 44px; }
  .up-btn-sec, .up-btn-pri { min-height: 44px; }
  .up-chip { min-height: 44px; }
  .up-decl { min-height: 44px; }
  .up-mic { width: 44px; height: 44px; }
  .up-ctx { min-height: 44px; align-items: center; }
  .up-equipe { min-height: 44px; display: inline-flex; align-items: center; }
  .up-tm-btn { min-height: 44px; }
}

/* ---- movimento reduzido ---- */
@media (prefers-reduced-motion: reduce) {
  .up-sobre *, .up-pl::after, .up-flutuante, .up-logo-img, .up-onda { animation: none !important; transition: none !important; }
  .up-onda { opacity: 1; }
  .up-neon-luz { display: none; }
  /* sem animacao o neon fica parado no brilho medio do design (o desenho some se so desligar a animacao) */
  .up-neon-brilho, .up-neon-brilho2 { opacity: .65; }
  .up-neon-halo { box-shadow: 0 0 14px var(--up-halo); }
}

.up-inf path { fill: none; stroke-linecap: round; }
.up-inf-traco { stroke: var(--capi-ouro); stroke-width: 2.6; }
.up-marca-pino { flex-shrink: 0; }
.up-marca-pino path { stroke: var(--capi-azul); stroke-width: 2.4; }
.up-pl-aviso-troca[hidden], .up-giro[hidden], .up-tm-estado[hidden] { display: none; }

/* Bloco "Pessoa" da busca por CPF e CNPJ (07/11/2026). Só variáveis da paleta (nenhum hex), prefixo pes-, nenhum texto em content (os textos moram em pessoa.js).
   Estado sempre com texto e ícone, nunca só cor. Alvos de 44 px, foco visível. Nenhuma animação.. a regra de movimento reduzido fica por garantia. */
.pes { display: grid; gap: 14px; min-width: 0; padding: 16px; border-radius: var(--raio); border: 1.5px solid var(--linha); background: var(--branco); color: var(--navy); }
.pes-cab { display: grid; gap: 4px; }
.pes-tit { display: flex; align-items: center; gap: 8px; font-size: 20px; line-height: 1.3; }
.pes-tit .ic { width: 22px; height: 22px; color: var(--azul-texto); }
.pes-sub { color: var(--texto-2); font-size: 15px; }
.pes-aviso { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--raio-p); background: var(--erro-fundo); color: var(--erro); font-weight: 600; }
.pes-aviso[hidden], .pes-erro[hidden] { display: none; }
.pes-secoes { display: grid; gap: 12px; min-width: 0; }
.pes-sec { display: grid; gap: 8px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--linha); }
.pes-sec:first-child { border-top: 0; padding-top: 0; }
.pes-sec-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.pes-sec-t { font-size: 16px; line-height: 1.4; }
.pes-sec-t:focus-visible, .pes-tit:focus-visible { outline: 3px solid var(--azul-texto); outline-offset: 2px; }
.pes-chip { font-size: 14px; }
.pes-chip--indisponivel { border: 2px solid var(--erro); }
.pes-chip--ok { border-color: var(--azul-borda); }
.pes-dados { display: grid; gap: 4px; margin: 0; }
.pes-par { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pes-par dt { font-weight: 650; min-width: 84px; }
.pes-par dd { margin: 0; overflow-wrap: anywhere; }
.pes-conf { justify-self: start; }
.pes-nota { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--texto-2); overflow-wrap: anywhere; }
.pes-nota .ic { margin-top: 2px; flex: 0 0 auto; }
.pes-nota--geral { padding-top: 10px; border-top: 1px solid var(--linha); }
.pes-reuso { min-width: 0; }
.pes-reuso > .pc { margin: 0; }
.pes-nome { display: grid; gap: 8px; padding: 12px; border-radius: var(--raio-p); background: var(--suave); border: 1px solid var(--linha); }
.pes-dica { font-size: 14px; color: var(--texto-2); }
.pes-erro { display: flex; gap: 8px; padding: 8px 10px; border-radius: var(--raio-p); background: var(--erro-fundo); color: var(--erro); font-weight: 600; }
.pes-btn { min-height: 44px; min-width: 44px; justify-self: start; }
.pes-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.pes-origens { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pes-origem { display: flex; flex-wrap: wrap; gap: 2px 6px; padding: 8px 10px; border-radius: var(--raio-p); border: 1px solid var(--linha); overflow-wrap: anywhere; }
.pes-pubs { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-size: 14px; overflow-wrap: anywhere; }
.pes-pub { display: list-item; }
.pes-sf-cartao { margin: 0; }
.pes-sec[data-estado="carregando"] { opacity: .85; }
.pes .tp-social { display: none; }   /* programas sociais exigem finalidade e ação.. o bloco Pessoa só lê */
.pes-resolucao--confirmar { padding: 10px 12px; border-radius: var(--raio-p); border: 2px solid var(--erro); background: var(--erro-fundo); color: var(--erro); font-weight: 650; }
@media (max-width: 520px) { .pes { padding: 12px; } .pes-par dt { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .pes, .pes * { transition: none; animation: none; } }

/* previa-endereco.css (aicapivara, 07/11/2026).. o card da previa do endereco (previa-endereco.js), acima de "Consultas recentes".
   O card tem SUPERFICIE PROPRIA e escura (fundo e texto do mesmo conjunto), entao o contraste nao depende do tema da pagina.
   Contraste medido (WCAG), texto sobre o fundo do card.. --pea-texto 15,6 · --pea-texto-2 10,4 · --pea-texto-3 6,9 (o teste calcula de novo).
   Hex so aqui em :root; o resto usa var(). Altura da moldura FIXA (16:9, no maximo 168 px) em todo estado visivel.. sem salto de layout.
   Animacao so em transform/opacity, e nenhuma com prefers-reduced-motion. */
:root {
  --pea-fundo: var(--capi-painel-2, #132039);
  --pea-fundo-2: var(--capi-campo, #1a2742);
  --pea-borda: var(--capi-linha, #26344f);
  --pea-texto: var(--capi-texto, #ffffff);
  --pea-texto-2: var(--capi-texto-2, #c8d3e4);
  --pea-texto-3: var(--capi-texto-3, #9aa8bf);
  --pea-ouro: var(--capi-ouro-texto, #ffd98a);
  --pea-brilho: rgba(255, 255, 255, .10);
  --pea-altura: 168px;
}

.pea {
  container-type: inline-size;
  display: flex; flex-direction: column; gap: 8px;
  margin: 12px 0 6px; padding: 8px;
  background: var(--pea-fundo); color: var(--pea-texto-2);
  border: 1px solid var(--pea-borda); border-radius: 14px;
  font-size: 14px; line-height: 1.5;
}
.pea[hidden] { display: none; }

/* a moldura nunca muda de altura entre carregando, ok e sem cobertura */
.pea-moldura {
  position: relative; overflow: hidden; border-radius: 10px;
  height: var(--pea-altura);
  background: var(--pea-fundo-2);
}
@container (min-width: 1px) {
  .pea-moldura { height: min(var(--pea-altura), 56.25cqw); }   /* 16:9 pela largura, teto de 168 px */
}
.pea-quadro { display: block; width: 100%; height: 100%; border: 0; }
.pea-esqueleto, .pea-vazio { position: absolute; inset: 0; background: var(--pea-fundo-2); }
.pea-vazio { background-image: linear-gradient(135deg, var(--pea-fundo-2), var(--pea-fundo)); }
.pea-brilho {
  position: absolute; inset: 0; width: 60%;
  background: linear-gradient(90deg, transparent, var(--pea-brilho), transparent);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .pea-brilho { animation: pea-brilho 1.4s ease-in-out infinite; }
}
@keyframes pea-brilho {
  from { transform: translateX(-100%); }
  to { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
  .pea-brilho { display: none; animation: none; }
}

/* legenda com altura reservada (duas linhas de texto e o aviso) para a troca de estado nao empurrar nada */
.pea-legenda { display: flex; flex-direction: column; gap: 2px; min-height: 66px; }
.pea-legenda p { margin: 0; overflow-wrap: anywhere; }
.pea-estado { font-size: 14px; font-weight: 600; color: var(--pea-texto); }
.pea-endereco { font-size: 13px; color: var(--pea-texto-2); }
.pea-endereco--diferente { color: var(--pea-ouro); }
.pea-aviso { font-size: 12px; color: var(--pea-texto-3); }
.pea-aviso[hidden] { display: none; }
.pea-quadro:focus-visible { outline: 2px solid var(--pea-texto); outline-offset: -2px; }

/* detetive.css (aicapivara Detetive, 07/11/2026).. a tela do Detetive (detetive.js), prefixo .ud-, tokens var(--capi-*) de ui-tokens.css.
   Mora dentro do painel esquerdo (.uf), SEM mudar a largura dele.. tudo encolhe (min-width: 0), o mapa é um SVG com viewBox e a grade é fluida.
   Contraste (medido em ui-tokens.css) .. texto, texto-3, texto-4-forte, azul-link, sucesso-texto, ouro-texto e erro-texto passam de 4,5 sobre painel-2, campo e sub.
   Estado nunca só por cor.. o nível vai em palavra e em FORMA (círculo, losango, triângulo) e a confiança em palavra, porcentagem e cor.
   Sem hex (todo tom vem de var), sem style= (valor dinâmico só por CSSOM), animação só em opacity e fora quando há movimento reduzido. */

.ud { display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--capi-texto); font-family: var(--capi-fonte); font-size: 14px; line-height: 1.5; }
.ud *, .ud *::before, .ud *::after { box-sizing: border-box; }
.ud [hidden], .ud-vista [hidden] { display: none !important; }
.ud button, .ud input, .ud-vista button { font-family: inherit; }
.ud button, .ud-vista button { cursor: pointer; }
.ud :focus-visible, .ud-vista :focus-visible, .ud-vista:focus-visible { outline: 2px solid var(--capi-azul-claro); outline-offset: 2px; }

/* ----- formulário ----- */
.ud-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ud-campo { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ud-rotulo { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--capi-texto); }
.ud-in { height: var(--capi-h-campo); min-height: 44px; width: 100%; min-width: 0; border-radius: var(--capi-r-campo); border: 1px solid var(--capi-borda); background: var(--capi-campo); color: var(--capi-texto); padding: 0 12px; font-size: 16px; outline: none; }
.ud-in::placeholder { color: var(--capi-texto-4-forte); }
.ud-in:focus-visible { outline: 2px solid var(--capi-azul-claro); outline-offset: 2px; }
.ud-in[aria-invalid="true"] { border-color: var(--capi-erro); }
.ud-botao { min-height: 46px; width: 100%; border: 1px solid var(--capi-azul); border-radius: var(--capi-r-botao); background: var(--capi-azul); color: var(--capi-texto); font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ud-botao:hover { background: var(--capi-azul-hover); }
.ud-botao:disabled { cursor: progress; background: transparent; }

/* ----- sugestões de bairro ----- */
.ud-sg { position: absolute; top: 74px; left: 0; right: 0; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--capi-campo); border: 1px solid var(--capi-borda); border-radius: var(--capi-r-botao); max-height: 280px; overflow-y: auto; }
.ud-sg-op { min-height: 44px; border: 0; border-radius: 7px; background: transparent; color: var(--capi-texto); font-size: 14px; padding: 8px 10px; text-align: left; }
.ud-sg-op[aria-selected="true"], .ud-sg-op:hover { background: var(--capi-sub); }

/* ----- estado e avisos ----- */
.ud-estado { margin: 0; font-size: 14px; line-height: 1.5; color: var(--capi-texto-3); }
.ud-estado--ok { color: var(--capi-texto); font-weight: 600; }
.ud-estado--aviso { color: var(--capi-ouro-texto); }
.ud-estado--erro { color: var(--capi-erro-texto); }
.ud-nota { margin: 0; font-size: 13px; line-height: 1.45; color: var(--capi-texto-3); }
.ud-nota--ok { color: var(--capi-sucesso-texto); }
.ud-aviso { margin: 0; padding: 10px 12px; border-radius: var(--capi-r-campo); border: 1px solid var(--capi-ouro); background: var(--capi-sub); color: var(--capi-ouro-texto); font-size: 13px; line-height: 1.45; }
.ud-res, .ud-res-topo, .ud-res-grade { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ud-sub { margin: 0; font-size: 15px; font-weight: 600; color: var(--capi-texto); }

/* ----- esqueleto (opacidade só, parado com movimento reduzido) ----- */
.ud-esqueleto { display: flex; flex-direction: column; gap: 10px; }
.ud-esq-l, .ud-esq-mapa { display: block; border-radius: var(--capi-r-campo); background: var(--capi-sub); animation: ud-pulso 1.4s ease-in-out infinite; }
.ud-esq-l { height: 14px; }
.ud-esq-l--1 { width: 80%; } .ud-esq-l--2 { width: 55%; } .ud-esq-l--3 { width: 70%; }
.ud-esq-mapa { height: 150px; }
@keyframes ud-pulso { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ----- chips ----- */
.ud-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ud-chip { min-height: 44px; padding: 0 14px; border-radius: var(--capi-r-pilula); border: 1px solid var(--capi-azul); background: var(--capi-sub); color: var(--capi-texto); font-size: 13px; }
.ud-chip:hover { background: var(--capi-campo); }

/* ----- mapa ----- */
.ud-mapa-caixa { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ud-mapa { display: block; width: 100%; height: auto; max-height: 340px; border-radius: 10px; }
.ud-mapa-fundo { fill: var(--capi-painel-2); stroke: var(--capi-borda); stroke-width: 1; }
.ud-rua-linha { fill: none; stroke: var(--capi-texto-4-forte); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.ud-rua-linha--sel { stroke: var(--capi-azul-link); stroke-width: 4.5; opacity: 1; }
.ud-ponto { cursor: pointer; outline: none; }
.ud-ponto-toque { fill: transparent; stroke: none; }
.ud-forma { stroke: var(--capi-fundo); stroke-width: 1.5; stroke-linejoin: round; }
.ud-ponto--alta .ud-forma, .ud-leg-cor--alta { fill: var(--capi-sucesso); background: var(--capi-sucesso); }
.ud-ponto--media .ud-forma, .ud-leg-cor--media { fill: var(--capi-ouro); background: var(--capi-ouro); }
.ud-ponto--baixa .ud-forma, .ud-leg-cor--baixa { fill: var(--capi-erro); background: var(--capi-erro); }
.ud-ponto--sel .ud-forma { stroke: var(--capi-texto); stroke-width: 3; }
.ud-ponto:focus-visible .ud-ponto-toque { stroke: var(--capi-azul-claro); stroke-width: 2; }
.ud-ponto-n { fill: var(--capi-texto); font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--capi-fundo); stroke-width: 3px; stroke-linejoin: round; }
.ud-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--capi-texto-3); }
.ud-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.ud-leg-ic { display: block; }
.ud-forma--leg { fill: var(--capi-texto-3); stroke: none; }
.ud-leg-cor { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.ud-leg-cores { gap: 6px; }

/* ----- lista ----- */
.ud-lista { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ud-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--capi-r-botao); border: 1px solid var(--capi-borda); background: var(--capi-painel-2); min-width: 0; }
.ud-item--sel { border-color: var(--capi-azul-link); background: var(--capi-sub); }
.ud-item--descartado { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; opacity: .8; }
.ud-item-desc { color: var(--capi-texto-3); font-size: 13px; text-decoration: line-through; min-width: 0; overflow-wrap: anywhere; }
.ud-item-tit { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--capi-texto); text-align: left; font-size: 15px; font-weight: 600; }
.ud-item-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--capi-azul-link); color: var(--capi-azul-link); font-size: 13px; }
.ud-item-rua { min-width: 0; overflow-wrap: anywhere; }
.ud-item-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ud-selo { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--capi-r-pilula); border: 1px solid var(--capi-borda); background: var(--capi-sub); color: var(--capi-texto); font-size: 12px; }
.ud-selo--alta { border-color: var(--capi-sucesso); }
.ud-selo--media { border-color: var(--capi-ouro); }
.ud-selo--baixa { border-color: var(--capi-erro); }
.ud-item-det { margin: 0; font-size: 13px; line-height: 1.45; color: var(--capi-texto-3); }
.ud-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ud-btn { min-height: 44px; padding: 0 14px; border-radius: var(--capi-r-botao); border: 1px solid var(--capi-azul); background: var(--capi-azul); color: var(--capi-texto); font-size: 13px; font-weight: 600; }
.ud-btn:hover { background: var(--capi-azul-hover); }
.ud-btn--sec { background: transparent; border-color: var(--capi-borda); color: var(--capi-texto); }
.ud-btn--sec:hover { background: var(--capi-sub); border-color: var(--capi-azul-link); }
.ud-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--capi-azul-link); font-size: 13px; text-decoration: underline; }
.ud-link:hover { color: var(--capi-azul-link-hover); }

/* ----- grade de prévias ----- */
.ud-grade-caixa { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ud-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ud-cartao { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border-radius: var(--capi-r-botao); border: 1px solid var(--capi-borda); background: var(--capi-painel-2); }
.ud-cartao-tit { margin: 0; font-size: 13px; font-weight: 600; color: var(--capi-texto); overflow-wrap: anywhere; }
.ud-quadro { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 140px; padding: 8px; border-radius: var(--capi-r-campo); background: var(--capi-campo); overflow: hidden; }
.ud-quadro-msg { margin: 0; font-size: 13px; color: var(--capi-texto-3); }
.ud-quadro-msg:empty { display: none; }
.ud-iframe { display: block; width: 100%; height: 168px; border: 0; border-radius: var(--capi-r-campo); background: var(--capi-campo); }
.ud-mais { align-self: flex-start; }

/* ----- painel grande ----- */
.ud-vista { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 16px; border: 1px solid var(--capi-borda); border-radius: var(--capi-r-painel); background: var(--capi-painel-2); color: var(--capi-texto); font-family: var(--capi-fonte); font-size: 14px; line-height: 1.5; overflow: auto; }
.ud-vista::backdrop { background: var(--capi-fundo); opacity: .78; }
.ud-vista *, .ud-vista *::before, .ud-vista *::after { box-sizing: border-box; }
.ud-vista:not([open]) { display: none; }
.ud-vista-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ud-vista-tit { margin: 0; font-size: 16px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ud-vista-quadro { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 240px; margin-bottom: 12px; padding: 8px; border-radius: var(--capi-r-campo); background: var(--capi-campo); }
.ud-vista-quadro .ud-iframe { height: min(60vh, 420px); }
.ud-fechar { flex: 0 0 auto; }

@media (max-width: 480px) {
  .ud-grade { grid-template-columns: 1fr; }
  .ud-acoes .ud-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ud *, .ud *::before, .ud *::after, .ud-vista, .ud-vista * { animation: none !important; transition: none !important; }
}

/* o painel esquerdo ganha um quarto segmento quando a conta tem a aba Codigo (Endereco, Codigo, CPF, Detetive).. a mesma grade do ui-filtro.css */
.uf .uf-seg--4 { grid-template-columns: repeat(4, 1fr); }
.uf .uf-painel-detetive { min-width: 0; }

/* aberta.css (09/11/2026).. a busca aberta sem login (aberta.js). Só tokens --capi-*, nada de hex fora de :root. Sem animação.
   Os blocos .aberta-embaco são ENFEITE vazio (sem texto, aria-hidden).. o conteúdo real nunca chega aqui. */
.aberta { display: none; margin-top: var(--capi-e-5); padding: var(--capi-e-4); border: 1px solid var(--capi-borda); border-radius: var(--capi-r-cartao); background: var(--capi-cartao); color: var(--capi-texto); }
body.sem-login .aberta { display: block; }
.aberta-tit { margin: 0 0 var(--capi-e-2); font-size: var(--capi-t-h3); line-height: 1.5; }
.aberta-ajuda { margin: 0 0 var(--capi-e-3); font-size: var(--capi-t-corpo); line-height: 1.5; color: var(--capi-texto-2); }
.aberta-tipos { display: flex; flex-wrap: wrap; gap: var(--capi-e-2); margin: 0 0 var(--capi-e-3); padding: 0; border: 0; }
.aberta-tipo { display: inline-flex; align-items: center; gap: var(--capi-e-2); min-height: var(--capi-h-toque); padding: 0 var(--capi-e-3); border: 1px solid var(--capi-borda); border-radius: var(--capi-r-pilula); background: var(--capi-campo); color: var(--capi-texto); font-size: var(--capi-t-corpo); cursor: pointer; }
.aberta-tipo:has(input:checked) { border-color: var(--capi-azul-link); background: var(--capi-painel-1); }
.aberta-tipo:has(input:focus-visible) { outline: 2px solid var(--capi-azul-link); outline-offset: 2px; }
.aberta-campo { display: grid; gap: var(--capi-e-1); margin-bottom: var(--capi-e-3); }
.aberta-campo[hidden], .aberta-campos[hidden] { display: none; }
.aberta-campo label { font-size: var(--capi-t-meta); color: var(--capi-texto-2); }
.aberta-campo input { min-height: var(--capi-h-campo-principal); padding: 0 var(--capi-e-3); border: 1px solid var(--capi-borda); border-radius: var(--capi-r-campo); background: var(--capi-campo); color: var(--capi-texto); font: inherit; }
.aberta-campo input:focus-visible { outline: 2px solid var(--capi-azul-link); outline-offset: 2px; }
.aberta-erro { margin: var(--capi-e-2) 0 0; color: var(--capi-erro-texto); font-size: var(--capi-t-corpo); line-height: 1.5; }
.aberta-sub { margin: var(--capi-e-4) 0 var(--capi-e-2); font-size: var(--capi-t-h3); }
.aberta-aviso, .aberta-nota { margin: var(--capi-e-2) 0; font-size: var(--capi-t-corpo); line-height: 1.5; color: var(--capi-texto-2); }
.aberta-nota { color: var(--capi-ouro-texto); }
.aberta-nota:empty { display: none; }
.aberta-sec { display: grid; gap: var(--capi-e-1); margin: var(--capi-e-3) 0; }
.aberta-sec__rot { font-size: var(--capi-t-meta); color: var(--capi-texto-2); }
.aberta-sec__trava { font-size: var(--capi-t-meta); color: var(--capi-texto-3); }
.aberta-embaco { display: grid; gap: var(--capi-e-2); padding: var(--capi-e-3); border: 1px solid var(--capi-linha); border-radius: var(--capi-r-campo); background: var(--capi-sub); filter: blur(3px); user-select: none; pointer-events: none; }
.aberta-linha { display: block; height: 10px; border-radius: var(--capi-r-pilula); background: var(--capi-borda); }
.aberta-linha--a { width: 78%; }
.aberta-linha--b { width: 56%; }
.aberta-linha--c { width: 68%; }
.aberta-cta { display: flex; flex-wrap: wrap; gap: var(--capi-e-2); margin-top: var(--capi-e-4); }
.aberta-cta .btn { min-height: var(--capi-h-toque); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .aberta *, .aberta-cta .btn { transition: none; animation: none; } }

/* barra-pesquisa.css (09/11/2026).. estilo da barra de evolução da pesquisa (<barra-pesquisa>, barra-pesquisa.js).
   Desenho do pacote "Redesign da barra de progresso" (tokens em barra-pesquisa-tokens.css do pacote), adaptado à CSP style-src 'self'.. o componente mora no DOM da página,
   as classes levam o prefixo bp- e os valores dinâmicos chegam por atributos data-* e custom properties (nunca style= em HTML).
   Só transform e opacity animam. Alvos de 44 px, foco visível, contraste >= 4,5, movimento reduzido sem animação. A barra é escura nos dois temas da página. */
barra-pesquisa {
  --bp-navy: #0c1432; --bp-navy-2: #121c42; --bp-azul: #7f9bff; --bp-azul-forte: #4f6fff; --bp-azul-claro: #c9d3ff;
  --bp-texto: #eef2ff; --bp-muted: #a3aed8; --bp-dim: #98a4d2;
  --bp-erro: #ff5a4e; --bp-erro-txt: #ff8a80; --bp-erro-claro: #ffd3cf; --bp-ok: #6fe3b4; --bp-sobre-erro: #1a0705;
  --bp-borda: rgba(127, 155, 255, .28); --bp-altura: 56px; --bp-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --bp-sombra-barra: rgba(4, 8, 24, .55); --bp-brilho-topo: rgba(255, 255, 255, .06); --bp-borda-ok: rgba(111, 227, 180, .45);
  --bp-borda-erro: rgba(255, 90, 78, .55); --bp-grade: rgba(127, 155, 255, .06); --bp-branco: #fff;
  --bp-borda-azul: rgba(127, 155, 255, .35); --bp-halo-marca: rgba(127, 155, 255, .25); --bp-fill-vazio: rgba(255, 255, 255, .18);
  --bp-fill-buscando: rgba(127, 155, 255, .3); --bp-brilho-azul: rgba(95, 125, 255, .8); --bp-brilho-erro: rgba(255, 90, 78, .8);
  --bp-azul-brilho: #a9b8ff; --bp-sombra-boneco: rgba(4, 8, 24, .9); --bp-fundo-conta: rgba(127, 155, 255, .1);
  --bp-fundo-conta-hover: rgba(127, 155, 255, .2); --bp-fundo-erro: rgba(255, 90, 78, .12); --bp-halo-erro: rgba(255, 90, 78, .35);
  --bp-erro-hover: #ff7a70; --bp-sombra-suave: rgba(4, 8, 24, .5); --bp-borda-ok-hover: rgba(111, 227, 180, .8);
  --bp-sombra-painel: rgba(4, 8, 24, .6); --bp-divisor-linha: rgba(127, 155, 255, .12); --bp-fundo-linha-hover: rgba(127, 155, 255, .08);
  --bp-ponto-aguardando: rgba(255, 255, 255, .35);
  display: block; container-type: inline-size; font-family: var(--capi-fonte, 'Nunito', system-ui, sans-serif); -webkit-font-smoothing: antialiased;
}
barra-pesquisa *, barra-pesquisa *::before, barra-pesquisa *::after { box-sizing: border-box; }
barra-pesquisa .bp-mono { font-family: var(--bp-mono); }
barra-pesquisa .bp-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
barra-pesquisa .bp-bar { width: 100%; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; min-height: var(--bp-altura); padding: 0 6px 0 8px;
  background-color: var(--bp-navy-2); background-image: linear-gradient(180deg, var(--bp-navy-2), var(--bp-navy)); border: 1px solid var(--bp-borda); border-radius: 12px; box-shadow: 0 10px 30px var(--bp-sombra-barra), inset 0 1px 0 var(--bp-brilho-topo); }
barra-pesquisa .bp-bar[data-fim="ok"] { border-color: var(--bp-borda-ok); }
barra-pesquisa .bp-bar[data-erro] { border-color: var(--bp-borda-erro); }
barra-pesquisa .bp-bar::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--bp-grade) 1px, transparent 1px), linear-gradient(90deg, var(--bp-grade) 1px, transparent 1px); background-size: 12px 12px; }
barra-pesquisa .bp-marca { position: relative; flex: none; width: 52px; height: 36px; border-radius: 9px; background: var(--bp-branco); box-shadow: 0 0 0 1px var(--bp-borda-azul), 0 0 12px var(--bp-halo-marca); display: flex; align-items: center; justify-content: center; }
barra-pesquisa .bp-cab { display: flex; transform-origin: 20% 100%; }
barra-pesquisa .bp-cab img { width: 40px; height: auto; display: block; }
barra-pesquisa .bp-bar[data-ocupado] .bp-cab { animation: bp-fungada 2.4s ease-in-out infinite; }
barra-pesquisa .bp-selo { position: absolute; right: -2px; top: -2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bp-navy); display: none; align-items: center; justify-content: center; color: var(--bp-navy); }
barra-pesquisa .bp-selo svg { width: 8px; height: 8px; }
barra-pesquisa .bp-bar[data-fim="ok"] .bp-selo { display: flex; background: var(--bp-ok); }
barra-pesquisa .bp-bar[data-fim="erro"] .bp-selo { display: flex; background: var(--bp-erro); }
barra-pesquisa .bp-status { position: relative; display: flex; align-items: center; gap: 8px; min-width: 140px; flex: 0 1 auto; max-width: 36%; }
barra-pesquisa .bp-tag { font-size: 12px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; color: var(--bp-azul); }
barra-pesquisa .bp-tag[data-tom="ok"] { color: var(--bp-ok); }
barra-pesquisa .bp-tag[data-tom="erro"] { color: var(--bp-erro-txt); }
barra-pesquisa .bp-tag[data-tom="mudo"] { color: var(--bp-muted); }
barra-pesquisa .bp-main { font-size: 14px; color: var(--bp-texto); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
barra-pesquisa .bp-mais { font-size: 13px; color: var(--bp-muted); white-space: nowrap; }
barra-pesquisa .bp-trilho { position: relative; flex: 1 1 240px; min-width: 240px; height: calc(var(--bp-altura) - 2px); }
barra-pesquisa .bp-grupos { position: absolute; left: 0; right: 0; top: 36px; display: flex; gap: 10px; align-items: center; }
barra-pesquisa .bp-g { display: flex; gap: 2px; align-items: center; min-width: 0; flex-basis: 0; }
barra-pesquisa .bp-g0 { min-width: 44px; }
barra-pesquisa .bp-cad { width: 11px; height: 11px; flex: none; margin: -3px 3px 0 0; color: var(--bp-azul-claro); }
barra-pesquisa .bp-cad svg { width: 11px; height: 11px; display: block; }
barra-pesquisa .bp-g0[data-aberto] .bp-cad { color: var(--bp-azul); animation: bp-abre .5s ease-out; }
barra-pesquisa .bp-seg { flex: 1; position: relative; padding: 8px 0; margin: -8px 0; }
barra-pesquisa .bp-fill { height: 3px; border-radius: 2px; background: var(--bp-fill-vazio); overflow: hidden; position: relative; transform-origin: 50% 50%; }
barra-pesquisa .bp-seg:hover .bp-fill { transform: scaleY(1.7); }
barra-pesquisa .bp-seg[data-st="buscando"] .bp-fill { background: var(--bp-fill-buscando); }
barra-pesquisa .bp-seg[data-st="pronta"] { cursor: pointer; }
barra-pesquisa .bp-seg[data-st="pronta"] .bp-fill { background: linear-gradient(90deg, var(--bp-azul-forte), var(--bp-azul)); box-shadow: 0 0 6px var(--bp-brilho-azul); }
barra-pesquisa .bp-seg[data-st="falhou"] .bp-fill { background: var(--bp-erro); box-shadow: 0 0 6px var(--bp-brilho-erro); }
barra-pesquisa .bp-brilho { position: absolute; inset: 0; width: 45%; background: linear-gradient(90deg, transparent, var(--bp-azul-brilho), transparent); display: none; animation: bp-brilho 1.1s ease-in-out infinite; }
barra-pesquisa .bp-seg[data-st="buscando"] .bp-brilho { display: block; }
barra-pesquisa .bp-corredor { position: absolute; left: 0; top: 24px; width: 16px; pointer-events: none; display: none; transform: translateX(var(--bp-x, 0px)); transition: transform 1.5s cubic-bezier(.45, .05, .35, 1); }
barra-pesquisa .bp-bar[data-ocupado] .bp-corredor { display: block; }
barra-pesquisa .bp-sombra { position: absolute; left: 2px; right: 4px; top: 10px; height: 2px; border-radius: 50%; background: var(--bp-sombra-boneco); opacity: .5; }
barra-pesquisa .bp-corpo { transform-origin: 50% 100%; animation: bp-respira 2.8s ease-in-out infinite; }
barra-pesquisa .bp-focinho { transform-origin: 30% 100%; animation: bp-fareja 4.5s ease-in-out infinite; }
barra-pesquisa .bp-corredor img { width: 16px; height: auto; display: block; }
barra-pesquisa .bp-corredor.bp-andando .bp-corpo { animation: bp-trote .38s ease-in-out infinite; }
barra-pesquisa .bp-corredor.bp-andando .bp-focinho { animation: none; }
barra-pesquisa .bp-corredor.bp-andando .bp-sombra { animation: bp-trote-sombra .38s ease-in-out infinite; }
barra-pesquisa .bp-conta { position: relative; border: 1px solid var(--bp-borda-azul); background: var(--bp-fundo-conta); cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 8px; color: var(--bp-texto); font: inherit; font-family: var(--bp-mono); }
barra-pesquisa .bp-conta:hover { background: var(--bp-fundo-conta-hover); }
barra-pesquisa .bp-conta b { font-size: 14px; font-variant-numeric: tabular-nums; }
barra-pesquisa .bp-conta span { font-size: 12px; color: var(--bp-muted); }
barra-pesquisa .bp-conta i { display: flex; color: var(--bp-muted); transition: transform .2s; }
barra-pesquisa .bp-conta i svg { width: 12px; height: 12px; }
barra-pesquisa .bp-wrap[data-aberto] .bp-conta i { transform: rotate(180deg); }
barra-pesquisa .bp-erro { position: relative; display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 2px 0 10px; border-radius: 8px; border: 1px solid var(--bp-borda-erro); background: var(--bp-fundo-erro); }
barra-pesquisa .bp-erro::after { content: ''; position: absolute; inset: -1px; border-radius: 8px; box-shadow: 0 0 0 3px var(--bp-halo-erro); pointer-events: none; opacity: 0; animation: bp-pulso 2s ease-in-out 1; }   /* um pulso ao chegar.. finito, para a barra parar de animar quando a ficha termina */
barra-pesquisa .bp-bar[data-erro] .bp-erro { display: flex; }
barra-pesquisa .bp-erro > i { display: flex; color: var(--bp-erro-txt); }
barra-pesquisa .bp-erro > i svg { width: 14px; height: 14px; }
barra-pesquisa .bp-erro-n { font-size: 13px; color: var(--bp-erro-claro); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
barra-pesquisa .bp-erro-r { font-size: 12px; color: var(--bp-erro-txt); white-space: nowrap; }
barra-pesquisa .bp-erro-acao { display: flex; flex: none; }
barra-pesquisa .bp-btn-tentar { border: none; background: var(--bp-erro); color: var(--bp-sobre-erro); font: 700 13px var(--capi-fonte, 'Nunito', system-ui, sans-serif); min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
barra-pesquisa .bp-btn-tentar:hover { background: var(--bp-erro-hover); }
barra-pesquisa .bp-btn-tentar svg { width: 12px; height: 12px; }
barra-pesquisa .bp-depois { font-size: 13px; color: var(--bp-erro-claro); font-weight: 600; padding: 0 8px; white-space: nowrap; }
barra-pesquisa .bp-dica { position: absolute; top: 64px; transform: translateX(-50%); width: 270px; background: var(--bp-navy); border: 1px solid var(--bp-borda); color: var(--bp-texto); font-size: 13px; line-height: 1.4; padding: 10px 12px; border-radius: 10px; z-index: 5; display: none; flex-direction: column; gap: 4px; box-shadow: 0 10px 24px var(--bp-sombra-painel); pointer-events: none; }
barra-pesquisa .bp-dica.bp-on { display: flex; }
barra-pesquisa .bp-dica-cod { font-size: 11px; color: var(--bp-azul); font-weight: 700; letter-spacing: .1em; }
barra-pesquisa .bp-dica-hd { display: flex; justify-content: space-between; gap: 8px; }
barra-pesquisa .bp-dica-hd b { font-weight: 700; }
barra-pesquisa .bp-dica-hd span { font-size: 12px; font-weight: 600; white-space: nowrap; }
barra-pesquisa .bp-dica-dt { color: var(--bp-dim); }
barra-pesquisa .bp-dica-dt.bp-d-pronta { color: var(--bp-muted); }
barra-pesquisa .bp-dica-dt.bp-d-falhou { color: var(--bp-erro-txt); }
barra-pesquisa .bp-dica-ir { color: var(--bp-muted); font-size: 12px; }
barra-pesquisa .bp-painel { position: absolute; top: 64px; right: 0; width: min(600px, 100%); background: var(--bp-navy); border: 1px solid var(--bp-borda); border-radius: 12px; box-shadow: 0 14px 36px var(--bp-sombra-painel); padding: 14px 16px; display: none; flex-direction: column; gap: 14px; z-index: 4; animation: bp-entra .18s ease-out; }
barra-pesquisa .bp-wrap[data-aberto] .bp-painel { display: flex; }
barra-pesquisa .bp-pg { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
barra-pesquisa .bp-pg b { font-size: 12px; font-weight: 700; color: var(--bp-azul); letter-spacing: .12em; }
barra-pesquisa .bp-pg span { font-size: 12px; color: var(--bp-dim); }
barra-pesquisa .bp-linha { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px; margin: 0; border: 0; border-top: 1px solid var(--bp-divisor-linha); border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; }
barra-pesquisa button.bp-linha { cursor: pointer; }
barra-pesquisa .bp-linha:hover { background: var(--bp-fundo-linha-hover); }
barra-pesquisa .bp-num { font-size: 12px; color: var(--bp-dim); width: 18px; flex: none; }
barra-pesquisa .bp-ponto { width: 6px; height: 6px; border-radius: 50%; flex: none; margin: 0 2px; background: var(--bp-ponto-aguardando); }
barra-pesquisa .bp-linha[data-st="pronta"] .bp-ponto { background: var(--bp-azul); box-shadow: 0 0 6px var(--bp-brilho-azul); }
barra-pesquisa .bp-linha[data-st="buscando"] .bp-ponto { background: var(--bp-azul-claro); }
barra-pesquisa .bp-linha[data-st="falhou"] .bp-ponto { background: var(--bp-erro); box-shadow: 0 0 6px var(--bp-brilho-erro); }
barra-pesquisa .bp-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
barra-pesquisa .bp-tx b { font-size: 14px; color: var(--bp-texto); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
barra-pesquisa .bp-tx span { font-size: 12px; color: var(--bp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
barra-pesquisa .bp-linha[data-st="pronta"] .bp-tx span { color: var(--bp-muted); }
barra-pesquisa .bp-linha[data-st="falhou"] .bp-tx span { color: var(--bp-erro-txt); }
barra-pesquisa .bp-lnk { border: none; background: none; color: var(--bp-erro-txt); font: 600 13px var(--capi-fonte, 'Nunito', system-ui, sans-serif); cursor: pointer; padding: 0 8px; min-height: 44px; min-width: 44px; white-space: nowrap; text-decoration: underline; }
barra-pesquisa .bp-lb { font-size: 12px; font-weight: 600; white-space: nowrap; min-width: 84px; text-align: right; color: var(--bp-dim); }
barra-pesquisa .bp-c-pronta { color: var(--bp-azul); }
barra-pesquisa .bp-c-falhou { color: var(--bp-erro-txt); }
barra-pesquisa .bp-c-buscando { color: var(--bp-azul-claro); }
barra-pesquisa .bp-c-aguardando { color: var(--bp-dim); }
barra-pesquisa button:focus-visible { outline: 3px solid var(--bp-azul-claro); outline-offset: 2px; }
barra-pesquisa .bp-btn-tentar:focus-visible { outline-color: var(--bp-branco); }
@keyframes bp-brilho { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes bp-fungada { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-4deg); } 80% { transform: rotate(0); } 90% { transform: rotate(-3deg); } }
@keyframes bp-trote { 0% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(0) scale(1.06, .92); } 50% { transform: translateY(-3px) scale(.96, 1.05); } 80% { transform: translateY(0) scale(1.04, .95); } 100% { transform: none; } }
@keyframes bp-trote-sombra { 0%, 100% { transform: scaleX(1); opacity: .55; } 50% { transform: scaleX(.7); opacity: .3; } }
@keyframes bp-respira { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 1.035); } }
@keyframes bp-fareja { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-5deg); } 90% { transform: rotate(-1deg); } 94% { transform: rotate(-4deg); } }
@keyframes bp-pulso { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes bp-entra { 0% { opacity: 0; transform: translateY(-4px) scale(.98); } 100% { opacity: 1; transform: none; } }
@keyframes bp-abre { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* abaixo de 720 px DE LARGURA DA BARRA (container query.. a barra mora numa coluna, não na janela).. o trilho vira um fio na base da barra, o motivo sai do aviso (fica no title e na lista) e, com falha, o aviso toma o lugar do texto de estado */
@container (max-width: 719.98px) {
  barra-pesquisa .bp-bar { gap: 8px; }
  barra-pesquisa .bp-status { flex: 1 1 auto; max-width: none; min-width: 0; }
  barra-pesquisa .bp-trilho { position: absolute; left: 8px; right: 8px; bottom: 3px; top: auto; height: 6px; min-width: 0; flex: none; }
  barra-pesquisa .bp-grupos { top: 0; }
  barra-pesquisa .bp-corredor { display: none !important; }
  barra-pesquisa .bp-erro-r { display: none; }
  barra-pesquisa .bp-bar[data-erro] .bp-status { display: none; }
  barra-pesquisa .bp-erro { flex: 1 1 auto; min-width: 0; }
  barra-pesquisa .bp-dica { display: none !important; }
}
@container (max-width: 1079.98px) { barra-pesquisa .bp-erro-r { display: none; } }
/* 09/11/2026 (ordem do dono, barra sempre inteira).. em 375 px o estado ficava 'Ficha com…'.. abaixo de 480 px o rótulo (CONCLUÍDO) passa para cima do texto, em duas linhas dentro dos 56 px */
@container (max-width: 479.98px) {
  barra-pesquisa .bp-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'tag tag' 'main mais'; column-gap: 6px; row-gap: 0; align-items: center; }
  barra-pesquisa .bp-tag { grid-area: tag; font-size: 11px; line-height: 1.15; }
  barra-pesquisa .bp-main { grid-area: main; line-height: 1.2; }
  barra-pesquisa .bp-mais { grid-area: mais; }
}
@media (prefers-reduced-motion: reduce) {
  barra-pesquisa *, barra-pesquisa *::before, barra-pesquisa *::after { animation: none !important; transition: none !important; }
}
barra-pesquisa[reduzir-movimento] *, barra-pesquisa[reduzir-movimento] *::before, barra-pesquisa[reduzir-movimento] *::after { animation: none !important; transition: none !important; }