/* Fixes específicos para móvil y tablet */
@media (max-width: 768px) {
  /* Scroll en vistas no-mapa (soporte, dashboard, etc.) */
  body:not(.is-map-view) .main-content {
    height: auto !important;
    min-height: calc(100dvh - var(--header-h, 56px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.is-map-view) .view.active {
    height: auto !important;
    min-height: calc(100dvh - var(--header-h, 56px)) !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  #support-view .container,
  #dashboard-view .container,
  #admin-view .container,
  #user-view .container,
  #register-view .container,
  #login-view .container {
    overflow: visible;
    min-height: 0;
  }

  #support-content,
  #dashboard-content,
  #admin-content,
  #user-content {
    overflow: visible;
    padding-bottom: 1rem;
  }

  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  :root {
    /* Fallback estable para cálculos en móvil */
    --header-h: 56px;
  }

  /* Importante: NO bloquear el scroll global en móvil.
     El scroll debe existir para dashboard, formularios y modales. */
  html, body {
    height: auto !important;
    min-height: 100%;
    width: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #app {
    min-height: 100dvh;
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  /* Header adaptable */
  .header-content {
    padding: 0.5rem 0.75rem !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem;
  }

  .logo-img {
    max-width: 220px !important;
    height: 36px !important;
  }

  .nav {
    flex: 1 1 auto;
    width: auto;
    justify-content: flex-end;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 0;
  }

  .nav .btn {
    padding: 0.4rem 0.65rem;
    font-size: 0.78rem;
    min-height: 34px;
    box-shadow: none;
  }
  
  /* Header más compacto */
  .header {
    flex-shrink: 0;
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
  }
  
  /* En vista mapa, el main-content ocupa pantalla y no scrollea */
  body.is-map-view .main-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: calc(100dvh - var(--header-h, 56px)) !important;
  }
  
  /* Mapa ocupa todo el espacio disponible */
  body.is-map-view #map-view {
    height: calc(100dvh - var(--header-h, 56px)) !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;
    min-height: 280px !important;
  }
  
  /* Barra de búsqueda SIEMPRE visible */
  .search-bar {
    position: fixed !important;
    top: calc(var(--header-h, 56px) + 0.5rem) !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: 10010 !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(100dvh - 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;
  }
}