/* ==========================================================================
   Vectiss Rental – Wizard Premium Design v2
   ========================================================================== */

/* ===== Variables (fallback; helpers.php las sobreescribe vía inline style) ===== */
:root {
	--vr-primario:        #2563eb;
	--vr-primario-hover:  #1d4ed8;
	--vr-primario-texto:  #ffffff;
	--vr-primario-alfa:   rgba(37,99,235,.12);
	--vr-primario-glow:   0 4px 18px rgba(37,99,235,.32);

	--vr-acento:          #0ea5e9;
	--vr-exito:           #059669;
	--vr-error:           #dc2626;
	--vr-advertencia:     #d97706;

	--vr-fondo:           #f1f5f9;
	--vr-fondo-card:      #ffffff;
	--vr-borde:           #e2e8f0;
	--vr-borde-fuerte:    #cbd5e1;
	--vr-texto:           #0f172a;
	--vr-texto-suave:     #64748b;
	--vr-texto-muted:     #94a3b8;
	--vr-blanco:          #ffffff;

	--vr-radio:           10px;
	--vr-radio-lg:        18px;
	--vr-radio-xl:        24px;

	--vr-sombra-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--vr-sombra:     0 4px 12px -2px rgba(0,0,0,.09), 0 2px 6px -2px rgba(0,0,0,.05);
	--vr-sombra-md:  0 16px 32px -6px rgba(0,0,0,.10), 0 6px 12px -4px rgba(0,0,0,.06);
	--vr-sombra-lg:  0 28px 56px -10px rgba(0,0,0,.14), 0 10px 20px -8px rgba(0,0,0,.08);
	--vr-sombra-xl:  0 40px 80px -16px rgba(0,0,0,.18), 0 16px 32px -12px rgba(0,0,0,.10);

	--vr-fuente:     -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
	--vr-trans:      .2s cubic-bezier(.4,0,.2,1);
}

/* ===== Contenedor ===== */
.vectiss-wizard {
	font-family: var(--vr-fuente);
	color:       var(--vr-texto);
	max-width:   var(--vr-max-ancho, 1320px);
	margin:      0 auto;
	padding:     40px 20px 80px;
	box-sizing:  border-box;
}
.vectiss-wizard *,
.vectiss-wizard *::before,
.vectiss-wizard *::after { box-sizing: inherit; }

/* ================================================================
   STEP NAVIGATOR — indicador de progreso
   ================================================================ */
.vectiss-pasos-nav { margin-bottom: 44px; }

.vectiss-pasos-lista {
	display:   flex;
	list-style: none;
	margin:    0;
	padding:   0;
	position:  relative;
}

/* Línea de fondo */
.vectiss-pasos-lista::before {
	content:       '';
	position:      absolute;
	top:           22px;
	left:          calc(100% / 12);
	right:         calc(100% / 12);
	height:        3px;
	background:    var(--vr-borde);
	z-index:       0;
	border-radius: 3px;
}

.vectiss-paso-nav {
	flex:           1;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            8px;
	position:       relative;
	z-index:        1;
}

.vectiss-paso-num {
	width:          46px;
	height:         46px;
	border-radius:  50%;
	background:     var(--vr-blanco);
	border:         2px solid var(--vr-borde);
	color:          var(--vr-texto-muted);
	font-size:      13px;
	font-weight:    800;
	display:        flex;
	align-items:    center;
	justify-content: center;
	position:       relative;
	z-index:        1;
	transition:     all var(--vr-trans);
	box-shadow:     var(--vr-sombra-sm);
	letter-spacing: -.01em;
}

.vectiss-paso-label {
	font-size:      11px;
	color:          var(--vr-texto-muted);
	text-align:     center;
	font-weight:    700;
	letter-spacing: .04em;
	white-space:    nowrap;
	text-transform: uppercase;
	transition:     color var(--vr-trans);
}

/* Activo */
.vectiss-paso-nav.activo .vectiss-paso-num {
	background:  var(--vr-primario);
	border-color: var(--vr-primario);
	color:       var(--vr-primario-texto);
	box-shadow:  var(--vr-primario-glow), 0 0 0 5px var(--vr-primario-alfa);
	transform:   scale(1.18);
}
.vectiss-paso-nav.activo .vectiss-paso-label {
	color:       var(--vr-primario);
	font-weight: 800;
}

/* Completado */
.vectiss-paso-nav.completado .vectiss-paso-num {
	background:  var(--vr-exito);
	border-color: var(--vr-exito);
	color:       #fff;
	font-size:   0;
	box-shadow:  0 4px 12px rgba(5,150,105,.28);
}
.vectiss-paso-nav.completado .vectiss-paso-num::after {
	content:    '';
	width:      10px;
	height:     6px;
	border-left:  2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform:  rotate(-45deg) translateY(-1px);
	display:    block;
}
.vectiss-paso-nav.completado .vectiss-paso-label { color: var(--vr-exito); }

/* ================================================================
   ANIMACIÓN DE ENTRADA DE PASO
   ================================================================ */
.vectiss-paso { display: none; }
.vectiss-paso.activo {
	display:   block;
	animation: vr-entrar .32s cubic-bezier(.4,0,.2,1);
}
@keyframes vr-entrar {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   SECCIÓN DE PASO — card principal
   ================================================================ */
.vectiss-seccion-paso {
	background:    var(--vr-fondo-card);
	border:        1px solid var(--vr-borde);
	border-radius: var(--vr-radio-xl);
	box-shadow:    var(--vr-sombra-lg);
	position:      relative;
	overflow:      hidden;
	padding:       44px;
}

/* Franja de acento superior */
.vectiss-seccion-paso::before {
	content:       '';
	position:      absolute;
	top: 0; left: 0; right: 0;
	height:        4px;
	background:    linear-gradient(90deg, var(--vr-primario) 0%, var(--vr-acento) 60%, transparent 100%);
}

/* ================================================================
   HERO BANNER — paso 1 búsqueda
   ================================================================ */
.vectiss-paso-busqueda::before { display: none; } /* quitar franja, el hero la reemplaza */

.vr-hero {
	background:    linear-gradient(135deg, var(--vr-primario) 0%, var(--vr-acento) 100%);
	margin:        -44px -44px 36px;
	padding:       52px 44px 48px;
	position:      relative;
	overflow:      hidden;
}

/* Círculos decorativos de fondo */
.vr-hero::before,
.vr-hero::after {
	content:       '';
	position:      absolute;
	border-radius: 50%;
	background:    rgba(255,255,255,.07);
	pointer-events: none;
}
.vr-hero::before {
	width:   360px; height: 360px;
	top:     -120px; right: -80px;
}
.vr-hero::after {
	width:   220px; height: 220px;
	bottom:  -80px; left: -60px;
}

.vr-hero-inner {
	position: relative;
	z-index:  1;
	max-width: 600px;
}

.vr-hero-badge {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	background:    rgba(255,255,255,.18);
	backdrop-filter: blur(8px);
	color:         #fff;
	font-size:     12px;
	font-weight:   700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding:       5px 14px;
	border-radius: 20px;
	margin-bottom: 18px;
	border:        1px solid rgba(255,255,255,.25);
}

.vr-hero-titulo {
	font-size:      38px;
	font-weight:    900;
	color:          #fff;
	margin:         0 0 12px;
	line-height:    1.1;
	letter-spacing: -.03em;
}

.vr-hero-sub {
	color:       rgba(255,255,255,.8);
	font-size:   15px;
	margin:      0 0 28px;
	line-height: 1.6;
}

.vr-hero-stats {
	display:     flex;
	align-items: center;
	gap:         0;
}
.vr-hero-stat {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	padding-right:  24px;
}
.vr-hero-stat strong {
	font-size:   22px;
	font-weight: 900;
	color:       #fff;
	line-height: 1;
}
.vr-hero-stat span {
	font-size:  12px;
	color:      rgba(255,255,255,.7);
	font-weight: 500;
}
.vr-hero-stat-sep {
	width:       1px;
	height:      36px;
	background:  rgba(255,255,255,.25);
	margin:      0 24px 0 0;
	flex-shrink: 0;
}

/* Form shell debajo del hero */
.vr-form-shell { padding: 0; }

.vr-form-heading {
	display:       flex;
	align-items:   center;
	gap:           8px;
	font-size:     13px;
	font-weight:   800;
	text-transform: uppercase;
	letter-spacing: .07em;
	color:         var(--vr-texto-suave);
	margin:        0 0 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--vr-borde);
}

/* ================================================================
   TÍTULOS
   ================================================================ */
.vectiss-titulo-paso {
	font-size:      26px;
	font-weight:    900;
	margin:         0 0 32px;
	line-height:    1.15;
	color:          var(--vr-texto);
	letter-spacing: -.025em;
}

.vectiss-subtitulo {
	font-size:      11px;
	font-weight:    800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color:          var(--vr-texto-muted);
	margin:         0 0 14px;
	padding-bottom: 10px;
	border-bottom:  1px solid var(--vr-borde);
}

.vectiss-cabecera-paso {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             10px;
	margin-bottom:   28px;
}
.vectiss-cabecera-paso .vectiss-titulo-paso { margin: 0; }

/* ================================================================
   FORMULARIOS
   ================================================================ */
.vectiss-form { display: flex; flex-direction: column; gap: 24px; }

.vectiss-fila-dos-col {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   20px;
}

.vectiss-campo-grupo { display: flex; flex-direction: column; gap: 8px; }

.vectiss-label {
	display:        flex;
	align-items:    center;
	gap:            5px;
	font-size:      13px;
	font-weight:    700;
	color:          var(--vr-texto);
	letter-spacing: .01em;
}
.vectiss-requerido { color: var(--vr-error); margin-left: 1px; }

.vectiss-input,
.vectiss-select {
	width:        100%;
	padding:      14px 16px;
	border:       1.5px solid var(--vr-borde);
	border-radius: var(--vr-radio);
	font-size:    15px;
	font-family:  var(--vr-fuente);
	color:        var(--vr-texto);
	background:   #f8fafc;
	transition:   border-color var(--vr-trans), box-shadow var(--vr-trans), background var(--vr-trans);
	outline:      none;
	-webkit-appearance: none;
	appearance:   none;
	line-height:  1.5;
}
.vectiss-input:hover,
.vectiss-select:hover {
	background:   var(--vr-blanco);
	border-color: var(--vr-borde-fuerte);
}
.vectiss-input:focus,
.vectiss-select:focus {
	background:   var(--vr-blanco);
	border-color: var(--vr-primario);
	box-shadow:   0 0 0 4px var(--vr-primario-alfa);
}
.vectiss-input.vectiss-input-error,
.vectiss-select.vectiss-input-error {
	border-color: var(--vr-error);
	box-shadow:   0 0 0 3px rgba(220,38,38,.1);
}
.vectiss-error-campo {
	font-size:  12px;
	color:      var(--vr-error);
	min-height: 16px;
	font-weight: 600;
}

.vectiss-label-check {
	display:     flex;
	align-items: flex-start;
	gap:         10px;
	font-size:   14px;
	cursor:      pointer;
	line-height: 1.5;
	color:       var(--vr-texto-suave);
}
.vectiss-label-check input[type="checkbox"] {
	width:        17px;
	height:       17px;
	margin-top:   2px;
	flex-shrink:  0;
	accent-color: var(--vr-primario);
	cursor:       pointer;
}

/* ================================================================
   BOTONES
   ================================================================ */
.vectiss-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	padding:         13px 26px;
	border-radius:   var(--vr-radio);
	font-size:       15px;
	font-weight:     700;
	font-family:     var(--vr-fuente);
	border:          none;
	cursor:          pointer;
	transition:      all var(--vr-trans);
	text-decoration: none;
	line-height:     1.4;
	letter-spacing:  .01em;
	position:        relative;
	overflow:        hidden;
}
.vectiss-btn:hover  { transform: translateY(-2px); }
.vectiss-btn:active { transform: scale(.97); }

/* Primario — gradiente */
.vectiss-btn-primario {
	background:  linear-gradient(135deg, var(--vr-primario) 0%, var(--vr-primario-hover) 100%);
	color:       var(--vr-primario-texto);
	box-shadow:  0 4px 14px rgba(37,99,235,.30);
}
.vectiss-btn-primario:hover {
	color:      var(--vr-primario-texto);
	box-shadow: var(--vr-primario-glow);
	filter:     brightness(1.06);
}

/* Shine en hover */
.vectiss-btn-primario::after {
	content:    '';
	position:   absolute;
	top:        0; left: -100%; right: 100%; bottom: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
	transition: left .45s ease, right .45s ease;
	pointer-events: none;
}
.vectiss-btn-primario:hover::after {
	left:  100%;
	right: -100%;
}

/* Secundario */
.vectiss-btn-secundario {
	background:  transparent;
	color:       var(--vr-texto-suave);
	border:      1.5px solid var(--vr-borde);
	box-shadow:  var(--vr-sombra-sm);
}
.vectiss-btn-secundario:hover {
	background:  var(--vr-fondo);
	color:       var(--vr-texto);
	border-color: var(--vr-borde-fuerte);
}

/* Grande */
.vectiss-btn-grande {
	padding:       15px 36px;
	font-size:     16px;
	border-radius: 12px;
}

/* Buscar — ancho destacado */
.vectiss-btn-buscar-wiz {
	padding:    16px 48px;
	font-size:  16px;
	min-width:  260px;
}

/* Seleccionar vehículo — full-width en wizard */
.vectiss-btn-selec-wiz {
	width:         100%;
	margin-top:    0;
	padding:       13px 20px;
	letter-spacing: .01em;
}

/* Deshabilitado */
.vectiss-btn-deshabilitado {
	background:  var(--vr-borde);
	color:       var(--vr-texto-muted);
	cursor:      not-allowed;
	opacity:     .65;
	box-shadow:  none;
}
.vectiss-btn-deshabilitado:hover { transform: none; box-shadow: none; filter: none; }

/* Atrás */
.vectiss-btn-atras {
	display:     inline-flex;
	align-items: center;
	gap:         5px;
	background:  none;
	border:      none;
	color:       var(--vr-texto-suave);
	font-size:   13px;
	font-weight: 600;
	cursor:      pointer;
	padding:     7px 12px;
	font-family: var(--vr-fuente);
	border-radius: var(--vr-radio);
	transition:  all var(--vr-trans);
	text-decoration: none;
}
.vectiss-btn-atras:hover {
	background: var(--vr-fondo);
	color:      var(--vr-primario);
}

/* WhatsApp */
.vr-btn-wsp {
	background: linear-gradient(135deg, #25d366 0%, #1fb059 100%);
	color:      #fff !important;
	box-shadow: 0 4px 14px rgba(37,211,102,.30);
}
.vr-btn-wsp:hover {
	color:      #fff !important;
	box-shadow: 0 6px 20px rgba(37,211,102,.40);
	filter:     brightness(1.05);
}

/* ================================================================
   ACCIONES DE PASO
   ================================================================ */
.vectiss-acciones-paso {
	display:         flex;
	justify-content: flex-end;
	gap:             12px;
	margin-top:      32px;
	padding-top:     26px;
	border-top:      1px solid var(--vr-borde);
}
.vectiss-acciones-dobles { justify-content: space-between; }

.vr-resumen-acciones {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             12px;
	margin-top:      28px;
	padding-top:     26px;
	border-top:      1px solid var(--vr-borde);
	flex-wrap:       wrap;
}
.vr-acciones-pago { display: flex; gap: 10px; flex-wrap: wrap; }

/* ================================================================
   ALERTAS
   ================================================================ */
.vectiss-alerta {
	display:     flex;
	gap:         10px;
	padding:     14px 18px;
	border-radius: var(--vr-radio);
	font-size:   14px;
	font-weight: 500;
	margin-bottom: 20px;
	line-height: 1.5;
}
.vectiss-alerta-error   { background: #fef2f2; border: 1px solid rgba(220,38,38,.15); border-left: 4px solid var(--vr-error);      color: #991b1b; }
.vectiss-alerta-exito   { background: #f0fdf4; border: 1px solid rgba(5,150,105,.15); border-left: 4px solid var(--vr-exito);       color: #065f46; }
.vectiss-alerta-info    { background: #eff6ff; border: 1px solid var(--vr-primario-alfa); border-left: 4px solid var(--vr-primario); color: #1e40af; }

/* ================================================================
   OVERLAY DE CARGA
   ================================================================ */
.vectiss-overlay-carga {
	position:   fixed;
	inset:      0;
	background: rgba(15,23,42,.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index:    99999;
	display:    flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap:        20px;
}

.vectiss-spinner {
	width:        56px;
	height:       56px;
	border:       3px solid rgba(255,255,255,.25);
	border-top-color: var(--vr-primario);
	border-radius: 50%;
	animation:    vr-girar .65s linear infinite;
}
.vectiss-spinner-pequeno {
	width:        28px;
	height:       28px;
	border:       2.5px solid var(--vr-borde);
	border-top-color: var(--vr-primario);
	border-radius: 50%;
	animation:    vr-girar .65s linear infinite;
	margin:       16px auto 0;
}
@keyframes vr-girar { to { transform: rotate(360deg); } }

.vectiss-carga-texto {
	font-size:   17px;
	color:       #fff;
	margin:      0;
	font-weight: 700;
}
.vectiss-cargando-texto {
	color:      var(--vr-texto-muted);
	font-style: italic;
	text-align: center;
	padding:    28px 0;
	font-size:  14px;
}

/* ================================================================
   CHIP DE BÚSQUEDA
   ================================================================ */
.vectiss-resumen-busqueda { margin-bottom: 28px; }
.vectiss-chip-busqueda {
	display:       flex;
	flex-wrap:     wrap;
	gap:           8px;
	align-items:   center;
	background:    linear-gradient(135deg, var(--vr-fondo) 0%, var(--vr-blanco) 100%);
	border:        1px solid var(--vr-borde);
	border-radius: var(--vr-radio);
	padding:       12px 16px;
	box-shadow:    var(--vr-sombra-sm);
}
.vr-chip {
	background:    var(--vr-blanco);
	border:        1px solid var(--vr-borde);
	border-radius: 20px;
	padding:       5px 14px;
	font-size:     13px;
	color:         var(--vr-texto);
	font-weight:   700;
	box-shadow:    var(--vr-sombra-sm);
}
.vr-chip-fecha {
	background:    var(--vr-primario-alfa);
	border:        1px solid rgba(37,99,235,.2);
	border-radius: 20px;
	padding:       5px 14px;
	font-size:     13px;
	color:         var(--vr-primario);
	font-weight:   700;
}
.vr-chip-sep { font-size: 16px; color: var(--vr-texto-muted); font-weight: 700; }

/* ================================================================
   TARJETAS DE VEHÍCULO — dentro del wizard
   ================================================================ */

/* Overlay de no disponible sobre la foto */
.vr-overlay-no-disp {
	position:    absolute;
	inset:       0;
	background:  rgba(15,23,42,.65);
	display:     flex;
	align-items: center;
	justify-content: center;
	z-index:     3;
}
.vr-overlay-no-disp span {
	background:  rgba(220,38,38,.9);
	color:       #fff;
	font-size:   12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding:     5px 16px;
	border-radius: 20px;
}

/* Tag "No disponible" en el cuerpo */
.vr-no-disponible-tag {
	display:       flex;
	align-items:   center;
	justify-content: center;
	gap:           6px;
	padding:       11px 16px;
	background:    #fef2f2;
	border:        1px solid rgba(220,38,38,.18);
	border-radius: var(--vr-radio);
	color:         var(--vr-error);
	font-size:     13px;
	font-weight:   700;
	margin-top:    0;
	width:         100%;
}

/* Footer de tarjeta de vehículo — separador visual */
.vr-card-footer {
	margin-top:  auto;
	padding:     14px 20px 20px;
	border-top:  1px solid var(--vr-borde);
}

/* ================================================================
   OPCIONES (seguros / extras)
   ================================================================ */
.vectiss-opciones-contenedor {
	display:               grid;
	grid-template-columns: 1fr 330px;
	gap:                   32px;
	align-items:           start;
}

.vectiss-lista-opciones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }

.vectiss-opcion-item {
	border:        1.5px solid var(--vr-borde);
	border-radius: var(--vr-radio);
	overflow:      hidden;
	background:    var(--vr-blanco);
	transition:    border-color var(--vr-trans), box-shadow var(--vr-trans), background var(--vr-trans);
}
.vectiss-opcion-item:hover {
	border-color:  var(--vr-borde-fuerte);
	box-shadow:    var(--vr-sombra);
}
.vr-opcion-seleccionada,
.vectiss-opcion-item:has(input:checked) {
	border-color:  var(--vr-primario);
	box-shadow:    0 0 0 3px var(--vr-primario-alfa);
	background:    color-mix(in srgb, var(--vr-primario) 4%, white);
}

/* Radio/checkbox reales ocultos */
.vr-radio-real, .vr-check-real { display: none; }

/* Icono de opción */
.vr-opcion-icono {
	width:          38px;
	height:         38px;
	border-radius:  9px;
	background:     var(--vr-primario-alfa);
	display:        flex;
	align-items:    center;
	justify-content: center;
	flex-shrink:    0;
	transition:     background var(--vr-trans);
}
.vr-opcion-seleccionada .vr-opcion-icono { background: var(--vr-primario-alfa); }

.vectiss-opcion-item label,
.vectiss-check-extra {
	display:     flex;
	align-items: flex-start;
	gap:         14px;
	padding:     17px 18px;
	cursor:      pointer;
	width:       100%;
}

.vectiss-opcion-info           { flex: 1; min-width: 0; }
.vectiss-opcion-info strong    { display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; color: var(--vr-texto); }
.vectiss-opcion-desc           { font-size: 12px; color: var(--vr-texto-suave); margin: 0 0 4px; line-height: 1.5; }
.vectiss-sin-opciones          { color: var(--vr-texto-suave); font-style: italic; font-size: 14px; padding: 12px 0; }

.vr-opcion-precio-col  { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.vectiss-opcion-precio { font-size: 16px; font-weight: 800; color: var(--vr-primario); }
.vr-opcion-periodo     { font-size: 11px; color: var(--vr-texto-muted); font-weight: 500; }

.vectiss-cantidad-extra {
	padding:    10px 18px;
	background: var(--vr-fondo);
	border-top: 1px solid var(--vr-borde);
}
.vectiss-cantidad-extra label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: auto; color: var(--vr-texto-suave); }
.vr-cantidad-label { font-weight: 600; }
.vectiss-input-cantidad { width: 72px !important; padding: 6px 8px !important; font-size: 14px !important; text-align: center; }

/* ================================================================
   CAJA DE COTIZACIÓN — sidebar premium
   ================================================================ */
.vectiss-caja-cotizacion {
	background:    var(--vr-blanco);
	border:        1.5px solid var(--vr-borde);
	border-radius: var(--vr-radio-lg);
	overflow:      hidden;
	position:      sticky;
	top:           24px;
	box-shadow:    var(--vr-sombra-md);
}

/* Cabecera oscura */
.vectiss-caja-cotizacion > .vectiss-subtitulo:first-child {
	background:    linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
	color:         #fff !important;
	border-bottom: none;
	padding:       18px 22px;
	margin:        0;
	font-size:     11px;
	letter-spacing: .1em;
}

#vectiss-detalle-cotizacion { padding: 16px 22px 0; }
#vectiss-total-cotizacion   { padding: 8px 22px 22px; }

.vectiss-cotizacion-linea {
	display:         flex;
	justify-content: space-between;
	gap:             8px;
	font-size:       13px;
	padding:         9px 0;
	border-bottom:   1px solid var(--vr-borde);
	color:           var(--vr-texto-suave);
}
.vectiss-cotizacion-linea:last-of-type { border-bottom: none; }
.vectiss-cotizacion-linea span:last-child { font-weight: 700; color: var(--vr-texto); }

.vectiss-descuento { color: var(--vr-exito) !important; }
.vectiss-descuento span { color: var(--vr-exito) !important; }

.vr-impuesto { color: var(--vr-advertencia) !important; font-style: italic; }
.vr-impuesto span { color: var(--vr-advertencia) !important; }

.vectiss-cotizacion-linea.vr-subtotal { border-top: 1px dashed var(--vr-borde-fuerte); margin-top: 4px; }

/* Línea total — estilo premium */
.vectiss-total-linea {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	padding:         16px 0 0;
	margin-top:      10px;
	border-top:      2px solid var(--vr-borde-fuerte);
}
.vectiss-total-linea > span {
	font-size:      12px;
	font-weight:    800;
	color:          var(--vr-texto-suave);
	text-transform: uppercase;
	letter-spacing: .08em;
}
.vectiss-precio-total {
	font-size:      28px;
	font-weight:    900;
	color:          var(--vr-primario);
	letter-spacing: -.03em;
}

/* ================================================================
   PREVIEW RESERVA (paso 5)
   ================================================================ */
.vectiss-preview-reserva  { margin-bottom: 0; }
.vectiss-preview-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   16px;
}

.vectiss-preview-seccion {
	background:    var(--vr-fondo);
	border:        1px solid var(--vr-borde);
	border-left:   3px solid var(--vr-primario);
	border-radius: var(--vr-radio);
	padding:       18px 20px;
	transition:    box-shadow var(--vr-trans);
}
.vectiss-preview-seccion:hover { box-shadow: var(--vr-sombra); }

.vectiss-preview-seccion h3 {
	font-size:      10px;
	font-weight:    800;
	text-transform: uppercase;
	letter-spacing: .1em;
	color:          var(--vr-primario);
	margin:         0 0 12px;
	padding-bottom: 8px;
	border-bottom:  1px solid var(--vr-borde);
}
.vectiss-preview-seccion p {
	font-size:   14px;
	margin:      0 0 6px;
	line-height: 1.6;
	color:       var(--vr-texto);
}
.vr-fecha { color: var(--vr-texto-suave); font-size: 13px; }

.vectiss-preview-foto {
	width:         100%;
	border-radius: 8px;
	object-fit:    cover;
	max-height:    130px;
	margin-bottom: 10px;
	display:       block;
}

/* Total dentro del preview */
.vr-total-preview {
	padding:       16px 0 0;
	margin-top:    14px;
	border-top:    2px solid var(--vr-borde-fuerte);
	display:       flex;
	justify-content: space-between;
	align-items:   center;
	font-weight:   800;
	font-size:     14px;
	color:         var(--vr-texto-suave);
}
.vr-total-preview strong {
	color:          var(--vr-primario);
	font-size:      22px;
	font-weight:    900;
	letter-spacing: -.025em;
}

/* ================================================================
   SIN RESULTADOS
   ================================================================ */
.vectiss-sin-resultados {
	text-align:  center;
	padding:     64px 24px;
	color:       var(--vr-texto-suave);
}

/* ================================================================
   CONFIRMACIÓN
   ================================================================ */
.vectiss-confirmacion {
	text-align: center;
	padding:    56px 36px;
}

.vectiss-icono-estado {
	width:         80px;
	height:        80px;
	border-radius: 50%;
	display:       flex;
	align-items:   center;
	justify-content: center;
	font-size:     34px;
	margin:        0 auto 24px;
	line-height:   1;
}
.vectiss-icono-estado.vectiss-exito {
	background: rgba(5,150,105,.1);
	color:      var(--vr-exito);
	box-shadow: 0 0 0 10px rgba(5,150,105,.07), var(--vr-sombra-md);
}
.vectiss-icono-estado.vectiss-error {
	background: rgba(220,38,38,.1);
	color:      var(--vr-error);
	box-shadow: 0 0 0 10px rgba(220,38,38,.07);
}
.vectiss-icono-estado.vectiss-pendiente {
	background: rgba(217,119,6,.1);
	color:      var(--vr-advertencia);
	box-shadow: 0 0 0 10px rgba(217,119,6,.07);
}

.vectiss-caja-detalle {
	background:    var(--vr-fondo);
	border:        1px solid var(--vr-borde);
	border-radius: var(--vr-radio-lg);
	padding:       24px 28px;
	margin:        24px auto 0;
	max-width:     480px;
	text-align:    left;
	font-size:     14px;
	line-height:   1.7;
	box-shadow:    var(--vr-sombra-sm);
}

/* Tabla de confirmación */
.vr-tabla-confirmacion { width: 100%; border-collapse: collapse; font-size: 14px; }
.vr-tabla-confirmacion th,
.vr-tabla-confirmacion td {
	padding:     9px 4px;
	border-bottom: 1px solid var(--vr-borde);
	text-align:  left;
	vertical-align: top;
}
.vr-tabla-confirmacion th {
	font-size:      11px;
	font-weight:    700;
	color:          var(--vr-texto-suave);
	text-transform: uppercase;
	letter-spacing: .06em;
	width:          130px;
	padding-right:  16px;
}
.vr-tabla-confirmacion td { color: var(--vr-texto); font-weight: 500; }
.vr-tabla-confirmacion tr:last-child th,
.vr-tabla-confirmacion tr:last-child td { border-bottom: none; }

/* ================================================================
   GRID DE VEHÍCULOS — columnas explícitas con alta especificidad
   ================================================================ */
#vectiss-lista-vehiculos.vectiss-grid-vehiculos {
	display:               grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap:                   24px !important;
	list-style:            none !important;
	padding:               0 !important;
	margin:                0 !important;
}

/* ================================================================
   BANNER DE VEHÍCULO PRESELECCIONADO
   ================================================================ */
.vr-banner-presel {
	display:       flex;
	align-items:   center;
	gap:           14px;
	padding:       16px 20px;
	background:    linear-gradient(135deg, var(--vr-primario-alfa) 0%, var(--vr-blanco) 100%);
	border:        1.5px solid var(--vr-primario);
	border-radius: var(--vr-radio);
	margin-bottom: 24px;
	box-shadow:    0 0 0 3px var(--vr-primario-alfa);
	flex-wrap:     wrap;
}
.vr-banner-presel-ico {
	width:            42px;
	height:           42px;
	border-radius:    10px;
	background:       var(--vr-primario);
	color:            #fff;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	flex-shrink:      0;
}
.vr-banner-presel-texto {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            3px;
	min-width:      0;
}
.vr-banner-presel-texto strong {
	font-size:   14px;
	font-weight: 700;
	color:       var(--vr-texto);
	overflow:    hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vr-banner-presel-texto span {
	font-size: 12px;
	color:     var(--vr-texto-suave);
}
.vr-banner-presel-cambiar {
	background:    transparent;
	border:        1.5px solid var(--vr-borde-fuerte);
	border-radius: var(--vr-radio);
	color:         var(--vr-texto-suave);
	font-size:     12px;
	font-weight:   600;
	padding:       8px 16px;
	cursor:        pointer;
	font-family:   var(--vr-fuente);
	flex-shrink:   0;
	transition:    all var(--vr-trans);
	min-height:    36px;
}
.vr-banner-presel-cambiar:hover {
	background:   var(--vr-fondo);
	color:        var(--vr-primario);
	border-color: var(--vr-primario);
}