/* Cinzel y Lora autoalojadas (subset "latin", cubre español) — ver fonts/
   y el informe legal §2.2. Mismos pesos/estilos que antes se pedían al
   CDN de Google Fonts. */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/cinzel-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/lora-latin-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-latin-italic.woff2') format('woff2');
}

:root {
  --bg: #14110d;
  --panel-bg: #1e1a15;
  --panel-bg-alt: #29241d;
  --border: #453d31;
  /* Borde de controles de formulario: --border da 1.6:1 sobre --panel-bg y su
     límite era invisible; este llega a 3.5:1 (3.1 sobre --panel-bg-alt). */
  --border-strong: #7a6e5a;
  --text: #ece4d6;
  --text-dim: #b3a68f;
  --accent: #439d64;
  --accent-2: #b9955a;
  --danger: #b9563f;
  --warn: #c9a15a;
  --bone: #f0e6d2;
  /* Texto sobre --accent/--accent-2 en bloque sólido (botones, pestañas y
     chips activos): blanco no llega a AA sobre ninguno de los dos acentos
     aclarados (ver ESTILO-VISUAL.md §4), así que el texto va oscuro en vez
     de aclarar más el acento. */
  --on-accent: var(--bg);
  /* Superficies que flotan sobre el mapa: marrón del panel (--panel-bg y --bg)
     con transparencia, en vez del azul pizarra de antes. */
  --overlay-bg: rgba(30, 26, 21, 0.88);
  --overlay-card: rgba(30, 26, 21, 0.95);
  --overlay-label: rgba(30, 26, 21, 0.85);
  --overlay-bar: rgba(20, 17, 13, 0.94);
  --overlay-border: rgba(240, 230, 214, 0.14);
  --radius: 10px;
  --header-h: 48px;
  --timeline-h: 90px;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

/* ---------------- Header ---------------- */
#app-header {
  min-height: var(--header-h);
  height: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  /* Por encima de #mode-menu-backdrop (42): #app-header crea su propio
     contexto de apilamiento, así que #mode-tabs (45) solo se compara con
     otros elementos DENTRO de él — si el header se quedara por debajo del
     backdrop, este taparía los clics en el desplegable aunque #mode-tabs
     tenga un z-index mayor. */
  z-index: 50;
  position: relative;
}

#app-title {
  font-family: var(--font-heading);
  font-size: 15px;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: #mode-tabs is a slide-out drawer from the right, opened by the
   #mode-menu-toggle hamburger (see js/app.js) and closed via its backdrop,
   Escape, or picking an option. At >=640px it reverts to a plain row
   floating inline in the header — see the media query below. */
#mode-tabs {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(80vw, 300px);
  z-index: 45;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.35);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}

#mode-tabs.open {
  transform: translateX(0);
}

#mode-tabs-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 10px;
}

/* "Casi transparente": una línea tenue sobre el fondo cálido del panel,
   no el --border normal (pensado para separar bloques, más marcado). */
#mode-tabs-divider {
  border: none;
  border-top: 1px solid rgba(240, 230, 214, 0.08);
  margin: 0 0 12px;
}

#mode-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 42;
  display: none;
}

#mode-menu-backdrop.show {
  display: block;
}

/* Sin píldora/círculo: el propio botón, a ancho completo dentro del
   desplegable móvil, es la única superficie — el resaltado de hover/activo
   sombrea toda esa fila, no un fondo recortado alrededor del texto. */
.mode-tab {
  font-family: var(--font-heading);
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.mode-tab:hover {
  background: var(--panel-bg-alt);
  color: var(--text);
}

.mode-tab.active {
  background: var(--accent-2);
  color: var(--on-accent);
}

.mode-tab:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}

#header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

#mode-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-bg-alt);
  color: var(--text-dim);
  cursor: pointer;
  flex: 0 0 auto;
}

#mode-menu-toggle svg {
  width: 18px;
  height: 18px;
}

#mode-menu-toggle:hover,
#mode-menu-toggle:focus-visible,
#mode-menu-toggle[aria-expanded="true"] {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* Selector de idioma: visible siempre en el header, en las dos versiones
   del sitio (index.html y en/index.html apuntan una a la otra). */
#lang-switch {
  display: flex;
  gap: 4px;
}

.lang-link {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 9px;
  min-width: 30px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lang-link.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--on-accent);
}

.lang-link:not(.active):hover {
  border-color: var(--accent-2);
  color: var(--text);
}

@media (min-width: 640px) {
  /* Equal 1fr columns on both sides of the nav center it on the full header
     width regardless of how wide the title siblings are — centering it
     inside a single flex:1 slot next to the title would instead bias it
     toward whichever side has less content. */
  #app-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  #app-title { grid-column: 1; justify-self: start; }

  /* Reverts the mobile drawer back into a plain inline row, floating in
     the header with no visible container of its own. */
  #mode-tabs {
    grid-column: 2;
    align-self: stretch;
    position: static;
    width: auto;
    height: auto;
    /* Cancela el padding vertical de #app-header (8px arriba/abajo) para que
       el resaltado de hover/activo llegue borde con borde de la barra, no
       solo al área interior con padding. */
    margin-block: -8px;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
    transition: none;
    overflow: visible;
  }

  #mode-tabs-label,
  #mode-tabs-divider {
    display: none;
  }

  #mode-menu-backdrop {
    display: none !important;
  }

  #header-right { grid-column: 3; justify-self: end; }
  #mode-menu-toggle { display: none; }

  /* Sin borde ni fondo en reposo — "flotando" en la barra. El resaltado de
     hover/activo se estira a toda la altura del header (align-items:stretch
     arriba) para sombrear la región completa que ocupa la opción, no una
     píldora recortada alrededor del texto. */
  .mode-tab {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    text-align: center;
    white-space: nowrap;
    border-radius: 0;
  }
}

/* ---------------- Layout ---------------- */
#main-layout {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

#map {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  background: #100d09;
  position: relative;
  z-index: 0; /* isolate Leaflet's internal panes (z-index 200-700) below the app UI overlays */
}

/* Smooth, fluid transitions for markers/territories instead of hard pop in/out.
   Leaflet's SVG renderer draws plain <path>/<circle> elements — a CSS transition
   on opacity/fill-opacity animates any change made via layer.setStyle(). */
.leaflet-interactive {
  transition: opacity 380ms ease, fill-opacity 380ms ease, stroke-opacity 380ms ease;
}

/* ---------------- Floating event card (top-left over the map) ---------------- */
#event-card {
  position: absolute;
  top: 12px;
  left: 12px;
  /* 56px, not 12px: reserves room for #icons-toggle sitting right next to
     it on the same row (mobile only — reset to 12px at 768px, where the
     toggle moves next to #side-panel instead, see below). Without this the
     card's own max-width can eat into the toggle's spot on narrower phones
     (it otherwise only avoids that by coincidence, on wide-enough screens). */
  right: 56px;
  z-index: 15;
  max-width: 340px;
  /* 0.88 y no 0.72: con 0.72 la descripción (--text-dim) cae a 2.8:1 sobre
     teselas claras; a 0.88 pasa AA (4.7:1). Ver ESTILO-VISUAL.md §4. */
  background: var(--overlay-card);
  border: 1px solid var(--overlay-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
  pointer-events: auto;
}

/* Eye / eye-off toggle: hides every unpinned marker. Same floating-card
   look as #event-card (background/blur/border/shadow), just icon-sized.
   Mobile: right next to the event card, see the reserved space above.
   Desktop: repositioned beside #side-panel, see the 768px breakpoint. */
#icons-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 15;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
  color: var(--text);
  cursor: pointer;
}

#icons-toggle svg {
  width: 18px;
  height: 18px;
}

#icons-toggle:hover,
#icons-toggle:focus-visible {
  border-color: var(--accent-2);
  color: var(--bone);
}

/* Pressed = icons currently hidden — the eye-off state is the one worth
   calling out, so it gets the same warn-ish treatment as other "something
   is off/filtered" indicators in this app (e.g. .badge.disputada). */
#icons-toggle[aria-pressed="true"] {
  /* Sólido: --danger como solo color de icono daba 1.4:1 sobre teselas claras. */
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

#event-card h2 {
  font-family: var(--font-heading);
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  /* Modo Rutas: nombre + categoría (#event-cat) en la misma línea. Con wrap,
     si un nombre largo no deja sitio en móvil, la categoría baja entera a
     la línea siguiente en vez de partirse a mitad. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}

/* Mismo aspecto que el texto de #event-card p (donde iba antes la
   categoría), para que contraste igual con el nombre. */
#event-cat {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.35;
  white-space: nowrap;
}

/* Recortada a 2 líneas por defecto — algunas notas de ubicación ocupan
   varias líneas y desbordaban la tarjeta flotante sobre el mapa. #event-desc-
   toggle ("Leer más"/"Leer menos") la expande; ver setEventDesc() en
   js/app.js, que además oculta el botón si el texto ya cabe en 2 líneas. */
#event-card p {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Sin esto, el display:-webkit-box de arriba anula el atributo hidden
   (parada de ruta sin nota: no hay descripción que mostrar). */
#event-card p[hidden] { display: none; }

#event-card p.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

#event-desc-toggle {
  display: block;
  margin: -3px 0 6px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--bone);
  text-decoration: underline;
  cursor: pointer;
}

/* Igual que arriba: el display:block anulaba hidden y "Leer más" salía
   siempre, aunque el texto cupiera en 2 líneas o no hubiera texto. */
#event-desc-toggle[hidden] { display: none; }

#event-desc-toggle:hover,
#event-desc-toggle:focus-visible {
  color: var(--bone);
}

#event-card a {
  font-size: 12px;
  /* --bone y no --accent: el verde no pasa de ~3.4:1 sobre esta tarjeta ni
     siquiera opaca al 0.88. */
  color: var(--bone);
  text-decoration: none;
  font-weight: 600;
}

#event-card a:hover { text-decoration: underline; }

/* Permanent on-map territory name labels */
.territory-label {
  font-family: var(--font-heading);
  background: rgba(20,17,13,0.68);
  border: 1px solid rgba(240, 230, 214, 0.18);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: none;
  transition: opacity 380ms ease;
}
.territory-label::before { display: none; }

/* Map markers: category icon inside a circle colored/bordered by certainty
   (replaces the old plain circleMarker dot) */
.map-marker-wrap {
  background: transparent;
  border: none;
}

.map-marker-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  background: var(--accent);
  border: 2px solid #100d09;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transition: opacity 380ms ease;
}

.map-marker-icon.cert-probable,
.map-marker-icon.cert-disputada {
  background: var(--warn);
  border-style: dashed;
}
.map-marker-icon.cert-disputada { background: var(--danger); }
.map-marker-icon.cert-desconocida {
  background: var(--text-dim);
  border-style: dotted;
}

.leaflet-marker-icon { transition: opacity 380ms ease; }

/* ---------------- Side / bottom panel ---------------- */
#side-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 30%;
  background: var(--panel-bg);
  border-top: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.35);
  z-index: 30;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  padding-bottom: var(--timeline-h);
}

#side-panel.open {
  transform: translateY(0);
}

#panel-drag-handle {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 14px 0 10px;
  cursor: grab;
  touch-action: none;
}

#panel-drag-handle span {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  display: block;
}

/* Hoja móvil: tres alturas. Solo aplica por debajo de 768px; en escritorio el
   panel es fijo (ver el media query de más abajo). */
@media (max-width: 767px) {
  #side-panel.peek { transform: translateY(calc(100% - var(--timeline-h) - 48px)); }
  #side-panel.half { transform: translateY(calc(100% - 62vh)); }
  #list-count { display: none; }
}

#panel-drag-handle {
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

#sheet-summary {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  min-height: 18px;
}

#list-scope {
  display: flex;
  gap: 6px;
  margin: 0 0 6px;
}

.scope-btn {
  flex: 1 1 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--panel-bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 8px;
  cursor: pointer;
}

.scope-btn.active {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--on-accent);
}

#list-count {
  margin: 0 0 4px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.loc-item.hl { background: var(--panel-bg-alt); }

#route-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

#route-stepper button {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 7px 10px;
  cursor: pointer;
}

#route-stepper button:hover:not(:disabled) { border-color: var(--accent-2); }
#route-stepper button:disabled { opacity: 0.45; cursor: default; }

#route-step-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
}

#intro-journeys { margin: 0 0 12px; }

#intro-journeys p {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

#intro-journeys div { display: flex; flex-wrap: wrap; gap: 6px; }

#intro-journeys button {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
}

#intro-journeys button:hover { border-color: var(--accent-2); }

.map-marker-wrap.hl .map-marker-icon {
  transform: scale(1.3);
  box-shadow: 0 0 0 3px var(--bone), 0 1px 4px rgba(0,0,0,0.4);
}

.map-marker-icon { transition: transform 0.12s ease, box-shadow 0.12s ease; }

.map-cluster-wrap { background: none; border: none; }

.map-cluster {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  border: 3px solid var(--bone);
  box-shadow: 0 1px 6px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

#panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 14px 14px;
}

#panel-body h2 {
  font-family: var(--font-heading);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 16px 0 8px;
}

#panel-body h2:first-child { margin-top: 4px; }

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 10px;
}

.search-icon {
  position: absolute;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--text-dim);
  pointer-events: none;
}

#search-input,
#book-search-input {
  width: 100%;
  padding: 11px 64px 11px 38px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--panel-bg-alt);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
}

#search-input::placeholder,
#book-search-input::placeholder { color: var(--text-dim); }

#search-input:focus,
#book-search-input:focus {
  outline: none;
  border-color: var(--accent-2);
}

.search-kbd {
  position: absolute;
  right: 10px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 2px 7px;
  pointer-events: none;
}

@media (hover: none) {
  .search-kbd { display: none; }
  #search-input, #book-search-input { padding-right: 12px; }
}

/* Filtros por categoría: siempre visibles, como etiquetas en una fila que
   se ajusta. */
#category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

#panel-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 10px;
}

.panel-tab {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px;
  margin-bottom: -1px;
  cursor: pointer;
}

.panel-tab:hover { color: var(--text); }

.panel-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent-2);
}

#events-era {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-dim);
}

.event-item {
  align-items: baseline;
  gap: 10px;
  cursor: pointer;
}

.event-item.on { background: var(--panel-bg-alt); }

.event-year {
  flex: 0 0 64px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.event-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
}

.event-title small {
  display: block;
  font-size: 11.5px;
  color: var(--text-dim);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-strong);
  background: var(--panel-bg-alt);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

/* Activa = con borde dorado y texto claro (casi todas lo están por defecto,
   así que no puede ser un bloque de color); apagada = tenue, sin borde. */
.chip.active {
  border-color: var(--accent-2);
  color: var(--text);
}

.chip:not(.active) {
  background: transparent;
  border-color: var(--border);
  opacity: 0.7;
}

.loc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.loc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13.5px;
}

.loc-item:hover, .loc-item:focus {
  background: var(--panel-bg-alt);
}

.loc-item .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--accent);
}

.loc-item.certainty-probable .dot,
.loc-item.certainty-disputada .dot {
  background: var(--warn);
  border: 2px dashed var(--danger);
  width: 7px;
  height: 7px;
}

.loc-item.certainty-desconocida .dot {
  background: transparent;
  border: 2px dotted var(--text-dim);
  width: 7px;
  height: 7px;
}

.loc-item .refs {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.loc-item.no-coords {
  cursor: default;
  opacity: 0.75;
}

.loc-item .loc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* Explicit, always-tappable link to the fiche page (see openLinkHtml in
   js/app.js) — sits outside .loc-link so the row itself can keep
   centering the map on tap while this stays a plain, un-intercepted <a>.
   44px isn't hit exactly (would blow out the compact row height that the
   rest of the panel uses throughout), but 26px + the row's own vertical
   padding keeps it comfortably tappable without changing row height. */
.loc-item .loc-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
}

.loc-item .loc-open:hover,
.loc-item .loc-open:focus-visible {
  background: var(--panel-bg);
  color: var(--accent);
}

/* ---------------- Routes mode (side panel: route picker) ---------------- */
#route-clear-btn {
  background: none;
  border: none;
  color: var(--accent-2);
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 10px;
}

#route-clear-btn:hover { text-decoration: underline; }

.route-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.route-item-traveler {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
}

.route-item-ref {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.route-item-ref:hover { text-decoration: underline; }

/* ---------------- Routes mode (on-map labels) ---------------- */
/* 28px (área de toque) con el punto de 12px centrado — ver routeStopMarker()
   en js/app.js. */
.route-stop-marker {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fichas plegadas (zoom out / "Ver ruta completa", ver
   setRouteLabelsCollapsed() en js/app.js): se ocultan las etiquetas de
   parada y de "Segunda visita"; los puntos de parada y el trazado no se
   tocan. .is-open = la que el usuario ha abierto con un toque.
   visibility y no display: con display:none Leaflet mide la etiqueta como
   0×0 al colocarla y, al abrirla, aparecía desplazada a un lado del punto
   en vez de centrada encima. Oculta así tampoco recibe toques. */
.route-labels-collapsed .route-stop-label:not(.is-open),
.route-labels-collapsed .route-visit-label { visibility: hidden; }

.route-stop-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-2);
  border: 2px solid var(--panel-bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}

/* Parada en curso (markCurrentRouteStop() en js/app.js): punto mayor con un
   anillo doble — claro por dentro, oscuro por fuera — para que se lea igual
   sobre teselas claras (tierra) y oscuras (mar, relieve), y se distinga por
   forma y tamaño, no solo por color. 16px + anillos = 24px: cabe en los
   28px del icono, así que el área de toque no cambia. */
.route-stop-marker.is-current .route-stop-dot {
  width: 16px;
  height: 16px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--panel-bg);
}

@media (prefers-reduced-motion: no-preference) {
  .route-stop-dot { transition: width 0.15s ease, height 0.15s ease, box-shadow 0.15s ease; }
}

.route-stop-label {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 12.5px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

.route-stop-label::before { display: none; }

.route-stop-name { display: block; font-weight: 600; }

.route-stop-more {
  display: inline-block;
  margin-top: 2px;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
}

.route-stop-more:hover { text-decoration: underline; }

.route-visit-label {
  background: var(--overlay-label);
  border: none;
  color: var(--text);
  font-size: 10.5px;
  font-style: italic;
  padding: 2px 6px;
  box-shadow: none;
}

.route-visit-label::before { display: none; }

/* "Ver ruta completa": mismo look flotante que #icons-toggle, pero centrado
   justo encima de la barra de tiempo (no en una esquina) y con texto visible
   en vez de un icono aislado. */
#route-full-btn {
  /* Fixed al viewport, no absolute dentro de #main-layout: ese contenedor
     puede ser más alto que la pantalla cuando el panel lateral tiene mucho
     contenido (scroll interno), así que un bottom:12px "absolute" ahí
     quedaría fuera de la vista en vez de pegado a la barra de tiempo real. */
  position: fixed;
  bottom: calc(var(--timeline-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0,0,0,0.3);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

#route-full-btn[hidden] { display: none; }

#route-full-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

#route-full-btn:hover,
#route-full-btn:focus-visible {
  border-color: var(--accent-2);
  color: var(--bone);
}

.uncertain-note {
  font-size: 12px;
  color: var(--text-dim);
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.badge.probable { background: rgba(201,161,90,0.2); color: var(--warn); }
/* --danger sobre este fondo traslúcido no pasa de ~3:1 aunque se cambie la
   opacidad (ambos convergen al mismo tono): se usa --bone, que ya es el
   texto claro de referencia del sitio, en vez de aclarar --danger solo
   para esta insignia. Ver ESTILO-VISUAL.md §4. */
.badge.disputada { background: rgba(185,86,63,0.2); color: var(--bone); }
.badge.desconocida { background: rgba(169,182,194,0.15); color: var(--text-dim); }

#legend-list {
  font-size: 13px;
}

.legend-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.legend-row strong {
  font-family: var(--font-heading);
}

.legend-row .legend-note {
  font-size: 11.5px;
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
}

/* ---------------- Reference-mode (book search) panel ---------------- */
.book-testament-header {
  font-family: var(--font-heading);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  padding: 10px 4px 4px;
  border-bottom: none;
  cursor: default;
}

.book-testament-header:hover { background: none; }

.loc-item .book-place {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  text-align: right;
}

#book-clear-btn {
  font-family: var(--font-body);
  background: var(--panel-bg-alt);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 11px;
  font-size: 12.5px;
  cursor: pointer;
  margin-bottom: 6px;
}

#book-detail-title {
  font-family: var(--font-heading);
  font-size: 17px;
  margin: 0 0 4px;
}

#book-detail-meta {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0 0 10px;
}

/* ---------------- Timeline bar (fixed bottom) ---------------- */
/* El propio selector fija su `display`, así que sin esto [hidden] (que solo
   gana por especificidad de atributo) no lo ocultaría — mismo caso que
   #route-full-btn más abajo. */
#timeline-bar[hidden] { display: none; }

#timeline-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--timeline-h);
  /* 0.55 measured under WCAG AA (4.5:1) against light map terrain under
     #era-label/#year-label; raised to keep a safe margin regardless of
     what's on the map underneath (informe-legal-atlas-biblico.md §9). */
  background: var(--overlay-bar);
  border-top: 1px solid var(--overlay-border);
  z-index: 40;
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#era-info,
#timeline-controls {
  width: 100%;
  max-width: 900px;
}

#era-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  background: none;
}

#era-label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

#year-label {
  font-size: 13px;
  color: var(--bone);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

#timeline-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

#play-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#slider-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

#year-range {
  flex: 1 1 auto;
  width: 100%;
  accent-color: var(--accent);
  margin: 0;
}

/* Marcas de era sobre la barra: cada línea es el inicio de una era, y el
   tramo resaltado es la era actual. No reciben clics (la barra sigue siendo
   un deslizador); para saltar de era están los botones y Re Pág / Av Pág. */
#era-ticks {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.era-tick {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--bone);
  opacity: 0.55;
}

#era-seg {
  position: absolute;
  top: 50%;
  height: 8px;
  margin-top: -4px;
  border-radius: 4px;
  background: var(--accent-2);
  opacity: 0.45;
  pointer-events: none;
}

.era-step {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--panel-bg-alt);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  padding: 0 0 2px;
  cursor: pointer;
}

.era-step:hover { border-color: var(--accent-2); }
.era-step[hidden] { display: none; }
#era-ticks[hidden], #era-seg[hidden] { display: none; }

#speed-select {
  flex: 0 0 auto;
  background: var(--panel-bg-alt);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 11px;
  padding: 4px;
}

/* ---------------- Leaflet overrides ---------------- */
.leaflet-popup-content-wrapper {
  background: var(--panel-bg);
  color: var(--text);
  border-radius: var(--radius);
}

.leaflet-popup-tip { background: var(--panel-bg); }

/* No overridamos el color de enlace por defecto de Leaflet aquí. Afecta a
   dos cosas: la atribución (fondo blanco translúcido, abajo a la derecha),
   que cae al azul #0078A8 de .leaflet-container a (~4.8:1 sobre blanco); y
   los glifos +/- del control de zoom, que Leaflet ya pinta en negro sobre
   blanco vía su propia .leaflet-bar a, más específica/tardía que la de
   arriba (~21:1, ni siquiera depende de esto). La versión anterior de esta
   regla sustituía ambos por --bone (hueso sobre blanco, ~1.2:1,
   prácticamente invisible) y de paso rompía el control de zoom, que no
   estaba documentado como afectado. Los enlaces dentro de los popups no
   dependen de esto: cada uno fija su propio color más abajo (.pop-refs a,
   .pop-gmaps). */

.leaflet-popup-content h3 {
  font-family: var(--font-heading);
  margin: 0 0 4px;
  font-size: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.leaflet-popup-content h3 .pop-title-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.leaflet-popup-content h3 .pop-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaflet-popup-content h3 .pop-gmaps {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--bone);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}

.leaflet-popup-content h3 .pop-gmaps:hover {
  text-decoration: underline;
}

.leaflet-popup-content h3 .pop-pin {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-dim);
  opacity: 0.55;
  filter: grayscale(1);
  flex: 0 0 auto;
}

.leaflet-popup-content h3 .pop-pin:hover {
  opacity: 0.85;
}

.leaflet-popup-content h3 .pop-pin.active {
  opacity: 1;
  filter: none;
}

.leaflet-popup-content .pop-refs {
  font-size: 12px;
  color: var(--text-dim);
  margin: 2px 0;
}

.leaflet-popup-content .pop-refs a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.leaflet-popup-content .pop-refs a:hover {
  text-decoration: underline;
}

.leaflet-popup-content .pop-note {
  font-size: 11.5px;
  color: var(--warn);
  margin-top: 6px;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}

/* Collapsed to a single truncated line by default — some notes run 3-4
   lines and blew up the popup, especially on mobile (see .pop-note-toggle).
   .expanded is toggled by js/app.js, which also calls popup.update() so
   Leaflet re-measures the box and re-runs autoPan. */
.leaflet-popup-content .pop-note-text {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaflet-popup-content .pop-note.expanded .pop-note-text {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.leaflet-popup-content .pop-note-toggle {
  display: block;
  margin: 3px 0 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.leaflet-popup-content .pop-note-toggle:hover,
.leaflet-popup-content .pop-note-toggle:focus-visible {
  color: var(--bone);
}

.territory-tooltip {
  background: var(--panel-bg);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 12px;
  max-width: 220px;
}

/* Backdrop for open panel on mobile */
#panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 25;
  display: none;
}

#panel-backdrop.show { display: block; }

/* ---------------- Tablet / Desktop layout ---------------- */
@media (min-width: 768px) {
  #app-header .subtitle { display: inline; margin-left: 8px; }

  #main-layout { flex-direction: row; }

  #side-panel {
    position: static;
    top: auto;
    transform: none;
    width: 340px;
    flex: 0 0 340px;
    border-radius: 0;
    border-top: none;
    border-right: 1px solid var(--border);
    box-shadow: none;
    padding-bottom: 0;
    height: 100%;
  }

  #panel-drag-handle { display: none; }

  #panel-backdrop { display: none !important; }

  #timeline-bar {
    left: 0;
    right: 340px;
  }

  /* #event-card no longer needs to make room for #icons-toggle on the same
     row — the toggle moves to the map's top-right edge instead, next to
     #side-panel (340px wide at this breakpoint). */
  #event-card { right: 12px; }
  #icons-toggle { right: 352px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #timeline-bar { right: 300px; }
  #side-panel { width: 300px; flex-basis: 300px; }
  #icons-toggle { right: 312px; }
}

/* ---------------- Places index CTA (side panel) ---------------- */
/* Deliberately not styled like #legal-links below: that's boilerplate
   (privacy, cookies...) meant to stay quiet, this is a real content
   feature — the ~245-page index that was previously buried in that same
   quiet nav and had, as a result, ~zero traffic. */
#places-index-nav {
  margin-top: 14px;
}

#places-index-link {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}

#places-index-link:hover,
#places-index-link:focus-visible {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

/* ---------------- Legal links (side panel) ---------------- */
#legal-links {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
}

#legal-links a {
  color: var(--text-dim);
  text-decoration: underline;
}

#legal-links a:hover { color: var(--text); }

/* ---------------- Intro modal (solo la primera visita) ---------------- */
/* Bienvenida: tarjeta que flota sobre el mapa, sin velo ni bloqueo. El mapa
   se puede mover con ella abierta; el contenedor no captura clics. */
#intro-modal-backdrop {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--timeline-h) + 12px);
  z-index: 100;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

#intro-modal-backdrop[hidden] { display: none; }

#intro-modal {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  max-width: 360px;
  width: 100%;
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px 18px;
  pointer-events: auto;
}

#intro-modal h2 {
  font-family: var(--font-heading);
  font-size: 17px;
  margin: 0 0 8px;
  line-height: 1.3;
}

#intro-modal > p {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 12px;
}

.intro-modal-tips {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.intro-modal-tips li {
  font-size: 13.5px;
  line-height: 1.5;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.intro-modal-tips li > span:first-child {
  flex: 0 0 auto;
  font-size: 16px;
}

#intro-modal-close {
  width: 100%;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  padding: 9px 16px;
  cursor: pointer;
}

/* Con texto oscuro (--on-accent) el hover tiene que aclarar, no oscurecer
   como antes (#347a4d era más oscuro que --accent y dejaba el texto casi
   invisible): ver ESTILO-VISUAL.md §4. */
#intro-modal-close:hover { background: #4cb372; }

#intro-modal-lang {
  margin: 12px 0 0;
  text-align: center;
}

#intro-modal-lang a {
  font-size: 13px;
  color: var(--text-dim);
}

#intro-modal-lang a:hover { color: var(--text); }

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .leaflet-interactive,
  .territory-label,
  .map-marker-icon,
  .leaflet-marker-icon,
  #side-panel {
    transition: none !important;
  }
}

/* =====================================================================
   KronAtlas · Península Ibérica — añadidos sobre el CSS del atlas bíblico
   Todo lo de arriba es el CSS heredado sin tocar. Aquí solo hay lo que la
   península necesita y el bíblico no: estados de certeza nuevos
   (aproximada, legendaria), historicidad de los hechos, estados de control
   de los territorios, popups con listas, debates y el panel de lo no
   seguro. Solo variables existentes: no se añade ningún color de interfaz.
   ===================================================================== */

#app-title small {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-left: 4px;
}

#method-link {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 10px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
}
#method-link:hover, #method-link:focus-visible { border-color: var(--accent-2); color: var(--text); }
@media (max-width: 639px) { #method-link { display: none; } }

/* ---- Certeza: dos estados nuevos que el bíblico no tiene ---- */
.map-marker-icon.cert-aproximada {
  background: var(--accent);
  border-style: dashed;
}
.map-marker-icon.cert-legendaria {
  background: var(--danger);
  border-style: dotted;
}
/* Historicidad del hecho: independiente de la certeza de la ubicación. */
.map-marker-icon.hist-discutida { border-style: dashed; }
.map-marker-icon.hist-legendaria { border-style: dotted; opacity: 0.85; }

.loc-item.certainty-aproximada .dot {
  background: var(--accent);
  border: 2px dashed var(--text-dim);
  width: 7px;
  height: 7px;
}
.loc-item.certainty-legendaria .dot {
  background: var(--danger);
  border: 2px dotted var(--bone);
  width: 7px;
  height: 7px;
}

.event-item.not-established .event-title { font-style: italic; }
.event-item .badge { margin-left: 0; margin-right: 6px; }

/* ---- Territorios ---- */
.territory-halo { transition: stroke-opacity 380ms ease; pointer-events: none; }

#snapshot-note,
.debate-intro,
.uncertain-lead {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 10px;
}

#snapshot-note { padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }

.legend-row .pop-debate { font-size: 11.5px; color: var(--accent); }

/* ---- Filtro de historicidad ---- */
#established-toggle,
#interpolate-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: var(--radius);
  padding: 5px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
}
#established-toggle:hover,
#interpolate-toggle:hover { border-color: var(--accent-2); color: var(--text); }
#established-toggle.active,
#interpolate-toggle.active { border-color: var(--accent-2); color: var(--text); background: var(--panel-bg-alt); }

/* ---- Popups: listas de hechos y de comunidades ---- */
.leaflet-popup-content .pop-list {
  list-style: none;
  margin: 4px 0 2px;
  padding: 0;
  font-size: 12px;
  color: var(--text);
}
.leaflet-popup-content .pop-list li { margin: 3px 0; line-height: 1.35; }
.leaflet-popup-content .pop-list b { color: var(--bone); }
.leaflet-popup-content .pop-list small,
.leaflet-popup-content .pop-comm small {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.35;
}
.leaflet-popup-content .pop-comm { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.leaflet-popup-content .pop-comm strong { color: var(--text); font-family: var(--font-heading); font-size: 11.5px; }
.leaflet-popup-content .badge { margin-left: 4px; }
.leaflet-popup-content .pop-debate { color: var(--accent); }

/* ---- Modo Debates ---- */
#debate-clear-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 8px;
  color: var(--accent-2);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
}
#debate-clear-btn:hover { text-decoration: underline; }

#debate-detail-title {
  font-family: var(--font-heading);
  font-size: 16px;
  margin: 4px 0 8px;
}
#debate-detail-summary { font-size: 13px; line-height: 1.55; margin: 0 0 8px; }
#debate-detail-map { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 0 0 12px; }

.debate-position {
  border-left: 2px solid var(--border-strong);
  padding: 2px 0 2px 10px;
  margin: 0 0 12px;
}
.debate-position h3 { font-family: var(--font-heading); font-size: 13px; margin: 0 0 2px; }
.debate-position p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.5; }
.debate-position .debate-authors { color: var(--text-dim); font-size: 11.5px; font-style: italic; }
.debate-position .debate-sources { font-size: 11.5px; color: var(--text-dim); }
.debate-position .debate-sources a { color: var(--accent); }

/* ---- Detalle de campaña ---- */
#route-detail-note {
  background: var(--panel-bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 0 0 16px;
}
#route-detail-note p { margin: 0; }
#route-detail-note .route-desc { font-size: 13px; line-height: 1.55; color: var(--text); }
#route-detail-note .route-sources { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
#route-detail-note a { color: var(--accent); }

/* ---- Panel «qué no es seguro» ---- */
#uncertain-details { margin: 14px 0; border-top: 1px solid var(--border); padding-top: 10px; }
#uncertain-details summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 12.5px;
  color: var(--text);
  padding: 4px 0;
}
.uncertain-small { display: block; font-size: 11.5px; color: var(--text-dim); line-height: 1.4; font-weight: 400; }
.loc-item.uncertain-item { align-items: flex-start; cursor: pointer; }
.loc-item.uncertain-item .dot { margin-top: 5px; }

#interpolate-toggle { margin-left: 6px; }
#interpolate-toggle[hidden] { display: none; }

.leaflet-popup-content .pop-resumen { font-size: 12.5px; line-height: 1.5; color: var(--text); margin: 6px 0 4px; }
.leaflet-popup-content .pop-more { color: var(--accent); font-weight: 600; }

/* ---- Campañas: flechas de frente ---- */
.front-arrow-wrap { background: none; border: none; }
.front-arrow { width: 28px; height: 28px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.front-list { list-style: none; margin: 0 0 12px; padding: 0; }
.front-list li { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; font-size: 12.5px; line-height: 1.4; }
.front-list small { display: block; color: var(--text-dim); font-size: 11px; }
.front-swatch { flex: 0 0 22px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 1.5px rgba(20,17,13,0.7); }
.front-swatch.dashed { background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px); box-shadow: none; }
.route-battle {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 2px;
  border-radius: 50%; background: var(--danger); border: 2px solid #100d09; font-size: 12px; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.route-stop-marker.is-current .route-battle { box-shadow: 0 0 0 2px var(--bone), 0 0 0 4px var(--panel-bg); }
.route-stop-name small { color: var(--text-dim); font-weight: 400; }

/* ---- Popups: caja de descripción + fuentes (mismo criterio que el panel de campañas) ---- */
.leaflet-popup-content .pop-box {
  background: var(--panel-bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 0;
}
.leaflet-popup-content .pop-box p { margin: 0; }
.leaflet-popup-content .pop-desc { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.leaflet-popup-content .pop-sources { margin-top: 7px !important; font-size: 11px; line-height: 1.45; color: var(--text-dim); }
.leaflet-popup-content .pop-desc + .pop-sources { margin-top: 7px; }
.leaflet-popup-content .pop-sources a { color: var(--accent); }

.debate-position .debate-more { margin: 4px 0 0; font-size: 12px; }
.debate-position .debate-more a { color: var(--accent); text-decoration: none; font-weight: 600; }
.debate-position .debate-more a:hover { text-decoration: underline; }

#debate-positions { margin: 0 0 14px; }
#debate-positions .debate-more { margin: 0; font-size: 13px; }
#debate-positions .debate-more a { color: var(--accent); text-decoration: none; font-weight: 600; }
#debate-positions .debate-more a:hover { text-decoration: underline; }

/* Enlaces dentro de los textos del modal de bienvenida: sin esta regla salían con el azul
   por defecto del navegador, ilegible sobre el fondo oscuro. */
.intro-modal-tips a { color: var(--accent-2); text-decoration: underline; }
.intro-modal-tips a:hover { color: var(--bone); }