/* ===== Mapa Interactivo — Team Latam (Elementor) ===== */
.tlmap-wrap{
  display:grid; gap:20px; align-items:start;
  --tl-brand: #01B7AA;
  color:#111; /* textos en negro */
}
@media (min-width:768px){
  .tlmap-wrap{grid-template-columns:1fr 1fr;}
}

/* Mapa */
.tlmap-map{
  width:100%;
  /* la altura la controla Elementor (responsive control) */
  background:#f5f7f9;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
}

/* Listado: altura calculada por items visibles */
.tlmap-list{
  /* max-height calculada: items visibles * alto aprox. + algo de padding */
  --tl-items-visible: 2;
  --tl-item-approx: 200px;
  max-height: calc(var(--tl-items-visible) * var(--tl-item-approx) + 32px);
  overflow:auto;
  padding:8px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}

/* Tarjetas */
.tlmap-item{
  padding:14px 14px;
  border-radius:12px;
  border:1px solid #edf0f3;
  background:#fff;
  transition:box-shadow .2s, transform .2s, outline-color .2s;
}
.tlmap-item + .tlmap-item{ margin-top:10px; } /* configurable desde "Espaciado" */

.tlmap-item:hover{box-shadow:0 8px 24px rgba(0,0,0,.06); transform:translateY(-1px)}
.tlmap-item.is-active{outline:2px solid var(--tl-brand); box-shadow:0 0 0 4px rgba(1,183,170,.12)}

/* Contenido */
.tlmap-title{font-weight:700; margin:0 0 6px}
.tlmap-badge{display:inline-block; padding:4px 10px; border-radius:999px; background:var(--tl-brand); color:#fff; font-weight:600; font-size:12px}
.tlmap-addr{margin:0 0 10px; color:#111}
.tlmap-meta{font-size:14px; margin:6px 0 10px; color:#111}
.tlmap-meta a{color:inherit; text-decoration:underline}

/* Acciones */
.tlmap-actions{display:flex; flex-wrap:wrap; gap:8px}
.tlmap-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; font-weight:600; text-decoration:none; border:1px solid transparent}
.tlmap-btn.primary{background:var(--tl-brand); color:#fff} /* texto sobre color de marca en blanco */
.tlmap-btn.ghost{background:#fff; color:#111; border-color:#e5e7eb}

/* Marcador (DivIcon con ícono de Elementor) */
.leaflet-container .tlmap-divicon{ background:transparent; border:none; }
.tlmap-marker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--tl-marker-size, 24px);
  height: var(--tl-marker-size, 24px);
  color: var(--tl-marker, #01B7AA);  /* color personalizable */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  transform: translateY(-2px);
  font-size: calc(var(--tl-marker-size,24px) * 0.95);
  line-height: 1;
}
.tlmap-marker i,
.tlmap-marker svg{
  width: 1em;
  height: 1em;
  fill: currentColor;
  color: currentColor;
}