/* stores.css - Estilos para la página de Tiendas */

/* Variables para consistencia */
:root {
  --card-bg: #ffffff;
  --card-border: #e0e0e0;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  --primary-text: #1f2937;
  --secondary-text: #6b7280;
  --accent-color: #024a87; /* El azul de tu marca */
  --bg-light: #fafbfc;
  --border-grey: #ddd;
  --primary: #1877f2;
  --primary-hover: #165ec9;
}

/* Contenedor principal de la sección de tiendas */
.stores-section {
  width: 100vw; /* Ocupa el 100% del ancho del viewport */
  position: relative; /* Necesario para el posicionamiento absoluto */
  left: 50%; /* Mueve el elemento a la mitad del viewport */
  transform: translateX(-50%); /* Centra el elemento de 100vw */
  padding: 2rem; /* Padding uniforme alrededor del contenido */
  box-sizing: border-box; /* Asegura que el padding se incluya en el width */
}

/* Header específico de Tiendas (Título y Búsqueda/Ubicación) */
.stores-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 1.5rem; /* El padding lateral ahora viene de .stores-section */
  gap: 1rem;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

.stores-header h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--primary-text);
  margin-right: auto; /* Empuja el contenedor de búsqueda/ubicación a la derecha */
}

/* Nuevo contenedor para el buscador y el botón de ubicación */
.search-and-filter-container {
  display: flex;
  align-items: center;
  gap: 12px;           /* Espacio mínimo entre el filtro y el buscador */
  flex-wrap: nowrap;
  justify-content: flex-end;
  width: auto;
  margin-left: auto;
}

/* Estilos para el grupo de filtro (dropdown) */
.search-filter-group {
    position: relative;
    display: inline-block; /* Permite que se posicione junto a otros elementos */
    z-index: 20; /* Asegura que el dropdown aparezca por encima de otros elementos */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 0;
}

.filter-button {
  background-color: #f0f0f0;
  color: var(--primary-text);
  border: 1px solid #ccc;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  width: 250px; /* Ancho fijo igual al buscador */
}

#filterUbicacionTiendas.filter-button {
    margin-right: 0; /* Elimina separación artificial */
}


.filter-button:hover {
    background-color: #e0e0e0;
    border-color: #a0a0a0;
}

.filter-button i {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

/* Estilos para el contenido del dropdown */
.dropdown-content {
    display: none; /* Oculto por defecto */
    position: absolute;
    background-color: var(--bg-light);
    width: 250px; /* Mismo ancho que el botón */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 1000; /* Aumentado el z-index para asegurar que aparezca encima */
    top: 100%; /* Se posiciona justo debajo del botón */
    left: 0; /* Alineado al botón */
    margin-top: 8px; /* Pequeño espacio entre el botón y el dropdown */
    border: 1px solid var(--border-grey);
    overflow: hidden; /* Asegura que los bordes redondeados se vean bien */
    flex-direction: column; /* Para organizar el input de búsqueda y las opciones */
}

/* Muestra el contenido del dropdown cuando el grupo padre tiene la clase 'active' */
.search-filter-group.active .dropdown-content {
    display: flex; /* Cambia a flex para mostrarlo */
}

/* Estilos para el input de búsqueda dentro del dropdown */
.dropdown-content .search-input-dropdown {
    width: calc(100% - 1.5rem); /* Ajusta el ancho para el padding */
    padding: 0.75rem;
    margin: 0.75rem;
    border: 1px solid var(--border-grey);
    border-radius: 6px;
    font-size: 0.95rem;
    box-sizing: border-box; /* Incluye padding en el ancho */
}

/* Contenedor para las opciones con scroll */
.dropdown-options-scroll {
    max-height: 200px; /* Altura máxima antes de que aparezca el scroll */
    overflow-y: auto; /* Habilita el scroll vertical */
    padding-bottom: 0.5rem; /* Espacio al final del scroll */
}

/* Estilos para cada opción del dropdown */
.dropdown-content a {
    color: var(--primary-text);
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s ease;
    font-size: 0.95rem;
    white-space: nowrap; /* Evita que el texto se rompa */
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-content a:hover {
    background-color: #f0f0f0;
    color: var(--primary); /* Color de hover para las opciones */
}

/* Estilos para el campo de búsqueda de tiendas por nombre */
.stores-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 250px; /* Ancho fijo más pequeño para el buscador */
  margin-left: 12px; /* Si quieres separación visual, ponla aquí */
}

.input-search {
  padding: 0.65rem 2.5rem 0.65rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 1rem;
  width: 100%;
  background-color: #f8fafc;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-search:focus {
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-color: var(--accent-color);
}

.search-icon {
  position: absolute;
  right: 1rem;
  color: var(--secondary-text);
  font-size: 1.1rem;
}

/* Grid responsive de tarjetas de tienda */
.grid-tiendas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 2.5rem; /* Espacio entre las tarjetas */
  padding: 0; /* El padding lateral ahora viene de .stores-section */
  justify-items: stretch; /* Estira los ítems para que llenen el ancho de su celda */
  justify-content: center; /* Centra la cuadrícula completa dentro del contenedor */
}

/* Tarjetas de tienda */
.card-tienda {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem; /* Aumentado el padding interno de la tarjeta */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
  text-decoration: none;
  color: inherit;
  width: 100%; /* Asegura que la tarjeta ocupe el ancho de su celda de grid (1fr) */
  position: relative;
}

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

/* Logo */
.card-logo-wrapper {
  width: 150px; /* Aumentado el tamaño del logo */
  height: 150px; /* Aumentado el tamaño del logo */
  border-radius: 50% !important;
  overflow: hidden !important;
  margin-bottom: 1.5rem; /* Aumentado el margen */
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texto dentro de la tarjeta */
.card-info-text {
  flex-grow: 1; /* Permite que el texto ocupe el espacio disponible */
  width: 100%;
  min-width: 0; /* Necesario para que text-overflow funcione en flexbox */
}

.card-title {
  font-size: 1.6rem; /* Aumentado el tamaño del título */
  font-weight: 700;
  color: var(--primary-text);
  margin-bottom: 0.5rem; /* Aumentado el margen */
  white-space: normal; /* Permite saltos de línea */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* Asegura que no exceda el ancho de la tarjeta */
  width: 100%; /* Ocupa todo el ancho disponible */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Máximo 2 líneas */
  -webkit-box-orient: vertical;
  line-height: 1.2; /* Espaciado entre líneas */
  max-height: 3.84rem; /* 2 líneas * 1.6rem * 1.2 line-height */
}

.card-location {
  font-size: 1.1rem; /* Aumentado el tamaño de la fuente */
  color: var(--secondary-text);
  margin-bottom: 0.75rem; /* Aumentado el margen */
  line-height: 1.3;
}

.card-publications {
  font-size: 1.1rem; /* Aumentado el tamaño de la fuente */
  color: var(--secondary-text);
  font-weight: 500;
  margin-top: 0.5rem;
}

/* Mensaje de estado de la ubicación */
.location-status-message {
    text-align: center;
    margin: 1rem 0 2rem;
    font-size: 1rem;
    color: var(--secondary-text); /* Cambiado a secondary-text para consistencia */
    padding: 0 2rem; /* Padding lateral para que no se pegue a los bordes */
}

/* Feedback: No hay tiendas, errores, carga */
.no-stores-message,
.loading-message {
  text-align: center;
  margin-top: 3rem;
  font-size: 1.2rem;
  color: var(--secondary-text);
  width: 100%;
}

.error-loading-stores {
  color: #dc2626;
}

/* Responsividad - AJUSTES FINOS PARA DIFERENTES TAMAÑOS DE PANTALLA */

/* Para pantallas grandes (desktop) */
@media (min-width: 1200px) { /* A partir de este ancho, se aplican 4 columnas grandes */
  .grid-tiendas {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem; /* Incluso más espacio para pantallas muy grandes */
  }
}

/* Para pantallas medianas (tablets y algunos laptops) */
@media (max-width: 1199px) { /* Hasta 1199px, cambia a 3 columnas */
  .stores-section {
    padding: 2rem 1.5rem; /* Ajuste de padding para pantallas medianas */
  }
  .stores-header {
    padding: 0 0 1.5rem; /* Ajuste de padding para el header */
  }
  .grid-tiendas {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas medianas */
    gap: 1.5rem;
    padding: 0; /* El padding lateral viene de .stores-section */
  }
  .card-tienda {
    padding: 1.5rem;
  }
  .card-logo-wrapper {
    width: 110px;
    height: 110px;
    margin-bottom: 1rem;
  }
  .card-title {
    font-size: 1.3rem;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    max-height: 3.12rem; /* 2 líneas * 1.3rem * 1.2 line-height */
  }
  .card-location,
  .card-publications {
    font-size: 1rem;
  }
}

/* Para pantallas pequeñas (móviles grandes y tablets pequeñas) */
@media (max-width: 767px) { /* Hasta 767px, cambia a 2 columnas */
  .stores-section {
    padding: 1.5rem 1rem;
  }
  .stores-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 1rem;
    gap: 1rem; /* Espacio entre el título y el contenedor de búsqueda */
  }
  .stores-header h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  .stores-search {
    flex: 1; /* Permite que el buscador use el espacio restante disponible */
    max-width: 300px; /* Ancho máximo aumentado para más espacio */
    min-width: 180px; /* Ancho mínimo aumentado para mejor usabilidad */
  }
  .search-and-filter-container {
      flex-direction: row; /* Mantiene el botón y el buscador lado a lado en móvil */
      align-items: center;
      justify-content: flex-start; /* Cambiado para alinear hacia la izquierda */
      gap: 8px; /* Espacio optimizado entre elementos en móvil */
      width: 100%;
  }
  /* Ajustes para el botón de filtro en móvil */
  .search-filter-group .filter-button {
      width: 120px; /* Ancho aumentado para más espacio */
      flex-shrink: 0; /* No permite que se encoja */
  }
  /* Ajustes para el dropdown en móvil */
  .dropdown-content {
      width: 120px; /* Mismo ancho que el botón en móvil */
  }
  .grid-tiendas {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles más grandes */
    gap: 1rem;
    padding: 0; /* El padding lateral viene de .stores-section */
  }
  .card-tienda {
    padding: 1.2rem;
  }
  .card-logo-wrapper {
    width: 90px;
    height: 90px;
    margin-bottom: 0.75rem;
  }
  .card-title {
    font-size: 1.15rem;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    max-height: 2.76rem; /* 2 líneas * 1.15rem * 1.2 line-height */
  }
  .card-location,
  .card-publications {
    font-size: 0.9rem;
  }
}

/* Para móviles muy pequeños */
@media (max-width: 479px) { /* Hasta 479px, una sola columna */
  .stores-section {
    padding: 1rem 0.5rem;
  }
  .stores-header {
    padding: 0 0 1rem;
  }
  .stores-header h2 {
    font-size: 1.8rem;
  }
  /* Asegurar que el contenedor de búsqueda y filtro use todo el ancho disponible */
  .search-and-filter-container {
    width: 100%;
    justify-content: flex-start;
    gap: 8px; /* Gap reducido para móviles muy pequeños */
  }
  .stores-search {
    flex: 1; /* Permite que el buscador use el espacio restante disponible */
    max-width: 250px; /* Ancho máximo aumentado para móviles muy pequeños */
    min-width: 160px; /* Ancho mínimo aumentado para mantener usabilidad */
  }
  .search-filter-group .filter-button {
    width: 110px; /* Ancho aumentado para dar más espacio en móviles muy pequeños */
    flex-shrink: 0; /* No permite que se encoja */
  }
  /* Ajustes para el dropdown en móviles muy pequeños */
  .dropdown-content {
    width: 110px; /* Mismo ancho que el botón en móviles muy pequeños */
  }
  .input-search {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
  }
  .search-icon {
    right: 0.75rem;
  }
  .grid-tiendas {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles muy pequeños */
    gap: 0.75rem; /* Gap reducido para aprovechar mejor el espacio */
    padding: 0; /* El padding lateral viene de .stores-section */
  }
  .card-tienda {
    padding: 0.75rem; /* Padding reducido para aprovechar mejor el espacio */
    max-width: none; /* Removido el ancho máximo para permitir que las tarjetas se ajusten */
    margin-left: 0;
    margin-right: 0; /* Removido el centrado automático */
  }
  .card-logo-wrapper {
    width: 60px; /* Logo más pequeño para aprovechar mejor el espacio */
    height: 60px;
    margin-bottom: 0.5rem; /* Margen reducido */
  }
  .card-title {
    font-size: 1rem; /* Título más pequeño */
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    max-height: 2.4rem; /* 2 líneas * 1rem * 1.2 line-height */
  }
  .card-location,
  .card-publications {
    font-size: 0.8rem; /* Texto más pequeño */
  }
  .no-stores-message,
  .loading-message {
    font-size: 1rem;
    margin-top: 2rem;
  }
}