/* Revor — Dónde comprar */

/* Buscador y filtros */
.locator__search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

.locator__search-field {
  flex: 1;
  min-inline-size: 15rem;
  background-color: var(--color-bg);
  border-color: var(--color-border);
}

.locator__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}

.locator__filters-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.locator__count {
  margin-block-end: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Lista + mapa */
.locator__layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 62rem) {
  .locator__layout {
    grid-template-columns: 24rem 1fr;
  }
}

.locator__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-block-size: 34rem;
  overflow-y: auto;
  padding-inline-end: var(--space-2);
  scrollbar-width: thin;
}

@media (max-width: 61.99rem) {
  .locator__list {
    max-block-size: none;
    overflow: visible;
  }
}

.locator__empty {
  padding: var(--space-6) 0;
  color: var(--color-text-muted);
}

/* --- Tarjeta de tienda -------------------------------------------------- */
.locator__list [hidden] {
  display: none;
}

.store-card {
  display: flex;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease);
}

.store-card:hover {
  border-color: var(--primary-300);
}

.store-card.is-active {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 1px var(--primary-500);
}

.store-card__pin {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--primary-500);
}

.store-card__body {
  flex: 1;
  min-inline-size: 0;
}

.store-card__name {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}

.store-card__address {
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.store-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.store-card__hours.is-open {
  color: var(--state-success);
}

.store-card__distance {
  flex: none;
  padding: var(--space-1) var(--space-3);
  background-color: var(--primary-50);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--primary-600);
  font-variant-numeric: tabular-nums;
}

/* Mapa */
.locator__map {
  position: relative;
}

.locator__map-canvas {
  block-size: 34rem;
  background-color: var(--neutral-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (max-width: 61.99rem) {
  .locator__map-canvas {
    block-size: 22rem;
  }
}

.locator__map-note {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 500; /* Por encima de los paneles de Leaflet. */
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.locator__notice {
  margin-block-start: var(--space-6);
}

/* Marcador a medida */
.revor-pin {
  display: grid;
  place-items: center;
}

.revor-pin__dot {
  display: block;
  inline-size: 20px;
  block-size: 20px;
  background-color: var(--primary-500);
  border: 3px solid var(--revor-blanco);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgb(0 41 74 / 0.35);
  transition: background-color var(--duration-fast) var(--ease);
}

.revor-pin.is-active .revor-pin__dot {
  inline-size: 26px;
  block-size: 26px;
  background-color: var(--state-error);
}

/* Leaflet dibuja su atribución con su propia tipografía. */
.leaflet-container {
  font-family: var(--font-sans);
}