/* ============================================================
   MAPA PREMIUM v6 — San Lorenzo
   Estética: Apple Maps · Museo internacional · Editorial
============================================================ */

/* ── SECCIÓN ── */
.mapa-ilustrado {
  background: #f7f3ee;
  overflow: hidden;
}

/* ── HEADER ── */
.mi-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 4rem;
  padding-bottom: 2rem;
  flex-wrap: wrap;
}
.mi-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #1a6b8a;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.5rem;
}
.mi-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: #1a6b8a;
  display: block;
}
.mi-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.mi-desc {
  font-size: 13px;
  color: #888;
  line-height: 1.65;
  max-width: 380px;
}

/* ── FILTROS ── */
.mi-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.mf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.7);
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.mf-btn:hover { border-color: #1a6b8a; color: #1a6b8a; background: rgba(26,107,138,0.06); }
.mf-btn--active { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.mf-btn--active[data-cat="historia"]    { background: #1a6b8a; border-color: #1a6b8a; }
.mf-btn--active[data-cat="cultura"]     { background: #c4822a; border-color: #c4822a; }
.mf-btn--active[data-cat="naturaleza"]  { background: #4a7c59; border-color: #4a7c59; }
.mf-btn--active[data-cat="gastronomia"] { background: #8b3a3a; border-color: #8b3a3a; }
.mf-btn--active[data-cat="turismo"]     { background: #5a4a8a; border-color: #5a4a8a; }
.mf-btn--active[data-cat="emergencias"] { background: #8a2020; border-color: #8a2020; }
.mf-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mf-btn--active .mf-dot { background: rgba(255,255,255,0.6) !important; }

/* ── WRAP ── */
.mi-wrap {
  display: grid;
  grid-template-columns: 1fr 280px;
  border-top: 1px solid rgba(0,0,0,0.06);
  align-items: stretch;
}

/* ── MAP AREA ── */
.mi-map-area {
  position: relative;
  background: #ede8df;
  overflow: hidden;
}
#mp-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── PINS ── */
@keyframes pinAppear {
  0%   { opacity:0; transform: scale(0) translateY(8px); transform-origin: center; }
  70%  { transform: scale(1.15) translateY(-2px); }
  100% { opacity:1; transform: scale(1) translateY(0); }
}

.mp-pin {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center center;
}
.mp-pin__halo {
  transition: r 0.3s cubic-bezier(0.34,1.56,0.64,1),
              fill-opacity 0.25s ease;
}
.mp-pin__dot {
  transition: r 0.25s cubic-bezier(0.34,1.56,0.64,1),
              filter 0.25s ease;
}
.mp-pin:hover .mp-pin__halo   { r: 20; fill-opacity: 0.18; }
.mp-pin:hover .mp-pin__dot    { r: 12; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.28)); }
.mp-pin--active .mp-pin__halo { r: 24; fill-opacity: 0.22; }
.mp-pin--active .mp-pin__dot  { r: 13; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.32)); stroke-width: 2.5; }

/* ── PANEL GLASSMORPHISM ── */
#mp-panel {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 240px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.10),
    0 1px 4px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.8);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94) translateY(6px);
  transform-origin: top left;
  transition: opacity 0.22s ease,
              transform 0.28s cubic-bezier(0.34,1.2,0.64,1);
  z-index: 30;
}
#mp-panel.visible {
  opacity: 1;
  pointer-events: all;
  transform: scale(1) translateY(0);
}

#mp-panel-top {
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 8px;
}
#mp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
#mp-cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex: 1;
}
#mp-close {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.06);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.15s;
}
#mp-close:hover { background: rgba(0,0,0,0.12); }

#mp-panel-body { padding: 14px 16px 16px; }
#mp-name {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  margin-bottom: 6px;
}
#mp-desc {
  font-size: 11.5px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 5px;
}
#mp-hours {
  font-size: 10.5px;
  color: #999;
  margin-bottom: 12px;
}
#mp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px;
  border-radius: 10px;
  background: #1a1a1a;
  color: #fff;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.15s, transform 0.15s;
}
#mp-btn:hover { background: #333; transform: translateY(-1px); }

/* ── SIDEBAR ── */
.mi-sidebar {
  background: #fff;
  border-left: 1px solid rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: stretch;
  height: 0;
  min-height: 100%;
}
.mi-sidebar__head {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.mi-sidebar__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #aaa;
}
.mi-sidebar__count { font-size: 10px; color: #aaa; }
.mi-sidebar__count strong { color: #1a6b8a; font-weight: 700; }

/* List */
#ml-list {
  list-style: none;
  padding: 0; margin: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}
#ml-list::-webkit-scrollbar { width: 3px; }
#ml-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }

.ml-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: background 0.12s;
}
.ml-item:hover { background: #f9f7f4; }
.ml-item--active {
  background: #f0f7fb;
  border-left: 2px solid #1a6b8a;
  padding-left: 12px;
}
.ml-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ml-info { flex: 1; min-width: 0; }
.ml-name {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Poppins', sans-serif;
}
.ml-cat {
  font-size: 10px;
  font-weight: 500;
  margin-top: 1px;
}
.ml-go {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s;
}
.ml-go:hover { background: #1a6b8a; color: #fff; }

/* ── STRIP ── */
.mi-strip {
  background: #1a1a1a;
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.mi-strip__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.mi-strip__item:last-child { border-right: none; }
.mi-strip__ico { font-size: 18px; flex-shrink: 0; }
.mi-strip__item div { display: flex; flex-direction: column; gap: 1px; }
.mi-strip__item strong { font-size: 1.15rem; font-weight: 800; color:#fff; line-height:1; font-family:'Poppins',sans-serif; }
.mi-strip__item span  { font-size: 10px; color: rgba(255,255,255,0.4); font-family:'Poppins',sans-serif; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .mi-wrap { grid-template-columns: 1fr; }
  .mi-sidebar { max-height: 280px; border-left: none; border-top: 1px solid rgba(0,0,0,0.07); min-height: unset; height: auto; }
  .mi-strip { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .mi-filters { gap: 5px; }
  .mf-btn { font-size: 10px; padding: 5px 10px; }
  .mi-strip { grid-template-columns: repeat(2,1fr); }
  #mp-panel { width: calc(100% - 2rem); left: 1rem; }
  .mi-header { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
}