* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: system-ui, -apple-system, sans-serif; color: #222; }
body { display: flex; flex-direction: column; }
header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0.6rem 1rem; background: #1a3a5c; color: #fff;
}
header h1 { font-size: 1.05rem; font-weight: 600; }
header .status { font-size: 0.8rem; opacity: 0.75; }
#map { flex: 1; }
footer {
  padding: 0.4rem 1rem; background: #f5f5f5; border-top: 1px solid #ddd;
  font-size: 0.75rem; color: #555;
}
footer a { color: #1a3a5c; }

.maplibregl-popup-content { padding: 0; border-radius: 6px; overflow: hidden; min-width: 240px; max-width: 360px; }
.popup { font-size: 0.85rem; }
.popup-mota {
  padding: 0.35rem 0.7rem; color: #fff; font-weight: 600; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.popup-urbana { background: #2563eb; }
.popup-rustica { background: #16a34a; }
.popup h3 { padding: 0.4rem 0.7rem 0.2rem; font-size: 1rem; }
.popup dl { display: grid; grid-template-columns: max-content auto; gap: 0.1rem 0.6rem; padding: 0.2rem 0.7rem 0.4rem; }
.popup dt { color: #666; }
.popup dd { color: #111; }
.popup code { background: #f0f0f0; padding: 0 0.3rem; border-radius: 3px; font-size: 0.8em; }

.popup-related { padding: 0.5rem 0.7rem 0.65rem; border-top: 1px solid #eee; background: #fafafa; }
.popup-related strong { display: block; color: #c2410c; font-size: 0.82rem; }
.popup-related .popup-total { color: #555; font-size: 0.78rem; margin-bottom: 0.3rem; }
.popup-related ul { list-style: none; max-height: 160px; overflow-y: auto; }
.popup-related li { display: flex; justify-content: space-between; padding: 0.1rem 0; font-size: 0.78rem; }
.popup-related li.more { color: #888; font-style: italic; }
.popup-only { color: #777; font-style: italic; }
.popup-related li.current { font-weight: 600; background: #fff7ed; padding: 0.1rem 0.25rem; border-radius: 3px; }
.popup-actions { padding: 0.5rem 0.7rem; border-top: 1px solid #eee; background: #f9fafb; text-align: right; }
.popup-actions a { color: #1a3a5c; font-size: 0.8rem; text-decoration: none; }
.popup-actions a:hover { text-decoration: underline; }