/* WondarCore — código propio, no generado. Se puede modificar libremente.

   Asistente "Nuevo viaje" guiado de /myTrips (pedido de Gonzalo, 2026-10-12) — diseño tomado de
   Gonzalo/pruebas/nuevo-viaje-guiado.html. Encabezado con el mismo azul que .mt-hero, tarjetas
   blancas como .fp-board, botones píldora como .fp-cta-btn. Las fotos (continentes, gustos,
   destinos) las pone nuevo-viaje-guiado.js por style inline, nunca este archivo. */

.nv-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1500; /* arriba del header y la barra inferior; abajo del login (2001) y de Wondar IA (2100) */
  background: rgba(10, 10, 20, 0.6);
}
.nv-overlay--open { display: flex; }
body.nv-bloqueado { overflow: hidden; }

/* ── Panel: pantalla completa en celular, ventana centrada desde tablet ── */
.nv-panel {
  background: var(--color-fondo);
  color: var(--color-texto);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
}
.nv-panel button, .nv-panel input { font-family: inherit; }
.nv-panel button { cursor: pointer; }

/* ── Encabezado ── */
.nv-hero { flex: 0 0 auto; background: #1e3650; color: #fff; padding: 0.75rem 1rem 1.1rem; }
.nv-hero-top { display: flex; align-items: center; gap: 0.25rem; }
.nv-paso { flex: 1; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.nv-cerrar { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.12); color: #fff; display: flex; align-items: center; justify-content: center; }
.nv-cerrar:hover { background: rgba(255, 255, 255, 0.22); }
.nv-progreso { display: flex; gap: 0.3rem; margin: 0.35rem 0 1rem; }
.nv-progreso i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); transition: background 0.2s; }
.nv-progreso i.on { background: var(--color-acento); }
.nv-hero-main { display: flex; align-items: center; gap: 0.9rem; }
.nv-hero-icono { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: #1e3650; display: flex; align-items: center; justify-content: center; }
.nv-titulo { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 0.25rem; color: #fff; }
.nv-sub { font-size: 0.86rem; color: rgba(255, 255, 255, 0.75); margin: 0; line-height: 1.4; }
.nv-resumen { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.9rem; }
.nv-resumen:empty { display: none; }
.nv-resumen button { border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.1); border-radius: 50px; font-size: 0.74rem; font-weight: 600; color: #fff; min-height: 36px; padding: 0 0.8rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-resumen button:hover { background: rgba(255, 255, 255, 0.2); }

/* ── Cuerpo ── */
.nv-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem; }
.nv-card { background: var(--color-fondo-superficie); border-radius: 14px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); padding: 1rem; margin-bottom: 0.85rem; }
.nv-card-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.nv-card-titulo { font-size: 0.92rem; font-weight: 700; margin: 0; flex: 1; }
.nv-card-cuenta { font-size: 0.7rem; font-weight: 700; color: var(--color-secundario); background: var(--color-secundario-fondo); border-radius: 50px; padding: 0.15rem 0.55rem; }
.nv-ayuda { font-size: 0.8rem; color: var(--color-texto-secundario); line-height: 1.45; margin: 0.75rem 0 0; }
.nv-vacio { text-align: center; color: var(--color-texto-secundario); padding: 2rem 1rem; font-size: 0.92rem; }

/* continentes: tarjetas con foto */
.nv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-bottom: 0.85rem; }
.nv-cont { position: relative; height: 7.5rem; border-radius: 14px; border: none; color: #fff; text-align: left; padding: 0.8rem; display: flex; flex-direction: column; justify-content: flex-end; background-color: #1e3650; background-size: cover; background-position: center; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); transition: transform 0.15s, box-shadow 0.15s; overflow: hidden; }
.nv-cont:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
.nv-cont.on { outline: 3px solid var(--color-acento); outline-offset: 2px; }
.nv-cont strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.nv-cont span { font-size: 0.74rem; font-weight: 500; opacity: 0.9; }

/* pastillas (países, meses) */
.nv-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.nv-chip { min-height: 40px; padding: 0 0.9rem; border-radius: 50px; border: 1px solid var(--color-borde); background: var(--color-fondo-superficie); font-size: 0.85rem; font-weight: 600; color: var(--color-texto); display: inline-flex; align-items: center; gap: 0.35rem; text-transform: capitalize; transition: border-color 0.15s, background 0.15s; }
.nv-chip:hover { border-color: var(--color-borde-fuerte); }
.nv-chip small { font-size: 0.72rem; font-weight: 500; color: var(--color-texto-terciario); }
.nv-chip.on { background: var(--color-primario-fondo); border-color: var(--color-primario); color: var(--color-primario); }
.nv-chip.on small { color: var(--color-primario); opacity: 0.7; }
.nv-buscar { width: 100%; min-height: 44px; border-radius: 50px; border: 1px solid var(--color-borde); background: var(--color-fondo); color: var(--color-texto); padding: 0 1rem; font-size: 0.9rem; margin-bottom: 0.75rem; }
.nv-buscar:focus { outline: 2px solid var(--color-primario); outline-offset: 1px; }

/* filas-opción (todo el continente, invitar) */
.nv-opcion { display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left; background: var(--color-fondo-superficie); border: 1.5px solid transparent; border-radius: 14px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); padding: 0.85rem 1rem; margin-bottom: 0.85rem; min-height: 60px; }
.nv-opcion.on { border-color: var(--color-primario); background: var(--color-primario-fondo); }
.nv-opcion-icono { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; background: var(--color-fondo); color: var(--color-texto); display: flex; align-items: center; justify-content: center; }
.nv-opcion.on .nv-opcion-icono { background: var(--color-primario); color: #fff; }
.nv-opcion-txt { flex: 1; }
.nv-opcion-txt strong { display: block; font-size: 0.92rem; font-weight: 700; color: var(--color-texto); }
.nv-opcion-txt span { font-size: 0.78rem; color: var(--color-texto-secundario); }
.nv-radio { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-borde-fuerte); display: flex; align-items: center; justify-content: center; color: #fff; }
.nv-opcion.on .nv-radio { background: var(--color-primario); border-color: var(--color-primario); }

/* gustos: mosaico de fotos */
.nv-seccion { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em; margin: 1.1rem 0 0.5rem; }
.nv-seccion:first-child { margin-top: 0.1rem; }
.nv-mosaico { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.nv-tile { position: relative; aspect-ratio: 1 / 1; border: none; border-radius: 12px; padding: 0.3rem 0.25rem; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; color: #fff; background-color: #1e3650; background-size: cover; background-position: center; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); overflow: hidden; transition: transform 0.15s; }
.nv-tile:hover { transform: translateY(-3px); }
.nv-tile strong { font-size: 0.62rem; font-weight: 700; line-height: 1.12; overflow-wrap: anywhere; }
.nv-tile small { font-size: 0.56rem; font-weight: 500; opacity: 0.85; }
.nv-tile.on { outline: 3px solid var(--color-secundario); outline-offset: 2px; }
.nv-tile-check { position: absolute; top: 0.3rem; right: 0.3rem; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; }
.nv-tile.on .nv-tile-check { background: var(--color-secundario); }

/* destinos: tarjetas con foto */
.nv-dests { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.nv-dest { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border: none; background: var(--color-fondo-superficie); border-radius: 14px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; }
.nv-dest:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
.nv-dest.on { outline: 3px solid var(--color-secundario); outline-offset: -3px; }
.nv-dest-foto { position: relative; height: 6.5rem; background-color: var(--color-fondo-hover); background-size: cover; background-position: center; }
.nv-dest-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.18), transparent 40%, rgba(0, 0, 0, 0.35)); }
.nv-dest-check { position: absolute; z-index: 1; top: 0.5rem; right: 0.5rem; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.25); color: #fff; display: flex; align-items: center; justify-content: center; }
.nv-dest.on .nv-dest-check { background: var(--color-secundario); }
.nv-dest-epoca { position: absolute; z-index: 1; top: 0.5rem; left: 0.5rem; max-width: calc(100% - 3rem); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; background: var(--color-exito); color: #fff; border-radius: 5px; padding: 3px 7px; }
.nv-dest-nota { position: absolute; z-index: 1; bottom: 0.5rem; right: 0.5rem; font-size: 0.78rem; font-weight: 800; background: #fff; color: #1a1a2e; border-radius: 7px; padding: 2px 7px; }
.nv-dest-info { padding: 0.6rem 0.7rem 0.7rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.nv-dest-info strong { font-size: 0.92rem; font-weight: 700; color: var(--color-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-dest-info > span { font-size: 0.76rem; color: var(--color-texto-secundario); }
.nv-dest-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.4rem; }
.nv-tag { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; padding: 3px 7px; border-radius: 5px; background: var(--color-secundario-fondo); color: var(--color-secundario); }
.nv-tag--match { background: var(--color-secundario); color: #fff; }
.nv-mas { display: block; margin: 1rem auto 0.25rem; min-height: 44px; border-radius: 50px; border: 1px solid var(--color-borde); background: var(--color-fondo-superficie); padding: 0 1.4rem; font-size: 0.85rem; font-weight: 700; color: var(--color-texto); }

/* resumen final */
.nv-portada { display: flex; gap: 3px; height: 7rem; border-radius: 10px; overflow: hidden; background: var(--color-fondo); margin-bottom: 0.9rem; }
.nv-portada i { flex: 1; background-color: var(--color-fondo-hover); background-size: cover; background-position: center; }
.nv-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--color-texto-secundario); margin-bottom: 0.3rem; }
.nv-nombre { width: 100%; border: none; border-bottom: 2px solid var(--color-borde); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-texto); padding: 0.2rem 0 0.4rem; background: none; }
.nv-nombre:focus { outline: none; border-bottom-color: var(--color-primario); }
.nv-datos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.nv-dato { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 50px; background: var(--color-fondo); color: var(--color-texto-secundario); }
.nv-dato--destino { background: var(--color-secundario-fondo); color: var(--color-secundario); }
.nv-lista { list-style: none; margin: 0; padding: 0; }
.nv-lista li { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0; border-top: 1px solid var(--color-borde); }
.nv-lista li:first-child { border-top: none; padding-top: 0; }
.nv-lista i { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background-color: var(--color-fondo-hover); background-size: cover; background-position: center; }
.nv-lista strong { display: block; font-size: 0.9rem; font-weight: 700; }
.nv-lista span { font-size: 0.76rem; color: var(--color-texto-secundario); }
.nv-lista b { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--color-texto-terciario); }

.nv-ia { display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left; border: none; background: var(--color-fondo-superficie); border-radius: 14px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); padding: 0.85rem 1rem; }
.nv-ia i { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #7ea8f5, #b090d9, #ef7fab, #f9c53f, #5fb87e); display: flex; align-items: center; justify-content: center; color: #fff; }
.nv-ia strong { display: block; font-size: 0.9rem; color: var(--color-texto); }
.nv-ia span span { font-size: 0.78rem; color: var(--color-texto-secundario); }

/* ── Pie ── */
.nv-pie { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)); background: var(--color-fondo-superficie); border-top: 1px solid var(--color-borde); }
/* "Omitir y crear viaje vacío" (2026-10-12, Gonzalo: arriba en el encabezado no se veía). En celular
   va en su propio renglón debajo de los botones; desde tablet, a la izquierda de la misma barra. */
.nv-link { order: 3; flex: 0 0 100%; min-height: 40px; background: none; border: none; color: var(--color-texto-secundario); font-size: 0.82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nv-link:hover { color: var(--color-texto); }
.nv-btn { min-height: 46px; border-radius: 50px; border: none; font-size: 0.9rem; font-weight: 700; padding: 0 1.4rem; transition: background 0.15s; }
.nv-btn--ghost { background: var(--color-fondo); color: var(--color-texto-secundario); }
.nv-btn--ghost:hover { background: var(--color-fondo-hover); }
.nv-btn--primario { background: var(--color-primario); color: var(--color-texto-sobre-color); flex: 1; }
.nv-btn--primario:hover { background: var(--color-primario-hover); }
.nv-btn--primario:disabled { background: var(--color-borde-fuerte); cursor: not-allowed; }

/* ── Tablet / PC ── */
@media (min-width: 768px) {
  .nv-overlay { align-items: center; justify-content: center; padding: 1.5rem; }
  .nv-panel { height: min(48rem, calc(100dvh - 3rem)); max-width: 50rem; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); }
  .nv-hero { padding: 1rem 1.75rem 1.4rem; }
  .nv-hero-icono { flex-basis: 56px; width: 56px; height: 56px; border-radius: 16px; }
  .nv-titulo { font-size: 1.75rem; }
  .nv-sub { font-size: 0.92rem; }
  .nv-body { padding: 1.5rem 1.75rem; }
  .nv-grid { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
  .nv-cont { height: 9.5rem; }
  .nv-mosaico { grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
  .nv-tile { padding: 0.35rem 0.4rem; }
  .nv-tile strong { font-size: 0.68rem; }
  .nv-tile small { font-size: 0.6rem; }
  .nv-dests { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
  .nv-dest-foto { height: 8rem; }
  .nv-portada { height: 9rem; }
  .nv-pie { padding: 0.9rem 1.75rem; justify-content: flex-end; align-items: center; }
  .nv-link { order: 0; flex: 0 1 auto; margin-right: auto; min-height: 46px; padding: 0; }
  .nv-btn--primario { flex: 0 1 auto; min-width: 14rem; }
}