/* Importar Montserrat para toda la página */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* Aplicar Montserrat globalmente */
body,
.restaurantes-page,
.min-h-screen.bg-white,
* {
  font-family: 'Montserrat', sans-serif;
}

/* Ocultar banner hero del header en página restaurantes */
/* Fondo blanco para la página de restaurantes */
body:has(.restaurantes-page),
.restaurantes-page,
.min-h-screen.bg-white {
  background-color: white !important;
}
body .hero-wrapper,
.hero-wrapper,
section.hero-wrapper {
  display: none !important;
}

/* Quitar sombra y borde del header con logo */
.header-navbar,
.navbar,
.navbar-header,
.header-main-nav,
.header-main-nav.navbar,
.header-main-nav .navbar {
  box-shadow: none !important;
  border-bottom: none !important;
  border: none !important;
  -webkit-box-shadow: none !important;
}

/* Eliminar espacios del container-fluid en la barra de búsqueda */
.restaurantes-search-bar .container-fluid {
  padding: 0;
  margin: 0;
}

.restaurantes-search-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Barra de búsqueda superior */
.restaurantes-search-bar {
  background: #0A1C2F;
  padding: 32px 0 24px 0; /* Más espacio arriba, menos abajo para separar del borde superior */
  z-index: 100;
  margin-top: 0;
  margin-bottom: 0;
}

.restaurantes-search-form {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px; /* Solo padding horizontal, el vertical lo maneja el contenedor */
}

.search-fields-group {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  min-width: 600px;
  max-width: 900px; /* Aumentar max-width para dar más espacio al botón */
  background: white;
  border-radius: 6px; /* Redondeado uniforme */
  overflow: hidden;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Sutil sombra para definición */
}

.search-field:last-child {
  display: flex;
  align-items: stretch;
  padding: 0;
  border: none;
  position: relative;
  flex: 0 0 auto;
  min-width: 160px; /* Mismo ancho que los otros campos para el select */
  max-width: none; /* Permitir que se expanda para el botón */
}

.search-field:last-child::after {
  display: none; /* Eliminar el separador del último campo */
}

.search-field:last-child > div {
  flex: 0 0 160px; /* Mismo tamaño que el select de hora */
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 160px;
  max-width: 160px;
}

.search-field:last-child select {
  border-radius: 0;
  border-right: none; /* Sin separador, pegado al botón */
  flex: 1;
  min-width: 0;
  width: 100%;
}

.search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Campo de fecha más pequeño, mismo tamaño que hora y personas */
.search-field:first-child {
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 160px;
}

/* Campo de hora del mismo tamaño que personas */
.search-field:nth-child(2) {
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 160px;
}

.search-field:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: #e5e7eb;
}

.search-field i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  z-index: 1;
}

.search-field:last-child > div i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  z-index: 1;
}

.search-field input,
.search-field select {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
}

.search-field input:focus,
.search-field select:focus,
.search-field input:active,
.search-field select:active {
  border: 0.5px solid #9ca3af !important;
  box-shadow: none;
}

.search-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Select de personas con más padding para evitar cortes */
.search-field:last-child select {
  padding-right: 40px;
}

.search-button {
  padding: 12px 20px;
  background: #F6A702;
  color: white;
  border: none;
  border-radius: 0; /* Sin redondeado (el contenedor lo hace con overflow:hidden) */
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  transition: none;
  margin: 0;
  margin-left: 0; /* Sin margen, pegado al select */
  height: 100%;
  align-self: stretch;
  flex-shrink: 0;
  min-width: fit-content;
}

.search-button:hover {
  background: #F6A702;
}

/* Layout principal */
.restaurantes-main-section {
  padding: 0;
  min-height: calc(100vh - 200px);
  width: 100%;
  margin-top: 0;
}

.restaurantes-layout {
  display: grid;
  grid-template-columns: 7fr 5fr; /* 7 columnas para cards, 5 para mapa (grid de 12) */
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  height: calc(100vh - 200px);
}

/* Columna izquierda: Lista */
.restaurantes-list-column {
  display: flex;
  flex-direction: column;
  overflow: visible; /* Cambiar a visible para que los popups no se corten */
  padding-right: 12px;
  padding-top: 24px; /* Espacio arriba para separar de la barra azul oscura */
  position: relative;
  z-index: 1000; /* Z-index alto para que los popups queden por encima */
}

.restaurantes-list-header {
  display: flex;
  justify-content: flex-start; /* Cambiar a flex-start para que el input esté a la izquierda */
  align-items: baseline;
  margin-bottom: 0; /* Quitar espacio debajo */
  padding-bottom: 0; /* Quitar padding debajo */
  padding-top: 0; /* Quitar padding-top ya que ahora está en el contenedor padre */
  padding-left: 24px;
  padding-right: 24px;
  border-bottom: none; /* Quitar divider */
}

.restaurantes-list-header-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap; /* Evitar que se rompa a otra línea */
  width: 100%;
  flex-shrink: 1;
}

.restaurantes-count {
  font-size: 16px;
  font-weight: 600;
  color: #0A1C2F;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0; /* Sin margen para alineación vertical correcta */
}

/* Chips de tipo de establecimiento */
.restaurantes-type-chips {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.restaurante-type-chip {
  padding: 6px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  color: #0A1C2F;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.restaurante-type-chip:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.restaurante-type-chip.active {
  background: #0A1C2F;
  color: white;
  border-color: #0A1C2F;
}

.restaurante-type-chip.active:hover {
  background: #0A1C2F;
  color: white;
  border-color: #0A1C2F;
}

.restaurantes-sort {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.restaurantes-sort i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
  font-size: 16px;
  z-index: 1;
}

.restaurantes-sort select {
  padding: 8px 36px 8px 40px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  background: white;
  outline: none;
  cursor: pointer;
  color: #333;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  white-space: nowrap;
  min-width: 140px;
  max-width: 180px;
}

.restaurantes-sort select:focus,
.restaurantes-sort select:active {
  border: 0.5px solid #9ca3af !important;
  box-shadow: none;
}

/* Estilo para el placeholder cuando está seleccionado */
.restaurantes-sort select option[value=""] {
  color: #9ca3af;
}

.restaurantes-sort select:invalid {
  color: #9ca3af;
}

/* Ocultar la flecha nativa del navegador en algunos casos */
.restaurantes-sort select::-ms-expand {
  display: none;
}

/* Botón de filtro */
/* Estilos antiguos de filter-modal-button eliminados - usar los de más abajo */

/* Chip ABIERTO AHORA */
.abierto-ahora-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #e5e5e5 !important;
  border-radius: 6px;
  background: white;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: background-color 0.15s ease; /* evitar transiciones raras en color/borde */
  color: #0A1C2F;
  font-weight: 500;
  white-space: nowrap;
  outline: none;
  box-shadow: none;
}

/* Hover: NO cambiar el color del texto/icono, solo un ligero fondo si se quiere */
.abierto-ahora-chip:hover {
  background: #f9fafb; /* ligero contraste, mantener texto igual */
  border-color: #e5e7eb;
  color: #0A1C2F; /* aseguramos que no pase a blanco */
}

.abierto-ahora-chip:hover i,
.abierto-ahora-chip:hover [data-lucide] {
  color: inherit; /* respetar el color del texto, no forzar blanco */
}

/* Estado activo: cambiar SOLO fondo a azul oscuro, sin borde negro */
.abierto-ahora-chip.active {
  background: #0A1C2F !important;
  color: white !important;
  border: none !important; /* quitar borde al activarse */
  box-shadow: none !important;
}

.abierto-ahora-chip.active i,
.abierto-ahora-chip.active [data-lucide] {
  color: white !important;
}

.abierto-ahora-chip i,
.abierto-ahora-chip [data-lucide] {
  font-size: 16px;
  vertical-align: middle;
  color: #0A1C2F;
  transition: color 0.15s ease;
}

/* Botón de filtro modal */
.filter-modal-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0.5px solid #4B5563 !important;
  border-radius: 6px;
  background: white;
  color: #0A1C2F;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Montserrat', sans-serif;
}

.filter-modal-button:hover {
  background: #0A1C2F;
  color: white;
  border-color: #0A1C2F;
}

.filter-modal-button.active {
  background: #0A1C2F !important;
  color: white !important;
  border-color: #0A1C2F !important;
}

.filter-modal-button i,
.filter-modal-button [data-lucide],
.filter-modal-button ion-icon {
  width: 16px;
  height: 16px;
  color: #0A1C2F;
  transition: color 0.2s;
}

.filter-modal-button:hover i,
.filter-modal-button:hover [data-lucide],
.filter-modal-button:hover ion-icon,
.filter-modal-button.active i,
.filter-modal-button.active [data-lucide],
.filter-modal-button.active ion-icon {
  color: white;
}

/* Modal de filtros */
#filtersModal .modal-dialog {
  margin: 80px auto 20px auto !important;
  max-height: calc(100vh - 100px) !important;
}

.filters-modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 100px) !important;
  height: auto !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.filters-modal-content .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: none;
  flex-shrink: 0;
}

.filters-modal-content .modal-header .modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #0A1C2F;
  margin: 0;
}

.filters-modal-content .modal-header .close {
  position: static;
  opacity: 1;
  font-size: 1.5rem;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.filters-modal-body {
  padding: 20px !important;
  overflow-y: auto !important;
  padding-top: 20px !important;
  flex: 1 1 auto !important;
  max-height: calc(100vh - 250px) !important;
}

/* ========== BOTTOM SHEET EFFECT PARA FILTROS EN MÓVIL ========== */
@media (max-width: 768px) {
  #filtersModal .modal-dialog {
    margin: 0 !important;
    max-height: 90vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #filtersModal {
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }

  .filters-modal-content {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    max-height: 90vh !important;
    transform: translateY(100%);
    animation: slideUpFiltersModal 0.3s ease forwards;
  }

  /* Handle visual para indicar que es arrastrable */
  .filters-modal-content::before {
    content: '';
    display: block;
    width: 48px;
    height: 5px;
    background: #d1d5db;
    border-radius: 3px;
    margin: 0.75rem auto 0;
    flex-shrink: 0;
  }

  .filters-modal-content .modal-header {
    padding: 1rem 1.25rem;
    border-bottom: none;
    flex-shrink: 0;
  }

  .filters-modal-body {
    padding: 0 1.25rem 1.5rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    max-height: calc(100vh - 200px) !important;
  }

  /* Ocultar scrollbar pero permitir scroll */
  .filters-modal-body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .filters-modal-body::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
  }

  .filters-modal-footer {
    padding: 1rem 1.25rem !important;
    flex-shrink: 0;
    gap: 0.5rem;
  }

  .filters-modal-footer .btn {
    flex: 1;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }

  @keyframes slideUpFiltersModal {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}

.filter-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.filter-section .filter-popup-search {
  margin-bottom: 12px;
  position: relative;
  max-width: 300px;
}

.filter-section .filter-popup-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}

.filter-section .filter-popup-search input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
  outline: none;
}

.filter-section .filter-popup-search input:focus,
.filter-section .filter-popup-search input:active {
  border: 0.5px solid #9ca3af !important;
  box-shadow: none;
}

.filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-section-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-section-label {
  font-size: 16px;
  font-weight: 600;
  color: #0A1C2F;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-section-label ion-icon {
  font-size: 18px;
  color: #0A1C2F;
}

.filter-section-count {
  font-size: 12px;
  color: #0A1C2F;
  font-family: 'Montserrat', sans-serif;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 10px;
}

.filter-section-content {
  padding: 0;
}

/* Slider de valoración */
.rating-slider-container {
  position: relative;
  padding: 40px 20px 20px 20px;
}

.rating-slider {
  position: relative;
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  margin-bottom: 20px;
}

.rating-slider input[type="range"] {
  position: absolute;
  width: 100%;
  height: 6px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  top: 0;
  left: 0;
}

.rating-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid #0A1C2F;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: -7px;
}

.rating-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid #0A1C2F;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: -7px;
}

.rating-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

.rating-slider input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
}

.rating-slider::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 6px;
  background: #0A1C2F;
  border-radius: 3px;
  width: var(--rating-percent, 0%);
  z-index: 1;
}

.rating-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #9ca3af;
  font-family: 'Montserrat', sans-serif;
}

.rating-labels span {
  position: relative;
}

.rating-labels span::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #0A1C2F;
  border-radius: 50%;
  opacity: 0.3;
}

.rating-value-tooltip {
  position: absolute;
  top: -50px;
  background: #0A1C2F;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
  transform: translateX(calc(-50% - 19px));
  pointer-events: none;
}

.rating-value-tooltip::after {
  display: none; /* quitar la punta bajo el badge de valoración para ajustar altura */
}

/* Cocinas: ocultar por defecto elementos extra y estilo del control ver más */
.cocina-hidden {
  display: none !important;
}

.cocina-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filters-modal-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 20px !important;
  border-top: 1px solid #e5e7eb !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  background: white !important;
  position: relative !important;
  bottom: auto !important;
  margin: 0 !important;
  min-height: auto !important;
  height: auto !important;
}

.filters-modal-footer .btn-link {
  color: #6b7280 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.filters-modal-footer .btn-link:hover {
  color: #0A1C2F !important;
}

.filters-modal-footer .btn-primary {
  background: #0A1C2F !important;
  color: white !important;
  border: none !important;
  padding: 8px 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Ajustar posición de la X en modal de filtros */
#filtersModal .modal-header {
  padding: 16px 16px 16px 24px !important;
  position: relative !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  flex-shrink: 0 !important;
}

#filtersModal .modal-title {
  flex-grow: 1;
}

#filtersModal .close {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: #6b7280 !important;
  opacity: 1 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  margin: 0 !important;
  text-shadow: none !important;
}

#filtersModal .close:hover {
  color: #0A1C2F !important;
}

/* Filtros */
.restaurantes-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  margin-top: 0;
  padding-bottom: 4px;
  padding-top: 4px;
  padding-left: 24px;
  border-bottom: none; /* Quitar divider */
  justify-content: center;
  align-items: center;
  overflow: visible; /* Permitir que los popups se muestren fuera del contenedor */
  position: relative;
  z-index: 100;
}

.filter-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.2s;
}

.filter-button:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.filter-button.active {
  background: #0A1C2F;
  color: white;
  border-color: #0A1C2F;
}

.filter-button.active:hover {
  background: #0A1C2F;
  color: white;
}

.filter-count {
  background: #0A1C2F;
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  display: none; /* Ocultar por defecto, se mostrará cuando haya selección */
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 8px;
  position: relative; /* Para posicionar los chips de forma absoluta */
  min-height: 30px; /* Altura mínima para que no colapse */
}

.filter-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px; /* Chips más pequeños */
  background: transparent;
  color: #0A1C2F;
  border: 0.5px solid #0A1C2F;
  border-radius: 4px;
  font-size: 11px; /* Texto más pequeño */
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  position: absolute; /* Posición fija */
  white-space: nowrap;
}

.filter-chip button {
  background: none;
  border: none;
  color: #0A1C2F;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  font-size: 16px;
  line-height: 1;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
}

.filter-checkbox input {
  width: 18px;
  height: 18px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background-color: #e5e7eb;
  flex-shrink: 0;
  position: relative;
}

.filter-checkbox input:checked {
  background-color: #0A1C2F;
  border-color: #0A1C2F;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.filter-group {
  position: relative;
  display: inline-block;
}

/* Popup de filtro con punta */
.filter-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10000; /* Z-index muy alto para que quede por encima del mapa */
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 320px;
  max-width: 400px;
  display: none;
  overflow: visible; /* Cambiar de hidden a visible para que se vea la punta */
}

.filter-popup.active {
  display: block;
}

.filter-popup::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 24px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
  z-index: 10001; /* Z-index más alto que el popup para asegurar visibilidad */
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1)); /* Sombra para la punta */
}

.filter-popup-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  font-size: 16px;
  color: #0A1C2F;
  font-family: 'Montserrat', sans-serif;
  background: white;
  border-radius: 12px 12px 0 0;
  position: relative;
  z-index: 1;
}

.filter-popup-search {
  padding: 12px 20px;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}

.filter-popup-search input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
  outline: none;
}

.filter-popup-search input:focus,
.filter-popup-search input:active {
  border: 0.5px solid #9ca3af !important;
  box-shadow: none;
}

.filter-popup-search i {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.filter-popup-list {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden; /* Evitar desbordamiento horizontal */
  padding: 8px 0;
  background: white;
  position: relative;
  z-index: 1;
  -ms-overflow-style: none; /* IE y Edge - ocultar scrollbar */
  scrollbar-width: none; /* Firefox - ocultar scrollbar */
}

.filter-popup-list::-webkit-scrollbar {
  display: none; /* Ocultar barra de desplazamiento en Chrome/Safari */
  width: 0;
}

.filter-popup-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.2s;
  font-family: 'Montserrat', sans-serif;
}

.filter-popup-item:hover {
  background: #f9fafb;
}

.filter-popup-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  cursor: pointer;
  accent-color: #0A1C2F;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background-color: #e5e7eb;
  flex-shrink: 0;
  position: relative;
}

.filter-popup-item input[type="checkbox"]:checked {
  background-color: #0A1C2F;
  border-color: #0A1C2F;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.filter-popup-item label {
  flex: 1;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  margin: 0;
  padding-right: 20px;
}

/* Slider de precio */
.filter-popup-price-range {
  padding: 24px 20px;
  background: white;
}

.price-range-slider-container {
  position: relative;
  width: 100%;
  padding: 0 20px;
}

.price-range-slider {
  position: relative;
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  margin: 50px 0 20px 0;
}

.price-range-slider input[type="range"] {
  position: absolute;
  width: 100%;
  height: 6px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  top: 0;
  left: 0;
}

.price-range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid #0A1C2F;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: -7px; /* Centrar el thumb en la barra (20px height - 6px track) / 2 = 7px */
}

.price-range-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid #0A1C2F;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: -7px; /* Centrar el thumb en la barra */
}

.price-range-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

.price-range-slider input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
}

.price-range-slider::after {
  content: '';
  position: absolute;
  left: var(--min-percent, 0%);
  top: 0;
  height: 6px;
  background: #0A1C2F;
  border-radius: 3px;
  width: calc(var(--max-percent, 100%) - var(--min-percent, 0%));
  z-index: 1;
}

.price-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #9ca3af;
  font-family: 'Montserrat', sans-serif;
}

.price-range-values {
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}

.price-value {
  position: absolute;
  top: -35px;
  background: #0A1C2F;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

#precioMinValueModal {
  left: 20px;
  transform: translateX(-50%);
}

#precioMaxValueModal {
  right: 20px;
  transform: translateX(50%);
}

.filter-popup-footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.filter-popup-footer-split {
  display: flex;
  padding: 12px 16px; /* Reducir padding */
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  justify-content: space-between; /* Espacio entre Borrar y botón */
  align-items: center;
  gap: 8px;
  border-radius: 0 0 12px 12px;
  position: relative;
  z-index: 1;
}

.filter-popup-clear {
  flex: 0 0 auto; /* No crecer, solo el espacio necesario */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Alinear a la izquierda */
  padding: 8px 12px; /* Reducir padding */
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: color 0.2s;
  white-space: nowrap; /* Evitar que se parta el texto */
}

.filter-popup-clear:hover {
  color: #0A1C2F;
}

.filter-popup-button {
  flex: 0 0 auto; /* No crecer, solo el espacio necesario */
  padding: 8px 16px; /* Reducir padding para hacer el botón más pequeño */
  background: #0A1C2F;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px; /* Reducir tamaño de fuente */
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: background 0.2s;
  white-space: nowrap; /* Evitar que se parta el texto */
}

.filter-popup-button:hover {
  background: #0d2a4a;
}

/* Popup posicionado a la derecha */
.filter-popup.right-aligned {
  left: auto;
  right: 0;
  transform: translateX(0); /* Mantener alineado al botón, permitir que se sobreponga al mapa */
  margin-right: 0;
}

.filter-popup.right-aligned::before {
  left: auto;
  right: 20px; /* Posición de la punta arriba a la derecha */
  top: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid white;
  border-top: none;
  z-index: 10001; /* Asegurar que la punta se vea */
  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1)); /* Sombra para la punta */
}

/* Lista de restaurantes */
.restaurantes-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: visible; /* Permitir que los popups se muestren */
  padding: 0;
  padding-top: 16px; /* Espacio encima del primer card */
  padding-left: 16px; /* Añadir padding izquierdo para separar los cards */
  position: relative;
  z-index: 1; /* Z-index bajo para que no interfiera con los popups */
}

/* Contenedor principal centrado */
.restaurantes-page-shell {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.restaurantes-page-shell > .grid {
  overflow: visible;
}

@media (min-width: 1536px) {
  .restaurantes-page-shell {
    max-width: 1320px;
  }
}

@media (max-width: 767px) {
  .restaurantes-page-shell {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Columna del mapa: asegurar sticky real */
.map-column {
  align-self: start;
  overflow: visible;
}

.map-fullscreen-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0A1C2F;
}

.map-fullscreen-button:hover {
  background: #ffffff;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .map-column .sticky {
    position: sticky !important;
    top: 100px !important;
  }
}

@media (min-width: 1200px) {
  .map-column > div {
    position: sticky !important;
    top: 20px !important;
  }
}

/* Input de búsqueda de restaurantes (pequeño, al lado de ordenar por) */
.restaurantes-search-input-small {
  position: relative;
  min-width: 180px;
  max-width: 220px;
  flex: 0 0 auto;
}

.restaurantes-search-input-small input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
  outline: none;
}

.restaurantes-search-input-small input:focus,
.restaurantes-search-input-small input:active {
  border: 0.5px solid #9ca3af !important;
  box-shadow: none;
}

.restaurantes-search-input-small i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
  font-size: 14px;
}

/* Input de búsqueda de restaurantes (antiguo, mantener por si acaso) */
.restaurantes-search-input-container {
  padding: 12px 24px 8px 24px;
  border-bottom: none; /* Quitar divider */
  position: relative;
}

.restaurantes-count-container {
  padding: 12px 24px 24px 24px; /* Más espacio debajo */
  border-bottom: none; /* Quitar divider */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.restaurantes-search-input-container input {
  width: 100%;
  padding: 10px 40px 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
  outline: none;
}

.restaurantes-search-input-container input:focus,
.restaurantes-search-input-container input:active {
  border: 0.5px solid #9ca3af !important;
  box-shadow: none;
}

.restaurantes-search-input-container i {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
  pointer-events: none;
}

.restaurantes-list::-webkit-scrollbar {
  display: none;
}

/* Grid de cards */
#restaurantsList,
#restaurantesList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Card de restaurante en grid (base vertical para uso global) */
.restaurant-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: white;
  border: 0.5px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  height: auto;
  min-height: auto;
}

.restaurant-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Estilos para restaurant-card (base vertical) */
.restaurant-card-image-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  overflow: hidden;
  background: #f5f5f5;
}

.restaurant-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s;
}

.restaurant-card-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.restaurant-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.restaurant-card-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0A1C2F;
  margin: 0;
  line-height: 1.3;
  flex: 1;
  margin-right: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.restaurant-card-cuisine-price {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #0A1C2F;
  margin: 0 0 4px 0; /* reducir espacio entre cocina/precio y la siguiente fila (ciudad) */
}

/* Bloques de info (icono a la izquierda del texto) */
.restaurant-card-cuisine-price,
.restaurant-card-location {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.restaurant-card-info-block {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem; /* menos espacio entre icono y texto */
  margin-right: 0.5rem;
  color: inherit;
  font-weight: 500;
  font-size: 14px;
}

.restaurant-card-location-block {
  margin-right: 0;
}

.restaurant-card-info-text {
  margin: 0;
  font-weight: inherit;
}

.restaurant-card-info-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.restaurant-card-info-icon svg {
  width: 14px;
  height: 14px;
}

.restaurant-card-location-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 4px; /* reducir espacio entre la fila de ciudad y el contenido inferior */
  gap: 0.25rem;
}

.restaurant-card-location {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #0A1C2F;
  margin: 0;
  flex: 1;
}

.restaurant-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline;
}

/* Solo para la página de restaurantes: layout horizontal */
.restaurantes-page .restaurant-card {
  flex-direction: row;
  align-items: stretch;
  min-height: 180px;
}

.restaurantes-page .restaurant-card-image-wrapper {
  width: 240px;
  min-width: 240px;
  height: 100%;
  padding-top: 0;
}

.restaurantes-page .restaurant-card .carousel {
  width: 240px;
  min-width: 240px;
  height: 100%;
  min-height: 180px;
  flex-shrink: 0;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .restaurantes-page .restaurant-card {
    flex-direction: column;
    min-height: auto;
  }

  .restaurantes-page .restaurant-card .carousel,
  .restaurantes-page .restaurant-card-image-wrapper {
    width: 100%;
    min-width: 100%;
    height: 192px;
    min-height: 192px;
    border-radius: 12px 12px 0 0;
  }
}

.restaurant-status-open {
  color: #16a34a;
}

.restaurant-status-closed {
  color: #dc2626;
}

@media (max-width: 767px) {
  .restaurant-card {
    flex-direction: column;
    min-height: auto;
  }

  .restaurant-card .carousel,
  .restaurant-card-image-wrapper {
    width: 100%;
    min-width: 100%;
    height: 192px;
    min-height: 192px;
    border-radius: 12px 12px 0 0;
  }
}

/* Icono de favoritos en cards */
.restaurant-card-favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  pointer-events: all;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #000000;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  outline: none;
}

.restaurant-card-favorite:focus {
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.restaurant-card-favorite:focus-visible {
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.restaurant-card-favorite:hover {
  background: rgba(255, 255, 255, 1);
  color: #C41E3A;
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.restaurant-card-favorite.favorite-active {
  color: #C41E3A;
  background: rgba(255, 255, 255, 1);
}

.restaurant-card-favorite.favorite-active svg {
  fill: #C41E3A !important;
  stroke: #C41E3A;
}

.restaurant-card-favorite svg {
  width: 20px;
  height: 20px;
}

/* Card de restaurante (similar a home pero vertical) - mantener por compatibilidad */
.restaurante-list-card {
  display: flex;
  gap: 0;
  padding: 0 24px 0 0; /* Reducir padding inferior de 16px a 0 */
  margin-bottom: 12px;
  margin-left: 0; /* Asegurar que no hay margen izquierdo */
  background: white;
  border: none;
  border-radius: 12px;
  box-shadow: none;
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  height: 180px; /* Fijar altura igual a la imagen */
}

/* Los chips de hora no deben activar la navegación */
.restaurante-list-card-time-chip {
  pointer-events: auto;
  cursor: default;
}

.restaurante-list-card:hover {
  box-shadow: none;
}

.restaurante-list-card.active {
  border: none;
  box-shadow: none;
}

.restaurante-list-card-image {
  flex: 0 0 220px;
  width: 220px;
  height: 180px;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  object-fit: cover;
  position: relative;
  margin: 0;
  margin-left: -16px; /* Compensar el padding del contenedor para que llegue al borde */
}

.restaurante-list-card-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15); /* Filtro oscuro del 15% */
  z-index: 1;
  pointer-events: none;
}

.restaurante-list-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.9) contrast(1.1); /* Filtro adicional para mejorar calidad visual */
}

.restaurante-list-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding: 12px 16px 16px 20px; /* Reducir padding-top de 16px a 12px */
  height: 100%; /* Ocupar toda la altura */
}

.restaurante-list-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px; /* Posición fija */
  width: 100%;
  min-height: 28px; /* Altura mínima fija */
  flex-shrink: 0;
}

.restaurante-list-card-name {
  font-size: 18px;
  font-weight: 600;
  color: #0A1C2F;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.3;
  flex: 1;
  margin-right: 8px;
}

.restaurante-list-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #000000;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
  margin-left: auto;
}

.restaurante-list-card-rating .rc-rating-icon {
  width: 14px;
  height: 14px;
  fill: #F59E0B;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Card de restaurante - sin border ni shadow (ya incluido arriba) */

/* Overlay oscuro para imágenes de restaurantes en restaurantes.ejs */
.restaurant-card .carousel {
  position: relative;
  width: 100%;
  height: 192px; /* h-48 = 192px */
}

.restaurant-card .carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.restaurant-card .carousel > div {
  position: relative;
}

.restaurant-card .carousel .bg-black\/20 {
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* Estilos para chips de slots */
.restaurante-list-card-time-chip {
  display: inline-block;
  background-color: #e5e7eb;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
}

/* Contenedor de filtros activos */
#activeFiltersContainer {
  background-color: #e5e7eb;
}

/* Asegurar que los restaurantes no se sobrepongan */
#restaurantsList {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-top: 0;
}

/* Asegurar que los cards no pasen por detrás de la barra sticky */
.restaurant-card {
  position: relative;
  z-index: 1;
}

/* Contenedor de la columna de cards - asegurar que no se superponga */
.col-span-6 {
  position: relative;
  overflow: visible;
}


/* Asegurar que el contenedor principal tenga el espacio correcto */
.col-span-9 {
  position: relative;
}

/* Filtros activos */
#activeFiltersContainer {
  min-height: 40px;
}

#activeFilters {
  gap: 0.5rem;
}

#activeFilters .inline-flex {
  transition: all 0.2s;
}

#activeFilters .inline-flex:hover {
  background-color: #dbeafe;
}

/* Badge Mapa */
a[href="/restaurantesmap"] {
  text-decoration: none;
}

a[href="/restaurantesmap"]:hover {
  text-decoration: none;
}

.restaurante-list-card-rating-count {
  display: none;
}

.restaurante-list-card-cuisine {
  font-size: 14px;
  color: #0A1C2F;
  font-family: 'Montserrat', sans-serif;
  margin: 0 0 4px 0; /* Posición fija */
  min-height: 20px; /* Altura mínima fija */
  flex-shrink: 0;
  font-weight: 500;
}

.restaurante-list-card-location-wrapper {
  margin-bottom: 4px; /* Posición fija */
  min-height: 20px; /* Altura mínima fija */
  flex-shrink: 0;
}

.restaurante-list-card-location {
  font-size: 14px;
  color: #0A1C2F;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  font-weight: 500;
}

.restaurante-list-card-discount-wrapper {
  margin-bottom: 8px; /* Aumentar espacio antes de los chips */
  min-height: 20px; /* Altura mínima fija - siempre reservar espacio */
  flex-shrink: 0;
}

.restaurante-list-card-chips,
.restaurant-card-chips {
  display: flex;
  gap: 1rem; /* aumentar espacio entre chips */
  flex-wrap: nowrap;
  margin-top: auto; /* Empujar hacia abajo */
  padding: 0 4px;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px; /* Altura mínima fija - siempre reservar espacio */
  flex-shrink: 0;
  align-items: center;
}

.restaurante-list-card-chips::-webkit-scrollbar,
.restaurant-card-chips::-webkit-scrollbar {
  display: none;
}

.restaurante-list-card-time-chip {
  padding: 6px 12px;
  border-radius: 5px;
  width: calc((100% - 32px) / 5);
  min-width: calc((100% - 32px) / 5);
  max-width: calc((100% - 32px) / 5);
  text-align: center;
  background: transparent;
  border: 1px solid #0A1C2F;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #0A1C2F;
  white-space: nowrap;
  flex: 0 0 calc((100% - 32px) / 5);
  height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem; /* separación entre chips */
}

/* Badge de descuento (mismo estilo que más reservados) */
.restaurante-list-discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 6px;
  background: #0A1C2F;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  flex-shrink: 0;
  height: 20px;
  min-width: auto;
  justify-content: center;
}

/* Estilo para chips de availability (usado en carousel y lista) */
.availability-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid #0A1C2F;
  background: transparent;
  color: #0A1C2F;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  margin: 0 0.5rem 0 0; /* añadir separación a la derecha entre chips */
}

/* Columna derecha: Mapa */
.restaurantes-map-column {
  position: sticky;
  top: 0;
  height: 100%;
  padding-left: 12px;
  z-index: 1; /* Z-index bajo para que quede detrás de los popups */
}


#restaurantesMap {
  width: 100%;
  height: calc(100vh - 100px);
  border-radius: 12px;
  overflow: hidden;
}

#restaurantesMap {
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  z-index: 1; /* Z-index bajo para que quede detrás de los popups */
  outline: none !important;
}

/* Quitar borde azul de focus de Windows en el contenedor del mapa */
.restaurantes-map-column:focus,
.restaurantes-map-column:focus-visible,
#restaurantesMap:focus,
#restaurantesMap:focus-visible,
.restaurantes-map-column *:focus,
.restaurantes-map-column *:focus-visible {
  outline: none !important;
  border: none !important;
}

/* Skeleton loading */
.restaurantes-skeleton {
  display: contents; /* Para que los skeletons se integren en el grid */
}

.restaurantes-skeleton {
  display: contents; /* Para que los skeletons se integren en el grid */
}

.restaurante-list-card.skeleton-card {
  display: flex;
  gap: 0;
  padding: 0 24px 0 0;
  margin-bottom: 12px;
  background: white;
  border-radius: 12px;
  height: 180px;
  animation: pulse 1.5s ease-in-out infinite;
}

.restaurante-list-card.skeleton-card .skeleton-image {
  flex: 0 0 220px;
  width: 220px;
  height: 180px;
  background: #e5e7eb;
  border-radius: 12px 0 0 12px;
  margin-left: -16px;
  animation: pulse 1.5s ease-in-out infinite;
}

.restaurante-list-card.skeleton-card .skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 16px 16px 20px;
  height: 100%;
}

.restaurante-list-card.skeleton-card .skeleton-line {
  height: 16px;
  background: #e5e7eb;
  border-radius: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}

.restaurante-list-card.skeleton-card .skeleton-title {
  width: 70%;
  height: 20px;
  margin-bottom: 4px;
}

.restaurante-list-card.skeleton-card .skeleton-rating {
  width: 50px;
  height: 20px;
  background: #e5e7eb;
  border-radius: 4px;
  animation: pulse 1.5s ease-in-out infinite;
}

.restaurante-list-card.skeleton-card .skeleton-cuisine {
  width: 50%;
  height: 14px;
  margin-bottom: 8px;
}

.restaurante-list-card.skeleton-card .skeleton-location {
  width: 40%;
  height: 14px;
  margin-bottom: 8px;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Paginador */
.pagination-container {
  display: flex;
  justify-content: center;
  margin: 32px 0;
  padding: 16px 0;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  padding: 8px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  color: #0A1C2F;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.pagination-btn:hover:not(.active) {
  background: #f9fafb;
  border-color: #d1d5db;
}

.pagination-btn.active {
  background: #0A1C2F;
  color: white;
  border-color: #0A1C2F;
}

.pagination-ellipsis {
  padding: 0 8px;
  color: #6b7280;
  font-family: 'Montserrat', sans-serif;
}

/* Modales */
.modal-header h5 {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #0A1C2F;
}

.price-range {
  padding: 20px 0;
}

.price-range input[type="range"] {
  width: 100%;
  margin: 10px 0;
}

.price-values {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #0A1C2F;
  margin-top: 16px;
  font-family: 'Montserrat', sans-serif;
}

.rating-range {
  padding: 20px 0;
}

.rating-range input[type="range"] {
  width: 100%;
  margin: 10px 0;
}

.rating-value {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #0A1C2F;
  margin-top: 16px;
  font-family: 'Montserrat', sans-serif;
}

/* Estilos de focus generales para todos los inputs y selects */
input[type="text"]:focus,
input[type="text"]:active,
input[type="search"]:focus,
input[type="search"]:active,
input[type="email"]:focus,
input[type="email"]:active,
input[type="number"]:focus,
input[type="number"]:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
  outline: none;
  border: 0.5px solid #9ca3af !important;
  box-shadow: none !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .restaurantes-layout {
    flex-direction: column;
    height: auto;
  }
  
/* Ocultar botón X del InfoWindow de Google Maps - DEFINITIVO */
.gm-ui-hover-effect,
button[title="Cerrar"],
button[title*="Cerrar"],
button[aria-label="Cerrar"],
button[aria-label*="Cerrar"],
.gm-style .gm-ui-hover-effect,
.gm-style-iw-c button,
.gm-style-iw button,
.gm-style-iw-d button {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* ============================================
   SOLUCIÓN REAL: Hacer transparentes los contenedores de Google Maps
   Eliminar TODOS los paddings, especialmente padding-right dinámico
   ============================================ */

/* Versión ultra agresiva: eliminar padding-right y todos los paddings de TODOS los contenedores */
.gm-style .gm-style-iw,
.gm-style .gm-style-iw > div,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-c > div,
.gm-style .gm-style-iw-d,
.gm-style-iw-d > div,
.gm-style-iw-d > div > div {
  padding: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Quitar la capa superior que agrega Google Maps */
.gm-style-iw-c::after {
  content: none !important;
  display: none !important;
}

/* Quitar la máscara SVG que crea el borde blanco */
.gm-style-iw-tc > div {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Este div es el que hace el borde blanco superior */
.gm-style-iw-t {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Eliminar pseudo-elemento adicional del borde superior */
.gm-style-iw-t::after {
  display: none !important;
}

/* La tarjeta interna (div con id="infoWindow-*") ya tiene:
   - background: white
   - border-radius: 12px
   - overflow: hidden
   en sus estilos inline, así que es la única que define el estilo visual */

/* Asegurar que el div principal del InfoWindow esté pegado a los bordes */
.gm-style-iw-d [id^="infoWindow-"] {
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

/* Asegurar que el contenedor de la imagen esté pegado a los bordes superiores y laterales */
.gm-style-iw-d [id^="infoWindow-"] > div:first-child {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
}

/* Asegurar que la imagen esté pegado a los bordes superiores y laterales */
.gm-style-iw-d [id^="infoWindow-"] img {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

  .restaurantes-list-column {
    flex: 1;
    max-height: 50vh;
  }
  
  .restaurantes-map-column {
    flex: 1;
    height: 50vh;
    position: relative;
  }
}

@media (max-width: 768px) {
  .restaurantes-search-form {
    flex-wrap: wrap;
  }
  
  .search-field {
    min-width: calc(50% - 6px);
  }
  
  .search-button {
    width: 100%;
  }
}

/* Badge Mapa */
a[href="/restaurantesmap"] {
  text-decoration: none;
}

a[href="/restaurantesmap"]:hover {
  text-decoration: none;
}

/* Asegurar que los slots se muestren */
.restaurante-list-card-chips {
  min-height: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.restaurante-list-card-time-chip {
  display: inline-block;
  background-color: #e5e7eb;
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
  margin-right: 0.5rem; /* separación entre chips (lista compacta) */
}

/* Estilos para card seleccionado */
.restaurant-card.selected {
  border: 0.5px solid #374151 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease;
}

.restaurant-card {
  transition: all 0.2s ease;
  cursor: pointer;
}

.restaurant-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Input de búsqueda de restaurantes */
.restaurant-search-input {
  background: white !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.2s ease;
  outline: none;
}

/* Select de ordenar y texto "Ordenar:" */
select#sortSelect,
select[id="sortSelect"],
.restaurantes-list-header-controls span.text-sm {
  font-family: 'Montserrat', sans-serif;
}

/* Aplicar Montserrat a todos los elementos del header de búsqueda */
.restaurantes-list-header,
.restaurantes-list-header-controls,
.restaurantes-list-header-controls * {
  font-family: 'Montserrat', sans-serif;
}

.restaurant-search-input:hover {
  border-color: #4B5563 !important;
}

.restaurant-search-input:focus {
  border-color: #0A1C2F !important;
  box-shadow: 0 0 0 3px rgba(10, 28, 47, 0.1);
}

/* ========================================================================== PAGINACIÓN ========================================================================== */
.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 20px 0;
}

.pagination-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #e5e7eb;
  background: white;
  color: #374151;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: 'Montserrat', sans-serif;
}

.pagination-btn:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-btn.active {
  background: #0A1C2F;
  color: white;
  border-color: #0A1C2F;
  font-weight: 600;
}

.pagination-btn.active:hover {
  background: #0d2a4a;
  border-color: #0d2a4a;
}

.pagination-nav {
  min-width: 100px;
  font-weight: 500;
}

.pagination-number {
  min-width: 40px;
  padding: 0 12px;
}

.pagination-ellipsis {
  padding: 0 8px;
  color: #9ca3af;
  font-size: 14px;
  display: flex;
  align-items: center;
  height: 40px;
}

@media (max-width: 768px) {
  .pagination-wrapper {
    gap: 0.25rem !important;
    padding: 1rem 0.5rem !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    justify-content: flex-start !important;
  }
  
  .pagination-wrapper::-webkit-scrollbar {
    display: none !important;
  }
  
  .pagination-btn {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 0.8125rem !important;
    flex-shrink: 0 !important;
  }
  
  .pagination-nav {
    min-width: 60px !important;
    font-size: 0.75rem !important;
    padding: 0 8px !important;
  }
  
  .pagination-nav span {
    display: none !important;
  }
  
  .pagination-number {
    min-width: 36px !important;
    padding: 0 8px !important;
  }
  
  .pagination-ellipsis {
    padding: 0 4px !important;
    font-size: 0.75rem !important;
  }
}

/* Modal de filtros responsive */
@media (max-width: 768px) {
  .filters-modal-content {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  
  .filters-modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 1rem !important;
  }
  
  .filter-section {
    margin-bottom: 1.5rem;
  }
  
  .filter-popup-list {
    max-height: 200px;
    overflow-y: auto;
  }
}

/* Cards responsive adicional */
@media (max-width: 640px) {
  .restaurant-card {
    min-width: 100%;
  }
}

/* ==========================================================================
   MEJORAS RESPONSIVE COMPLETAS - MOBILE FIRST APPROACH
   ========================================================================== */

/* ============================================
   BREAKPOINT 1: MOBILE PORTRAIT (≤479px)
   ============================================ */
@media (max-width: 479px) {
  /* Layout principal - una columna */
  .w-full.max-w-\\[98\\%\\] {
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .grid.grid-cols-1.md\\:grid-cols-12 {
    gap: 1rem !important;
  }
  
  /* Cards: 1 por fila */
  #restaurantesList.grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Barra de búsqueda superior - stack vertical */
  .restaurantes-search-bar {
    padding: 1rem 0 !important;
  }
  
  .restaurantes-search-form {
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 0 0.75rem !important;
  }
  
  .search-fields-group {
    min-width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
  }
  
  .search-field {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  
  .search-field:first-child,
  .search-field:nth-child(2),
  .search-field:last-child > div {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  
  .search-button {
    width: 100% !important;
    border-radius: 4px !important;
    margin-top: 0.5rem;
  }
  
  /* Controles de búsqueda/ordenar - stack vertical */
  .bg-white.mb-6 .flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  
  .restaurant-search-input {
    width: 100% !important;
    min-width: 100% !important;
  }
  
  #sortSelect {
    width: 100% !important;
  }
  
  /* Botones de filtro - full width */
  .flex.gap-2 {
    width: 100% !important;
  }
  
  .abierto-ahora-chip,
  .filter-modal-button {
    flex: 1 !important;
    justify-content: center !important;
  }
  
  /* Tipografía reducida */
  .restaurant-card-name {
    font-size: 0.9375rem !important; /* 15px */
  }
  
  .restaurant-card-cuisine-price {
    font-size: 0.8125rem !important; /* 13px */
  }
  
  .restaurant-card-location {
    font-size: 0.75rem !important; /* 12px */
  }
  
  /* Espaciado reducido */
  .restaurant-card-content {
    padding: 0.75rem !important;
  }
  
  /* Mapa: completamente oculto, solo botón flotante */
  #restaurantesMap {
    display: none !important;
  }
  
  .md\\:col-span-5 {
    display: none !important;
  }
  
  /* Botón flotante de mapa mejorado */
  #showMapButton {
    position: fixed !important;
    bottom: 1.25rem !important;
    right: 1.25rem !important;
    left: auto !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    background: #0A1C2F !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    min-width: auto !important;
    width: auto !important;
    transition: all 0.3s ease !important;
  }
  
  #showMapButton:hover,
  #showMapButton:active {
    background: #0d2a47 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  }
  
  #showMapButton i,
  #showMapButton [data-lucide] {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }
  
  /* Modal de mapa fullscreen */
  #mapModal {
    z-index: 9999 !important;
  }
  
  /* Paginación más compacta */
  .pagination-wrapper {
    gap: 0.25rem !important;
  }
  
  .pagination-btn {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 0.75rem !important;
  }
}

/* ============================================
   BREAKPOINT 2: MOBILE LANDSCAPE (480px - 767px)
   ============================================ */
@media (min-width: 480px) and (max-width: 767px) {
  /* Layout principal */
  .grid.grid-cols-1.md\\:grid-cols-12 {
    gap: 1.25rem !important;
  }
  
  /* Cards: 1 por fila (mantener para mejor legibilidad) */
  #restaurantesList.grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  
  /* Barra de búsqueda - 2 columnas */
  .search-fields-group {
    min-width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  
  .search-field:first-child,
  .search-field:nth-child(2) {
    min-width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
  
  .search-field:last-child {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  
  .search-button {
    width: 100% !important;
    border-radius: 4px !important;
    margin-top: 0.5rem;
  }
  
  /* Controles de búsqueda - flex row con wrap */
  .bg-white.mb-6 .flex {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }
  
  /* Mapa: oculto, solo botón flotante */
  #restaurantesMap {
    display: none !important;
  }
  
  .md\\:col-span-5 {
    display: none !important;
  }
  
  /* Tipografía ligeramente más grande que portrait */
  .restaurant-card-name {
    font-size: 1rem !important; /* 16px */
  }
  
  .restaurant-card-cuisine-price {
    font-size: 0.875rem !important; /* 14px */
  }
}

/* ============================================
   BREAKPOINT 3: TABLET (768px - 1199px) Y TAMAÑOS INTERMEDIOS
   ============================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  /* Layout: 2 columnas (cards + mapa estático) */
  .grid.grid-cols-1.md\\:grid-cols-12 {
    gap: 1.5rem !important;
  }
  
  .md\\:col-span-7 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  .md\\:col-span-5 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Cards: 1 por fila */
  #restaurantesList.grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Barra de búsqueda - ajustes */
  .restaurantes-search-form {
    padding: 0 1rem !important;
  }
  
  .search-fields-group {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Mapa interactivo: OCULTO en tablet (optimización de velocidad) */
  #restaurantesMap {
    display: none !important;
  }
  
  /* Mapa estático: VISIBLE en tablet */
  .map-static-container {
    display: block !important;
  }
  
  .sticky {
    position: sticky !important;
    top: 80px !important;
  }
  
  /* Tipografía estándar */
  .restaurant-card-name {
    font-size: 1rem !important;
  }
  
  /* Espaciado moderado */
  .restaurant-card-content {
    padding: 1rem !important;
  }
  
  /* Controles de búsqueda - layout horizontal */
  .bg-white.mb-6 .flex {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
}

/* ============================================
   BREAKPOINT 4: DESKTOP (≥1280px) - Solo pantallas grandes
   ============================================ */
@media (min-width: 1280px) {
  /* Forzar visibilidad del mapa interactivo en desktop */
  .xl\\:block {
    display: block !important;
  }
  
  .xl\\:col-span-5 {
    grid-column: span 5 / span 5 !important;
  }
  
  .xl\\:col-span-7 {
    grid-column: span 7 / span 7 !important;
  }
  
  .xl\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  /* Ocultar mapa estático en desktop */
  .xl\\:hidden {
    display: none !important;
  }
  /* Layout: máximo ancho para mejor legibilidad */
  .w-full.max-w-\\[98\\%\\] {
    max-width: 1400px !important;
  }
  
  /* Cards: 1 por fila en desktop */
  #restaurantesList.grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  /* Asegurar que el mapa interactivo esté visible */
  #restaurantesMap {
    display: block !important;
  }
  
  /* Ocultar mapa estático */
  .map-static-container {
    display: none !important;
  }
  
  /* Barra de búsqueda - máximo ancho */
  .restaurantes-search-form {
    max-width: 1200px !important;
  }
  
  /* Mapa: altura completa */
  #restaurantesMap {
    height: calc(100vh - 200px) !important;
  }
  
  /* Tipografía óptima para desktop */
  .restaurant-card-name {
    font-size: 1.0625rem !important; /* 17px */
  }
  
  .restaurant-card-cuisine-price {
    font-size: 0.9375rem !important; /* 15px */
  }
  
  /* Espaciado generoso */
  .restaurant-card-content {
    padding: 1.25rem !important;
  }
}

/* ============================================
   OPTIMIZACIONES GENERALES RESPONSIVE
   ============================================ */

/* Prevenir scroll horizontal en todos los tamaños */
body,
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.restaurantes-page,
.min-h-screen.bg-white {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.w-full.max-w-\\[98\\%\\] {
  overflow-x: hidden !important;
}

/* Área de toque mínima para móvil (44x44px recomendado por Apple/Google) */
@media (max-width: 767px) {
  button,
  .abierto-ahora-chip,
  .filter-modal-button,
  .restaurant-card-favorite,
  .pagination-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Inputs y selects también */
  input[type="text"],
  input[type="date"],
  select {
    min-height: 44px !important;
  }
}

/* Optimización de imágenes responsive */
.restaurant-card-image {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

@media (max-width: 767px) {
  .restaurant-card-image {
    /* En móvil, usar imágenes más pequeñas si es posible */
    object-fit: cover;
  }
}

/* Ajustes de z-index para evitar solapamientos */
@media (max-width: 1199px) {
  .md\\:col-span-5 {
    z-index: 1 !important;
  }
  
  .md\\:col-span-7 {
    z-index: 2 !important;
  }
}

/* Evitar sticky en móvil para no romper layout */
@media (max-width: 767px) {
  .sticky {
    position: relative !important;
    top: auto !important;
  }
}

/* Mejoras de rendimiento: reducir animaciones en móvil */
@media (max-width: 767px) {
  .restaurant-card {
    transition: box-shadow 0.15s !important;
  }
  
  .restaurant-card:hover {
    /* Reducir efecto hover en móvil */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }
}

/* Ajustes de padding/margin responsive */
@media (max-width: 479px) {
  .pl-4 {
    padding-left: 0.75rem !important;
  }
  
  .pr-4 {
    padding-right: 0.75rem !important;
  }
  
  .py-8 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .pl-4 {
    padding-left: 1rem !important;
  }
  
  .pr-4 {
    padding-right: 1rem !important;
  }
}

/* Modal de filtros responsive mejorado */
@media (max-width: 767px) {
  .filters-modal-content {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  
  .filters-modal-body {
    max-height: calc(100vh - 180px) !important;
    padding: 1rem !important;
  }
  
  .filter-section {
    margin-bottom: 1.25rem !important;
  }
}

/* Botón flotante de mapa - mejor posicionamiento */
@media (max-width: 767px) {
  #showMapButton {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    left: auto !important;
    z-index: 50 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(4px) !important;
  }
  
  /* Asegurar que el botón no se oculte detrás de otros elementos */
  #showMapButton {
    pointer-events: auto !important;
  }
}

/* Mejoras generales de UI responsive */
@media (max-width: 1024px) {
  /* Asegurar que el contenedor principal no cause overflow */
  .w-full.max-w-\\[98\\%\\] {
    overflow-x: hidden !important;
  }
  
  /* Mejorar espaciado en cards */
  #restaurantesList.grid {
    padding: 0 0.5rem !important;
  }
  
  /* Ajustar sticky positioning del mapa */
  .sticky {
    position: relative !important;
  }
  
  @media (min-width: 768px) {
    .sticky {
      position: sticky !important;
      top: 80px !important;
    }
  }
}

/* Mejoras para tamaños intermedios (1200x800, etc) */
@media (min-width: 1025px) and (max-width: 1279px) {
  /* Ocultar mapa en tamaños intermedios para evitar solapamiento */
  .xl\\:block {
    display: none !important;
  }
  
  .xl\\:col-span-5 {
    display: none !important;
  }
  
  /* Cards ocupan todo el ancho */
  .md\\:col-span-7,
  .xl\\:col-span-7 {
    grid-column: span 12 / span 12 !important;
  }
  
  /* Mapa estático también oculto en este rango */
  .map-static-container {
    display: none !important;
  }
}

/* Ajustes finales de espaciado y layout */
@media (max-width: 767px) {
  /* Mejorar padding del contenedor principal */
  .w-full.max-w-\\[98\\%\\] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Ajustar grid de cards */
  #restaurantesList.grid {
    gap: 1rem !important;
    padding: 0 !important;
  }
  
  /* Mejorar contenedor de búsqueda */
  .bg-white.mb-6 {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
  }
}



/* ========================================================================== MEJORAS VISUALES - FILTROS ========================================================================== */ /* Checkboxes m�s visibles */ input[type='checkbox'] { width: 18px; height: 18px; border: 2px solid #d1d5db; border-radius: 4px; cursor: pointer; appearance: none; -webkit-appearance: none; background-color: #f3f4f6; } input[type='checkbox']:checked { background-color: #0A1C2F; border-color: #0A1C2F; background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } /* Bot�n Abierto Ahora */ .abierto-ahora-chip { transition: all 0.2s; } .abierto-ahora-chip.active { background-color: #0A1C2F !important; color: white !important; border-color: #0A1C2F !important; } /* Badges de estado abierto/cerrado */ .status-badge-open { background-color: transparent; color: #065f46; padding: 0; border-radius: 0; font-size: 12px; font-weight: 600; } .status-badge-closed { background-color: transparent; color: #991b1b; padding: 0; border-radius: 0; font-size: 12px; font-weight: 600; } /* Contadores de filtros */ #tipoCount, #mealTypeCount, #cocinaCount, #precioCount, #valoracionCount, #ciudadCount, #ofertasCount { min-width: 24px; text-align: center; }

/* Estilos para InfoBox - Ocultar botón X y eliminar márgenes */
.custom-infobox,
.custom-infobox .infoBox-close,
.custom-infobox .infoBox-close-box,
.infoBox .infoBox-close,
.infoBox .infoBox-close-box {
  display: none !important;
  visibility: hidden !important;
}

/* Eliminar márgenes y padding del InfoBox */
.custom-infobox,
.infoBox {
  padding: 0 !important;
  margin: 0 !important;
}

/* Asegurar que la imagen del InfoBox esté pegada a los bordes */
.custom-infobox img,
.infoBox img {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* ====== 1. ELIMINAR LA X DEL INFOBOX POR COMPLETO ====== */

.infoBox img[style*="cursor: pointer"],
.infoBox .infoBox-close,
.infoBox-close,
.infoBox-close-box {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* ====== 2. ELIMINAR EL PADDING Y MÁRGENES QUE GOOGLE AÑADE ====== */

.infoBox,
.infoBox > div,
.infoBox > div > div {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* ====== 3. FORZAR QUE EL CONTENIDO QUE TÚ GENERAS NO TENGA BORDES ====== */

.custom-infobox,
.custom-infobox div,
.custom-infobox img {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: block !important;
}

/* ====== 4. SOLVENTAR EL ESPACIO SUPERIOR "FANTASMA" ====== */

.infoBox > div:first-child {
    margin: 0 !important;
    padding: 0 !important;
}

/* ====== 5. INFOBOX WRAPPER (a veces añade margen) ====== */

.infoBox-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* ====== 6. EVITAR QUE GOOGLE INSERTE ESPACIO EN LADOS ====== */

.infoBox {
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* ===============================================
   1. ELIMINAR LA X DEL INFOBOX (GOOGLE MAPS)
   =============================================== */

/* La X es SIEMPRE un <img> absolutamente posicionado dentro del primer div */
.gm-style img[style*="position: absolute"],
.gm-style img[style*="top: 0"],
.gm-style img[style*="right: 0"],
.gm-style img[src*="close"],
.gm-ui-hover-effect {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ===============================================
   2. ELIMINAR MÁRGENES BLANCOS DE GOOGLE MAPS
   =============================================== */

.gm-style .gm-style-iw-d,
.gm-style .infoBox,
.infoBox > img {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* ===============================================
   3. EVITAR ESPACIO SUPERIOR DEL WRAPPER OCULTO
   =============================================== */

.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-t {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* ===============================================
   SOLUCIÓN EXACTA PARA EL PADDING SUPERIOR
   =============================================== */

/* Quitar SOLO el padding superior que desplaza el contenido del InfoWindow */
.gm-style-iw-d,
.gm-style .gm-style-iw-d {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Mantener el contenido visible y permitir scroll si es necesario */
.gm-style-iw-d {
    overflow: visible !important;
    padding-bottom: 0 !important;
}

/* Eliminar el espacio blanco entre la imagen y el contenido del InfoBox */
.custom-infobox > div:first-child + div,
.infoBox > div:first-child + div,
.custom-infobox a > div:last-child,
.infoBox a > div:last-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Asegurar que el contenedor de contenido no tenga margen superior */
.custom-infobox > div > div:last-child,
.infoBox > div > div:last-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Cambiar padding-top de .gm-style-iw-ch a 0 */
.gm-style-iw-ch {
    padding-top: 0 !important;
}

/* Icono de carga para el contador de filtros (tres líneas verticales) */
.filter-loading-icon {
    display: inline-block;
    width: 24px;
    height: 20px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20'%3E%3Crect x='3' y='10' width='4' height='10' fill='white' rx='2'%3E%3Canimate attributeName='height' values='10;14;10' dur='1.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='10;6;10' dur='1.2s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='10' y='5' width='4' height='15' fill='white' rx='2'%3E%3Canimate attributeName='height' values='15;10;15' dur='1.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='5;10;5' dur='1.2s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='17' y='10' width='4' height='10' fill='white' rx='2'%3E%3Canimate attributeName='height' values='10;14;10' dur='1.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='y' values='10;6;10' dur='1.2s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Asegurar que el botón centre el contenido cuando solo tiene el icono */
#applyFilters {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    white-space: pre; /* Preservar espacios en blanco */
}

#applyFilters .filter-loading-icon {
    margin: 0 auto;
}

/* Asegurar que los espacios se preserven en el texto del botón */
#applyFilters span#filtersCountModal {
    margin: 0 4px; /* Añadir margen para separar visualmente */
}