/* MEMOVIAJE · identidad sello de pasaporte SOBRE PAPEL.
   Sustituye a la versión sobre carbón (histórica). Referencia de aire y
   luminosidad: FindPenguins/Polarsteps, con nuestros colores.
   Sensación: cuaderno de viaje moderno, no aplicación de logística. */

:root {
  /* «light dark» y no «light» a solas: forzar «light» era lo que dejaba a la
     app SIN modo oscuro (bug #2 del rediseño). Con los dos valores, el propio
     navegador pinta selector de fecha, desplegables y autorrelleno en el tono
     que toque según el sistema — antes SIEMPRE en claro, también de noche. */
  color-scheme: light dark;

  /* ---- Papel: TRES niveles, no dos.
     En oscuro «elevado» era más claro que el fondo. En claro, elevado es blanco
     y lo HUNDIDO (campos, barras, chips) tiene que ser MÁS OSCURO que la página,
     o desaparece. Confundir estos dos es lo que deja la app sin campos visibles. */
  --papel:   #FBFAF8;       /* fondo de página */
  --papel-2: #FFFFFF;       /* elevado: tarjetas, hojas, cabecera */
  --papel-3: #F3EFE8;       /* hundido: campos, barra de progreso, etiquetas */

  /* ---- Texto ---- */
  --texto:   #16120F;       /* 17,9:1 sobre papel */
  --texto-2: #6B6259;       /*  5,7:1 */
  --texto-3: #9A9086;       /* SOLO decorativo. Nunca información */

  /* ---- Líneas: dos pesos ---- */
  --linea:   #E8E3DA;       /* divisor interno */
  --linea-2: #DCD5C9;       /* borde de tarjeta y de control */

  /* ---- Terracota. El tono vivo es IDENTIDAD (rellenos, puntos, foco);
     para TEXTO sobre papel hace falta el hermano oscuro: el vivo da 4,27 y
     falla AA. Medido, no estimado. ---- */
  /* #BE4F37 y no #C4553D: con el vivo, el blanco encima daba 4,45 y fallaba AA
     en TODOS los botones. Este da 4,81. La diferencia no se distingue a simple
     vista y hace que el producto entero cumpla. */
  --tinta:        #BE4F37;
  --tinta-fuerte: #A8412C;  /* texto: enlaces, kicker · 5,8:1 */
  --tinta-suave:  #FBEDE9;  /* fondo teñido */
  --tinta-borde:  #F0CFC6;
  --tinta-hero:   #8E3B2A;  /* extremo oscuro del degradado de portada */

  /* ---- Alias de marca de valor FIJO (no cambian con el tema).
     Pedidos con este nombre exacto para superficies que NO son dark-mode-aware
     (p.ej. el panel gestion.html, que tiene su propio :root plano y no
     implementa @media prefers-color-scheme). Son idénticos a --tinta /
     --tinta-suave de arriba, pero fijos: --tinta SÍ cambia en oscuro
     (pasa a #7A2E2E, pensado solo para relleno/decoración, nunca texto — ver
     línea ~110). Por eso --memoviaje-dark, aunque hoy vale lo mismo que ese
     tono oscuro de --tinta, NO debe usarse como color de TEXTO sobre fondos
     oscuros: mismo problema de contraste ya medido en este fichero (2,11:1,
     no pasa AA). Para texto de marca en superficies claras (su uso previsto
     aquí) es correcto: #7A2E2E sobre #FBEDE9 da contraste de sobra. */
  --memoviaje-primary: #BE4F37;
  --memoviaje-dark:    #7A2E2E;
  --memoviaje-light:   #FBEDE9;

  /* ---- Oro. Igual: #C9922E sobre blanco da 2,75 y se usaba como texto. ---- */
  --oro:        #C9922E;    /* decorativo: filetes, anillo del sello */
  --oro-fuerte: #8A6A18;    /* texto · 4,8:1 */
  --oro-suave:  #FBF3DF;
  --oro-borde:  #EBD9AE;

  /* ---- Estados: siempre trío fondo/borde/texto ---- */
  --exito: #2F6B44; --exito-fondo: #EAF3EC; --exito-borde: #CBE0D0;
  --aviso: #7A5A12; --aviso-fondo: #FBF3DF; --aviso-borde: #EBD9AE;
  --error: #9B2C22; --error-fondo: #FCEDEA; --error-borde: #F0CFC6;
  --proc:  #4B3F86; --proc-fondo:  #F0EDFA; --proc-borde:  #D9D2F0;
  --ambar: #E8A33C;         /* relleno brillante: barra de sin conexión */
  /* El toast SIEMPRE va en el tono contrario al de la página, para destacar
     encima de cualquier pantalla. En claro eso es oscuro con letra clara. */
  --toast-fondo:  #241C18;
  --toast-texto:  #FBFAF8;

  --r-s: 10px;
  --r: 16px;
  --r-l: 22px;

  /* ---- Elevación. Sombra TEÑIDA con la tinta del texto, nunca negra: sobre
     papel cálido el negro puro se ve como suciedad. Dos capas: una de contacto
     que dibuja el borde y otra difusa que levanta. ---- */
  --sombra-s: 0 1px 2px rgba(22,18,15,.05), 0 2px 8px rgba(22,18,15,.05);
  --sombra:   0 2px 4px rgba(22,18,15,.04), 0 12px 28px rgba(22,18,15,.09);
  --sombra-l: 0 8px 16px rgba(22,18,15,.06), 0 28px 56px rgba(22,18,15,.14);
  --sombra-nav: 0 -6px 20px rgba(22,18,15,.06);
  --velo: rgba(38,30,24,.42);
  --foco: 0 0 0 3px rgba(196,85,61,.28);

  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------------- Modo oscuro ----------------
   No existía (bug #2 del rediseño): con --color-scheme forzado a «light», de
   noche la app quemaba los ojos igual que a mediodía. Se recupera la
   identidad ORIGINAL del proyecto —carbón, tinta oscura, oro, crema— de antes
   de pasar a «sello sobre papel», y se redefinen aquí los MISMOS nombres de
   variable: cada regla del CSS que ya existe cambia de tono sola, sin tocarla.

   Cifras de contraste reales (fórmula WCAG de luminancia relativa), no a ojo:
     texto crema #EFE6CF sobre papel #0D0B09   → 15,80:1
     texto crema #EFE6CF sobre papel-2 #1E1916 → 14,01:1
     texto-2 #B4A990 sobre papel               →  8,44:1
     texto-2 #B4A990 sobre papel-2             →  7,48:1
     tinta-fuerte #D4746A (enlaces) sobre papel   → 6,09:1
     tinta-fuerte #D4746A sobre papel-2           → 5,40:1
     oro-fuerte #D3A64A (kicker) sobre papel      → 8,72:1
     oro-fuerte #D3A64A sobre papel-2             → 7,73:1
   Todas por encima de 4,5:1 (AA texto normal) con margen: la tinta y el oro
   BASE (#7A2E2E y #A67C2E) se quedan solo para relleno/foco/decoración —igual
   que en claro— porque como texto sobre negro dan 2,11:1 y 5,19:1: el primero
   no pasa ni de lejos, así que ninguno de los dos se usa para letra. */
@media (prefers-color-scheme: dark) {
  :root {
    --papel:   #0D0B09;   /* fondo de página: carbón */
    --papel-2: #1E1916;   /* elevado: en oscuro, más CLARO que la página — así se nota que flota */
    --papel-3: #171310;   /* hundido: entre los dos anteriores */

    --texto:   #EFE6CF;   /* crema · 15,80:1 / 14,01:1 */
    --texto-2: #B4A990;   /*  8,44:1 /  7,48:1 */
    --texto-3: #6E6455;   /* decorativo, nunca información */

    --linea:   #241F19;
    --linea-2: #332C24;

    --tinta:        #7A2E2E;   /* identidad: solo relleno, puntos, gradiente — nunca texto */
    --tinta-fuerte: #D4746A;   /* texto: enlaces, kicker · 6,09:1 / 5,40:1 */
    --tinta-suave:  #2B1917;
    --tinta-borde:  #4A2723;
    --tinta-hero:   #4A1D18;

    --oro:        #A67C2E;     /* identidad: subrayado del número de día, anillo — nunca texto */
    --oro-fuerte: #D3A64A;     /* texto: kicker de marca · 8,72:1 / 7,73:1 */
    --oro-suave:  #241C0C;
    --oro-borde:  #4A3A18;

    --exito: #8FD3A0; --exito-fondo: #132316; --exito-borde: #1F3A26;
    --aviso: #E0B85C; --aviso-fondo: #241C0A; --aviso-borde: #3D2E10;
    --error: #E8948A; --error-fondo: #2A1210; --error-borde: #45201C;
    --proc:  #B3A8EA; --proc-fondo:  #1B1830; --proc-borde:  #302A52;
    /* Con --texto (crema, claro) escrito encima, el amarillo brillante de
       claro se volvía casi invisible: aquí es un ámbar OSCURO para que la
       letra clara vuelva a leerse (contraste real: 6,44:1). */
    --ambar: #6B4A1C;
    /* El toast se invierte respecto a la página para destacar: en oscuro
       eso significa un toast CLARO con letra oscura, al revés que en claro. */
    --toast-fondo: #EFE6CF;
    --toast-texto: #17130F;

    /* Sombra negra pura sobre un fondo ya casi negro no se ve: la elevación
       la da la propia diferencia de tono entre --papel y --papel-2, y aquí
       la sombra solo afina el borde de contacto. */
    --sombra-s: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
    --sombra:   0 2px 4px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.55);
    --sombra-l: 0 8px 16px rgba(0,0,0,.5),  0 28px 56px rgba(0,0,0,.65);
    --sombra-nav: 0 -6px 20px rgba(0,0,0,.5);
    --velo: rgba(0,0,0,.62);
    --foco: 0 0 0 3px rgba(212,116,106,.35);
  }
}

* { box-sizing: border-box; }
/* El atributo `hidden` debe ganar SIEMPRE: varias clases declaran display propio. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--papel);
  color: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------------- Cabecera ---------------- */
header {
  background: var(--papel-2);
  box-shadow: 0 1px 0 var(--linea);
  position: relative;
}
header .barra {
  position: sticky; top: 0; z-index: 600;
}
.barra { max-width: 640px; margin: 0 auto; padding: 11px 16px; display: flex; align-items: center; gap: 12px; }
.marca { display: flex; align-items: center; gap: 9px; cursor: pointer; border: 0; background: none; padding: 0; font: inherit; color: inherit; }
.marca svg { width: 30px; height: 30px; flex: none; }
.marca .nombre { font-weight: 900; letter-spacing: .14em; font-size: .82rem; color: var(--texto); font-family: var(--serif); }
.marca .nombre span { color: var(--oro-fuerte); }
/* Antes la flecha era muda: un "←" solo en un cuadrado de 38x38, sin decir A
   DÓNDE llevaba. `.con-texto` la ensancha (JS la añade en cuanto sabe el
   nombre del destino — ver `marco()`/`ponAtrasTexto()`); sin esa clase se
   queda en el mismo cuadrado de siempre, icono solo. */
.atras {
  border: 1px solid var(--linea-2); background: var(--papel-2); color: var(--texto);
  width: 38px; height: 38px; min-width: 38px; border-radius: 11px; cursor: pointer;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0; font-family: inherit; position: relative;
}
/* Auditoría visual Fase 2 (28/08): 38px de caja visible se queda 6px por
   debajo del mínimo táctil de 44px recomendado. Mismo truco que ya usa
   `.chip-accion` (área de toque invisible más grande que el dibujo): no
   cambia el tamaño visual del botón, solo lo que responde al toque. */
.atras::after { content: ""; position: absolute; inset: -3px; }
.atras-flecha { flex: none; line-height: 1; }
.atras-txt { display: none; }
.atras.con-texto {
  /* `min-width: 0` es lo que permite que, dentro del flex de `.barra`, el
     botón pueda encogerse por debajo del ancho de su texto — sin esto el
     "…" de abajo nunca llega a activarse y el nombre largo del viaje empuja
     el logo de MEMOVIAJE fuera de la cabecera en un móvil estrecho. */
  width: auto; min-width: 38px; max-width: 46vw; flex-shrink: 1; padding: 0 14px 0 11px;
}
.atras.con-texto .atras-txt {
  display: block; min-width: 0; font-size: .8rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cabecera-hueco { flex: 1; }
.salir { border: 0; background: none; color: var(--texto-2); font-size: .8rem; cursor: pointer; padding: 8px; position: relative; }
/* Auditoría visual Fase 2 (28/08): caja visible de 42×31px, 13px por debajo
   del mínimo táctil de 44px en las 6 pantallas móviles auditadas — presente
   en TODAS las pantallas de la app. Área de toque ampliada, invisible. */
.salir::after { content: ""; position: absolute; inset: -7px -4px; }
/* Auditoría visual Fase 2 (28/08): a 375px justo (no a 390 ni 430), la
   cabecera de pantallas con `atras-txt` largo ("Reel", "China 2026 · …")
   deja tan poco hueco a `.user-name` que el flex lo encoge a 2-4px: no llega
   ni a mostrar la elipsis, solo un trocito suelto de la primera letra
   flotando junto al avatar. Por debajo de 380px se oculta entero — el avatar
   + «Salir» ya bastan, que es justo el fallback que el propio comentario de
   `.user-button` (arriba) dice que debe pasar cuando no cabe. */
@media (max-width: 380px) {
  .user-name { display: none; }
}

/* ---------------- Estructura ---------------- */
/* Bug #1 del rediseño: sin ESTA regla, `main` medía 720px fijos en cualquier
   pantalla — en un monitor de 1830px de ancho quedaba una columna estrecha
   con medio metro de vacío a cada lado. A partir de ~1000px se permite más
   aire para leer, sin acercarse a los anchos de columna de dos vías (eso lo
   resuelve `.dias-lista` más abajo, rompiendo el ancho de `main` solo ahí). */
main { max-width: 720px; margin: 0 auto; padding: 28px 20px 104px; }
@media (min-width: 1000px) {
  main { max-width: 860px; padding: 40px 32px 120px; padding-right: calc(32px + 80px); }
}
.seccion { margin-top: 40px; }
.kicker { font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: var(--oro-fuerte); text-transform: uppercase; }

h1 {
  font-family: var(--serif);
  /* clamp() y no un tamaño fijo: crece con el ancho de la ventana entre el
     tamaño de móvil (2,15rem) y uno de titular de revista en escritorio
     (2,6rem), sin necesitar una media query aparte ni saltar de golpe. */
  font-size: clamp(2.15rem, 1.85rem + 1.1vw, 2.6rem);
  line-height: 1.08; letter-spacing: -.025em;
  margin: 10px 0 8px; font-weight: 600;
}
h2 { font-family: var(--serif); font-size: clamp(1.3rem, 1.18rem + .4vw, 1.5rem); font-weight: 600; margin: 34px 0 12px; }
h3 { font-size: .95rem; margin: 0 0 4px; font-weight: 600; }
p { margin: 6px 0; }
.mut { color: var(--texto-2); }
.pequeno { font-size: .84rem; }

/* ---------------- Tarjetas ---------------- */
.card {
  background: var(--papel-2); border: 1px solid var(--linea-2);
  border-radius: var(--r); padding: 20px; box-shadow: var(--sombra-s); margin-top: 12px;
}
.card.plano { box-shadow: none; }

/* Portada tipo revista (como el prototipo) */
.hero {
  min-height: 240px; border-radius: var(--r-l); overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--tinta-hero), var(--tinta));
  color: #fff; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--sombra); margin-top: 14px; text-decoration: none;
}
.hero.con-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 30%, rgba(20, 14, 11, .82));
}
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .txt { position: relative; z-index: 2; }
.hero .titulo { font-family: var(--serif); font-size: clamp(1.5rem, 1.34rem + .5vw, 1.85rem); font-weight: 600; line-height: 1.15; }
.hero .sub { font-size: .84rem; opacity: .92; margin-top: 3px; }
/* Las cifras, un peldaño por debajo del destino: informan, no encabezan. */
.hero .cifras-hero { font-size: .78rem; opacity: .8; margin-top: 5px; }
/* Quiénes vinieron, en el propio banner: la etiqueta se lee como un dato más
   del viaje (igual que las cifras), la lista de nombres en el peso normal. */
.hero .viajeros-hero { font-size: .78rem; margin-top: 7px; }
.hero .viajeros-hero .etq { opacity: .75; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; margin-right: 6px; }
.hero .viajeros-hero .lista { opacity: .95; }

/* Los viajes en rejilla cuando hay sitio. Dos columnas y no tres: la tarjeta
   vive de la foto, y a tres por fila en 1.400 px cada foto baja de 380 px de
   ancho y deja de reconocerse quién sale en ella. */
.rejilla-viajes { display: grid; gap: 14px; }

/* En pantallas grandes la SECCIÓN ENTERA se ensancha, título incluido.
   Ya se intentó sacar solo la rejilla y se descartó mirándolo: las tarjetas
   quedaban 190 px a la izquierda del título «En marcha» y parecía un fallo de
   maquetación. La objeción era correcta; la conclusión, no. Ensanchando el
   bloque completo no hay nada desalineado, y en un monitor de 1830 px cada
   portada pasa de 420 a 580 px de ancho: un 38% más de foto, que es de lo que
   vive esta tarjeta. Se queda en 1180 px, el mismo tope que `.dias-lista`, para
   que las dos pantallas grandes de la app respiren igual. */
@media (min-width: 1400px) {
  .bloque-viajes {
    margin-left: 50%; transform: translateX(-50%);
    width: 100vw; max-width: 1180px; box-sizing: border-box; padding: 0 32px;
  }
}
@media (min-width: 1100px) {
  .rejilla-viajes { grid-template-columns: 1fr 1fr; }
  /* El margen superior lo pone la rejilla con su `gap`: dejarlo en la tarjeta
     además metía 14 px extra solo en la primera fila. */
  .rejilla-viajes .hero { margin-top: 0; }
}
/* Se probó sacar la rejilla del ancho de `main` en pantallas grandes, con el
   truco de `.dias-lista` (centrar respecto al viewport). Se descartó mirándolo:
   las tarjetas quedaban 190 px más a la izquierda que el título «En marcha» y
   que el resto de la página, y una rejilla desalineada con su propio
   encabezado parece un fallo de maquetación, no un aprovechamiento del ancho.
   Ensanchar de verdad la pantalla en escritorio es otra tarea: hay que darle a
   `main` más ancho Y ponerle un tope de lectura a los párrafos y a los
   formularios, porque un campo de texto de 1.100 px es peor que uno de 700.
   Queda anotado como pendiente, no disfrazado con un parche. */

/* ---------------- Botones ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--tinta); color: #fff; font-weight: 700;
  border: 1px solid transparent; border-radius: 13px;
  padding: 14px 18px; font-size: .97rem; min-height: 46px;
  cursor: pointer; font-family: inherit; text-decoration: none; text-align: center;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.sec { background: var(--papel-2); color: var(--texto); border-color: var(--linea-2); }
.btn.fantasma { background: none; border-color: transparent; color: var(--tinta-fuerte); }
.btn.block { display: flex; width: 100%; margin-top: 14px; }
.btn:disabled { opacity: .55; cursor: default; }
/* El SVG de ico() no trae ancho ni alto propios (los pone el CSS de donde
   vive): sin esto, un icono nuevo dentro de un .btn se pintaría al tamaño por
   defecto del navegador —unos 300x150 px— y se llevaría el botón por delante. */
.btn svg { width: 18px; height: 18px; flex: none; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.acciones .btn { flex: 1 1 140px; }

/* ---------------- Formularios ---------------- */
label { display: block; font-size: .82rem; color: var(--texto-2); margin: 12px 0 5px; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=datetime-local], textarea, select {
  width: 100%; background: var(--papel-2); border: 1px solid var(--linea-2); color: var(--texto);
  border-radius: 11px; padding: 13px 14px; font-size: 1rem; font-family: inherit; min-height: 46px;
}
input:focus, textarea:focus { outline: 2px solid var(--tinta); outline-offset: 1px; box-shadow: var(--foco); border-color: transparent; }
textarea { min-height: 300px; font-family: var(--serif); font-size: 1.02rem; line-height: 1.7; }
/* `flex-wrap: wrap` es la salvaguarda: dos `<input type=date>` uno junto al
   otro no bajan de ~170px de ancho cada uno en Chromium (su control nativo no
   se comprime), así que en un móvil estrecho (viola QA visual: 375px y menos)
   340px+gap no cabía y desbordaba la página 16px hacia la derecha. Con wrap,
   si no caben en la misma línea pasan a apilarse — sin recortar nada. */
.fila { display: flex; gap: 10px; flex-wrap: wrap; }
.fila > * { flex: 1; }

/* Interruptores de compartición */
.check { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--linea); }
.check:last-child { border-bottom: 0; }
/* 44px reales: antes eran 22, la mitad del mínimo táctil. Se agranda el
   área pulsable con padding en la fila, no solo la casilla. */
.check { min-height: 44px; }
.check input { width: 24px; height: 24px; min-height: 24px; accent-color: var(--tinta); flex: none; }
.check .t { flex: 1; }
.check .t small { display: block; color: var(--texto-2); font-size: .8rem; }

/* Cierre de cada día en la línea temporal: lo que dio de sí, en números.
   Hundido y sin sombra a propósito — resume lo de arriba, no compite con ello. */
/* El pie del día. Era una caja beige con las cifras en oro a 1,6 rem —un widget
   de panel de control metido dentro de un recuerdo— y cuatro botones blancos
   iguales debajo. */
.dia-pie {
  margin: 14px 0 6px; padding: 16px 2px 4px;
  border-top: 1px solid var(--linea);
}
/* Los sitios PRIMERO y con peso: es lo que responde a «¿dónde estuvimos?».
   Antes iban de tercera línea en gris pequeño, debajo de las cifras. */
.dia-sitios {
  margin: 0 0 12px; font-family: var(--serif); font-size: 1.02rem;
  line-height: 1.35; color: var(--texto);
}
.dia-cifras { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 16px; }
.dia-cifras b {
  display: block; font-size: 1.12rem; font-weight: 700; line-height: 1.2;
  color: var(--texto); font-variant-numeric: tabular-nums;
}
/* Las cifras en el color del texto, no en oro: el oro es decorativo en este
   sistema, y a 1,6 rem se comía la pantalla entera. */
.dia-cifras span { font-size: .74rem; color: var(--texto-3); letter-spacing: .02em; }

.dia-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.acc {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  min-height: 40px; padding: 8px 14px; border-radius: 11px;
  color: var(--texto); background: var(--papel-2);
  border: 1px solid var(--linea-2); transition: border-color .15s, background .15s;
}
.acc svg { width: 17px; height: 17px; flex: none; }
.acc:hover { border-color: var(--tinta-borde); background: var(--tinta-suave); color: var(--tinta-fuerte); }
/* Una sola destacada: antes los cuatro botones pesaban lo mismo y no se sabía
   cuál era el que querías. */
.acc.destacada { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.acc.destacada:hover { background: var(--tinta-fuerte); border-color: var(--tinta-fuerte); color: #fff; }
.acc:disabled { opacity: .55; cursor: progress; }
/* El área táctil llega a 44 px aunque el botón se vea de 40. */
.acc::after { content: ""; position: absolute; }

.resumen-dia { background: var(--papel-3); border: 1px solid var(--linea);
  border-radius: var(--r-s); padding: 14px 16px; margin: 6px 0 8px; }
.resumen-dia .cifras-mini { margin: 0; }
.resumen-dia p { margin: 8px 0 0; }
.resumen-dia .btn { margin-top: 12px; width: 100%; }

/* Elección de caducidad del enlace. Botonera y no <select> porque las cuatro
   opciones caben a la vista: elegir "72 horas" no debería costar dos toques. */
.eleccion { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.eleccion button { flex: 1 1 auto; min-width: 82px; min-height: 44px; padding: 10px 12px;
  font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  background: var(--papel-2); color: var(--texto-2);
  border: 1px solid var(--linea-2); border-radius: 10px; }
.eleccion button[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }


/* ---------------- Línea temporal ---------------- */
/* El día, con su foto y su número.
   «Día 14» es como se recuerda un viaje; la fecha sola no dice nada dentro de
   diez años, así que va debajo y en pequeño. El trazo dorado detrás del número
   imita un subrayado a rotulador: da el aire de cuaderno sin añadir una fuente
   de escritura de 40 KB. Y la foto de fondo le pone cara a la jornada. */
.dia { margin: 28px 0 10px; }
.dia .txt { position: relative; z-index: 2; }
.dia .numero {
  position: relative; display: inline-block;
  font-family: var(--serif); font-size: 1.6rem; font-weight: 600;
  line-height: 1.1; z-index: 1;
}
.dia .numero::after {
  content: ""; position: absolute; left: -3px; right: -5px; bottom: 2px; height: 10px;
  background: rgba(201, 146, 46, .5); border-radius: 5px; z-index: -1;
  /* Ligeramente torcido, como un trazo hecho a mano y no una regla. */
  transform: rotate(-.7deg);
}
.dia .fecha { display: block; color: var(--texto-2); font-size: .84rem; margin-top: 5px; }
.dia .sitios { display: block; color: var(--texto-2); font-size: .8rem; margin-top: 3px; }

/* Con foto: el mismo tratamiento que la portada del viaje, y por el mismo
   motivo — encima hay una foto del usuario, así que el texto va sobre un
   degradado oscuro que garantiza el contraste sea cual sea la imagen. */
.dia.con-foto {
  position: relative; overflow: hidden; border-radius: var(--r);
  min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px; box-shadow: var(--sombra-s);
}
.dia.con-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dia.con-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 25%, rgba(20, 14, 11, .84));
}
.dia.con-foto .numero { color: #fff; }
.dia.con-foto .numero::after { background: rgba(201, 146, 46, .72); }
.dia.con-foto .fecha { color: rgba(255, 255, 255, .92); }
.dia.con-foto .sitios { color: rgba(255, 255, 255, .8); }
.dia::first-letter { text-transform: uppercase; }

/* ---- Barra de días clicable ----
   Referencia visual: los puntos de parada de Polarsteps. Una tira horizontal
   con un punto por día (con scroll si no caben todos); tocar uno abre esa
   jornada y hace scroll hasta ella, sin tener que bajar fila a fila por el
   acordeón. El día activo se marca en tinta; el resto queda en gris. */
.dia-barra {
  display: flex; gap: 2px; overflow-x: auto; align-items: flex-start;
  margin: 16px 0 6px; padding: 6px 4px 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.dia-barra::-webkit-scrollbar { display: none; }
.dia-marca {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 34px; border: 0; background: none; cursor: pointer; padding: 4px 0 0;
  font: inherit; color: var(--texto-3); position: relative;
}
/* La línea que une los puntos, de parada a parada, como una ruta dibujada. */
.dia-marca:not(:first-child)::before {
  content: ""; position: absolute; top: 10px; right: 50%; width: 100%;
  height: 2px; background: var(--linea-2); z-index: 0;
}
.dia-marca .punto {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--papel-2); border: 2px solid var(--linea-2);
  position: relative; z-index: 1; transition: background .15s, border-color .15s, transform .15s;
}
.dia-marca .n { font-size: .72rem; font-variant-numeric: tabular-nums; }
.dia-marca:hover .punto { border-color: var(--tinta-borde); }
.dia-marca.activo { color: var(--tinta-fuerte); font-weight: 700; }
.dia-marca.activo .punto { background: var(--tinta); border-color: var(--tinta); transform: scale(1.25); }
.dia-marca.activo:not(:first-child)::before,
.dia-marca.activo + .dia-marca::before { background: var(--tinta-borde); }

.dia-cuerpo { padding-top: 2px; }
/* Abierto, la foto grande del día ya no necesita el margen de arriba: la fila
   está justo encima. */
.dia-cuerpo > .dia { margin-top: 8px; }

/* El banner del viaje, al MISMO ancho que el panel del día y la barra de
   pills en escritorio (ver `.panel-dia` y `.dia-barra-inferior` más abajo):
   `main` se topa en 860px, y sin este ensanche el título del viaje quedaba
   metido hacia dentro respecto a su propio contenido. */
@media (min-width: 1000px) {
  .hero-viaje {
    margin-left: 50%; transform: translateX(-50%);
    width: 100vw; max-width: 1180px; box-sizing: border-box;
  }
}

/* Cambiar la portada, DESDE la portada. Antes había que abrir un día, abrir una
   foto y descubrir el botón de dentro. */
.cambiar-portada {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  /* En línea y con el icono a tamaño: al cambiar el emoji por un SVG, este se
     quedó sin medidas y heredó el tamaño por defecto del navegador. El botón
     pasó a ser un círculo enorme que se comía un tercio de la foto de portada. */
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  color: #fff; background: rgba(20, 14, 10, .55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  padding: 7px 13px; min-height: 34px;
}
/* Auditoría visual Fase 2 (28/08): 34px de caja visible, 10px corto del
   mínimo táctil de 44px. `position: absolute` ya la sitúa, así que el
   `::after` amplía el toque sin agrandar el chip sobre la foto. */
.cambiar-portada::after { content: ""; position: absolute; inset: -7px -4px; }
.cambiar-portada svg { width: 16px; height: 16px; flex: none; }
.cambiar-portada:hover { background: var(--tinta); border-color: var(--tinta); }
/* Sin foto, el hero es claro y el blanco sobre blanco no se ve. */
.hero:not(.con-foto) .cambiar-portada {
  color: var(--tinta-fuerte); background: var(--tinta-suave); border-color: var(--tinta-borde);
}
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--linea); }
.parada {
  position: relative; background: var(--papel-2); border: 1px solid var(--linea-2);
  border-radius: var(--r); padding: 15px 17px; margin-bottom: 11px; box-shadow: var(--sombra-s);
}
.parada::before {
  content: ""; position: absolute; left: -25px; top: 19px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--tinta); border: 2px solid var(--papel-2); box-shadow: 0 0 0 2px var(--linea);
}
.parada.sin-datos::before { background: var(--oro); }
.parada .lugar.pendiente { color: var(--texto-2); font-weight: 400; font-style: italic; }
.parada .meta { color: var(--texto-2); font-size: .82rem; margin-top: 2px; }
.parada .nota { margin-top: 7px; font-family: var(--serif); font-size: .95rem; color: var(--texto); }
/* Collage de la parada: UNA grande y las demás apiladas al borde.
   Antes eran seis cuadrados de 54 px en fila: con ese tamaño no se reconoce
   nada y, peor, todas pesan igual — no hay forma de saber cuál es la foto del
   momento. Referencia de la idea: FindPenguins. Aquí con nuestros radios,
   nuestro papel y sin solapar tanto. */
.parada .collage { position: relative; margin-top: 10px; }
.parada .collage .grande {
  display: block; width: 100%; height: 200px; object-fit: cover;
  border-radius: var(--r-s); border: 1px solid var(--linea);
}
.parada .collage .pila {
  position: absolute; right: 8px; bottom: 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.parada .collage .pila img,
.parada .collage .pila .mas {
  width: 52px; height: 52px; border-radius: 8px; object-fit: cover;
  /* Borde de papel, no gris: las miniaturas se apoyan sobre la foto grande y
     necesitan separarse de cualquier imagen que haya debajo. */
  border: 2px solid var(--papel-2); box-shadow: var(--sombra-s);
}
.parada .collage .pila .mas {
  display: grid; place-items: center; background: var(--papel-2);
  color: var(--texto-2); font-size: .8rem; font-weight: 700;
}
/* Una sola foto: sin pila y más baja, que no ocupe media pantalla por una foto. */
.parada .collage.sola .grande { height: 150px; }
/* El nombre y la nota SON los botones: se toca el contenido, no una barra.
   Se ven como texto y no como control, que es lo que son. */
.parada .lugar, .parada .nota, .parada .anadir-nota, .parada .collage {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.parada .lugar { font-weight: 600; min-height: 24px; }
.parada .lugar:hover, .parada .nota:hover { color: var(--tinta-fuerte); }
.parada .anadir-nota {
  margin-top: 7px; font-size: .84rem; color: var(--texto-2);
  border-bottom: 1px dashed var(--linea-2); width: auto; padding-bottom: 2px;
}
.parada .anadir-nota:hover { color: var(--tinta-fuerte); border-color: var(--tinta); }

/* Subir y quitar son raras: no pueden pesar lo mismo que el resto. Van dentro
   de un <details>, que es un menú sin una línea de JavaScript. */
.parada .mas-ops { margin-top: 8px; }
.parada .mas-ops summary {
  list-style: none; cursor: pointer; width: 44px; height: 32px;
  display: grid; place-items: center; color: var(--texto-3);
  border-radius: var(--r-s); letter-spacing: .1em; font-size: .9rem;
}
.parada .mas-ops summary::-webkit-details-marker { display: none; }
.parada .mas-ops summary:hover { color: var(--texto-2); background: var(--papel-3); }
.parada .mas-ops[open] summary { color: var(--texto-2); }
.parada .mas-ops button {
  display: block; width: 100%; text-align: left; margin-top: 6px;
  font-size: .84rem; padding: 11px 12px; min-height: 44px;
  border-radius: var(--r-s); border: 1px solid var(--linea-2);
  background: var(--papel-2); color: var(--texto-2); cursor: pointer; font-family: inherit;
}
/* El rojo de "peligro" es solo para quitar la parada: "Mover aquí" no borra
   nada y no debe avisar como si lo hiciera. */
.parada .mas-ops button[data-borra]:hover { color: var(--error); border-color: var(--error-borde); background: var(--error-fondo); }
/* Mover a una posición cualquiera del viaje, no solo subir de una en una:
   un número que empieza en la posición actual y un botón que la aplica. Vive
   dentro del mismo menú «···», así que hereda el espaciado de sus botones
   salvo la etiqueta, que aquí no necesita el margen pensado para el modal. */
.parada .mover-a label { margin: 0 0 5px; font-size: .78rem; }
.parada .mover-a .fila { margin-top: 0; }
.parada .mover-a input[type=number] { min-height: 44px; }
.parada .mover-a button { margin-top: 0; }
.parada .mover-a button:hover { color: var(--texto); border-color: var(--tinta); }

/* ---------------- Con quién viajas ---------------- */
.personas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.personas .persona {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 76px; padding: 8px 4px; cursor: pointer; font: inherit;
  background: var(--papel-2); border: 1px solid var(--linea-2);
  border-radius: var(--r-s); color: var(--texto);
}
.personas .persona img, .personas .persona .sinfoto {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--linea-2);
}
.personas .persona .sinfoto {
  display: grid; place-items: center; background: var(--papel-3);
  font-family: var(--serif); color: var(--oro-fuerte);
}
.personas .persona .n {
  font-size: .76rem; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
/* Elegido: el acento y un anillo, no solo un borde de 1 px que no se ve. */
.personas .persona[aria-pressed="true"] {
  border-color: var(--tinta); box-shadow: 0 0 0 2px var(--tinta-suave);
}
.personas .persona[aria-pressed="true"] img,
.personas .persona[aria-pressed="true"] .sinfoto { border-color: var(--tinta); }
.avatar-prev {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  margin-top: 10px; border: 1px solid var(--linea-2);
}

/* ---------------- Visor de fotos ----------------
   Oscuro a propósito: es lo único que no le roba color a una foto, y aquí no
   hay texto encima de la imagen que pueda volverse ilegible. */
.visor {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(14, 11, 9, .96);
  display: grid; place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}
.visor img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: var(--r-s);
  /* Sin transición al cambiar de foto: un fundido de 250 ms pasando doscientas
     fotos se convierte en la app entera yendo a medio gas. */
}
.visor .cerrar, .visor .nav {
  position: absolute; background: rgba(0, 0, 0, .42); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.visor .cerrar { top: max(14px, env(safe-area-inset-top)); right: 14px; font-size: 1.1rem; }
.visor .nav { top: 50%; transform: translateY(-50%); }
.visor .nav.prev { left: 10px; }
.visor .nav.sig { right: 10px; }
/* Los botones de portada, arriba y separados del contador: si estuvieran juntos
   se toca el que no se quiere al pasar fotos con el pulgar. */
.visor .elegir {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 14px;
  display: flex; gap: 8px; flex-wrap: wrap; max-width: calc(100% - 80px);
}
.visor .elegir button {
  background: rgba(0, 0, 0, .48); color: #fff; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px;
  padding: 9px 15px; min-height: 40px; font: inherit; font-size: .82rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.visor .elegir button:disabled { opacity: .5; }

.visor .cuenta {
  position: absolute; bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .82); font-size: .82rem;
  background: rgba(0, 0, 0, .42); padding: 6px 14px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Filtro por etiqueta dentro del visor: una fila de `.chip` (el mismo
   componente de las plantillas) bajo el botón de cerrar, con scroll
   horizontal porque un viaje analizado por Gemini puede traer quince
   etiquetas distintas y no todas caben en un móvil.
   Solo existe en el DOM si hay al menos una foto con etiqueta — si no,
   `visorFotos` no la pinta y no hace falta ocultar nada aquí. */
.visor .filtro-tags {
  position: absolute; left: 14px; right: 14px;
  top: calc(max(14px, env(safe-area-inset-top)) + 54px);
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.visor .filtro-tags::-webkit-scrollbar { display: none; }
.visor .filtro-tags .chip {
  flex: none; background: rgba(0, 0, 0, .48); color: #fff;
  border-color: rgba(255, 255, 255, .24); text-transform: capitalize;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.visor .filtro-tags .chip:hover { background: rgba(0, 0, 0, .64); color: #fff; }
.visor .filtro-tags .chip.activo { background: #fff; color: #14110d; border-color: #fff; }

/* Chips de contenido SOBRE la foto: lo que Gemini vio en ESA imagen
   ("playa", "catedral"…), no lo que hay en el resto del lote — por eso van
   pegados a la imagen y no a la barra de filtro de arriba. Solo lectura:
   sin cursor de botón ni manejador de clic. */
.visor .chips-foto {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 40px);
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 24px); pointer-events: none;
}
.visor .chips-foto .pastilla-tag {
  display: inline-block; background: rgba(0, 0, 0, .48); color: #fff;
  border: 1px solid rgba(255, 255, 255, .24); text-transform: capitalize;
  padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---------------- Etiquetas de estado (texto, no solo color) ---------------- */
.tag { display: inline-block; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--papel-3); color: var(--texto-2); border: 1px solid var(--linea-2); }
.tag.aviso { background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso-borde); }
.tag.ok { background: var(--exito-fondo); color: var(--exito); border-color: var(--exito-borde); }
.tag.proc { background: var(--proc-fondo); color: var(--proc); border-color: var(--proc-borde); }

/* ---------------- Estados globales ---------------- */
.vacio { text-align: center; padding: 34px 18px; color: var(--texto-2); background: var(--papel-2); border: 1px dashed var(--linea); border-radius: var(--r-l); margin-top: 14px; }
/* Emoji sustituidos por los mismos trazos de `ico()`: un 🧳 o un 🗺️ de estado
   vacío no es solo cosmético, es la primera cosa que ve alguien con un viaje
   recién creado — y ahí el tono de cada sistema quedaba especialmente suelto. */
.vacio .icono { color: var(--oro-fuerte); }
.vacio .icono svg { width: 30px; height: 30px; }
.cargando { color: var(--texto-2); padding: 26px 0; text-align: center; }

/* ---------------- Esqueletos de carga ----------------
   Sustituyen el «Cargando…» de texto en las tres pantallas grandes (viaje,
   diario, Reel). Antes, con una wifi de hotel lenta, ese único renglón se
   quedaba fijo varios segundos y parecía que la app se había colgado; ahora
   se dibuja la FORMA de lo que va a llegar —hueco de portada, filas de días,
   líneas de texto, tarjetas— y se nota que algo ya está en marcha. Respeta
   `prefers-reduced-motion` a través de la regla global de más abajo, que ya
   apaga toda animación del sitio. */
.sk-hero, .sk-fila, .sk-linea, .sk-hero-pieza, .sk-tarjeta {
  background: linear-gradient(100deg, var(--papel-3) 35%, var(--linea-2) 50%, var(--papel-3) 65%);
  background-size: 250% 100%;
  animation: sk-brillo 1.5s ease-in-out infinite;
}
.sk-hero { height: 220px; margin-top: 14px; border-radius: var(--r-l); }
.sk-fila { height: 84px; margin-top: 10px; border-radius: var(--r); }
.sk-caja { padding: 20px; border-radius: var(--r); background: var(--papel-2); border: 1px solid var(--linea-2); margin-top: 12px; }
.sk-caja .sk-linea { height: 13px; margin: 13px 0; border-radius: 6px; }
.sk-hero-pieza { height: 96px; margin: 18px 0 26px; border-radius: var(--r-l); }
.sk-tira { display: flex; gap: 14px; overflow: hidden; padding: 14px 2px 8px; }
.sk-tarjeta { width: 68vw; max-width: 280px; flex: none; height: 420px; border-radius: 18px; }
@keyframes sk-brillo { 0% { background-position: 250% 0; } 100% { background-position: -250% 0; } }
.aviso-caja { border-radius: 12px; padding: 13px 15px; margin-top: 12px; font-size: .88rem; display: flex; gap: 10px; align-items: flex-start; }
.aviso-caja.err { background: var(--error-fondo); border: 1px solid var(--error-borde); color: var(--error); }
.aviso-caja.info { background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); color: var(--aviso); }
.aviso-caja.priv { background: var(--exito-fondo); border: 1px solid var(--exito-borde); color: var(--exito); }
/* Indicador de grabación GPS: un punto que solo pulsa mientras llegan
   posiciones nuevas. La animación queda apagada por la regla global de
   prefers-reduced-motion de más abajo. */
.gps-estado { display: flex; align-items: center; gap: 8px; }
.gps-punto { width: 10px; height: 10px; border-radius: 999px; background: var(--linea-2); flex: none; transition: background .2s ease; }
.gps-punto.on { background: var(--error); animation: gps-pulso 1.4s ease-in-out infinite; }
@keyframes gps-pulso { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .5; } }
/* Pastilla "Grabando" de la cabecera: visible en CUALQUIER pantalla mientras
   se está grabando un recorrido, no solo en la de "Ubicaciones" — antes, salir
   de esa pantalla no dejaba ningún rastro visible de que seguía grabando. */
.gps-badge {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--error-borde);
  background: var(--error-fondo); color: var(--error); border-radius: 999px;
  padding: 5px 11px 5px 9px; font-size: .78rem; font-weight: 700; cursor: pointer; flex: none;
}
.gps-badge-punto { width: 8px; height: 8px; border-radius: 999px; background: var(--error); flex: none; animation: gps-pulso 1.4s ease-in-out infinite; }
@media (max-width: 420px) { .gps-badge-txto { display: none; } .gps-badge { padding: 7px; } }
.offline { position: sticky; top: 0; z-index: 700; background: var(--ambar); color: var(--texto); text-align: center; font-size: .8rem; padding: 6px; }

/* Barra de progreso de importación */
.progreso { height: 8px; background: var(--papel-3); border-radius: 999px; overflow: hidden; margin-top: 10px; border: 1px solid var(--linea); }
/* transform en vez de width: animar el ancho recalcula la maquetación en cada
   fotograma y con 60 fotos importándose eso se nota en el móvil. */
.progreso > div { height: 100%; background: var(--tinta); width: 100%;
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease-out; }

/* ---------------- Mapa ---------------- */
#map { height: 320px; border-radius: var(--r-l); border: 1px solid var(--linea); box-shadow: var(--sombra-s); margin-top: 12px; }

/* ---------------- El mapa ----------------
   Los marcadores llevan NÚMERO. Con veinte paradas, veinte círculos idénticos no
   cuentan un recorrido: hay que poder seguir el orden con la vista. */
.pin-mapa {
  background: var(--tinta); color: #fff; border: 2.5px solid #fff;
  border-radius: 50%; display: grid; place-items: center;
  font-size: .74rem; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(20, 16, 14, .35);
}
/* El globo, con la foto de la parada: es una app de fotos, y un mapa sin una sola
   foto desperdicia lo único que lo hace distinto de cualquier otro mapa. */
.globo-mapa { display: grid; gap: 3px; }
.globo-mapa img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 7px; margin-bottom: 4px; display: block;
}
.globo-mapa b { font-size: .92rem; }
.globo-mapa span { font-size: .76rem; color: var(--texto-2); }
/* Leaflet pinta su globo con sus colores; aquí manda la paleta de la app. */
.leaflet-popup-content-wrapper {
  background: var(--papel-2); color: var(--texto);
  border-radius: 12px; box-shadow: var(--sombra);
}
.leaflet-popup-tip { background: var(--papel-2); }
.leaflet-popup-content { margin: 10px 12px; }

/* ---------------- Diario ---------------- */
.diario-leido { font-family: var(--serif); font-size: 1.05rem; line-height: 1.75; }
.diario-leido h1 { font-size: 1.6rem; margin: 0 0 10px; }
.diario-leido h2 { font-size: 1.15rem; margin: 22px 0 6px; }
.diario-leido ul { padding-left: 20px; margin: 6px 0; }
.guardado { font-size: .78rem; color: var(--exito); }

/* ---------------- Navegación inferior del viaje ---------------- */
.nav-viaje {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 650;
  background: var(--papel-2); box-shadow: var(--sombra-nav);
  border-top: 1px solid var(--linea); display: flex;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.nav-viaje a {
  flex: 1; text-align: center; text-decoration: none; color: var(--texto-2);
  font-size: .74rem; padding: 7px 2px; border-radius: 11px; min-height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
/* Antes eran emoji (🗓️🗺️✍️✨🔗): cada sistema los dibuja con SU propio
   estilo y SUS colores —el 🗺️ de Windows no se parece al de iOS— y encima el
   navegador puede tardar en pintarlos, dejando un hueco en blanco medio
   segundo. Ahora son los mismos trazos SVG de `ico()` que ya usaba el resto
   de la app: heredan el color del texto y no dependen de qué móvil sea. */
.nav-viaje a .ic { line-height: 1; }
.nav-viaje a .ic svg { width: 21px; height: 21px; }
.nav-viaje a.activo { color: var(--tinta-fuerte); background: var(--tinta-suave); font-weight: 700; }

/* Con SIETE pestañas (Días · Mapa · Diario · Reel · Libro · Editar · Compartir)
   en un móvil estrecho toca ~48 px por pestaña, y «Compartir» necesita bastante
   más: se partía en dos líneas y la barra crecía y se descolocaba.

   Por debajo de 420 px se dejan SOLO los iconos. Se descartó bajar el tipo de
   letra (ilegible) y se descartó el desplazamiento horizontal, porque una
   pestaña que no se ve no existe. Los iconos crecen un poco al quedarse solos y
   el nombre viaja en `aria-label`, así que un lector de pantalla sigue
   diciéndolo. */
@media (max-width: 420px) {
  .nav-viaje a { font-size: 0; gap: 0; padding: 7px 0; }
  .nav-viaje a .ic svg { width: 24px; height: 24px; }
}

/* ---------------- El editor del libro ----------------
   Se ve como PÁGINAS, no como un formulario. Es la diferencia entre editar un
   libro y rellenar una ficha: si no se parece a lo que va a salir impreso, nadie
   sabe qué está haciendo. */
.pagina-ed {
  background: var(--papel-2); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 16px; margin-top: 16px;
  box-shadow: var(--sombra-s);
}
.pagina-ed-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pagina-ed-orden { display: flex; gap: 6px; flex: none; }
.mini {
  border: 1px solid var(--linea-2); background: var(--papel); color: var(--texto-2);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: .9rem;
}
.mini:hover { background: var(--tinta-suave); color: var(--tinta-fuerte); }
.titulo-ed {
  width: 100%; margin-top: 10px; padding: 9px 11px; font-size: .92rem;
  border: 1px solid var(--linea); border-radius: 10px;
  background: var(--papel); color: var(--texto); font-family: inherit;
}
/* La barra de acciones del editor.
   Antes eran un botón ancho y un texto rojo suelto al lado, y el segundo se leía
   como un enlace y no como algo que borra tu trabajo. Ahora los dos ocupan lo que
   miden y el destructivo queda a la derecha, separado, que es donde no se pulsa
   por inercia. */
.barra-ed {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  flex-wrap: wrap;
}
.barra-ed .btn { flex: none; }
.barra-ed .btn.fantasma { margin-left: auto; }

.plantillas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
/* Las pastillas de plantilla. La activa va RELLENA, no solo con el borde de otro
   color: con doce pastillas en pantalla, un borde no dice cuál está puesta —hay que
   compararlas— y una rellena se ve de un vistazo. */
.chip {
  border: 1px solid var(--linea-2); background: var(--papel); color: var(--texto-2);
  padding: 6px 13px; border-radius: 999px; font-size: .78rem; cursor: pointer;
  font-family: inherit; line-height: 1.2;
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { background: var(--tinta-suave); color: var(--tinta-fuerte); border-color: var(--linea-2); }
.chip.activo {
  background: var(--tinta); border-color: var(--tinta); color: #fff; font-weight: 700;
}
.chip:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* En móvil las pastillas crecen hasta poder pulsarlas con el dedo.
   Medido en producción a 390 px: salían de 29 px de alto, y el mínimo razonable
   para un objetivo táctil son unos 44. Con cuatro pastillas por página y 45
   páginas en un viaje como el de Cataluña, fallar el dedo no es una molestia
   ocasional: es la experiencia entera de maquetar desde el móvil.
   En escritorio se quedan finas, que con ratón 29 px se aciertan de sobra. */
@media (pointer: coarse) {
  .chip { padding: 11px 15px; font-size: .82rem; }
  .mini { width: 40px; height: 40px; }
}

/* El diario, plegado dentro del editor. */
.diario-ed { border: 1px solid var(--linea); border-radius: var(--r); background: var(--papel-2); padding: 0; }
.diario-ed > summary {
  cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: .92rem;
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.diario-ed > summary::-webkit-details-marker { display: none; }
.diario-ed > summary svg { width: 17px; height: 17px; flex: none; }
.diario-ed[open] > summary { border-bottom: 1px solid var(--linea); }
.diario-ed > p { margin: 12px 16px 0; }
.diario-ed textarea {
  width: calc(100% - 32px); margin: 8px 16px 16px; min-height: 180px;
  border: 1px solid var(--linea); border-radius: 11px; padding: 12px;
  background: var(--papel); color: var(--texto); font: inherit; font-size: .95rem;
  line-height: 1.6; resize: vertical;
}
.diario-ed textarea:focus { outline: 2px solid var(--tinta); outline-offset: 1px; }

/* Los huecos se reparten como en la plantilla, para que la vista previa signifique
   algo. `grande` ocupa todo; `dos` dos columnas; `rejilla` se acomoda. */
.huecos { display: grid; gap: 8px; }
.huecos.grande { grid-template-columns: 1fr; }
.huecos.dos { grid-template-columns: 1fr 1fr; }
.huecos.rejilla { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.huecos.texto { grid-template-columns: 1fr; max-width: 240px; }
.hueco {
  position: relative; overflow: hidden;           /* el overflow ES el recorte */
  border-radius: 10px; background: var(--papel-3);
  border: 1px solid var(--linea); cursor: pointer; padding: 0;
}
.hueco img { display: block; }
.hueco-vacio, .hueco.anadir {
  display: grid; place-items: center; color: var(--texto-2);
  font-size: .8rem; text-align: center; width: 100%; height: 100%;
}
.hueco.anadir { border-style: dashed; font-family: inherit; }
.hueco-pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
  font-size: .72rem; color: #fff; background: linear-gradient(transparent, rgba(20,16,14,.85));
}
/* «Tocar para editar» solo al pasar por encima: en la vista previa estorba. */
.hueco-toca {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(20,16,14,.55); color: #fff; font-size: .78rem;
  opacity: 0; transition: opacity .15s;
}
.hueco:hover .hueco-toca, .hueco:focus-visible .hueco-toca { opacity: 1; }

/* El marco de recorte. `touch-action:none` es imprescindible: sin eso, arrastrar
   en el móvil hace scroll de la página en vez de encuadrar la foto. */
.recorte-marco {
  position: relative; overflow: hidden; border-radius: 12px;
  background: var(--papel-3); touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.recorte-marco:active { cursor: grabbing; }
.controles-luz { display: grid; gap: 8px; margin-top: 12px; }
.controles-luz label { display: grid; grid-template-columns: 90px 1fr; align-items: center;
  gap: 10px; font-size: .82rem; color: var(--texto-2); }
.controles-luz input[type="range"] { width: 100%; accent-color: var(--tinta); }

.elegir-fotos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px; margin: 12px 0; max-height: 46vh; overflow-y: auto;
}
.elegir-fotos .ef { padding: 0; border: 2px solid transparent; border-radius: 8px;
  background: none; cursor: pointer; overflow: hidden; }
.elegir-fotos .ef img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
/* Las que ya están puestas se atenúan pero NO se bloquean: repetir una foto en dos
   huecos es una decisión legítima de maquetación, no un error. */
.elegir-fotos .ef.puesta { opacity: .4; border-color: var(--tinta); }

/* ---------------- Galería (B5) ----------------
   Miniatura ADREDE más grande que la de `.elegir-fotos` (72px): ahí es un
   selector rápido dentro de un modal, aquí es la pantalla entera dedicada a
   mirar fotos — se lee peor si el grano es tan pequeño como el del selector. */
.galeria-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; margin: 16px 0;
}
.galeria-item {
  padding: 0; border: none; border-radius: 10px; background: none;
  cursor: pointer; overflow: hidden; display: block;
  transition: transform 120ms ease;
}
.galeria-item:hover, .galeria-item:focus-visible { transform: scale(1.03); }
.galeria-item img, .galeria-item video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
@media (max-width: 420px) {
  .galeria-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
}
/* ---------------- El libro ----------------
   La ficha enseña la portada de verdad, no un icono: el libro es un objeto que
   se regala, y lo que decide si alguien lo quiere en papel es verlo con su foto,
   no leer «unas 24 páginas». La proporción es la de un libro cerrado (A4, algo
   más alto que ancho), para que lo que se ve aquí se parezca a lo que llega. */
.libro-ficha { display: flex; gap: 16px; align-items: center; }
.libro-portada {
  width: 104px; aspect-ratio: 210 / 297; object-fit: cover; flex: none;
  border-radius: 4px 10px 10px 4px;
  /* Sombra al lomo (izquierda) y no alrededor: es lo que lo lee como libro
     cerrado y no como una foto recortada. */
  box-shadow: -3px 0 0 rgba(0, 0, 0, .18), var(--sombra-s);
}
.libro-datos { min-width: 0; }
.libro-cifras { margin: 0 0 6px; }
@media (max-width: 420px) {
  .libro-ficha { gap: 12px; }
  .libro-portada { width: 82px; }
}

/* ---------------- Planes ---------------- */
.plan { border: 1px solid var(--linea-2); border-radius: var(--r); padding: 17px; margin-top: 12px; background: var(--papel-2); }
.plan.pro { border: 2px solid var(--tinta); background: var(--tinta-suave); }
.plan h3 { font-family: var(--serif); font-size: 1.15rem; }
.plan ul { margin: 10px 0 0; padding-left: 18px; color: var(--texto-2); font-size: .9rem; }
.plan li { margin: 4px 0; }
.precio { font-size: 1.4rem; font-weight: 800; }

/* ---------------- Avisar de un fallo ---------------- */
/* Discreto pero siempre visible: si hay que buscarlo, nadie lo usa. */
.fallo-btn { position: fixed; right: 14px; bottom: 78px; z-index: 880; background: var(--papel-2);
  color: var(--texto-2); border: 1px solid var(--linea-2); min-height: 44px; border-radius: 22px; padding: 9px 14px;
  font-size: .78rem; font-family: inherit; cursor: pointer; box-shadow: var(--sombra); }
.fallo-btn:hover { color: var(--tinta-fuerte); border-color: var(--tinta); }
/* Menos peso visual en papel: en oscuro se hundía, aquí destacaba de más. */
.fallo-btn { box-shadow: var(--sombra-s); opacity: .9; }
.fallo-btn:hover { opacity: 1; }
/* ---------------- Preguntas y aperturas ---------------- */
/* Sin filete lateral grueso (marca reconocible de interfaz hecha por IA).
   La pregunta se distingue por el fondo teñido y su etiqueta. */
.pregunta { background: var(--oro-suave); border-color: var(--oro-borde, var(--aviso-borde)); }
.pregunta .texto { font-family: var(--serif); font-size: 1.05rem; margin: 6px 0 12px; }
.pregunta input { width: 100%; background: var(--papel); color: var(--texto); border: 1px solid var(--linea);
  border-radius: 11px; padding: 13px; font: inherit; font-size: 1rem; min-height: 48px; }
.pregunta input:focus { outline: 2px solid var(--tinta); outline-offset: 1px; }
.cifras-mini { display: flex; gap: 22px; margin: 10px 0; }
.cifras-mini b { font-family: var(--serif); font-size: 1.6rem; color: var(--oro-fuerte); display: block; line-height: 1.1; }
.cifras-mini span { color: var(--texto-2); font-size: .78rem; }

.lista-vias { list-style: none; padding: 0; margin: 10px 0 0; }
.lista-vias li { border: 1px solid var(--linea-2); border-radius: var(--r); padding: 13px 15px;
  margin-bottom: 8px; background: var(--papel-2); }
.version-sello { position: fixed; left: 16px; bottom: 92px; z-index: 880; color: var(--texto-3);
  font-size: .75rem; letter-spacing: .04em; pointer-events: none; }
.velo { position: fixed; inset: 0; background: var(--velo); z-index: 950; display: flex;
  align-items: flex-end; justify-content: center; padding: 16px; }
.hoja { background: var(--papel-2); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 20px; width: 100%; max-width: 520px; box-shadow: var(--sombra); }
.hoja h2 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 6px; }
/* Va DESPUÉS de `.hoja` a propósito: misma especificidad, así que gana la última.
   Puesta antes, `max-width: 520px` de `.hoja` la pisaba y el editor de recorte
   salía estrecho sin motivo aparente. */
.hoja-ancha { max-width: 560px; }
.hoja textarea { width: 100%; min-height: 130px; background: var(--papel); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 11px; padding: 13px; font: inherit; font-size: 1rem; resize: vertical; }
.hoja textarea:focus { outline: 2px solid var(--tinta); outline-offset: 1px; }
.hoja .fila { display: flex; gap: 10px; margin-top: 14px; }
.hoja .fila button { flex: 1; }
@media (min-width: 620px) { .velo { align-items: center; } }

/* ---------------- Varios ---------------- */
/* Antes usaba color: var(--papel) para el texto, dando por hecho que --papel
   siempre era claro. Con modo oscuro --papel se vuelve casi negro y el texto
   del toast se habría vuelto invisible sobre su propio fondo oscuro: por eso
   ahora tiene su propia pareja fondo/texto que se invierte con el tema. */
.toast { position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%); background: var(--toast-fondo); color: var(--toast-texto); padding: 11px 18px; border-radius: 11px; font-size: .87rem; box-shadow: var(--sombra); z-index: 900; }
a { color: var(--tinta-fuerte); }
input[type=file] { display: none; }
footer { max-width: 640px; margin: 0 auto; padding: 4px 16px 30px; color: var(--texto-2); font-size: .74rem; }
.legal { text-align: center; font-size: .76rem; color: var(--texto-2); margin-top: 16px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------------- El mapa del mundo ---------------- */
/* La bola del mundo. Cuadrada y centrada: una esfera en una caja apaisada deja
   dos franjas vacías a los lados que parecen un error de maquetación. */
.mapa-mundo { margin-top: 14px; display: grid; place-items: center; }
.mapa-mundo .globo { width: 100%; max-width: 460px; cursor: grab; touch-action: none; }
.mapa-mundo .globo:active { cursor: grabbing; }
.pais { border: 1px solid var(--linea-2); border-radius: var(--r); margin-top: 8px;
  background: var(--papel-2); overflow: hidden; }
.pais .cabecera { display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer; }
.pais .cabecera:hover { background: var(--papel-3); }
/* La inicial del país en vez de su bandera. Una bandera es un símbolo político
   y esto es un cuaderno de familia; además, media docena de banderas juntas
   convierten la lista en una tabla de resultados. */
.pais .inicial {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--papel-3); border: 1px solid var(--linea-2);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1rem; color: var(--oro-fuerte);
}
.pais .nombre { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pais .flecha { color: var(--texto-2); }
.pais .ciudades { padding: 0 15px 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.pais .ciudad { background: var(--papel-3); border: 1px solid var(--linea); border-radius: 999px;
  padding: 4px 11px; font-size: .82rem; }
.pais .ciudades p { width: 100%; margin: 6px 0 0; }

/* ---------------- El Reel ----------------
   Esta pantalla era un documento con botones: dos secciones tituladas, cuatro
   botones rectangulares idénticos y cuatro párrafos de letra pequeña explicando
   dónde se dibujaba cada cosa. Ahora manda el vídeo, que es lo espectacular, y
   las tarjetas van en una sola tira debajo. */

/* El héroe del vídeo. Es el único sitio de la app con fondo oscuro a pantalla
   completa, y es a propósito: una pieza de vídeo con fondo de papel no parece
   vídeo. La foto de portada va detrás, muy apagada, para que sea SU viaje y no
   un cuadro negro cualquiera. */
.hero-pieza {
  position: relative; display: flex; align-items: center; gap: 14px;
  width: 100%; margin: 18px 0 26px; padding: 20px 18px;
  border: 0; border-radius: var(--r-l); cursor: pointer; text-align: left;
  color: #fff; overflow: hidden; font: inherit;
  background: linear-gradient(135deg, #1C1613 0%, #2A201B 60%, var(--tinta-hero) 140%);
  box-shadow: 0 10px 30px -12px rgba(20, 14, 10, .55);
  transition: transform .18s, box-shadow .18s;
}
.hero-pieza::before {
  content: ""; position: absolute; inset: 0; background-image: var(--foto, none);
  background-size: cover; background-position: center; opacity: .22;
  filter: saturate(.7);
}
/* Un velo por encima de la foto: sin él, una portada clara deja el texto blanco
   ilegible, y eso pasa justo con las fotos buenas. */
.hero-pieza::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20, 14, 10, .82) 0%, rgba(20, 14, 10, .45) 100%);
}
.hero-pieza > * { position: relative; z-index: 1; }
.hero-pieza:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(20, 14, 10, .6); }
.hero-pieza:active { transform: translateY(0); }
.hero-pieza[disabled] { cursor: progress; opacity: .92; }

/* El triángulo se dibuja con bordes: un carácter ▶ cambia de forma en cada
   sistema y en algunos sale con emoji de color. */
.hero-pieza-play {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .5);
  display: grid; place-items: center;
}
.hero-pieza-play::after {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border: 10px solid transparent; border-left: 16px solid #fff; border-right: 0;
}
.hero-pieza.trabajando .hero-pieza-play::after {
  border: 0; width: 18px; height: 18px; margin: 0;
  border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; animation: girar .8s linear infinite;
}
.hero-pieza-txt { display: grid; gap: 3px; }
.hero-pieza-txt b { font-size: 1.12rem; letter-spacing: -.01em; }
.hero-pieza-txt span { font-size: .88rem; color: rgba(255, 255, 255, .72); line-height: 1.35; }
.hero-pieza-estado:not(:empty) {
  position: absolute; right: 14px; bottom: 12px; font-size: .8rem;
  color: rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .35);
  padding: 3px 10px; border-radius: 999px;
}

/* Cabecera de la tira: el título y, al lado, la acción de calidad como CHIP.
   Como botón grande competía con el vídeo, que es lo que importa. */
.cab-tira { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cab-tira h2 { margin: 0; }
.chip-accion {
  flex: none; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  color: var(--tinta-fuerte); background: var(--tinta-suave);
  border: 1px solid var(--tinta-borde); border-radius: 999px; padding: 6px 13px;
  /* 44 px de alto real con el área táctil, aunque se vea fino. */
  min-height: 32px; position: relative;
}
.chip-accion::after { content: ""; position: absolute; inset: -7px -4px; }
.chip-accion:disabled { opacity: .6; cursor: progress; }
.chip-accion.hecho { color: #4A6B3C; background: #EFF5EA; border-color: #D3E3C7; }

.reel { display: flex; gap: 14px; overflow-x: auto; padding: 14px 2px 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Sin esto la última tarjeta se quedaba atascada a medio camino: el
     navegador calcula el punto de snap desde el borde del contenedor y,
     como el padding-inline es de solo 2px, le faltaba margen para centrar
     la tarjeta final. 24px —más que el padding, igual que el hueco visual
     que ya da el `gap`— le da ese margen. */
  scroll-padding-inline: 24px; }
.reel::-webkit-scrollbar { display: none; }
.tarjeta-reel {
  position: relative; margin: 0; width: 68vw; max-width: 280px; flex: none;
  border-radius: 18px; overflow: hidden; cursor: pointer;
  background: #1C1613; scroll-snap-align: center;
  box-shadow: 0 8px 22px -10px rgba(20, 14, 10, .45);
  transition: transform .18s, box-shadow .18s;
}
.tarjeta-reel .lienzo-tarjeta { display: block; width: 100%; height: auto; }
.tarjeta-reel figcaption {
  position: absolute; left: 10px; top: 10px;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(20, 14, 10, .55); backdrop-filter: blur(6px);
  padding: 4px 10px; border-radius: 999px;
}
.tarjeta-reel:hover { transform: translateY(-3px); }
/* Elegida: se marca con el acento y una señal clara, no solo con un borde
   sutil — en una fila de nueve miniaturas un borde de 1 px no se ve. */
.tarjeta-reel.elegida {
  outline: 3px solid var(--tinta); outline-offset: -3px;
  transform: translateY(-3px);
}
.tarjeta-reel.elegida figcaption { background: var(--tinta); }

/* Compartir SOLO esta. Arriba a la derecha porque es donde no tapa la foto de la
   tarjeta, que lleva el texto abajo. */
.solo-esta {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
  color: #fff; background: rgba(20, 14, 10, .55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .28);
}
.solo-esta:hover { background: var(--tinta); }

/* Dónde estás en la tira: puntos hasta diez tarjetas, y a partir de ahí un
   contador. Veintitrés puntos son una regla de rayitas indistinguibles. */
.pasos { display: flex; justify-content: center; gap: 6px; min-height: 14px; margin-top: 2px; }
.pasos i { width: 6px; height: 6px; border-radius: 50%; background: var(--linea-2); transition: background .15s, transform .15s; }
.pasos i.aqui { background: var(--tinta); transform: scale(1.35); }
.pasos.numerico { font-size: .78rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }

@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------- Soltar fotos ---------------- */
.soltar { border: 2px dashed var(--linea); border-radius: var(--r-l); padding: 26px 18px;
  text-align: center; margin-top: 14px; transition: border-color .15s, background .15s; }
.soltar.encima { border-color: var(--tinta); background: var(--tinta-suave); }
.soltar .icono { font-size: 2.2rem; }
.soltar p { margin: 6px 0 12px; }
.soltar .limites { margin: 12px 0 0; }
.soltar .btn { display: inline-flex; }

/* ---------------- Fotos casi iguales ---------------- */
.parecidas { margin-top: 10px; }
.grupo-parecidas { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; }
.grupo-parecidas figure { margin: 0; flex: none; text-align: center; position: relative; }
.grupo-parecidas img { width: 76px; height: 76px; object-fit: cover; border-radius: 9px;
  border: 2px solid transparent; opacity: .45; }
.grupo-parecidas .elegida img { border-color: var(--oro); opacity: 1; }
.grupo-parecidas figcaption { font-size: .75rem; color: var(--texto-2); margin-top: 3px; }
.grupo-parecidas .elegida figcaption { color: var(--oro-fuerte); font-weight: 700; }

/* Corto o largo. Va justo debajo del héroe del vídeo porque es una propiedad DE
   ese vídeo, no una opción suelta de la pantalla. */
.eleccion.duracion { margin: -16px 0 24px; }

/* El icono dentro del chip: sin esto el navegador lo pinta a su tamaño por
   defecto y desborda la píldora. */
.chip-accion { display: inline-flex; align-items: center; gap: 6px; }
.chip-accion svg { width: 15px; height: 15px; flex: none; }

/* Red de seguridad para los iconos en línea.
   Un SVG sin `width`/`height` hereda el tamaño por defecto del navegador —unos
   300x150— y revienta el sitio donde esté. Pasó con «Cambiar la portada» al
   sustituir su emoji por un icono de trazo: el botón se convirtió en un círculo
   que tapaba un tercio de la foto. Esto lo evita para cualquier icono futuro;
   las reglas concretas de arriba siguen mandando por especificidad. */
svg:not([width]):not([height]) { width: 1em; height: 1em; }

/* La tira de tarjetas, mientras se dibujan.
   Cada tarjeta es un lienzo de 1080x1920 con sus fotos dentro; 26 de ellas tardan
   varios segundos y la tira se quedaba en blanco sin decir nada, que es lo que
   hace pensar que algo se ha roto. */
.tira-cargando {
  display: flex; align-items: center; gap: 12px;
  min-height: 180px; width: 100%; padding: 0 4px;
  color: var(--texto-2); font-size: .9rem;
}
.tira-cargando .giro {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--linea-2); border-top-color: var(--tinta);
  animation: girar .8s linear infinite;
}

/* La misma tira, en rejilla.
   Con 26 días la tira obligaba a deslizar veinte veces para llegar al día 20.
   `auto-fill` y no un número fijo de columnas: en el móvil salen dos y en
   escritorio cinco, sin escribir una media query por tamaño. */
.reel.rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  overflow: visible; scroll-snap-type: none;
}
.reel.rejilla .tarjeta-reel { width: auto; max-width: none; }
.cab-tira-acc { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- El estudio ---------------- */
/* La pantalla donde se decide el vídeo. Tres reglas la gobiernan:
   1. Se ve lo que vas a obtener. La vista previa cambia con cada elección; un
      selector de plantillas que no cambia nada a la vista es un adorno.
   2. Las elecciones son botones grandes con su explicación debajo, no un
      desplegable. En un móvil un <select> de diez ambientes es una lotería.
   3. El número de duración vive en una barra pegada abajo, siempre visible: es la
      consecuencia de lo que estás tocando y no puede quedar fuera de pantalla. */
.est-intro { margin: -6px 0 18px; font-size: .9rem; }

/* El cuerpo del estudio. En móvil es una columna, con la previa PRIMERO (con
   `order`, aunque en el HTML vaya después de los mandos: así solo hay un
   `#previa` en el documento y no dos copias sincronizadas a mano).
   En escritorio se parte en dos columnas de verdad con CSS Grid.

   Bug real (24/08/2026, aviso de Andrés: «hay que hacerlo más grande se
   pisa»): antes la previa era `position:sticky` + `float:right`, y un
   `float` NO lo respeta un contenedor grid ni flex — en cuanto `.est-dias`
   pasaba a `display:grid` (1200px) su caja ignoraba el float por completo y
   se extendía por debajo, PISANDO la previa. Con Grid de verdad la columna
   de la previa reserva su sitio en el propio grid: nadie más puede ocuparlo,
   pase lo que pase con `.est-dias` más abajo. */
.est-cuerpo { display: flex; flex-direction: column; }
.est-grid-preview { order: -1; }
.est-grid-main { min-width: 0; }
@media (min-width: 1000px) {
  /* Mismo truco que `.dias-lista`: se sale del ancho de `main` (860px aquí)
     para dar más aire a la previa sin dejar la columna de mandos angosta. */
  .est-cuerpo {
    display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start;
    margin-left: 50%; transform: translateX(-50%);
    width: 100vw; max-width: 1180px; box-sizing: border-box; padding: 0 32px;
  }
  .est-grid-preview { order: 0; position: sticky; top: 78px; }
  /* Antes: `max-width: 300px` — más PEQUEÑA que en el móvil (340px). Ahora
     llena su columna fija de 400px: más grande, no más pequeña. */
  .est-previa { max-width: 100%; margin: 0 0 8px; }
  /* Con veintitantos días la lista puede medir más que la previa (sticky) de
     al lado: sin tope, la columna izquierda sigue creciendo y la derecha se
     queda «huérfana» arriba con un hueco vacío debajo. Con su propio scroll
     la lista no arrastra la altura de toda la columna. */
  .est-dias { max-height: calc(100vh - 200px); overflow-y: auto; padding-right: 4px; }
}

.est-previa {
  position: relative; width: 100%; max-width: 340px; margin: 0 auto 8px;
  aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden;
  background: #14110A; border: 1px solid var(--linea-2);
  /* La transición hace que el cambio de formato se LEA como un cambio de formato
     y no como un salto de maquetación. */
  transition: aspect-ratio .22s ease;
}
.est-previa-foto {
  position: absolute; inset: 0; background: #2A2320 center/cover no-repeat;
  transition: filter .2s ease;
}
.est-previa::after {   /* el velo de abajo, como en el vídeo de verdad */
  content: ""; position: absolute; inset: auto 0 0; height: 46%;
  background: linear-gradient(to bottom, rgba(14,11,9,0) 0%, rgba(14,11,9,.82) 58%, rgba(14,11,9,.96) 100%);
}
.est-previa-pie {
  position: absolute; inset: auto 0 34px; z-index: 2; text-align: center;
  color: #fff; padding: 0 14px;
}
.est-previa-pie b { display: block; font-size: 1.5rem; font-weight: 700; }
.est-previa.est-serif .est-previa-pie b { font-family: var(--serif); }
.est-previa-pie i {   /* el subrayado de rotulador, igual que en la app y en el vídeo */
  display: block; width: 74px; height: 8px; margin: 5px auto 7px;
  background: rgba(201, 146, 46, .85); border-radius: 4px; transform: rotate(-.7deg);
}
/* Una línea y con puntos suspensivos: «Dongxinqiao (Shanghái) · Xiaobeimen
   (Shanghái)» se partía en dos y se montaba encima de la marca de abajo. En el
   vídeo de verdad el rótulo también se recorta, así que la previa no debe
   prometer dos líneas que allí no van a caber. */
.est-previa-pie span {
  display: block; font-size: .8rem; color: rgba(255,255,255,.86);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.est-previa-marca {
  position: absolute; inset: auto 0 12px; z-index: 2; text-align: center;
  font-family: var(--serif); font-size: .7rem; letter-spacing: .14em;
  color: rgba(255,255,255,.72);
}

/* Los selectores. Igual que .eleccion pero con sitio para la explicación: sin
   ella «Recuerdo» y «Calma» son dos palabras sin diferencia. */
.est-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.est-chips button {
  flex: 1 1 128px; min-height: 52px; padding: 9px 12px; text-align: left;
  font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  background: var(--papel-2); color: var(--texto-2);
  border: 1px solid var(--linea-2); border-radius: 12px;
}
.est-chips button small, .eleccion button small {
  display: block; font-weight: 400; font-size: .74rem; opacity: .72; margin-top: 2px;
}
.est-chips button[aria-pressed="true"] {
  background: var(--tinta); color: #fff; border-color: var(--tinta);
}
.est-toggles { padding: 4px 14px; }

/* Los días. Fila con casilla, título editable y los datos a la derecha; el día
   excluido se atenúa pero NO desaparece, para que se vea que lo has quitado tú. */
.est-dias { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 20px; }
/* Con veintidós días la lista mide media pantalla de largo. En cuanto hay ancho
   se parte en dos columnas: se ven todos los días de un viaje largo sin
   desplazarse, que es justo lo que pidió Andrés cuando dijo «déjame ver todos
   los días». */
@media (min-width: 1200px) {
  .est-dias { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
}
/* Dos alturas y no una: en un móvil de 430 px, con la casilla, «Día 12» y la
   fecha en la misma línea, al título le quedaban 120 px y no se leía ni el nombre
   del sitio — que es precisamente lo que se viene a corregir aquí. */
.est-dia {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 12px;
  background: var(--papel-2); border: 1px solid var(--linea-2); border-radius: 12px;
}
.est-dia-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.est-dia.fuera { opacity: .48; }
.est-dia.fuera .est-dia-tit { text-decoration: line-through; }
.est-dia-si { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.est-dia-si span { font-weight: 600; font-size: .88rem; white-space: nowrap; }
.est-dia-si input { width: 20px; height: 20px; accent-color: var(--tinta); }
.est-dia-tit {
  flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 6px 10px;
  font-family: inherit; font-size: .88rem; color: var(--texto);
  background: var(--papel-3); border: 1px solid transparent; border-radius: 8px;
}
.est-dia-tit:focus { border-color: var(--tinta); outline: none; background: var(--papel-2); }
.est-dia-dato { font-size: .76rem; color: var(--texto-2); white-space: nowrap; }

/* La barra de abajo. Pegada, porque el número tiene que verse mientras tocas las
   casillas de arriba y la lista de días puede medir treinta filas. */
.est-barra {
  /* Pegada POR ENCIMA de la barra de navegación del viaje, que es fija y mide 62
     px: con `bottom: 0` el botón de generar quedaba justo detrás de los iconos de
     abajo y se pulsaba «Mapa» sin querer. */
  position: sticky; bottom: 62px; z-index: 5; margin: 20px -16px 0; padding: 12px 16px 14px;
  background: var(--papel-2); border-top: 1px solid var(--linea-2);
}
.est-cuenta { margin: 0 0 10px; font-size: .84rem; color: var(--texto-2); text-align: center; }
.est-cuenta b { color: var(--texto); font-size: 1.02rem; }
.est-barra .btn + .btn { margin-top: 8px; }
.est-estado { margin: 8px 0 0; font-size: .78rem; color: var(--texto-2); text-align: center; min-height: 1em; }

/* En escritorio la previa vive en su propia columna del grid (`.est-cuerpo`,
   más arriba). Aquí solo queda el estilo de la barra: el `bottom` NO se toca
   en escritorio, la barra de navegación del viaje sigue siendo fija abajo
   también aquí, y bajando la barra del estudio a 12 px el botón de las
   tarjetas quedaba medio tapado por los iconos. */
@media (min-width: 900px) {
  .est-barra { margin: 20px 0 0; border-radius: 14px; border: 1px solid var(--linea-2); }
}

/* ---------------- Instalarla como app ---------------- */
/* Abajo y por encima de la barra de navegación, con su ✕ bien grande: un aviso
   que no se puede cerrar de un toque es publicidad, no una ayuda. */
.instalar {
  /* A 124 px del suelo y no a 74: ahí abajo ya viven la barra de navegación (62
     px), el sello de versión (a 92) y el botón «Algo no va bien» (a 78, y con más
     z-index), que tapaba justo la ✕ de cerrar. Un aviso que no se puede cerrar es
     publicidad. */
  position: fixed; left: 12px; right: 12px; bottom: 124px; z-index: 870;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px;
  background: var(--papel-2); border: 1px solid var(--linea-2); border-radius: 14px;
  box-shadow: var(--sombra-nav);
  animation: instalar-entra .28s ease-out both;
}
@keyframes instalar-entra { from { opacity: 0; transform: translateY(10px); } }
.instalar-txt { flex: 1 1 auto; min-width: 0; font-size: .84rem; line-height: 1.35; }
.instalar-txt b { display: block; font-size: .92rem; }
.instalar-txt span { color: var(--texto-2); }
.instalar-txt span b { display: inline; font-size: inherit; color: var(--texto); }
.instalar-txt svg { width: 15px; height: 15px; vertical-align: -2px; }
.instalar .btn.peq { flex: 0 0 auto; width: auto; min-height: 40px; padding: 8px 16px; font-size: .88rem; }
.instalar-no {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--texto-2); font-size: 1.05rem; cursor: pointer;
}
.instalar-no:hover { background: var(--papel-3); }
@media (min-width: 700px) { .instalar { left: auto; right: 16px; max-width: 420px; } }

/* ---------------- Entrar con Google ---------------- */
/* Blanco con borde, el icono a la izquierda y el texto centrado: es el aspecto
   que Google pide en sus normas de marca, y además es el que la gente reconoce
   sin leer. Un botón «de Google» con nuestros colores no lo reconoce nadie. */
.btn.google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1F1F1F; border: 1px solid #DADCE0;
  text-decoration: none; font-weight: 600;
}
.btn.google:hover { background: #F7F8F8; }
.btn.google svg { flex: 0 0 auto; }
@media (prefers-color-scheme: dark) {
  /* En oscuro se queda blanco: es el botón de Google, no el nuestro, y teñirlo
     lo haría irreconocible justo en la pantalla donde hay que confiar. */
  :root:not([data-theme="light"]) .btn.google { background: #fff; color: #1F1F1F; }
}
:root[data-theme="dark"] .btn.google { background: #fff; color: #1F1F1F; }

/* El «o» entre las dos formas de entrar, con su filete a los lados. */
.separa-o { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.separa-o::before, .separa-o::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--linea); }
.separa-o span { font-size: .78rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .08em; }

/* ---------------- Ráfagas: la misma escena repetida ---------------- */
/* La hoja enseña las fotos porque la decisión es sobre las fotos. Un diálogo de
   solo texto no permite saber si lo que se va a apartar son seis disparos del
   mismo plato o seis momentos distintos, y esa es justo la duda que tiene el
   usuario. */
.hoja.rafagas { max-width: 560px; }
.rafaga-fila {
  display: flex; align-items: center; gap: 6px; margin: 12px 0;
  overflow-x: auto; padding-bottom: 4px;
}
.rafaga-fila figure {
  position: relative; margin: 0; flex: 0 0 auto;
  width: 76px; height: 76px; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; opacity: .5;
}
.rafaga-fila figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La elegida a plena opacidad y con anillo: se entiende sin leer el pie. */
.rafaga-fila figure.elegida { opacity: 1; border-color: var(--tinta); width: 96px; height: 96px; }
.rafaga-fila figure figcaption {
  position: absolute; inset: auto 0 0; padding: 2px 4px;
  background: rgba(20, 14, 11, .78); color: #fff;
  font-size: .58rem; text-align: center; letter-spacing: .02em;
}
/* Se enseñan CUATRO por fila y no seis: con seis, el «+2» se iba fuera del
   ancho del móvil y había que desplazar para saber de cuántas fotos hablamos,
   que es justo el dato que decide. El número tiene que verse sin tocar nada. */
.rafaga-mas {
  flex: 0 0 auto; font-size: .82rem; font-weight: 600; color: var(--texto-2);
  padding: 6px 9px; background: var(--papel-3); border-radius: 8px;
}

/* El botón de borrar del visor, separado y en rojo. Al lado de «Portada del
   viaje» y con el mismo aspecto, el que va con prisa borra la foto creyendo que
   la está poniendo de portada — y esto no tiene deshacer. */
.visor .elegir .borrar-foto {
  border-color: color-mix(in srgb, var(--tinta) 55%, transparent);
  color: #fff; background: color-mix(in srgb, var(--tinta) 82%, transparent);
  margin-left: 14px;
}
.visor .elegir .borrar-foto:hover { background: var(--tinta); }
.visor .elegir .borrar-foto[disabled] { opacity: .6; }

/* La tira de ejemplos al limpiar ráfagas de un viaje ya subido: se enseñan unas
   cuantas de las que se van a quitar. Ver ocho miniaturas casi idénticas explica
   en un vistazo lo que un párrafo no consigue — y da confianza para pulsar un
   botón que borra y no se puede deshacer. */
.tira-fotos { display: flex; gap: 5px; overflow-x: auto; margin: 12px 0; padding-bottom: 4px; }
.tira-fotos img {
  width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-s);
  border: 1px solid var(--linea); flex: 0 0 auto;
}

/* El título de la portada es un botón, pero no debe PARECERLO: sigue siendo el
   título del viaje. Solo se insinúa al pasar por encima y al enfocarlo con el
   teclado, que es cuando hace falta saber que se puede tocar. */
.hero .titulo-editable {
  background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit;
  font-family: var(--serif); font-size: clamp(1.5rem, 1.34rem + .5vw, 1.85rem);
  font-weight: 600; line-height: 1.15; text-align: left; cursor: pointer;
  border-bottom: 1px dashed transparent;
}
.hero .titulo-editable:hover, .hero .titulo-editable:focus-visible {
  border-bottom-color: rgba(255, 255, 255, .55);
}

/* La insignia de la familia, sobre el título del viaje.
   Pequeña y por encima del nombre: es una firma, no un titular. Compite con el
   nombre del viaje si se pone más grande, y el nombre es lo que manda. */
.hero .insignia {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: .74rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 7px;
}
.hero .insignia .emblema { font-size: 1rem; letter-spacing: 0; }

/* Pasar de día. Va al FINAL del día abierto, no arriba: es donde estás cuando
   terminas de leerlo, y es justo entonces cuando quieres el siguiente. */
.pasar-dia { display: flex; gap: 10px; margin: 16px 0 4px; }
.pasar-dia .btn { flex: 1; margin: 0; text-align: center; font-size: .86rem; padding: 10px 8px; }

/* Tarjetas de borradores con botones de acción */
.hero-contenedor { position: relative; }
.btn-eliminar, .btn-descargar {
  position: absolute; top: 12px; right: 12px;
  background: rgba(20, 14, 11, .78); color: #fff; border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px; width: 36px; height: 36px; min-height: 36px;
  padding: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; font-weight: bold; transition: all 150ms ease;
  backdrop-filter: blur(4px);
}
.btn-eliminar:hover, .btn-descargar:hover {
  background: rgba(20, 14, 11, .92); transform: scale(1.08);
}
/* Auditoría visual Fase 2 (28/08): 36px de caja visible, 8px corto del
   mínimo táctil de 44px. Los dos botones están a 8px uno del otro (right:12
   y right:56 con 36px de ancho): -4px por lado los deja tocándose borde con
   borde, sin solaparse ni comerse el toque del vecino. */
.btn-eliminar::after, .btn-descargar::after { content: ""; position: absolute; inset: -4px; }
.btn-descargar { right: 56px; font-size: 16px; }
/**
 * MEMOVIAJE — Galería de Recuerdos
 * Rediseño: Botón Cerrar (X) + Flechas de Navegación
 *
 * Compatibilidad: All modern browsers (Chrome, Safari, Firefox, Edge)
 * Dependencias: Ninguna (CSS puro)
 * Tamaño: ~2.5 KB minificado
 */

/* ============================================
   VARIABLES (Asegurar que existen en raíz)
   ============================================ */
:root {
    --paper: #FBFAF8;           /* Fondo app */
    --ink: #BE4F37;             /* Color primario (rojo tinta) */
    --gold: #C9922E;            /* Acento (no usado aquí) */
    --text: #16120F;            /* Texto principal */
    --gray-light: #E8E6E3;      /* Borde sutil */
    --gray-medium: #D4D1CC;     /* Texto secundario */
    --transition-smooth: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   BOTÓN CERRAR (X)
   ============================================ */

.btn-close {
    /* Dimensiones accesibles */
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    /* Estilo base */
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--gray-light);
    border-radius: 12px;

    /* Interacción */
    cursor: pointer;
    transition:
        background-color var(--transition-smooth),
        border-color var(--transition-smooth),
        box-shadow var(--transition-smooth),
        transform var(--transition-smooth);

    /* Reset */
    outline: none;
    padding: 0;
    font-family: inherit;
}

/* Icono X: dos líneas diagonales */
.btn-close::before,
.btn-close::after {
    content: '';
    position: absolute;
    background-color: var(--ink);
    transition: background-color var(--transition-smooth);
}

.btn-close::before {
    width: 20px;
    height: 2px;
    transform: rotate(45deg);
}

.btn-close::after {
    width: 20px;
    height: 2px;
    transform: rotate(-45deg);
}

/* Estados interactivos */
.btn-close:hover {
    background-color: #FFFFFF;
    border-color: var(--ink);
    box-shadow: 0 4px 12px rgba(190, 79, 55, 0.15);
    transform: scale(1.05);
}

.btn-close:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(190, 79, 55, 0.1);
}

/* Focus accesible */
.btn-close:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* Disabled */
.btn-close:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--gray-light);
}

/* Variante MINIMALISTA */
.btn-close.minimal {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.btn-close.minimal:hover {
    background-color: rgba(190, 79, 55, 0.08);
    border-color: transparent;
    box-shadow: none;
}

/* Variante OUTLINED (elegante, recomendada) */
.btn-close.outlined {
    background-color: transparent;
    border: 1.5px solid var(--ink);
    border-radius: 10px;
}

.btn-close.outlined:hover {
    background-color: var(--ink);
    box-shadow: 0 4px 12px rgba(190, 79, 55, 0.2);
}

.btn-close.outlined:hover::before,
.btn-close.outlined:hover::after {
    background-color: var(--paper);
}

/* ============================================
   BOTÓN FLECHA (NAVEGACIÓN)
   ============================================ */

.btn-arrow {
    /* Dimensiones accesibles */
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    /* Estilo base */
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;

    /* Interacción */
    cursor: pointer;
    transition:
        background-color var(--transition-smooth),
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth);

    /* Reset */
    outline: none;
    padding: 0;
    font-family: inherit;
}

/* Icono flecha: línea + punta angular */
.btn-arrow::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: var(--ink);
    transition: background-color var(--transition-smooth);
}

.btn-arrow::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-top: 2px solid var(--ink);
    border-right: 2px solid var(--ink);
    transition: border-color var(--transition-smooth);
    right: 12px;
    transform: rotate(45deg);
}

/* Flecha SIGUIENTE (derecha) */
.btn-arrow.next::after {
    right: 12px;
}

/* Flecha ANTERIOR (izquierda) */
.btn-arrow.prev::after {
    right: auto;
    left: 12px;
    transform: rotate(-135deg);
}

/* Estados interactivos */
.btn-arrow:hover {
    background-color: var(--ink);
    box-shadow: 0 6px 16px rgba(190, 79, 55, 0.2);
}

.btn-arrow:hover::before,
.btn-arrow:hover::after {
    border-color: var(--paper);
    background-color: var(--paper);
}

.btn-arrow:active {
    transform: scale(0.96);
}

/* Focus accesible */
.btn-arrow:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* Disabled */
.btn-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: var(--gray-light);
}

/* Variante MINIMALISTA */
.btn-arrow.minimal {
    background-color: transparent;
}

.btn-arrow.minimal:hover {
    background-color: rgba(190, 79, 55, 0.08);
    box-shadow: none;
}

.btn-arrow.minimal:hover::before,
.btn-arrow.minimal:hover::after {
    border-color: var(--ink);
    background-color: var(--ink);
}

/* Variante OUTLINED (elegante, recomendada) */
.btn-arrow.outlined {
    background-color: transparent;
    border: 1.5px solid var(--ink);
}

.btn-arrow.outlined:hover {
    background-color: var(--ink);
    box-shadow: 0 4px 12px rgba(190, 79, 55, 0.2);
}

.btn-arrow.outlined:hover::before,
.btn-arrow.outlined:hover::after {
    border-color: var(--paper);
    background-color: var(--paper);
}

/* ============================================
   DARK MODE (Opcional)
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #1A1917;
        --ink: #E8A084;
        --gray-light: #332E2A;
    }

    /* Los botones se adaptan automáticamente */
    .btn-close {
        background-color: rgba(50, 46, 42, 0.9);
        border-color: var(--gray-light);
    }

    .btn-close:hover {
        background-color: rgba(80, 76, 72, 1);
        border-color: var(--ink);
    }

    .btn-arrow {
        background-color: rgba(50, 46, 42, 0.9);
    }

    .btn-arrow:hover {
        background-color: var(--ink);
    }
}

/* ============================================
   RESPONSIVE (Opcional)
   ============================================ */

/* En pantallas muy pequeñas, aumentar tamaño */
@media (max-width: 480px) {
    .btn-close {
        width: 48px;
        height: 48px;
    }

    .btn-arrow {
        width: 52px;
        height: 52px;
    }
}

/* ============================================
   UTILIDADES (Opcional)
   ============================================ */

/* Grupo de botones (si se usan juntos) */
.btn-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Alineación en esquina (top-right típico) */
.btn-close-top-right {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* Alineación de flechas en centro (left/right) */
.btn-arrow-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
}

.btn-arrow-nav.left {
    left: 1rem;
}

.btn-arrow-nav.right {
    right: 1rem;
}
/**
 * MEMOVIAJE v1.98 — Botones de galería rediseñados (CORRECCIÓN)
 *
 * Cambios desde v1.97:
 * - Botones más grandes y visibles (56px)
 * - Posicionamiento más claro y accesible
 * - Colores mejorados (más contraste)
 * - Mejor hover/active states
 */

:root {
  --paper: #FBFAF8;
  --ink: #BE4F37;
  --text: #16120F;
  --shadow: rgba(190, 79, 55, 0.15);
}

/* ===== BOTÓN CERRAR (X) ===== */
.btn-close-modal,
button[class*="close"][class*="gallery"],
.card [class*="btn"][class*="close"] {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--ink);
  border-radius: 12px;

  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Icono X (dos líneas rotadas) */
.btn-close-modal::before,
.btn-close-modal::after,
button[class*="close"][class*="gallery"]::before,
button[class*="close"][class*="gallery"]::after,
.card [class*="btn"][class*="close"]::before,
.card [class*="btn"][class*="close"]::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: background 150ms;
}

.btn-close-modal::before,
button[class*="close"][class*="gallery"]::before,
.card [class*="btn"][class*="close"]::before {
  transform: rotate(45deg);
}

.btn-close-modal::after,
button[class*="close"][class*="gallery"]::after,
.card [class*="btn"][class*="close"]::after {
  transform: rotate(-45deg);
}

/* Hover/Active */
.btn-close-modal:hover,
button[class*="close"][class*="gallery"]:hover,
.card [class*="btn"][class*="close"]:hover {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 6px 16px var(--shadow);
  transform: scale(1.08);
}

.btn-close-modal:hover::before,
.btn-close-modal:hover::after,
button[class*="close"][class*="gallery"]:hover::before,
button[class*="close"][class*="gallery"]:hover::after,
.card [class*="btn"][class*="close"]:hover::before,
.card [class*="btn"][class*="close"]:hover::after {
  background: var(--paper);
}

.btn-close-modal:active,
button[class*="close"][class*="gallery"]:active,
.card [class*="btn"][class*="close"]:active {
  transform: scale(0.96);
}

/* Focus */
.btn-close-modal:focus-visible,
button[class*="close"][class*="gallery"]:focus-visible,
.card [class*="btn"][class*="close"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ===== BOTÓN FLECHA ===== */
.btn-arrow-gallery,
button[class*="arrow"][class*="gallery"],
.card [class*="btn"][class*="arrow"] {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--ink);
  border-radius: 50%;

  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  padding: 0;
  font-family: inherit;
}

/* Icono flecha (línea + punta) */
.btn-arrow-gallery::before,
button[class*="arrow"][class*="gallery"]::before,
.card [class*="btn"][class*="arrow"]::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: background 150ms;
}

.btn-arrow-gallery::after,
button[class*="arrow"][class*="gallery"]::after,
.card [class*="btn"][class*="arrow"]::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-top: 2.5px solid var(--ink);
  border-right: 2.5px solid var(--ink);
  border-radius: 1px;
  transition: border-color 150ms;
  transform: rotate(45deg);
}

/* Flecha siguiente (derecha) */
.btn-arrow-gallery.next::after,
button[class*="arrow"][class*="next"]::after,
.card [class*="btn"][class*="arrow"][class*="next"]::after {
  right: 14px;
}

.btn-arrow-gallery.next::before,
button[class*="arrow"][class*="next"]::before,
.card [class*="btn"][class*="arrow"][class*="next"]::before {
  right: 22px;
}

/* Flecha anterior (izquierda) */
.btn-arrow-gallery.prev::after,
button[class*="arrow"][class*="prev"]::after,
.card [class*="btn"][class*="arrow"][class*="prev"]::after {
  left: 14px;
  transform: rotate(-135deg);
}

.btn-arrow-gallery.prev::before,
button[class*="arrow"][class*="prev"]::before,
.card [class*="btn"][class*="arrow"][class*="prev"]::before {
  left: 22px;
}

/* Hover/Active */
.btn-arrow-gallery:hover,
button[class*="arrow"][class*="gallery"]:hover,
.card [class*="btn"][class*="arrow"]:hover {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 6px 16px var(--shadow);
}

.btn-arrow-gallery:hover::before,
.btn-arrow-gallery:hover::after,
button[class*="arrow"][class*="gallery"]:hover::before,
button[class*="arrow"][class*="gallery"]:hover::after,
.card [class*="btn"][class*="arrow"]:hover::before,
.card [class*="btn"][class*="arrow"]:hover::after {
  background: var(--paper);
  border-color: var(--paper);
}

.btn-arrow-gallery:active,
button[class*="arrow"][class*="gallery"]:active,
.card [class*="btn"][class*="arrow"]:active {
  transform: scale(0.94);
}

/* Focus */
.btn-arrow-gallery:focus-visible,
button[class*="arrow"][class*="gallery"]:focus-visible,
.card [class*="btn"][class*="arrow"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ===== POSICIONAMIENTO EN GALERÍA ===== */
/* Botón cerrar: esquina superior derecha */
.card .btn-close-modal,
.card button[class*="close"],
[class*="gallery"] .btn-close-modal,
[class*="gallery"] button[class*="close"] {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}

/* Flechas: lados */
[class*="gallery"] .btn-arrow-gallery,
[class*="gallery"] button[class*="arrow"],
.card .btn-arrow-gallery,
.card button[class*="arrow"] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
}

[class*="gallery"] .btn-arrow-gallery.prev,
[class*="gallery"] button[class*="arrow"][class*="prev"],
.card .btn-arrow-gallery.prev,
.card button[class*="arrow"][class*="prev"] {
  left: 12px;
}

[class*="gallery"] .btn-arrow-gallery.next,
[class*="gallery"] button[class*="arrow"][class*="next"],
.card .btn-arrow-gallery.next,
.card button[class*="arrow"][class*="next"] {
  right: 12px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
  .btn-close-modal,
  button[class*="close"][class*="gallery"],
  .card [class*="btn"][class*="close"],
  .btn-arrow-gallery,
  button[class*="arrow"][class*="gallery"],
  .card [class*="btn"][class*="arrow"] {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1A1917;
    --ink: #E8A084;
  }

  .btn-close-modal,
  button[class*="close"][class*="gallery"],
  .card [class*="btn"][class*="close"],
  .btn-arrow-gallery,
  button[class*="arrow"][class*="gallery"],
  .card [class*="btn"][class*="arrow"] {
    background: rgba(50, 46, 42, 0.9);
    border-color: var(--ink);
  }
}

/* ---------------- Calendario mensual (B4) ----------------
   TAB aparte de la lista/acordeón de días: una cuadrícula de mes con la
   portada y el resumen de cada día. Usa las variables de siempre, así que
   el modo oscuro sale gratis, sin reglas propias aquí. */
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 18px 0 14px;
}
.cal-titulo { font-family: var(--serif); font-size: 1.15rem; text-transform: capitalize; }
.cal-flecha {
  width: 40px; height: 40px; min-height: 0; flex: none; border-radius: 50%;
  border: 1px solid var(--linea-2); background: var(--papel-2); color: var(--texto);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cal-flecha:hover { border-color: var(--tinta-borde); color: var(--tinta-fuerte); }
.cal-mes-vacio { margin: 0 0 10px; }

.cal-cabecera {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  font-size: .7rem; font-weight: 700; color: var(--texto-3); text-transform: uppercase;
  letter-spacing: .04em; text-align: center; margin-bottom: 6px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.cal-celda {
  display: flex; flex-direction: column; position: relative;
  aspect-ratio: 3 / 4; border-radius: var(--r-s); border: 1px solid var(--linea);
  background: var(--papel-2); overflow: hidden; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: default;
}
.cal-hueco { visibility: hidden; border-color: transparent; background: none; }
.cal-sin { background: var(--papel-3); border-style: dashed; padding: 5px 0 0 6px; }
.cal-sin .cal-num { color: var(--texto-3); }

.cal-con-datos {
  cursor: pointer; color: #fff;
  transition: transform .15s ease, border-color .15s ease;
}
.cal-con-datos:hover { transform: translateY(-1px); border-color: var(--tinta-borde); }
.cal-con-datos:active { transform: translateY(0); }
.cal-con-datos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cal-con-datos::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 38%, rgba(20, 14, 11, .85));
}
.cal-sin-foto {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--tinta-hero), var(--tinta));
}
.cal-num {
  position: relative; z-index: 2; display: block; padding: 5px 6px 0;
  font-size: .76rem; font-weight: 700;
}
.cal-con-datos .cal-num { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.cal-datos {
  position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1px;
  margin-top: auto; padding: 0 6px 6px;
}
.cal-diaN { font-size: .66rem; font-weight: 700; opacity: .95; }
.cal-cifra { font-size: .64rem; opacity: .9; line-height: 1.3; }
.cal-cifra.cal-pendiente { opacity: .68; font-style: italic; }
.cal-sin-fecha { margin-top: 10px; }

/* Por debajo de 480px, 7 columnas dejan ~50px por celda: "1 parada" ya
   partía en dos líneas y la "Sensación —" (un dato aún de relleno, sin B3)
   quedaba cortada por el `overflow: hidden` sin que se notara por qué. Se
   sube el alto de la celda y se calla ese dato de relleno aquí — vuelve solo
   cuando B3 le dé un número real que valga la pena apretar en tan poco sitio. */
@media (max-width: 480px) {
  .cal-celda { aspect-ratio: 3 / 4.6; }
  .cal-diaN, .cal-cifra { font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cal-num { font-size: .68rem; padding: 4px 4px 0; }
  .cal-datos { padding: 0 4px 4px; }
  .cal-pendiente { display: none; }
}

/* ============= Barra de navegación inferior (v2.6) ============= */
.navbar-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  background: var(--papel-2);
  border-top: 1px solid var(--linea-2);
  box-shadow: var(--sombra-nav);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  gap: 0;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  cursor: pointer;
  text-decoration: none;
  color: var(--texto-2);
  border: 0;
  background: none;
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  text-align: center;
  transition: color .15s, background .15s;
  min-height: 44px;
  border-radius: 8px;
}

.nav-item:hover {
  color: var(--texto);
  background: var(--papel-3);
}

.nav-item.active {
  color: var(--tinta-fuerte);
  background: var(--tinta-suave);
}

.nav-icon {
  display: block;
  font-size: 1.4rem;
  line-height: 1;
}

.nav-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Ajustar padding de main para la barra inferior */
main {
  padding-bottom: calc(104px + max(8px, env(safe-area-inset-bottom))) !important;
}

/* Panel de usuario: junto a "Salir", dentro del flex de `.barra`.
   Antes era `position: absolute; top/right` — fuera del flujo, así que en
   cualquier móvil donde "← Biblioteca" + el logo MEMOVIAJE no cabían en el
   hueco libre, este botón se quedaba clavado a 16px del borde y se comía el
   logo por encima (visto en QA visual a 320-430px: hasta 96px de solape).
   `min-width: 0` es lo que permite que, como cualquier otro hijo de `.barra`,
   se encoja de verdad — el nombre ya tiene `overflow:hidden` + elipsis, así
   que primero desaparece el nombre y solo si hace falta más se queda en
   avatar + "Salir", nunca solapado. */
.user-button {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--linea-2);
  background: var(--papel-2);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s, background .15s;
}

.user-button:hover {
  border-color: var(--tinta-borde);
  background: var(--tinta-suave);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.user-avatar.sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
}

.user-name {
  font-size: .82rem;
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modal de cuenta de usuario */
.modal-cuenta {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: var(--velo);
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

.modal-cuenta.hidden {
  display: none;
}

.modal-cuenta-contenido {
  background: var(--papel-2);
  border: 1px solid var(--linea-2);
  border-radius: var(--r-l);
  padding: 28px 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--sombra-l);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-cuenta-header {
  text-align: center;
  margin-bottom: 24px;
}

.modal-cuenta-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--linea-2);
}

.modal-cuenta-avatar.sin-foto {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
}

.modal-cuenta-titulo {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 1.3rem;
}

.modal-cuenta-info {
  margin-bottom: 20px;
}

.modal-cuenta-info-fila {
  padding: 12px 0;
  border-bottom: 1px solid var(--linea);
}

.modal-cuenta-info-fila:last-child {
  border-bottom: 0;
}

.modal-cuenta-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
  display: block;
}

.modal-cuenta-valor {
  font-size: .95rem;
  color: var(--texto);
}

.modal-cuenta-acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

/* Menú de gestión: modal para las opciones */
.menu-gestion {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: var(--velo);
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

.menu-gestion.hidden {
  display: none;
}

.menu-gestion-contenido {
  background: var(--papel-2);
  border: 1px solid var(--linea-2);
  border-radius: var(--r-l);
  padding: 0;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--sombra-l);
  overflow: hidden;
}

.menu-gestion-titulo {
  padding: 20px;
  border-bottom: 1px solid var(--linea);
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 0;
}

.menu-gestion-opciones {
  display: flex;
  flex-direction: column;
}

.menu-gestion-opcion {
  padding: 14px 20px;
  border-bottom: 1px solid var(--linea);
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--texto);
  transition: background .15s;
  min-height: 44px;
}

.menu-gestion-opcion:last-child {
  border-bottom: 0;
}

.menu-gestion-opcion:hover {
  background: var(--papel-3);
}

.menu-gestion-opcion.peligro {
  color: var(--error);
}

.menu-gestion-opcion.peligro:hover {
  background: var(--error-fondo);
}

.menu-gestion-botones {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--linea);
}

.menu-gestion-botones .btn {
  flex: 1;
}

/* KPIs en grid 2x2 en tarjetas de biblioteca */
.hero .kpis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  font-size: .75rem;
}

.kpi-item {
  background: rgba(255, 255, 255, 0.12);
  border-radius: calc(var(--r-l) * 0.5);
  padding: 8px;
  text-align: center;
  backdrop-filter: blur(4px);
}

.kpi-item .kpi-valor {
  font-weight: 700;
  font-size: clamp(0.9rem, 1.1vw, 1.2rem);
  line-height: 1.2;
  opacity: 1;
}

.kpi-item .kpi-label {
  font-size: 0.65rem;
  opacity: 0.85;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ═════════════════════════════════════════════════════════════════
   Navegación de días: panel del día + pills, en flujo normal
   ═════════════════════════════════════════════════════════════════
   Portado del prototipo aprobado (`PROTOTIPO-NAV-DIAS/`), corrigiendo dos
   cosas: el prototipo vivía SOLO a pantalla completa, con el panel como
   bottom-sheet `position:fixed` sobre un fondo #fff fijo. Aquí el panel y la
   barra de pills conviven con el resto de `pantallaViaje()` (portada, diario,
   IA, llevarte el viaje...) en el flujo normal de la página — nunca fixed —
   y usan los tokens de color YA definidos en esta hoja (`--tinta`, `--texto`,
   `--papel-2`...), no los del prototipo aislado, para responder igual que el
   resto de la app al modo oscuro del sistema. */

.panel-dia {
  position: relative;
  background: var(--papel-2);
  border: 1px solid var(--linea-2);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-s);
  overflow: hidden;
  margin: 16px 0 20px 0;
}

.panel-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--linea-2);
}

.panel-lugar {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  color: var(--texto); margin-bottom: 4px;
}

.panel-fecha { font-size: .82rem; color: var(--texto-2); }

/* `position: relative` porque `installFlechas()` cuelga las flechas de aquí
   (son hijas de `.eventos-container`, hermanas de `.eventos-track` y
   `.eventos-dots`): sin esto se posicionarían contra `.panel-dia` entero,
   quedando más arriba de lo que toca. */
.eventos-container { position: relative; padding: 16px 0; }

/* Grid responsivo: 1 col en móvil, 2 en móvil medio/tablet estrecha,
   2-3 en tablet ancha (auto-fit), 3 fijas en escritorio (ver media
   queries más abajo). Sustituye al carrusel horizontal anterior. */
.eventos-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0 16px;
}

.evento-card {
  width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--papel-3);
  border: 1px solid var(--linea-2);
  transition: transform .15s, box-shadow .15s;
}

.evento-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-s); }

.evento-foto, .evento-foto-vacia {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--tinta-hero), var(--tinta));
}

@media (min-width: 480px) {
  .eventos-track { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0 18px; }
}

@media (min-width: 768px) {
  .eventos-track { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 0 20px; }
  .evento-foto, .evento-foto-vacia { height: 220px; }
}

@media (min-width: 1200px) {
  .eventos-track { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 24px; }
  .evento-foto, .evento-foto-vacia { height: 240px; }
}

.evento-contenido { padding: 14px 16px; }

.evento-hora {
  font-size: .72rem;
  color: var(--tinta-fuerte);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}

.evento-titulo {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  color: var(--texto); margin-bottom: 6px; line-height: 1.3;
}

.evento-descripcion, .evento-nota {
  font-size: .8rem; color: var(--texto-2); line-height: 1.4;
}
.evento-nota { margin-top: 4px; }

.eventos-dots {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 10px 20px 0;
}

.evento-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: var(--linea-2); cursor: pointer; transition: background .15s;
}

.evento-dot.activo { background: var(--tinta); width: 22px; border-radius: 4px; }

.eventos-flecha {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 16px;
  transition: background .15s;
}

.eventos-flecha:hover { background: rgba(0, 0, 0, 0.7); }

/* Con el grid responsivo ya no hay carrusel horizontal que navegar:
   las flechas quedan permanentemente ocultas (display: none arriba).
   El JS de installFlechas() sigue creándolas en el DOM, pero no se
   muestran en ningún tamaño de pantalla. */

.dia-barra-inferior {
  position: fixed;
  top: 0;
  right: 0;
  width: 64px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--linea-2);
  background: var(--papel);
  z-index: 100;
  box-sizing: border-box;
  padding-top: 60px;
}

.barra-progreso-viaje {
  padding: 8px 4px;
  border-bottom: 1px solid var(--linea-2);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.progreso-texto {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-primario);
  margin-bottom: 6px;
  text-align: center;
}

.progreso-barra {
  width: 100%;
  height: 4px;
  background: var(--linea-2);
  border-radius: 2px;
  overflow: hidden;
}

.progreso-lleno {
  height: 100%;
  background: linear-gradient(90deg, #7A2E2E, #A67C2E);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.dias-pills-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  flex: 1;
}

.dias-pills-container::-webkit-scrollbar { display: none; }

.dia-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r);
  transition: transform .15s, background .15s;
  flex-shrink: 0;
  text-align: center;
  position: relative;
  width: 52px;
}

.dia-pill:hover:not([aria-pressed="true"]) { background: var(--papel-3); }

.dia-pill[aria-pressed="true"] {
  background: var(--tinta);
  transform: translateY(-4px) scale(1.04);
}

.dia-pill-foto, .dia-pill-vacio {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--tinta-hero), var(--tinta));
}
.dia-pill-vacio { background: var(--papel-3); }

.dia-pill-numero { font-size: .68rem; font-weight: 700; color: var(--texto); line-height: 1; }
.dia-pill[aria-pressed="true"] .dia-pill-numero { color: #ffffff; }

.dia-pill-fecha { font-size: .62rem; color: var(--texto-2); line-height: 1; }
.dia-pill[aria-pressed="true"] .dia-pill-fecha { color: rgba(255, 255, 255, 0.85); }

/* Tablets (768-999px): no se ensancha el panel fuera de `main` aquí —eso
   solo pasa a partir de 1000px, en el bloque de abajo— porque `main` sigue
   topado en 720px hasta esa misma marca y sacar el panel antes lo dejaría
   descentrado respecto al héroe y al resto de la pantalla: el mismo
   desalineamiento que ya se descartó para `.bloque-viajes` más arriba. Lo
   que sí gana una tablet es aire interior: ni tan apretado como en un móvil
   estrecho, ni el ensanche completo de escritorio. */
@media (min-width: 768px) and (max-width: 999px) {
  .panel-header { padding: 22px 26px 16px; }
  .dias-pills-container { padding: 14px 8px; gap: 16px; }
  .dia-pill { padding: 10px 14px; }
}

/* Escritorio: mismo ancho que `.hero-viaje` (1180px centrado respecto al
   viewport), para que el panel no se vea angosto junto a la portada del
   viaje.
   `.dia-barra-inferior` SALIÓ de aquí en el QA visual del 28/08/2026: esta
   regla es de antes de que esa clase fuera el carril lateral de 64px del
   Sprint 6, y compartir selector la convertía en una capa fija de 1180px de
   ancho y 100vh de alto (`margin-left:50%; translateX(-50%)` sobre un
   `position:fixed; right:0` ya puesto en la regla base) tapando media
   portada del viaje — visible y clicable por encima del contenido real,
   con z-index:100. El Sprint 6 ya gobierna `.dia-barra-inferior` por su
   cuenta (regla base más abajo + su propio `@media (max-width: 999px)`),
   así que aquí solo se queda `.panel-dia`. */
@media (min-width: 1000px) {
  .panel-dia {
    margin-left: 50%; transform: translateX(-50%);
    width: 100vw; max-width: 1180px; box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .dia-pill { padding: 6px 10px; }
  .panel-lugar { font-size: 1.1rem; }
  .evento-titulo { font-size: .92rem; }
  /* Cabecera del panel del día menos apretada en un móvil estrecho: el
     18/20/14 pensado para escritorio deja demasiado aire arriba y a los
     lados cuando el ancho disponible ya es de por sí escaso. */
  .panel-header { padding: 12px 14px 10px; }
}

/* Sprint 6 (28/08/2026) — la barra de días en pantallas < 1000px.
   El nombre de la clase (`dia-barra-inferior`, "barra INFERIOR") ya decía lo
   que tenía que ser en móvil, pero el CSS nunca lo hizo: hasta ahora este
   carril era SIEMPRE un lateral fijo de 64px pegado al borde derecho y a
   TODA la altura de la pantalla, también en un teléfono. Tiene sentido en
   escritorio (ratón, alto de sobra); en un móvil roba el borde derecho
   —donde iOS/Android leen el gesto de "atrás"— sin dar nada que una barra
   inferior compacta no dé mejor. Escritorio (>=1000px, bloque de arriba) no
   cambia un píxel.
   Deliberadamente solo con media queries, no con clases `device-*` de
   deviceDetector.js: el cambio de layout tiene que seguir funcionando igual
   aunque ese script tarde en cargar o no llegue a disparar. */
@media (max-width: 999px) {
  .dia-barra-inferior {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    border-left: 0;
    border-top: 1px solid var(--linea-2);
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .barra-progreso-viaje {
    writing-mode: horizontal-tb;
    text-orientation: initial;
    transform: none;
    border-bottom: 0;
    border-right: 1px solid var(--linea-2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: none;
    width: 92px;
  }

  .progreso-texto {
    margin-bottom: 4px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dias-pills-container {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Aviso de versión nueva.
   Abajo y no arriba: arriba tapa la cabecera y en un iPhone en modo app se mete
   debajo de la muesca. Y con `env(safe-area-inset-bottom)` para que no quede
   pegado a la barra de gestos. */
.aviso-version {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 16px;
  background: var(--carbon2, #1a1614);
  color: var(--crema, #f4efe7);
  border: 1px solid var(--linea, #3a332c);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  font-size: .95rem;
}
.aviso-version span { flex: 1 1 180px }
.aviso-version .btn { padding: 8px 14px; font-size: .9rem }