/* ============================================================================
 *  andes — mapa del directorio (version 2) y listado
 *  ---------------------------------------------------------------------------
 *  Estilos del mapa Leaflet a ancho completo, el panel de filtros colapsable,
 *  los marcadores y el listado del directorio.
 *
 *  Todo va prefijado con `.andes-` y no depende del tema: los tokens del KV 04
 *  entran por variables CSS con respaldo (--D y --M son los nombres que usa el
 *  tema). Si el tema no esta (una pagina suelta, el editor), el mapa mantiene
 *  igual el aspecto oscuro del KV.
 *
 *  OJO: el "ancho completo" de verdad lo calcula assets/mapa.js midiendo el
 *  contenedor. Aqui solo se deja preparado el envoltorio para que el alto y el
 *  overflow no estorben.
 * ========================================================================== */

.andes-mapa,
.andes-directorio {
  --am-naranja: var(--naranja, #FF3700);
  --am-fondo: var(--fondo, #0F1013);
  --am-panel: var(--panel, #17191E);
  --am-panel-2: var(--panel-2, #1E2128);
  --am-tinta: var(--tinta, #F2F3F5);
  --am-apagado: var(--apagado, #8C9099);
  --am-apagado-2: var(--apagado-2, #5E626B);
  --am-linea: var(--linea, rgba(242, 243, 245, 0.12));
  --am-linea-2: var(--linea-2, rgba(242, 243, 245, 0.07));
  --am-radio: 2px;
  --am-sans: var(--D, "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif);
  --am-mono: var(--M, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace);

  font-family: var(--am-sans);
  color: var(--am-tinta);
}

/* El atributo hidden manda: sin esto, un `display:flex` del tema lo anularia y
   los filtros no ocultarian nada (le paso a mas de un plugin). */
.andes-mapa [hidden],
.andes-directorio [hidden] {
  display: none !important;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------- ancho completo --- */

/* Ancho del mapa (v3, task-15).
   Ya NO va de borde a borde: el cliente pidio un margen lateral pequeno y
   COHERENTE con el resto del sitio, asi que el mapa usa EL MISMO contenedor que
   las demas secciones (`--ancho` lo define el tema: min(1240px, 90vw)). En
   movil eso son ~5vw por lado: respira sin comerse el mapa.
   `contenido` es para cuando el mapa ya va dentro de una columna medida: llena
   a su padre y no impone contenedor propio. */
.andes-mapa--ancho,
.andes-mapa.andes-mapa--ancho {
  position: relative;
  width: var(--ancho, min(1240px, 90vw));
  max-width: 100%;
  /* Dos clases a proposito: el reset de `.andes-mapa` (mas abajo en este mismo
     archivo) trae `margin:0` y, a igual especificidad, ganaba por orden y
     dejaba el mapa pegado a la izquierda. Medido: left 0 / right 182. */
  margin-left: auto;
  margin-right: auto;
}

.andes-mapa--contenido,
.andes-mapa.andes-mapa--contenido {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* El tema aplica `section{padding:104px 0}`: sin este reset, la barra de
   filtros flotaria 104px por debajo del borde del mapa. */
.andes-mapa {
  position: relative;
  padding: 0;
  margin: 0;
  background: var(--am-fondo);
  border-top: 1px solid var(--am-linea);
  border-bottom: 1px solid var(--am-linea);
}

/* ------------------------------------------- controles DENTRO del lienzo --- */

/* Capa que cubre el mapa y aloja los controles flotantes. No captura clics:
   solo los controles concretos los recuperan, asi se puede arrastrar el mapa
   por cualquier hueco (Mateo: "que no este afuera, que este dentro"). */
.andes-mapa__flotantes {
  position: absolute;
  inset: 0;
  z-index: 800;
  pointer-events: none;
}

.andes-mapa__zona {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: calc(100% - 28px);
}

.andes-mapa__zona--filtros {
  top: 14px;
  left: 14px;
  align-items: flex-start;
}

.andes-mapa__zona--vistas {
  top: 14px;
  right: 14px;
  align-items: flex-end;
  gap: 8px;
}

.andes-mapa__zona--filtros > *,
.andes-mapa__zona--vistas > * {
  pointer-events: auto;
}

/* El disparador del panel: mismo sitio siempre, tambien en movil. */
.andes-disparador {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(15, 16, 19, 0.86);
  border: 1px solid var(--am-linea);
  border-radius: var(--am-radio);
  color: var(--am-tinta);
  font-family: var(--am-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.25s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.25s;
}

.andes-disparador:hover {
  border-color: var(--am-tinta);
  background: rgba(30, 33, 40, 0.94);
}

.andes-disparador[aria-expanded="true"] {
  border-color: var(--am-naranja);
}

.andes-disparador__lineas {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 14px;
}

.andes-disparador__lineas i {
  display: block;
  height: 2px;
  background: var(--am-naranja);
}

.andes-disparador__cuenta {
  color: var(--am-apagado);
}

/* --------------------------------------------------- vistas de mapa base --- */

.andes-vistas {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: rgba(15, 16, 19, 0.86);
  border: 1px solid var(--am-linea);
  border-radius: var(--am-radio);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.andes-base {
  font-family: var(--am-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--am-apagado);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--am-radio);
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.32, 0.72, 0, 1), color 0.25s;
}

.andes-base:hover {
  color: var(--am-tinta);
}

.andes-base.is-on {
  background: var(--am-tinta);
  border-color: var(--am-tinta);
  color: var(--am-fondo);
}

/* Boton de pantalla completa. Nace con `hidden` en el HTML y el JS lo enseña
   solo si el navegador soporta la Fullscreen API. */
.andes-pantalla {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  background: rgba(15, 16, 19, 0.86);
  border: 1px solid var(--am-linea);
  border-radius: var(--am-radio);
  color: var(--am-tinta);
  font-family: var(--am-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 0.25s cubic-bezier(0.32, 0.72, 0, 1), color 0.25s, border-color 0.25s;
}

.andes-pantalla:hover {
  border-color: var(--am-tinta);
  background: rgba(30, 33, 40, 0.94);
}

.andes-pantalla[aria-pressed="true"] {
  background: var(--am-tinta);
  border-color: var(--am-tinta);
  color: var(--am-fondo);
}

/* El contador vive dentro del panel: pie discreto, no una franja aparte. */
.andes-mapa__conteo {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--am-linea-2);
  font-family: var(--am-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--am-apagado);
}

.andes-mapa__conteo b {
  color: var(--am-tinta);
}

/* ----------------------------------------------------------- panel ------- */

/* El panel flota DENTRO del lienzo, colgando del disparador. No ocupa toda la
   altura: es una tarjeta con scroll propio como maximo hasta el 70% del mapa. */
.andes-mapa__panel {
  position: relative;
  width: min(300px, calc(100vw - 44px));
  max-width: 100%;
  max-height: min(70vh, calc(var(--andes-mapa-alto, 78vh) - 110px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
  background: rgba(23, 25, 30, 0.94);
  border: 1px solid var(--am-linea);
  border-radius: var(--am-radio);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Cerrado: invisible y sin ocupar sitio, SIN sacarlo de la pantalla con un
     transform grande (eso contaba como "elemento que desborda" en ?medir=1). */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  animation: none;
}

.andes-mapa__panel.is-abierto {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: andes-panel-entra 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* Entra deslizandose un pelo desde arriba: es una tarjeta que cuelga del boton,
   no una bandeja lateral. Solo al abrir. */
@keyframes andes-panel-entra {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.andes-mapa__panel-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--am-linea);
}

.andes-mapa__panel-titulo {
  font-family: var(--am-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--am-tinta);
}

.andes-mapa__panel-cerrar {
  background: transparent;
  border: 1px solid var(--am-linea);
  border-radius: var(--am-radio);
  color: var(--am-apagado);
  width: 32px;
  height: 32px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.andes-mapa__panel-cerrar:hover {
  color: var(--am-tinta);
  border-color: var(--am-tinta);
}

.andes-buscador {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--am-fondo);
  border: 1px solid var(--am-linea);
  border-radius: var(--am-radio);
  padding: 8px 10px;
  color: var(--am-apagado);
}

.andes-buscador input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--am-tinta);
  font-family: var(--am-sans);
  font-size: 14.5px;
}

.andes-buscador input::placeholder {
  color: var(--am-apagado-2);
}

.andes-buscador__icono {
  flex: none;
}

/* Menu vertical de categorias: cada fila lleva el punto de color que comparte
   con el marcador del mapa. */
.andes-menu {
  display: flex;
  flex-direction: column;
}

/* Cabecera de grupo funcional (comer, turismo, dormir, servicios). Es la otra
   mitad del criterio de color: cuando dos tonos de la gama calida se parecen, el
   grupo al que pertenecen dice a que mundo mira cada uno. */
.andes-menu__grupo {
  margin: 8px 0 1px;
  padding-top: 8px;
  border-top: 1px solid var(--am-linea-2);
  font-family: var(--am-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--am-apagado-2);
}

.andes-menu__grupo:first-of-type {
  margin-top: 2px;
}

.andes-menu__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 7px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--am-linea-2);
  /* Texto en tinta (no en el color de la categoria). */
  color: var(--am-tinta);
  font-family: var(--am-sans);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s linear, padding-left 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.andes-menu__item--todos {
  margin-bottom: 4px;
  font-family: var(--am-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.andes-menu__item:hover {
  color: var(--am-naranja);
}

.andes-menu__item.is-on {
  color: var(--am-tinta);
  padding-left: 8px;
}

.andes-menu__punto {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--am-apagado-2);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

/* "Todos" no tiene categoria: se marca con el naranja de la marca. */
.andes-menu__punto--todas {
  background: var(--am-naranja);
}

.andes-menu__item.is-on .andes-menu__punto {
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

.andes-menu__texto {
  flex: 1 1 auto;
}

.andes-menu__cuenta {
  font-family: var(--am-mono);
  font-size: 11px;
  color: var(--am-apagado-2);
}

.andes-select {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--am-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--am-apagado);
}

.andes-select select {
  font-family: var(--am-sans);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--am-tinta);
  background: var(--am-fondo);
  border: 1px solid var(--am-linea);
  border-radius: var(--am-radio);
  padding: 10px;
}

/* ---------------------------------------------------------------- mapa ---- */

.andes-mapa__caja {
  position: relative;
  /* Sin overflow:hidden a proposito: recortaria los popups que se abren cerca
     del borde y el panel corredizo. */
}

/* El tema tiene `.mapa-caja .leaflet-container{height:100%}`; se gana por
   especificidad para que el alto lo mande el shortcode y no el contenedor. */
.andes-mapa .andes-mapa__lienzo,
.andes-mapa .andes-mapa__lienzo.leaflet-container {
  height: var(--andes-mapa-alto, 78vh);
  min-height: 260px;
  background: var(--am-fondo);
  z-index: 0;
}

/* ---- pantalla completa de verdad (Fullscreen API) ----
   En pantalla completa la seccion es el elemento de la capa superior: ocupa
   todo y el lienzo se reparte el alto que sobra despues de la barra. Los
   flotantes de la pagina (WhatsApp) quedan por debajo y no estorban. */
.andes-mapa:fullscreen,
.andes-mapa:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  background: var(--am-fondo);
}

.andes-mapa:fullscreen .andes-mapa__caja,
.andes-mapa:-webkit-full-screen .andes-mapa__caja {
  flex: 1 1 auto;
  min-height: 0;
}

.andes-mapa:fullscreen .andes-mapa__lienzo.leaflet-container,
.andes-mapa:-webkit-full-screen .andes-mapa__lienzo.leaflet-container {
  height: 100%;
  min-height: 0;
}

.andes-mapa__aviso {
  position: absolute;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: rgba(15, 16, 19, 0.88);
  color: var(--am-apagado);
  font-size: 14px;
  line-height: 1.5;
}

.andes-mapa__aviso b {
  display: block;
  margin-bottom: 6px;
  color: var(--am-tinta);
  font-family: var(--am-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.andes-mapa__sinjs {
  margin: 0;
  padding: 14px 24px 14px 44px;
  background: var(--am-panel);
  border-top: 1px solid var(--am-linea);
  font-size: 14px;
}

.andes-mapa__sinjs a {
  color: var(--am-tinta);
}

/* ----------------------------------------------------------- marcadores --- */

/* Circulo de color, sin icono y de tamano FIJO: no cambia con el zoom. */
.andes-pin-caja {
  background: none;
  border: 0;
}

.andes-pin {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /*
   * Aro CLARO, no oscuro (task-20). El basemap oscuro de Esri no es negro: su
   * color dominante medido es #474749 (gris medio). Sobre ese fondo, un aro
   * oscuro se confunde; uno claro (contraste ~8:1 contra #474749) le da a TODOS
   * los pines un borde legible, incluso a los tonos mas apagados de la paleta.
   * El relleno sigue siendo el color de la categoria.
   */
  border: 1.5px solid rgba(250, 248, 243, 0.92);
  background: var(--am-naranja);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.25s;
}

.andes-pin.is-on {
  transform: scale(1.45);
  border-color: var(--am-tinta);
  box-shadow: 0 0 0 3px rgba(255, 55, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.55);
}

/* ----------------------------------------------------- etiquetas de zona --- */

/* Las dibuja el plugin: tipografia de la marca, SIN halo ni contorno (eso era
   justo lo que el usuario rechazo de la capa de Esri). El color se ajusta a la
   vista de mapa base para que se lea sin recurrir a un delineado. */
.andes-etiqueta-caja {
  width: 0 !important;
  height: 0 !important;
  background: none;
  border: 0;
}

.andes-etiqueta {
  display: block;
  transform: translate(-50%, -50%);
  font-family: var(--am-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(242, 243, 245, 0.72);
  text-shadow: none;
  pointer-events: none;
}

.andes-mapa__lienzo[data-andes-vista="claro"] .andes-etiqueta {
  color: rgba(15, 16, 19, 0.62);
}

.andes-mapa__lienzo[data-andes-vista="satelite"] .andes-etiqueta {
  color: rgba(255, 255, 255, 0.88);
}

/* El tema estiliza los enlaces del contenido (`.entrada a{border-bottom}`).
   Dentro del mapa y el popup manda este componente: si no, salen subrayados
   naranjas donde no toca. */
.andes-mapa a,
.andes-directorio a {
  text-decoration: none;
  border-bottom: 0;
}

/* ── Y el COLOR, que es lo que faltaba ───────────────────────────────────
 *
 * Leaflet trae en su propia hoja `.leaflet-container a { color: #0078A8 }`.
 * Esa regla es (0,1,1) y `.andes-accion` es (0,1,0), así que GANABA Leaflet:
 * los botones del popup salían con un azul de fábrica. Y «Cómo llegar», que
 * tiene fondo naranja, quedaba con el texto heredado del mismo naranja:
 * medido en pantalla, texto #FF3700 sobre fondo #FF3700, o sea invisible.
 *
 * `text-decoration` y `border-bottom` ya estaban cubiertos arriba; el color se
 * quedó fuera del arreglo anterior. Igualamos la especificidad de Leaflet con
 * `.andes-mapa a` (0,1,1, y encolado después, así que gana) y la superamos con
 * `.andes-mapa .andes-accion` (0,2,0) para los botones.
 */
.andes-mapa a {
  color: inherit;
}

.andes-mapa .andes-accion,
.andes-mapa .andes-accion:visited {
  color: var(--am-tinta);
}

.andes-mapa .andes-accion--primaria,
.andes-mapa .andes-accion--primaria:visited {
  color: #fff;
}

/* `:hover` va después y con la misma especificidad que las de arriba, para que
   un botón ya visitado siga respondiendo al pasar por encima. */
.andes-mapa .andes-accion:hover,
.andes-mapa .andes-accion--primaria:hover {
  color: #fff;
}

/* ---------------------------------------------------------------- popup --- */

.andes-mapa .leaflet-container {
  background: var(--am-fondo);
  font-family: var(--am-sans);
  color: var(--am-tinta);
}

.andes-mapa .leaflet-popup-content-wrapper {
  background: var(--am-panel);
  color: var(--am-tinta);
  border: 1px solid var(--am-linea);
  border-radius: var(--am-radio);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  padding: 0;
  overflow: hidden;
}

.andes-mapa .leaflet-popup-content {
  margin: 0;
  width: 288px !important;
  font-family: var(--am-sans);
}

.andes-mapa .leaflet-popup-tip {
  background: var(--am-panel);
  box-shadow: none;
}

.andes-mapa .leaflet-popup-close-button {
  color: var(--am-apagado) !important;
  padding: 8px 10px 0 0 !important;
}

.andes-mapa .leaflet-control-attribution {
  background: rgba(15, 16, 19, 0.78);
  color: var(--am-apagado);
  font-family: var(--am-mono);
  font-size: 10px;
}

.andes-mapa .leaflet-control-attribution a {
  color: var(--am-apagado);
}

.andes-mapa .leaflet-bar a {
  background: var(--am-panel);
  color: var(--am-tinta);
  border-bottom-color: var(--am-linea);
}

.andes-mapa .leaflet-bar a:hover {
  background: var(--am-panel-2);
}

.andes-pop__foto {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-bottom: 1px solid var(--am-linea);
}

.andes-pop__cab {
  padding: 15px 16px 13px;
}

.andes-pop__cat {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--am-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* El texto va SIEMPRE en tinta: el color de la categoria solo pinta el punto.
     (Antes se pintaba el texto con el color de categoria y el azul de
     alojamiento no se leia sobre el panel oscuro.) */
  color: var(--am-tinta);
}

.andes-pop__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.andes-pop__nombre {
  margin: 7px 0 0;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--am-tinta);
}

.andes-pop__nombre a {
  color: inherit;
  text-decoration: none;
}

.andes-pop__nombre a:hover {
  color: var(--am-naranja);
}

.andes-pop__zona,
.andes-pop__dato {
  margin-top: 4px;
  font-family: var(--am-mono);
  font-size: 11px;
  color: var(--am-apagado);
}

.andes-pop__desc {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--am-apagado);
}

.andes-pop__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 11px;
  font-family: var(--am-mono);
  font-size: 11px;
  color: var(--am-apagado);
}

.andes-pop__dest {
  color: var(--am-naranja);
}

/* Fila de acciones: solo se pintan los botones cuyo dato existe. */
.andes-pop__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--am-linea);
  border-top: 1px solid var(--am-linea);
}

.andes-accion {
  flex: 1 1 40%;
  padding: 12px 10px;
  background: var(--am-panel-2);
  color: var(--am-tinta);
  text-align: center;
  text-decoration: none;
  font-family: var(--am-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.25s cubic-bezier(0.32, 0.72, 0, 1), color 0.25s;
}

.andes-accion:hover {
  background: #262a33;
  color: #fff;
}

.andes-accion--primaria {
  background: var(--am-naranja);
  color: #fff;
}

.andes-accion--primaria:hover {
  background: #ff5122;
}

.andes-accion--wa {
  background: #16321f;
  color: #6ee7a0;
}

.andes-accion--wa:hover {
  background: #1d4429;
  color: #fff;
}

/* ----------------------------------------------------------- directorio --- */

.andes-directorio {
  border: 1px solid var(--am-linea);
  border-radius: var(--am-radio);
  overflow: hidden;
  background: var(--am-fondo);
}

.andes-directorio__filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  background: var(--am-panel);
  border-bottom: 1px solid var(--am-linea);
}

.andes-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.andes-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--am-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Texto en tinta; el color de la categoria solo en el punto. */
  color: var(--am-tinta);
  background: transparent;
  border: 1px solid var(--am-linea);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.32, 0.72, 0, 1), color 0.25s, border-color 0.25s;
}

.andes-chip:hover {
  color: var(--am-naranja);
  border-color: var(--am-apagado-2);
}

.andes-chip.is-on {
  background: var(--am-tinta);
  border-color: var(--am-tinta);
  color: var(--am-fondo);
}

.andes-chip__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.andes-chip__cuenta {
  opacity: 0.6;
  font-size: 10px;
}

.andes-directorio__filtros .andes-select {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.andes-directorio__conteo {
  margin: 0 0 0 auto;
  font-family: var(--am-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--am-apagado);
}

.andes-directorio__conteo b {
  color: var(--am-tinta);
}

.andes-directorio__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1px;
  background: var(--am-linea);
  /* La lista tiene su propio scroll: al pulsar un pin se desplaza SOLO este
     contenedor (a mano, con scrollTop) y la pagina no se mueve ni un pixel.
     Antes no habia contenedor propio y `scrollIntoView` arrastraba la ventana. */
  max-height: min(72vh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.andes-item {
  display: flex;
  gap: 13px;
  padding: 16px;
  background: var(--am-panel);
  transition: background 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.andes-item:hover {
  background: var(--am-panel-2);
}

.andes-item.is-sel {
  background: rgba(255, 55, 0, 0.1);
  box-shadow: inset 3px 0 0 var(--am-naranja);
}

.andes-item__em {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--am-radio);
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--am-panel-2);
}

.andes-item__cuerpo {
  min-width: 0;
}

.andes-item__nombre {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.andes-item__nombre a {
  color: var(--am-tinta);
  text-decoration: none;
}

.andes-item__nombre a:hover {
  color: var(--am-naranja);
}

.andes-item__estrella {
  color: var(--am-naranja);
}

.andes-item__zona {
  margin: 4px 0 0;
  font-family: var(--am-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--am-apagado-2);
}

.andes-item__desc {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--am-apagado);
}

.andes-item__pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--am-mono);
  font-size: 11px;
  color: var(--am-apagado);
}

.andes-item__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Texto en tinta; el color de la categoria solo en el punto. */
  color: var(--am-tinta);
}

.andes-item__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.andes-item__rating {
  color: var(--am-tinta);
}

.andes-item__ruta {
  margin-left: auto;
  color: var(--am-naranja);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.andes-item__ruta:hover {
  border-bottom-color: var(--am-naranja);
}

.andes-vacio {
  margin: 0;
  padding: 44px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--am-apagado);
}

/* --------------------------------------------------------- adaptaciones --- */

@media (max-width: 720px) {
  .andes-mapa__zona--filtros {
    top: 10px;
    left: 10px;
  }

  .andes-mapa__zona--vistas {
    top: 10px;
    right: 10px;
    /* En fila, no en columna: si el boton de pantalla completa cae debajo de las
       vistas, choca con la esquina del panel abierto (el panel es casi de ancho
       completo). En fila, la fila de arriba mide ~340 px y el panel empieza por
       debajo: medido en 390 px de ancho. */
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .andes-disparador {
    padding: 9px 11px;
    font-size: 10.5px;
  }

  /* En movil el boton de pantalla completa se queda solo con el icono: el
     texto se come media pantalla. El aria-label sigue explicando que hace. */
  .andes-pantalla {
    padding: 9px;
  }

  .andes-pantalla__texto {
    display: none;
  }

  .andes-base {
    padding: 7px 9px;
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }

  .andes-mapa__panel {
    /* Ancho relativo al MAPA, no a la ventana: el mapa va dentro del contenedor
       del sitio (90vw en movil), asi que `100vw - 20px` se salia 10 px por la
       derecha y el `overflow:clip` del tema cortaba el borde del panel. */
    width: calc(var(--ancho, 90vw) - 20px);
    max-width: calc(var(--ancho, 90vw) - 20px);
    /* Plegado por defecto en movil (lo hace el JS). Abierto no tapa mas de la
       mitad del mapa: el panel tiene scroll propio y se corta al 52% del alto
       del lienzo, que es lo que pidio el Lead ("que no tape medio mapa"). */
    max-height: min(46vh, calc(var(--andes-mapa-alto, 78vh) * 0.52));
  }

  .andes-directorio__rejilla {
    grid-template-columns: 1fr;
  }
}

/* Pantallas muy estrechas: que la fila de arriba (disparador + vistas + pantalla
   completa) siga cabiendo sin solaparse. */
@media (max-width: 400px) {
  .andes-base {
    padding: 6px 7px;
    font-size: 9px;
  }

  .andes-disparador {
    padding: 8px 9px;
    gap: 7px;
  }

  .andes-disparador__cuenta {
    display: none;
  }
}

/* Menos movimiento es una preferencia de accesibilidad: se apaga todo. */
@media (prefers-reduced-motion: reduce) {
  .andes-mapa__panel.is-abierto {
    animation: none;
  }

  .andes-disparador,
  .andes-base,
  .andes-pantalla,
  .andes-pin,
  .andes-menu__item,
  .andes-chip,
  .andes-item,
  .andes-accion {
    transition: none;
  }
}

/* ==========================================================================
 *  LISTA DE RESULTADOS DEL BUSCADOR  y  BOTÓN «BORRAR FILTROS»
 *
 *  Mateo: al escribir, en el hueco de las categorías tienen que salir los
 *  puntos que coinciden, en lista, y al tocarlos abrirse su punto en el mapa.
 *  Y un botón de borrar filtros abajo, visible solo cuando hay algo puesto.
 *
 *  Los colores salen de los mismos tokens que el resto del panel, para que no
 *  haya dos lenguajes visuales dentro del mismo control.
 * ========================================================================== */

.andes-resultados {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Mismo alto máximo que el menú de categorías, para que el panel no pegue un
     salto al pasar de uno a otro. */
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 4px 0 0;
}

.andes-resultados[hidden] {
  display: none;
}

.andes-resultado {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--am-tinta);
  font-family: var(--am-sans);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease;
}

.andes-resultado:hover,
.andes-resultado:focus-visible {
  background: var(--am-fondo);
}

.andes-resultado__punto {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.andes-resultado__nombre {
  flex: 1 1 auto;
  min-width: 0;
  /* Los nombres largos del directorio se cortan con puntos suspensivos en vez
     de empujar la fila y romper el panel. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.andes-resultado__tipo {
  flex: 0 0 auto;
  color: var(--am-apagado);
  font-size: 11.5px;
  white-space: nowrap;
}

/* Mensaje de "no hay coincidencias": mismo hueco, sin botón. */
.andes-resultado--vacio {
  margin: 0;
  padding: 12px 10px;
  color: var(--am-apagado);
  font-family: var(--am-sans);
  font-size: 13.5px;
  line-height: 1.45;
}

.andes-limpiar {
  margin-top: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--am-linea);
  border-radius: var(--am-radio);
  background: transparent;
  color: var(--am-tinta);
  font-family: var(--am-sans);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}

.andes-limpiar:hover,
.andes-limpiar:focus-visible {
  border-color: var(--am-naranja);
  color: var(--am-naranja);
}

.andes-limpiar[hidden] {
  display: none;
}