/* ============================================================
   MEMOVIAJE v3.0.0 — Experiencia narrativa (TripHero, DayNavigator,
   capítulos de día, StopMoment)
   ============================================================
   Mobile-first de verdad (§26 del encargo): toda regla base es para 375px;
   las @media (min-width) SOLO añaden lo que el ancho de más permite, nunca
   comprimen un diseño de escritorio. Usa `--mv-*` de tokens.3.0.0.css — no
   declara ningún color/espaciado/radio a mano.

   Fichero nuevo, no toca styles.2.6.5.css ni styles.2.8.1.css: la ruta de
   prueba `/viaje/:id/v3` es la única que lo carga (ver app.html). Cuando el
   prototipo pase el gate visual y se promueva a `/viaje/:id`, este fichero
   se re-versiona a un nombre estable de producción — no antes.
   ============================================================ */

@import url("tokens.3.0.0.css");

/* ---------------- Neutralizar el padding asimétrico de `main` ----------------
   `main` (styles.2.6.5.css:260-262) reserva 112px a la derecha frente a 32px
   a la izquierda a partir de 1000px, para el rail lateral de días de la vista
   clásica (`.dia-barra-inferior` en modo rail). Esta ruta no tiene ese rail
   (lo sustituye `.day-nav-root`, que no es lateral) — sin esto, el prototipo
   completo quedaba desplazado a la izquierda en escritorio, con un hueco
   enorme a la derecha: mismo bug de fondo que ya se documentó en
   `.hero-viaje`/`.panel-dia` (styles.2.6.5.css ~601-629), aquí evitado de raíz
   (padding a cero, cada componente narrativo gestiona su propio ancho/centrado
   vía --mv-content-max) en vez de compensado con un cálculo de margen. */
body.vista-narrativa main {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ---------------- TripHero — portada cinematográfica (§10-11) ---------------- */

/* 78vh y no 100vh a propósito: tiene que asomar el principio del primer
   capítulo para que se vea que hay más abajo. Ojo con subirlo — la barra de días
   va justo detrás del hero, y cuanto más alto es esto, más tarda en descubrirse
   que existe navegación entre días. */
.trip-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: linear-gradient(135deg, var(--mv-color-primary), var(--mv-color-text));
  color: #fff;
  border-radius: 0;
}

.trip-hero-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.trip-hero.con-foto::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--mv-scrim);
}

/* `env(safe-area-inset-top)` da el notch/Dynamic Island ESTÁTICO, pero no
   crece cuando hay una Live Activity activa (marcador de un partido, etc.):
   iOS no se lo cuenta a Safari, así que ningún cálculo con esa variable
   puede preverlo. Reportado 19/09/2026 con el botón tapado por un marcador
   de fútbol en directo — no hay forma determinista de evitarlo del todo
   desde CSS, así que se sube el margen fijo (12px→48px) como colchón para
   el caso típico, y además "Más → Abrir Editar" lleva al MISMO sitio
   (mas-tabs.2.9.0.js) sin depender nunca de esta esquina — ese es el
   camino que no falla si esto se tapa igualmente con una Live Activity más
   alta de lo normal. */
.trip-hero-mas {
  position: absolute; top: calc(var(--mv-safe-top) + 48px); right: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: var(--mv-radius-pill); border: 0;
  background: rgba(20, 14, 11, .4); color: #fff;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.trip-hero-mas:hover, .trip-hero-mas:focus-visible { background: rgba(20, 14, 11, .7); }

/* Botón de volver de la portada (bug UX confirmado 22/09/2026: la portada no
   tenía ninguna forma reconocible de volver atrás). Mismo patrón visual que
   `.trip-hero-mas` (círculo translúcido oscuro, mismo offset de
   `--mv-safe-top`) pero en la esquina izquierda, para quedar bien
   diferenciado del sello "MEMOVIAJE" de la barra superior y no solapar con
   `.trip-hero-sutil`/las caras de personas, que viven más abajo en
   `.trip-hero-txt`. */
.trip-hero-atras {
  position: absolute; top: calc(var(--mv-safe-top) + 48px); left: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: var(--mv-radius-pill); border: 0;
  background: rgba(20, 14, 11, .4); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.trip-hero-atras:hover, .trip-hero-atras:focus-visible { background: rgba(20, 14, 11, .7); }

.trip-hero-txt {
  position: relative; z-index: 2;
  padding: var(--mv-space-xl) var(--mv-space-md) var(--mv-space-lg);
}

.trip-hero-insignia {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  opacity: .85; margin-bottom: var(--mv-space-sm);
}

.trip-hero-nombre {
  font-family: var(--mv-font-display);
  font-size: clamp(1.9rem, 1.5rem + 3vw, 3.2rem);
  font-weight: 600; line-height: 1.05; margin: 0 0 var(--mv-space-sm);
  text-wrap: balance;
}

/* Fase 2 (gate visual), reparación #1: un solo tratamiento para fechas+estado
   fusionados (antes eran 2 líneas casi redundantes: "7 AGO → 22 AGO" y
   "Viaje completado el 22/08/2026"). */
.trip-hero-contexto {
  font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  opacity: .92; margin-bottom: var(--mv-space-sm);
}

.trip-hero-primaria {
  font-family: var(--mv-font-display);
  font-size: 1.15rem; font-weight: 600; margin-bottom: 2px;
}

/* Única línea sutil para paradas/fotos/personas — antes eran 2 bloques
   (secundaria + personas) con el mismo peso visual pero separados. */
.trip-hero-sutil {
  font-size: .78rem; opacity: .8; line-height: 1.5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
}
/* Separador "·" pintado por CSS, no como glifo en el texto: un lector de
   pantalla leía "punto medio" entre cada dato (auditoría 26/09/2026).
   Escopado a los HIJOS DIRECTOS de `.trip-hero-sutil` — si no, también
   pintaría un "·" entre `.trip-hero-caras` y el <span> de nombres dentro
   de `.trip-hero-personas`, que son hermanos anidados, no datos distintos. */
.trip-hero-sutil > span + span::before { content: "·"; margin-right: 10px; }
/* `white-space: nowrap` aquí (quitado 20/09/2026) forzaba TODA la lista de
   nombres a una sola línea sin cortes — con 7 viajeros ("Aina Giral, Andrés,
   Hugo, Jaume, Jordi, Mario, Martina") quedaba amontonado o se salía del
   hero en pantallas normales. Solo las CARAS (los círculos) necesitan ir
   pegadas entre sí; los nombres, como cualquier texto, pueden partirse de
   línea con normalidad. */
.trip-hero-personas { text-transform: capitalize; display: inline-flex; align-items: center; }

/* Círculos con la inicial de cada viajero (v3.1.0). Solapados como en
   cualquier lista de participantes: ocupan poco y se leen como "gente", no
   como otro dato más. Van SIN foto a propósito — ver la nota en
   trip-hero.3.0.0.js: las personas no tienen foto guardada, y poner una
   inventada sería justo lo que este producto no hace. */
/* `opacity: 1` a propósito: la línea sutil va al 80% para no competir con el
   nombre del viaje, pero las caras a ese 80% se apagaban tanto que no se leía
   la inicial. La gente del viaje no es un dato de relleno. */
.trip-hero-caras { display: inline-flex; align-items: center; margin-right: 6px; opacity: 1; }
.trip-hero-cara {
  width: 22px; height: 22px; border-radius: var(--mv-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .22);
  border: 1.5px solid rgba(255, 255, 255, .7);
  color: #fff; font-size: .68rem; font-weight: 700; line-height: 1;
  backdrop-filter: blur(2px);
}
.trip-hero-cara + .trip-hero-cara { margin-left: -7px; }
/* El "+N" de gente que no cabe en la fila: fondo sólido, no translúcido como
   las iniciales, para que se lea de un vistazo que es un recuento y no una
   persona más. */
.trip-hero-mas-caras {
  background: rgba(0, 0, 0, .55);
  font-size: .6rem;
}

.trip-hero-empezar {
  position: relative; z-index: 2;
  align-self: center;
  margin: 0 0 calc(var(--mv-space-lg) + var(--mv-safe-bottom));
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff; border-radius: var(--mv-radius-lg);
  padding: 10px 18px; font-size: .85rem; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(3px);
}
.trip-hero-empezar svg { width: 15px; height: 15px; transform: rotate(90deg); }
.trip-hero-empezar:hover { background: rgba(255, 255, 255, .3); }

@media (min-width: 900px) {
  .trip-hero { min-height: 62vh; }
  .trip-hero-txt { max-width: var(--mv-content-max); margin: 0 auto; width: 100%; box-sizing: border-box; }
}

/* Monitor de escritorio normal (reportado 20/09/2026): 62vh en un monitor de
   1080p+ sigue siendo ~650px+ de foto — "Día 1" y el resto del contenido
   quedaban fuera de la pantalla sin hacer scroll. `vh` crece sin límite con
   el alto de pantalla; aquí se pone además un tope en `px` que no depende
   del alto del monitor, solo a partir de 1200px de ANCHO (no se toca en
   tablet/móvil en vertical, por altos que sean). */
@media (min-width: 1200px) {
  .trip-hero { min-height: 62vh; max-height: 560px; }
}

/* ---------------- DayNavigator — navegación única de días (§25) ---------------- */

/* El `position: sticky` de aquí estuvo MUERTO del 06 al 08/09/2026 y nadie lo
   vio leyendo este fichero: lo anulaba `overflow-x: hidden` en `body`
   (styles.2.6.5.css), que convierte a `body` en contenedor de scroll y deja el
   sticky sin recorrido contra el que calcularse. La barra se iba con el
   documento, así que al saltar a un día quedaba por encima del hero de 78vh y
   ya no había forma de volver a otro. Ver el comentario largo de esa regla. */
.day-nav-root {
  /* Debajo de la cabecera, NO en el mismo sitio.
     `header .barra` es sticky en `top: 0` con z-index 600. Con `top: 0` aquí, las
     dos se pegaban al mismo punto y esta quedaba TAPADA por la cabecera: la barra
     de días desaparecía al hacer scroll. `--mv-header-h` la mide en vivo `app.js`
     (el botón «atrás» ensancha la cabecera al navegar, así que no vale un número
     fijo). El respaldo de 52px es lo medido en un iPhone de 390 px el 08/09/2026. */
  position: sticky; top: var(--mv-header-h, 52px); z-index: 50;
  background: var(--mv-color-background);
  border-bottom: 1px solid var(--mv-color-border);
}
/* Sombra solo cuando está pegada de verdad, para que se lea como una capa por
   encima del contenido y no como parte de él. `animation-timeline: view()` no
   está en Safari todavía, así que la pone `viaje-narrativo` con una clase. */
.day-nav-root.pegada {
  box-shadow: var(--mv-shadow-md);
}

/* Cuánto llevas del viaje. Existía en la vista clásica —«Día 4 de 22» con su
   barra— y se perdió al pasar a la narrativa; Andrés lo echó de menos con esas
   palabras: «no ves la barra de días o la evolución de los días». */
.day-nav-avance {
  height: 2px;
  background: var(--mv-color-border);
}
.day-nav-avance-barra {
  height: 100%;
  background: var(--mv-color-primary);
  /* Acompaña al scroll sin arrastrarse: si tardara más, al saltar de día se
     vería la barra persiguiendo al contenido. */
  transition: width .25s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .day-nav-avance-barra { transition: none; }
}

.day-nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--mv-content-max); margin: 0 auto;
  padding: var(--mv-space-sm) var(--mv-space-md);
}

.day-nav-flecha {
  width: 36px; height: 36px; border-radius: var(--mv-radius-pill); border: 1px solid var(--mv-color-border-2);
  background: var(--mv-color-surface); color: var(--mv-color-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex: none;
}
.day-nav-flecha svg { width: 16px; height: 16px; }
.day-nav-flecha-atras svg { transform: scaleX(-1); }
.day-nav-flecha:disabled { opacity: .3; cursor: default; }
.day-nav-flecha:not(:disabled):hover { background: var(--mv-color-surface-2); }

.day-nav-centro {
  flex: 1 1 auto; min-width: 0; max-width: 240px; text-align: center;
  background: var(--mv-color-surface-2); border: 1px solid var(--mv-color-border);
  border-radius: var(--mv-radius-lg); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px var(--mv-space-md);
}
.day-nav-centro:hover:not(:disabled) { background: var(--mv-color-border); }
.day-nav-centro:disabled { cursor: default; background: none; border-color: transparent; }
/* Fase 2 (gate visual), reparación #2: el bloque central no tenía ninguna
   señal de que fuera interactivo (nada lo distinguía de una etiqueta suelta)
   — ahora es una "pill" con fondo/borde, y el chevron gira 180° al abrir el
   selector, como cualquier <select>/acordeón reconocible. */
.day-nav-centro-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.day-nav-centro svg {
  width: 14px; height: 14px; flex: none; color: var(--mv-color-text-secondary);
  transform: rotate(90deg); transition: transform .15s; /* "flecha" apunta a la derecha de base: +90° = abajo */
}
.day-nav-centro[aria-expanded="true"] svg { transform: rotate(270deg); } /* abajo + 180° = arriba, "abierto" */
.day-nav-actual {
  font-family: var(--mv-font-display); font-weight: 600; font-size: 1rem;
  color: var(--mv-color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.day-nav-total { font-size: .7rem; color: var(--mv-color-text-secondary); }

.day-nav-selector {
  max-width: var(--mv-content-max); margin: 0 auto;
  display: flex; gap: var(--mv-space-sm); overflow-x: auto;
  padding: 0 var(--mv-space-md) var(--mv-space-sm);
}
.day-nav-item {
  flex: none; width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.day-nav-item img, .day-nav-item-vacio {
  width: 52px; height: 52px; border-radius: var(--mv-radius-pill); object-fit: cover;
  border: 2px solid transparent;
  background: var(--mv-color-surface-2);
}
.day-nav-item.activo img, .day-nav-item.activo .day-nav-item-vacio {
  border-color: var(--mv-color-primary);
}
.day-nav-item-etq { font-size: .68rem; color: var(--mv-color-text-secondary); }
.day-nav-item.activo .day-nav-item-etq { color: var(--mv-color-text); font-weight: 600; }

/* ---------------- Capítulo de día (§12) ---------------- */

.dia-capitulo {
  max-width: var(--mv-content-max); margin: 0 auto;
  padding: var(--mv-space-3xl) var(--mv-space-md) var(--mv-space-lg);
  scroll-margin-top: 64px; /* altura aprox. de .day-nav-root sticky */
}

.dia-capitulo-cabecera { margin-bottom: var(--mv-space-lg); }

.dia-capitulo-numero {
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  color: var(--mv-color-primary); margin-bottom: 4px;
}

.dia-capitulo-titulo {
  font-family: var(--mv-font-display);
  font-size: clamp(1.5rem, 1.3rem + 1.5vw, 2.1rem);
  font-weight: 600; margin: 0 0 4px; text-wrap: balance;
  color: var(--mv-color-text);
}

.dia-capitulo-fecha {
  font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  color: var(--mv-color-text-secondary); margin-bottom: 2px;
}

.dia-capitulo-cifras { font-size: .8rem; color: var(--mv-color-text-secondary); }

/* EL RELATO DEL DÍA (punto 7: «me gusta muchísimo más su formato, más limpio y
   fácil de leer»).
   Lo que hace legible el de Polarsteps es la MEDIDA DE LÍNEA, no la tipografía:
   texto de lectura en una columna estrecha. De ahí el `max-width` en `ch`, que
   es la unidad que mide caracteres — 62 es el ancho clásico de lectura cómoda,
   y en un móvil de 390 px no llega a aplicarse, así que no estorba.
   Y `text-wrap: pretty` para que no quede una palabra sola en la última línea,
   que es lo que hace que un párrafo corto parezca descuidado. */
.dia-relato {
  max-width: 62ch;
  margin: 0 auto 18px;
  padding: 0 var(--gap-md, 16px);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--mv-color-text, inherit);
  text-wrap: pretty;
}

/* «Leer más» va DENTRO del párrafo, en línea con el texto: un botón debajo se
   lee como una acción sobre el día entero, y esto solo despliega el texto. */
.dia-relato-mas {
  display: inline;
  border: 0;
  padding: 0;
  margin-left: 4px;
  background: none;
  font: inherit;
  color: var(--mv-color-accent, #b4472e);
  text-decoration: underline;
  cursor: pointer;
}
.dia-relato-mas:hover,
.dia-relato-mas:focus-visible { text-decoration: none; }


/* --- Mini-mapa del recorrido del día (§13) ---
   Pieza de contexto, no pantalla de exploración: bajo (no cuadrado), sin
   controles y sin sombra propia — tiene que leerse como una ilustración del
   capítulo, no como otro mapa que compite con la pestaña Mapa. */
.dia-capitulo-mapa {
  height: 140px;
  margin-top: var(--mv-space-md);
  border-radius: var(--mv-radius-md);
  overflow: hidden;
  background: var(--mv-color-surface-2);
}
@media (min-width: 900px) { .dia-capitulo-mapa { height: 170px; } }
/* Sin cursor de "se puede arrastrar": en compacto no se puede, y ofrecerlo
   sería mentir sobre lo que hace. */
.dia-capitulo-mapa .leaflet-container { cursor: default; }
.pin-mapa-mini {
  background: var(--mv-color-primary);
  border: 2px solid #fff;
  border-radius: var(--mv-radius-pill);
  box-shadow: var(--mv-shadow-sm);
}

.dia-capitulo-momentos {
  display: flex; flex-direction: column; gap: var(--mv-space-lg);
  margin-top: var(--mv-space-lg);
}

/* ---------------- StopMoment — variantes (§14/16-17) ---------------- */

.stop-moment { position: relative; }

.stop-moment-editar {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 32px; height: 32px; border-radius: var(--mv-radius-pill); border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.stop-moment-editar svg { width: 16px; height: 16px; }

.stop-moment-hora {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: 2px;
}
.stop-moment-lugar {
  font-family: var(--mv-font-display); font-size: 1.05rem; font-weight: 600;
  margin: 0 0 4px; line-height: 1.3;
}
.stop-moment-descripcion, .stop-moment-nota {
  font-size: .82rem; line-height: 1.45; margin: 0;
}
.stop-moment-nota { margin-top: 4px; }

/* --- variante "hero": foto a toda anchura, texto encima (v2.9.8 heredado) --- */
.stop-moment-hero {
  border-radius: var(--mv-radius-md); overflow: hidden;
  min-height: 260px;
  background: linear-gradient(135deg, var(--mv-color-primary), var(--mv-color-text));
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
}
.stop-moment-hero .stop-moment-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stop-moment-hero.con-foto::after { content: ""; position: absolute; inset: 0; background: var(--mv-scrim); }
.stop-moment-hero .stop-moment-txt { position: relative; z-index: 2; padding: var(--mv-space-md); }
.stop-moment-hero .stop-moment-editar { background: rgba(20, 14, 11, .45); color: #fff; }
.stop-moment-hero .stop-moment-editar:hover { background: rgba(20, 14, 11, .75); }
.stop-moment-pila {
  display: flex; gap: 4px; margin-top: var(--mv-space-sm);
}
.stop-moment-pila img {
  width: 40px; height: 40px; border-radius: var(--mv-radius-sm); object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .5);
}

/* --- variante "galeria": mosaico de 4+ fotos --- */
.stop-moment-galeria {
  background: var(--mv-color-surface); border: 1px solid var(--mv-color-border);
  border-radius: var(--mv-radius-md); padding: var(--mv-space-md);
  color: var(--mv-color-text);
}
.stop-moment-galeria .stop-moment-editar { background: var(--mv-color-surface-2); color: var(--mv-color-text); }
.stop-moment-galeria-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: var(--mv-space-md); border-radius: var(--mv-radius-sm); overflow: hidden;
}
.stop-moment-galeria-grande { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; object-fit: cover; width: 100%; height: 100%; }
.stop-moment-galeria-grid img:not(.stop-moment-galeria-grande) { aspect-ratio: 1; object-fit: cover; width: 100%; height: 100%; }
.stop-moment-galeria .stop-moment-lugar, .stop-moment-galeria .stop-moment-hora,
.stop-moment-galeria .stop-moment-descripcion, .stop-moment-galeria .stop-moment-nota {
  color: var(--mv-color-text);
}
.stop-moment-galeria .stop-moment-hora { color: var(--mv-color-primary); }

/* --- variantes "foto-texto" / "texto-foto": composición lado a lado --- */
.stop-moment-foto-texto, .stop-moment-texto-foto {
  display: flex; flex-direction: column; gap: var(--mv-space-md);
  background: var(--mv-color-surface); border: 1px solid var(--mv-color-border);
  border-radius: var(--mv-radius-md); padding: var(--mv-space-md);
  color: var(--mv-color-text);
}
.stop-moment-foto-texto .stop-moment-editar,
.stop-moment-texto-foto .stop-moment-editar { background: var(--mv-color-surface-2); color: var(--mv-color-text); }
.stop-moment-lado-foto {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--mv-radius-sm);
}
.stop-moment-lado-txt .stop-moment-hora { color: var(--mv-color-primary); }

@media (min-width: 700px) {
  .stop-moment-foto-texto, .stop-moment-texto-foto { flex-direction: row; align-items: center; }
  .stop-moment-texto-foto { flex-direction: row-reverse; }
  .stop-moment-lado-foto { width: 45%; aspect-ratio: 1; flex: none; }
  .stop-moment-lado-txt { flex: 1 1 auto; }
}

/* --- variante "silencio": momento breve, sin foto --- */
.stop-moment-silencio {
  padding: var(--mv-space-sm) var(--mv-space-md);
  border-left: 2px solid var(--mv-color-border-2);
  color: var(--mv-color-text-secondary);
}
.stop-moment-silencio .stop-moment-lugar { color: var(--mv-color-text); font-size: .95rem; }
.stop-moment-silencio .stop-moment-editar { background: var(--mv-color-surface-2); color: var(--mv-color-text-secondary); }

/* --- variante "mapa": placeholder de Fase 1 (mini-mapa real en Fase 3) --- */
.stop-moment-mapa {
  padding: var(--mv-space-md);
  background: var(--mv-color-surface-2); border-radius: var(--mv-radius-md);
  color: var(--mv-color-text);
}
.stop-moment-mapa .stop-moment-editar { background: var(--mv-color-surface); color: var(--mv-color-text); }
.stop-moment-mapa-marcador {
  width: 36px; height: 36px; border-radius: var(--mv-radius-pill);
  background: var(--mv-color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--mv-space-sm);
}
.stop-moment-mapa-marcador svg { width: 18px; height: 18px; }
.stop-moment-mapa .stop-moment-hora { color: var(--mv-color-primary); }

/* --- "Ver momento" dentro del globo de Leaflet (§19) ---
   `.globo-mapa` es markup LEGACY (diarioMapa.2.6.5.js/styles.2.6.5.css) —
   este enlace es la única pieza nueva, opcional (`verMomentoHref`), así que
   vive aquí junto al resto de CSS v3 en vez de tocar el fichero legacy. */
.globo-mapa .ver-momento {
  display: block; margin-top: 6px; font-size: .78rem; font-weight: 600;
  color: var(--mv-color-primary); text-decoration: none;
}
.globo-mapa .ver-momento:hover { text-decoration: underline; }

/* --- Destaque momentáneo al aterrizar desde "Ver momento" --- */
.stop-moment-destacado { animation: stop-moment-flash 2.2s ease-out; }
@keyframes stop-moment-flash {
  0%, 100% { box-shadow: none; }
  15% { box-shadow: 0 0 0 3px var(--mv-color-primary); }
}
@media (prefers-reduced-motion: reduce) { .stop-moment-destacado { animation: none; } }

/* ---------------- Fotos — pestañas Todas/Días/Lugares (§20) ---------------- */
/* `.galeria-grid`/`.galeria-item` son legacy (styles.2.6.5.css) y no se
   tocan; esto solo añade las pestañas y los títulos de grupo, con tokens
   v3 para que se sienta parte del mismo lenguaje. */
.galeria-tabs {
  display: flex; gap: var(--mv-space-sm); margin: var(--mv-space-md) 0;
  overflow-x: auto;
}
.galeria-tab {
  flex: none; padding: 8px 16px; border-radius: var(--mv-radius-lg);
  border: 1px solid var(--mv-color-border-2); background: var(--mv-color-surface);
  color: var(--mv-color-text-secondary); font-size: .82rem; font-weight: 600;
  cursor: pointer;
}
.galeria-tab.activo { background: var(--mv-color-primary); border-color: var(--mv-color-primary); color: #fff; }
.galeria-tab:not(.activo):hover { background: var(--mv-color-surface-2); }

.galeria-grupo { margin-bottom: var(--mv-space-lg); }
.galeria-grupo-titulo {
  font-family: var(--mv-font-display); font-size: 1rem; font-weight: 600;
  color: var(--mv-color-text); margin: 0 0 var(--mv-space-sm);
}

/* ---------------- Escritorio: por qué la navegación NO sube arriba ----------
   El rediseño de referencia (§28-29) pone Viaje/Mapa/Fotos/Recuerdo/Más
   arriba en escritorio, y se intentó en la v3.2.0 con solo CSS:
   `position: sticky; top: 0` sobre el mismo `#navbarBottom`.

   NO FUNCIONA, y la razón es de bulto: `sticky` no mueve un elemento, solo lo
   pega cuando el scroll lo alcanza EN SU SITIO del documento. Y ese nav lo
   pinta `perfil.2.6.5.js` al FINAL del DOM, detrás de `main` — así que se
   quedaba pegado al final de la página, es decir, invisible. Comprobado con
   captura a 1400px: la barra desaparecía entera. Una diferencia estética con
   el mockup no vale quedarse sin navegación en escritorio.

   Subirla de verdad exige mover el nodo en el DOM (JS), y ahí el riesgo real
   es volver a tener dos sistemas de navegación descoordinados — que es
   exactamente el lío que costó deshacer en v2.9. Queda anotado como trabajo
   con su propio diseño, no como un parche de CSS. */

/* ---------------- Mapa — modos Ruta/Días/Lugares (§19) ----------------
   Mismo lenguaje que las pestañas de Fotos: no son dos componentes
   distintos, es el mismo gesto de "mira lo mismo de otra manera". */
.mapa-modos { display: flex; gap: var(--mv-space-sm); margin-bottom: var(--mv-space-md); overflow-x: auto; }
.mapa-modo {
  flex: none; padding: 8px 16px; border-radius: var(--mv-radius-lg);
  border: 1px solid var(--mv-color-border-2); background: var(--mv-color-surface);
  color: var(--mv-color-text-secondary); font-size: .82rem; font-weight: 600; cursor: pointer;
}
.mapa-modo.activo { background: var(--mv-color-primary); border-color: var(--mv-color-primary); color: #fff; }
.mapa-modo:not(.activo):hover { background: var(--mv-color-surface-2); }
.mapa-grupo { margin-bottom: var(--mv-space-lg); }
.mapa-grupo-titulo {
  font-family: var(--mv-font-display); font-size: 1rem; font-weight: 600;
  color: var(--mv-color-text); margin: 0 0 var(--mv-space-sm);
}

/* ---------------- Recuerdo — cabecera "tres formas de conservar" (§21) ---------------- */
.recuerdo-cabecera { margin-bottom: var(--mv-space-lg); }
.recuerdo-cabecera-kicker {
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  color: var(--mv-color-primary); text-transform: uppercase; margin-bottom: 4px;
}
.recuerdo-cabecera-titulo {
  font-family: var(--mv-font-display); font-size: clamp(1.3rem, 1.15rem + 1vw, 1.7rem);
  font-weight: 600; color: var(--mv-color-text); margin: 0; text-wrap: balance;
}

/* El mapa del destino de un viaje planificado (punto 6, 09/09/2026).
   Una postal de dónde vas, no un mapa para navegar: sin controles y con una
   altura fija modesta. 200px y no 400 porque no hay nada que explorar — es una
   sola chincheta. */
.mapa-destino {
  height: 200px;
  margin: 4px auto 14px;
  max-width: 640px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--mv-color-border, rgba(0,0,0,.1));
}

/* QUE SE VEA QUE SE PUEDE PULSAR (09/09/2026).
   Andrés tocó las miniaturas y no pasaba nada — no había listener, pero tampoco
   nada que dijera que eran pulsables. Arreglado lo primero, hace falta lo
   segundo: una foto que abre algo tiene que parecerlo. */
.stop-moment [data-abrir] { cursor: pointer; }
.stop-moment-pila img[data-abrir],
.stop-moment-galeria-grid img[data-abrir] {
  transition: transform .12s ease, filter .12s ease;
}
.stop-moment-pila img[data-abrir]:hover,
.stop-moment-galeria-grid img[data-abrir]:hover { transform: scale(1.04); filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) {
  .stop-moment-pila img[data-abrir],
  .stop-moment-galeria-grid img[data-abrir] { transition: none; }
  .stop-moment-pila img[data-abrir]:hover,
  .stop-moment-galeria-grid img[data-abrir]:hover { transform: none; }
}

/* El recuento «3 fotos» es un botón, pero no tiene que parecer un botón: es
   texto que se puede pulsar. Subrayado punteado, que es la convención de
   «aquí hay algo más» sin gritar. */
.stop-moment-vertodas {
  border: 0; padding: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.stop-moment-vertodas:hover,
.stop-moment-vertodas:focus-visible { text-decoration: underline solid; }