@charset "UTF-8";
.mobile{
    display: none;
} 
.pasOne{
    display: flex;
    gap: var(--padding-max);
    padding: var(--padding-max);
}
.IntroDatos, .desktop{
    width: 50%;
}
.titleSolic{
    display: flex;
    align-items: flex-start;
    gap: var(--padding-min);
    padding: 0 0 var(--padding-32) 0 ;
    margin-left: -32px;
}
.titleSolic img{
    width: var(--padding-24);
    height: var(--padding-16);
    margin-top: var(--padding-min);
    cursor: pointer;

}
.titleSolic h1{
    font-size: var(--h4);
}
.infoCancelacion{
    padding: var(--padding-24 );
    border-radius: var(--padding-min);
    background: var(--fill);
    margin-bottom: var(--padding-32);
    line-height: 30px;
}

.cancelaGratis{
    font-size: var(--base);
}
.datosUser{
    padding: var(--padding-32) 0;
}
.datosUser h2{
    font-size: var(--h5);
    padding-bottom: var(--padding-16);
}
.acepPolit{
    padding: var(--padding-32) 0 var(--padding-16) 0;
    font-size: var(--padding-16);
}
.btn-paso{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--padding-min);
    font-size: var(--padding-16);
    box-shadow: none;
}
.comoPagar{
    text-align: center;
    font-size: var(--h5); 
}
.btn-paso img{
    width: var(--padding-24);
    height: var(--padding-24);
}
.editarDatos{
    padding: var(--padding-24);
    border: 1px solid var(--stroke-weak);
    border-radius: var(--padding-24);
    height: max-content;
}
.editarDatos img{
    width: 30%;
    border-radius: var(--padding-min);
    object-fit: cover;
}
.eleccionAp{
    display: flex;
    gap: var(--padding-16);
    margin-bottom: var(--padding-24);
}
.divSolic{
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}
.detallEdit{
    display: flex;
    flex-direction: column;
    gap: var(--padding-24);
    padding: var(--padding-24) 0;
}
.padding-detallesP{
    padding: var(--padding-24) 0;
}
/*soliitud paso 2*/
.radioPagar{
    justify-content: space-between;
    width: 100%;
}
.metodoP{
    padding: var(--padding-16);
    border: 1px solid var(--stroke-weak);
    
}
.radiuA{
    border-radius:0 0 var(--padding-min) var(--padding-min);
    margin-bottom: var(--padding-24);
    border-top: 0px;
}
.radiuB{
    border-radius:var(--padding-min) var(--padding-min) 0 0;
}
.ahoraP{
    margin-top: var(--padding-min);
}
.alLegar{
    margin: var(--padding-min) 0;
}
.title_codigoP{
    margin-top: var(--padding-24);
}
.div_codigoP{
    margin-bottom: var(--padding-24);
}
.codigoProm{
    padding: var(--padding-min) var(--padding-16);
    border: 1px solid var(--stroke-strong);
    border-radius: 4px;
    display: inline-block; 
    width: auto;
    margin-bottom: var(--padding-16);
}
.btnAplicar{
    width: auto;
    display: block;
    background: transparent;
    border: 1px solid var(--brand);
    border-radius: var(--padding-min);
    color: var(--brand);
    font-size: var(--parrafo-16);
    padding: var(--padding-min) var(--padding-16);
    cursor: pointer;
}
.btnAplicar:hover{
    background: var(--brand);
    color:var(--fill)
}
.title_comoPag, .title_politC{
    margin-top: var(--padding-24);
}
.comoPag{
    padding: var(--padding-min) var(--padding-16);
    margin-bottom: var(--padding-min);
    border: 1px solid var(--stroke-strong);
    width: 100%;
    border-radius: var(--padding-min);
    cursor: pointer;
    gap: var(--padding-16);
}
.stripeP{
    margin-bottom: var(--padding-24);
}
.comoPag img{
    width: var(--padding-24);
    height: var(--padding-24);
}
/*PAGINA DE CONFIRMACIÓN DE RESERVA*/
.sect_confir{
    padding: var(--padding-max);
}
.sect_confir h1, .sect_confir h2{
    font-size: var(--h5);
}
.container_confirm{
    width: 50%;
}
.div_pagR{
    width: 100%;
    align-items: flex-start;
    gap: var(--padding-16);
    margin-bottom: var(--padding-32);
}
.title-pagC{
    margin-top: var(--padding-24);
}
.div_resumenRe{
    padding: var(--padding-24) 0;
}
.resumen_Re{
    align-items: flex-start;
    gap: var(--padding-16);
    width: 100%;
    margin-bottom: var(--padding-min);
}
.detalPag{
    width: 100%;
    justify-content: space-between;   
}
.divNoche{
    gap: var(--padding-16);
}
.textSupl{
    padding-left: 40px;
}
.div-T{
    background: var(--fill);
    border-radius: 4px;
    padding: var(--padding-16) var(--padding-24);
    justify-content: space-between;
    width: 100%;
    margin-bottom: var(--padding-32);
}
.txtalig{
    text-align: end;
}
.divMp{
    margin: var(--padding-16) 0 0 0;
    width: 100%;
}
.confiCorreo{
    margin-top: var(--padding-16);
}
.instruccionL{
    margin-bottom: var(--padding-48);
}
.suplem{
    width: 100%;
    justify-content: space-between;
    padding-right: var(--padding-24);
}
.padNoche{
    padding-right: var(--padding-24);
}

/*Indicativos Numero telefono*/
.phone-container{
    position: relative;
    display: flex;
    gap: var(--padding-min);
    align-items: center;
}
.numTel{
    width:auto ;
}
.country-code{
    -webkit-appearance: none;  /* Ocultar la flecha predeterminada en Webkit (Chrome, Safari) */
    -moz-appearance: none;     /* Ocultar la flecha en Firefox */
    appearance: none;          /* Para otros navegadores */
    border-radius: var(--padding-min);
    height: 40px;
    border: 1px solid var(--stroke-strong);
    padding:0 var(--padding-16);
    font-size: var(--base);
    color: var(--text-strong);
    width: max-content;
    position: relative; /* Asegura que el pseudo-elemento ::after se posicione respecto a este */
}

/* Contenedor del select para la flecha personalizada */
.select-container {
    position: relative;
    display: inline-block;
    width: max-content;
    margin-top: 4px;
}
/* Flecha personalizada dentro del select */
.select-container::after {
    content: '\25BC';  /* Unicode para una flecha hacia abajo */
    font-size: 16px;
    position: absolute;
    top: 50%;
    right: 10px; /* Ajusta la posición de la flecha */
    transform: translateY(-50%);
    pointer-events: none; /* Asegura que no interfiere con el clic del select */
    color: var(--text-strong); /* Color de la flecha */
}

/* Opcional: Estilo de focus */
.country-code:focus {
    border-color: none;  /* Cambio de color cuando el select tiene el foco */
    outline: none;
}

/*Modal editar Personas*/
#editarFechas .calendar-nav button img{
    width: var(--padding-32);
    height: var(--padding-32);
}
#editarFechas .modal-contentD {
    width: 40%;
    padding:  var(--padding-32);
}
#editarFechas .btnFil a{
    color: var(--background);
}
#editarFechas .modal-contentD h3 {
    font-size: var(--h5);
}
.span{
    font-size: var(--base);
}

@media screen and (max-width: 1024px){
    .pasOne{
        gap: var(--padding-32);
    }
    .container_confirm {
        width: 70%;
    }
}
@media screen and (max-width: 768px){
    .mobile{
        display: block;
    }
    .mobile .editarDatos{
        margin-top: var(--padding-32);
        padding: 0px;
        border: 0px;
    }
    .mobile .editarDatos .title-detal-solic{
        font-size: var(--h5);
    }
    
    .pasOne{
        flex-wrap: wrap;
    }
    .IntroDatos, .editarDatos {
        width: 100%;
    }
    .pasOne{
        padding: var(--padding-24);
    }
    .container_confirm {
        width: 100%;
    }
    .sect_confir {
        padding: var(--padding-48) var(--padding-24);
    }
    .titleSolic{
        flex-direction: column;
        gap: var(--padding-16);
        margin-left: 0px;
    }
    .titleSolic img{
        width: max-content;
    }
    .desktop{
        display: none;
    }
    /*Modal editar Personas*/
    #editarFechasM .calendar-nav button img{
        width: var(--padding-32);
        height: var(--padding-32);
    }
    #editarFechasM .modal-contentD {
        width: 60%;
        padding:  var(--padding-32);
    }
    #editarFechasM .btnFil a{
        color: var(--background);
}
    #editarFechasM .modal-contentD h3 {
        font-size: var(--h5);
}
    
}
@media screen and (max-width: 426px){
    .titleSolic h1{
        font-size: var(--h4);
    }
    .div_pagR{
        flex-direction: column;
        align-items: center;
    }
    .div_pagR img{
        width: 66px;
        height: 66px;
    }
    .confiPago{
        text-align: center;
    }
    .eleccionAp{
        padding-top: 0px;
    }
    .numTel{
        width:100%;
        margin-bottom: 0;
    }
    #editarFechasM .modal-contentD {
        width: 90%;
        padding:  var(--padding-32);
    }
}