/* Compra de pasajes del sitio publico (v2): viaje/busqueda. Prefijo v2-vb-. Colores de marca (rojo PAP) fijos solo donde llevan texto
   blanco encima; el resto usa las variables de Bootstrap para que respete el tema oscuro. Reutiliza v2-vj-btn y v2-vj-titulo de v2.css. */

/* ---- pasos */
.v2-vb-paso { display: inline-block; padding: .35rem .85rem; border-radius: 1rem; font-weight: 600; font-size: .9rem; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.v2-vb-paso.active { background: #d03808; color: #fff; }

/* ---- paso 1: listas de servicios */
.v2-vb-lado-ida { color: #00796b; }
.v2-vb-lado-vuelta { color: #c2185b; }
[data-bs-theme="dark"] .v2-vb-lado-ida { color: #4db6ac; }
[data-bs-theme="dark"] .v2-vb-lado-vuelta { color: #f48fb1; }
.v2-vb-tabla { max-height: 17rem; overflow-y: auto; border-radius: .5rem; font-size: .8rem; }
.v2-vb-lado-ida-fondo { background: var(--bs-info-bg-subtle); }
.v2-vb-lado-vuelta-fondo { background: var(--bs-warning-bg-subtle); }
.v2-vb-tabla .table { --bs-table-bg: transparent; margin-bottom: 0; }
.v2-vb-tabla thead th { position: sticky; top: 0; background: inherit; z-index: 1; }
.v2-vb-vencido td { color: var(--bs-secondary-color); }
/* 21/10/2026 (pedido de Franco): "Elegir" es un BOTON de verdad (relleno de marca, carrito + texto, relieve); la fila entera es clicable y la elegida se marca en verde. */
.v2-vb-elegir { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; padding: .3rem .7rem; font-size: .85rem; font-weight: 700; line-height: 1.1; border-radius: 1.5rem;
  color: #fff; background: #d03808; border: 2px solid #d03808; box-shadow: 0 2px 0 #8f2200; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.v2-vb-elegir i { font-size: 1.15rem; }
.v2-vb-elegir:hover:not(:disabled), .v2-vb-elegir:focus-visible { color: #fff; background: #a72800; border-color: #a72800; transform: translateY(-1px); box-shadow: 0 3px 0 #8f2200, 0 5px 10px rgba(0,0,0,.25); }
.v2-vb-elegir .v2-vb-txt-elegido { display: none; }
.v2-vb-elegir.v2-vb-elegido { background: #2e7d32; border-color: #2e7d32; box-shadow: 0 2px 0 #1b5e20; color: #fff; }
.v2-vb-elegir.v2-vb-elegido .v2-vb-txt-elegir { display: none; }
.v2-vb-elegir.v2-vb-elegido .v2-vb-txt-elegido { display: inline; }
.v2-vb-elegir:disabled { color: var(--bs-secondary-color); background: var(--bs-secondary-bg); border-color: var(--bs-border-color); box-shadow: none; cursor: not-allowed; opacity: .7; }
.v2-vb-fila { cursor: pointer; transition: background-color .12s ease; }
.v2-vb-fila:hover { background: rgba(208, 56, 8, .12); }
.v2-vb-fila:has(.v2-vb-elegido) { background: var(--bs-success-bg-subtle); box-shadow: inset 4px 0 0 #2e7d32; font-weight: 600; }
.v2-vb-fila:has(:disabled) { cursor: not-allowed; }
.v2-vb-fila-vencido, .v2-vb-vencido { cursor: not-allowed; }
/* Guia: aro que late en los "Elegir" mientras falta elegir servicio, y en "Siguiente" cuando se puede continuar. Se apaga solo al elegir. */
@keyframes v2-vb-late { 0% { box-shadow: 0 2px 0 #8f2200, 0 0 0 0 rgba(255,122,77,.75); } 70% { box-shadow: 0 2px 0 #8f2200, 0 0 0 10px rgba(255,122,77,0); } 100% { box-shadow: 0 2px 0 #8f2200, 0 0 0 0 rgba(255,122,77,0); } }
.v2-vb-lista-pendiente .v2-vb-elegir:not(.v2-vb-elegido):not(:disabled) { animation: v2-vb-late 1.8s ease-out infinite; }
.v2-vb-lado-guia { font-weight: 700; }
#v2-vb-siguiente.v2-vb-guia { animation: v2-vj-late 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .v2-vb-lista-pendiente .v2-vb-elegir, #v2-vb-siguiente.v2-vb-guia { animation: none !important; } .v2-vb-elegir { transition: none; } }

/* ---- paso 2: servicio y plano de butacas */
.v2-vb-titulo-lado { background: var(--bs-secondary-bg); }
.v2-vb-datos { background: var(--bs-secondary-bg); }
.v2-vb-subtotal-lado { background: #908181; color: #fff; }
.v2-vb-butaca { width: 50px; height: 34px; padding: 0; }
.v2-vb-libre { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); }
.v2-vb-libre:hover { background: var(--bs-secondary-bg); }
.v2-vb-sel, .v2-vb-sel:hover { background: #0dcaf0; border-color: #0dcaf0; color: #000; }
.v2-vb-ocupada, .v2-vb-ocupada:disabled { background: #dc3545; border-color: #dc3545; color: #fff; opacity: 1; cursor: not-allowed; }
.v2-vb-pasillo { display: inline-block; width: 50px; height: 34px; line-height: 34px; text-align: center; color: var(--bs-secondary-color); }
.v2-vb-muestra { display: inline-block; width: 35px; height: 25px; line-height: 23px; text-align: center; border-radius: .25rem; border: 1px solid var(--bs-border-color); }
.v2-vb-muestra.v2-vb-libre { background: var(--bs-body-bg); }
.v2-vb-muestra.v2-vb-sel { background: #0dcaf0; color: #000; }
.v2-vb-muestra.v2-vb-ocupada { background: #dc3545; color: #fff; }
.v2-vb-h-pax { color: #d32015; font-weight: 700; }
[data-bs-theme="dark"] .v2-vb-h-pax { color: #ff7a70; }

/* ---- lista de pasajeros */
.v2-vb-asiento { display: inline-block; min-width: 3.4rem; padding: .25rem .5rem; border-radius: .5rem; background: #31b0d5; color: #fff; text-align: center; font-size: .85rem; }
.v2-vb-fila-pax .btn { font-size: .8rem; }
.v2-vb-pax-ok label { margin-right: .25rem; }
.v2-vb-pax-ok strong { margin-left: .25rem; }

/* ---- totales (colores de marca con texto blanco) */
.v2-vb-tot-sub { background: #ed8565; color: #fff; }
.v2-vb-tot-desc { background: #009688; color: #fff; }
.v2-vb-tot-total { background: #d03808; color: #fff; }

/* ---- paso 3 */
.v2-vb-res-butaca { display: inline-block; background: #ed8565; color: #fff; padding: .15rem .5rem; border-radius: .5rem; }
.v2-vb-campo-mp { height: 2.4rem; background: #fff; border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: 0 .5rem; }
#v2-vb-mp-mensaje { cursor: pointer; }

/* ---- ofertas y comprobante */
.v2-vb-of-titulo { color: #d32015; font-size: 1.2rem; }
.v2-vb-of-img { max-width: 200px; max-height: 200px; object-fit: cover; }
.v2-vb-of-cant { max-width: 6rem; }
.v2-vb-voucher-marco { height: 70vh; border: 0; background: #fff; }

@media (max-width: 575.98px) {
  .v2-vb-tabla { font-size: .75rem; }
  .v2-vb-paso { font-size: .8rem; }
}

/* ---- asistente (21/10/2026): progreso, pasos hechos, pista y resumen fijo */
.v2-vb-paso { transition: background .2s, color .2s; }
.v2-vb-paso::before { content: attr(data-num); display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; margin-right: .45rem; border-radius: 50%; background: rgba(127,127,127,.25); font-size: .8rem; }
.v2-vb-paso.active::before { background: rgba(255,255,255,.25); }
.v2-vb-paso.v2-vb-hecho { background: #2e7d32; color: #fff; }
.v2-vb-paso.v2-vb-hecho::before { content: "\2713"; background: rgba(255,255,255,.25); }
.v2-vb-paso.v2-vb-clicable { cursor: pointer; }
.v2-vb-paso.v2-vb-clicable:hover, .v2-vb-paso.v2-vb-clicable:focus-visible { filter: brightness(1.12); }
.v2-vb-progreso { height: .3rem; border-radius: .2rem; background: var(--bs-secondary-bg); margin: -.5rem 0 1rem; overflow: hidden; }
.v2-vb-progreso-barra { height: 100%; width: 33%; background: #d03808; transition: width .35s ease; }
.v2-vb-pista { margin: 1rem 0 0; padding: .5rem .75rem; border-left: 4px solid var(--bs-warning); background: var(--bs-warning-bg-subtle); border-radius: .35rem; font-size: .9rem; }
.v2-vb-pista.v2-vb-pista-ok { border-left-color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.v2-vb-tab { animation: v2-vb-entrar .25s ease; }
@keyframes v2-vb-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.v2-vb-resumen-fijo { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; padding: .6rem 1rem; background: #343a40; color: #fff; border-radius: .5rem .5rem 0 0; box-shadow: 0 -2px 8px rgba(0,0,0,.25); }
@media (prefers-reduced-motion: reduce) { .v2-vb-tab { animation: none; } .v2-vb-progreso-barra { transition: none; } }
.v2-vb-crudo { display: none !important; }

/* Celular: pasos compactos (solo el numero, salvo el activo) y espacio para el resumen fijo */
@media (max-width: 576px) {
  .v2-vb-paso:not(.active) { font-size: 0; padding: .35rem .5rem; }
  .v2-vb-paso:not(.active)::before { font-size: .8rem; margin-right: 0; }
  .v2-vb .v2-vb-pasos { gap: .4rem; }
  #v2-vb { padding-bottom: 1rem; }
  .v2-vb-resumen-fijo { font-size: .9rem; padding: .5rem .75rem; }
}