/* Vista pública — complemento del tema */
.wrap { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; }
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.page-header h1 { margin: 0; font-size: 1.45rem; font-weight: 700; }
.page-header p { margin: 0.35rem 0 0; color: var(--text-muted); font-size: 0.92rem; max-width: 36rem; }
.pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; }
.pill {
  font-size: 0.72rem; padding: 0.25rem 0.55rem; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted);
}
.nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.nav-links a {
  color: var(--text); text-decoration: none; font-size: 0.88rem; font-weight: 500;
  padding: 0.45rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.nav-links a:hover { border-color: var(--gold-border); color: var(--gold); }
.nav-links a.gold {
  background: var(--gold-soft); border-color: var(--gold-border); color: var(--gold);
}
#heatmapMap {
  height: 420px; border-radius: var(--radius); border: 1px solid var(--border);
  background: #e8eef5; overflow: hidden;
}
#heatmapMap .leaflet-container { background: #e8eef5; font-family: inherit; }
.legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot.low { background: #f6e05e; }
.dot.mid { background: #ed8936; }
.dot.high { background: #e53e3e; }
.status-ok { color: var(--success); }
.status-err { color: var(--danger); }
footer { text-align: center; }
.meta { font-size: 0.85rem; color: var(--text-muted); }