/* ============================================================
   ALMAS EN RUTA — Portal del viajero: "Mis viajes" y Puntos Almas
   (assets/js/portal-viajes.js). Reutiliza las tarjetas de la portada
   (.ar-dcard de destinos.css) y sus variables --ar-*, así el modo
   oscuro sale de tema-oscuro.css sin reglas extra.
   ============================================================ */

#view-traveler .pv-home { max-width: 1120px; margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-left, 0px)) 90px; background: transparent }
#view-traveler .pv-hello { margin: 6px 0 20px }
#view-traveler .pv-sub { margin: 0; color: var(--ar-muted); font-size: 1.02rem }

/* Barra: botón para volver a "Mis viajes" desde un viaje */
#view-traveler .pv-volver { font-weight: 700 }
#view-traveler .pv-volver svg { transition: transform .3s cubic-bezier(.2, .8, .2, 1) }
#view-traveler .pv-volver:hover svg { transform: translateX(-3px) }

/* ── Tarjeta de puntos ── */
#view-traveler .pv-puntos { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; width: 100%; border: 0; text-align: left; cursor: pointer; padding: 20px 24px; border-radius: 24px; color: #FFFFFF; background: linear-gradient(150deg, #0E1E36 0%, #1A3A5C 60%, #2A5378 100%); box-shadow: 0 14px 34px -18px #0F1E3CB3; transition: transform .25s ease, box-shadow .25s ease; font: inherit }
#view-traveler .pv-puntos:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px #0F1E3CCC }
#view-traveler .pv-puntos-a { display: flex; align-items: center; gap: 14px }
#view-traveler .pv-puntos-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: #E4C07A26; color: #E4C07A }
#view-traveler .pv-puntos-ico svg { width: 24px; height: 24px }
#view-traveler .pv-puntos-l { font: 700 .72rem var(--ar-font-body); letter-spacing: .12em; text-transform: uppercase; color: #FFFFFFB8 }
#view-traveler .pv-puntos-v { font: 800 2rem/1.05 var(--ar-font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums }
#view-traveler .pv-puntos-v small { font-size: .5em; color: #E4C07A }
#view-traveler .pv-puntos-b { min-width: 0 }
#view-traveler .pv-puntos-n { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .9rem; margin-bottom: 8px }
#view-traveler .pv-puntos-n b { color: #E4C07A }
#view-traveler .pv-puntos-n span { color: #FFFFFFC7 }
#view-traveler .pv-puntos .progress-bar { background: #FFFFFF26 }
#view-traveler .pv-puntos-ir { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; white-space: nowrap }
#view-traveler .pv-puntos-ir svg { width: 16px; height: 16px; transition: transform .25s ease }
#view-traveler .pv-puntos:hover .pv-puntos-ir svg { transform: translateX(3px) }

/* ── Secciones ── */
#view-traveler .pv-sec { margin-top: 38px; scroll-margin-top: 80px }
#view-traveler .pv-sec-h { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px }
#view-traveler .pv-sec-h h2 { font: 800 clamp(1.7rem, 3.6vw, 2.4rem)/1.05 var(--ar-font-display); letter-spacing: -.03em; margin: 4px 0 0; color: var(--ar-ink) }
#view-traveler .pv-sec-h h2 em { font-style: normal; color: var(--ar-gold-deep) }
#view-traveler .pv-sec-h p { margin: 0; color: var(--ar-muted); max-width: 44ch }

/* ── Tarjetas de viaje (base: .ar-dcard de la portada) ── */
#view-traveler .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 0 }
#view-traveler .pv-card--mio { border: 0; padding: 0; width: 100%; text-align: left; cursor: pointer; font: inherit }
#view-traveler .pv-pill-done { background: #FFFFFFE6; color: #0F1E3C }
#view-traveler .pv-pill-done svg { width: 13px; height: 13px }
#view-traveler .pv-pay { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; color: var(--ar-muted); margin-bottom: 8px }
#view-traveler .pv-pay b { color: var(--ar-ink); font: 800 1.05rem var(--ar-font-display) }
#view-traveler .pv-entrar { display: block; margin-top: 10px; font-size: .84rem; font-weight: 700; color: var(--ar-gold-text) }
#view-traveler .pv-body { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 }
#view-traveler .pv-body p { margin: 0; color: var(--ar-muted); font-size: .94rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
#view-traveler .pv-ventaja { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 700; color: var(--ar-gold-text) }
#view-traveler .pv-ventaja svg { width: 15px; height: 15px; flex-shrink: 0 }
#view-traveler .pv-acc { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 4px }
#view-traveler .pv-ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: #1E7A45 }
#view-traveler .pv-ok svg { width: 17px; height: 17px }
#view-traveler .pv-ver { text-decoration: none; color: var(--ar-ink) }
#view-traveler .pv-ver svg { width: 15px; height: 15px }

/* ── Niveles ── */
#view-traveler .pv-niveles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
#view-traveler .pv-nivel { background: var(--ar-card); border-radius: 22px; padding: 20px; box-shadow: 0 10px 30px #13233F12; color: var(--ar-ink) }
#view-traveler .pv-nivel--on { background: linear-gradient(150deg, #0E1E36 0%, #1A3A5C 60%, #2A5378 100%); color: #FFFFFF; box-shadow: 0 0 0 2px #E4C07A, 0 14px 34px -18px #0F1E3CB3 }
#view-traveler .pv-nivel--pas { opacity: .72 }
#view-traveler .pv-nivel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px }
#view-traveler .pv-nivel-ico { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--ar-soft); color: var(--ar-gold-text) }
#view-traveler .pv-nivel--on .pv-nivel-ico { background: #E4C07A26; color: #E4C07A }
#view-traveler .pv-nivel-ico svg { width: 20px; height: 20px }
#view-traveler .pv-tu { font: 800 .7rem var(--ar-font-body); letter-spacing: .08em; text-transform: uppercase; background: #E4C07A; color: #0F1E3C; border-radius: 999px; padding: 4px 10px }
#view-traveler .pv-nivel h3 { font: 800 1.25rem var(--ar-font-display); letter-spacing: -.02em; margin: 0; color: inherit }
#view-traveler .pv-nivel-min { font-size: .84rem; color: var(--ar-muted); margin-bottom: 12px }
#view-traveler .pv-nivel--on .pv-nivel-min { color: #FFFFFFB8 }
#view-traveler .pv-nivel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
#view-traveler .pv-nivel li { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; line-height: 1.35 }
#view-traveler .pv-nivel li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--ar-gold-text) }
#view-traveler .pv-nivel--on li svg { color: #E4C07A }

/* ── Ganar y canjear ── */
#view-traveler .pv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px }
#view-traveler .pv-box { background: var(--ar-card); border-radius: 22px; padding: 22px; box-shadow: 0 10px 30px #13233F12; color: var(--ar-ink); min-width: 0 }
#view-traveler .pv-box h3 { font: 800 1.15rem var(--ar-font-display); letter-spacing: -.02em; margin: 0 0 10px }
#view-traveler .pv-gana { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ar-line); font-size: .93rem }
#view-traveler .pv-gana:last-child { border-bottom: 0 }
#view-traveler .pv-gana > span:nth-child(2) { flex: 1 }
#view-traveler .pv-gana b { color: var(--ar-gold-text); white-space: nowrap; font-size: .88rem }
#view-traveler .pv-gana-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--ar-soft); color: var(--ar-gold-text); flex-shrink: 0 }
#view-traveler .pv-gana-ico svg { width: 17px; height: 17px }
#view-traveler .pv-premio { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ar-line) }
#view-traveler .pv-premio:last-child { border-bottom: 0 }
#view-traveler .pv-premio-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
#view-traveler .pv-premio-m b { font-size: .95rem }
#view-traveler .pv-premio-m span { font-size: .84rem; color: var(--ar-muted) }
#view-traveler .pv-premio-m .progress-bar { margin-top: 6px; max-width: 220px }
#view-traveler .pv-premio-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; text-align: right }
#view-traveler .pv-premio-r small { font-size: .78rem; color: var(--ar-muted) }
#view-traveler .pv-pts { font: 800 .95rem var(--ar-font-display); color: var(--ar-gold-text); white-space: nowrap }
#view-traveler .pv-premio--ok .pv-premio-m b { color: var(--ar-ink) }

/* ── Invita y gana ── */
#view-traveler .pv-invita { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px; border-radius: 26px; color: #FFFFFF; background: linear-gradient(135deg, #8E6420, #A87A2C 55%, #B98C3C) }
#view-traveler .pv-invita-m { flex: 1 1 360px; min-width: 0 }
#view-traveler .pv-invita h2 { font: 800 clamp(1.5rem, 3vw, 2rem)/1.1 var(--ar-font-display); letter-spacing: -.03em; margin: 6px 0 8px; color: #FFFFFF }
#view-traveler .pv-invita p { margin: 0 0 14px; color: #FFFFFFE6 }
#view-traveler .pv-link { display: flex; align-items: center; gap: 8px; max-width: 100%; background: #00000026; border-radius: 999px; padding: 6px 6px 6px 16px; font-weight: 600; font-size: .9rem }
#view-traveler .pv-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#view-traveler .pv-copiar { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 14px; background: #FFFFFF; color: #0F1E3C; font: 700 .85rem var(--ar-font-body); cursor: pointer; flex-shrink: 0; transition: transform .2s ease }
#view-traveler .pv-copiar:active { transform: scale(.96) }
#view-traveler .pv-copiar svg { width: 15px; height: 15px }
#view-traveler .pv-wa { background: #25D366; color: #0B3B1E; border: 0; padding: 14px 22px; font-weight: 800 }
#view-traveler .pv-wa:hover { filter: brightness(1.05); box-shadow: 0 10px 22px -12px #00000080 }

/* ── Celular ── */
@media (max-width: 960px) {
  #view-traveler .pv-niveles, #view-traveler .pv-cols { grid-template-columns: 1fr }
}
@media (max-width: 700px) {
  #view-traveler .pv-grid { grid-template-columns: 1fr }
  #view-traveler .pv-grid .ar-dcard-feature { grid-column: auto }
  #view-traveler .pv-puntos { grid-template-columns: 1fr; gap: 14px; padding: 18px }
  #view-traveler .pv-puntos-ir { justify-self: start }
  #view-traveler .pv-invita { padding: 22px }
  #view-traveler .pv-wa { width: 100%; justify-content: center }
  #view-traveler .pv-volver span { display: none }
}
@media (prefers-reduced-motion: reduce) {
  #view-traveler .pv-puntos, #view-traveler .pv-volver svg { transition: none }
  #view-traveler .pv-puntos:hover { transform: none }
}
/* Modo oscuro: solo lo que no sale de las variables --ar-* */
html[data-tema="oscuro"] #view-traveler .pv-nivel, html[data-tema="oscuro"] #view-traveler .pv-box { box-shadow: 0 10px 30px #00000038 }
html[data-tema="oscuro"] #view-traveler .pv-ok { color: #7DDBA3 }
/* Títulos sobre foto: el estilo del portal (h3 en azul marino) no debe pisarlos */
#view-traveler .ar-cap h3 { color: #FFFFFF }
#view-traveler .ar-cap h3 span { color: #E4C07A }
/* Viaje por confirmar (sin foto) y encabezado del viaje elegido */
#view-traveler .pv-sinfoto { background: linear-gradient(150deg, #0E1E36 0%, #1A3A5C 60%, #2A5378 100%) }
#view-traveler .pv-intro { position: relative; height: 220px; border-radius: 26px; overflow: hidden }
#view-traveler .pv-intro img { width: 100%; height: 100%; object-fit: cover }
#view-traveler .pv-intro-ov { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 22px; background: linear-gradient(180deg, transparent 30%, #0E1E36E6 100%) }
#view-traveler .pv-intro-t { font: 800 1.7rem var(--font-display); letter-spacing: -.02em; color: #FFFFFF }
#view-traveler .pv-intro-t span { color: #E4C07A }
#view-traveler .pv-intro-d { display: flex; align-items: center; gap: 7px; color: #FFFFFFE0; font-weight: 600; font-size: .92rem; margin-top: 4px }
#view-traveler .pv-intro-d svg { width: 16px; height: 16px }
#view-traveler .pv-intro-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-bottom: var(--space-lg) }
#view-traveler .pv-gracias { margin: 0; color: var(--ar-muted); font-size: .94rem }