/* =============================================
   TW Mapa Localizador — Frontend CSS v3
   Dos variantes: --mini (footer) y --full (donde estamos)
   ============================================= */

/* Base compartida */
.tw-mapa {
  display: flex;
  flex-direction: row;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
}

.tw-sidebar {
  height: 100%;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.tw-map { flex: 1; height: 100%; }

.tw-heading {
  background: #69CE0E;
  padding: 12px 15px;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}
.tw-heading h3 {
  margin: 0;
  font-weight: 700;
  color: #fff;
}

.tw-listings { flex: 1; overflow-y: auto; }

.tw-listings .tw-item {
  border-bottom: 1px solid #eee;
  padding: 12px 15px;
  cursor: pointer;
  transition: background 0.3s;
}
.tw-listings .tw-item:hover { background-color: #f0fdf4; }

.tw-listings .tw-item .tw-title {
  color: #023A00;
  font-weight: 700;
  margin-bottom: 4px;
}
.tw-listings .tw-item .tw-details { color: #666; line-height: 1.3; }

/* Marcador SVG */
.tw-marker {
  background-image: url("https://tw.morestudio.cl/wp-content/uploads/2026/01/mapas-y-banderas.svg");
  background-size: cover;
  cursor: pointer;
}

/* Popup */
.mapboxgl-popup-content { padding: 10px; }
.mapboxgl-popup-content h3 { margin: 0 0 5px; color: #023A00; }
.mapboxgl-popup-content p  { margin: 0; color: #666; }

/* ---- Variante MINI (footer) ---- */
.tw-mapa--mini {
  height: 400px;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
}
.tw-mapa--mini .tw-sidebar { width: 45%; }
.tw-mapa--mini .tw-heading  { padding: 12px 15px; }
.tw-mapa--mini .tw-heading h3   { font-size: 14px; }
.tw-mapa--mini .tw-item    { padding: 12px 15px; }
.tw-mapa--mini .tw-title   { font-size: 13px; }
.tw-mapa--mini .tw-details { font-size: 12px; }
.tw-mapa--mini .tw-marker  { width: 25px; height: 25px; }
.tw-mapa--mini .mapboxgl-popup-content h3 { font-size: 13px; }
.tw-mapa--mini .mapboxgl-popup-content p  { font-size: 11px; }

/* ---- Variante FULL (donde estamos) ---- */
.tw-mapa--full {
  height: 600px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07);
}
.tw-mapa--full .tw-sidebar { width: 35%; }
.tw-mapa--full .tw-heading  { padding: 20px; }
.tw-mapa--full .tw-heading h3   { font-size: 18px; }
.tw-mapa--full .tw-item    { padding: 15px; }
.tw-mapa--full .tw-title   { font-size: 15px; }
.tw-mapa--full .tw-details { font-size: 13px; }
.tw-mapa--full .tw-marker  { width: 35px; height: 35px; }
.tw-mapa--full .mapboxgl-popup-content h3 { font-size: 14px; }
.tw-mapa--full .mapboxgl-popup-content p  { font-size: 12px; }

/* Responsive */
@media (max-width: 768px) {
  .tw-mapa--mini {
    flex-direction: column-reverse;
    height: 500px;
  }
  .tw-mapa--mini .tw-sidebar {
    width: 100%;
    height: 50%;
    border-right: none;
  }
  .tw-mapa--mini .tw-map { height: 50%; }

  .tw-mapa--full {
    flex-direction: column-reverse;
    height: 750px;
  }
  .tw-mapa--full .tw-sidebar {
    width: 100%;
    height: 45%;
    border-right: none;
  }
  .tw-mapa--full .tw-map { height: 55%; }
}