/* perto.css — /adocao/perto-de-mim/ e o seletor de etapa (perto.js). 05/11/2026.
   Só existe neste frontend (SO_DAQUI do sincronizar-assets.py). Texto sempre em tinta/tinta-2,
   que passam AA nas superfícies claras usadas aqui; cor de etapa vai no FUNDO, nunca no texto. */

.pa-controles { display: grid; gap: .6rem; margin: 1.2rem 0 0; }
.pa-controles .filtros-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pa-rotulo { font-weight: 600; font-size: .95rem; color: var(--tinta); margin-right: .2rem; }
.pa-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--tinta-2); min-height: 24px; }
.pa-check input { width: 18px; height: 18px; accent-color: var(--caramelo-escuro); }

.pa-lista li > div:first-child { gap: .3rem; }

.pa-etapa { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: .35rem;
  padding: .2rem .35rem .2rem .2rem; border-radius: 999px; background: var(--areia, #F4EDE2); max-width: 100%;
  align-self: flex-start; }
.pa-etapa select { font: inherit; font-size: .88rem; color: var(--tinta); background: #fff;
  border: 1.5px solid var(--linha, #D9CFC0); border-radius: 999px; padding: .3rem .7rem; min-height: 32px; max-width: 100%; }
.pa-etapa select:focus-visible { outline: 3px solid var(--caramelo-escuro); outline-offset: 2px; }
.pa-desde { font-size: .8rem; color: var(--tinta-2); padding-right: .3rem; }

.pa-etapa--quero   { background: var(--manteiga-2, #FBEFC9); }
.pa-etapa--falei   { background: var(--ceu-papel, #E4EEF6); }
.pa-etapa--marcada { background: var(--pessego, #F9D8BF); }
.pa-etapa--adotei  { background: var(--salvia-2, #E0EAD3); }
.pa-etapa--naodeu  { background: var(--rosa-2, #FBE3EC); }

.roteiro-itens .pa-etapa { margin: .1rem 0 .4rem; }
.pa-resumo { margin-bottom: .6rem; }

@media print { .pa-etapa select { border: 0; padding: 0; background: none; appearance: none; } }

/* O mapa de /adocao/perto-de-mim/: a mesma malha do /adocao/, com uma bolinha por cidade.
   Bolinha em caramelo-escuro (a cor da bolha de contagem do /adocao/); fora do raio, ela some
   para 35% depois da busca, e a cidade no raio ganha contorno em tinta. */
.pa-mapa { margin-top: 2rem; }
.mapa-cidade { fill: var(--caramelo-escuro); fill-opacity: .82; stroke: var(--papel, #fff); stroke-width: 1.4;
  transition: fill-opacity var(--dur-r, .2s) var(--curva, ease); }
.mapa-cidade-link:hover .mapa-cidade { fill-opacity: 1; }
.mapa-uf--busca .mapa-cidade { fill-opacity: .35; }
.mapa-uf--busca .mapa-cidade--dentro { fill-opacity: 1; stroke: var(--tinta); stroke-width: 1.6; }
.mapa-voce-raio { fill: var(--caramelo-escuro); fill-opacity: .08; stroke: var(--caramelo-escuro);
  stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.mapa-voce-ponto { fill: var(--azul-texto, #1F4E79); stroke: #fff; stroke-width: 2.5; pointer-events: none; }
.pa-ufs-titulo { font-weight: 600; font-size: .95rem; margin: 1.4rem 0 .6rem; color: var(--tinta); }
.pa-mapa .pa-lista { margin-top: .8rem; }
.pa-mapa .serv-perto-nota { margin-top: 0; }