/* Cap. 31 — Design system VisitePB (tokens de tema + acessibilidade AA) */
:root {
  --vpb-primary: #1E3A8A;  /* institucional / religioso */
  --vpb-orange:  #EA580C;  /* sertão / gastronomia */
  --vpb-green:   #15803D;  /* extreme / ecoturismo */
  --vpb-gold:    #D97706;  /* economia solidária */
  --vpb-health:  #16A34A;  /* utilidade pública / saúde */
  --vpb-alert:   #DC2626;  /* defesa civil */
}

:focus-visible { outline: 3px solid var(--vpb-primary); outline-offset: 2px; }

.vpb-navbar, .vpb-footer { background-color: var(--vpb-primary); }
.vpb-btn-primary { background-color: var(--vpb-primary); color: #fff; }
.vpb-btn-primary:hover { filter: brightness(1.15); color: #fff; }

/* Alvo de toque acessível ≥ 44px (Cap. 31/36) */
.btn, .nav-link, .form-select, .form-control { min-height: 44px; }
.navbar-brand { min-height: 44px; display: inline-flex; align-items: center; }

/* Grade de categorias rápidas (T09) */
.vpb-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.vpb-quick {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1rem; border-radius: 1rem; text-decoration: none; color: #212529;
  background: #fff; border: 1px solid #dee2e6; min-height: 44px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.vpb-quick:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); }
.vpb-quick__icon { font-size: 2rem; line-height: 1; }
.vpb-quick__label { font-weight: 600; text-align: center; }

/* Hero da home */
.vpb-hero {
  background: linear-gradient(135deg, var(--vpb-primary), #3B5BC4 60%, var(--vpb-orange));
  color: #fff; padding: 3.5rem 0;
}

/* Assistente flutuante */
.vpb-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1040;
  width: 56px; height: 56px; font-size: 1.4rem;
}
.vpb-msg { padding: .5rem .75rem; border-radius: .75rem; margin-bottom: .5rem; max-width: 92%; }
.vpb-msg-bot  { background: #f1f3f5; white-space: pre-line; }
.vpb-msg-user { background: var(--vpb-primary); color: #fff; margin-left: auto; }

/* Badges de categoria (design system geoespacial, Cap. 33.1) */
/* Fallback para categorias do Atlas sem cor específica (deve vir ANTES das regras específicas) */
.badge[class*="vpb-cat-"] { background: #64748B; }
.vpb-cat-religious      { background: var(--vpb-primary) !important; }
.vpb-cat-gastronomy     { background: var(--vpb-orange) !important; }
.vpb-cat-extreme        { background: var(--vpb-green) !important; }
.vpb-cat-cultural       { background: #7C3AED !important; }
.vpb-cat-event          { background: #BE185D !important; }
.vpb-cat-shopping       { background: #0E7490 !important; }
.vpb-cat-public_service { background: var(--vpb-health) !important; }
.vpb-cat-solidary       { background: var(--vpb-gold) !important; }

/* Pins DivIcon do mapa */
.vpb-pin {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.vpb-pin > span { transform: rotate(45deg); font-size: 14px; }
.vpb-pin--diamond { border-radius: 4px; transform: rotate(45deg); }
.vpb-pin--diamond > span { transform: rotate(-45deg); }
.vpb-pin--square { border-radius: 6px; transform: none; }
.vpb-pin--square > span { transform: none; }

/* Timeline do roteiro (T10) */
.vpb-timeline { border-left: 3px dashed var(--vpb-primary); padding-left: 1.25rem; }
.vpb-timeline .vpb-stop { position: relative; margin-bottom: 1rem; }
.vpb-timeline .vpb-stop::before {
  content: ""; position: absolute; left: -1.65rem; top: .35rem;
  width: .8rem; height: .8rem; border-radius: 50%; background: var(--vpb-orange);
}

/* Carimbo do passaporte */
.vpb-stamp {
  border: 3px dashed var(--vpb-gold); border-radius: 50%;
  width: 130px; height: 130px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  transform: rotate(-6deg); color: var(--vpb-gold); font-weight: 700;
  padding: .5rem;
}

/* ── Atlas Paraíba ─────────────────────────────────────────── */
.vpb-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.vpb-photo-pin {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  border: 3px solid; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.vpb-photo-pin img { width: 100%; height: 100%; object-fit: cover; }
.vpb-legend {
  background: rgba(255,255,255,.94); border-radius: 8px; padding: .4rem .6rem;
  box-shadow: 0 1px 5px rgba(0,0,0,.3); font-size: .78rem; max-width: 230px;
}
.vpb-legend-head { font-weight: 700; cursor: pointer; user-select: none; }
.vpb-atlas-panel { max-height: 76vh; overflow-y: auto; }
.vpb-cats .form-check { min-height: 28px; }
.vpb-cats .form-check-input, .vpb-cats .form-check-label { min-height: 0; }

/* Navegação: item ativo */
.vpb-navbar .nav-link.active {
  font-weight: 700; border-bottom: 3px solid #FCD34D;
}

/* Cards de atrativo com foto */
.vpb-card-photo { height: 160px; object-fit: cover; }

/* Chips de região na home */
.vpb-region-chip {
  display: inline-flex; align-items: center; padding: .45rem .9rem; margin: .2rem;
  border-radius: 2rem; background: #fff; border: 1px solid #dee2e6;
  color: #1E3A8A; text-decoration: none; font-weight: 600; min-height: 44px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.vpb-region-chip:hover { transform: translateY(-2px); box-shadow: 0 .3rem .6rem rgba(0,0,0,.12); color: var(--vpb-orange); }

/* Faixa de estatísticas */
.vpb-stats-strip { background: #F8FAFC; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; }
.vpb-stats-strip .num { font-size: 1.6rem; font-weight: 800; color: var(--vpb-primary); }

/* Botão voltar ao topo */
.vpb-top-btn {
  position: fixed; right: 1rem; bottom: 5rem; z-index: 1039; display: none;
  width: 44px; height: 44px; border-radius: 50%;
}

@media print {
  .vpb-navbar, .vpb-footer, .vpb-fab, form, .btn { display: none !important; }
}

/* ── Roteiro: um dia, uma cor (mapa, legenda e linha do tempo) ─────────── */
.vpb-timeline .vpb-stop::before { background: var(--dia-cor, var(--vpb-orange)); }
.vpb-pino {
  width: 28px; height: 28px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.vpb-pino-partida { background: #111827; width: 30px; height: 30px; font-size: 1rem; }
.vpb-legenda-mapa {
  background: rgba(255,255,255,.92); padding: .35rem .55rem; border-radius: .4rem;
  font-size: .78rem; line-height: 1.5; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  display: flex; flex-direction: column; gap: .1rem;
}
.vpb-legenda-mapa i {
  display: inline-block; width: .75rem; height: .75rem; border-radius: 50%;
  margin-right: .35rem; vertical-align: -1px;
}

/* ── Ficha do atrativo: vizinhos recomendados ──────────────────────────── */
.vpb-reco-sem-foto {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; background: linear-gradient(135deg, #eef2ff, #fff7ed);
}
.vpb-reco { transition: box-shadow .15s ease; }
.vpb-reco:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); }

/* ── Roteiro por várias cidades: a chegada na cidade é uma parada ───────── */
.vpb-timeline .vpb-stop-cidade {
  background: color-mix(in srgb, var(--dia-cor, var(--vpb-primary)) 10%, #fff);
  border-left: 4px solid var(--dia-cor, var(--vpb-primary));
}
.vpb-timeline .vpb-stop-cidade::before { width: 1rem; height: 1rem; left: -1.75rem; top: .3rem; }
.vpb-pino-cidade { width: 32px; height: 32px; font-size: 1rem; border-width: 3px; }

/* ══════════════════════════════════════════════════════════════════════════
   MAPEAMENTO SETORIAL — mapa e painel
   ══════════════════════════════════════════════════════════════════════════
   O mapa é a tela onde a secretaria reconhece o próprio território, então o
   desenho evita ruído: o pino carrega a cor do setor (identidade) e um anel
   com a cor da situação (estado). Duas informações num objeto de 34px, sem
   precisar abrir nada.
*/

.vpb-mapa-setorial { display: flex; flex-direction: column; gap: .65rem; }

.vpb-mapa-setorial__barra {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
}
.vpb-mapa-setorial__busca {
  position: relative; display: flex; align-items: center; gap: .4rem;
  flex: 1 1 240px; max-width: 380px;
}
.vpb-mapa-setorial__busca input { min-width: 0; }
.vpb-mapa-setorial__acoes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.vpb-mapa-setorial__acoes .form-select { width: auto; min-width: 9.5rem; }

/* Legenda que também filtra */
.vpb-mapa-setorial__legenda { display: flex; flex-wrap: wrap; gap: .35rem; }
.vpb-setor-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid #E2E8F0; background: #fff; border-radius: 999px;
  padding: .22rem .6rem .22rem .45rem; font-size: .78rem; line-height: 1.3;
  color: #0F172A; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease, transform .1s ease;
}
.vpb-setor-chip:hover:not(:disabled) { border-color: var(--cor); transform: translateY(-1px); }
.vpb-setor-chip:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }
.vpb-setor-chip__ponto {
  width: .6rem; height: .6rem; border-radius: 50%; background: var(--cor); flex: none;
}
.vpb-setor-chip__nome { font-weight: 500; }
.vpb-setor-chip__n {
  background: #F1F5F9; border-radius: 999px; padding: 0 .4rem;
  font-variant-numeric: tabular-nums; font-size: .72rem; color: #475569;
}
.vpb-setor-chip.is-off { opacity: .42; background: #F8FAFC; }
.vpb-setor-chip.is-off .vpb-setor-chip__ponto { background: #CBD5E1; }
.vpb-setor-chip.is-vazio, .vpb-setor-chip:disabled { opacity: .38; cursor: default; }

.vpb-mapa-setorial__palco { position: relative; }
.vpb-mapa-setorial__mapa {
  border-radius: .65rem; border: 1px solid #E2E8F0; overflow: hidden; background: #EEF2F6;
}
.vpb-mapa-setorial__contador {
  margin: .4rem 0 0; font-size: .78rem; color: #64748B; font-variant-numeric: tabular-nums;
}
.vpb-mapa-setorial__vazio {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 1rem;
  background: rgba(248, 250, 252, .92); border-radius: .65rem;
}

/* Pino: cor do setor no corpo, cor da situação no anel */
.vpb-pin-setor {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cor); color: #fff; font-size: 15px; line-height: 1;
  border: 3px solid var(--anel);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .35);
  position: relative;
  transition: transform .12s ease;
}
.vpb-pin-setor:hover { transform: scale(1.12); }
.vpb-pin-setor--sem-ficha { border-style: dashed; }
.vpb-pin-setor__cadeado {
  position: absolute; right: -6px; bottom: -6px; font-size: 11px;
  background: #fff; border-radius: 50%; padding: 1px 2px; font-style: normal;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
}

/* Popup da ficha */
.vpb-pop { font-size: 12.5px; line-height: 1.45; }
.vpb-pop__topo {
  display: flex; gap: .5rem; align-items: flex-start;
  border-left: 4px solid var(--cor); padding-left: .5rem; margin-bottom: .45rem;
}
.vpb-pop__icone { font-size: 18px; line-height: 1.2; }
.vpb-pop__topo strong { font-size: 13.5px; display: block; }
.vpb-pop__setor { color: var(--cor); font-weight: 600; font-size: 11.5px; }
.vpb-pop__tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .45rem; }
.vpb-tag {
  font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: .1rem .45rem;
  background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 35%, #fff);
}
.vpb-tag--neutra { --c: #475569; }
.vpb-tag--vazia  { --c: #94A3B8; }
.vpb-tag--alerta { --c: #B45309; }
.vpb-pop__lista { margin: 0 0 .5rem; display: grid; gap: .18rem; }
.vpb-pop__lista > div { display: grid; grid-template-columns: 1.1rem 1fr; gap: .3rem; }
.vpb-pop__lista dt { font-weight: 400; }
.vpb-pop__lista dd { margin: 0; }
.vpb-pop__vazio { color: #64748B; font-style: italic; margin: 0 0 .5rem; }
.vpb-pop__acao { font-weight: 600; text-decoration: none; }
.vpb-pop__acao:hover { text-decoration: underline; }

/* ── Painel do mapeamento ────────────────────────────────────────────────── */

.vpb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .65rem; }
.vpb-kpi {
  background: #fff; border: 1px solid #E2E8F0; border-radius: .65rem; padding: .7rem .85rem;
  border-top: 3px solid var(--c, #0D2B69); display: flex; flex-direction: column; gap: .1rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.vpb-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .5); }
.vpb-kpi__n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vpb-kpi__r { font-size: .76rem; color: #64748B; }
.vpb-kpi__extra { font-size: .72rem; color: #94A3B8; }

/* Barra de completude — o dado mais consultado do painel */
.vpb-barra { height: .5rem; border-radius: 999px; background: #F1F5F9; overflow: hidden; }
.vpb-barra > span { display: block; height: 100%; background: var(--c, #0D2B69); border-radius: 999px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1); }

.vpb-setor-card {
  background: #fff; border: 1px solid #E2E8F0; border-radius: .65rem; padding: .8rem .9rem;
  border-left: 4px solid var(--c); height: 100%;
  display: flex; flex-direction: column; gap: .5rem;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.vpb-setor-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -14px rgba(15, 23, 42, .55); }
.vpb-setor-card__topo { display: flex; align-items: center; gap: .45rem; }
.vpb-setor-card__icone { font-size: 1.15rem; }
.vpb-setor-card__nome { font-weight: 600; font-size: .92rem; }
.vpb-setor-card__n { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.vpb-setor-card__linha { display: flex; justify-content: space-between; font-size: .76rem; color: #64748B; }
.vpb-setor-card__sit { display: flex; flex-wrap: wrap; gap: .2rem; }

/* Distribuição em barra empilhada, sem biblioteca de gráfico */
.vpb-pilha { display: flex; height: .75rem; border-radius: 999px; overflow: hidden; background: #F1F5F9; }
.vpb-pilha > span { display: block; height: 100%; }
.vpb-pilha-legenda { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .74rem; color: #475569; }
.vpb-pilha-legenda i { width: .55rem; height: .55rem; border-radius: 2px; display: inline-block; margin-right: .25rem; }

@media (prefers-reduced-motion: reduce) {
  .vpb-setor-chip, .vpb-kpi, .vpb-setor-card, .vpb-pin-setor, .vpb-barra > span { transition: none; }
}

/* Ação de marcar natureza dentro do popup do mapa */
.vpb-pop__marcar { margin: .25rem 0 .35rem; }
.vpb-pop__botao {
  border: 1px solid #E2E8F0; background: #F8FAFC; border-radius: .35rem;
  font-size: 11px; padding: .18rem .45rem; cursor: pointer; color: #475569; width: 100%;
  transition: background-color .12s ease, border-color .12s ease;
}
.vpb-pop__botao:hover { background: #FEF2F2; border-color: #FCA5A5; color: #B91C1C; }

/* Item recém-alterado: um realce curto para o olho reencontrar a linha */
.vpb-destacado {
  animation: vpb-piscar 2.2s ease-out;
  border-radius: .4rem;
}
@keyframes vpb-piscar {
  0%, 55% { background-color: #FEF9C3; box-shadow: 0 0 0 3px #FDE68A; }
  100%    { background-color: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .vpb-destacado { animation: none; background-color: #FEF9C3; } }

/* Pino da ocorrência no mapa do painel. Círculo simples de propósito: a
   gota rotacionada viraria o emoji junto, e um pino torto atrapalha a leitura. */
.vpb-pin-ocorrencia {
  width: 30px; height: 30px; border-radius: 50%;
  background: #DC2626; border: 3px solid #fff; color: #fff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
  animation: vpb-pulsar 2s ease-out infinite;
}
@keyframes vpb-pulsar {
  0%   { box-shadow: 0 3px 8px rgba(15,23,42,.45), 0 0 0 0 rgba(220,38,38,.5); }
  70%  { box-shadow: 0 3px 8px rgba(15,23,42,.45), 0 0 0 14px rgba(220,38,38,0); }
  100% { box-shadow: 0 3px 8px rgba(15,23,42,.45), 0 0 0 0 rgba(220,38,38,0); }
}
@media (prefers-reduced-motion: reduce) { .vpb-pin-ocorrencia { animation: none; } }

/* ── Tela cheia dos mapas do painel ─────────────────────────────────────────
   A caixa inteira vai para a tela cheia (busca, filtros, legenda e mapa):
   tela cheia só do quadro do mapa deixaria o servidor sem os filtros
   justamente quando ele mais precisa varrer o município. */
.vpb-mapa-setorial:fullscreen,
.vpb-mapa-setorial.vpb-quase-cheia {
  background: #fff; padding: 1rem; overflow: auto;
}
.vpb-mapa-setorial:fullscreen .vpb-mapa-setorial__mapa,
.vpb-mapa-setorial.vpb-quase-cheia .vpb-mapa-setorial__mapa {
  height: calc(100vh - 190px) !important;
}
.vpb-mapa-setorial.vpb-quase-cheia {
  position: fixed; inset: 0; z-index: 1080;
}
/* A barra e a legenda grudam no topo para não sumirem ao rolar */
.vpb-mapa-setorial:fullscreen .vpb-mapa-setorial__barra,
.vpb-mapa-setorial.vpb-quase-cheia .vpb-mapa-setorial__barra {
  position: sticky; top: 0; background: #fff; z-index: 2; padding-bottom: .4rem;
}

/* Pino da ocorrência no mapa de segurança */
.vpb-pin-oc {
  border-radius: 50%; background: var(--c); border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .4);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px; line-height: 1;
}
.vpb-pin-oc--trilha { border-color: #7C3AED; border-width: 3px; }

/* Parque, unidade de conservação ou reserva ao longo da trilha. Discreto de
   propósito: quem manda na leitura do mapa é o traçado, não o entorno. */
.vpb-pin-conservacao {
  width: 22px; height: 22px; border-radius: 50%;
  background: #ECFDF5; border: 2px solid #15803D;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
}

/* ── Galeria de mídias na gestão ────────────────────────────────────────────
   Miniatura em vez de linha de texto: quem confere o cadastro precisa VER a
   foto, e uma lista de nomes de arquivo não diz se a imagem certa subiu. */
.vpb-galeria-gestao {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem;
}
.vpb-midia-item {
  margin: 0; border: 1px solid #E2E8F0; border-radius: .5rem; overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
}
.vpb-midia-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #F1F5F9; }
.vpb-midia-item__icone {
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; background: #F1F5F9;
}
.vpb-midia-item figcaption { padding: .4rem .5rem; font-size: .74rem; line-height: 1.35; }
.vpb-midia-item--quebrada { outline: 2px solid #DC2626; }
.vpb-midia-item--quebrada img { display: none; }
.vpb-midia-item--quebrada figcaption::before {
  content: '⚠️ A imagem não carregou — o endereço externo pode ter saído do ar.';
  display: block; color: #B91C1C; font-weight: 600; margin-bottom: .2rem;
}

/* ── Galeria da ficha do atrativo ───────────────────────────────────────────
   A primeira foto ocupa o dobro: numa grade de quadradinhos iguais nenhuma é
   a foto principal, e a ficha perde a hierarquia logo na primeira olhada. */
.vpb-galeria {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .75rem;
}
.vpb-galeria__item {
  position: relative; padding: 0; border: 0; background: #F1F5F9; border-radius: .5rem;
  overflow: hidden; cursor: zoom-in; aspect-ratio: 1;
  transition: transform .15s ease, box-shadow .15s ease;
}
.vpb-galeria__item--destaque { grid-column: span 2; grid-row: span 2; }
.vpb-galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vpb-galeria__item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(15,23,42,.6); }
.vpb-galeria__item:focus-visible { outline: 3px solid var(--vpb-primary, #1E3A8A); outline-offset: 2px; }
.vpb-galeria__lupa {
  position: absolute; top: .4rem; right: .4rem; background: rgba(15,23,42,.6); color: #fff;
  border-radius: 50%; width: 1.6rem; height: 1.6rem; display: flex; align-items: center;
  justify-content: center; font-size: .8rem; opacity: 0; transition: opacity .15s ease;
}
.vpb-galeria__item:hover .vpb-galeria__lupa,
.vpb-galeria__item:focus-visible .vpb-galeria__lupa { opacity: 1; }
.vpb-galeria__credito {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .4rem .3rem;
  font-size: .68rem; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(15,23,42,.75));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 575px) {
  .vpb-galeria { grid-template-columns: repeat(2, 1fr); }
  .vpb-galeria__item--destaque { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; }
}

/* Foto ampliada */
.vpb-lightbox {
  position: fixed; inset: 0; z-index: 1090; background: rgba(15,23,42,.92);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.vpb-lightbox.is-aberta { display: flex; }
.vpb-lightbox__palco { margin: 0; max-width: min(1100px, 94vw); text-align: center; }
.vpb-lightbox__palco img {
  max-width: 100%; max-height: 78vh; border-radius: .5rem; display: block; margin: 0 auto;
  background: #0F172A;
}
.vpb-lightbox figcaption { color: #E2E8F0; font-size: .85rem; margin-top: .6rem; }
.vpb-lightbox__legenda { display: block; font-weight: 600; }
.vpb-lightbox__credito { display: block; color: #94A3B8; font-size: .78rem; }
.vpb-lightbox__contador { display: block; color: #64748B; font-size: .74rem; margin-top: .2rem; }
.vpb-lightbox__fechar, .vpb-lightbox__nav {
  position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0;
  border-radius: 50%; width: 2.6rem; height: 2.6rem; font-size: 1.4rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vpb-lightbox__fechar { top: 1rem; right: 1rem; font-size: 1.1rem; }
.vpb-lightbox__nav--ant { left: 1rem; }
.vpb-lightbox__nav--prox { right: 1rem; }
.vpb-lightbox__fechar:hover, .vpb-lightbox__nav:hover { background: rgba(255,255,255,.25); }
@media (prefers-reduced-motion: reduce) { .vpb-galeria__item { transition: none; } }

/* ── Pedido online ──────────────────────────────────────────────────────────
   O contador no item substitui o botão "adicionar": mostra de relance o que
   já foi escolhido e deixa corrigir sem abrir nada. */
.vpb-qtd { display: flex; align-items: center; gap: .3rem; flex: none; }
.vpb-qtd__n { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.vpb-item-cardapio.is-escolhido { background: #F0FDF4; border-left: 3px solid #15803D; }

/* O carrinho acompanha a rolagem: escolher e conferir são a mesma tarefa */
@media (min-width: 992px) { .vpb-carrinho { position: sticky; top: 1rem; } }

/* Fila do comerciante: o pedido novo salta aos olhos de longe */
.vpb-pedido { border-left: 4px solid #CBD5E1; }
.vpb-pedido--recebido { border-left-color: #2563EB; animation: vpb-novo 1.6s ease-out 3; }
.vpb-pedido--aceito    { border-left-color: #D97706; }
.vpb-pedido--pronto    { border-left-color: #7C3AED; }
.vpb-pedido--a_caminho { border-left-color: #0E7490; }
.vpb-pedido__codigo { font-family: ui-monospace, monospace; font-size: 1.1rem; letter-spacing: .05em; }
@keyframes vpb-novo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(37, 99, 235, .28); }
}
@media (prefers-reduced-motion: reduce) { .vpb-pedido--recebido { animation: none; } }

/* Linha do tempo do pedido, para o cliente */
.vpb-passos { display: flex; gap: .35rem; }
.vpb-passo {
  flex: 1; text-align: center; opacity: .4; transition: opacity .2s ease;
}
.vpb-passo.is-feito { opacity: 1; }
.vpb-passo__bolha {
  display: flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; margin: 0 auto .25rem;
  border-radius: 50%; background: #F1F5F9; border: 2px solid #CBD5E1; font-size: 1rem;
}
.vpb-passo.is-feito .vpb-passo__bolha { background: color-mix(in srgb, var(--c) 15%, #fff); border-color: var(--c); }
.vpb-passo.is-atual .vpb-passo__bolha { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.vpb-passo__nome { font-size: .7rem; line-height: 1.2; display: block; }

/* ── Caderno de trilhas ─────────────────────────────────────────────────────
   A mesma linguagem visual do aplicativo, para quem usa os dois não sentir que
   mudou de produto: herói azul com os números em ouro, chips arredondados nas
   abas, selo colorido de situação e um vazio que ensina o que fazer. */
.vpb-caderno {
  position: relative; overflow: hidden; border-radius: 18px; padding: 1.1rem 1.25rem; color: #fff;
  background: linear-gradient(135deg, #0D2B69 0%, #091632 100%);
  box-shadow: 0 6px 18px rgba(13, 43, 105, .25);
}
.vpb-caderno::after {
  content: ''; position: absolute; right: -36px; top: -36px; width: 150px; height: 150px;
  border-radius: 50%; background: rgba(243, 180, 4, .16); pointer-events: none;
}
.vpb-caderno > * { position: relative; }
.vpb-caderno h2 { color: #fff; margin: 0; font-size: 1.05rem; font-weight: 800; }
.vpb-caderno__sub { opacity: .85; font-size: .82rem; margin: .2rem 0 0; }
.vpb-caderno__nums { display: flex; gap: 1.4rem; margin-top: .85rem; flex-wrap: wrap; }
.vpb-caderno__nums div { display: flex; flex-direction: column; }
.vpb-caderno__nums strong {
  font-size: 1.25rem; font-weight: 900; color: #F3B404; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.vpb-caderno__nums span { font-size: .6rem; text-transform: uppercase; letter-spacing: .6px; opacity: .8; }

/* Abas em pílula: rolam na horizontal no celular, sem barra à mostra */
.vpb-chips { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .5rem; scrollbar-width: none; }
.vpb-chips::-webkit-scrollbar { display: none; }
.vpb-chip {
  flex: 0 0 auto; padding: .5rem .85rem; border-radius: 999px; text-decoration: none;
  background: #fff; border: 1.5px solid #E2E8F0; color: #475569;
  font-size: .84rem; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center;
}
.vpb-chip:hover { border-color: #0D2B69; color: #0D2B69; }
.vpb-chip.is-ativo { background: #0D2B69; border-color: #0D2B69; color: #fff; }

.vpb-selo { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.vpb-selo--verde    { background: #E2F6E9; color: #14713A; }
.vpb-selo--azul     { background: #E2E7F1; color: #0D2B69; }
.vpb-selo--amarelo  { background: #FEF6EB; color: #8D6D13; }
.vpb-selo--vermelho { background: #FDECEC; color: #8F2424; }

/* Card de trilha percorrida: o card inteiro é o link (regra do alvo grande) */
.vpb-trilha-item { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.vpb-trilha-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .55); color: inherit; }
.vpb-trilha-item:focus-visible { outline: 3px solid #0D2B69; outline-offset: 2px; }
.vpb-trilha-nums {
  display: flex; gap: 1rem; flex-wrap: wrap; margin: .35rem 0 0;
  font-size: .82rem; color: #475569; font-variant-numeric: tabular-nums;
}
.vpb-trilha-nums b { color: #0F172A; font-weight: 700; }

.vpb-vazio { text-align: center; padding: 2.25rem 1.25rem; color: #64748B; }
.vpb-vazio__icone { font-size: 2.6rem; line-height: 1; margin-bottom: .5rem; }

/* Álbum de pontos */
.vpb-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.vpb-album__item {
  border: 1px solid #E2E8F0; border-radius: .6rem; overflow: hidden; background: #fff;
  text-align: left; padding: 0; display: flex; flex-direction: column;
}
.vpb-album__item img, .vpb-album__sem { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #F1F5F9; }
.vpb-album__sem { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.vpb-album__txt { padding: .4rem .5rem; font-size: .74rem; line-height: 1.35; }

/* Os cartões da conta viram porta de entrada — e precisam parecer clicáveis */
.vpb-atalho { text-decoration: none; color: inherit; display: block; height: 100%; }
.vpb-atalho .card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.vpb-atalho:hover .card { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .55); border-color: var(--vpb-primary); }
.vpb-atalho:focus-visible { outline: 3px solid var(--vpb-primary); outline-offset: 3px; border-radius: .5rem; }
.vpb-atalho__ir { font-size: .68rem; color: var(--vpb-primary); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .vpb-trilha-item, .vpb-atalho .card { transition: none; }
  .vpb-trilha-item:hover, .vpb-atalho:hover .card { transform: none; }
}

/* ── Perfil de elevação em linha única ──────────────────────────────────────
   O contorno é um traço só; o que muda ao longo dele é a cor, que responde a
   pergunta de quem vai andar: onde sobe forte? A área preenchida saiu — a
   mancha pesava mais que as ondulações, que são a informação. */
.vpb-perfil {
  position: relative; margin: 0; overflow: hidden; height: 260px;
  background: #fff; border: 1px solid #E2E8F0; border-radius: .5rem;
}
.vpb-perfil-tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.vpb-perfil-trechos line {
  stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.vpb-perfil-linha { fill: none; stroke: none; }
.vpb-perfil-grade { stroke: #E6E9EF; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vpb-perfil-topo  { fill: #fff; stroke: #B91C1C; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.vpb-perfil-cota, .vpb-perfil-km {
  position: absolute; font-size: .66rem; color: #64748B; background: rgba(255,255,255,.75);
  padding: 0 .2rem; border-radius: .2rem; pointer-events: none; white-space: nowrap;
}
.vpb-perfil-cota { left: .35rem; transform: translateY(-50%); }
.vpb-perfil-km   { bottom: .3rem; transform: translateX(-50%); }
.vpb-perfil-volta { position: absolute; left: 50%; top: 0; bottom: 0; width: 0;
                    border-left: 2px dashed #94A3B8; }
.vpb-perfil-volta-rotulo { position: absolute; left: 50%; top: .35rem; transform: translateX(-50%);
                           font-size: .66rem; color: #475569; background: rgba(255,255,255,.85);
                           padding: 0 .25rem; border-radius: .2rem; }

/* A legenda traz só as inclinações presentes neste caminho */
.vpb-perfil-legenda {
  display: flex; flex-wrap: wrap; gap: .25rem .85rem; margin-top: .4rem;
  font-size: .7rem; color: #475569;
}
.vpb-perfil-legenda span { display: inline-flex; align-items: center; gap: .3rem; }
.vpb-perfil-legenda i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* Barra de progresso do mapa do estado */
.vpb-progresso {
  height: 9px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden;
}
.vpb-progresso span { display: block; height: 100%; background: #F3B404; border-radius: 999px; }

/* Legenda dentro de um mapa Leaflet */
.vpb-legenda-mapa {
  background: rgba(255,255,255,.92); border: 1px solid #E2E8F0; border-radius: .4rem;
  padding: .4rem .55rem; font-size: .7rem; color: #475569; line-height: 1.6;
  box-shadow: 0 1px 4px rgba(15,23,42,.15);
}
.vpb-legenda-mapa strong { display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .4px; color: #0F172A; margin-bottom: .15rem; }
.vpb-legenda-mapa span { display: flex; align-items: center; gap: .35rem; }
.vpb-legenda-mapa i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ── Módulo de deslocamento ─────────────────────────────────────────────────
   Linguagem do PassaportePB: azul institucional, ouro no que importa, e a
   próxima manobra grande o bastante para ser lida de relance. */
.vpb-pin-destino {
  font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(15,23,42,.45));
}
.vpb-pin-parada {
  width: 26px; height: 26px; border-radius: 50%; background: #0D2B69; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.45);
}

.vpb-recado {
  background: #FEF6EB; border: 1px solid #F7C63A; color: #8D6D13;
  padding: .5rem .75rem; border-radius: .5rem; font-size: .85rem; margin-bottom: .6rem;
}
.vpb-recado.is-erro { background: #FDECEC; border-color: #F5B5B5; color: #8F2424; }

/* A próxima manobra */
.vpb-manobra {
  display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 14px;
  color: #fff; background: linear-gradient(135deg, #0D2B69 0%, #091632 100%);
  box-shadow: 0 6px 18px rgba(13,43,105,.25);
}
.vpb-manobra__seta { font-size: 2rem; line-height: 1; color: #F3B404; }
.vpb-manobra__txt strong { display: block; font-size: 1rem; line-height: 1.25; }
.vpb-manobra__txt small { display: block; opacity: .85; font-size: .76rem; margin-top: .15rem; }

/* Lista de instruções */
.vpb-passos { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.vpb-passos__item {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .55rem .9rem; border-top: 1px solid #EEF2F7; font-size: .84rem;
}
.vpb-passos__item:hover { background: #F8FAFC; }
.vpb-passos__seta { color: #0D2B69; font-size: 1.05rem; line-height: 1.3; flex: 0 0 1.2rem; }
.vpb-passos__item small { display: block; color: #64748B; font-size: .74rem; }
.vpb-passos__vazio { padding: .9rem; color: #64748B; font-size: .84rem; }

@media (max-width: 991px) {
  .vpb-manobra { position: sticky; top: .5rem; z-index: 5; }
}

/* Paradas do roteiro na tela de caminho */
.vpb-paradas { list-style: none; margin: 0; padding: 0; }
.vpb-paradas li {
  display: flex; align-items: center; gap: .6rem; padding: .45rem 0;
  border-bottom: 1px solid #EEF2F7; font-size: .86rem;
}
.vpb-paradas li:last-child { border-bottom: none; }
.vpb-paradas__n {
  flex: 0 0 26px; height: 26px; border-radius: 50%; background: #0D2B69; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800;
}

/* Escolhas em cartão: alvo grande, estado claro, sem depender só da bolinha */
.vpb-escolhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; }
.vpb-escolha {
  display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; cursor: pointer;
  border: 1.5px solid #E2E8F0; border-radius: .55rem; font-size: .86rem; min-height: 44px;
  background: #fff;
}
.vpb-escolha:hover { border-color: #0D2B69; }
.vpb-escolha:has(input:checked) { border-color: #0D2B69; background: #F3F5F9; font-weight: 600; }
.vpb-escolha:has(input:focus-visible) { outline: 3px solid #0D2B69; outline-offset: 2px; }

/* Pré-visualização da foto anexada a uma correção: a pessoa confere que
   mandou a imagem certa antes de a correção sair da mão dela. */
.vpb-previa { margin: 0; }
.vpb-previa img {
  display: block; width: 100%; max-height: 240px; object-fit: cover;
  border-radius: .5rem; border: 1px solid #E2E8F0; background: #F8FAFC;
}

/* Ações dentro do balão do Atlas */
.vpb-popup-acoes { margin: .4rem 0 .25rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.vpb-popup-btn {
  display: inline-block; padding: .3rem .6rem; border-radius: 999px; text-decoration: none;
  background: #0D2B69; color: #fff !important; font-size: .76rem; font-weight: 600;
}
.vpb-popup-btn:hover { filter: brightness(1.15); }
.vpb-popup-btn--claro { background: #fff; color: #0D2B69 !important; border: 1.5px solid #0D2B69; }
.vpb-popup-mais summary { font-size: .74rem; color: #64748B; cursor: pointer; }

/* O mapa do deslocamento: alto no computador, mais baixo no celular — ali a
   próxima manobra vem antes dele e as duas coisas precisam caber na tela. */
.vpb-mapa-rota { height: 460px; }
@media (max-width: 991px) {
  .vpb-mapa-rota { height: 300px; }
}

/* Convite para completar uma ficha vazia: presente, sem competir com o
   conteúdo — quem está lendo já demonstrou interesse pelo lugar. */
.vpb-convite {
  display: flex; gap: .85rem; align-items: flex-start;
  background: #FDF6E6; border: 1px solid #F3D89A; border-left: 4px solid #C98A04;
  border-radius: .5rem; padding: .9rem 1rem;
}
.vpb-convite__icone { font-size: 1.5rem; line-height: 1.2; }
.vpb-convite p { font-size: .88rem; color: #6B5310; }