/* ==========================================================================
   Rento · css/paginas/viajes.css
   #viajes, #favoritos y #perfil (prefijo .pg-viajes; clases internas vj-*).
   Patrones de marketplace en blanco y azul (dev/REDISENO.md): h1 32 px,
   pestañas subrayadas, tarjetas limpias, divisores finos y mucho aire.
   Sólo tokens de base.css (sin colores literales): funciona en tema claro y oscuro.
   ========================================================================== */

.pg-viajes {
  padding-block: clamp(24px, 4vw, 40px) 16px;
}

/* --------------------------------------------------------------------------
   Encabezado común (h1 32 px, bajada gris)
   -------------------------------------------------------------------------- */
.pg-viajes .vj-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: clamp(24px, 3vw, 32px);
}
.pg-viajes .vj-cabecera-texto { flex: 1 1 320px; min-width: 0; }
.pg-viajes .vj-h1 { margin: 0; } /* 32/600 (28 en móvil) desde base.css */
.pg-viajes .vj-bajada {
  max-width: 68ch;
  margin: 8px 0 0;
  color: var(--tinta-2);
  font-size: var(--t-16);
  text-wrap: pretty;
}
.pg-viajes .vj-bajada a { color: var(--tinta); font-weight: 600; }
.pg-viajes .vj-cabecera-extra { flex: none; }

/* Link subrayado 600 (acciones secundarias) */
.pg-viajes .vj-link {
  color: var(--tinta);
  font-size: var(--t-14);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.pg-viajes .vj-link:hover { color: var(--tinta-fuerte); text-decoration-thickness: 2px; }
.pg-viajes .vj-link-cabecera { font-size: var(--t-16); }

.pg-viajes .vj-h2 {
  margin: 0 0 8px;
  font-size: var(--t-22);
  font-weight: 600;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Sin sesión
   -------------------------------------------------------------------------- */
.pg-viajes .vj-sin-sesion {
  border-top: 1px solid var(--borde-suave);
  padding-block: 24px 32px;
}
.pg-viajes .vj-sin-sesion .vacio { padding-block: 40px 24px; }

/* --------------------------------------------------------------------------
   #viajes: pestañas subrayadas con contador
   -------------------------------------------------------------------------- */
.pg-viajes .vj-pestanas { gap: 32px; margin-bottom: 32px; }
.pg-viajes .vj-pestana { gap: 8px; }
.pg-viajes .vj-pestanas .pestana-contador {
  min-width: 22px;
  padding: 1px 7px;
  background: var(--fondo-2);
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.pg-viajes .vj-pestanas .pestana[aria-selected="true"] .pestana-contador {
  background: var(--tinta);
  color: var(--tinta-inversa);
}
.pg-viajes .vj-pestanas .pestana-contador.vj-cero { color: var(--tinta-2); } /* --tinta-3 no llega a AA */
/* El foco de la pestaña no queda pegado al texto (no tienen padding horizontal) */
.pg-viajes .vj-pestanas .pestana:focus-visible { outline-offset: 4px; border-radius: var(--radio-s); }
.pg-viajes .vj-pestanas .pestana[aria-selected="true"] .pestana-contador.vj-cero { background: var(--fondo-2); color: var(--tinta-2); }
.pg-viajes .vj-panel:focus-visible { outline-offset: 6px; border-radius: var(--radio-m); }

/* En móvil las cuatro pestañas entran en una fila: nombre arriba y número abajo */
@media (max-width: 559px) {
  .pg-viajes .vj-pestanas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    margin-bottom: 24px;
  }
  .pg-viajes .vj-pestanas .pestana {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 2px 12px;
    font-size: var(--t-14);
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .pg-viajes .vj-pestanas .pestana::after { left: 10%; right: 10%; }
  .pg-viajes .vj-pestanas .pestana-contador,
  .pg-viajes .vj-pestanas .pestana[aria-selected="true"] .pestana-contador,
  .pg-viajes .vj-pestanas .pestana[aria-selected="true"] .pestana-contador.vj-cero {
    min-width: 0;
    padding: 0;
    background: none;
    color: var(--tinta-2);
    font-size: var(--t-12);
    font-weight: 500;
  }
  .pg-viajes .vj-pestanas .pestana[aria-selected="true"] .pestana-contador { color: var(--tinta); font-weight: 600; }
}

/* --------------------------------------------------------------------------
   Tarjetas: el link del título cubre la tarjeta; lo demás va por encima
   -------------------------------------------------------------------------- */
.pg-viajes .vj-cubre { color: inherit; text-decoration: none; }
.pg-viajes .vj-cubre::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radio-m);
}
.pg-viajes .vj-viaje .vj-cubre::after { border-radius: var(--radio-l); }
.pg-viajes .vj-cubre:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }
.pg-viajes .vj-cubre:focus-visible { outline: none; }
.pg-viajes .vj-cubre:focus-visible::after { outline: 2px solid var(--tinta); outline-offset: 3px; }
.pg-viajes .vj-sobre { position: relative; z-index: 2; }

.pg-viajes .vj-sellos,
.pg-viajes .vj-mini-sellos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Nota según el estado del viaje (ícono con el color del estado, fondo gris) */
.pg-viajes .vj-viaje,
.pg-viajes .vj-mini { --nota-color: var(--tinta); }
.pg-viajes .vj-est-pendiente { --nota-color: var(--alerta); }
.pg-viajes .vj-est-confirmada { --nota-color: var(--azul); }
.pg-viajes .vj-est-en-curso { --nota-color: var(--exito); }
.pg-viajes .vj-est-cancelada,
.pg-viajes .vj-est-rechazada { --nota-color: var(--error); }

.pg-viajes .vj-nota {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--radio-m);
  background: var(--fondo-2);
  color: var(--tinta);
  font-size: var(--t-14);
  line-height: 1.45;
}
.pg-viajes .vj-nota .icono { flex: none; margin-top: 1px; color: var(--nota-color); }
.pg-viajes .vj-nota p { margin: 0; }
.pg-viajes .vj-nota-resena { align-items: center; flex-wrap: wrap; gap: 6px 10px; }

/* Links de mensajes */
.pg-viajes .vj-mensajes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta);
  font-size: var(--t-14);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.pg-viajes .vj-mensajes:hover { color: var(--tinta-fuerte); text-decoration-thickness: 2px; }
.pg-viajes .vj-mensajes .icono { flex: none; }

/* --------------------------------------------------------------------------
   #viajes: tarjeta horizontal grande (próximos y en curso)
   -------------------------------------------------------------------------- */
.pg-viajes .vj-lista {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-viajes .vj-viaje {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.pg-viajes .vj-viaje:hover { border-color: var(--borde-suave); box-shadow: var(--sombra-tarjeta); }

.pg-viajes .vj-viaje-foto { border-radius: var(--radio-m); }
.pg-viajes .vj-viaje-cuerpo {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 0 4px 4px;
}
.pg-viajes .vj-viaje-cabeza { min-width: 0; }

/* Tipo de viaje: "Paseo en lancha con capitán", "Vuelo en helicóptero con piloto"… */
.pg-viajes .vj-tipo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  min-width: 0;
  color: var(--tinta-2);
  font-size: var(--t-14);
  font-weight: 500;
  line-height: 1.3;
}
.pg-viajes .vj-tipo .icono { flex: none; color: var(--azul); }
.pg-viajes .vj-tipo span { min-width: 0; overflow-wrap: anywhere; }
.pg-viajes .vj-tipo-mini { margin: 0 0 2px; font-size: 13px; }
.pg-viajes .vj-viaje-titulo {
  margin: 0 0 2px;
  font-size: var(--t-22);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pg-viajes .vj-lugar { margin: 0; color: var(--tinta-2); font-size: var(--t-16); }

/* Retiro | Devolución | Duración */
.pg-viajes .vj-celdas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding-block: 16px;
  border-block: 1px solid var(--borde-suave);
}
.pg-viajes .vj-celda { min-width: 0; padding-inline: 16px; }
.pg-viajes .vj-celda:first-child { padding-left: 0; }
.pg-viajes .vj-celda + .vj-celda { border-left: 1px solid var(--borde-suave); }
.pg-viajes .vj-celda dt { margin-bottom: 2px; color: var(--tinta); font-size: var(--t-14); font-weight: 600; }
.pg-viajes .vj-celda dd {
  margin: 0;
  color: var(--tinta-2);
  font-size: var(--t-14);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.pg-viajes .vj-celda-dia { color: var(--tinta); font-size: var(--t-16); }
.pg-viajes .vj-celda-hora { display: block; }

/* Anfitrión + último mensaje */
.pg-viajes .vj-anf { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.pg-viajes .vj-anf-texto { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.pg-viajes .vj-anf-nombre { margin: 0; font-size: var(--t-16); line-height: 1.35; }
.pg-viajes .vj-anf-nombre strong { font-weight: 600; }
.pg-viajes .vj-anf-rol { color: var(--tinta-2); }
.pg-viajes .vj-anf-estrella {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  color: var(--tinta-2);
  font-size: var(--t-14);
  white-space: nowrap;
}
.pg-viajes .vj-anf-estrella .icono { color: var(--tinta); }
.pg-viajes .vj-anf-msj {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--tinta-2);
  font-size: var(--t-14);
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pg-viajes .vj-anf-msj strong { color: var(--tinta); font-weight: 600; }
.pg-viajes .vj-anf .vj-mensajes { margin-top: 4px; }

/* Pie: total y acciones */
.pg-viajes .vj-viaje-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 16px;
  border-top: 1px solid var(--borde-suave);
}
.pg-viajes .vj-total { min-width: 0; }
.pg-viajes .vj-total-linea { margin: 0; font-size: var(--t-18); line-height: 1.3; }
.pg-viajes .vj-total-rotulo { font-weight: 600; }
.pg-viajes .vj-total-linea .precio { font-weight: 600; }
.pg-viajes .vj-total-det { margin: 2px 0 0; color: var(--tinta-2); font-size: var(--t-14); }
.pg-viajes .vj-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

@media (min-width: 744px) {
  .pg-viajes .vj-viaje {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: start;
  }
  .pg-viajes .vj-viaje-cuerpo { padding: 4px 8px 4px 0; }
}

/* Política de cancelación debajo de los próximos */
.pg-viajes .vj-politica {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 760px;
  margin-top: 32px;
  color: var(--tinta-2);
  font-size: var(--t-14);
  line-height: 1.5;
}
.pg-viajes .vj-politica > .icono { flex: none; margin-top: 2px; color: var(--tinta); }
.pg-viajes .vj-politica-titulo { margin: 0 0 2px; color: var(--tinta); font-size: var(--t-16); font-weight: 600; }
.pg-viajes .vj-politica p { margin: 0; }

/* Política del anfitrión y reintegro si se cancela ahora (en cada tarjeta de próximos) */
.pg-viajes .vj-cancelacion {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -4px 0 0;
  color: var(--tinta-2);
  font-size: var(--t-14);
  line-height: 1.45;
}
.pg-viajes .vj-cancelacion .icono { flex: none; margin-top: 2px; color: var(--tinta-2); }
.pg-viajes .vj-cancelacion strong { color: var(--tinta); font-weight: 600; }

/* Badge Agencia / Particular junto al anfitrión */
.pg-viajes .vj-anf-nombre .vj-anf-tipo { vertical-align: 1px; margin-left: 2px; }

/* --------------------------------------------------------------------------
   #viajes: grilla compacta (pasados y cancelados)
   -------------------------------------------------------------------------- */
.pg-viajes .vj-grilla-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 40px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-viajes .vj-grilla-mini > li { display: flex; min-width: 0; }
.pg-viajes .vj-mini {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  border-radius: var(--radio-m);
}
.pg-viajes .vj-mini-media { position: relative; border-radius: var(--radio-m); overflow: hidden; isolation: isolate; }
.pg-viajes .vj-mini-foto > svg,
.pg-viajes .vj-mini-foto > img { transition: transform 0.4s ease; }
.pg-viajes .vj-mini:hover .vj-mini-foto > svg,
.pg-viajes .vj-mini:hover .vj-mini-foto > img { transform: scale(1.02); }
.pg-viajes .vj-est-cancelada .vj-mini-foto,
.pg-viajes .vj-est-rechazada .vj-mini-foto { filter: grayscale(0.75); opacity: 0.85; }
.pg-viajes .vj-mini-sellos {
  position: absolute;
  left: 12px;
  top: 12px;
  right: 12px;
  pointer-events: none;
}
.pg-viajes .vj-mini-sellos .estado,
.pg-viajes .vj-mini-sellos .badge {
  background: var(--badge-foto);
  box-shadow: var(--sombra-chica);
}
.pg-viajes .vj-mini-sellos .estado-finalizada { color: var(--tinta); }

.pg-viajes .vj-mini-cuerpo {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  font-size: var(--t-14);
  line-height: 1.4;
}
.pg-viajes .vj-mini-titulo {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}
.pg-viajes .vj-mini-linea { margin: 0; min-width: 0; color: var(--tinta-2); }
.pg-viajes .vj-mini-fechas { font-variant-numeric: tabular-nums; }
.pg-viajes .vj-mini-dias { white-space: nowrap; }
.pg-viajes .vj-mini-anf { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.pg-viajes .vj-mini-anf .vj-mensajes { font-size: var(--t-14); }
.pg-viajes .vj-mini-anf .vj-mensajes .icono { width: 16px; height: 16px; }
.pg-viajes .vj-mini-total { color: var(--tinta-2); }
.pg-viajes .vj-mini-total .precio { color: var(--tinta); font-weight: 600; }
.pg-viajes .vj-mini .vj-nota { margin-top: 10px; padding: 10px 12px; font-size: 13px; }
.pg-viajes .vj-mini-acciones { margin-top: 12px; gap: 8px 16px; }

/* En móvil, filas compactas: miniatura a la izquierda (estado debajo) y datos a la derecha */
@media (max-width: 559px) {
  .pg-viajes .vj-grilla-mini { gap: 0; }
  .pg-viajes .vj-grilla-mini > li + li { border-top: 1px solid var(--borde-suave); }
  .pg-viajes .vj-mini {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 0 16px;
    padding-block: 20px;
    border-radius: 0;
  }
  .pg-viajes .vj-grilla-mini > li:first-child .vj-mini { padding-top: 0; }
  .pg-viajes .vj-mini-media { overflow: visible; border-radius: 0; }
  .pg-viajes .vj-mini-foto { border-radius: var(--radio-s); }
  .pg-viajes .vj-mini-sellos { position: static; margin-top: 8px; }
  .pg-viajes .vj-mini-sellos .estado,
  .pg-viajes .vj-mini-sellos .badge { box-shadow: none; font-size: var(--t-12); }
  .pg-viajes .vj-mini-sellos .estado { background: color-mix(in srgb, var(--estado-color) 10%, var(--superficie)); }
  .pg-viajes .vj-mini-sellos .badge { background: var(--fondo-2); }
  .pg-viajes .vj-mini .vj-cubre::after { border-radius: 0; }
}

/* Aviso visual cuando un viaje cambia de estado en vivo (p. ej. el anfitrión aprobó) */
@keyframes vj-destello {
  0%, 30% { box-shadow: 0 0 0 3px var(--azul); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
.pg-viajes .vj-cambio { animation: vj-destello 2.6s ease-out; }

/* Ayuda al pie */
.pg-viajes .vj-ayuda {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--borde-suave);
  color: var(--tinta-2);
  font-size: var(--t-14);
}
.pg-viajes .vj-ayuda a { color: var(--tinta); font-weight: 600; }

/* --------------------------------------------------------------------------
   #favoritos
   -------------------------------------------------------------------------- */
.pg-viajes .vj-grilla { margin: 0; padding: 0; list-style: none; }
.pg-viajes .vj-grilla > li { display: flex; min-width: 0; }
.pg-viajes .vj-grilla > li > .tarjeta-auto { flex: 1; }
.pg-viajes .vj-fav-cuerpo > .vacio { padding-block: 56px 40px; }

/* --------------------------------------------------------------------------
   #perfil: tarjeta + información confirmada | datos, verificaciones, actividad, demo
   -------------------------------------------------------------------------- */
.pg-viajes .vj-perfil {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.pg-viajes .vj-perfil-lado { display: grid; gap: 32px; min-width: 0; }
.pg-viajes .vj-perfil-principal { min-width: 0; max-width: 720px; }

/* Tablet: tarjeta e información confirmada lado a lado, arriba de las secciones */
@media (min-width: 640px) and (max-width: 949px) {
  .pg-viajes .vj-perfil-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
}
@media (min-width: 950px) {
  .pg-viajes .vj-perfil {
    grid-template-columns: 342px minmax(0, 1fr);
    gap: clamp(48px, 7vw, 96px);
  }
}
@media (min-width: 950px) and (min-height: 900px) {
  .pg-viajes .vj-perfil-lado { position: sticky; top: calc(var(--cabecera-alto) + 32px); }
}

/* Tarjeta de perfil: avatar, nombre y rol a la izquierda; contadores a la derecha */
.pg-viajes .vj-perfil-tarjeta {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px 24px;
  padding: 32px 24px 28px;
  border-radius: var(--radio-l);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}
.pg-viajes .vj-perfil-id {
  display: grid;
  justify-items: center;
  min-width: 0;
  text-align: center;
}
.pg-viajes .vj-perfil-avatar { position: relative; line-height: 0; }
.pg-viajes .vj-perfil-avatar .avatar { font-size: 40px; font-weight: 600; }
.pg-viajes .vj-avatar-sello {
  position: absolute;
  right: -2px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 3px solid var(--superficie);
  border-radius: 50%;
  background: var(--azul-relleno);
  color: var(--sobre-azul);
}
.pg-viajes .vj-avatar-sello .icono { stroke-width: 3; }
.pg-viajes .vj-perfil-nombre {
  max-width: 100%;
  margin: 14px 0 0;
  font-size: var(--t-26, 26px); /* no pesa más que el h1 "Perfil" (32/600) */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.pg-viajes .vj-perfil-roles { margin: 4px 0 0; color: var(--tinta); font-size: var(--t-14); font-weight: 500; }

.pg-viajes .vj-stats { display: grid; margin: 0; min-width: 0; }
.pg-viajes .vj-stat {
  display: flex;
  flex-direction: column-reverse;
  min-width: 0;
  padding-block: 12px;
}
.pg-viajes .vj-stat:first-child { padding-top: 0; }
.pg-viajes .vj-stat:last-child { padding-bottom: 0; }
.pg-viajes .vj-stat + .vj-stat { border-top: 1px solid var(--borde-suave); }
.pg-viajes .vj-stat dd {
  margin: 0;
  font-size: var(--t-22);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pg-viajes .vj-stat dt { font-size: var(--t-12); font-weight: 500; line-height: 1.3; }

/* Información confirmada */
.pg-viajes .vj-confirmada {
  padding: 32px 24px 28px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
}
.pg-viajes .vj-confirmada .vj-h2 { margin-bottom: 20px; } /* h2 de sección: 22 px como en todo el sitio */
.pg-viajes .vj-confirmada-lista {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-viajes .vj-confirmada-lista li { display: flex; align-items: center; gap: 12px; font-size: var(--t-16); }
.pg-viajes .vj-confirmada-lista .icono { color: var(--tinta); stroke-width: 2.2; }
.pg-viajes .vj-confirmada-nada { margin: 0; color: var(--tinta-2); }
.pg-viajes .vj-pendiente {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--borde-suave);
}
.pg-viajes .vj-pendiente-titulo { margin: 0 0 6px; font-size: var(--t-16); font-weight: 600; }
.pg-viajes .vj-pendiente p { margin: 0 0 16px; color: var(--tinta-2); font-size: var(--t-14); line-height: 1.5; }
.pg-viajes .vj-completo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--borde-suave);
  font-size: var(--t-14);
  font-weight: 500;
}
.pg-viajes .vj-completo .icono { color: var(--azul); }
.pg-viajes .vj-perfil-meta { margin: 20px 0 0; color: var(--tinta-2); font-size: var(--t-14); }

/* Secciones de la columna principal, separadas por divisores finos */
.pg-viajes .vj-seccion { padding-bottom: var(--aire-seccion, 40px); }
.pg-viajes .vj-seccion + .vj-seccion { padding-top: var(--aire-seccion, 40px); border-top: 1px solid var(--borde-suave); }
.pg-viajes .vj-seccion:last-child { padding-bottom: 0; }
/* La última fila de cada lista no repite el divisor de la sección siguiente */
.pg-viajes .vj-filas > .vj-fila:last-child,
.pg-viajes .vj-verifs > .vj-verif:last-child,
.pg-viajes .vj-links > li:last-child > .vj-link-fila { border-bottom: 0; padding-bottom: 8px; }
.pg-viajes .vj-seccion-bajada { margin: 0 0 8px; color: var(--tinta-2); font-size: var(--t-14); }

/* Filas editables: rótulo + valor + "Editar" subrayado */
.pg-viajes .vj-fila { padding-block: 24px; border-bottom: 1px solid var(--borde-suave); }
.pg-viajes .vj-fila-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.pg-viajes .vj-fila-texto { min-width: 0; }
.pg-viajes .vj-fila-rotulo {
  margin: 0;
  font-size: var(--t-16);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}
.pg-viajes .vj-fila-valor,
.pg-viajes .vj-fila-nota {
  margin: 4px 0 0;
  color: var(--tinta-2);
  font-size: var(--t-14);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pg-viajes .vj-fila-editar { flex: none; font-size: var(--t-16); }
.pg-viajes .vj-fila-editar:disabled { color: var(--tinta-3); cursor: not-allowed; text-decoration-thickness: 1px; }
.pg-viajes .vj-filas-editando .vj-fila:not(.vj-fila-abierta) .vj-fila-rotulo,
.pg-viajes .vj-filas-editando .vj-fila:not(.vj-fila-abierta) .vj-fila-valor { color: var(--tinta-3); }

.pg-viajes .vj-edicion { display: grid; gap: 16px; margin-top: 16px; }
.pg-viajes .vj-edicion-pie { display: flex; }
.pg-viajes .vj-form-estado {
  margin: 12px 0 0;
  color: var(--exito);
  font-size: var(--t-14);
  font-weight: 600;
}
.pg-viajes .vj-form-estado:empty { display: none; }

/* --------------------------------------------------------------------------
   Identidad y pagos (identidad, licencias, medios de pago) y cuenta de anfitrión
   -------------------------------------------------------------------------- */
.pg-viajes .vj-bloque + .vj-bloque { margin-top: 32px; }
.pg-viajes .vj-h3 {
  margin: 16px 0 8px;
  font-size: var(--t-18);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
.pg-viajes .vj-bloque-bajada { margin: 0 0 4px; color: var(--tinta-2); font-size: var(--t-14); line-height: 1.5; }
.pg-viajes .vj-bloque-pie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pg-viajes .vj-bloque-pie .btn { gap: 8px; }
.pg-viajes .vj-vacio-chico {
  margin: 12px 0 0;
  padding: 16px;
  border: 1px dashed var(--borde);
  border-radius: var(--radio-m);
  color: var(--tinta-2);
  font-size: var(--t-14);
}

/* Ícono redondo de cada fila (identidad, licencias, medios) */
.pg-viajes .vj-verif-icono {
  grid-area: icono;
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fondo-2);
  color: var(--tinta);
}
.pg-viajes .vj-verif-ok .vj-verif-icono { background: var(--azul-suave); color: var(--azul); }

/* Tarjeta de dato (identidad validada, cuenta de anfitrión) */
.pg-viajes .vj-tarjeta-dato {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  margin-top: 8px;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
}
.pg-viajes .vj-tarjeta-texto { flex: 1; min-width: 0; }
.pg-viajes .vj-tarjeta-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pg-viajes .vj-tarjeta-titulo {
  margin: 0;
  min-width: 0;
  font-size: var(--t-16);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.pg-viajes .vj-tarjeta-det { margin: 6px 0 0; color: var(--tinta-2); font-size: var(--t-14); line-height: 1.5; }
.pg-viajes .vj-tarjeta-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }

/* Datos en pares rótulo / valor */
.pg-viajes .vj-datos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 12px 24px;
  margin: 14px 0 0;
}
.pg-viajes .vj-datos > div { min-width: 0; }
.pg-viajes .vj-datos dt { color: var(--tinta-2); font-size: var(--t-12); font-weight: 500; line-height: 1.3; }
.pg-viajes .vj-datos dd {
  margin: 2px 0 0;
  color: var(--tinta);
  font-size: var(--t-14);
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pg-viajes .vj-datos-anf { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.pg-viajes .vj-datos .vj-dato-estado { grid-column: 1 / -1; }
.pg-viajes .vj-dato-estado dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pg-viajes .vj-estado-texto { color: var(--tinta-2); font-weight: 400; }

/* Licencias: una fila por tipo */
.pg-viajes .vj-verifs { display: grid; margin: 0; padding: 0; list-style: none; }
.pg-viajes .vj-verif {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icono texto lado";
  align-items: center;
  gap: 8px 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--borde-suave);
}
.pg-viajes .vj-verif-texto { grid-area: texto; min-width: 0; }
.pg-viajes .vj-verif-titulo { margin: 0 0 2px; font-size: var(--t-16); font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.pg-viajes .vj-verif-texto > p { margin: 0; color: var(--tinta-2); font-size: var(--t-14); line-height: 1.45; }
.pg-viajes .vj-verif-lado {
  grid-area: lado;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
}
@media (max-width: 559px) {
  .pg-viajes .vj-verif {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icono texto"
      "icono lado";
    align-items: start;
  }
  .pg-viajes .vj-verif-lado { justify-content: flex-start; }
  .pg-viajes .vj-tarjeta-dato { padding: 16px; gap: 12px; }
  .pg-viajes .vj-tarjeta-dato .vj-verif-icono { width: 40px; height: 40px; }
}

/* Medios de pago */
.pg-viajes .vj-medios { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.pg-viajes .vj-medio {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 16px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-m);
  background: var(--superficie);
}
.pg-viajes .vj-medio .vj-verif-icono { width: 44px; height: 44px; background: var(--azul-suave); color: var(--azul); }
.pg-viajes .vj-medio-inactivo .vj-verif-icono { background: var(--fondo-2); color: var(--tinta-2); }
.pg-viajes .vj-medio-texto { min-width: 0; }
.pg-viajes .vj-medio-nombre { margin: 0; font-size: var(--t-16); font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; }
.pg-viajes .vj-medio-det { margin: 2px 0 0; color: var(--tinta-2); font-size: var(--t-14); line-height: 1.45; overflow-wrap: anywhere; }
.pg-viajes .vj-medio-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pg-viajes .vj-medio-aviso { margin: 8px 0 0; color: var(--alerta); font-size: 13px; line-height: 1.45; }
.pg-viajes .vj-medio-acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.pg-viajes .vj-medio-accion { font-size: var(--t-14); white-space: nowrap; }
@media (max-width: 559px) {
  .pg-viajes .vj-medio { grid-template-columns: auto minmax(0, 1fr); }
  .pg-viajes .vj-medio-acciones {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
  }
  .pg-viajes .vj-medio-accion { white-space: normal; text-align: left; }
}

/* Cuenta de anfitrión: Particular / Agencia */
.pg-viajes .vj-tipos-cuenta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.pg-viajes .vj-tipo-cuenta {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
}
.pg-viajes .vj-tipo-cuenta-pct { margin: 4px 0 0; color: var(--tinta-2); font-size: var(--t-14); }
.pg-viajes .vj-tipo-cuenta-pct strong { color: var(--tinta); font-size: var(--t-22); font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-viajes .vj-tipo-cuenta-det { margin: 0; color: var(--tinta-2); font-size: var(--t-14); line-height: 1.5; }
.pg-viajes .vj-cuenta-anf { margin-top: 12px; }

/* Preferencias: selector de tema */
.pg-viajes .vj-tema { margin-top: 16px; }

/* Tu actividad: filas con ícono, texto y chevron */
.pg-viajes .vj-links { display: grid; margin: 0; padding: 0; list-style: none; }
.pg-viajes .vj-link-fila {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 4px 20px 0;
  border-bottom: 1px solid var(--borde-suave);
  color: var(--tinta);
  text-decoration: none;
}
.pg-viajes .vj-link-fila:hover { color: var(--tinta); text-decoration: none; }
.pg-viajes .vj-link-fila:hover .vj-link-fila-titulo { text-decoration: underline; }
.pg-viajes .vj-link-fila > .icono { flex: none; stroke-width: 1.6; }
.pg-viajes .vj-link-fila > .icono:last-child { color: var(--tinta-2); }
.pg-viajes .vj-link-fila-texto { display: grid; flex: 1; min-width: 0; }
.pg-viajes .vj-link-fila-titulo { font-size: var(--t-16); line-height: 1.35; }
.pg-viajes .vj-link-fila-sub { color: var(--tinta-2); font-size: var(--t-14); }
.pg-viajes .vj-link-fila:focus-visible { outline-offset: -2px; border-radius: var(--radio-s); }

/* Zona demo */
.pg-viajes .vj-demo-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pg-viajes .vj-btn-riesgo { border-color: var(--error); color: var(--error); }
.pg-viajes .vj-btn-riesgo:hover:not(:disabled) { background: var(--error-suave); color: var(--error); }

@media (max-width: 559px) {
  .pg-viajes .vj-perfil-tarjeta { padding: 28px 20px 24px; gap: 16px; }
  .pg-viajes .vj-perfil-nombre { font-size: var(--t-22); }
  .pg-viajes .vj-confirmada { padding: 24px 20px; }
  .pg-viajes .vj-demo-acciones .btn { flex: 1 1 100%; }
  .pg-viajes .vj-celda { padding-inline: 10px; }
  .pg-viajes .vj-celda-dia { font-size: var(--t-14); }
  .pg-viajes .vj-viaje-titulo { font-size: 20px; }
  .pg-viajes .vj-viaje-pie .vj-acciones { width: 100%; }
  .pg-viajes .vj-viaje-pie .vj-acciones .btn { flex: 1 1 auto; }
}