/* ===========================================================================
   El localizador de puntos de venta (templates/encuentranos.php).

   Sin mapa, una columna: buscador, aviso y lista. Con mapa
   (.paracas-localizador--con-mapa), la lista a la izquierda y el mapa a la
   derecha, pegado mientras la lista se recorre; por debajo de 1024 px el mapa
   sube encima de la lista.

   La lista la arma assets/js/localizador.js. Sin búsqueda son los
   departamentos con su conteo; con búsqueda, tarjetas de 20 en 20.
   ======================================================================== */

.paracas-localizador {
  padding-block-end: var(--seccion-y);
}

/* ---------------------------------------------------------------------------
   El buscador
--------------------------------------------------------------------------- */

.paracas-localizador__buscar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}

.paracas-localizador__texto { min-inline-size: 0; }

.paracas-localizador__select select {
  inline-size: 100%;
  /* El alto del buscador de texto: 44 px de campo más su borde. */
  min-block-size: calc(var(--tactil) + 2px);
  padding-inline: var(--space-4) var(--space-8);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-pill);
  background:
    var(--color-fondo)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300669e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right var(--space-4) center / 18px;
  color: var(--color-texto);
  font: inherit;
  font-size: var(--t-body);
  appearance: none;
  cursor: pointer;
}

.paracas-localizador__select select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-fondo), 0 0 0 5px var(--color-foco);
}

.paracas-localizador__select select:disabled {
  color: var(--paracas-disabled);
  cursor: not-allowed;
}

.paracas-localizador__cerca {
  min-block-size: calc(var(--tactil) + 2px);
  font-size: var(--t-body);
  white-space: nowrap;
}

.paracas-localizador__cerca:disabled { opacity: 0.6; cursor: progress; }

.paracas-localizador__estado {
  min-block-size: 1.5em;
  margin-block: var(--space-5) var(--space-4);
  color: var(--color-enlace);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Lista y mapa
--------------------------------------------------------------------------- */

.paracas-localizador__cuerpo {
  display: grid;
  gap: var(--space-6);
}

.paracas-localizador__lista { min-inline-size: 0; }

.paracas-localizador.cargando .paracas-localizador__lista { min-block-size: 240px; }

.paracas-localizador__mapa {
  position: relative;
  overflow: clip;
  border-radius: var(--radio-l);
  background: var(--color-fondo-suave);
}

.paracas-localizador__sin-mapa {
  padding: var(--space-6);
  color: var(--color-enlace);
}

@media (min-width: 1025px) {
  .paracas-localizador--con-mapa .paracas-localizador__cuerpo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  /* La cabecera del tema no es pegajosa: el mapa se para contra el borde. Su
     alto depende de la ventana, así que se mide también a 640 y 560 px. */
  .paracas-localizador--con-mapa .paracas-localizador__mapa {
    position: sticky;
    inset-block-start: var(--space-5);
    block-size: calc(100vh - var(--space-8));
    min-block-size: 420px;
    max-block-size: 820px;
  }
}

@media (max-width: 1024px) {
  .paracas-localizador--con-mapa .paracas-localizador__mapa {
    order: -1;
    aspect-ratio: 4 / 3;
    max-block-size: 60vh;
    inline-size: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Sin búsqueda: los departamentos
--------------------------------------------------------------------------- */

.paracas-localizador__deps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.paracas-localizador--con-mapa .paracas-localizador__deps {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.paracas-localizador__dep {
  display: grid;
  gap: var(--space-1);
  inline-size: 100%;
  min-block-size: var(--tactil);
  padding: var(--space-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-m);
  background: var(--color-fondo-card);
  color: var(--color-texto);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--duracion) var(--curva), background-color var(--duracion) var(--curva);
}

.paracas-localizador__dep:hover {
  border-color: var(--paracas-azul);
  background: var(--color-fondo);
}

.paracas-localizador__dep:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 2px;
}

.paracas-localizador__dep-nombre { font-weight: 700; }

.paracas-localizador__dep-n {
  color: var(--color-enlace);
  font-size: var(--t-small);
}

/* ---------------------------------------------------------------------------
   Con búsqueda: las tiendas
--------------------------------------------------------------------------- */

.paracas-tiendas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.paracas-localizador--con-mapa .paracas-tiendas { grid-template-columns: minmax(0, 1fr); }

.paracas-tiendas__grupo {
  grid-column: 1 / -1;
  margin-block-start: var(--space-4);
  color: var(--color-enlace);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.paracas-tiendas__grupo:first-child { margin-block-start: 0; }

.paracas-tienda {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--color-fondo);
  transition: border-color var(--duracion) var(--curva), box-shadow var(--duracion) var(--curva);
}

.paracas-localizador.tiene-mapa .paracas-tienda { cursor: pointer; }

.paracas-tienda:focus { outline: none; }
.paracas-tienda:focus-visible { box-shadow: 0 0 0 2px var(--color-foco); }

.paracas-tienda.es-activa {
  border-color: var(--paracas-azul);
  box-shadow: 0 0 0 1px var(--paracas-azul);
}

.paracas-tienda__nombre {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.3;
}

.paracas-tienda p { margin: 0; }

.paracas-tienda__dir {
  font-size: var(--t-small);
  overflow-wrap: anywhere;
}

.paracas-tienda__lugar,
.paracas-tienda__horario {
  color: var(--color-enlace);
  font-size: var(--t-small);
}

.paracas-tienda__km {
  justify-self: start;
  margin-block-start: var(--space-1) !important;
  padding: 2px var(--space-3);
  border-radius: var(--radio-pill);
  background: var(--color-fondo-card);
  color: var(--paracas-azul-hondo);
  font-size: var(--t-mini);
  font-weight: 700;
}

.paracas-tienda__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin-block-start: var(--space-1) !important;
}

/* 44 px de alto aunque se vea un enlace pequeño: el área táctil del proyecto. */
.paracas-tienda__accion {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-block-size: var(--tactil);
  color: var(--color-enlace);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
}

.paracas-tienda__accion:hover { text-decoration: underline; }
.paracas-tienda__accion .paracas-icono { inline-size: 1.2em; block-size: 1.2em; }

.paracas-localizador__mas {
  display: flex;
  margin: var(--space-6) auto 0;
  font-size: var(--t-body);
}

/* ---------------------------------------------------------------------------
   Reflujo
--------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .paracas-localizador__buscar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .paracas-localizador__texto,
  .paracas-localizador__cerca { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .paracas-localizador__buscar { grid-template-columns: minmax(0, 1fr); }

  /* El buscador global pide 320 px de ancho mínimo; aquí manda la columna. */
  .paracas-localizador__texto { min-inline-size: 0; }

  .paracas-localizador__deps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .paracas-localizador__dep { padding: var(--space-3); }
}

/* ---------------------------------------------------------------------------
   El mapa: la ficha de una tienda y la zona
--------------------------------------------------------------------------- */

/* La ficha que abre EPMapa sobre una tienda: el mismo contenido que la
   tarjeta de la lista. El popup de Azure pone el fondo y la flecha. */
.paracas-ficha {
  display: grid;
  gap: var(--space-1);
  inline-size: min(280px, 70vw);
  padding: var(--space-4) var(--space-8) var(--space-3) var(--space-4);
  color: var(--color-texto);
  font-family: var(--paracas-body);
}

.paracas-ficha p { margin: 0; }

.paracas-ficha > * { min-inline-size: 0; overflow-wrap: anywhere; }

.paracas-ficha--varias { padding-inline-end: var(--space-6); }

.paracas-ficha__titulo {
  color: var(--color-enlace);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.paracas-ficha__lista {
  display: grid;
  max-block-size: 220px;
  margin: var(--space-2) 0 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
}

.paracas-ficha__opcion {
  display: grid;
  inline-size: 100%;
  min-inline-size: 0;
  /* Los nombres y direcciones de Power BI son largos y sin espacios a veces:
     se parten dentro de la ficha en vez de salirse por la derecha. */
  white-space: normal;
  overflow-wrap: anywhere;
  min-block-size: var(--tactil);
  padding: var(--space-2) 0;
  border: 0;
  border-block-start: 1px solid var(--color-borde);
  background: none;
  color: var(--color-texto);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.paracas-ficha__opcion:hover .paracas-ficha__opcion-nombre { text-decoration: underline; }

.paracas-ficha__opcion-nombre {
  font-size: var(--t-small);
  font-weight: 700;
}

.paracas-ficha__opcion-dir {
  color: var(--color-enlace);
  font-size: var(--t-mini);
}

/* «Buscar en esta zona»: arriba y centrado sobre el mapa, cuando quien mira
   lo movió a mano. */
.paracas-localizador__zona {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: 50%;
  z-index: 2;
  translate: -50% 0;
  font-size: var(--t-small);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgb(10 46 69 / 0.25);
}

/* «Ver todo el Perú», encima de la lista de una zona. */
.paracas-localizador__volver {
  margin-block-end: var(--space-4);
  font-size: var(--t-small);
}