:root{
--brand:#b22222;
--brand-dark:#8b1d1a;
--ink:#0f172a;
--muted:#6b7280;
--soft:#f6f7fb;
--paper:#fff;
--shadow:0 25px 60px rgba(0,0,0,.22);
--wizard-w: 900px;
--wizard-gap-top: 88px;
--wizard-pad: 16px;
--line:#eef2f7;
--line-2:#e5e7eb;
--soft-2:#fbfbfd;
--radius:18px;
--radius-sm:12px;
--focus:0 0 0 4px rgba(178,34,34,.12);
}
*{ box-sizing:border-box; }
html,body{ width:100%; overflow-x:hidden;
overflow-y: auto !important;
}
body{
margin:0;
font-family:'Poppins',system-ui,Arial,sans-serif;
color:var(--ink);
background:transparent;
}
.hidden{ display:none!important; }
/* ==========================================================
PAGE + FONDO (con .reservas-bg del Blade)
========================================================== */
.page{
position:relative;
left:50%;
right:50%;
margin-left:-50vw;
margin-right:-50vw;
width:100vw;
min-height: auto;
padding: var(--wizard-gap-top) var(--wizard-pad) 60px;
display:grid;
justify-items:center;
align-content:start;
overflow:visible;
}
/* Fondo SOLO dentro del main */
.reservas-bg{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:
linear-gradient(180deg, rgba(15,23,42,.70), rgba(15,23,42,.62)),
url("../img/4x4.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.wizard-steps,
.wizard-card{
position:relative;
z-index:1;
}
.wizard-page{ overflow:visible !important; }
/* ==========================================================
TOPBAR (por si la usas en layout)
========================================================== */
.topbar{
position:fixed;
top:16px;
left:50%;
transform:translateX(-50%);
z-index:60;
width:min(1200px,94%);
border-radius:14px;
padding:8px 12px;
border:1px solid rgba(255,255,255,.20);
background:linear-gradient(180deg, rgba(178,34,34,.45), rgba(178,34,34,.22));
backdrop-filter:blur(10px);
box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.topbar.solid{
background:rgba(178,34,34,.96);
border-color:rgba(255,255,255,.18);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand-logo{
font-family:'Playfair Display',serif;
font-weight:800;
letter-spacing:2px;
color:#fff;
font-size:24px;
}
.menu{ display:flex; gap:20px; list-style:none; margin:0; padding:0; }
.menu a{
color:#fff;
text-decoration:none;
font-weight:700;
font-size:13px;
text-transform:uppercase;
padding:8px 10px;
border-radius:10px;
}
.menu a:hover{ background:rgba(255,255,255,.14); }
.menu a.active{ background:rgba(255,255,255,.2); }
.nav-actions{ display:flex; gap:10px; }
.login{
color:#fff;
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:10px;
background:rgba(255,255,255,.16);
}
.login:hover{ background:rgba(255,255,255,.22); }
.login .avatar-mini{
width:38px;height:38px;border-radius:10px;
display:grid;place-items:center;
background:#ffffff26;color:#fff;
font-weight:900;font-size:14px;letter-spacing:.4px;
}
.hamburger{ display:none; background:transparent; border:0; color:#fff; font-size:22px; }
@media (max-width:940px){
.menu{ display:none; }
.hamburger{ display:block; }
}
/* ==========================================================
PASOS
========================================================== */
.wizard-steps{
width:min(var(--wizard-w), 96vw);
margin-left:auto;
margin-right:auto;
display:flex;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-top:12px;
margin-bottom:16px;
align-self:flex-start;
}
@media (max-width:560px){
.wizard-steps{ margin-top:16px; }
}
.wizard-step{
display:inline-flex;
align-items:center;
gap:10px;
text-decoration:none;
padding:10px 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.10);
backdrop-filter:blur(10px);
color:#fff;
font-weight:900;
box-shadow:0 10px 30px rgba(0,0,0,.18);
transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wizard-step:hover{ transform:translateY(-1px); box-shadow:0 14px 34px rgba(0,0,0,.22); }
.wizard-step .n{
width:30px;height:30px;border-radius:999px;
display:grid;place-items:center;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.24);
font-weight:900;
}
.wizard-step.done{
border-color:rgba(34,197,94,.50);
background:rgba(34,197,94,.14);
}
.wizard-step.done .n{
background:rgba(34,197,94,.25);
border-color:rgba(34,197,94,.45);
}
.wizard-step.active{
border-color:rgba(255,255,255,.45);
background:rgba(178,34,34,.35);
}
.wizard-step.active .n{
background:rgba(178,34,34,.9);
border-color:rgba(255,255,255,.18);
}
/* ==========================================================
CARD PRINCIPAL
========================================================== */
.wizard-card{
width:min(var(--wizard-w), 96vw);
margin-left:auto;
margin-right:auto;
margin-top:0;
background:linear-gradient(180deg, #fff, var(--soft-2));
border:1px solid rgba(255,255,255,.75);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:16px;
position:relative;
overflow:visible;
}
.wizard-card::before{
content:"";
position:absolute;
left:0; right:0; top:0;
height:4px;
background:linear-gradient(90deg, var(--brand), rgba(178,34,34,.25), var(--brand-dark));
opacity:.95;
}
.wizard-card::after{
content:"";
position:absolute;
inset:-2px;
background:radial-gradient(700px 220px at 18% 0%, rgba(178,34,34,.08), transparent 60%);
pointer-events:none;
}
.wizard-head{
margin:0 0 10px;
text-align:left;
position:relative;
z-index:1;
}
.wizard-head h2{
margin:0 0 6px;
font-weight:900;
font-size:30px;
letter-spacing:-.2px;
}
.wizard-head p{
margin:0;
color:#374151;
font-weight:700;
font-size:14px;
}
.wizard-nav{
display:flex;
justify-content:space-between;
gap:10px;
margin-top:14px;
flex-wrap:wrap;
position:relative;
z-index:1;
}
/* =====================
INICIO STEP 1
STEP 1 — CONTENEDOR
======================= */
.page.wizard-page[data-current-step="1"] {
width: 100%;
border: none !important;
}
.page.wizard-page[data-current-step="1"] .wizard-card {
max-width: 1500px;
width: 96vw;
margin: 0 auto;
background: transparent !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}
/* tarjeta */
.page.wizard-page[data-current-step="1"] .search-card {
width: 100%;
padding: 24px 24px;
background: #f8f8f8;
border-radius: 12px;
}
/* =================
GRID PRINCIPAL
==================== */
.page.wizard-page[data-current-step="1"] .search-grid {
display: grid !important;
grid-template-columns: minmax(420px, 4fr) minmax(170px, 1fr) minmax(170px, 1fr) 240px;
gap: 20px;
align-items: end;
}
/* =========================================
Input select
========================================= */
.page.wizard-page[data-current-step="1"] .select2-container .select2-selection--single {
height: 48px !important;
border: 1px solid #d1d5db !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
padding-left: 42px !important;
background: #fff !important;
}
.page.wizard-page[data-current-step="1"] .select2-selection__rendered {
line-height: 48px !important;
font-weight: 600;
}
.page.wizard-page[data-current-step="1"] .select2-selection__arrow {
height: 48px !important;
}
/* ================
COLUMNAS
===================*/
.page.wizard-page[data-current-step="1"] .sg-col {
display: flex;
flex-direction: column;
}
.page.wizard-page[data-current-step="1"] .sg-col-datetime {
align-items: center;
}
.page.wizard-page[data-current-step="1"] .sg-col-submit {
display: flex;
justify-content: flex-end;
align-items: end;
min-width: 240px !important;
}
/* ====================
TITULOS
=======================*/
.page.wizard-page[data-current-step="1"] .field-title {
font-weight: 800;
text-transform: uppercase;
font-size: 13px;
color: #6b7280;
text-align: center;
margin-bottom: 6px;
white-space: nowrap;
}
.page.wizard-page[data-current-step="1"] input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color: #b22222;
}
/* ====================
UBICACIÓN
======================= */
.page.wizard-page[data-current-step="1"] .location-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.inline-check span {
line-height: 1.1;
}
.page.wizard-page[data-current-step="1"] .location-inputs-wrapper {
display: flex;
gap: 12px;
width: 100% !important;
}
/* selects grandes */
.page.wizard-page[data-current-step="1"] #pickupPlace,
.page.wizard-page[data-current-step="1"] #dropoffPlace {
width: 100% !important;
}
.page.wizard-page[data-current-step="1"] .sg-col-location {
width: 100% !important;
}
/* =================
INPUTS
====================*/
/* mismo diseño para todos los inputs */
.page.wizard-page[data-current-step="1"] input:not([type="checkbox"]),
.page.wizard-page[data-current-step="1"] select {
height: 48px !important;
border: 1px solid #d1d5db !important;
border-radius: 10px !important;
padding: 0 14px 0 42px !important;
font-size: 14px !important;
font-weight: 600 !important;
background: #fff !important;
}
.page.wizard-page[data-current-step="1"] .field {
position: relative;
}
.page.wizard-page[data-current-step="1"] .field-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
}
/* ====================
FECHA + HORA
======================= */
.page.wizard-page[data-current-step="1"] .datetime-row {
display: grid;
grid-template-columns: 140px 95px;
gap: 10px;
}
/* evita que inputs crezcan */
.page.wizard-page[data-current-step="1"] .dt-field {
width: auto !important;
}
/* ===================
BOTONES
====================== */
.page.wizard-page[data-current-step="1"] .actions {
display: flex;
gap: 10px;
justify-content: flex-end;
width: 100%;
}
.page.wizard-page[data-current-step="1"] .btn {
height: 44px;
padding: 0 20px;
border-radius: 8px;
font-weight: 700;
font-size: 13px;
white-space: nowrap;
}
.page.wizard-page[data-current-step="1"] .btn-ghost {
background: transparent;
border: 1px solid #d1d5db;
}
.page.wizard-page[data-current-step="1"] .btn-primary {
background: #b22222;
color: white;
padding: 8px 18px;
font-size: 14px;
width: auto;
}
/* ===================
RANGE SUMMARY
====================== */
.page.wizard-page[data-current-step="1"] .range-summary {
margin-top: 14px;
text-align: center;
font-size: 13px;
color: #6b7280;
display: none;
}
/* ================
DECORACIONES OFF
=================== */
.page.wizard-page[data-current-step="1"] .wizard-head::after,
.page.wizard-page[data-current-step="1"] .wizard-card::before,
.page.wizard-page[data-current-step="1"] .wizard-card::after {
display: none;
}
.page.wizard-page[data-current-step="1"] .wizard-card::before {
opacity: 0 !important;
height: 0 !important;
}
/* =========================================
ANCHOS REALES STEP 1
========================================= */
.page.wizard-page[data-current-step="1"] .search-grid {
grid-template-columns: 4fr 1.2fr 1.2fr 260px !important;
}
/* fechas más pequeñas */
.page.wizard-page[data-current-step="1"] .datetime-row {
grid-template-columns: 120px 90px !important;
}
.page.wizard-page[data-current-step="1"] .actions {
justify-content: flex-end !important;
}
/* ============================================================
ALERTAS PARA EL BUSCADOR
============================================================ */
#miBuscador .field-error,
#miBuscador input.field-error,
#miBuscador select.field-error,
#miBuscador .flatpickr-input.field-error,
#miBuscador .tp-selects select.field-error {
border: 2px solid #e53935 !important;
outline: none !important;
box-shadow: none !important;
background-color: #fff !important;
}
#miBuscador .field-success,
#miBuscador input.field-success,
#miBuscador select.field-success,
#miBuscador .flatpickr-input.field-success,
#miBuscador .tp-selects select.field-success {
border: 2px solid #43a047 !important;
outline: none !important;
box-shadow: none !important;
}
/* Para Select2 */
#miBuscador select.field-error + .select2-container .select2-selection {
border: 2px solid #e53935 !important;
}
#miBuscador select.field-success + .select2-container .select2-selection {
border: 2px solid #43a047 !important;
}
.select2-results__options {
max-height: 250px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.select2-dropdown {
z-index: 999999 !important;
}
.select2-container {
touch-action: manipulation !important;
}
/* Mensajes de error */
#miBuscador .error-msg {
color: #e53935 !important;
font-size: 10px !important;
font-weight: 500 !important;
position: absolute !important;
bottom: -18px !important;
left: 12px !important;
pointer-events: none !important;
z-index: 10 !important;
white-space: nowrap !important;
background: transparent !important;
}
#miBuscador .field,
#miBuscador .dt-field,
#miBuscador .time-field,
#miBuscador .location-inputs-wrapper .field {
position: relative !important;
overflow: visible !important;
}
/* ============================================================
CORRECCIÓN PARA EL CHECKBOX - PERMITIR CONTROL JS
============================================================ */
#miBuscador #dropoffWrapper {
display: none;
}
#miBuscador #dropoffWrapper[style*="display: block"] {
display: block !important;
}
#miBuscador #dropoffWrapper[style*="display: none"] {
display: none !important;
}
/* ============================================================
SOLUCIÓN - VER EN MÓVIL/TABLET
============================================================ */
@media (max-width: 1124px) {
/* Reset de desbordamiento */
body,
html,
.containerVS,
.page.wizard-page {
overflow-x: hidden !important;
max-width: 100vw !important;
position: relative !important;
overflow-y: auto !important;
}
/* Estilos para #miBuscador en móvil */
#miBuscador {
display: block !important;
position: relative !important;
width: 100% !important;
height: auto !important;
margin: 0 auto !important;
padding: 15px !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.page.wizard-page[data-current-step="1"] #miBuscador {
display: block !important;
position: relative !important;
height: auto !important;
overflow: visible !important;
padding: 20px !important;
}
#miBuscador {
max-width: calc(100% - 0px) !important;
width: calc(100% - 15px) !important;
margin-left: 0px !important;
padding: 18px 15px !important;
border-radius: 12px !important;
}
#miBuscador .search-grid {
display: block !important;
width: 100% !important;
}
#miBuscador .datetime-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
width: 100% !important;
}
/* Fecha y hora en 2 columnas TAMBIÉN EN MÓVIL */
#miBuscador .dt-field {
flex: 1 1 calc(50% - 5px) !important;
max-width: calc(50% - 5px) !important;
min-width: 120px !important;
}
#miBuscador .field,
#miBuscador .time-field,
#miBuscador input,
#miBuscador select {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
.btn-buscador-movil {
display: block !important;
width: calc(100% - 15px) !important;
margin: 15px 0 15px 15px !important;
padding: 0 !important;
}
.btn-buscador-movil .btn-container {
width: 100% !important;
padding: 15px !important;
box-sizing: border-box !important;
border-radius: 12px !important;
}
.btn-buscador-movil button {
width: 100% !important;
white-space: normal !important;
word-wrap: break-word !important;
border-radius: 8px !important;
}
/* Forzar mensajes de error */
#miBuscador .error-msg {
white-space: normal !important;
font-size: 9px !important;
bottom: -20px !important;
left: 5px !important;
right: 5px !important;
width: auto !important;
}
/* Forzar select2 si existe */
#miBuscador .select2-container {
width: 100% !important;
max-width: 100% !important;
}
}
/* Para móviles muy pequeños - ajustes generales */
@media (max-width: 480px) {
.inline-check .checkbox-text {
font-size: 10px !important;
}
}
/* Móviles hasta 560px - diseño responsive */
@media (max-width: 560px) {
#miBuscador .field {
min-height: auto !important;
height: auto !important;
}
#miBuscador .error-msg {
position: static !important;
display: block !important;
margin-top: 4px !important;
}
/* Layout principal en vertical */
#miBuscador .search-grid {
display: block !important;
width: 100% !important;
}
/* Cada columna ocupa todo el ancho */
#miBuscador .sg-col {
width: 100% !important;
margin-bottom: 16px !important;
}
#miBuscador .sg-col-location {
margin-bottom: 16px !important;
}
/* Ubicación en columna */
#miBuscador .location-inputs-wrapper {
flex-direction: column !important;
gap: 12px !important;
}
/* FECHA Y HORA EN 2 COLUMNAS (fecha | hora) */
#miBuscador .datetime-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
width: 100% !important;
}
/* Cada campo (fecha y hora) ocupa el 50% del ancho */
#miBuscador .dt-field {
flex: 1 1 calc(50% - 6px) !important;
max-width: calc(50% - 6px) !important;
min-width: 0 !important;
margin-bottom: 0 !important;
}
/* Ajuste para los títulos de fecha/hora */
#miBuscador .sg-col-datetime {
align-items: flex-start !important;
}
/* Botón de acción */
#miBuscador .actions {
justify-content: center !important;
margin-top: 8px !important;
}
#miBuscador .btn {
width: 100% !important;
height: 48px !important;
font-size: 14px !important;
}
/* Checkbox y texto */
.inline-check {
justify-content: flex-start !important;
margin-top: 8px !important;
margin-bottom: 12px !important;
}
.inline-check .checkbox-text {
font-size: 11px !important;
white-space: normal !important;
line-height: 1.3 !important;
}
/* Espaciado general */
#miBuscador .search-card {
padding: 16px !important;
}
}
/* Pantallas de 0 a 380px - ajustes finos */
@media (max-width: 380px) {
#miBuscador {
padding: 12px !important;
border-radius: 10px !important;
}
#miBuscador .field-title {
font-size: 10px !important;
text-align: left !important;
margin-bottom: 4px !important;
}
#miBuscador input,
#miBuscador select {
font-size: 13px !important;
height: 44px !important;
border-radius: 8px !important;
padding: 0 12px 0 38px !important;
}
/* Fecha y hora en 2 columnas - ajuste fino para pantallas muy pequeñas */
#miBuscador .datetime-row {
gap: 8px !important;
}
#miBuscador .dt-field {
flex: 1 1 calc(50% - 4px) !important;
max-width: calc(50% - 4px) !important;
}
.btn-buscador-movil .btn-container {
padding: 12px !important;
border-radius: 10px !important;
}
#miBuscador .btn {
height: 44px !important;
font-size: 13px !important;
}
.inline-check .checkbox-text {
font-size: 10px !important;
}
}
/* Para pantallas entre 381px y 480px - mantener 2 columnas */
@media (min-width: 381px) and (max-width: 480px) {
#miBuscador .datetime-row {
display: flex !important;
gap: 12px !important;
}
#miBuscador .dt-field {
flex: 1 1 calc(50% - 6px) !important;
max-width: calc(50% - 6px) !important;
}
}
.flatpickr-input[readonly] {
width: 100% !important;
min-width: 0 !important;
}
/* =========================================================
MODO WELCOME (SOLO STEP 1 EN MÓVIL)
========================================================= */
@media (max-width: 1124px) {
/* SOLO cuando viene de welcome Y está en step 1 */
.modo-welcome.page.wizard-page[data-current-step="1"] {
background: #fff !important;
padding-top: 20px !important;
padding-bottom: 40px !important;
}
.modo-welcome.page.wizard-page[data-current-step="1"] .reservas-bg,
.modo-welcome.page.wizard-page[data-current-step="1"] .fondo-fijo-layout {
display: none !important;
}
/* Ocultar pasos */
.modo-welcome.page.wizard-page[data-current-step="1"] .wizard-steps {
display: none !important;
}
/* Quitar estilo card fancy */
.modo-welcome.page.wizard-page[data-current-step="1"] .wizard-card {
background: #fff !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
padding: 20px !important;
padding-bottom: 30px !important;
}
/* Quitar header */
.modo-welcome.page.wizard-page[data-current-step="1"] .wizard-head {
display: none !important;
}
/* HACER QUE EL WELCOME MANDE */
.modo-welcome #miBuscador .search-grid {
display: block !important;
}
.modo-welcome #miBuscador .datetime-row {
display: flex !important;
flex-wrap: nowrap !important;
gap: 10px !important;
}
.modo-welcome #miBuscador .dt-field {
flex: 1 !important;
max-width: 50% !important;
}
/* INPUTS EXACTOS */
.modo-welcome #miBuscador input,
.modo-welcome #miBuscador select {
height: 48px !important;
border-radius: 10px !important;
font-size: 14px !important;
}
/* BOTÓN */
.modo-welcome #miBuscador .btn {
width: 100% !important;
height: 52px !important;
border-radius: 12px !important;
margin-bottom: 20px !important;
}
/* OCULTAR HEADER Y FOOTER EN MODO WELCOME (STEP 1) */
.modo-welcome.page.wizard-page[data-current-step="1"] ~ header,
.modo-welcome.page.wizard-page[data-current-step="1"] ~ footer {
display: none !important;
}
body:has(.modo-welcome.page.wizard-page[data-current-step="1"]) header.topbar {
display: none !important;
}
body:has(.modo-welcome.page.wizard-page[data-current-step="1"]) footer {
display: none !important;
}
}
.modo-welcome #miBuscador .flatpickr-input,
.modo-welcome #miBuscador input[readonly] {
height: 48px !important;
border-radius: 10px !important;
}
/* ============================================================
FIX: "DEVOLVER EN OTRO DESTINO" CON CONTROL EXACTO
- Desktop (min-width: 1124px): 2 líneas con
- Móvil/Tablet (max-width: 1123px): 1 línea sin
============================================================ */
/* Desktop: de 2 líneas */
@media (min-width: 1124px) {
.inline-check {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.inline-check .checkbox-text {
display: inline-block !important;
line-height: 1.3 !important;
font-size: 11px !important;
font-weight: bold !important;
text-align: left !important;
white-space: normal !important;
}
.inline-check .checkbox-text br {
display: inline !important;
content: "" !important;
}
}
/* Móvil y Tablet: checkbox 1 línea */
@media (max-width: 1123px) {
.inline-check {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.inline-check .checkbox-text {
display: inline-block !important;
white-space: nowrap !important;
font-size: 11px !important;
font-weight: bold !important;
line-height: normal !important;
}
.inline-check .checkbox-text br {
display: none !important;
}
}
/* ======================
RESPONSIVE (MEDIA QUERY ORIGINAL 1100px)
========================= */
@media (max-width: 1100px) {
.page.wizard-page[data-current-step="1"] .search-grid {
grid-template-columns: 1fr;
}
.page.wizard-page[data-current-step="1"] .datetime-row {
grid-template-columns: 1fr;
}
.page.wizard-page[data-current-step="1"] .actions {
justify-content: flex-start;
}
}
/* =========================================
FIX MOBILE
========================================= */
@media (max-width: 1124px) {
/* CONTENEDOR PRINCIPAL */
.modo-welcome.page.wizard-page[data-current-step="1"] {
height: 100vh !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 20px 15px !important;
box-sizing: border-box !important;
}
/* TARJETA */
.modo-welcome.page.wizard-page[data-current-step="1"] .wizard-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
}
/* BUSCADOR */
.modo-welcome #miBuscador {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* GRID A COLUMNA SIEMPRE */
.modo-welcome #miBuscador .search-grid {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
/* FECHA Y HORA EN 2 COLUMNAS */
.modo-welcome #miBuscador .datetime-row {
display: flex !important;
gap: 10px !important;
}
.modo-welcome #miBuscador .dt-field {
flex: 1 !important;
max-width: 50% !important;
}
/* BOTÓN ABAJO */
.modo-welcome #miBuscador .actions,
.modo-welcome #miBuscador .btn,
.btn-buscador-movil {
margin-top: auto !important;
}
/* BOTÓN FULL WIDTH */
.modo-welcome #miBuscador .btn {
width: 100% !important;
height: 52px !important;
border-radius: 12px !important;
}
.modo-welcome #miBuscador {
padding-bottom: 20px !important;
}
}
@media (max-width: 1124px) {
.modo-welcome.page.wizard-page[data-current-step="1"] {
padding-top: 115px !important;
}
}
/* =========================================
SIN SCROLL - PANTALLA FIJA
========================================= */
@media (max-width: 1124px) {
.modo-welcome.page.wizard-page[data-current-step="1"] {
height: 100vh !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
/* Contenido distribuido */
.modo-welcome #miBuscador {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.modo-welcome .wizard-card,
.modo-welcome .search-card {
height: 100% !important;
overflow: hidden !important;
}
}
/* ==========================================================
SAFARI/MAC FIX - SOLO PARA INPUTS DE HORA
(Sin afectar íconos de selects)
========================================================== */
/* 1. Solo para selects de hora - altura consistente */
.page.wizard-page[data-current-step="1"] .tp-selects select {
height: 48px !important;
min-height: 48px !important;
line-height: normal !important;
font-size: 16px !important;
box-sizing: border-box !important;
}
/* 2. Padding izquierdo solo para selects de hora (NO para otros selects) */
.page.wizard-page[data-current-step="1"] .tp-selects select {
padding-left: 42px !important;
padding-right: 28px !important;
}
/* 3. Ícono de reloj - posicionamiento correcto (sin duplicar) */
.page.wizard-page[data-current-step="1"] .time-field {
position: relative !important;
}
/* Solo crear el ícono si NO existe ya un field-icon */
.page.wizard-page[data-current-step="1"] .time-field:not(.icon-field)::before {
content: "\f017";
font-family: "Font Awesome 6 Free";
font-weight: 400;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
font-size: 16px;
color: #9ca3af;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 5;
}
/* 4. Si ya existe .field-icon, NO crear duplicado */
.page.wizard-page[data-current-step="1"] .time-field.icon-field::before {
display: none !important;
}
/* 5. Asegurar que el field-icon existente se vea bien */
.page.wizard-page[data-current-step="1"] .time-field .field-icon {
position: absolute !important;
left: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: none !important;
z-index: 5 !important;
}
/* 6. Corregir selects de hora en Safari (sin afectar otros selects) */
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance:none) and (stroke-color:transparent) {
.page.wizard-page[data-current-step="1"] .tp-selects select {
padding-top: 12px !important;
padding-bottom: 12px !important;
background-position: right 10px center !important;
}
}
}
/* 7. iOS - evitar zoom en selects de hora */
@supports (-webkit-touch-callout: none) {
.page.wizard-page[data-current-step="1"] .tp-selects select {
font-size: 16px !important;
}
}
/*FIN STEP 1*/
/* ==========================================================
STEP 2 — GRID 2 COLUMNAS
========================================================== */
.cars{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:20px;
align-items:start;
}
/* Tablet */
@media (max-width: 1024px){
.cars{
grid-template-columns: repeat(2, minmax(0,1fr));
gap:16px;
}
}
/* Móvil */
@media (max-width: 680px){
.cars{
grid-template-columns: 1fr;
}
}
/* ---------- BASE (desktop antiguo) ---------- */
.car-card{
background:#fff;
border:1px solid #e5e7eb;
border-radius:16px;
box-shadow:0 14px 35px rgba(0,0,0,.10);
padding:16px;
display:grid;
grid-template-columns: 260px 1fr 320px;
gap:18px;
align-items:center;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
position:relative;
overflow:visible;
}
.car-card:hover{
transform:translateY(-1px);
box-shadow:0 18px 44px rgba(0,0,0,.12);
}
.car-card.active{
border-color:rgba(178,34,34,.35);
box-shadow:0 16px 45px rgba(178,34,34,.12);
}
.car-days-badge{
position:absolute;
top:14px;
right:14px;
z-index:6;
display:inline-flex;
align-items:center;
gap:8px;
height:34px;
padding:0 14px;
border-radius:999px;
background: rgba(178,34,34,.06);
border: 2px solid rgba(178,34,34,.22);
color: #b22222;
font-weight:800;
font-size:12px;
letter-spacing:.2px;
box-shadow:none;
}
.car-days-badge i{ font-size:13px; }
.car-avatar{
width:100%;
max-width:260px;
height:150px;
border-radius:14px;
border:1px solid #eef2f7;
background:linear-gradient(180deg,#f8fafc,#f3f4f6);
display:flex;
align-items:center;
justify-content:center;
padding:10px;
overflow:hidden;
}
.car-avatar img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
.car-meta{ min-width:0; }
.car-meta .car-top{
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
color:#111827;
font-size:18px;
margin:0 0 2px;
}
.car-meta .car-sub{
margin:0 0 8px;
color:#374151;
font-weight:700;
font-size:13px;
line-height:1.4;
}
.r-specs{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:10px 0 8px;
}
.chip{
display:inline-flex;
align-items:center;
gap:8px;
background:#f3f4f6;
border:1px solid #e5e7eb;
border-radius:999px;
padding:7px 10px;
font-weight:900;
font-size:12px;
color:#111827;
line-height:1;
white-space:nowrap;
}
.chip-ok{
background:rgba(34,197,94,.12);
border-color:rgba(34,197,94,.28);
color:#065f46;
}
.chip i{ opacity:.9; }
.car-price{
display:grid;
gap:10px;
padding-top:52px;
}
.price-pill{
text-align:right;
font-weight:900;
color:#111827;
}
.price-pill small{
font-size:12px;
color:#6b7280;
font-weight:800;
}
/* Prepago */
.price-pill--prepago{ text-align:right; }
.price-pill--prepago .price-old{
font-size:14px;
font-weight:900;
color: rgba(178,34,34,.95);
text-decoration: line-through;
text-decoration-color: rgba(178,34,34,.95);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
margin-bottom:4px;
}
.price-new{
font-size:28px;
font-weight:900;
color:#000;
line-height:1.1;
}
.price-save{
margin-top:4px;
font-size:14px;
font-weight:800;
color:#6b7280;
}
.btn-pay{
width:100%;
justify-content:center;
padding:12px 14px;
border-radius:12px;
font-weight:900;
border:0;
cursor:pointer;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:8px;
transition:transform .15s ease, filter .15s ease;
}
.btn-pay:hover{ transform:translateY(-1px); filter:brightness(.98); }
.btn-pay.primary{ background:#ff3b30; color:#fff; }
.btn-pay.gray{ background:#9ca3af; color:#fff; }
/* Pago en oficina más grande */
.car-price > .price-pill:not(.price-pill--prepago){
font-size:25px;
line-height:1.1;
}
.car-price > .price-pill:not(.price-pill--prepago) .js-mostrador-total{
font-weight:900;
}
@media (max-width:980px){
.car-card{ grid-template-columns:1fr; }
.car-avatar{ max-width:100%; height:190px; }
.price-pill{ text-align:left; }
.car-price{ padding-top:0; }
}
/* ---------- NUEVO LAYOUT V2 ---------- */
.car-card--v2{
grid-template-columns: 1fr;
gap:12px;
padding:14px;
}
/* Hero con imagen y badge dentro */
.car-card--v2 .car-hero{
position:relative;
border-radius:16px;
background:linear-gradient(180deg,#ffffff,#f8fafc);
border:1px solid #eef2f7;
overflow:hidden;
padding:12px;
}
.car-card--v2 .car-hero-img{
width:100%;
height:190px;
object-fit:contain;
display:block;
}
/* badge redondeado dentro del hero */
.car-card--v2 .car-days-badge--v2{
position:absolute;
top:12px;
right:12px;
height:34px;
padding:0 14px;
border-radius:999px;
background: rgba(255,255,255,.85);
border:2px solid rgba(178,34,34,.22);
color: var(--brand);
box-shadow:0 10px 26px rgba(0,0,0,.08);
}
/* body */
.car-card--v2 .car-body{
display:flex;
flex-direction:column;
gap:10px;
padding:2px 2px 0;
}
/* ✅ NUEVO ESTILO: textos de categoría + descripción (Step 2) */
.car-card--v2 .car-top{
margin:0;
font-size:16.5px;
font-weight:900;
letter-spacing:.25px;
text-transform:uppercase;
color:#0f172a;
line-height:1.15;
}
.car-card--v2 .car-sub{
margin:0;
font-size:13px;
font-weight:800;
color:#6b7280;
line-height:1.45;
}
/* chips */
.car-card--v2 .r-specs--v2{
margin:8px 0 2px;
}
/* precios */
.car-card--v2 .car-price--v2{
padding-top:0;
gap:10px;
}
.car-card--v2 .car-price--v2 .price-old{
font-size:17px;
font-weight:900;
color: rgba(178,34,34,.95);
text-decoration: line-through;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.car-card--v2 .car-price--v2 .price-new{
font-size:30px;
}
.car-card--v2 .car-price--v2 .price-save{
margin-top:-2px;
}
/* bloque oficina */
.car-card--v2 .office-wrap{
display:flex;
flex-direction:column;
gap:10px;
}
.car-card--v2 .office-price{
font-size:28px;
font-weight:900;
color:#111827;
line-height:1.1;
}
/* ==========================================================
✅ STEP 2 V2 — ICONOS (FINAL CORRECTO)
- Iconos: UNA FILA horizontal (lateral)
- Tech: debajo
- Todo izquierda + separación pequeña
========================================================== */
/* Contenedor de Título y Badge de Días */
.car-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
}
/* --- ESTILO DE ICONOS (PASO 2) --- */
.car-features {
display: flex;
flex-direction: column;
gap: 12px;
margin: 12px 0;
}
.car-mini-specs {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: row; /* Alineación horizontal */
flex-wrap: wrap; /* Si es muy pequeño el cel, baja el resto */
gap: 8px; /* Espacio entre cada grupo */
}
.car-mini-specs li {
display: flex;
align-items: center;
gap: 6px; /* Espacio icono -> texto */
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
.car-mini-specs i {
color: #0f172a; /* El color rojo de tu marca */
font-size: 15px;
width: 18px; /* Ancho fijo para que no bailen */
text-align: center;
}
/* Estilo para las letras T y A/C */
.spec-letter {
font-weight: 800;
color: #0f172a;
font-size: 13px;
}
/* --- CONECTIVIDAD (Apple/Android) --- */
.car-connect {
display: flex;
gap: 8px;
}
.badge-chip{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 12px;
border-radius:999px;
font-size:12px;
font-weight:800;
border:1px solid transparent;
}
/* Apple CarPlay */
.badge-chip.carplay{
background:#0f172a;
color:#fff;
border-color:#0f172a;
}
.badge-chip.carplay i{
color:#fff;
}
/* Android Auto */
.badge-chip.android{
background:#e8f7ee;
color:#1f7a45;
border-color:#cceedd;
}
.badge-chip.android i{
color:#1f7a45;
}
@media (max-width:560px){
.car-card--v2{ padding:12px; border-radius:18px; }
.car-card--v2 .car-hero-img{ height:170px; }
.car-card--v2 .car-price--v2 .price-new{ font-size:25px; }
.car-card--v2 .office-price{ font-size:22px; }
/* si en móvil no cabe, que haga wrap bonito */
.car-card--v2 .car-specs{ flex-wrap:wrap; }
.car-card--v2 .car-mini-tech{ flex-wrap:wrap; }
}
/* ==========================================================
STEP 3: COMPLEMENTOS
========================================================== */
.addons-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:14px;
margin-top:6px;
}
@media (max-width:980px){ .addons-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .addons-grid{ grid-template-columns:1fr; } }
.addon-card{
background:#fff;
border-radius:14px;
padding:16px;
display:flex;
flex-direction:column;
gap:8px;
position:relative;
overflow:visible; /* <-- antes hidden */
border:1px solid rgba(15,23,42,.10);
box-shadow:0 14px 35px rgba(0,0,0,.10);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.addon-card::before{
content:"";
position:absolute;
left:0; right:0; top:0;
height:4px;
background:linear-gradient(90deg, var(--brand), rgba(178,34,34,.20), var(--brand-dark));
opacity:.75;
}
.addons-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:14px;
margin-top:6px;
overflow:visible;
}
.addon-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.12); }
.addon-card.selected{
border-color:rgba(178,34,34,.35);
box-shadow:0 18px 48px rgba(178,34,34,.14);
}
.addon-card.selected::after{
opacity:1;
transform:scale(1);
}
.addon-card.selected{
border-color:rgba(22,163,74,.35);
box-shadow:0 18px 48px rgba(22,163,74,.14);
}
.addon-card.selected .addon-ico{
border-color:#16a34a !important;
color:#16a34a !important;
background:#f3f4f6 !important;
}
.addon-ico{
width:86px;
height:86px;
border-radius:999px;
display:grid;
place-items:center;
border:4px solid #d1d5db;
color:#9ca3af;
background:#f3f4f6;
flex:0 0 auto;
transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.addon-card.selected .addon-name{
color:#0f172a;
}
.addon-card:has(.gasolina-switch:checked) .addon-ico{
border-color:#16a34a !important;
color:#16a34a !important;
background:#f3f4f6 !important;
}
.addon-ico{
width:86px;
height:86px;
border-radius:999px;
display:grid;
place-items:center;
border:4px solid #d1d5db;
color:#9ca3af;
background:#f3f4f6;
flex:0 0 auto;
transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.addon-ico i{
font-size:28px;
}
.addon-name{
margin:0;
font-size:15px;
letter-spacing:.2px;
color:#0f172a;
padding-right:38px;
font-weight:900;
}
.addon-card p{
margin:0;
font-size:13px;
color:#374151;
font-weight:700;
line-height:1.45;
}
.addon-card .small{
margin-top:2px;
display:inline-flex;
align-items:center;
gap:8px;
width:fit-content;
padding:7px 10px;
border-radius:999px;
background:rgba(178,34,34,.07);
border:1px solid rgba(178,34,34,.18);
color:#8b1d1a;
font-weight:900;
}
.addon-card .small strong{ color:#111827; }
.addon-qty{
display:flex;
align-items:center;
gap:12px;
margin-top:auto;
padding-top:10px;
border-top:1px dashed rgba(178,34,34,.18);
justify-content:space-between;
}
.addon-qty .qty{
min-width:34px;
height:34px;
border-radius:999px;
display:grid;
place-items:center;
border:1px solid #e5e7eb;
background:#fff;
font-size:13px;
font-weight:900;
}
.addon-qty button{
width:40px;
height:40px;
border-radius:999px;
border:1px solid #e5e7eb;
background:#fff;
box-shadow:0 8px 18px rgba(0,0,0,.06);
font-weight:900;
font-size:18px;
cursor:pointer;
transition:transform .15s ease, filter .15s ease, border-color .18s ease, box-shadow .18s ease;
}
.addon-qty button:hover{ transform:translateY(-1px); filter:brightness(.98); }
.addon-qty button.plus{
border-color:rgba(178,34,34,.22);
background:linear-gradient(180deg, rgba(178,34,34,.10), rgba(178,34,34,.04));
}
.addon-qty button:active{ transform:translateY(0) scale(.98); }
/* ===== MODAL Step 3 (Accordion Packs) ===== */
.s3-modal-title{
margin:0 0 6px;
font-weight:500;
color:#0f172a;
font-size:13px;
}
.s3-modal-sub{
margin:0 0 14px;
color:#64748b;
font-weight:700;
font-size:13px;
line-height:1.45;
}
.s3-acc{ display:grid; gap:10px; margin-top:6px; }
.s3-acc-item{
border:1px solid #eef2f7;
border-radius:16px;
background:#fff;
overflow:hidden;
}
.s3-acc-item[open]{ box-shadow:0 14px 28px rgba(15,23,42,.08); }
.s3-acc-sum{
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 14px;
cursor:pointer;
user-select:none;
font-weight:900;
color:#0f172a;
}
.s3-acc-sum::-webkit-details-marker{ display:none; }
.s3-acc-left{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.s3-acc-name{
text-transform:uppercase;
letter-spacing:.35px;
font-size:13px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.s3-acc-badge{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
background:rgba(178,34,34,.10);
border:1px solid rgba(178,34,34,.25);
color:#b22222;
font-size:12px;
letter-spacing:.35px;
text-transform:uppercase;
}
.s3-acc-caret{
transition:transform .2s ease;
color:#64748b;
}
.s3-acc-item[open] .s3-acc-caret{ transform:rotate(180deg); }
.s3-acc-body{
padding:12px 14px 14px;
border-top:1px solid #f1f5f9;
}
.s3-list{
margin:0;
padding-left:18px;
display:grid;
gap:8px;
color:#475569;
font-weight:700;
font-size:13px;
line-height:1.45;
}
.s3-list strong{ color:#0f172a; }
.s3-acc-danger{
border-color: rgba(239,68,68,.25);
}
.s3-badge-danger{
background: rgba(239,68,68,.10);
border-color: rgba(239,68,68,.25);
color: #ef4444;
}
/* Texto informativo arriba de acordeones */
.s3-info-top{
margin: 10px 0 14px;
padding: 12px 14px;
border: 1px solid #eef2f7;
background: #fbfbfd;
border-radius: 16px;
color: #475569;
font-weight: 700;
font-size: 10px;
line-height: 1.55;
}
.s3-info-top p{ margin: 0 0 10px; }
.s3-info-top strong{ color:#0f172a; }
/* ================================
MODAL STEP 3 — RESPONSIVO PRO
================================ */
/* overlay */
.modal-s3{
padding: clamp(10px, 2.2vw, 18px);
}
/* card (contenedor) */
.modal-s3 .card{
width: min(720px, 96vw);
max-height: min(78vh, 820px);
overflow: hidden; /* evita que se “desborde” */
display: flex;
flex-direction: column;
padding: clamp(12px, 2vw, 18px);
}
/* botón cerrar siempre visible */
.modal-s3 .x{
position: sticky;
top: 0;
align-self: flex-end;
z-index: 2;
}
/* título/sub compactos y fluidos */
.s3-modal-title{
font-size: clamp(16px, 2.2vw, 20px);
line-height: 1.2;
}
.s3-modal-sub{
font-size: clamp(12px, 1.6vw, 13px);
margin-bottom: 12px;
}
/* cuerpo scrolleable (texto + acordeones) */
.s3-body-scroll{
overflow: auto;
padding-right: 6px; /* espacio para scrollbar */
-webkit-overflow-scrolling: touch;
}
/* scrollbar suave (no rompe nada si no soporta) */
.s3-body-scroll::-webkit-scrollbar{ width: 10px; }
.s3-body-scroll::-webkit-scrollbar-thumb{
background: rgba(15,23,42,.18);
border-radius: 999px;
}
.s3-body-scroll::-webkit-scrollbar-track{
background: rgba(15,23,42,.06);
border-radius: 999px;
}
/* bloque informativo superior más compacto */
.s3-info-top{
padding: 10px 12px;
border-radius: 14px;
font-size: clamp(12px, 1.6vw, 13px);
}
.s3-info-top p{ margin: 0 0 8px; }
/* acordeones: resumen compacto */
.s3-acc{ gap: 10px; }
.s3-acc-item{ border-radius: 14px; }
.s3-acc-sum{
padding: 10px 12px;
}
.s3-acc-badge{
padding: 5px 9px;
font-size: 11px;
}
.s3-acc-name{
font-size: 12px;
}
.s3-acc-body{
padding: 10px 12px 12px;
}
.s3-list{
gap: 7px;
font-size: clamp(12px, 1.55vw, 13px);
padding-left: 18px;
}
/* ====== Breakpoints: móvil ====== */
@media (max-width: 480px){
.modal-s3 .card{
width: 96vw;
max-height: 84vh;
border-radius: 16px;
padding: 12px;
}
.modal-s3 .x{
width: 38px; height: 38px;
border-radius: 12px;
}
.s3-acc-left{ gap: 8px; }
.s3-acc-badge{ padding: 4px 8px; }
.s3-acc-sum{ padding: 10px; }
.s3-acc-body{ padding: 10px; }
}
/* ================================
MODAL STEP 3 — SCROLL + ESTILO VIVERO
================================ */
/* overlay */
.modal-s3{
padding: 16px;
}
/* card responsiva (igual mood a tus cards) */
.modal-s3 .card{
width: min(760px, 94vw);
max-height: min(82vh, 780px);
display: flex;
flex-direction: column;
border-radius: 18px;
border: 1px solid #eef2f7;
box-shadow: 0 25px 60px rgba(0,0,0,.22);
padding: 16px;
overflow: hidden; /* clave para que el scroll sea interno */
}
/* botón cerrar fijo y consistente */
.modal-s3 .x{
width: 42px;
height: 42px;
border-radius: 14px;
border: 1px solid #e5e7eb;
background: #fff;
cursor: pointer;
display: grid;
place-items: center;
margin-left: auto;
box-shadow: 0 10px 20px rgba(15,23,42,.08);
}
/* header del modal */
.s3-modal-title{
margin: 6px 0 4px;
font-weight: 900;
color: #0f172a;
font-size: 18px;
letter-spacing: .2px;
}
.s3-modal-sub{
margin: 0 0 12px;
color: #64748b;
font-weight: 700;
font-size: 13px;
line-height: 1.45;
}
/* ✅ CONTENEDOR CON SCROLL */
.s3-body-scroll{
overflow: auto;
padding-right: 8px; /* espacio para scrollbar */
-webkit-overflow-scrolling: touch;
}
/* scrollbar sutil (no rompe en navegadores que no lo soportan) */
.s3-body-scroll::-webkit-scrollbar{ width: 10px; }
.s3-body-scroll::-webkit-scrollbar-thumb{
background: rgba(15,23,42,.18);
border-radius: 999px;
}
.s3-body-scroll::-webkit-scrollbar-track{
background: rgba(15,23,42,.06);
border-radius: 999px;
}
/* bloque informativo superior (misma vibra de tus cards) */
.s3-info-top{
margin: 0 0 12px;
padding: 12px 14px;
border: 1px solid #eef2f7;
background: #fbfbfd;
border-radius: 16px;
color: #475569;
font-weight: 700;
font-size: 13px;
line-height: 1.55;
}
.s3-info-top p{ margin: 0 0 10px; }
.s3-info-top p:last-child{ margin-bottom: 0; }
.s3-info-top strong{ color: #0f172a; }
/* acordeones: mismos radios/espaciados */
.s3-acc{ display: grid; gap: 10px; }
.s3-acc-item{
border: 1px solid #eef2f7;
border-radius: 16px;
background: #fff;
overflow: hidden;
}
.s3-acc-item[open]{
box-shadow: 0 18px 40px rgba(15,23,42,.08);
border-color: rgba(178,34,34,.20);
}
.s3-acc-sum{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
cursor: pointer;
user-select: none;
font-weight: 900;
color: #0f172a;
}
.s3-acc-sum::-webkit-details-marker{ display: none; }
.s3-acc-badge{
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
background: rgba(178,34,34,.10);
border: 1px solid rgba(178,34,34,.25);
color: #b22222;
font-size: 12px;
letter-spacing: .35px;
text-transform: uppercase;
}
.s3-acc-name{
text-transform: uppercase;
letter-spacing: .35px;
font-size: 13px;
}
.s3-acc-caret{
transition: transform .2s ease;
color: #64748b;
}
.s3-acc-item[open] .s3-acc-caret{ transform: rotate(180deg); }
.s3-acc-body{
padding: 12px 14px 14px;
border-top: 1px solid #f1f5f9;
}
.s3-list{
margin: 0;
padding-left: 18px;
display: grid;
gap: 8px;
color: #475569;
font-weight: 700;
font-size: 13px;
line-height: 1.45;
}
.s3-list strong{ color: #0f172a; }
/* variante danger */
.s3-acc-danger{ border-color: rgba(239,68,68,.25); }
.s3-badge-danger{
background: rgba(239,68,68,.10);
border-color: rgba(239,68,68,.25);
color: #ef4444;
}
/* =================================================
MODAL STEP 3 — VERSION FINAL PRO (RESPONSIVO)
================================================= */
/* Overlay */
.modal-s3{
position:fixed;
inset:0;
display:none;
justify-content:center;
align-items:flex-start; /* más abajo */
background:rgba(15,23,42,.55);
z-index:999999;
padding:110px 16px 120px; /* espacio top y bottom */
}
/* Card */
.modal-s3 .card{
position:relative;
width:min(760px, 94vw);
margin:0 auto;
max-height:calc(100vh - 110px - 120px);
display:flex;
flex-direction:column;
background:#fff;
border-radius:20px;
border:1px solid #eef2f7;
box-shadow:0 30px 70px rgba(0,0,0,.28);
padding:18px;
overflow:hidden; /* scroll interno */
}
/* Botón cerrar */
.modal-s3 .x{
position:absolute;
top:14px;
right:14px;
width:42px;
height:42px;
border-radius:14px;
border:1px solid #e5e7eb;
background:#fff;
box-shadow:0 10px 22px rgba(15,23,42,.08);
cursor:pointer;
display:grid;
place-items:center;
transition:all .15s ease;
}
.modal-s3 .x:hover{
transform:translateY(-2px);
box-shadow:0 16px 32px rgba(0,0,0,.18);
border-color:rgba(178,34,34,.35);
}
.modal-s3 .x i{ font-size:18px; }
/* Encabezado */
.s3-modal-title{
margin:0;
font-weight:950;
color:#0f172a;
letter-spacing:-.2px;
font-size: clamp(18px, 2vw, 22px);
padding-right:60px;
}
.s3-modal-sub{
margin:6px 0 0;
color:#64748b;
font-weight:800;
font-size:13px;
}
/* Scroll contenedor */
.s3-body-scroll{
margin-top:14px;
border-top:1px solid #f1f5f9;
padding-top:14px;
overflow:auto;
padding-right:10px;
-webkit-overflow-scrolling:touch;
}
/* Scrollbar bonito */
.s3-body-scroll::-webkit-scrollbar{ width:10px; }
.s3-body-scroll::-webkit-scrollbar-track{
background:#f1f5f9;
border-radius:999px;
}
.s3-body-scroll::-webkit-scrollbar-thumb{
background: linear-gradient(180deg, rgba(178,34,34,.7), rgba(178,34,34,.25));
border-radius:999px;
border:2px solid #f1f5f9;
}
/* Caja informativa superior */
.s3-info-top{
background:linear-gradient(180deg,#fbfdff,#f8fafc);
border:1px solid #e5e7eb;
border-radius:16px;
padding:14px;
box-shadow:0 14px 30px rgba(15,23,42,.06);
}
.s3-info-top p{
margin:0 0 10px;
color:#334155;
font-weight:750;
font-size:13px;
line-height:1.55;
}
.s3-info-top p:last-child{ margin-bottom:0; }
/* Acordeones */
.s3-acc-item{
border:1px solid #e5e7eb;
border-radius:16px;
background:#fff;
overflow:hidden;
box-shadow:0 12px 26px rgba(15,23,42,.05);
margin-top:12px;
transition:all .18s ease;
}
.s3-acc-item[open]{
border-color:rgba(178,34,34,.35);
box-shadow:0 20px 45px rgba(178,34,34,.12);
}
/* Summary */
.s3-acc-sum{
list-style:none;
cursor:pointer;
user-select:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px;
background:linear-gradient(180deg,#ffffff,#fbfbfd);
}
.s3-acc-sum::-webkit-details-marker{ display:none; }
.s3-acc-left{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}
.s3-acc-name{
font-weight:950;
color:#0f172a;
letter-spacing:.3px;
text-transform:uppercase;
font-size:13px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* Badge */
.s3-acc-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:54px;
height:34px;
padding:0 12px;
border-radius:999px;
border:1px solid rgba(178,34,34,.35);
background:rgba(178,34,34,.08);
color:#b22222;
font-weight:950;
letter-spacing:.6px;
font-size:12px;
}
/* Flecha */
.s3-acc-caret{
transition: transform .18s ease;
color:#64748b;
}
.s3-acc-item[open] .s3-acc-caret{
transform:rotate(180deg);
color:var(--brand);
}
/* Body */
.s3-acc-body{
padding:12px 14px 16px;
border-top:1px solid #f1f5f9;
background:#fff;
}
/* Lista */
.s3-list{
margin:0;
padding:0;
display:grid;
gap:10px;
}
.s3-list li{
list-style:none;
position:relative;
padding-left:22px;
color:#334155;
font-weight:750;
font-size:13px;
line-height:1.55;
}
.s3-list li::before{
content:"";
position:absolute;
left:0;
top:.55em;
width:10px;
height:10px;
border-radius:999px;
background:rgba(178,34,34,.25);
box-shadow:0 0 0 4px rgba(178,34,34,.08);
}
.s3-list strong{ color:#0f172a; }
/* Danger (DECLINE) */
.s3-acc-danger{
border-color:rgba(185,28,28,.35);
}
.s3-acc-danger[open]{
border-color:rgba(185,28,28,.6);
box-shadow:0 20px 45px rgba(185,28,28,.15);
}
.s3-badge-danger{
background:rgba(185,28,28,.08);
border-color:rgba(185,28,28,.35);
color:#b91c1c;
}
/* Responsive */
@media (max-width:520px){
.modal-s3{
padding:90px 12px 120px;
}
.modal-s3 .card{
width:96vw;
max-height:calc(100vh - 90px - 120px);
padding:14px;
border-radius:18px;
}
.s3-modal-title{ font-size:16px; }
.s3-modal-sub{ font-size:12px; }
.s3-acc-name{ font-size:12px; }
.s3-list li{ font-size:12px; }
}
/* ======= Responsive: más compacto en móvil (SIN tapar navbar) ======= */
@media (max-width: 520px){
/* Ajusta estos 2 valores si tu navbar es más alta */
:root{
--s3-top-safe: 92px; /* espacio para navbar */
--s3-bot-safe: 110px; /* espacio para footer sticky / safe-area */
}
.modal-s3{
align-items:flex-start;
padding: var(--s3-top-safe) 12px var(--s3-bot-safe);
}
.modal-s3 .card{
width: 96vw;
max-height: calc(100vh - var(--s3-top-safe) - var(--s3-bot-safe));
padding: 12px;
border-radius: 16px;
overflow: hidden; /* scroll interno */
}
.s3-modal-title{ font-size: 16px; }
.s3-modal-sub{ font-size: 12px; }
.s3-body-scroll{
overflow:auto;
-webkit-overflow-scrolling:touch;
padding-right:8px;
}
.s3-info-top{ padding: 10px 12px; }
.s3-info-top p{ font-size: 12px; }
.s3-acc-sum{ padding: 10px 12px; }
.s3-acc-body{ padding: 10px 12px 12px; }
.s3-list{ gap: 7px; }
.s3-list li{ font-size: 12px; }
/* iPhone notch safe area (extra abajo) */
@supports (padding: max(0px)){
.modal-s3{
padding-bottom: max(var(--s3-bot-safe), env(safe-area-inset-bottom));
padding-top: max(var(--s3-top-safe), env(safe-area-inset-top));
}
}
}
/* ==========================================================
STEP 3 — TOOLTIP EN ADICIONALES
========================================================== */
.addon-headline{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.addon-help-wrap{
position:absolute;
top:10px;
right:10px;
z-index:5;
}
.addon-help-btn{
width:24px;
height:24px;
border-radius:999px;
border:1px solid rgba(178,34,34,.25);
background:rgba(178,34,34,.08);
color:var(--brand);
display:grid;
place-items:center;
cursor:pointer;
font-size:12px;
transition:.2s ease;
padding:0;
}
.addon-help-btn:hover{
background:rgba(178,34,34,.14);
transform:translateY(-1px);
}
.addon-tooltip{
position:absolute;
left:50%;
bottom:calc(100% + 12px);
transform:translateX(-50%) translateY(8px);
width:220px;
background:#f3f4f6;
color:#4b5563;
font-size:12px;
line-height:1.45;
font-weight:800;
text-align:center;
padding:12px 14px;
border-radius:12px;
box-shadow:0 8px 22px rgba(15,23,42,.18);
opacity:0;
visibility:hidden;
transition:.22s ease;
z-index:9999; /* <-- antes 100 */
pointer-events:none;
}
.addon-tooltip::after{
content:"";
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
border-width:8px 7px 0 7px;
border-style:solid;
border-color:#f3f4f6 transparent transparent transparent;
}
.addon-help-wrap:hover .addon-tooltip,
.addon-help-wrap:focus-within .addon-tooltip{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}
@media (max-width:640px){
.addon-tooltip{
width:190px;
font-size:11px;
padding:10px 12px;
}
}
@media (max-width: 640px){
.addon-tooltip{
left: auto !important;
right: 0 !important;
transform: translateY(8px) !important;
width: 180px !important;
font-size: 11px !important;
text-align: center !important;
padding: 10px 12px !important;
}
.addon-tooltip::after{
left: auto !important;
right: 10px !important;
transform: none !important;
}
}
/* =========================================
TOOLTIP STEP 3 — DISEÑO PRO (HORIZONTAL)
========================================= */
/* contenedor del tooltip */
body [class*="tooltip"] {
max-width: 420px !important;
width: max-content !important;
min-width: 280px !important;
padding: 14px 16px !important;
border-radius: 14px !important;
text-align: justify !important;
text-align: left !important;
line-height: 1.6 !important;
font-size: 14px !important;
hyphens: auto !important;
word-spacing: -0.5px;
background: #f3f4f6 !important;
color: #374151 !important;
box-shadow: 0 12px 30px rgba(0,0,0,.15) !important;
white-space: normal !important;
}
/* =========================================
MOBILE FIX (QUE NO SE HAGA VERTICAL)
========================================= */
@media (max-width: 768px) {
body [class*="tooltip"] {
max-width: 85vw !important;
min-width: 260px !important;
font-size: 15px !important;
line-height: 1.7 !important;
padding: 16px !important;
}
}
/* =========================================
TOOLTIP STEP 3 — DISEÑO PRO (HORIZONTAL)
========================================= */
/* contenedor del tooltip */
body [class*="tooltip"] {
max-width: 420px !important;
width: max-content !important;
min-width: 280px !important;
padding: 14px 16px !important;
border-radius: 14px !important;
text-align: justify !important;
text-align: left !important;
line-height: 1.6 !important;
font-size: 14px !important;
hyphens: auto !important;
word-spacing: -0.5px;
background: #f3f4f6 !important;
color: #374151 !important;
box-shadow: 0 12px 30px rgba(0,0,0,.15) !important;
white-space: normal !important;
}
/* =========================================
MOBILE FIX (QUE NO SE HAGA VERTICAL)
========================================= */
@media (max-width: 768px) {
body [class*="tooltip"] {
max-width: 85vw !important;
min-width: 260px !important;
font-size: 15px !important;
line-height: 1.7 !important;
padding: 16px !important;
}
}
/* ==========================================================
STEP 4 — LAYOUT 2 PANELES
========================================================== */
.page.wizard-page[data-current-step="4"]{
--wizard-w: 1280px;
}
.page.wizard-page[data-current-step="4"] .wizard-card{
width: min(var(--wizard-w), 96vw);
margin:0 auto;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.page.wizard-page[data-current-step="4"] .wizard-head{
background: rgba(255,255,255,.92);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 18px;
margin: 0 0 18px;
backdrop-filter: blur(6px);
position:relative;
overflow:hidden;
}
.page.wizard-page[data-current-step="4"] .wizard-head::before{
content:"";
position:absolute;
left:0; right:0; top:0;
height:4px;
background:linear-gradient(90deg, var(--brand), rgba(178,34,34,.25), var(--brand-dark));
opacity:.95;
}
.page.wizard-page[data-current-step="4"] .wizard-head h2,
.page.wizard-page[data_current_step="4"] .wizard-head p{ color: var(--ink); }
.step4-layout{
display:grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap:22px;
align-items:start;
}
.step4-pane{
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
min-width:0;
}
@media (max-width: 992px){
.page.wizard-page[data-current-step="4"]{ --wizard-w: 900px; }
.step4-layout{ grid-template-columns:1fr; gap:18px; }
}
.page.wizard-page[data-current-step="4"] img{ max-width:100%; height:auto; }
.page.wizard-page[data-current-step="4"] .sum-car-info,
.page.wizard-page[data-current-step="4"] .sum-table,
.page.wizard-page[data-current-step="4"] .sum-form{ min-width:0; }
/* ==========================================================
STEP 4 — DATOS PERSONALES
========================================================== */
.sum-section-title{
background:transparent;
border:0;
padding:0;
margin:4px 0 12px;
font-size:18px;
font-weight:900;
letter-spacing:.6px;
color:#000;
display:flex;
align-items:center;
gap:14px;
text-transform:none;
}
.sum-section-title::after{
content:"";
flex:1;
height:2px;
background:linear-gradient(90deg, var(--brand), rgba(178,34,34,.15));
border-radius:999px;
}
.sum-form{
background:#fff;
border:1px solid #e5e7eb;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
padding:14px;
}
.sum-form .sum-personal-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px 22px;
margin-top:10px;
margin-bottom:14px;
}
.sum-form .sum-personal-grid .field{
gap:8px;
margin:0;
}
.sum-form .sum-personal-grid .field > label{
display:block;
margin:0 0 2px;
color:#000;
font-weight:900;
font-size:13px;
letter-spacing:.2px;
text-transform:uppercase;
}
.sum-form input,
.sum-form select{
width:100%;
height:54px;
padding:0 14px;
border-radius:14px;
border:1.5px solid #9ca3af;
background:#fff;
font-weight:900;
color:#000;
outline:none;
box-shadow:none;
}
.sum-form input::placeholder{
color:#000;
opacity:1;
}
.sum-form select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background-image:
linear-gradient(45deg, transparent 50%, #000 50%),
linear-gradient(135deg, #000 50%, transparent 50%);
background-position:
calc(100% - 18px) 50%,
calc(100% - 12px) 50%;
background-size:6px 6px, 6px 6px;
background-repeat:no-repeat;
padding-right:34px;
}
.sum-form input:focus,
.sum-form select:focus,
.sum-form input:focus-visible,
.sum-form select:focus-visible{
border-color:#000;
outline:none;
box-shadow:none;
}
/* DOB (DD / mmm / YYYY) */
.sum-form .dob-inline{
display:flex;
width:100%;
border:1.5px solid #9ca3af;
border-radius:14px;
overflow:visible;
background:#fff;
}
.sum-form .dob-inline select{
flex:1;
height:54px;
border:0 !important;
outline:none !important;
text-align:center;
font-weight:900;
font-size:14px;
background:#fff !important;
color:#000 !important;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
padding:0 10px;
}
.sum-form .dob-inline select:not(:last-child){
border-right:1.5px solid #9ca3af !important;
}
.sum-form .dob-inline:focus-within{
outline:none !important;
box-shadow:none !important;
border-color:#000 !important;
}
.sum-form #dob_month{ text-transform:lowercase; letter-spacing:.2px; }
.sum-form .sum-checks{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px 22px;
margin:10px 0 16px;
}
.cbox{
display:flex;
align-items:flex-start;
gap:10px;
font-weight:900;
color:#0f172a;
margin:0;
font-size:13px;
padding:0;
background:transparent;
border:0;
box-shadow:none;
max-width:none;
}
.cbox input{
width:18px; height:18px;
accent-color:var(--brand);
margin-top:3px;
flex:0 0 auto;
}
@media (max-width:760px){
.sum-form .sum-personal-grid{ grid-template-columns:1fr; }
.sum-form .sum-checks{ grid-template-columns:1fr; }
}
#btnReservar{
height:44px;
padding:0 26px;
width:100%;
border-radius:16px;
font-size:14px;
font-weight:900;
background:linear-gradient(180deg, var(--brand), var(--brand-dark));
color:#fff;
box-shadow:0 16px 34px rgba(178,34,34,.22);
margin-left:auto;
}
/* ==========================================================
STEP 4 — RESUMEN (compacto)
========================================================== */
.sum-compact{
margin-top:6px;
padding:12px;
border-radius:14px;
background:linear-gradient(180deg,#fff,#fbfbfd);
border:1px solid #eef2f7;
box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.sum-compact-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
padding-bottom:10px;
border-bottom:1px dashed rgba(178,34,34,.18);
}
.sum-days{
display:inline-flex;
align-items:center;
gap:8px;
font-weight:900;
font-size:14px;
color:#111827;
background:rgba(178,34,34,.12);
border:1px solid rgba(178,34,34,.35);
padding:10px 16px;
border-radius:999px;
}
/* Subtítulos */
.sum-subtitle{
margin: 12px 0 10px;
font-weight: 900;
font-size: 17px;
letter-spacing: .4px;
text-transform: uppercase;
color: #111827;
display:flex;
align-items:center;
gap:12px;
}
.sum-subtitle::after{
content:"";
flex:1;
height:2px;
background: linear-gradient(90deg, rgba(178,34,34,.55), rgba(178,34,34,.10));
border-radius: 999px;
}
/* Lugar y fecha grid */
.sum-compact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.sum-item{
background:#fff;
border:1px solid #eef2f7;
border-radius:14px;
padding:12px;
display:flex;
flex-direction:column;
gap:8px;
}
.sum-item-label{
display:flex;
align-items:center;
gap:8px;
font-weight:900;
font-size:11px;
color:#6b7280;
text-transform:uppercase;
letter-spacing:.45px;
}
.sum-item-value{
display:flex;
flex-direction:column;
gap:6px;
}
.sum-place{
font-weight:900;
color:#111827;
line-height:1.2;
}
/* Fecha/hora */
.sum-dt2{
display:flex;
flex-direction:column;
gap:3px;
margin-top:3px;
}
.sum-dt2 .dt-row{
display:flex;
gap:6px;
align-items:baseline;
}
.sum-dt2 .dt-lbl{
min-width:52px;
font-size:10px;
font-weight:900;
letter-spacing:.45px;
text-transform:uppercase;
color:#6b7280;
}
.sum-dt2 .dt-val{
font-size:13px;
font-weight:800;
color:#111827;
line-height:1.15;
}
.sum-dt2 .dt-time{
font-size:13px;
font-weight:900;
color:#111827;
}
@media (max-width:760px){
.sum-compact-grid{ grid-template-columns:1fr; }
.sum-compact-head{ flex-direction:column; align-items:flex-start; }
}
/* Tu auto */
.sum-car{
display:flex;
gap:14px;
align-items:center;
background:#fff;
border:1px solid #e5e7eb;
border-radius:14px;
padding:12px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
margin-bottom:12px;
}
.sum-car img{
width:210px;
height:auto;
object-fit:contain;
background:#f6f7fb;
border-radius:12px;
padding:8px;
border:1px solid #eef2f7;
}
.sum-car-info{ min-width:0; }
@media (max-width:760px){
.sum-car{ flex-direction:column; align-items:flex-start; }
.sum-car img{ width:100%; }
}
@media (max-width:1024px){
footer, .footer-elegant {
position: relative;
z-index: 10;
background-color: #0b1120 !important;
}
.step4-pane .sum-total,
.sum-form .wizard-nav,
#btnReservar {
display:none !important;
}
/* MODIFICADO: Inicia oculta y SIN TRANSICIÓN hasta que se necesite */
.movil-footer-sticky {
display: none !important;
flex-direction: column;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #ffffff;
padding: 20px;
box-shadow: 0 -10px 40px rgba(0,0,0,0.20);
border-radius: 25px 25px 0 0;
gap: 15px;
z-index: 9999999;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(100%);
opacity: 0;
}
/* Clase para mostrar la tarjeta - SOLO cuando se hace scroll */
.movil-footer-sticky.visible {
display: flex !important;
transform: translateY(0);
opacity: 1;
}
.movil-total-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
font-weight:900;
font-size:20px;
}
.movil-total-label{
color:#000;
text-transform:uppercase;
}
.movil-total-amount{
color:var(--brand);
font-size:24px;
}
.btn-reservar-movil{
background:var(--brand);
color:#fff;
border:none;
border-radius:14px;
padding:20px;
font-size:18px;
font-weight:900;
width:100%;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;
transition:all .2s ease;
}
.btn-reservar-movil:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(178,34,34,.35);
}
/* Ajuste para el scroll cuando la tarjeta está visible */
.step4-layout.has-sticky-card {
padding-bottom: 250px !important;
}
body.has-sticky-card::after {
content: "";
display: block;
height: 160px;
width: 100%;
}
}
/* ESCRITORIO */
@media (min-width:1025px){
.movil-footer-sticky{
display:none !important;
}
.movil-footer-sticky.visible {
display: none !important;
}
}
/* ==========================================================
STEP 4 — DETALLES DEL PRECIO
========================================================== */
.sum-line-title{ display:none !important; }
.sum-table{
background:transparent;
border:0;
box-shadow:none;
}
.sum-block{
background:#fff;
border:1px solid #eef2f7;
border-radius:16px;
padding:14px;
margin-bottom:12px;
box-shadow: 0 14px 30px rgba(0,0,0,.06);
}
.sum-bar{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:12px 14px 12px 16px;
border-radius:14px;
background: rgba(255,255,255,.75);
border:1px solid rgba(15,23,42,.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 22px rgba(0,0,0,.06);
overflow:hidden;
}
.sum-bar::before{
content:"";
position:absolute;
left:0; top:10px; bottom:10px;
width:4px;
border-radius:999px;
background: linear-gradient(180deg, var(--brand), var(--brand-dark));
box-shadow: 0 8px 18px rgba(178,34,34,.18);
}
.sum-bar > span{
display:flex;
align-items:center;
gap:10px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.55px;
font-size:12px;
color:#0f172a;
}
.sum-bar > strong{
white-space:nowrap;
font-weight:900;
font-size:14px;
color:#0f172a;
padding:8px 12px;
border-radius:999px;
background: linear-gradient(180deg, rgba(178,34,34,.10), rgba(178,34,34,.05));
border:1px solid rgba(178,34,34,.18);
}
.sum-subbar{
margin-top:12px;
margin-bottom:8px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.55px;
font-size:12px;
color:#111827;
display:flex;
align-items:center;
gap:12px;
}
.sum-subbar::after{
content:"";
flex:1;
height:2px;
border-radius:999px;
background: linear-gradient(90deg, rgba(15,23,42,.12), rgba(15,23,42,0));
}
.sum-block .row{
padding:10px 0;
border-top:1px solid #f1f5f9;
font-weight:800;
font-size:14px;
color:#0f172a;
}
.sum-block .row:first-of-type{ border-top:0; }
.row-base-total{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
padding-top:8px !important;
}
.row-base-total .row-total-label{
font-weight:900;
color:#111827;
}
.row-base-total strong{
font-weight:900;
font-size:18px;
white-space:nowrap;
}
.inc-items{ display:flex; flex-wrap:wrap; gap:10px; }
.inc-item{
display:inline-flex;
align-items:center;
gap:8px;
font-weight:800;
font-size:13px;
color:#0f172a;
padding:8px 12px;
border-radius:999px;
background:#fff;
border:1px solid #eef2f7;
box-shadow: 0 8px 18px rgba(0,0,0,.04);
}
.inc-check{ color:#22c55e; font-weight:900; }
.sum-total{
margin-top:10px;
padding:14px 2px 0;
display:flex;
justify-content:space-between;
align-items:flex-end;
border-top:2px solid rgba(178,34,34,.85);
}
.sum-total span{
font-weight:900;
font-size:18px;
color:#0f172a;
}
.sum-total strong{
font-weight:900;
font-size:24px;
color:#0f172a;
letter-spacing:.2px;
}
@media (max-width:560px){
.sum-block{ padding:12px; border-radius:14px; }
.sum-bar{ padding:11px 12px 11px 14px; }
.sum-bar > strong{ font-size:13px; padding:7px 10px; }
.sum-total strong{ font-size:22px; }
}
/* ==========================================================
STEP 4 - ACORDEONES PRECIO
========================================================== */
.sum-acc{
background:#fff;
border:1px solid #eef2f7;
border-radius:16px;
box-shadow:0 14px 30px rgba(0,0,0,.06);
margin-bottom:12px;
overflow:hidden;
}
.sum-acc > summary{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
padding:14px 18px;
}
.sum-acc > summary::-webkit-details-marker{ display:none; }
.sum-acc > .sum-bar{
background:transparent;
border:0;
box-shadow:none;
padding:14px 18px;
gap:8px;
}
.sum-bar > span{
font-weight:900;
text-transform:uppercase;
letter-spacing:.55px;
font-size:13px;
color:#0f172a;
}
.sum-bar > strong{
margin-left:auto;
margin-right:6px;
font-size:15px;
font-weight:900;
color:#0f172a;
background:none;
border:0;
padding:0;
}
.sum-caret{
font-size:14px;
transition: transform .2s ease;
opacity:.8;
}
.sum-acc[open] .sum-caret{
transform:rotate(180deg);
}
.sum-acc-body{
padding:12px 18px 16px;
border-top:1px solid #f1f5f9;
}
.sum-acc-body .row{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:12px;
padding:10px 0;
border-top:1px solid #f1f5f9;
font-weight:800;
font-size:14px;
color:#0f172a;
}
.sum-acc-body .row:first-child{ border-top:0; }
.sum-acc-body .row > strong{
font-weight:900;
white-space:nowrap;
}
.sum-acc-body .muted{
color:#6b7280;
}
/* ==========================================================
BOTONES GENERALES
========================================================== */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 16px;
border-radius:12px;
border:0;
cursor:pointer;
font-weight:900;
text-decoration:none;
white-space:nowrap;
transition:transform .15s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(.98); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-gray{ background:#e5e7eb; color:#111; }
.btn-secondary{ background:#111827; color:#fff; }
@media (max-width: 560px) {
.wizard-nav {
display: flex !important;
flex-direction: row !important;
gap: 70px;
width: 100%;
justify-content: space-between;
}
.wizard-nav .btn {
flex: 1;
padding: 12px 5px !important;
font-size: 14px;
text-align: center;
}
}
/* ==============================
MODAL METODO DE PAGO
============================== */
.modal-overlay{
position: fixed;
inset: 0;
background: rgba(15, 23, 42, .55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 9999;
}
.modal-metodo-pago{
position: relative;
width: min(100%, 420px);
background: #fff;
border-radius: 20px;
padding: 18px;
box-shadow: 0 24px 55px rgba(0,0,0,.18);
border: 1px solid #eef2f7;
}
/* botón cerrar */
.modal-close{
position: absolute;
top: 10px;
right: 12px;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: #f8fafc;
color: #0f172a;
font-size: 22px;
cursor: pointer;
}
.modal-close:hover{
background: #eef2f7;
}
/* encabezado */
.mp-head{
margin-bottom: 14px;
}
.mp-badge{
display: inline-flex;
align-items: center;
padding: 5px 9px;
border-radius: 999px;
background: rgba(178,34,34,.08);
color: var(--brand, #b22222);
font-weight: 700;
font-size: 11px;
margin-bottom: 6px;
}
.mp-head h3{
margin: 0;
font-size: 22px;
color: #0f172a;
}
/* opciones de pago */
.mp-options{
display: grid;
gap: 10px;
}
/* card de pago */
.mp-pay-card{
border: 0;
width: 100%;
text-align: left;
border-radius: 16px;
padding: 14px;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease;
}
.mp-pay-card:hover{
transform: translateY(-2px);
}
/* pago en línea */
.mp-pay-card.is-online{
background: linear-gradient(180deg, #fff5f5 0%, #fff 100%);
border: 2px solid rgba(178,34,34,.18);
box-shadow: 0 12px 24px rgba(178,34,34,.10);
}
/* pago oficina */
.mp-pay-card.is-office{
background: #f3f4f6;
border: 2px solid transparent;
}
/* precio anterior */
.mp-old-price{
display: block;
font-size: 16px;
font-weight: 800;
color: #b22222;
text-decoration: line-through;
opacity: .75;
margin-bottom: 4px;
}
/* precio principal */
.mp-price{
display: block;
font-size: 22px;
color: #0f172a;
font-weight: 900;
margin-bottom: 6px;
}
/* ahorro */
.mp-save{
display: block;
font-size: 12px;
font-weight: 700;
color: #6b7280;
margin-bottom: 10px;
}
/* botones grandes */
.mp-action{
display: flex;
justify-content: center;
align-items: center;
min-height: 48px;
border-radius: 14px;
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .02em;
}
.is-online .mp-action{
background: #ff3b30;
color: #fff;
}
.is-office .mp-action{
background: #9ca3af;
color: #fff;
}
/* botón cancelar */
.mp-cancel{
width: 100%;
margin-top: 12px;
}
/* responsive */
@media (max-width: 560px){
.modal-metodo-pago{
width: min(100%, 360px);
padding: 15px;
border-radius: 18px;
}
.mp-head h3{
font-size: 18px;
}
.mp-price{
font-size: 18px;
}
.mp-old-price{
font-size: 14px;
}
.mp-action{
min-height: 44px;
font-size: 13px;
}
}
/* ==========================================================
FLATPICKR
========================================================== */
.flatpickr-wrapper{ position:relative; }
.flatpickr-calendar{
z-index: 999999 !important;
border: 0 !important;
border-radius: 18px !important;
box-shadow: 0 26px 70px rgba(0,0,0,.25) !important;
font-family: 'Poppins',system-ui,Arial,sans-serif !important;
position: fixed !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
width: auto !important;
max-width: 95vw !important;
}
.flatpickr-calendar.open{
width: min(860px, 94vw) !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
.flatpickr-months{
background: var(--brand) !important;
color: #fff !important;
}
.flatpickr-months .flatpickr-month{ height:64px !important; }
.flatpickr-current-month{
color:#fff !important;
font-weight:900 !important;
font-size:22px !important;
padding-top:14px !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month{
fill:#fff !important;
opacity:1 !important;
}
.flatpickr-weekdays{
background:#fff !important;
border-bottom:6px solid var(--brand) !important;
}
span.flatpickr-weekday{
color:var(--brand) !important;
font-weight:900 !important;
}
.flatpickr-rContainer,
.flatpickr-days{ width:100% !important; }
.dayContainer{
width:100% !important;
min-width:0 !important;
max-width:none !important;
}
.flatpickr-day{
border-radius:12px !important;
font-weight:900 !important;
height:52px !important;
line-height:52px !important;
max-width:none !important;
}
.flatpickr-day:hover{ background:#ffe5e5 !important; }
.flatpickr-day.today:not(.selected):not(.startRange):not(.endRange){
border:2px solid var(--brand) !important;
color:var(--brand) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
background:var(--brand) !important;
border-color:var(--brand) !important;
color:#fff !important;
}
.flatpickr-day.inRange{
background:#ffe5e5 !important;
color:#b22222 !important;
}
.flatpickr-day.startRange{ border-radius:999px 0 0 999px !important; }
.flatpickr-day.endRange{ border-radius:0 999px 999px 0 !important; }
.flatpickr-day.startRange.endRange{ border-radius:999px !important; }
.flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper{
z-index: 999999 !important;
}
.flatpickr-wrapper {
width:100% !important;
}
.flatpickr-input,
.flatpickr-alt-input {
height:48px !important;
border-radius:10px !important;
font-size:14px !important;
}
/* Movil (560px) */
@media (max-width: 560px) {
.flatpickr-calendar {
position: fixed !important;
left: 50% !important;
top: 10vh !important;
transform: translateX(-50%) !important;
padding-top: 30px !important;
background: #ffffff !important;
opacity: 1 !important;
z-index: 999999 !important;
}
.flatpickr-calendar.open {
width: min(420px, 90vw) !important;
height: auto !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;
}
.flatpickr-day {
height: 62px !important;
line-height: 62px !important;
font-size: 14px !important;
}
.dayContainer {
row-gap: 11px !important; /
}
.flatpickr-months .flatpickr-month {
height: 50px !important;
}
.flatpickr-current-month {
padding-top: 10px !important;
font-size: 20px !important;
}
span.flatpickr-weekday {
font-size: 13px !important;
padding-bottom: 5px !important;
}
}
/* Capa de fondo oscura */
.fp-view-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(3px);
z-index: 999998;
display: none;
transition: opacity 0.3s ease;
}
.fp-view-overlay.active {
display: block;
}
/* ==========================================================
LINKS
========================================================== */
.link-politicas{
color: var(--brand);
font-weight: 600;
text-decoration: underline;
transition: .2s ease;
}
.link-politicas:hover{
color: var(--brand-dark);
}
/* ==========================================================
STEP 4 - ICONOS (resumen)
========================================================== */
.step4-pane .car-mini-specs{
margin-top:14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
}
.step4-pane .car-specs{
margin:0;
padding:0;
list-style:none;
display:flex;
align-items:center;
gap:16px;
color:#0f172a;
font-weight:900;
}
.step4-pane .car-specs li{
display:inline-flex;
align-items:center;
gap:8px;
font-size:14px;
line-height:1;
}
.step4-pane .car-specs i{
font-size:16px;
opacity:.95;
}
.step4-pane .car-mini-tech{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
@media (max-width:760px){
.step4-pane .car-mini-specs{
justify-content:flex-start;
}
}
/* ==========================================================
Select2 ajustes
========================================================== */
.ctl.has-ico .select2-container--default .select2-selection--single {
padding-left: 40px !important;
height: 52px !important;
display: flex;
align-items: center;
border-radius: 14px;
border: 1px solid #e5e7eb;
}
.ctl.has-ico .ico {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
color: #9ca3af;
pointer-events: none;
font-size: 1.1rem;
}
.select2-selection__rendered { padding-left: 0 !important; }
.select2-search--dropdown { display: none !important; }
/* ==========================================================
STEP 4 — TU AUTO
========================================================== */
.page.wizard-page[data-current-step="4"] .sum-car .car-mini-specs{
margin-top:8px !important;
padding:0 !important;
list-style:none !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:12px !important;
flex-wrap:wrap !important;
}
.page.wizard-page[data-current-step="4"] .sum-car .car-mini-specs::before,
.page.wizard-page[data-current-step="4"] .sum-car .car-mini-specs::after,
.page.wizard-page[data-current-step="4"] .sum-car .car-mini-specs li::before,
.page.wizard-page[data-current-step="4"] .sum-car .car-mini-specs li::after{
content:none !important;
display:none !important;
}
.page.wizard-page[data-current-step="4"] .sum-car .car-mini-specs > li{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
white-space:nowrap !important;
font-weight:900 !important;
color:#0f172a !important;
line-height:1 !important;
font-size:14px !important;
}
.page.wizard-page[data-current-step="4"] .sum-car .car-mini-specs > li i{
font-size:16px !important;
opacity:.95 !important;
}
.page.wizard-page[data-current-step="4"] .sum-car .car-mini-tech{
margin-top:8px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:12px !important;
flex-wrap:wrap !important;
}
.page.wizard-page[data-current-step="4"] .sum-car .car-mini-tech .chip{
padding:8px 12px !important;
border-radius:999px !important;
font-size:12px !important;
font-weight:900 !important;
}
@media (max-width:560px){
.page.wizard-page[data-current-step="4"] .sum-car .car-mini-specs{
flex-wrap:wrap !important;
row-gap:10px !important;
}
}
/* ==========================================================
MODAL DE PROTECCIONES
========================================================== */
.modal-global-viajero {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 999999;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
}
.modal-global-content {
background: #ffffff !important;
width: 95%;
max-width: 520px;
padding: 40px;
border-radius: 16px;
position: relative;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
border: none;
}
.modal-v-header-title {
font-weight: 900;
color: #0f172a;
font-size: 1.2rem;
margin-bottom: 0;
}
.modal-v-escudo-circulo {
min-width: 65px;
height: 65px;
border: 3px solid #22c55e;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #22c55e;
background-color: #f0fdf4;
}
.modal-v-titulo-negro {
font-size: 14px;
font-weight: 900;
color: #000;
letter-spacing: 0.5px;
}
.modal-v-texto-gris {
font-size: 14px;
color: #4b5563;
line-height: 1.6;
}
.cerrar-modal-v {
position: absolute;
top: 15px; right: 20px;
font-size: 32px;
color: #94a3b8;
cursor: pointer;
transition: color 0.2s;
}
.cerrar-modal-v:hover { color: #b22222; }
/* ==========================================================
STEP 4 - VALIDACIONES (AISLADAS)
- Solo aplican cuando el step es 4
========================================================= */
.page.wizard-page[data-current-step="4"] .sum-personal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
align-items: end;
}
/* AJUSTE RESPONSIVO - MÓVIL */
@media (max-width: 760px) {
.page.wizard-page[data-current-step="4"] .sum-personal-grid {
grid-template-columns: 1fr !important;
}
/* DOB ocupa todo el ancho en móvil */
.page.wizard-page[data-current-step="4"] .field-dob-container {
grid-column: 1 / -1 !important;
}
}
/* AJUSTE RESPONSIVO - TABLET */
@media (min-width: 761px) and (max-width: 992px) {
.page.wizard-page[data-current-step="4"] .sum-personal-grid {
grid-template-columns: 1fr 1fr !important;
}
/* NUEVO: Hacer que el DOB sea horizontal en tablet */
.page.wizard-page[data-current-step="4"] .field-dob-container .dob-inline {
display: flex !important;
flex-direction: row !important;
width: 100%;
}
.page.wizard-page[data-current-step="4"] .field-dob-container .dob-inline select {
flex: 1;
height: 54px;
border-right: 1.5px solid #9ca3af;
}
.page.wizard-page[data-current-step="4"] .field-dob-container .dob-inline select:last-child {
border-right: none !important;
}
}
/* ===== CORRECCIÓN: BORDES SOLO CON ERRORES ===== */
@media (max-width: 992px) {
/* Estado NORMAL (sin error) - Gris */
.page.wizard-page[data-current-step="4"] .field-floating:not(.has-error) input,
.page.wizard-page[data-current-step="4"] .field-floating:not(.has-error) select,
.page.wizard-page[data-current-step="4"] .field-dob-container:not(.has-error) .dob-inline {
border: 1.5px solid #9ca3af !important;
}
/* Estado ERROR - Rojo (esto ya existe pero lo reforzamos) */
.page.wizard-page[data-current-step="4"] .field-floating.has-error input,
.page.wizard-page[data-current-step="4"] .field-floating.has-error select {
border: 1px solid #b22222 !important;
}
.page.wizard-page[data-current-step="4"] .field-dob-container.has-error .dob-inline {
border: 1px solid #b22222 !important;
}
}
@media (max-width: 760px) {
/* Refuerzo para móvil - Estado NORMAL */
.page.wizard-page[data-current-step="4"] .field-floating:not(.has-error) input,
.page.wizard-page[data-current-step="4"] .field-floating:not(.has-error) select,
.page.wizard-page[data-current-step="4"] .field-dob-container:not(.has-error) .dob-inline {
border: 1.5px solid #9ca3af !important;
}
/* Refuerzo para móvil - Estado ERROR */
.page.wizard-page[data-current-step="4"] .field-floating.has-error input,
.page.wizard-page[data-current-step="4"] .field-floating.has-error select {
border: 1px solid #b22222 !important;
}
.page.wizard-page[data-current-step="4"] .field-dob-container.has-error .dob-inline {
border: 1px solid #b22222 !important;
}
/* El resto de tu código existente para móvil */
.page.wizard-page[data-current-step="4"] .field-floating-sub select {
font-size: 12px;
padding: 0 2px;
}
.page.wizard-page[data-current-step="4"] .field-floating.has-error,
.page.wizard-page[data-current-step="4"] .field-dob-container.has-error,
.page.wizard-page[data-current-step="4"] .cbox.has-error {
margin-bottom: 20px;
}
.page.wizard-page[data-current-step="4"] .cbox .error-msg {
margin-left: 24px;
}
}
.page.wizard-page[data-current-step="4"] .field-floating,
.page.wizard-page[data-current-step="4"] .field-floating-sub,
.page.wizard-page[data-current-step="4"] .field-dob-container {
position: relative;
overflow: visible !important;
}
/* Inputs de texto */
.page.wizard-page[data-current-step="4"] .field-floating input {
width: 100%;
padding: 12px 10px;
border: 1px solid #9ca3af;
border-radius: 5px;
background-color: #fff !important;
color: #000;
outline: none;
transition: all 0.2s ease;
box-sizing: border-box;
}
/* Solo cuando tiene error, aplicamos el rojo */
.page.wizard-page[data-current-step="4"] .field-floating.has-error input {
border: 1px solid #b22222 !important;
}
/* Select de país - cuando tiene error */
.page.wizard-page[data-current-step="4"] .field-floating.has-error select {
border: 1px solid #b22222 !important;
}
.page.wizard-page[data-current-step="4"] .field-floating input:placeholder-shown:not(:focus) + label {
color: #9ca3af !important;
font-weight: 700 !important;
text-transform: uppercase;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 13px;
letter-spacing: 0.5px;
}
.page.wizard-page[data-current-step="4"] .field-floating input:focus + label,
.page.wizard-page[data-current-step="4"] .field-floating input:not(:placeholder-shown) + label {
top: 0 !important;
transform: translateY(-50%) !important;
font-size: 11px;
color: #000 !important;
font-weight: 800 !important;
text-transform: uppercase;
z-index: 110;
}
.page.wizard-page[data-current-step="4"] .field-floating input:focus,
.page.wizard-page[data-current-step="4"] .field-floating input:not(:placeholder-shown) {
border-color: #000 !important;
font-weight: 600;
}
.page.wizard-page[data-current-step="4"] .field-floating input::placeholder {
color: transparent;
}
/* Fecha de nacimiento (DOB) */
.page.wizard-page[data-current-step="4"] .field-dob-container {
display: flex;
flex-direction: column;
margin-top: 15px;
position: relative;
overflow: hidden !important;
}
/* DOB con error */
.page.wizard-page[data-current-step="4"] .field-dob-container.has-error .dob-inline {
border: 1px solid #b22222 !important;
border-radius: 5px;
}
.page.wizard-page[data-current-step="4"] .field-floating-sub {
position: relative;
flex: 1;
overflow: visible !important;
}
.page.wizard-page[data-current-step="4"] .field-floating-sub label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff !important;
padding: 0 4px;
white-space: nowrap;
z-index: 100;
pointer-events: none;
transition: all 0.2s ease;
}
.page.wizard-page[data-current-step="4"] .field-floating-sub select:focus + label,
.page.wizard-page[data-current-step="4"] .field-floating-sub select:not(:invalid) + label {
top: 0 !important;
left: 50% !important;
transform: translate(-50%, -50%) scale(0.85) !important;
color: #000;
font-weight: bold;
z-index: 120;
}
.page.wizard-page[data-current-step="4"] .select-dob {
background: #fff !important;
position: relative;
z-index: 5;
}
/* Select de país */
.page.wizard-page[data-current-step="4"] .field-floating select:invalid {
color: #9ca3af !important;
position: relative;
z-index: 5;
}
.page.wizard-page[data-current-step="4"] .field-floating label {
position:absolute;
left:10px;
top:50%;
transform:translateY(-50%);
background:#fff;
padding:0 4px;
color:#9ca3af;
transition:all .2s ease;
pointer-events:none;
z-index:1;
}
.page.wizard-page[data-current-step="4"] .field-floating select:focus {
color: transparent !important;
}
.page.wizard-page[data-current-step="4"] .field-floating select:focus + label,
.page.wizard-page[data-current-step="4"] .field-floating select:not(:invalid) + label {
opacity: 1;
z-index: 10;
top: 0 !important;
transform: translateY(-50%) !important;
font-size: 11px;
color: #000;
font-weight: bold;
}
.page.wizard-page[data-current-step="4"] .field-floating select:not(:invalid) {
color: #000 !important;
}
.page.wizard-page[data-current-step="4"] .field-floating input:placeholder-shown + label {
opacity: 1;
}
/* ==========================================================
VALIDACIÓN - MENSAJES DE ERROR (SOLO STEP 4)
========================================================== */
/* Contenedores - SIN padding por defecto */
.page.wizard-page[data-current-step="4"] .field-floating,
.page.wizard-page[data-current-step="4"] .field-dob-container,
.page.wizard-page[data-current-step="4"] .cbox {
position: relative;
margin-bottom: 5px;
}
.page.wizard-page[data-current-step="4"]
.field-floating.has-error {
padding-bottom: 0;
margin-bottom: 5px;
}
/* DOB y checkbox */
.page.wizard-page[data-current-step="4"]
.field-dob-container.has-error,
.page.wizard-page[data-current-step="4"]
.cbox.has-error {
padding-bottom: 0;
margin-bottom: 5px;
}
/* Mensaje de error - oculto por defecto */
.page.wizard-page[data-current-step="4"] .error-msg {
display: none;
position: static;
margin-top: 6px;
color: #b22222;
font-size: 11px;
font-weight: 600;
width: 100%;
}
/* Cuando el contenedor tiene error, mostramos el mensaje */
.page.wizard-page[data-current-step="4"] .field-floating.has-error .error-msg,
.page.wizard-page[data-current-step="4"] .field-dob-container.has-error .error-msg,
.page.wizard-page[data-current-step="4"] .cbox.has-error .error-msg {
display: block;
}
/* Ajustes para checkbox - SOLO borde rojo en el cuadrito */
.page.wizard-page[data-current-step="4"] .cbox.has-error input[type="checkbox"] {
outline: 2px solid #b22222;
outline-offset: 2px;
border-radius: 3px;
}
/* El texto del checkbox no debe tener borde */
.page.wizard-page[data-current-step="4"] .cbox.has-error span {
outline: none;
border: none;
}
.page.wizard-page[data-current-step="4"] select.field-error {
border: 1px solid #b22222 !important;
}
/* Ajustes para checkbox - mensaje debajo */
.page.wizard-page[data-current-step="4"] .cbox .error-msg {
margin-top: 4px;
margin-left: 28px; /* Alineado con el texto */
}
/* ===== AJUSTES RESPONSIVOS ADICIONALES ===== */
@media (max-width: 992px) {
/* Mensajes visibles */
.page.wizard-page[data-current-step="4"] .error-msg {
font-size: 11px;
}
}
@media (max-width: 760px) {
/* Ajuste para selects de fecha en móvil */
.page.wizard-page[data-current-step="4"] .field-floating-sub select {
font-size: 12px;
padding: 0 2px;
}
/* Espacio para mensajes de error */
.page.wizard-page[data-current-step="4"] .field-floating.has-error,
.page.wizard-page[data-current-step="4"] .field-dob-container.has-error,
.page.wizard-page[data-current-step="4"] .cbox.has-error {
margin-bottom: 20px;
}
.page.wizard-page[data-current-step="4"] .cbox .error-msg {
margin-left: 24px;
}
}
/* =========================================================
ALERTA ÉXITO RESERVACIÓN
========================================================= */
.alertify .ajs-dialog.resv-alertify-success{
width: min(80vw, 360px) !important;
max-width: 360px !important;
border-radius: 24px !important;
overflow: hidden;
border: 1px solid rgba(178,34,34,.12);
box-shadow: 0 24px 70px rgba(15,23,42,.24) !important;
background: #fff !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-header{
padding: 22px 24px 18px !important;
background: linear-gradient(180deg, #fff, #fcfcfd) !important;
border-bottom: 1px solid #eef2f7 !important;
color: #0f172a !important;
font-size: 18px !important;
font-weight: 800 !important;
font-family: 'Poppins', system-ui, Arial, sans-serif !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-body{
background: #fff !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-content{
padding: 22px 24px !important;
color: #0f172a !important;
font-family: 'Poppins', system-ui, Arial, sans-serif !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-footer{
padding: 16px 24px 20px !important;
border-top: 1px solid #eef2f7 !important;
background: #fff !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-buttons{
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-button.ajs-ok{
background: linear-gradient(135deg, #b22222, #8b1d1a) !important;
color: #fff !important;
border: 0 !important;
border-radius: 14px !important;
padding: 11px 18px !important;
min-width: 88px;
font-weight: 700 !important;
font-size: 14px !important;
box-shadow: 0 10px 24px rgba(178,34,34,.22);
transition: .18s ease;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-button.ajs-ok:hover{
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(178,34,34,.28);
}
.alertify .ajs-dialog.resv-alertify-success .ajs-close{
top: 14px !important;
right: 14px !important;
width: 34px !important;
height: 34px !important;
line-height: 34px !important;
border-radius: 999px !important;
background: #fff !important;
border: 1px solid #e5e7eb !important;
color: #6b7280 !important;
}
.alertify .ajs-dimmer{
background: rgba(15,23,42,.44) !important;
}
.resv-alert-success{
display: grid;
gap: 16px;
}
.resv-alert-badge{
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(34,197,94,.04));
border: 1px solid rgba(34,197,94,.16);
}
.resv-alert-badge-icon{
width: 24px;
height: 24px;
flex: 0 0 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #22c55e;
color: #fff;
font-size: 14px;
font-weight: 800;
margin-top: 1px;
}
.resv-alert-badge-text{
font-size: 16px;
line-height: 1.45;
font-weight: 600;
color: #0f172a;
}
.resv-alert-card{
padding: 16px 18px;
border-radius: 18px;
background: #fff;
border: 1px solid #eef2f7;
box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
.resv-alert-item{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
line-height: 1.5;
font-size: 15px;
}
.resv-alert-item + .resv-alert-item{
margin-top: 8px;
}
.resv-alert-label{
font-weight: 800;
color: #0f172a;
}
.resv-alert-total{
margin-top: 12px !important;
padding-top: 12px;
border-top: 1px dashed #e5e7eb;
font-size: 18px;
}
.resv-alert-total b{
color: #b22222;
font-size: 20px;
}
.resv-alert-mail{
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 16px;
border-radius: 18px;
background: #f8fafc;
border: 1px solid #eef2f7;
font-size: 15px;
line-height: 1.5;
}
.resv-alert-mail-icon{
flex: 0 0 auto;
font-size: 16px;
margin-top: 1px;
}
@media (max-width: 520px){
.alertify .ajs-dialog.resv-alertify-success{
width: min(94vw, 560px) !important;
border-radius: 20px !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-header{
padding: 18px 18px 14px !important;
font-size: 16px !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-content{
padding: 18px !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-footer{
padding: 14px 18px 18px !important;
}
.resv-alert-item{
flex-direction: column;
gap: 2px;
}
.resv-alert-total b{
font-size: 18px;
}
}
/* =========================================================
ALERTA ÉXITO RESERVACIÓN — Viajero glass premium
========================================================= */
.alertify .ajs-dialog.resv-alertify-success{
width: min(92vw, 560px) !important;
max-width: 560px !important;
border-radius: 26px !important;
overflow: hidden;
border: 1px solid rgba(178,34,34,.16);
box-shadow:
0 30px 80px rgba(15,23,42,.26),
0 8px 24px rgba(178,34,34,.10) !important;
background: #fff !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-header{
padding: 20px 24px 18px !important;
background:
linear-gradient(135deg, rgba(178,34,34,.88), rgba(139,29,26,.78)),
rgba(255,255,255,.08) !important;
color: #fff !important;
border-bottom: 1px solid rgba(255,255,255,.12) !important;
font-size: 20px !important;
font-weight: 800 !important;
letter-spacing: -.2px;
font-family: 'Poppins', system-ui, Arial, sans-serif !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.alertify .ajs-dialog.resv-alertify-success .ajs-body{
background:
linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%) !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-content{
padding: 22px 24px !important;
color: #0f172a !important;
font-family: 'Poppins', system-ui, Arial, sans-serif !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-footer{
padding: 16px 24px 20px !important;
border-top: 1px solid #eef2f7 !important;
background: #fff !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-buttons{
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-button.ajs-ok{
background: linear-gradient(135deg, #b22222, #8b1d1a) !important;
color: #fff !important;
border: 0 !important;
border-radius: 14px !important;
padding: 12px 18px !important;
min-width: 120px;
font-weight: 700 !important;
font-size: 14px !important;
box-shadow: 0 12px 24px rgba(178,34,34,.24);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-button.ajs-ok:hover{
transform: translateY(-1px);
box-shadow: 0 16px 30px rgba(178,34,34,.30);
filter: brightness(1.03);
}
.alertify .ajs-dialog.resv-alertify-success .ajs-close{
top: 14px !important;
right: 14px !important;
width: 34px !important;
height: 34px !important;
line-height: 34px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.14) !important;
border: 1px solid rgba(255,255,255,.18) !important;
color: #fff !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.alertify .ajs-dimmer{
background: rgba(15,23,42,.52) !important;
}
/* contenido interno */
.resv-alert-success{
display: grid;
gap: 16px;
}
/* bloque check */
.resv-alert-check-card{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 20px 18px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(34,197,94,.04));
border: 1px solid rgba(34,197,94,.16);
box-shadow: 0 12px 24px rgba(15,23,42,.04);
}
.resv-alert-check-icon-wrap{
display: flex;
align-items: center;
justify-content: center;
}
.resv-alert-check-icon{
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #fff;
font-size: 28px;
font-weight: 900;
box-shadow:
0 10px 22px rgba(34,197,94,.30),
0 0 0 0 rgba(34,197,94,.28);
animation: resvCheckPop .55s ease, resvCheckPulse 1.8s ease-in-out infinite 0.55s;
}
.resv-alert-check-text{
font-size: 16px;
line-height: 1.5;
font-weight: 700;
color: #0f172a;
max-width: 320px;
}
/* cards */
.resv-alert-card{
padding: 16px 18px;
border-radius: 20px;
background: #fff;
border: 1px solid #eef2f7;
box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
.resv-alert-itinerary{
background: linear-gradient(180deg, #ffffff, #fcfcfd);
}
.resv-alert-card-title {
font-size: 15px;
font-weight: 700;
color: #b22222;
margin-bottom: 10px;}
/*alerta de confirmacion boton reserva step 4 */
.resv-section-title {
color: #b22222;
font-weight: 700;
margin-top: 12px;
margin-bottom: 6px;
}
.resv-row {
display: flex;
justify-content: space-between;
font-size: 14px;
margin: 3px 0;
}
.resv-row-inline {
display: flex;
justify-content: space-between;
font-size: 15px;
margin-bottom: 10px;
}
.resv-alert-card .resv-row span,
.resv-alert-card .resv-row-inline span {
font-weight: 400 !important;
color: #777;
}
.resv-alert-card .resv-row b,
.resv-alert-card .resv-row-inline b {
font-weight: 700 !important;
color: #222;
}
.resv-row-inline.total b {
color: #b22222;
font-size: 16px;
}
.resv-alert-item span.resv-alert-label {
font-weight: 400 !important;
color: #6b7280 !important;
}
.resv-alert-item b {
font-weight: 700 !important;
}
.resv-alert-item{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
line-height: 1.5;
font-size: 15px;
}
.resv-alert-item + .resv-alert-item{
margin-top: 9px;
}
.resv-alert-label{
font-weight: 800;
color: #0f172a;
}
.resv-alert-total{
margin-top: 12px !important;
padding-top: 12px;
border-top: 1px dashed #e5e7eb;
font-size: 18px;
}
.resv-alert-total b{
color: #b22222;
font-size: 21px;
}
/* bloque correo rojo glass */
.resv-alert-mail-glass{
display: flex;
align-items: center;
gap: 10px;
padding: 15px 16px;
border-radius: 20px;
color: #fff;
background:
linear-gradient(135deg, rgba(178,34,34,.88), rgba(139,29,26,.78)),
rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.10);
box-shadow:
0 14px 28px rgba(178,34,34,.18),
inset 0 1px 0 rgba(255,255,255,.10);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-size: 15px;
line-height: 1.5;
}
.resv-alert-mail-icon{
flex: 0 0 auto;
font-size: 16px;
opacity: .95;
}
/* animaciones */
@keyframes resvCheckPop{
0%{
transform: scale(.65);
opacity: 0;
}
70%{
transform: scale(1.08);
opacity: 1;
}
100%{
transform: scale(1);
}
}
@keyframes resvCheckPulse{
0%{
box-shadow:
0 10px 22px rgba(34,197,94,.30),
0 0 0 0 rgba(34,197,94,.26);
}
70%{
box-shadow:
0 10px 22px rgba(34,197,94,.30),
0 0 0 12px rgba(34,197,94,0);
}
100%{
box-shadow:
0 10px 22px rgba(34,197,94,.30),
0 0 0 0 rgba(34,197,94,0);
}
}
@media (max-width: 520px){
.alertify .ajs-dialog.resv-alertify-success{
width: min(94vw, 560px) !important;
border-radius: 22px !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-header{
padding: 18px 18px 14px !important;
font-size: 17px !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-content{
padding: 18px !important;
}
.alertify .ajs-dialog.resv-alertify-success .ajs-footer{
padding: 14px 18px 18px !important;
}
.resv-alert-item{
flex-direction: column;
gap: 2px;
}
.resv-alert-total b{
font-size: 18px;
}
.resv-alert-check-icon{
width: 52px;
height: 52px;
font-size: 25px;
}
.resv-alert-mail-glass{
align-items: flex-start;
}
}
/* =========================================================
MODAL----PAGO EN LINEA
========================================================= */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 99999;
overflow-y: auto;
}
.modal-card {
background: white;
border-radius: 16px;
padding: 25px;
max-width: 500px;
width: 90%;
position: relative;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
max-height: 90vh;
overflow-y: auto;
margin: 20px auto;
}
@media (max-width: 768px) {
.modal-card {
max-width: 95%;
max-height: 85vh;
padding: 20px;
}
}
.modal-card::-webkit-scrollbar {
width: 8px;
}
.modal-card::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.modal-card::-webkit-scrollbar-thumb {
background: #b22222;
border-radius: 10px;
}
.modal-card::-webkit-scrollbar-thumb:hover {
background: #8b1a1a;
}
body.modal-open {
overflow: hidden;
padding-right: 15px;
}
#modalPagoOnline .modal-card {
max-height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal-linea-scrollable {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 0 4px 0 0;
}
.modal-linea-scrollable::-webkit-scrollbar {
width: 6px;
}
.modal-linea-scrollable::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.modal-linea-scrollable::-webkit-scrollbar-thumb {
background: #b22222;
border-radius: 10px;
}
.modal-linea-scrollable::-webkit-scrollbar-thumb:hover {
background: #8b1a1a;
}
#modalPagoOnline .modal-close {
position: sticky;
top: 12px;
right: 12px;
float: right;
margin: 12px 12px 0 0;
z-index: 20;
}
.modal-linea-head {
position: sticky;
top: 0;
background: white;
z-index: 15;
border-bottom: 1px solid #eef2f7;
}
.modal-linea-security {
position: sticky;
bottom: 0;
background: white;
z-index: 15;
margin-bottom: 0;
}
/* =========================================================
MODAL DE PAGO EN LÍNEA
========================================================= */
#modalPagoOnline.modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, .55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 99999;
}
#modalPagoOnline .modal-card {
position: relative;
width: min(100%, 420px);
max-height: 85vh;
background: #fff;
border-radius: 24px;
padding: 0;
box-shadow: 0 24px 55px rgba(0,0,0,.18);
border: 1px solid #eef2f7;
overflow: hidden;
display: flex;
flex-direction: column;
}
#modalPagoOnline .modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: #f8fafc;
color: #0f172a;
font-size: 22px;
font-weight: 400;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
#modalPagoOnline .modal-close:hover {
background: #eef2f7;
transform: scale(1.05);
}
.modal-linea-head {
padding: 24px 24px 16px;
text-align: center;
border-bottom: 1px solid #eef2f7;
position: sticky;
top: 0;
background: white;
z-index: 10;
}
.modal-linea-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(178,34,34,.08);
color: var(--brand, #b22222);
font-weight: 700;
font-size: 11px;
margin-bottom: 12px;
}
.modal-linea-head h3 {
margin: 0;
font-size: 22px;
color: #0f172a;
font-weight: 800;
letter-spacing: -0.2px;
}
.modal-linea-sub {
margin: 6px 0 0;
font-size: 13px;
color: #6b7280;
font-weight: 500;
}
.modal-linea-scrollable {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 0;
}
.modal-linea-scrollable::-webkit-scrollbar {
width: 6px;
}
.modal-linea-scrollable::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.modal-linea-scrollable::-webkit-scrollbar-thumb {
background: #b22222;
border-radius: 10px;
}
.modal-linea-scrollable::-webkit-scrollbar-thumb:hover {
background: #8b1a1a;
}
/* Cuerpo del modal */
.modal-linea-body {
padding: 20px 24px;
}
.modal-linea-paypal {
margin: 0 0 16px 0;
}
#paypal-button-container {
width: 100%;
min-height: auto;
}
/* Info de seguridad */
.modal-linea-security {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
padding: 12px 24px;
border-top: 1px solid #eef2f7;
font-size: 12px;
color: #6b7280;
background: white;
position: sticky;
bottom: 0;
}
.modal-linea-security i {
color: #22c55e;
font-size: 12px;
}
/* Mensaje de carga */
.modal-linea-loading {
text-align: center;
padding: 24px 20px;
color: #6b7280;
}
.modal-linea-loading i {
font-size: 28px;
color: #b22222;
margin-bottom: 8px;
display: block;
}
.modal-linea-loading p {
margin: 0;
font-size: 13px;
font-weight: 500;
}
/* Responsive */
@media (max-width: 560px) {
#modalPagoOnline .modal-card {
width: min(100%, 360px);
border-radius: 20px;
}
#modalPagoOnline .modal-close {
top: 12px;
right: 12px;
width: 30px;
height: 30px;
font-size: 20px;
}
.modal-linea-head {
padding: 20px 20px 12px;
}
.modal-linea-head h3 {
font-size: 20px;
}
.modal-linea-body {
padding: 16px 20px;
}
.modal-linea-security {
padding: 10px 20px;
font-size: 11px;
}
.modal-linea-loading {
padding: 20px 16px;
}
.modal-linea-loading i {
font-size: 24px;
}
}