/* =====================================================================
   Autor de la plataforma: Dr. Mauricio Rodríguez Herrera · Director de Desarrollo Tecnológico
   css/maps.css — Estilos de EspoMaps (js/maps.js)
   Usa las variables del sitio (css/styles.css) con valores de respaldo.
   Tema oscuro: [data-theme="dark"], prefers-color-scheme (sin
   data-theme="light") y la clase .espo-map--dark que pone el JS.
   ===================================================================== */

.espo-map {
  --espo-route: var(--accent, #FF8F2F);
  --espo-route-casing: #ffffff;
  --espo-route-alt: var(--brand, #4A5C3A);
  --espo-zone: var(--brand, #4A5C3A);
  --espo-pin-ring: #ffffff;
  --espo-c: var(--brand, #4A5C3A);
  display: block;
  color: var(--text, #23291a);
  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
:root[data-theme="dark"] .espo-map,
.espo-map.espo-map--dark {
  --espo-route-casing: #0c0f08;
  --espo-route-alt: var(--brand, #A9C25A);
  --espo-pin-ring: #12160d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .espo-map {
    --espo-route-casing: #0c0f08;
    --espo-pin-ring: #12160d;
  }
}

/* ---------- Colores por categoría ---------- */
.espo-cat--tradicionales { --espo-c: #8B5E34; }
.espo-cat--naturaleza    { --espo-c: #2F7D4F; }
.espo-cat--rurales       { --espo-c: #9A7400; }
.espo-cat--bienestar     { --espo-c: #7E57C2; }
.espo-cat--aventura      { --espo-c: #D9480F; }
.espo-cat--parques       { --espo-c: #1C7ED6; }
.espo-cat--metropolitano { --espo-c: #495057; }
.espo-cat--incentivos    { --espo-c: #C2255C; }
.espo-cat--none          { --espo-c: var(--brand, #4A5C3A); }
.espo-map--dark .espo-cat--metropolitano { --espo-c: #868E96; }

/* ---------- Lienzo del mapa ---------- */
.espo-map__canvas {
  position: relative;
  isolation: isolate;               /* los z-index de Leaflet no escapan del mapa */
  z-index: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 280px;
  border-radius: var(--r-md, 16px);
  overflow: hidden;
  background: var(--bg-soft, #EEF2EC);
  border: 1px solid var(--border, #dde2d4);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,42,20,.06));
}
.espo-map__canvas[hidden] { display: none; }
.espo-map__canvas .leaflet-container,
.espo-map__canvas.leaflet-container { font: inherit; background: var(--bg-soft, #EEF2EC); }
@media (max-width: 640px) {
  .espo-map--overview .espo-map__canvas { aspect-ratio: 4 / 5; max-height: 72vh; min-height: 320px; }
  .espo-map--tour .espo-map__canvas,
  .espo-map--itin .espo-map__canvas { aspect-ratio: 1 / 1; max-height: 70vh; }
}
.espo-map__loading {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  color: var(--text-muted, #646e5a); font-size: .9rem;
  animation: espo-pulse 1.4s ease-in-out infinite;
}
@keyframes espo-pulse { 50% { opacity: .45; } }

/* ---------- Barra superior (chips + leyenda) ---------- */
.espo-map__top { display: grid; gap: .55rem; margin-bottom: .75rem; }
.espo-map__top:empty { display: none; }
.emap-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.emap-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 36px; padding: .35rem .85rem;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--border, #dde2d4);
  background: var(--card, #fff); color: var(--text, #23291a);
  font: 500 13.5px/1 var(--font-sans, system-ui);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.emap-chip:hover { border-color: var(--brand, #4A5C3A); }
.emap-chip.is-active { background: var(--brand, #4A5C3A); border-color: var(--brand, #4A5C3A); color: var(--on-brand, #fff); }
.emap-chip.is-active .espo-dot { box-shadow: 0 0 0 2px var(--on-brand, #fff); }
.emap-chip__n { opacity: .7; font-variant-numeric: tabular-nums; }
.emap-chip:focus-visible, .espo-btn:focus-visible, .espo-link:focus-visible { outline: none; box-shadow: var(--ring, 0 0 0 3px rgba(112,136,42,.4)); }
.espo-legend { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: 0; font-size: 12.5px; color: var(--text-muted, #646e5a); }
.espo-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.espo-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--espo-c); }

/* ---------- Marcadores ---------- */
.espo-ico, .espo-leg-label { background: none; border: 0; }
.espo-pin {
  position: relative; box-sizing: border-box;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--espo-c); color: #fff;
  border: 2.5px solid var(--espo-pin-ring);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  font: 700 12px/1 var(--font-sans, system-ui);
  transition: transform .15s var(--ease, ease);
}
.espo-pin svg { width: 62%; height: 62%; }
.leaflet-marker-icon:hover .espo-pin { transform: scale(1.12); }
.leaflet-marker-icon:focus { outline: none; }
.leaflet-marker-icon:focus-visible .espo-pin { transform: scale(1.12); box-shadow: 0 0 0 3px var(--espo-pin-ring), 0 0 0 6px var(--accent, #FF8F2F); }
.espo-pin--zona { outline: 2px dashed var(--espo-c); outline-offset: 2px; }
.espo-pin--dest { box-shadow: 0 0 0 5px rgba(255,143,47,.28), 0 2px 6px rgba(0,0,0,.35); }
.espo-pin--validar::after {
  content: "?"; position: absolute; top: -7px; right: -7px;
  width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent, #FF8F2F); color: #272E19; font-size: 10px;
  border: 1.5px solid var(--espo-pin-ring);
}
.espo-pin--air   { background: var(--bg-contrast, #272E19); color: #fff; }
.espo-map--dark .espo-pin--air { background: #eef2e6; color: #12160d; }
.espo-pin--city  { background: var(--espo-pin-ring); border: 4px solid var(--brand, #4A5C3A); }
.espo-pin--meet  { background: var(--accent, #FF8F2F); color: #272E19; }
.espo-pin--num   { background: var(--brand, #4A5C3A); color: var(--on-brand, #fff); }
.espo-pin--step  { background: var(--espo-c); color: #fff; }
.espo-pin--alt   { background: var(--espo-pin-ring); border: 3.5px solid var(--espo-c); }
.espo-pin--walk  { background: var(--brand, #4A5C3A); color: var(--on-brand, #fff); }
.espo-pin--hotel { background: var(--accent, #FF8F2F); color: #272E19; }
.espo-pin--mini  { display: inline-grid; width: 14px; height: 14px; border-width: 2px; box-shadow: none; vertical-align: middle; }
.espo-pin--mini.espo-pin--city { border-width: 3px; }
.espo-pin--mini.espo-pin--zona { outline-width: 1.5px; outline-offset: 1px; background: var(--brand, #4A5C3A); }
.espo-pin--mini svg { width: 9px; height: 9px; }

.espo-leg-label span {
  display: inline-block; transform: translate(-50%, -50%);
  padding: 2px 7px; border-radius: 999px;
  background: var(--card, #fff); color: var(--text, #23291a);
  border: 1px solid var(--border, #dde2d4);
  font: 600 11px/1.3 var(--font-sans, system-ui); white-space: nowrap;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.1));
}

/* ---------- Popups y tooltips ---------- */
.espo-map .leaflet-popup-content-wrapper {
  background: var(--card, #fff); color: var(--text, #23291a);
  border-radius: var(--r-md, 16px); box-shadow: var(--shadow-md, 0 6px 18px rgba(31,42,20,.1));
  border: 1px solid var(--border, #dde2d4);
}
.espo-map .leaflet-popup-tip { background: var(--card, #fff); }
.espo-map .leaflet-popup-content { margin: 12px 16px 14px 14px; font: 14px/1.45 var(--font-sans, system-ui); }
.espo-map .leaflet-container a.leaflet-popup-close-button { color: var(--text-muted, #646e5a); }
.espo-map .leaflet-tooltip.espo-tip { background: var(--card, #fff); color: var(--text, #23291a); border-color: var(--border, #dde2d4); font-size: 12.5px; }
.espo-pop p { margin: 0 0 .35rem; }
.espo-pop__place { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--text, #23291a); }
.espo-pop__tag { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #646e5a); }
.espo-pop__tag--warn { color: var(--accent-text, #A65308); }
.espo-pop__dist { font-size: 13px; color: var(--text-soft, #4a5440); }
.espo-pop__note { font-size: 13px; color: var(--text-muted, #646e5a); }
.espo-pop__tours { list-style: none; margin: .45rem 0 .7rem; padding: 0; display: grid; gap: .55rem; }
.espo-pop__tours li { display: grid; grid-template-columns: auto 1fr; gap: .3rem .5rem; align-items: start; }
.espo-pop__tours .espo-dot { margin-top: .4em; }
.espo-pop__tours .espo-btn { grid-column: 2; justify-self: start; }
.espo-pop__tname { font-weight: 600; }
.espo-pop__dur { color: var(--text-muted, #646e5a); font-weight: 400; white-space: nowrap; }

/* ---------- Botones ---------- */
.espo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 40px; padding: .5rem 1rem;
  border-radius: var(--r-pill, 999px); border: 1px solid transparent;
  background: var(--accent, #FF8F2F); color: var(--on-accent, #272E19);
  font: 600 14px/1.2 var(--font-sans, system-ui);
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.espo-btn:hover { background: var(--accent-strong, #E07A1F); }
.espo-btn--ghost { background: transparent; color: var(--text, #23291a); border-color: var(--border, #dde2d4); }
.espo-btn--ghost:hover { background: var(--bg-soft, #EEF2EC); border-color: var(--brand, #4A5C3A); }
.espo-btn--sm { min-height: 32px; padding: .3rem .8rem; font-size: 13px; }
.espo-map a.espo-btn { color: var(--on-accent, #272E19); }
.espo-map a.espo-btn--ghost { color: var(--text, #23291a); }
.espo-link {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 32px; padding: .3rem .7rem;
  border-radius: var(--r-pill, 999px); border: 1px solid var(--border, #dde2d4);
  background: transparent; color: var(--text, #23291a);
  font: 500 13px/1.25 var(--font-sans, system-ui); text-align: left; cursor: pointer;
}
.espo-link:hover { background: var(--bg-soft, #EEF2EC); border-color: var(--brand, #4A5C3A); }

/* ---------- Panel inferior (badges, notas, acciones) ---------- */
.espo-map__info { display: grid; gap: .6rem; margin-top: .75rem; }
.espo-map__info:empty { display: none; }
.espo-map--nomap .espo-map__info { margin-top: 0; }
.emap-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.emap-badges:empty { display: none; }
.emap-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .75rem; border-radius: var(--r-pill, 999px);
  background: var(--brand, #4A5C3A); color: var(--on-brand, #fff);
  font: 600 13.5px/1.25 var(--font-sans, system-ui);
}
.emap-badge svg { width: 16px; height: 16px; flex: none; }
.emap-badge--soft { background: var(--bg-soft, #EEF2EC); color: var(--text-soft, #4a5440); border: 1px solid var(--border, #dde2d4); font-weight: 500; }
.emap-badge--warn { background: var(--accent-soft, #FFF0E0); color: var(--accent-text, #A65308); }
.espo-map__note { margin: 0; font-size: 14px; color: var(--text-soft, #4a5440); }
.espo-map__fine { margin: 0; font-size: 12px; color: var(--text-muted, #646e5a); }
.espo-legs { list-style: none; margin: 0; padding: 0; display: grid; font-size: 13.5px; }
.espo-legs li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px dashed var(--border, #dde2d4); }
.espo-legs li:last-child { border-bottom: 0; }
.espo-legs b { font-weight: 600; white-space: nowrap; }
.espo-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- "En tu hotel / cerca" (overview) ---------- */
.espo-aside {
  padding: .9rem 1rem; border-radius: var(--r-md, 16px);
  background: var(--card, #fff); border: 1px solid var(--border, #dde2d4);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(31,42,20,.06));
}
.espo-aside__title { margin: 0 0 .55rem; font-weight: 600; }
.espo-aside__grp + .espo-aside__grp { margin-top: .65rem; }
.espo-aside__lbl { margin: 0 0 .35rem; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #646e5a); }
.espo-aside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .45rem; }
.espo-aside li > span { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: var(--r-pill, 999px); border: 1px solid var(--border, #dde2d4); font-size: 13px; }

/* ---------- Mensajes (experiencia móvil / sin ubicación) ---------- */
.emap-msg {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1rem 1.1rem; border-radius: var(--r-md, 16px);
  background: var(--bg-soft, #EEF2EC); border: 1px solid var(--border, #dde2d4);
}
.emap-msg p { margin: 0 0 .3rem; }
.emap-msg p:last-child { margin-bottom: 0; }
.emap-msg__ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent, #FF8F2F); color: #272E19; }
.emap-msg__ico svg { width: 24px; height: 24px; }
.emap-msg__title { font-weight: 600; font-size: 15.5px; }

/* ---------- Itinerario ---------- */
.espo-itin { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.espo-itin__day { margin: .7rem 0 .2rem; font-weight: 600; text-transform: capitalize; }
.espo-itin__day:first-child { margin-top: 0; }
.espo-itin__stop { display: flex; gap: .7rem; align-items: flex-start; padding: .35rem 0; }
.espo-itin__stop b { display: block; font-weight: 600; line-height: 1.3; }
.espo-itin__stop span:not(.espo-num) { display: block; font-size: 13px; color: var(--text-muted, #646e5a); }
.espo-itin__stop .espo-link { padding: 0; min-height: 0; border: 0; font-weight: 600; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.espo-itin__stop--off .espo-num { background: var(--bg-soft, #EEF2EC); color: var(--text-muted, #646e5a); border: 1px dashed var(--border, #dde2d4); }
.espo-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand, #4A5C3A); color: var(--on-brand, #fff);
  font: 700 13px/1 var(--font-sans, system-ui);
}
.espo-num--hotel { background: var(--accent, #FF8F2F); color: #272E19; }
.espo-num svg { width: 16px; height: 16px; }
.espo-itin__leg { margin-left: 13px; padding: .15rem 0 .15rem 1.05rem; border-left: 2px solid var(--espo-route); font-size: 13px; color: var(--text-soft, #4a5440); }
.espo-itin__leg--approx { border-left-style: dashed; border-left-color: var(--espo-route-alt); }

/* ---------- Lista de texto (lectores de pantalla / sin conexión) ---------- */
.espo-vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.espo-map__list:not(.espo-vh) {
  margin-top: .75rem; padding: .9rem 1rem;
  border-radius: var(--r-md, 16px); border: 1px solid var(--border, #dde2d4);
  background: var(--card, #fff);
}
.espo-map__list:empty { display: none; }
.espo-map__list ul { margin: .45rem 0 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: 14px; }
.espo-map__list a { color: var(--accent-text, #A65308); }
.espo-map__offline { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-soft, #4a5440); }
.espo-map--fallback .espo-map__info .espo-map__offline { padding: .6rem .8rem; border-radius: var(--r-sm, 10px); background: var(--bg-soft, #EEF2EC); }

/* ---------- Controles de Leaflet en modo oscuro ---------- */
.espo-map--dark .leaflet-bar a,
.espo-map--dark .leaflet-bar a:hover { background: var(--card, #1a2013); color: var(--text, #eef2e6); border-bottom-color: var(--border, #2e3824); }
.espo-map--dark .leaflet-bar { border-color: var(--border, #2e3824); }
.espo-map--dark .leaflet-control-attribution { background: rgba(18, 22, 13, .82); color: var(--text-muted, #9aa58c); }
.espo-map--dark .leaflet-control-attribution a { color: var(--brand-ink, #c4d97f); }

@media (prefers-reduced-motion: reduce) {
  .espo-pin, .emap-chip, .espo-btn { transition: none; }
  .espo-map__loading { animation: none; }
}
@media print {
  .espo-map__canvas { display: none; }
  .espo-map__list { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}

/* Modo oscuro con teselas de OpenStreetMap: solo se invierten las teselas (no marcadores ni rutas) */
.espo-map--dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.8); }