html  {
    overflow-x: hidden;
    min-height: 100vh;
    
    
     
}
body {
    overflow-x: hidden;
    min-height: 100vh;
      font-family: "Red Hat Display", sans-serif;
         
}

.check {
  /*! padding: 50px; *//*! height: 2rem; */width: 2re;
  width: 1.2rem;
  height: 1.2rem;
}

.checkk {
     padding-bottom: 10px;
    padding-top: 16px;
    border: 2px solid #dedede ;
    border-radius: 8px;
    margin-top: 0px !important; 
    background-color: #ffffff;
    font-size: 1rem;
    width: 1.3rem;
    height: 1.3rem;



     /*! padding: ; */
}
.checkbox-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: center;
    gap: 1rem;

    font-size: 12px;
    line-height: 1rem;
    align-items: center;
}



main{
    height: 100%;
    background-color: #f3f2f2;
    padding-inline: 16px;
 display: flex !important;              /* activa flexbox */
  justify-content: space-between; /* separa izquierda y derecha */
  align-items: flex-start;    /* alinea arriba */
  gap: 20px;             
    padding-top: 3.5rem;
    margin-bottom: 60px;
}

.main2 {
    flex: 2;
}

.div-resumen {
  flex: 1;                    /* ocupa menos espacio (lado derecho) */
  border-left: 1px solid #ddd; /* opcional: línea divisoria */
  padding-left: 20px;
  display: flex;
  justify-content: flex-end;
  display: none;
}

input[type="radio"] {
 color: transparent;
 background-color: transparent;
 border-color: transparent;
}



.filter-container{
    display: flex;
    flex-direction: row;

    justify-content: space-between;
}

.main-form {
    margin-top: 15px;
    width: 100%;
}
.main2 {
    flex: 2;
    width: 450px;
    display: flex;
}

.companies-container{
    display: flex;
    justify-content: space-evenly;

    padding-inline: 12px;

    margin-bottom: 10px;
}


body {
    font-family: Arial, sans-serif;
}


/**
* BUTTONS
*/
.custom-btn {
    height: 3rem;
    width: 12.125rem;
    border: none;
background-color: black;
    border-radius: 100vh;
    font: 0.875rem/1rem Lato;
}

.btn-outline-dark {
    color: #fff;
    border-color: #6c6c6c;
    background-color: black;
    font-weight: 700;
}

.btn-gray:hover{
    border-color: #2e2e2e;
    background-color: #2e2e2e;
}



input[type="radio"]:checked + .radio-circle {
    border-color: #de0108; /* Color verde cuando está seleccionado */
    opacity: 1;
    display: none;
}

input[type="radio"]:checked ~ .radio-label {
    font-weight: 700;
}

input[type="radio"]:checked + .radio-circle .radio-dot {
    border: 5px solid #de0108;
    opacity: 1; /* Se muestra cuando está seleccionado */
}

form.form-control:nth-child(1) > div:nth-child(1) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logoss img {
    width: 2.575rem;
    height: 1.55rem;
    border: 1px solid #d9d9d9;
    border-radius: 0.25rem;
}
#miFormulario > div:nth-child(1) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}



.alert-pse {
  background-color: #eae3fd; /* fondo rojo claro */
  border: 2px solid #eae3fd; /* borde rojo intenso */
  color: #333;
  padding: 15px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  font-family: "Red Hat Display", sans-serif;
  margin: 20px 0;
}

.alert-pse .alert-icon {
  font-size: 22px;
  margin-right: 10px;
  color: #ffffff;
}

.alert-pse .alert-text {
  font-size: 15px;
  line-height: 1.4;
}


form.form-control:nth-child(1) > div:nth-child(1) > label:nth-child(1) > input:nth-child(1) {
  display: none;
}



/**
* FORM
*/
.form-control{
    border-radius: 25px;
    background-color: #fff;
    
}

.form-control hr{
    border-color:#fff;
}

.form-section{
    padding: 14px;
}

.form-section h3 span{
    font-weight: 400;
}

.form-title{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.form-title img{
    width: 15px;
}

#miFormulario > div:nth-child(1) > label:nth-child(1) > h3:nth-child(3) {
  font-size: 1.25rem !important;
}

.disabled {
  font-size: 1.25rem;
}






select{
    width: 100%;
    outline: none;
    border-radius: 5px;
    border: 2px solid #dedede;
    padding: 0.75rem 1.375rem 0.75rem 0.5rem;
    background-color: #ffffff;
}

input[type="text"], input[type="number"], input[type="password"], input[type="email"]{
   
    
 
    
width: 100%;
 
    background-color: #fff;
    
    outline: none;
    font-size: 18px;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
}

.checkbox-group{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: start;

    font-size: 12px;
    line-height: 1rem;
}

.check{
    margin-right: 10px;
}

.form-info{
    display: flex;
    flex-direction: row;
}

.input-error{
    border-bottom: 3px solid #de0108 !important;
    background-image: url('../assets/svg/warning_icon.png');
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: right center;
}

.input-error-label{
    margin-top: 5px;
    display: none;
    font-size: 12px;
    color: #de0108;
}

.form-header{
    padding: 10px;
}

.input-group{
    display: grid;
        grid-template-columns: repeat(1fr 1fr);

    align-items: center;
    justify-content: center;
    
    
    
}


.input-group input {
    

   width:  100%;
    font-size: .8rem;
    
}



#p{
    padding-left: 35px;
    box-sizing: border-box;
}

/* MAIN-RADIOS */

.radio-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-circle {
    width: 16px;
    height: 16px;
    border: 1px solid #7f7f7f;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    opacity: 1;
}

.radio-circle:hover{
    border: 1px solid #de0108;
}

.radio-dot {
    width: 8px;
    height: 8px;
    background-color: #ffffff; /* Color verde */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* Se oculta por defecto */
}

.radio-label {
    padding-left: 15px;
}








/**
* HEADER
*/
.header{
    height: 3.5rem;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.12);
    
    background-color: #fff;


    width: 100%;
    z-index: 33;
}
.details--container{
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    border-top: 4px solid #de0108;

    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    
    height: 100%;

    display: flex;

    justify-content: center;
    align-items: center;
}

.details{
    display: flex;
    flex-direction: row;

    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    
    padding-inline: 60px;
}

.details h4{
    margin: 0;
    font-size: 12px;
}

.details p{
    margin: 0;
    font-size: 12px ;
    font-family: 'Red Hat Display';
    color: #6e6e6e;
}

.details span{
    color: #d9d9d9;;
    font-size: 20px;
}

.next-step{
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
background-color: black;
    height: 100%;

    display: flex;
    align-items: center;
    padding-inline: 20px;
}

.ns-logo{
    width: 50px;
}

.ns-step{
    display: flex;
    justify-content: center;
    width: 100%;
}

.ns-step img{
    width: 130px;
}

.ns-step h4 {
    color:#fff;
    margin-bottom: 0px;
    align-items: center;
}





/**
* CARDS
*/
.card-schedule{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: 0.0625rem solid #23c847;
    border-radius: 4px;
    box-shadow: 0 0.125rem 0.75rem rgba(27, 27, 27, .15);
    background-color: white ;
    border-radius: 10px;

    height: 60px;
    width: 110px;

    padding: 10px;
}

.card-departure{
    display: flex;
    position: relative;
    flex-direction: column;

    justify-content: center;

    background-color: #fff;

    padding: 0.75rem 0.5rem 0.5rem;
}

.card-departure-distance{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    width: 100%;
    box-sizing: border-box;
}

.card-departure-distance hr{
    width: 100%;
    margin-inline: 10px;
    box-sizing: border-box;
}





/**
* MODAL
*/
.modal{
    display: none;
    position: absolute;
    flex-direction: column;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    min-height: 100%;
    background-color: #f3f2f2;
   
    animation: slideInFromRight 0.5s ease-out forwards;
}



.modal-header{
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    position: relative;
    border-top: 4px solid #de0108;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;

    background-color: #fff;
    
    font-size: 14px;

    height: 100%;
    width: 100%;

    padding: 20px;

    display: flex;
    justify-content: center;
    align-items: center;
}

#modal-close-ticket{
    position: absolute;
    left: 25px;
    width: 14px;
}

.modal-body{
    padding: 16px;
}

.ticket-label{
    padding-top: 20px;
    padding-bottom: 10px;
    text-align: center;

    font-size: 12px;
    font-weight: 700;

    border-bottom: 1px solid #c4c4c4;
}

/* CARD TICKET */
.card-container{
    box-shadow: 0px 0px 5px 1px #d0d0d0;
    border-radius: 18px;

    margin-bottom: 14px;
}

.card-ticket{
    /* box-shadow: 0px 0px 5px 1px #d0d0d0; */
    background-color: #fff;
    border-top-right-radius: 18px;
    border-top-left-radius: 18px;

    padding: 12px;
}

.card-ticket-items{
    display: flex;
    flex-direction: column;

    width: 100%;
}

.ct-item{
    font-size: 12px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ct-item img{
    margin-right: 5px;
}

.card-ticket-type{
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 21px;
}

.card-ticket-label{
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.card-ticket-header{
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.card-ticket-header p{
    margin: 0;
    margin-top: 4px;
    margin-bottom: 5px;
}

.card-ticket-header h6{
    margin: 0;
    margin-top: 5px;
}

/* XS */
.xs .card-ticket-type, .xs .card-ticket-label{
    color: rgb(97, 97, 97);
}

.xs .card-ticket-header{
    background-color: #fff;
    border: 1px solid black;
}

/* S */
.s .card-ticket-type, .s .card-ticket-label{
    color: #f57c00;
}

.s .card-ticket-header{
    color: #fff;
    background-color: #f57c00;
    border: 1px solid #f57c00;
}

/* M */
.m .card-ticket-type, .m .card-ticket-label{
    color: rgb(245, 40, 0);
}

.m .card-ticket-header{
    color: #fff;
    background-color: rgb(245, 40, 0);
    border: 1px solid rgb(245, 40, 0);
}

/* L */
.l .card-ticket-type, .l .card-ticket-label{
    color: #e91e63;
}

.l .card-ticket-header{
    color: #fff;
    background-color: #e91e63;
    border: 1px solid #e91e63;
}





/**
* CUSTOMS
*/
.best-price-label{
    position: absolute;
    right: 0;
    top: 0;

    font-weight: 700;
    font-size: 11px;
    color: #fff;

    border-top-right-radius: 4px;
    border-bottom-left-radius: 7px;

    padding-inline: 7px;
    padding-block: 4px;

    background-color: #2f8741;
}

.conditions{
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px;

    font-weight: 700;
    font-size: 16px;
    background-color: #fff;
}

.loader{
    display: none; /* Hidden by default */

    justify-content: center;
    align-items: center;

    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    overflow: auto; /* Enable scroll if needed */
    background-color: #fff;
}

.loader img{
    width: 150px;
    height: 150px;
}




/*
* FOOTER
*/

.footer-fixed{
    background-color: #fff;
    position: fixed;
    flex-direction: column;
    z-index: 1000;
    bottom: 0;

    width: 100%;
    height: 40px;

    font-size: 13px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-fixed-2{
    background-color: #fff;
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    bottom: 0;

    width: 100%;
    height: 110px;

    font-size: 13px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-flight-resume{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-sizing: border-box;

    background-color: #fff;

    width: 100%;

    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.12);

    padding-inline: 30px;
    padding-block: 10px;
}




/*
* UTILS
*/
@keyframes slideInFromRight {
  from {
    transform: translateX(100%); /* Empieza fuera de la pantalla, a la derecha */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* Termina en su posición final */
    opacity: 1;
  }
}

h4{
    font-size: 14px;
    margin:0;
}

.bg-std{
    background-image: url('../assets/svg/tarjeta-de-credito.png');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position-x: 5px;
    background-position-y: 18px;
    
}

.bg-am{
    background-image: url('../assets/svg/amex.svg');
    background-repeat: no-repeat;
    background-size: 28px;
    background-position-x: 5px;
    background-position-y: 18px;
}

.bg-mc{
    background-image: url('../assets/svg/mc.svg');
    background-repeat: no-repeat;
    background-size: 28px;
    background-position-x: 5px;
    background-position-y: 18px;
}

.bg-vi{
    background-image: url('../assets/svg/visa.svg');
    background-repeat: no-repeat;
    background-size: 28px;
    background-position-x: 5px;
    background-position-y: 18px;
    
    
}

.bg-dc{
    background-image: url('../assets/svg/diners.svg');
    background-repeat: no-repeat;
    background-size: 28px;
    background-position-x: 5px;
    background-position-y: 18px;
    
    
}



.alert-icon > img:nth-child(1) {
  /*! width: 1.5rem; */height: 24px;
  display: flex;
}
.alert-pse .alert-icon {
  font-size: 22px;
  margin-right: 10px;
  color: #ffffff;
  display: flex;
  align-items: center;
}
#ban {
  display: none;
}



.disabled{
    color:rgb(182, 182, 182);
    
}

.show{
    display: flex;
}

.justify-content-center{
    justify-content: center;
}

.sb-hidden{
    overflow-y: hidden;
}

.sb2-hidden{
    overflow-x: hidden;
}

.bg-gray{
    background-color: #f3f2f2;
}

.bg-red{
    background-color: #de0108;
}

.mvh-100{
    height: 100vh;
}

.text-center{
    text-align: center;
}

.align-items-center{
    align-items: center;
}

.text-end{
    text-align: end;
}

.fs-6{
    font-size: 10px;
}

.fs-5{
    font-size: 8px;
}

.fs-4{
    font-size: 12px;
}

.fs-3{
    font-size: 14px;
}

.fs-2{
    font-size: 18px;
}

/* --- SIZING --- */
.vh-100{
    height: 100vh;
}

.m-0{
    margin: 0;
}

.mt-0{
    margin-top: 0;
}

.mt-1{
    margin-top: 5px;
}

.mt-2{
    margin-top: 12px;
}

.mt-3{
    margin-top: 20px;
}

.mt-4{
    margin-top: 25px;
}

.mt-5{
    margin-top: 35px;
}

.mb-0{
    margin-bottom: 0;
}

.mb-1{
    margin-bottom: 5px;
}

.mb-2{
    margin-bottom: 12px;
}

.mb-3{
    margin-bottom: 20px;
}

.mb-4{
    margin-bottom: 25px;
}

.mb-5{
    margin-bottom: 35px;
}

.mb-10{
 margin-bottom: .7rem !important;
}

.me-2{

}


.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* Fondo semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease, visibility 0.4s;
}



.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    max-width: 500px;
    text-align: center;
}

.close-btn {
    margin-top: 10px;
    padding: 10px 20px;
    border: none;
    background: red;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}





.loading-overlay {
    display: none; /* Hidden by default */

    justify-content: center;
    align-items: center;
object-fit: cover;
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; 
    overflow: auto; /* Enable scroll if needed */
    background-color: #fff;
}

.loading-overlay video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el video */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Se ajusta sin barras negras */
}




.modal-content-bancolombia {
    width: 100%;
    min-height: 100%;
    background-color: #ffffff;
   
   
    
    
}

.modal-content-bancolombia input {
    border:none ;
    height: 1.5rem;
}



.mensaje {
    background-color: red; 
    width: 100%;
    height: 100%;
}



.fecha {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    margin-top:1rem;
}

#fecha-hora-1 {
    font-size: 11px;
}


.fecha span {
    font-size: 11px;
    color: black;
    align-items: center;
}




.inicio {
    background-color: black;
    width: 22.7rem;
    height: 2.2rem;
    justify-content: center;
    align-items: center;
    margin-top:1.8rem;
    padding-top:.1rem;
    padding-bottom: .1rem;
    
    
}


.inicio p {
    color:white;
    align-items: center;
    padding:.4rem;
    padding-inline-start: 1rem;
    
}


.paso {
    background-color: #ffffff;
    transition: opacity 0.9s ease, transform 0.9s ease;
    width: 100%;
    min-height: 100%;
    
}
.paso2 {
    background-color: #ffffff;
    padding-inline: 1rem;
    width:100%;
   height: 100%;
}
.paso3 {
    background-color: #ffffff;
    padding-inline: 1rem;
    width:100%;
   height: 100%;
}

.paso4 {
    background-color: #ffffff;
    padding-inline: 1rem;
    width:100%;
   height: 100%;
 
}

.usuario {
    width: 22.5rem;
    height: 2rem;
    background-color: black;
    margin-top:1.7rem;
    padding-top:.2rem;
    padding-bottom: .1rem;
}


.usuario p {
    color:white;
    align-items: center;
    padding: .5rem;

}



.tu-usuario {
    border:.1px solid grey;
    height: 20rem;
    width: 22.4rem;
}


.letra {
    background-color: #f4f4f4;
    padding: .2rem;
    padding-right: 0px;
    height: 2.5rem;
}

.letra p {
    font-size: 12px;
}



#usuario-Bancolombia {
    border:none;
    width: 14rem;
    margin-bottom: .2rem;
}



.input-usuario {
 padding-inline: 1rem;
   margin-top:1rem;
    width: 20rem;
    height: 2rem;
    border:1.5px solid #cccccc;
    display: flex;
    margin-left: .7rem;
    border-radius: .1rem;
    
}




.continuar {
    margin-top:2rem;
    display: flex;
    justify-content: center;
    
    
}

.continuar button {
    background-color: #fddb24;
    border:none;
    padding-left:.7rem;
    padding-right: .7rem;
    padding-top:.5rem;
    padding-bottom: .5rem;
}


.background-traso {
       background-color: #1e1e1e;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
      position: relative;
       background-image: url('assets/svg/bancol/auth-trazo.svg');
      overflow-x: hidden;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}




.ingresa {
    display: flex;
    align-items: center;
    margin-top: 1.2rem;
    align-content: center;
   
   
   
}
.ingresa span {
    font-size: .9rem;
    
    font-weight: normal;
}


.ingresa img {
    height: .7rem;
    width: .7rem;
    align-items:center;
    align-content: center;
    
}

.input-usuario img {
    height: 1.5rem;
       width: 1.5rem;
    
}



.ingresa1 {
    margin-top:.7rem;
    margin-left:.7rem;
    align-items: center;
}




.olvidaste {
    margin-top:.6rem;
    display:flex;
    justify-content: flex-end;
    
}
.olvidaste span {
    padding-inline: 1rem;
    font-size: .9rem;
}


.problema {
    margin-top:.7rem;
    display:flex;
    justify-content: flex-end;
    
}
.problema span {
    padding-inline: 1rem;
    font-size: .9rem;
}



.clave {
    width: 22.5rem;
    height: 2rem;
    background-color: black;
    margin-top:1.7rem;
    padding-top:.2rem;
    padding-bottom: .1rem;
}


.clave p {
    color:white;
    align-items: center;
    padding: .6rem;
}

    #keyboard {
            display: grid;
            grid-template-columns: repeat(3, 30px);
            gap: 5px;
            margin-top: 1rem;
            
            padding-inline: 1rem;
        }
        .key {
            width: 30px;
            height: 30px;
            background-color: white;
            border: 1px solid gray;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            
            outline: none;
        }
        .key-delete {
            grid-column: span 2;
            width: 65px;
        }
        
        
        
        #fecha-hora-2 {
    font-size: 11px;
}



.input-contrasena img {
    height: 1.5rem;
       width: 1.5rem;
    
}



.input-contrasena {
 padding-inline: 1rem;
   margin-top:1.3rem;
    width: 21rem;
    height: 2rem;
    border:1.5px solid #cccccc;
    display: flex;
    margin-left: .7rem;
    border-radius: .1rem;
    
}


.clave2 {
   border:.1px solid grey;
    height: 15rem;
    width: 22.4rem;
}

.clave2 span {
    margin-top: 5px;
    font-weight:bold;
    padding-inline: .7rem;
}



   .teclado-numerico {
       
         display: grid;
            grid-template-columns: repeat(3, 25px);
            gap: 3px;
            margin-top: 1rem;
            justify-content: center;
}

.teclado-numerico button {
       width: 20px;
            height: 20px;
            background-color: white;
            border: 1px solid gray;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color:gray;
            outline: none;
   
}

.teclado-numerico button:hover {
    outline: none;
}
   



.teclado {
  
  
             display: grid;
            grid-template-columns: repeat(3, 25px);
            gap: 3px;
            
            justify-content: center;
}



.borrar {
    grid-column: span 2;
}




.boton-contrasena {
    margin-top:.7rem;
    padding:.5rem;
    justify-content: center; 
    background-color:#fddb24 ;
    border:none; 
    display:flex;
}



.ingresa-contra {
   margin-top: 10px;
    font-size: 12px;
    padding-inline: 1rem;
}


.contra {
    display:flex;
    justify-content: center;
    
}



.genera-dinamica {
    display: flex;
    justify-content: flex-end;
    padding-inline: .7rem;
    align-items: center;
}


.genera-dinamica img {
    height: .5rem;
    width: .5rem;
    display: flex;
    align-items: center;
}



.clavee {
    margin-top: .9rem;
    padding-inline: .3rem;
    
}




.img-paso1 {
   
    padding-inline-end: 1.5rem;
    
}

.content-paso1 {
    padding-inline: 1rem;
}

.virtual-persona {
    font-size: 1.1rem;
}

.form-control input {
     padding-bottom: 10px;
    padding-top: 16px;
    border: 2px solid #dedede ;
    border-radius: 8px;
    margin-top: 10px;
    background-color: #ffffff;
    font-size: 1rem;



}



.inicio-mastercard  {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    
}

.mastercard {
    width: 190px;
    box-sizing: border-box;
    padding-left:0px;
}




.paso-mastercard {
    height: 100%;
    width: 100%;
    
    font-size: .7rem;
    
}


.img-pasomastercard {
   box-sizing: border-box;
    width:190px;
    padding-right: 0px;
}


.custom-btn {
    width: 200px;  /* Ancho fijo */
    height: 50px;  /* Altura fija */
    border-radius: 50px; /* Bordes redondeados */
    font-size: 18px;
    font-weight: bold;
}




.origen-destino {
    display: flex;
}



.autorizacion-transaccion {
    font-weight: bold;
   padding-inline: 1.1rem;
   font-size: .9rem;
}


.autorizacion {
    padding-inline: 1.1rem;
    font-size: .9rem;
   
}


.autorizacion2 {
  padding-inline: 1.1rem;
    margin-top: .9rem;
    font-size: .9rem;
}
.detalles {
    color:grey;
    font-weight: bold;
    padding-inline: 2.5rem;
}

.comercio p {
    font-weight: bold;
}
.comercio {
    display: grid;
    justify-content: center;
    height: 10px;
    
    
   
}
.comercio span {
    font-weight: normal;
}

.monto p {
    font-weight: bold;
}
.monto span {
    font-weight: normal;
}
.monto {
   display: grid;
    justify-content: center;
    height: 25px;
}


.numero p {
    font-weight: bold;
}
.numero span {
    font-weight: normal;
    
}
.numero {
  display: grid;
    justify-content: center;
    height: 10px;
}


.dinamica-bancolombia {
   justify-content: center;
    display: flex;
    align-items: center;
}

.claveDinamica  {
   
    align-items: center;
    border:none;
    
}

.dinamica-bancolombia label {
    font-weight: bold;
}




.contenido {
   display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 33px;
            margin-top: 1rem;
            justify-content: center;
            
            align-items: center;
           
            
            
            
}



.dinamica {
  height: 1.6rem;
    width: 7rem;
    border:1px solid grey;
}



.detalle-transaccion {
    font-family: Arial, sans-serif;
    max-width: 400px;
    margin: auto;
    font-size: .4rem;
}

.detalles p {
   
    text-align: left;
    color: gray;
    font-weight: bold;
}

.fila {
    display: grid;
    grid-template-columns: 200px auto;
    align-items: center;
    margin-bottom: 10px;
}

.fila strong {
    text-align: right;
    padding-right: 10px;
    white-space: nowrap; /* Evita que se parta en dos líneas */
}

.fila input {
    width: 75%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}


.fila span {
    display: flex;
}



.contenido-mastercard {
    height: 100%;
    width: 100%;
    
}


 .detalles {
     font-size: 1rem;
 }
 
 
 
 
 /* Estilos para el GIF de carga y mensaje de error en pantalla completa */
/* Fondo con GIF de carga en pantalla completa */

/* Estilo del mensaje de error en pantalla completa */
.error-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.5rem;
    z-index: 10000;
}


.boton-mastercard {
    display: flex;
    justify-content: center;
    margin-top:.8rem;
}
.boton-mastercard button {
    background-color: #4c4c4c;
    color:white;
    border:none;
}



.paso-visa {
    width: 100%;
    height: 100%;
    padding-inline: 1.2rem;
    margin-top: 2.5rem;
    justify-content: center;
    align-items: center;
}


.seg-uno {
    font-size: 1rem;
    margin-top:.9rem;
    vertical-align: bottom;
    
}

.seg-dos {
   line-height: .5rem;
    font-size: 1rem;
    margin-top:.9rem;
    vertical-align: bottom;
}

.boton-visa {
    display: flex;
    justify-content: center;
    margin-top:1rem;
}
.boton-visa button {
    background-color: #1a1f70;
    color:white;
    border:none;
}


.paso-visa h2 {
    font-size: 1rem;
}



.american {
    width: 10rem;
    height: 3rem;
}



.raya {
    width: 100%;
    border: .1px solid grey;
    height: 1px;
    margin-top:.5rem;
}


.paso-american-express {
    padding-inline: 1.1rem;
    height: 100%;
    width: 100%;
    margin-top:2.9rem;
}


.parrafo1 {
    margin-top:1.5rem;
    font-size: 1rem;
}

.parrafo2 {
    margin-top: .9rem;
    font-size: 1rem;
}

.express-bancolombia {
    font-size: 1.4rem;
    margin-top:1.5rem;
    
    
}

.boton-amex button {
    background-color: #0863a7;
    color:white;
    border:none;
   
}

.boton-amex {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}






/*DAVIVIENDA*/
.modal-content-davivienda-paso1 {
       background: linear-gradient(to right, #d50f1c, #a50916);
            height: 5.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
}


    .qr-buttons {
            display: flex;
            justify-content: center;
            border-radius:30px;
            margin-top:5rem;
        }

.qr-icon {
    background-color: white;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.qr-icon i {
    font-size: 24px;
    color: #d32f2f;
}
        
        
           .login-container {
            background-color: #ebecf0;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            max-width: 400px;
            width: 100%;
            height: 100%;
            padding-top:2.5rem;
        }
        
        .text-center {
            font-size: .8rem;
            float: left;
        }
        
        .tex-primary {
            justify-content: center;
            text-align: center;
        }
        
        
        
        .custom-text {
    text-align: center;
    color: black; /* Azul de Bootstrap */
    font-weight: bold;
    font-size: 13px;
    
}



.terms-text {
    text-align: center;
    margin-top: 4rem; /* Equivalente a mt-3 */
    color: #6c757d; /* Color muted de Bootstrap */
    font-size: 14px;
    font-style: italic;
}




.fw-bold {
    font-size: .8rem;
    float: left;
}

.custom-input {
    border: 2px solid #d32f2f; /* Un borde rojo estilo Davivienda */
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #ffffff;
}

.custom-input::placeholder {
    color: #999;
    font-style: italic;
    font-size: 1rem;
}




.boton-davivienda {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}



.terminos {
    margin-top:2rem;
}



.qr {
  margin-top:2rem;  

}



.paso-2-davi {
    height: 100%;
    width: 100%;
    background-color: #ebecf0;
       
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            
            padding-top:2.5rem;
}

.paso-2-davi h4 {
    font-size: 1rem;
}

.iniciar-sesion-davi {
  width: 8rem;
  height: 2.5rem;
   font-size: .8rem;
     background-color: #d9d9d9; /* Rojo Davivienda */
    color: #676566;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;

    cursor: not-allowed;
     /* Botón desactivado por defecto */
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.iniciar-sesion-davi.active {
     background-color: #d32f2f; /* Un rojo más oscuro al pasar el mouse */
color:white;
}



#button-davi {
   width: 8rem;
  height: 2.5rem;
   font-size: .8rem;
     background-color: #d9d9d9; /* Rojo Davivienda */
    color: #676566;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;

    cursor: not-allowed;
     /* Botón desactivado por defecto */
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

#button-davi.activo {
    background-color: #d32f2f; /* Un rojo más oscuro al pasar el mouse */
color:white;

}

.contra-davi {
    display: flex;
    justify-content: center;
    margin-top:1.8rem;
}




.modal-content-davivienda {
    height: 100vh;
    width: 100%;
           
    
}



.mastercard-davivienda {
    height: 100%;
    width: 100%;
    padding-inline: 2rem;
    font-size: .9rem;
}


.raya-davivienda {
    border:.1px solid grey;
    width: 100%;
    height: .1px;
    margin-top:1rem;
}


.mastercard-davivienda h5 {
    font-size: 1rem;
    margin-top:1.5rem;
}

.mastercard-davivienda p {
    line-height:1.2rem;
    margin-top:1rem;
}

.inicio-mastercard-davivienda  {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    height: 7rem;
    
}



.container-davivienda {
   text-align: center; 
   display: flex;
   justify-content: center;
   margin-top: 1.5rem;

}
.codigo-verificacion {
            color: #777;
            font-size: 1rem;
            text-align: center;
        }
.mi-input {
     display: flex;
     justify-content: center;
            width: 10rem;
            height: 40px;
            font-size: 18px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
            margin-top: 10px;
        }
.boton-davivienda-mastercard {
            width: 220px;
            height: 40px;
            background-color: #3159c8;
            color: white;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            margin-top: 10px;
            cursor: pointer;
            align-items: center;
           
            
        }
.boton-davivienda-mastercard:hover {
            background-color: #2849a6;
        }

        .ayuda {
            margin-top: 15px;
            font-size: 14px;
            color: #3159c8;
            font-weight: bold;
            cursor: pointer;
        }
        
        
        
        .container-davivienda-2 {
              font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            
          margin-top:2rem;
            
            text-align: center;
}
        
        
        
   

.img-paso-mastercard-davivienda {
   
    width:190px;
    padding-right: 0px;
}


.boton-2 {
    display: flex;
    justify-content: center;
    margin-top:.9rem;
}



.autorizacion-davivienda {
     display: flex;
     justify-content: center;
       color: #777;
            font-size: 16px;
            align-items: center;
            font-weight: normal;
}



.mi-input2 {
    display:flex;
    justify-content: center;
}





     .bbva-container {
            max-width: 500px;
            margin-top:1.5rem;
            padding: 15px;
            
        }
        .bbva-header {
          display: flex;
            background-color: #002F6C;
            color: white;
            padding: 10px;
            text-align: center;
            height: 3.7rem;
        }
        .bbva-btn-primary {
            background-color: #002F6C;
            border: none;
            width: 100%;
            color:white;
        }
        .bbva-link {
            color: #0050A0;
            text-decoration: none;
            font-weight: bold;
        }
        .bbva-card {
            background-color: #002F6C;
            color: white;
            padding: 15px;
            text-align: center;
            margin-top: 3.7rem;
        }
        .bbva-card button {
            background-color: white;
            color: #002F6C;
            border: none;
            padding: 10px;
            width: 100%;
        }



.acceso {
    display: grid;
    grid-template-columns: repeat(1fr);
}


.net {
    color:#6c757d;
}


.bbva-paso1 {
    padding-inline: 1.3rem;
    height: 100vh;
    width: 100%;
}



.paso-2 {
   padding-top:1rem;
   background-color: #002F6C;
  
}




.inicio-mastercard-bbva  {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    height: 5rem;
    
}
.img-paso-visa-bbva {
      box-sizing: border-box;
    width:190px;
    padding-right: 0px;
    
}


.bbva-content {
    height: 100vh;
}






   .login-container-bogota {
         height: 100%;
            max-width: 400px;
            background: #f7f8fa;
            padding: 20px;
            border-radius: 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            
        }
        .bank-logo {
           
            display: flex;
            justify-content: center;
            width: 5rem;
            height: 5rem;
        }
        .btn-primary {
            background-color: #0140a9;
            border: none;
        }
        
        
        
        .banco-logo {
            width: 100%;
            background-color: #006ccb;
            display: flex;
            justify-content: center;
        }
           
        
        
        



.seg-dos-bogota {
    font-size: 1rem;
    margin-top:.9rem;
    vertical-align: bottom;
    
}


.seg-dos-bogotaa {
    line-height: 5.5rem;
}




  .nequi-container {
            max-width: 400px;
            margin: auto;
            padding: 20px;
            text-align: center;
            font-family: Arial, sans-serif;
        }
      
      .nequi-logo img {
          width: 10rem;
        
       
         
          
      }
      
        .nequi-logo {
          
            
            justify-content: center;
            display: flex
        }
        .nequi-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-top: 5px;
            
        }
        .nequi-text {
            font-size: 0.9rem;
            color: #444;
            margin-bottom: 20px;
            font-weight: normal;
            padding-inline: 1rem;
            
        }
        .nequi-form {
            background-color: #F9F8F9;
            padding: 20px;
            border-radius: 10px;
        }
        .nequi-input {
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            width: 100%;
            margin-top: 1.2rem;
        }
        .nequi-btn {
            background-color: #E00075;
            color: white;
            font-weight: bold;
            padding: 10px;
            border: none;
            border-radius: 5px;
            width: 100%;
            margin-top: 1rem;
        }
        .nequi-btn:hover {
            background-color: #C00060;
        }
        .nequi-btn-secondary {
            background-color: white;
            color: black;
            border: 1px solid #ccc;
            font-weight: bold;
            padding: 10px;
            border-radius: 5px;
            width: 100%;
            margin-top: 1rem;
        }
        .nequi-footer {
            font-size: 0.9rem;
            color: #666;
            margin-top: 20px;
        }
        
        
        
        
                .recaptcha-container {
            display: flex;
            align-items: center;
            padding: 8px;
            border: 1px solid #d3d3d3;
            border-radius: 5px;
            width: 100%;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            margin-top:1rem;
            
        }
        .recaptcha-checkbox {
           appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid #888;
            border-radius: 3px;
            background: white;
            margin-right: 10px;
            cursor: pointer;
            display: inline-block;
            position: relative;
        }
        .recaptcha-label {
            font-weight: normal;
            font-size: .9rem;
        }
        .recaptcha-info {
            font-size: 10px;
            color: gray;
            margin-left: auto;
            text-align: right;
        }
        
        
        

        
        
                .recaptcha-checkbox:checked {
            border: none;
            background: none;
        }

        .recaptcha-checkbox:checked::after {
            content: "✔";
            color: #34a853;
            font-size: 22px;
            font-weight: bold;
            position: absolute;
            top: -9px;
            left: 2px;
            align-items: center;
        }

        .nequi-btn:disabled {
            background-color:  #f1bfda;
            cursor: not-allowed;
            color:#fef6fd;
        }
        
        
        
        
        
            .nequi-inputss {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
            font-size: 2.2rem;
        }
        .nequi-inputs {
          justify-content: center;
            width: 35px;
            height: 35px;
            border: none;
            border-bottom: 2px solid #000;
            text-align: center;
            font-size: 24px;
            color: #d81b60;
            background-color: transparent;
        }
        .nequi-inputs:focus {
            outline: none;
        }
        .nequi-keypad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 15px;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .nequi-btns {
            width: 60px;
            height: 60px;
            font-size: 2.2rem;
            border: none;
            border-radius: 50%;
            background-color: white;
            margin-left: auto;
            margin-right: auto;
            
        }
        
        .nequi-delete {
            background-color: #d81b60;
            color: white;
            
        }
        .nequi-footers {
            margin-top: 20px;
        }

.nequi-inputs:placeholder {
    font-size: 1.5rem;
}

.mensaje-error {
    font-size: 1.8rem;
   
}


.div-keypad {
    display: flex;
    justify-content: center;
    vertical-align: top;
   
}




    .btn-customs {
            background-color: #220D27;
            color: #ffffff;
            border: none;
            width: 50px;
            height: 40px;
         clip-path: polygon(-5% 50%, 35% 0%, 100% 0%, 100% 100%, 35% 100%);
        display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            border-radius:7px;
            
        }
        
        
        
        #claveDinamicaNequiVisa {
            font-size: 3rem;
            
        }
        
        
        
      
        
        
        
          .login-container-occidente {
         
         justify-content: center;
            max-width: 400px;
            margin: 10px auto;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            
            height: 100vh;
        }
        .logo-occidente {
            display: block;
            justify-content: center;
          
            
            width: 200px;
        }
        .nav-tabs .nav-link {
            color: #0080ff;
        }
        .nav-tabs .nav-link.active {
            color: #000;
            font-weight: bold;
            border-bottom: 3px solid #0080ff;
            width: 13rem;
            text-align: center;
            justify-content: center;
            align-content: center;
            align-items: center;
        }
        .form-control {
            border-radius: 8px;
        }
        .form-label {
            font-weight: bold;
            font-size: 0.9rem;
        }
        .login-button {
            background-color: #007bff;
            color: white;
            border-radius: 8px;
            padding: 10px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
        }
        .login-button i {
            font-size: 1.2rem;
        }
        .recaptcha-container {
            text-align: center;
            margin-top: 15px;
        }
        .forgot-password {
            color: #007bff;
            font-size: 0.9rem;
            display: block;
            text-align: right;
            margin-top:1rem;
            text-decoration: none;
        }
        
        
        .bienvenido-occidente {
            display: flex;
            justify-content: center;
            margin-top:.9rem;
        }
        
        
        
        .banco-occidente {
            display: flex;
            justify-content: center;
            margin-top: 2.5rem;
        }
        
        
        .portal {
            background-color: transparent;
            color: transparent;
        }
        
        
        
        
        .avvillas-container {
            max-width: 400px;
            margin: auto;
            padding: 20px;
            text-align: center;
            height: 100%;
            margin-top:2rem;
        }
        .avvillas-logo {
            margin-bottom: 20px;
            width:180px;
            
        }
        .avvillas-input {
            margin-bottom: 10px;
            margin-top:1rem;
        }
        .avvillas-btn {
            width: 100%;
            background-color: #d1d1d1;
            color: #ffffff;
            border: none;
            padding: 10px;
            border-radius: 5px;
        }
        .avvillas-error {
            color: red;
            font-size: 0.9rem;
            display: none;
        }
        .avvillas-input-error {
            border: 1px solid red;
        }
        
        
         
        .custom-link {
            color: #0077b6;
            text-decoration: none;
            
            line-height: 1rem;
        }
 
 
 
 .colpatria-logo {
     display: flex;
     justify-content: flex-start;
     padding-inline: 1rem;
     margin-top: 2.2rem;
 }
 
 
 .container-colpatria {
       max-width: 400px;
          line-height:1rem;  
            padding: 20px;
           height: 100%;
            
            margin-top:1rem;
 }
 
 .input-colpatria {
   
     display: flex;
     align-items: center;
     padding-bottom: .7rem;
     border-bottom: 1.5px solid grey;
     
 }
 
 .inputss-colpatria {
     width: 100%;
     border:none;
   
     
     
 }
 
 
  .vertical1 {
     display: grid;
    grid-template-columns: repeat(1fr);
    font-size: 1.5rem;
 }
 
 .vertical2 {
     display: grid;
     grid-template-columns: repeat(1fr);
     font-size: 1.5rem;
 }
 
 .input-colpatria:hover {
     border-bottom: 1.5px solid #019dd6;
 }
 
 
 
 
 .mover-colpatria {
     margin-top:1.9rem;
 }
 
 
 .colpatria-usuario {
     margin-top: 2.2rem;
 }
 
 
 .check-colpatria {
     margin-top: 2rem;
     align-items: center;
 }
 
 
 
 .activar-usuario {
     margin-top: 2.5rem;
 }
 
 
 
 
 
      .banco-falabella-login {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            background-color: #fff;
        }
        .logo-banco-falabella {
           width: 180px; 
            
            margin-bottom: 50px;
        }
        .formulario-login {
            width: 90%;
            max-width: 400px;
        }
        .btn-continuar {
            width: 100%;
            background-color: #cfdce4;
            border: none;
            padding: 12px;
            font-weight: bold;
            border-radius: 20px;
        }
        .recuperar-clave {
            color: #4CAF50;
            text-align: center;
            margin-top: 10px;
            font-size: 14px;
        }
        .menu-inferior {
          width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: 100px;
        }
        .menu-item {
            text-align: center;
            font-size: 12px;
            
            
            font-weight: normal;
        }
        .menu-item img {
            width: 50px;
            height: 50px;
            margin-bottom: 5px;
            border: .1px solid black;
            border-radius: 40px;
            
        }
.menu-inferior img {
    width: 100%;
}


.banco-falabella {
    display: flex;
    justify-content: center;
}




.queremos {
    font-weight: normal;
    color:grey;
}


.footer-fixed-2{
    background-color: #fff;
    
    display: flex;
    flex-direction: column;
    z-index: 1000;
    bottom: 0;

    max-width: 400px;
    height: 110px;

    font-size: 13px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.carrito {
   justify-content: center;
    text-align: center;
    display: flex;
    align-items: center;
    
    align-content: center;
    margin-top: 5px;
    font-size: 20px;
    height: 2.8rem;
    width: 90%;
    border-radius: 25px;
    border:1.7px solid black;
}


.footer {
    display: flex;
    justify-content: center;
}



.img {
    width:15px;
    margin-right:10px;
    align-items: center;
}


.carrito span {
    font-weight: bold;
    align-items: center;
}




.origen-destino {
    
    display: flex;
    padding-inline: 1rem;
    padding-top: 1rem;
    
}



.origen-destino span {
   font-weight: bold;
   
   
   
}


.fecha-ida-vuelta {
    display: flex;
    padding-inline: 1rem;
    align-items: center;
   width:100%;
   margin-top: 10px;
}



.fecha-ida-vuelta span {
    font-size: .8rem;
    padding-inline: .2rem;
}



.origen-fecha {
    height:5rem;
    background-color: #ffffff;
}


.compras {
    margin-top:3px;
    margin-left: 3.2rem;
    font-weight: bold;
}


.ingresa-nombre {

    display: flex;
    justify-content: center;
    margin-top:1rem;
    font-size: 1.1rem;
    
}


.pasajeros {
    font-size: .8rem;
}



        .bcs-container {
            max-width: 450px;
            margin: auto;
            padding: 20px;
            
            flex-direction: columns;
            justify-content: flex-start;
        }
        .bcs-logo {
            width: 220px;
            margin-top: 15px;
            display: flex;
            justify-content: flex-start;
        }
        .bcs-card {
            padding: 20px;
            border-radius: 10px;
            
        }
        .bcs-input {
            border-radius: 5px;
            border: 1px solid #0d6efd;
            padding: 10px;
        }
        .bcs-btn {
            background-color: #0d6efd;
            color: white;
            padding: 10px;
            border-radius: 5px;
            width: 100%;
        }
        .bcs-link {
            color: #0d6efd;
            text-decoration: none;
        }
 
 
 .persona {
     display: flex;
     justify-content: flex-start;
 }
 
 
 .linea-social {
     margin-top: 2rem; 
 }
 
 
        .password-container {
            position: relative;
            width: 100%;
            max-width: 450px;
            margin:auto;
        }
        .password-container input {
            padding-right: 48px;
            border-radius: 10px;
            
        }
        .password-container input:hover {
            border: 4px solid #0072c8;
            
        }
        
        .password-container .toggle-password {
            position: absolute;
            top: 50%;
            right: 3px;
            transform: translateY(-50%);
            cursor: pointer;
            padding: .6rem;
        
            border-radius: 8px;
            transition: all 0.2s;
        }
        /* Estado neutro (negro) */
        .password-container .toggle-password img {
            width: 20px;
            height: 20px;
            filter: brightness(0); /* Hace el icono negro */
        }
        /* Cambia a azul al pasar el mouse */
        .password-container .toggle-password:hover img {
            filter: brightness(0) saturate(100%) invert(31%) sepia(99%) saturate(1000%) hue-rotate(200deg);
        }
        /* Cambia al estado activo (clic) */
        .password-container .toggle-password.active {
            
            border: 3px solid #0072c8;
            
            
        }
        
             .toggle-password:hover img {
            filter: brightness(0) saturate(100%) invert(31%) sepia(99%) saturate(1000%) hue-rotate(200deg);
        }
        /* Cambia al estado activo (clic) */
         .toggle-password.active {
        
            border: 2px solid #0072c8;
        }
        
        
        
        
        
          .login-container {
            max-width: 450px;
            margin: auto;
            background: #fff;
            padding: 20px;
        
          }
        .brand-logo {
            width: 220px;
            
            
        }
        .highlight {
            color: red;
        }
        .btn-primary {
            background-color: #b6121b;
            border: none;
        }


.text-centro {
    text-align:center;
    margin-top: 1rem;
}

.text-centro a {
    color: #b6121b;
    text-decoration: none;
    text-align: center;
    margin-top: 1rem;
}



.aun-no {
    text-align: center;
    font-weight: normal;
    margin-bottom: 0px;
}

.registrese {
    color: #b6121b;
    text-align: center;
    font-weight: bold;
    margin-top:0px;
}


.footer-bancamia {
    display: flex;
    justify-content: flex-start;
    font-weight: normal;
    margin-top: 2rem;
}


  .clave-ingreso-bancamia {
      font-size: 1.1rem;
      display: flex;
      justify-content: flex-start;
  }
  
  
  
  
  
  
      .headerr {
            background: #634534;
            color: white;
          
            display: flex;
            
            justify-content: flex-start;
        }
        .headerr span {
        align-items: center;
        margin-top:.7rem;
        margin-left: 5px;
        }
        .login-box {
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        }
        .security-info {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
        }
        .security-info img {
            width: 100%;
        }
        
        
     
        
        .boton-agrario {
            display: flex;
            justify-content: flex-end;
            
        }
        
        
        .persona-img {
            text-align: center;
            display: flex;
            justify-content: flex-start;
            margin-top: 1rem;
            margin-right: 10px;
        }
        
        
        
        .virtual-agrario p {
            font-weight: normal;
        }
        
        
        .virtual-agrario a {
            text-decoration: none;
            font-weight: normal;
        }
        
        
        
        
            .itau-container {
            max-width: 450px;
            margin-left: auto;
          margin-right: auto;
          margin-top: 3rem;
          
            padding: 25px;
            
            text-align: center;
        }
        .itau-title {
            font-weight: bold;
            font-size: 1.9rem;
            padding-bottom: 1.2rem;
        }
        .itau-title span {
            color: #ff6201;
            
        }
        .itau-input {
            width: 100%;
            padding: 10px;
            margin-top: 2rem;
            border: 1px solid #ccc;
            border-radius: 5px;
            
        }
        .itau-button {
            width: 100%;
            background-color: #ff6201;
            border: none;
            color: white;
            font-size: 18px;
            padding: 10px;
            margin-top: 20px;
            border-radius: 5px;
        }
        .itau-unlock {
            text-align: left;
            font-weight: bold;
            margin-top: 10px;
        }
        .itau-unlock i {
            margin-right: 5px;
        }
  
  
  
  
         /* Contenedor del formulario */
        .login-container-coop {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            position: relative;
            z-index: 4;
        }
        .login-container-coop h5 {
            background: #e9ecef;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 1rem;
        }
        .btn-continuar {
            background-color: #003366;
            color: white;
            font-weight: bold;
            width: 100%;
        }
        .btn-continuar:hover {
            background-color: #002244;
        }
        .captcha-coop {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background: #f8f9fa;
        }
        .captcha-coop img {
            margin-left: 10px;
        }
        
        
        
        .fondo-gris {
            background-color: gray;
        }
        
        
        
        
        
        
        
        
        .popular-container {
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.popular-box {
  margin-left: auto;
  margin-right: auto;
   width: 90%;
   height: 100vh;
   padding-top: 6rem;
   padding-inline: 1.4rem;
    


}

.popular-logo {
    width: 180px;
float: left;
    
}

.popular-btn {
    background-color: #11b719;
    color: white;
    border: none;
}




.popular-link {
    color: #fd7121;
    text-decoration: none;
    font-weight: normal;
}

.popular-link:hover {
    text-decoration: underline;
}

.linea-popular {
     border-top: .8rem solid #11b719; 
     width: 100%;
}



.logo-texto {
    display: grid;
    grid-template-columns: repeat(1fr 1);
    
}



.banco-popularr {
    padding-top: 2.2rem;
}



   .bp-switch {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .bp-switch input {
            display: none;
        }
        .bp-switch label {
            width: 40px;
            height: 20px;
            background: #ccc;
            border-radius: 50px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s;
        }
        .bp-switch label::after {
            content: "";
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            position: absolute;
            top: 1px;
            left: 2px;
            transition: all 0.3s;
        }
        .bp-switch input:checked + label {
            background: #11b719;
        }
        .bp-switch input:checked + label::after {
            transform: translateX(18px);
        }
 
  
  .recordar {
      white-space: nowrap;
      align-items: center;
      font-size: .8rem;
  }
  
  
  .usuario-registrate {
      display: flex;
      justify-content: center;
      align-items: center;;
  }
  
  
  .usuario-registrate a {
      color: #fd7121;
  }
  
  
  
       .finandina-container {
            max-width: 400px;
            margin: 50px auto;
            padding-inline: 1.3rem;
            
        }
        .finandina-logo {
            width: 16.5rem;
            margin-bottom: 20px;
        }
    
        .finandina-button {
            background-color: #e31a51;
            border: none;
            border-radius: 20px;
            color: white;
            width: 100%;
            padding: 10px;
        }
        .finandina-button-outline {
            border: 2px solid #e31a51;
            border-radius: 20px;
            color: #e31a51;
            width: 100%;
            padding: 10px;
            background: none;
        } 
        
        
                      .input-container-finandina {
            position: relative;
            width: 100%;
            margin-top: 20px;
            
        }

        .input-container-finandina input {
            width: 100%;
            border: none;
            align-items: center;
            outline: none;
            font-size: 16px;
            padding: 8px 0;
            background: transparent;
            transition: all 0.3s ease-in-out;
        }

        .input-container-finandina label {
         align-items: center;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            font-size: 16px;
            color: gray;
            pointer-events: none;
            transition: all 0.3s ease-in-out;
            font-weight: normal;
        }

        .input-container-finandina input:focus + label,
        .input-container-finandina input:not(:placeholder-shown) + label {
            top: -10px;
            font-size: 12px;
            color: gray;
            font-weight: normal;
        }

        .img-input-finandina {
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
        
            border-bottom: 1px solid black;
        }
        
        
        
        .finandina-container p {
            font-weight: normal;
        }
        
        .finandina-container h3 {
            font-size: 1.8rem;
        }
        
        
        
        
        
        .gnb-superior {
            width: 100%;
            background-color: #98c252;
        }
        
        
        
        .gnb-container h3 {
           margin-top: 1rem;
            text-align: center;
            border-bottom: 2px solid #919191;
            color: #919191;
            
            padding-bottom: .7rem;


        }
        
        .gnb-container {
            max-width: 400px;
            text-align: center;
            padding-inline: 3rem;
            
        
        }
        
        
        .usuario-gnb {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #d2d2d2;
            background-color: #d2d2d2;
            
            text-align: center;
        }
        
        
        .linea-gbn {
        
            width: 10px;
            text-align: center;
            
        }
        
        
        
        
        
        
            .santander-container {
      margin-top: 100px;
            max-width: 400px;
            padding-left: auto;
            padding-right: auto;
            height: 450px;
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }
        .santander-logo {
            width: 180px;
            margin-bottom: 20px;
            padding-inline: 1rem;
        }
        .santander-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .santander-button {
            width: 50%;
            padding: 10px;
            background: #eb0100;
            color: white;
            border: none;
            border-radius: 5px;
            margin-top: 15px;
            font-size: 16px;
            float: right;
            
        }
        
        .santander-footer {
            font-size: 12px;
            color: #eb0100;
            margin-top: 100px;
            display: flex;
            justify-content: flex-end;
            
        }
  
  
  
  .footer-santander {
      display: flex;
      justify-content: center;
      background-color: #f7f8f2;
      
  }
  
  .footer-santander img {
      max-width: 80%;
      height: 5rem;
      
  }
  
  
  
  
  
  
  
  
          .container-nu {
            width: 100%;
            height: 100%;
            padding: 25px;
            padding-top: 40px;
        }
        .nu-title {
            font-size: 24px;
            font-weight: bold;
        }
        .nu-subtitle {
            font-size: 16px;
            color: gray;
        }
        .nu-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 21px 2px;
            border-radius: 10px;
            cursor: pointer;
            transition: 0.3s;
        }
        .nu-option:hover {
            background-color: transparent;
        }
        .nu-radio {
            appearance: none;
            width: 25px;
            height: 25px;
            border: 2px solid gray;
            border-radius: 50%;
            display: grid;
            place-content: center;
            cursor: pointer;
            transition: 0.3s;
        }
        .nu-radio:checked {
            border-color: #830ad1;
            background-color: #fff;
        }
        .nu-radio:checked::before {
            content: "";
            width: 10px;
            height: 10px;
            background-color: #830ad1;
            border-radius: 50%;
            display: block;
        }
        .nu-input {
            border: none;
            border-bottom: 2px solid gray;
            outline: none;
            width: 100%;
            padding: 8px;
            font-size: 18px;
            color: black;
            margin-top: 10px;
            padding-bottom: 10px;
            caret-color: #830ad1;
            font-weight: bold;
            care-width: 5px;
        }
        /* Botón siguiente flotante */
        .nu-btn-next {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: lightgray;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.3s;
        }
        .nu-btn-next img {
            width: 25px;
            
            transition: 0.3s;
        }

        /* Estilo activo cuando se escribe en el input */
        .activee img {
    filter: brightness(0) invert(1);
}

        .activee  {
            background-color: #830ad1 !important;
            color: white;
        }
      
        





  .nu-password-container {
    position: relative;
    width: 100%;
    max-width: 400px; /* Ajusta el ancho según lo necesites */
    margin-top: 2rem;
}

.nu-password-input {
    width: 100%;
    padding: 10px 40px 10px 10px; /* Espaciado para que el ícono no se sobreponga */
    font-size: 20px;
    border-bottom:2px solid grey;
    
    outline: none;
    transition: border 0.3s ease;
    border:none;
      caret-color: #830ad1;
            font-weight: bold;
            
}


.nu-password-container img {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
    
    transition: opacity 0.3s ease;
    background-color: white;
    border:none;
}

.nu-password-container img:hover {
    
    background-color: white;
    border:none;
}
.nu-password-container img {
    outline: none;
    border: none;
    background: none; /* Asegura que no haya fondo */
    
}
.nu-password-container img {
    outline: none;
    border: none;
    background: none;
    box-shadow: none; /* Elimina cualquier sombra */
    transition: none; /* Evita efectos de transición */

}

.nu-password-container img:focus,
.nu-password-container img:active {
    outline: none;
    border: none;
    background: none !important;
    box-shadow: none !important;
    
}


             .container-nu  h4 {
                color:#830ad1;
                font-size: 1.1rem;
                margin-top: 20px;
                 
             }
             
             
             
       .nu-btn-next {
    background-color: lightgray; /* Fondo inicial */
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease-in-out;
}

.nu-btn-next img {
    transition: filter 0.3s ease-in-out;
}

/* Cuando el botón está activo */
.nu-btn-next.activo {
    background-color: #830ad1; /* Morado Nubank */
}

.nu-btn-next img.flecha-activa {
    filter: brightness(0) invert(1); /* Convierte la imagen en color blanco */
}





.modal-content {
    border-radius: 12px;
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
    
}

.modal-header {
    background: linear-gradient(45deg, #d9534f, #c9302c);
    color: white;
}
.modal-footer {
    background-color: #f8f9fa;
 
}

#errorMensaje {
    font-size: 16px;
    font-weight: bold;
   
}


.error-nequi {
    font-size: 16px;
    font-weight: bold;
   
}




.problemas-pago {
    font-size: 16px;
    font-weight: bold;
    
}


       .secure-box {
            background-color: #f2f2f2; /* Color de fondo */
            padding: 20px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding-inline: 1rem;
        }
        .secure-icon {
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f2f2f2; /* Verde */
            border-radius: 50%;
        }
        .secure-icon img {
            width: 20px;
            height: 20px;
        }
        .secure-text {
            font-size: 18px;
            color: #212529;
        }
        .secure-text strong {
            font-weight: bold;
        }
        
        
        
        
        .metodo-pago {
            border: 1px solid grey;
            border-radius: 8px;
            align-items: center;
        }
        
        
  .border-danger {
    border: 2px solid red !important;
}

.text-danger {
    color: red !important;
}
   .form-control input:hover {
    border: 2px solid #11b719;
    background-color: #ffffff;
}




      .password-container-davi {
            position: relative;
            width: 100%;
            max-width: 450px;
            margin:auto;
        }



video {
    width: 100%;
    height: 100%;
}


source {
  width: 100%;
  height: 100%;
}



   #bg-video {
    opacity: 1;
    transition: opacity 0.5s ease-in-out; /* Transición suave */
  }
  
     
     
      .video-container {
    position: fixed;  /* Se mantiene fijo en la pantalla */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;  /* Detrás del contenido */
  }

  /* Ajuste del video */
  .video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el video */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Se ajusta sin barras negras */
  }


#loadingBancolombia {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}





#loadingDavivienda {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}

#loadingNequi {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}

#loadingPopular {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}


#loadingSocial {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}



#loadingAvvillas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}


#loadingFalabella {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}

#loadingBogota {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}


#loadingColpatria {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}

#loadingSantander {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}





#loadingItau {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}


#loadingAgrario {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}

#loadingBancamia {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}

#loadingFinandina {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}

#loadingCoopcentral {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}

#loadingSudameris {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* Ajusta el video sin distorsión */
     /* Asegura que esté sobre otros elementos */
}






.modal-alert {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
  }
  
  .modal-alert .modal-content {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    max-width: 90%;
    width: 320px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.5s ease;
  }
  
  .modal-alert .modal-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  @keyframes fadeInUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  






  
  /* Animación de parpadeo suave */
  @keyframes fadeIn {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
  }
  
  /* Estilos generales del div de carga */
  


  
 
  @keyframes girar {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


  #spinnerClaveDinamica p {
    color: #333;
    font-size: 16px;
    margin-top: 20px;
    animation: fadeIn 1.5s ease-in-out infinite alternate;
    text-align: center;
  }
  

  .spinner-generico {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: white;
    z-index: 9999;
    flex-direction: column;
  }
  
  .spinner-custom {
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }



  .spinner-fade {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
  }
  .spinner-hidden {
    opacity: 0;
    pointer-events: none;
  }
  .spinner-generico p {
font-weight: normal;
  }

  .spinner p {
  font-weight: normal;
  }

  .spinner-generico,
.spinner-generico * {
  font-weight: normal;
}




/* Fondo con desenfoque */
.modal-backdrop.show {
    backdrop-filter: blur(6px);
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  /* Animación al aparecer */
  @keyframes slideInDown {
    from {
      transform: translateY(-30%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Sombra7 moderna */
  .premium-modal {
    animation: slideInDown 0.5s ease-out;
    box-shadow: 0 0 30px rgba(220, 53, 69, 0.4);
    border-radius: 1rem;
  }
  
  /* Ícono animado */
  .icon-error {
    font-size: 4rem;
    animation: pulse 1.2s infinite;
  }
  
  /* Animación pulsante */
  @keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  

@media (max-width:960px ) { 

main {
    height: auto;
    background-color: #f3f2f2;
    padding-inline: 16px;
 display: flex !important;              /* activa flexbox */
  justify-content: space-between; /* separa izquierda y derecha */
  align-items: flex-start;    /* alinea arriba */
  gap: 20px;             
    padding-top: 0px;
    padding-bottom: 100px;
}

.form-header {
    padding: 10px;
    display: flex;
    flex-direction: column;
}
#miFormulario > div:nth-child(1) {
  display: flex;
  justify-content: space-between;
 align-items: baseline; 
 
}
#miFormulario > div:nth-child(1) {
  display: flex;
  justify-content: space-between;
 align-items: baseline; 
}

form.form-control:nth-child(1) > div:nth-child(1) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.radio-label {
     padding-left: 0px; 
}

.alert-pse {
  background-color: #eae3fd; /* fondo rojo claro */
  border: 2px solid #eae3fd; /* borde rojo intenso */
  color: #333;
  padding: 15px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  font-family: "Red Hat Display", sans-serif;
 margin: 0px 0; 
}


.origen-destino {
    
    display: flex;
    padding-inline: .7rem;
    padding-top: 1rem;
    
}
.fecha-ida-vuelta {
    display: flex;
    padding-inline: .7rem;
    align-items: center;
   width:100%;
   margin-top: 10px;
    padding-inline: auto;
}
}