:root {
  /* Papel y tinta */
  --paper:      #F3EEE4;
  --paper-warm: #FBF8F1;
  --land:       #EFE9DD;
  --building:   #E7DFCF;
  --road:       #E2D8C3;
  --green:      #E4E5D2;
  --water:      #C9CFD2;
  --label:      #8B8272;

  --ink:        #1B1917;
  --ink-soft:   #4A453D;
  --ink-mute:   #8A8377;
  --hairline:   #DFD6C5;

  --dark:       #201E1A;
  --dark-soft:  #2C2924;
  --on-dark:    #F3EEE4;
  --on-dark-mute: #A79E8D;

  --gold:       #C1943C;
  --gold-soft:  #E7D3A6;
  --amber:      #B5762A;
  --ok:         #4E7A55;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 9px;
  --shadow: 0 2px 4px rgba(40, 33, 20, .04), 0 12px 32px -8px rgba(40, 33, 20, .18);
  --shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 18px 44px -10px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; cursor: pointer; }

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

#map { position: fixed; inset: 0; }
#map:not(.ready) { opacity: 0; }
#map { transition: opacity .5s ease; }

.maplibregl-ctrl-bottom-right { margin-bottom: 4px; }
.maplibregl-ctrl-group {
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow) !important;
  background: var(--paper-warm) !important;
}
.maplibregl-ctrl-group button + button { border-top-color: var(--hairline) !important; }
.maplibregl-ctrl-attrib {
  background: rgba(251, 248, 241, .82) !important;
  font-family: var(--sans);
  font-size: 10px;
  border-radius: var(--r-sm) 0 0 0;
}
.maplibregl-ctrl-attrib a { color: var(--ink-mute); }

/* --------------------------------------------------------------- pines --- */

.pin-wrap { line-height: 0; }

.pin {
  --pin-bg: var(--paper-warm);
  --pin-fg: var(--ink);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--pin-bg);
  color: var(--pin-fg);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--ink) inset, 0 4px 12px -2px rgba(40, 33, 20, .45);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), opacity .2s, box-shadow .22s;
  will-change: transform;
}
.pin:hover { transform: scale(1.12); }

.pin.is-done {
  --pin-bg: #DED5C4;
  --pin-fg: var(--ink-mute);
  box-shadow: 0 0 0 2px var(--ink-mute) inset, 0 3px 8px -2px rgba(40, 33, 20, .3);
}

.pin.is-active {
  --pin-bg: var(--ink);
  --pin-fg: var(--paper-warm);
  transform: scale(1.25);
  box-shadow: 0 0 0 3px var(--paper-warm) inset, 0 0 0 3px var(--gold), 0 8px 22px -4px rgba(40, 33, 20, .5);
}
.pin.is-active:hover { transform: scale(1.25); }

.pin.is-dim { opacity: .26; pointer-events: none; }
.pin.is-dim.is-active { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------- chips --- */

.chips {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex; gap: 4px;
  padding: 5px;
  max-width: min(720px, calc(100vw - 32px));
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(251, 248, 241, .92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.chips::-webkit-scrollbar { display: none; }

.menu-toggle {
  display: none; /* sólo en pantalla estrecha */
  position: fixed;
  top: 12px; left: 12px;
  z-index: 40;
  align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(251, 248, 241, .94);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  font-size: 13px; font-weight: 500;
  color: var(--ink);
}
.menu-toggle svg { width: 18px; height: 18px; }
.menu-toggle[aria-expanded='true'] { background: var(--ink); color: var(--paper-warm); border-color: var(--ink); }
.menu-toggle.is-filtered { color: var(--amber); }
.menu-toggle.is-filtered[aria-expanded='true'] { color: var(--gold-soft); }

.chip {
  flex: 0 0 auto;
  border: 0;
  padding: 8px 15px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.chip:hover { background: rgba(27, 25, 23, .06); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--paper-warm); }

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

.panel {
  position: fixed;
  z-index: 20;
  top: 84px; left: 22px; bottom: 22px;
  width: 396px;
  display: flex; flex-direction: column;
  background: var(--paper-warm);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel__head { padding: 22px 24px 14px; }

.eyebrow {
  margin: 0 0 11px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.panel__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 38px;
  line-height: .98;
  letter-spacing: -.02em;
}
.panel__title em { font-style: italic; font-weight: 300; }

.panel__meta {
  margin: 13px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.panel__meta b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.progress {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
}
.progress__bar {
  flex: 1; height: 3px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.progress__fill {
  height: 100%; width: 0;
  background: var(--gold);
  border-radius: 2px;
  transition: width .35s cubic-bezier(.2, .8, .3, 1);
}
.progress__txt {
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--ink-mute); white-space: nowrap;
}
.progress__reset {
  border: 0; background: none; padding: 0;
  font-size: 11px; color: var(--ink-mute);
  text-decoration: underline; text-underline-offset: 2px;
}
.progress__reset:hover { color: var(--ink); }

.panel__list {
  position: relative; /* referencia para offsetTop en revealRow() */
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}

.block__head {
  position: sticky; top: 0;
  z-index: 2;
  padding: 16px 12px 10px;
  /* Opaco a propósito: con un degradado las paradas se veían por debajo
     de la cabecera al hacer scroll. */
  background: var(--paper-warm);
}
.block__name {
  margin: 0;
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.block__sub {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-mute);
}

.stop {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  text-align: left;
  transition: background .16s, border-color .16s, opacity .2s;
}
.stop:hover { background: rgba(27, 25, 23, .045); }
.stop.is-active {
  background: var(--paper);
  border-color: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold-soft);
}
.stop.is-dim { opacity: .3; }

.stop__time {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.stop__time small {
  display: block;
  font-size: 9px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute);
}
.stop__name { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.3; }
.stop__kind {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--ink-mute);
}
.stop.is-visited .stop__name { text-decoration: line-through; text-decoration-color: var(--ink-mute); }
.stop.is-visited .stop__time, .stop.is-visited .stop__name { color: var(--ink-mute); }

.stop__check {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1.5px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  transition: .16s;
}
.stop__check:hover { border-color: var(--ink-mute); }
.stop.is-visited .stop__check {
  background: var(--gold); border-color: var(--gold); color: #fff;
}

.warn-dot {
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--amber);
  vertical-align: 2px;
}

/* --------------------------------------------------------------- notas --- */

.notes { border-top: 1px solid var(--hairline); }
.notes summary {
  padding: 12px 24px;
  font-size: 12px; font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.notes summary::-webkit-details-marker { display: none; }
.notes summary::after { content: '+'; font-size: 15px; color: var(--ink-mute); }
.notes[open] summary::after { content: '–'; }
.notes ul {
  margin: 0; padding: 0 24px 18px;
  list-style: none;
  max-height: 230px; overflow-y: auto;
}
.notes li {
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  font-size: 12px; line-height: 1.6;
  color: var(--ink-soft);
}

.credits {
  padding: 10px 24px 12px;
  border-top: 1px solid var(--hairline);
  font-size: 10px; line-height: 1.55;
  color: var(--ink-mute);
}
.credits a { color: inherit; }

/* --------------------------------------------------------------- ficha --- */

.card {
  position: fixed;
  z-index: 25;
  right: 22px; bottom: 22px;
  width: 372px;
  max-width: calc(100vw - 44px);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: 24px 26px 26px;
  background: var(--dark);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-dark);
  transform-origin: bottom right;
  animation: pop .28s cubic-bezier(.2, .9, .3, 1);
}
.card[hidden] { display: none; }

@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.card__close {
  position: absolute; top: 18px; right: 18px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid rgba(243, 238, 228, .22);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--on-dark-mute);
  transition: .16s;
}
.card__close:hover { background: rgba(243, 238, 228, .1); color: var(--on-dark); }

.card__cat {
  display: flex; align-items: center; gap: 7px;
  margin: 0 40px 12px 0;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-soft);
}
.card__cat svg { width: 14px; height: 14px; }

.card__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -.015em;
}

.card__blurb {
  margin: 14px 0 0;
  font-size: 13.5px; line-height: 1.6;
  color: rgba(243, 238, 228, .8);
}

.card__note {
  margin: 12px 0 0;
  padding-left: 11px;
  border-left: 2px solid rgba(243, 238, 228, .18);
  font-size: 12px; line-height: 1.55;
  color: var(--on-dark-mute);
}

.card__addr {
  display: flex; align-items: baseline; gap: 8px;
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--on-dark-mute);
}
.card__addr b { color: var(--on-dark); font-weight: 500; }

.hours {
  display: flex; align-items: flex-start; gap: 8px;
  /* El texto va en un <span> propio: como nodo suelto, el contenedor flex lo
     troceaba en items anónimos y la línea se rompía en sitios absurdos. */
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 12px; line-height: 1.45;
  background: rgba(243, 238, 228, .07);
  color: var(--on-dark-mute);
}
.hours::before {
  content: '';
  flex: 0 0 auto;
  width: 6px; height: 6px; margin-top: 5px;
  border-radius: 50%;
  background: currentColor;
}
.hours > span { flex: 1; min-width: 0; }
.hours.is-ok    { color: #9DC4A4; }
.hours.is-warn  { color: #E5B36A; background: rgba(229, 179, 106, .12); }
.hours b { font-weight: 600; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 18px 0 0;
  padding: 8px 14px;
  border: 1px solid rgba(233, 211, 166, .35);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--gold-soft);
}

.card__gps {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--on-dark-mute);
  font-variant-numeric: tabular-nums;
}

.card__actions { display: flex; gap: 8px; margin-top: 20px; }

.btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500;
  text-decoration: none;
  transition: .16s;
}
.btn svg { width: 14px; height: 14px; }
.btn--primary { background: var(--paper-warm); color: var(--ink); }
.btn--primary:hover { background: #fff; }
.btn--ghost {
  background: transparent;
  border-color: rgba(243, 238, 228, .24);
  color: var(--on-dark);
}
.btn--ghost:hover { background: rgba(243, 238, 228, .1); }
.btn--ghost.is-on { background: var(--gold); border-color: var(--gold); color: #241C09; }

/* ------------------------------------------------------------- teléfono --- */

.sheet__grip { display: none; }

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }

  /* La tira horizontal se desbordaba en pantalla estrecha: aquí los mismos
     chips se apilan en un desplegable colgado del botón hamburguesa. */
  .chips {
    top: 60px; left: 12px; right: auto;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    min-width: 208px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    border-radius: var(--r-md);
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    translate: 0 -6px;
    transition: opacity .16s, translate .16s, visibility .16s;
  }
  .chips.is-open { opacity: 1; visibility: visible; translate: 0; }

  .chip {
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    text-align: left;
  }

  .panel, .card {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto;
    max-height: 82vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }

  .panel {
    transform: translateY(calc(100% - var(--peek, 168px)));
    transition: transform .32s cubic-bezier(.2, .8, .3, 1);
  }
  .panel.is-open { transform: none; }
  .panel.is-dragging { transition: none; }
  body.has-selection .panel { transform: translateY(100%); }

  /* La hoja inferior tapaba los controles del mapa (zoom y, sobre todo, el
     botón de ubicación). En pantalla estrecha se suben bajo la fila de chips,
     donde no los tapa ni la hoja ni la ficha. */
  .maplibregl-ctrl-bottom-right {
    top: 10px;
    bottom: auto;
  }

  .sheet__grip {
    display: block;
    width: 100%; padding: 10px 0 2px;
    border: 0; background: none;
    touch-action: none;
  }
  .sheet__grip::before {
    content: '';
    display: block;
    width: 38px; height: 4px; margin: 0 auto;
    border-radius: 2px;
    background: var(--hairline);
  }

  .panel__head { padding: 8px 22px 16px; }
  .panel__title { font-size: 34px; }
  .card { max-height: 78vh; padding: 22px 22px 26px; }
  .card__name { font-size: 26px; }
  .notes ul { max-height: none; }
}

@media (max-width: 380px) {
  .panel__title { font-size: 30px; }
  .stop { grid-template-columns: 46px 1fr auto; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.map-down {
  margin: 16px 0 0;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: rgba(181, 118, 42, .1);
  color: var(--amber);
  font-size: 12px;
  line-height: 1.5;
}