/* ============================================
   MAP SECTION - RESPONSIVE FIX
   Arregla el overflow del mapa y panel en movil
   ============================================ */

/* Contenedor de la seccion del mapa - clase helper para el responsive */
.map-grid-section {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Grid del mapa - padding lateral en movil */
.map-grid-section > .grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .map-grid-section > .grid {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Override map-section-minimal para responsive */
.map-section-minimal {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.map-container-minimal {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 640px) {
  .map-section-minimal {
    border-radius: 20px;
  }
}

/* Override location-panel-minimal para responsive */
.location-panel-minimal {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .location-panel-minimal {
    padding: 20px 16px;
  }
}

@media (max-width: 640px) {
  .location-panel-minimal {
    border-radius: 20px;
    padding: 16px;
  }
}

/* Botones del panel de ubicacion - responsive con wrap */
.location-panel-minimal .flex.flex-col.gap-3 {
  width: 100%;
}

.location-panel-minimal .btn-google-primary,
.location-panel-minimal .btn-google-secondary {
  width: 100%;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  box-sizing: border-box;
}

/* Moviles pequenos - botones mas compactos */
@media (max-width: 400px) {
  .location-panel-minimal .btn-google-primary,
  .location-panel-minimal .btn-google-secondary {
    padding: 12px 14px;
    font-size: 13px;
    gap: 6px;
  }

  .location-panel-minimal .btn-google-primary span,
  .location-panel-minimal .btn-google-secondary span {
    white-space: normal;
    word-break: break-word;
  }
}