.pc-escolas     { --pc: #3b82c4; }
.pc-saude       { --pc: #e2704f; }
.pc-transportes { --pc: #8b5cb8; }
.pc-compras     { --pc: #1f9d8f; }
.pc-restauracao { --pc: #d99a1f; }
.pc-lazer       { --pc: #5f9d55; }

.poi-status { padding: 10px 0; font-size: 13px; color: #857f74; }

.poi-mapbox {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center;
  margin: 10px 0 20px;
}
.poi-map {
  width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #f5faf6 0%, #ecf3ee 70%, #e4eee7 100%);
  box-shadow: inset 0 0 0 1px #d8e6dc;
}
.poi-map-svg { display: block; width: 100%; height: auto; }
.pm-edge { fill: none; stroke: #c9ddd0; stroke-width: 1.5; }
.pm-ring { fill: none; stroke: #cfe0d5; stroke-dasharray: 4 5; }
.pm-ring-t { font-size: 9.5px; fill: #6f8a79; font-family: "Inter", system-ui, sans-serif; }
.pm-north { font-size: 10px; font-weight: 700; fill: #6f8a79; font-family: "Inter", system-ui, sans-serif; }
.pm-dot { fill: var(--pc); stroke: #fff; stroke-width: 1.4; cursor: pointer; transition: opacity .2s; }
.pm-dot:hover { stroke: #1d1b18; stroke-width: 2; }
.pm-home circle { fill: #1d1b18; stroke: #fff; stroke-width: 3; }
.pm-home svg { color: #fff; }
.poi-mapbox[data-focus] .pm-dot { opacity: .1; }
.poi-mapbox[data-focus="escolas"] .pm-dot.pc-escolas,
.poi-mapbox[data-focus="saude"] .pm-dot.pc-saude,
.poi-mapbox[data-focus="transportes"] .pm-dot.pc-transportes,
.poi-mapbox[data-focus="compras"] .pm-dot.pc-compras,
.poi-mapbox[data-focus="restauracao"] .pm-dot.pc-restauracao,
.poi-mapbox[data-focus="lazer"] .pm-dot.pc-lazer { opacity: 1; }

.poi-score { margin: 0 0 14px; font-size: 15px; line-height: 1.4; color: #4b4740; }
.poi-score strong { font-size: 32px; font-weight: 800; color: #2f9e6b; margin-right: 4px; }
.poi-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.poi-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid #e7e2d8; background: #fff;
  font: inherit; font-size: 13px; font-weight: 600; color: #1d1b18; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.poi-chip b { color: var(--pc); font-variant-numeric: tabular-nums; }
.poi-chip:hover { border-color: var(--pc); }
.poi-chip[aria-pressed="true"] { border-color: var(--pc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 22%, transparent); }
.pc-ic {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--pc) 15%, #fff); color: var(--pc);
}
.pc-ic .ic { width: 16px; height: 16px; }
.poi-hint { margin: 12px 0 0; font-size: 12px; color: #857f74; }

.poi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.poi-card {
  padding: 14px 16px; border-radius: 14px; background: #fff;
  border: 1px solid #eee9df; border-top: 4px solid var(--pc);
}
.poi-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.poi-card h4 { flex: 1; margin: 0; font-size: 14.5px; font-weight: 700; color: #1d1b18; }
.pc-n {
  padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--pc) 14%, #fff); color: var(--pc);
}
.pc-first { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: 13.5px; font-weight: 650; color: #1d1b18; }
.pc-first em { font-style: normal; font-size: 12.5px; font-weight: 650; color: var(--pc); white-space: nowrap; }
.poi-card ul { list-style: none; margin: 0; padding: 0; }
.poi-card li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px dashed #eee9df; font-size: 12.5px; color: #4b4740; }
.poi-card li em { font-style: normal; color: #857f74; white-space: nowrap; }
.pc-none { margin: 0; font-size: 13px; color: #857f74; }

.tip {
  position: fixed; z-index: 300; max-width: 280px; pointer-events: none;
  padding: 7px 11px; border-radius: 9px; background: #1d1b18; color: #fff;
  font: 600 12.5px/1.4 "Inter", system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

@media print {
  .poi-mapbox, .poi-card { break-inside: avoid; }
  .poi-chip { box-shadow: none !important; }
  .tip, .poi-hint { display: none !important; }
}

@media (max-width: 720px) {
  .poi-mapbox { grid-template-columns: 1fr; }
  .poi-side { text-align: center; }
  .poi-legend { justify-content: center; }
}