/* ==========================================================================
   Responsive / Adaptabilidad Móvil
   ========================================================================== */
/* ==========================================================================
   App instalable (PWA)
   ========================================================================== */
.btn-instalar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: var(--radius-md);
  color: #38bdf8;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.btn-instalar:hover {
  background: rgba(56, 189, 248, 0.22);
}

.btn-instalar.hidden {
  display: none;
}

/* Tablet y móvil: no cabe en la cabecera junto a Calendario y Guías; está en el menú (☰ → Instalar la app) */
@media (max-width: 960px), (pointer: coarse) and (max-width: 1200px) {
  .btn-instalar,
  .btn-instalar.hidden {
    display: none;
  }
}

.modal-instalar {
  max-width: 440px;
}

.pasos-instalar {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text-main);
  font-size: 0.92rem;
  line-height: 1.5;
}

.pasos-instalar svg {
  vertical-align: -3px;
  color: #38bdf8;
}

/* App instalada: la cabecera respeta la zona de la cámara/hora del iPhone */
.app-header {
  padding-top: env(safe-area-inset-top);
  height: calc(var(--header-height) + env(safe-area-inset-top));
}

/* Filtros plegables: en escritorio se ven siempre y el botón no aparece */
.filtros-extra {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-toggle-filtros {
  display: none;
}

/* Tablet y móvil: pantalla fija con el mapa arriba y la lista debajo.
   La segunda condición cubre móviles y tablets táctiles aunque el navegador
   esté en modo "versión para ordenador" (que finge una pantalla de ~980 px). */
@media (max-width: 960px), (pointer: coarse) and (max-width: 1200px) {
  /* 16px evita que el móvil haga zoom al tocar el buscador */
  .search-input {
    font-size: 16px;
  }

  /* Filtros plegados por defecto detrás del botón "Filtros" */
  .btn-toggle-filtros {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
  }

  .btn-toggle-filtros.activo {
    border-color: var(--color-accent);
    background: rgba(99, 102, 241, 0.18);
  }

  .filtros-extra {
    display: none;
  }

  .filtros-extra.abierto {
    display: flex;
  }

  body.dark-theme {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .app-header {
    flex: none;
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    gap: 10px;
  }

  .header-left {
    flex: 1;
    min-width: 0;
  }

  /* Ubicación y selector de ciudad en una segunda fila a lo ancho */
  .header-center {
    order: 3;
    width: 100%;
    gap: 8px;
  }

  .location-badge {
    flex: 1;
    min-width: 0;
  }

  .loc-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .city-selector-wrap {
    flex-shrink: 0;
  }

  .city-select {
    max-width: 150px;
  }

  /* El contenido ocupa todo el alto bajo la cabecera */
  .main-layout {
    flex: 1;
    min-height: 0;
    display: block;
    height: auto;
    overflow: hidden;
    position: relative;
  }

  /* Como en el ordenador, mapa y lista a la vez: mapa arriba (fijo) y lista debajo
     con su propio desplazamiento, para que deslizar sobre la lista no mueva el mapa.
     Posición absoluta: con height en % Safari y algunos Android calculaban 0 px. */
  .map-panel,
  .sidebar-panel {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
  }

  .map-panel {
    top: 0;
    height: 42%;
    border-bottom: 1px solid var(--glass-border);
  }

  .map-view {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
  }

  /* La lista (con filtros) se desliza en su propia zona */
  .sidebar-panel {
    top: 42%;
    bottom: 0;
    height: auto;
    min-width: 0;
    border-right: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .races-list-scroll {
    flex: none;
    overflow: visible;
  }

  /* Margen final para que la última carrera no quede bajo la barra del navegador */
  .races-list-scroll {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }

  /* Avisos por encima de la barra del navegador */
  .toast-container {
    bottom: calc(90px + env(safe-area-inset-bottom));
  }

  /* La leyenda tapaba los créditos del mapa */
  .map-legend {
    display: none;
  }

  .leaflet-control-attribution {
    font-size: 9px;
    max-width: 75%;
  }

  .metrics-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Móvil */
@media (max-width: 600px) {
  .brand-tagline,
  .stats-counter {
    display: none;
  }

  .logo-icon-wrap {
    width: 36px;
    height: 36px;
  }

  .brand-title {
    font-size: 1.25rem;
  }

  /* "Publicar carrera" solo con el icono */
  #btn-open-add-race {
    padding: 9px 11px;
  }

  #btn-open-add-race span {
    display: none;
  }

  .location-badge {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  .pulse-dot {
    display: none;
  }

  .city-select {
    max-width: 120px;
    padding: 7px 8px;
  }

  .filters-card {
    padding: 12px 14px;
  }

  .results-header {
    padding: 12px 14px;
  }

  .races-list-scroll {
    padding: 12px 12px calc(90px + env(safe-area-inset-bottom));
  }

  .race-card {
    padding: 14px;
  }

  .card-header-row,
  .card-footer-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Fichas y formularios como hoja que sube desde abajo */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal-card {
    max-height: 92vh;
    max-height: 92svh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .modal-race-title {
    font-size: 1.25rem;
    padding-right: 36px;
  }

  /* Hueco a la derecha para no quedar debajo del botón de cerrar */
  .modal-badge-group {
    flex-wrap: wrap;
    padding-right: 40px;
  }

  /* Botones a todo el ancho, el principal arriba */
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .modal-footer > * {
    width: 100%;
    justify-content: center;
  }

  .toast-container {
    width: calc(100% - 32px);
  }

  .toast {
    border-radius: var(--radius-md);
  }
}

/* App instalada (pantalla completa): no hay barra del navegador abajo, basta con
   respetar la barra de inicio del iPhone */
@media (display-mode: standalone) {
  .races-list-scroll {
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  .toast-container {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}