/*==================================================
RESERVA
==================================================*/

.reserva{

padding:90px 20px;

background:#F5F8FC;

}

.reserva-card{

max-width:900px;

margin:auto;

background:#fff;

border-radius:20px;

padding:45px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.step-header{

text-align:center;

margin-bottom:40px;

}

.step-number{

display:inline-block;

background:#EAF2FF;

color:#0B5ED7;

padding:8px 18px;

border-radius:30px;

font-weight:600;

font-size:14px;

margin-bottom:15px;

}

.step-header h2{

font-size:38px;

margin:0;

color:#163A70;

}

.step-header p{

margin-top:15px;

color:#6B7280;

font-size:18px;

line-height:30px;

}

.progress{

height:10px;

background:#ECECEC;

border-radius:20px;

overflow:hidden;

margin-bottom:45px;

}

.progress-bar{

height:100%;

background:#0B5ED7;

border-radius:20px;

transition:.4s;

}

.form-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}
.reserva-mapa-grid{
    display:block;
}


.reserva-direcciones{
    display:flex;
    flex-direction:column;
    gap:20px;
}



.campo label{

font-weight:600;

margin-bottom:10px;

color:#163A70;

}

.campo input,

.campo select{

padding:15px;

border:1px solid #D8E0EC;

border-radius:10px;

font-size:16px;

transition:.3s;

}

.campo input:focus,

.campo select:focus{

outline:none;

border-color:#0B5ED7;

box-shadow:0 0 0 3px rgba(11,94,215,.15);

}

.resumen{

margin-top:45px;

padding:30px;

background:#F8FAFD;

border-radius:15px;

}

.resumen h3{

margin-top:0;

margin-bottom:25px;

color:#163A70;

}

.fila{

display:flex;

justify-content:space-between;

padding:12px 0;

border-bottom:1px solid #EAEAEA;

}

.fila:last-child{

border-bottom:none;

}

.fila span{

color:#6B7280;

}

.fila strong{

color:#163A70;

}

.acciones{

margin-top:40px;

display:flex;

justify-content:flex-end;

}

.acciones button{

background:#0B5ED7;

color:white;

padding:18px 40px;

border:none;

border-radius:12px;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.acciones button:hover{

background:#084CB0;

}

.acciones button:disabled{

background:#C7CED9;

cursor:not-allowed;

}
@media(max-width:768px){

.form-grid{

grid-template-columns:1fr;

}

.reserva-card{

padding:25px;

}

.step-header h2{

font-size:30px;

}

.acciones{

justify-content:center;

}

.acciones button{

width:100%;

}

}
/*=========================================
PASO 2
=========================================*/

.paso-reserva{

margin-top:70px;

}

.titulo-paso{

text-align:center;

margin-bottom:50px;

}

.titulo-paso span{

display:inline-block;

padding:8px 20px;

background:#EAF2FF;

color:#0B5ED7;

border-radius:30px;

font-weight:600;

margin-bottom:18px;

}

.titulo-paso h2{

font-size:42px;

color:#163A70;

margin-bottom:15px;

}

.titulo-paso p{

max-width:700px;

margin:auto;

font-size:18px;

color:#5E6A75;

line-height:30px;

}

.grid-2{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

margin-top:50px;

}

.campo{

display:flex;

flex-direction:column;

}

.campo label{

font-weight:600;

margin-bottom:12px;

color:#163A70;

}

.campo input{

padding:18px;

border-radius:12px;

border:1px solid #DCE5EF;

font-size:16px;

transition:.30s;

}

.campo input:focus{

border-color:#0B5ED7;

box-shadow:0 0 0 4px rgba(11,94,215,.12);

outline:none;

}

.campo small{

margin-top:10px;

color:#6B7280;

font-size:14px;

}
.info-recorrido{

margin-top:45px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}

.dato{

background:#F8FAFD;

padding:28px;

border-radius:18px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.dato span{

display:block;

font-size:15px;

color:#6B7280;

margin-bottom:10px;

}

.dato strong{

font-size:26px;

color:#163A70;

}
.contenedor-mapa{

margin-top:45px;

border-radius:20px;

overflow:hidden;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}

#mapaReserva{

height:420px;

background:#EEF4FA;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

color:#8A96A3;

}
.botones-reserva{

margin-top:45px;

display:flex;

justify-content:space-between;

}

.btn-secundario{

background:white;

border:2px solid #0B5ED7;

padding:18px 35px;

border-radius:12px;

font-weight:600;

cursor:pointer;

color:#0B5ED7;

transition:.30s;

}

.btn-secundario:hover{

background:#F3F8FF;

}

.btn-principal{

background:#0B5ED7;

color:white;

padding:18px 40px;

border:none;

border-radius:12px;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.30s;

}

.btn-principal:hover{

background:#094EB4;

}

.btn-principal:disabled{

background:#C7CED9;

cursor:not-allowed;

}
@media(max-width:768px){

.grid-2{

grid-template-columns:1fr;

}

.info-recorrido{

grid-template-columns:1fr;

}

.botones-reserva{

flex-direction:column;

gap:15px;

}

.btn-secundario,

.btn-principal{

width:100%;

}

#mapaReserva{

height:300px;

}
}
/* =====================================
   INFORMACIÓN DE LA RUTA
===================================== */

.info-ruta{

    display:none;

    margin-top:15px;

    padding:15px;

    background:#eef7ff;

    border:1px solid #b9d9ff;

    border-radius:10px;

    color:#004b8d;

    font-size:15px;

    font-weight:600;

    line-height:1.6;

}
/* =====================================
   COBERTURA 17 KM
===================================== */

.cobertura-ok{
    border:2px solid #198754 !important;
    background:#f3fff7 !important;
}

.cobertura-fuera{
    border:2px solid #dc3545 !important;
    background:#fff5f5 !important;
}

.mensaje-cobertura{
    margin-top:10px;
    padding:10px 14px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
}

.mensaje-cobertura.ok{
    color:#198754;
    background:#eaf8ef;
}

.mensaje-cobertura.fuera{
    color:#dc3545;
    background:#fff0f0;
}