/* 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; }
}