/* Fixes específicos para móvil */
@media (max-width: 480px) {
  /* Asegurar que html y body ocupen toda la pantalla */
  html, body {
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
    position: fixed !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #app {
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }
  
  /* Header más compacto */
  .header {
    flex-shrink: 0;
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
  }
  
  /* Main content ocupa el resto */
  .main-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: calc(100vh - 50px) !important;
  }
  
  /* Mapa ocupa todo el espacio disponible */
  #map-view {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .map-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 100% !important;
  }
  
  .map {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Barra de búsqueda SIEMPRE visible */
  .search-bar {
    position: fixed !important;
    top: 50px !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: calc(100% - 1rem) !important;
    max-width: none !important;
    padding: 0.5rem !important;
    gap: 0.5rem !important;
    z-index: 1000 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: white !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Input de búsqueda visible */
  .search-input {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    min-height: 40px !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
  }
  
  /* Botón de ubicación visible */
  .btn-icon {
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 1.125rem !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Controles de Leaflet más abajo */
  .leaflet-top.leaflet-left {
    top: 100px !important;
    left: 5px !important;
  }
  
  .leaflet-right.leaflet-top {
    top: 100px !important;
    right: 5px !important;
  }
  
  /* Asegurar que los resultados de búsqueda sean visibles */
  .address-results {
    position: absolute !important;
    top: calc(100% + 0.25rem) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: calc(100vh - 150px) !important;
    z-index: 1002 !important;
    background: white !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }
}