/* ==========================================================================
   RESTAURANTES PAGE - RESPONSIVE FLUID SYSTEM
   Sistema adaptativo sin saltos entre breakpoints
   ========================================================================== */

/* ==========================================================================
   1. TOGGLE BAR BOTTOM (Lista/Mapa)
   Solo visible en <1200px
   ========================================================================== */

.map-toggle-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  border-top: 1px solid var(--color-border, #e5e5e5);
  padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
  justify-content: center;
  gap: var(--space-sm, 0.75rem);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  height: var(--toggle-bar-height, 60px);
}

@media (max-width: 1199px) {
  .map-toggle-bar {
    display: flex;
  }

  /* Padding bottom para evitar que la barra tape contenido */
  .min-h-screen.bg-white,
  body:has(.map-toggle-bar) {
    padding-bottom: var(--toggle-bar-height, 60px);
  }

  /* Ocultar botón flotante antiguo cuando hay toggle bar */
  #showMapButton {
    display: none !important;
  }
}

.map-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs, 0.5rem);
  flex: 1;
  max-width: 140px;
  padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
  border: 1.5px solid var(--color-border, #e5e5e5);
  border-radius: var(--radius-lg, 0.875rem);
  background: white;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-text, #0A1C2F);
  cursor: pointer;
  transition: all 0.2s ease;
  pointer-events: auto;
  z-index: 1001;
}

.map-toggle-btn:hover {
  border-color: var(--color-primary, #0A1C2F);
}

.map-toggle-btn.active {
  background: var(--color-primary, #0A1C2F);
  color: white;
  border-color: var(--color-primary, #0A1C2F);
}

.map-toggle-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ==========================================================================
   2. LAYOUT PRINCIPAL - Split View simplificado
   ========================================================================== */

/* En <1200px: Solo lista, sin mapa visible */
@media (max-width: 1199px) {
  /* Ocultar columna del mapa desktop */
  .hidden.xl\:block.xl\:col-span-5 {
    display: none !important;
  }

  /* Ocultar columna del mapa tablet estático */
  .hidden.md\:block.xl\:hidden.md\:col-span-5 {
    display: none !important;
  }

  /* Lista ocupa todo el ancho */
  .md\:col-span-7.xl\:col-span-7,
  .md\:col-span-7 {
    grid-column: 1 / -1 !important;
    padding-right: var(--space-md, 1rem);
    padding-left: var(--space-md, 1rem);
  }

  /* Grid principal de 1 columna */
  .grid.grid-cols-1.md\:grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
}

/* En ≥1200px: Split view lista + mapa */
@media (min-width: 1200px) {
  /* Mostrar mapa desktop */
  .hidden.xl\:block.xl\:col-span-5 {
    display: block !important;
  }

  /* Ocultar mapa tablet estático */
  .hidden.md\:block.xl\:hidden.md\:col-span-5 {
    display: none !important;
  }

  /* Columna del mapa sticky */
  .xl\:col-span-5 .sticky {
    position: sticky;
    top: 100px;
    height: calc(100vh - 150px);
    border-radius: var(--radius-lg, 0.875rem);
    overflow: hidden;
  }
}

/* ==========================================================================
   3. GRID DE CARDS - Container Queries + Fluido
   ========================================================================== */

/* Contenedor con Container Query */
#restaurantesList {
  container-type: inline-size;
  container-name: cards-container;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--restaurantes-card-min, 280px)), 1fr));
  gap: var(--restaurantes-card-gap, clamp(0.5rem, 1.5vw, 1rem));
}

/* Container Queries para ajuste fino */
@container cards-container (min-width: 580px) {
  #restaurantesList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container cards-container (min-width: 880px) {
  #restaurantesList {
    grid-template-columns: 1fr;
  }
}

/* Fallback para navegadores sin Container Queries */
@supports not (container-type: inline-size) {
  @media (min-width: 640px) {
    #restaurantesList {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 1024px) {
    #restaurantesList {
      grid-template-columns: 1fr;
    }
  }
}

/* ==========================================================================
   4. CARDS FLUIDAS
   ========================================================================== */

.restaurant-card {
  container-type: inline-size;
  border-radius: var(--radius-md, 0.625rem);
  border: 0.5px solid var(--color-border, #e5e5e5);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  transition: var(--transition-normal, 200ms ease);
  overflow: hidden;
  background: white;
}

.restaurant-card:hover {
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
  transform: translateY(-2px);
}

.restaurant-card-content {
  padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem) var(--space-sm, 0.75rem);
}

.restaurant-card-name {
  font-size: var(--fs-base, 1rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-2xs, 0.25rem);
  color: var(--color-text, #0A1C2F);
}

.restaurant-card-cuisine-price {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-text, #0A1C2F);
  margin-bottom: var(--space-2xs, 0.25rem);
}

.restaurant-card-location {
  font-size: var(--fs-sm, 0.875rem);
  color: var(--color-text-secondary, #666666);
}

/* Container Query para cards pequeñas */
@container (max-width: 300px) {
  .restaurant-card-content {
    padding: var(--space-xs, 0.5rem);
  }

  .restaurant-card-name {
    font-size: var(--fs-sm, 0.875rem);
  }

  .restaurant-card-cuisine-price,
  .restaurant-card-location {
    font-size: var(--fs-xs, 0.75rem);
  }
}

/* ==========================================================================
   5. MODAL DE FILTROS - Mejorado
   ========================================================================== */

.filters-modal-body {
  max-height: clamp(300px, 55vh, 480px);
  overflow-y: auto;
  padding: var(--space-md, 1rem);
}

/* Landscape móvil - más altura disponible */
@media (max-height: 500px) and (orientation: landscape) {
  .filters-modal-body {
    max-height: 65vh;
  }

  .filter-section {
    padding: var(--space-xs, 0.5rem) 0;
  }

  .filter-section-header {
    padding: var(--space-xs, 0.5rem) 0;
  }
}

/* Tipografía fluida en filtros */
.filter-section-label {
  font-size: var(--fs-sm, 0.875rem);
}

.filter-popup-item label {
  font-size: var(--fs-sm, 0.875rem);
}

/* Modal responsive mejorado */
@media (max-width: 767px) {
  .filters-modal-content {
    margin: var(--space-sm, 0.75rem);
    border-radius: var(--radius-lg, 0.875rem);
    max-height: calc(100vh - var(--space-md, 1rem) * 2);
  }

  .filters-modal-body {
    max-height: calc(100vh - 180px);
    padding: var(--space-sm, 0.75rem);
  }

  .modal-dialog.modal-lg {
    max-width: calc(100% - var(--space-md, 1rem));
    margin: var(--space-sm, 0.75rem) auto;
  }
}

/* ==========================================================================
   6. MODAL DE MAPA (Fullscreen para toggle)
   ========================================================================== */

/* Modal de mapa - por defecto oculto */
#mapModal {
  display: none !important;
}

#mapModal.hidden {
  display: none !important;
}

/* Cuando se quita la clase hidden, mostrar fullscreen */
#mapModal:not(.hidden) {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#mapModal .h-full.flex.flex-col {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#restaurantesMapMobile {
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* En ≥1200px, nunca mostrar el modal (el mapa está visible en el layout) */
@media (min-width: 1200px) {
  #mapModal {
    display: none !important;
  }
}

/* ==========================================================================
   7. BARRA DE BÚSQUEDA FLUIDA
   ========================================================================== */

/* Contenedor de controles fluido */
.flex.flex-col.md\:flex-row.md\:items-center.md\:justify-between {
  gap: var(--space-sm, 0.75rem);
}

/* Input de búsqueda fluido */
.restaurant-search-input {
  font-size: var(--fs-sm, 0.875rem);
  padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
  border-radius: var(--radius-md, 0.625rem);
  border: 1px solid var(--color-border, #e5e5e5);
  transition: var(--transition-fast, 150ms ease);
}

.restaurant-search-input:focus {
  border-color: var(--color-primary, #0A1C2F);
  outline: none;
  box-shadow: 0 0 0 2px rgba(10, 28, 47, 0.1);
}

/* Chip "Abierto ahora" fluido */
.abierto-ahora-chip {
  font-size: var(--fs-xs, 0.75rem);
  padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
  border-radius: var(--radius-md, 0.625rem);
  white-space: nowrap;
}

/* Botón filtros fluido */
.filter-modal-button {
  font-size: var(--fs-sm, 0.875rem);
  padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
  border-radius: var(--radius-md, 0.625rem);
}

/* ==========================================================================
   8. PAGINACIÓN FLUIDA
   ========================================================================== */

#paginationContainer {
  padding: var(--space-md, 1rem) 0;
  margin-bottom: var(--space-lg, 1.5rem);
}

#paginationContainer button,
#paginationContainer a {
  font-size: var(--fs-sm, 0.875rem);
  padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
  border-radius: var(--radius-sm, 0.375rem);
}

/* Añadir espacio extra en móvil para la toggle bar */
@media (max-width: 1199px) {
  #paginationContainer {
    margin-bottom: calc(var(--toggle-bar-height, 60px) + var(--space-md, 1rem));
  }
}

/* ==========================================================================
   9. AJUSTES ESPECÍFICOS POR RESOLUCIÓN
   Solo para cambios estructurales, NO tamaños (eso lo hace clamp)
   ========================================================================== */

/* Móvil < 640px */
@media (max-width: 639px) {
  /* Forzar 1 columna en grid de cards */
  #restaurantesList {
    grid-template-columns: 1fr !important;
  }

  /* Controles en columna */
  .flex.flex-col.md\:flex-row {
    flex-direction: column;
  }

  /* Chips y botones ocupan todo el ancho */
  .flex.gap-2 {
    width: 100%;
  }

  .flex.gap-2 > button {
    flex: 1;
  }
}

/* Tablet 640px - 1199px */
@media (min-width: 640px) and (max-width: 1199px) {
  /* Controles en fila */
  .flex.flex-col.md\:flex-row {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   10. UTILIDADES DE VISIBILIDAD
   ========================================================================== */

/* Mostrar solo en <1200px */
.show-below-1200 {
  display: none;
}

@media (max-width: 1199px) {
  .show-below-1200 {
    display: flex;
  }
}

/* Ocultar en <1200px */
.hide-below-1200 {
  display: block;
}

@media (max-width: 1199px) {
  .hide-below-1200 {
    display: none !important;
  }
}

/* ==========================================================================
   11. FIXES RESPONSIVE MÓVIL - Buscador, filtros, paginador
   ========================================================================== */

/* Fix: Padding simétrico izquierda/derecha en móvil */
@media (max-width: 767px) {
  .restaurantes-page-shell {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Columna de lista sin padding extra (el padre ya tiene px-4) */
  .md\:col-span-7.xl\:col-span-7,
  .md\:col-span-7,
  [class*="col-span-7"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Grid de cards sin padding adicional */
  #restaurantesList {
    padding: 0;
    gap: 0.75rem;
  }

  /* Paginador centrado */
  #paginationContainer {
    padding: 0;
    margin: 1rem 0;
  }

  /* Barra de búsqueda sin margen extra */
  .bg-white.mb-6 {
    margin-bottom: 1rem !important;
    padding: 0 !important;
  }
}

/* Fix: Buscador y filtros layout en móvil */
@media (max-width: 639px) {
  /* Forzar que restaurantesCount y buscador estén en la misma línea */
  .restaurantes-filters {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.5rem !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Primera línea: "X disponibles" (columna 1) + buscador (columna 2) */
  #restaurantesCount {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    font-size: 0.6875rem !important;
    white-space: nowrap !important;
    min-width: fit-content !important;
    padding-right: 0.5rem !important;
  }

  #restaurantSearchInput,
  .restaurant-search-input {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 0.75rem !important;
  }

  /* Segunda línea: 3 botones con justify-content: space-between */
  .restaurantes-filters > *:nth-child(3),
  .restaurantes-filters > *:nth-child(4),
  .restaurantes-filters > *:nth-child(5),
  .restaurantes-filters > *:nth-child(6) {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
  }

  /* Container para los 3 botones */
  .restaurantes-filters > .flex.items-center {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 0.375rem !important;
  }

  /* Botones en la segunda fila */
  #sortSelect {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0.5rem 0.375rem !important;
    font-size: 0.6875rem !important;
  }

  #abiertoAhoraChip,
  .abierto-ahora-chip {
    flex: 1 !important;
    padding: 0.5rem 0.375rem !important;
    font-size: 0.6875rem !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  #openFiltersModal,
  .filter-modal-button {
    flex: 1 !important;
    padding: 0.5rem 0.375rem !important;
    font-size: 0.6875rem !important;
    min-width: 0 !important;
    justify-content: center !important;
  }

  /* Ocultar label "Ordenar:" en móvil */
  .restaurantes-filters .flex.items-center.gap-2 > span.text-sm {
    display: none !important;
  }

  /* Ocultar iconos en móvil para ahorrar espacio */
  #abiertoAhoraChip .abierto-ahora-icon,
  .abierto-ahora-chip .abierto-ahora-icon,
  #openFiltersModal ion-icon,
  .filter-modal-button ion-icon {
    display: none !important;
  }

  /* Mostrar el texto completo en móvil con tamaño reducido */
  #abiertoAhoraChip .abierto-ahora-text,
  .abierto-ahora-chip .abierto-ahora-text {
    font-size: 0.625rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Fix: Paginador con padding simétrico */
@media (max-width: 768px) {
  #paginationContainer {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 0;
  }

  .pagination-wrapper {
    max-width: 100% !important;
    width: max-content;
    min-width: 100%;
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0;
  }

  .pagination-btn {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 6px !important;
    font-size: 0.75rem !important;
    flex-shrink: 0;
  }

  .pagination-nav {
    min-width: auto !important;
    padding: 0 4px !important;
    font-size: 0.6875rem !important;
  }
}

/* ==========================================================================
   12. FIXES ESPECÍFICOS PARA RESPONSIVE - Hero, Cards, Padding
   ========================================================================== */

/* Fix: Reducir espaciado superior del h1 en hero */
.hero-section h1 {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}

@media (max-width: 767px) {
  .hero-section h1 {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-section p {
    font-size: clamp(0.875rem, 2vw, 1rem) !important;
  }
}

/* Fix: Padding lateral en contenido de secciones */
@media (max-width: 767px) {
  .restaurantes-page-shell {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-8 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Fix: Cards - Cocina, precio, estado en una línea con iconos del mismo tamaño */
.restaurant-card-cuisine-price {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.65rem !important;
  justify-content: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
}

.restaurant-card-cuisine-price span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.restaurant-card-cuisine-price i,
.restaurant-card-cuisine-price svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11px;
}

.restaurant-card-location {
  font-size: 0.65rem !important;
}

@media (max-width: 639px) {
  .restaurant-card-cuisine-price {
    font-size: 0.6rem !important;
    gap: 0.25rem;
  }

  .restaurant-card-location {
    font-size: 0.6rem !important;
  }

  .restaurant-card-cuisine-price i,
  .restaurant-card-cuisine-price svg {
    width: 12px;
    height: 12px;
    min-width: 12px;
  }
}

/* Fix: Menu hamburguesa - quitar avatar en mobile */
.mobile-user-info {
  display: none !important;
}

/* Fix: Overlay y cierre de menu */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.show {
  display: block;
  opacity: 1;
}

/* Fix: Links en ubicación - word-wrap y overflow */
.restaurant-location-link,
[class*="location"] a,
a[href*="maps"],
a[href*="google"] {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  display: inline-block;
  max-width: 100%;
}

/* Fix: Evitar overflow horizontal en toda la página */
body, html {
  overflow-x: hidden;
}

main,
.restaurantes-page,
.restaurantes-page-shell,
[class*="container"] {
  max-width: 100%;
  overflow-x: hidden;
}