:root {
    --sombra-btn: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px 8px 16px rgba(0, 0, 0, 0.2);
    --sombra-card: 0px 4px 6px rgba(0, 0, 0, 0.1);
    --sombra-text: 2px 2px 4px rgba(0, 0, 0, 0.5);
    --sombra-btn-con-color: var(--sombra-btn),
      0 0 0 30px var(--color-sombra) inset;
    /* --radius-btn: 0.25rem;
    --radius-card: 5px; */
    --radius-btn: 15px;
    --radius-card:1rem;
    --sombra-img: drop-shadow(5px 5px 10px #000);
    --color-erro:#ff6868;
    --color-succes:#28a745;
    --cgray:#414242;
    /* --font-family:"Baloo 2"!important; */
}
html {
  scroll-behavior: smooth;
}
body{
  background: linear-gradient(to bottom, var(--color-acentuado) 59%, var(--color-degradado) 100%); 
}
body,h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,input, button, select, optgroup, textarea{
  font-family: var(--font-family);
  }
.div_img {
  display: flex;
  justify-content: center;
}
.display-4 {
  font-weight: bold;
  text-shadow: var(--sombra-text);
  color: white;
  font-size: 3.5rem;
}
.lead {
  text-shadow: var(--sombra-text);
  color: white;
  font-size: 2rem;
}
.lead2 {
  font-size: 1.25rem;
  font-weight: 300;
  text-shadow: var(--sombra-text);
  color: var(--color-oscuro400);
}
.jumbotron {
  background: transparent;
  margin-bottom: 0;
}
.jumbotrom_row {
  margin-top: 2rem;
}

.form-control {
  max-width: 280px;
  max-height: 50px;
  border-radius: var(--radius-btn);
  border: none;
  box-shadow: var(--sombra-btn);
  height: 50px;
  color: var(--color-acentuado);
  font-size: 16px;
}
.btn_buscar {
  position: relative;
  max-height: 50px;
  border-radius: var(--radius-btn);
  background-color: var(--main-secondary-color); /* Color principal */
  color: white;
  border: none;
  width: 90%;
  height: 50px;
  font-size: 20px;
  z-index: 1;
  overflow: hidden;
  transition: brightness 0.3s ease, color 0.3s ease, border 0.3s ease; /* Transición suave */
}

/* Efecto hover que cambia el fondo, el borde y el color del texto */
.btn_buscar:hover {
  filter: brightness(120%);
}



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

.btn_boleto{
  max-width: 318px;
  max-height: 50px;
  border-radius: var(--radius-btn);
  background-color: var(--main-secondary-color);
  box-shadow: var(--sombra-btn);
  color: white;
  border: none;
  width: 318px;
  height: 50px;
  font-size: 20px;
}

.btn_observacion{
  max-width: 318px;
  max-height: 50px;
  border-radius: var(--radius-btn);
  background-color: var(--main-secondary-color);
  box-shadow: var(--sombra-btn);
  color: white;
  border: none;
  width: 318px;
  height: 50px;
  font-size: 20px;
}

.btn_comprar {
  max-width: 200px;
  max-height: 50px;
  border-radius: var(--radius-btn);
  background-color: var(--color-oscuro200);
  box-shadow: var(--sombra-btn);
  color: white;
  border: none;
  width: 318px;
  height: 50px;
  font-size: 20px;
}
.section_buscar {
  display: grid;
  justify-content: stretch;
  max-width: 1200px;
  max-height: 200px;
  filter: drop-shadow(2px 4px 6px black);
  padding: 1rem;
}

.section_buscarFavoritos {
  display: grid;
  justify-content: stretch;
  padding: 0.4rem;
  
}

.modalFavoritos{
  color: var(--main-primary-color) !important;
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: .8em 1em 0;
  color: inherit;
  font-size: 1.875em;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  word-wrap: break-word;
}

.modal-lg, .modal-xl {
  max-width: 1000px!important;
}

/* Aumentar el z-index del selectpicker cuando está dentro de un modal */
.my-swal-container .bootstrap-select .dropdown-menu {
  z-index: 9999 !important; /* Asegúrate de que sea más alto que el z-index del modal */
}


.form_buscar {
  /* filter: var(--sombra-img); */
  padding: 1rem;
  border-radius: var(--radius-card);
  /* margin: 1rem; */
  position: relative;
  background: var(--color-ligth50); /* Fondo semitransparente */
  /* backdrop-filter: blur(10px);  */
  background: var(--main-primary-color);
  -webkit-backdrop-filter: blur(
    10px
  ); /* Efecto de vidrio en navegadores WebKit (Safari, Chrome) */
  /* Otros estilos y gradientes si es necesario */
  /* ... */
}

label {
  font-size: 16px;
  font-weight: 300;
  color: var(--color-oscuro400);
}

.section-container {
  padding: 4rem;
  background: var(--color-ligth20);
}

.responsive-img {
  max-width: 100%;
  height: auto;
}
h3 {
  color: var(--color-acentuado);
    margin-bottom: 0 !important;
}
h1 {
  margin-bottom: 0 !important;
}
p {
  color: var(--color-acentuado);
  margin-bottom:0;
}
.img_group {
  padding: 2rem;
}
.drop {
  filter: var(--sombra-img);
}

.display-5 {
  font-weight: bold;
  text-shadow: var(--sombra-text);
  color: var(--color-acentuado);
  font-size: 3rem;
}
.LoginImg {
  max-width: 200px;
}
.mobile_view {
  background-color: var(--color-ligth20);
}
.icon_input {
  border-radius: 10px 0px 0 10px!important;
  border: none!important;
  background-color: var(--main-secondary-color)!important;
  box-shadow: var(--sombra-btn)!important;
  color: white!important;
  
}
.input-group{
  justify-content: center;
}
.dia {
  text-align: center;
  margin: 10px;
  padding: 10px;
  border: none;
  border-radius: 1rem 1rem 0 0;
  cursor: pointer;
  position: relative;
  bottom: -10px
}
.dia:hover{
  background-color: white;
}
.precio {
  font-size: 18px;
  font-weight: bold;
}
.row_calendar{
  justify-content: space-between;
  padding: 1rem 1rem 0rem 1rem;
}
.container_calendar{
  background-color: var(--color-ligth20);
  max-width: 1200px;
  border-radius: var(--radius-card);
}

.filtro {
  margin-bottom: 20px;
}

.tarjeta {
  margin-bottom: 20px;
}
.filtros_boletos{
  margin-top: 2rem;
}
.card_boleto{
  border: 1px solid var(--color-ligth20);
  border-radius: var(--radius-card);
  box-shadow: var(--sombra-card);
}
.row_boleto2{
  align-items: center;
}
.texto-pequeno{
font-size:20px;
font-weight: 500;
}
  /* Estilos para pantallas pequeñas (modo teléfono) */
@media only screen and (max-width: 767px) {
  .btn_buscar {
    width: 100%; /* Hacer que el ancho sea del 100% para adaptarse a pantallas más pequeñas */
  }
  .display-4 {
    font-size: 2.5rem;
  }
  .display-5 {
    font-size: 2rem;
  }
  .content_img {
    right: 0rem;
    height: 85%;
  }
  .lead {
    font-size: 1.5rem;
  }
  .jumbotron {
    padding-bottom: 0;
  }
  .filtros_boletos .filtro {
      display: none;
    }
  .muestraBuscador {
    min-height: 350px; 
  }
  .imgFooter{
    margin-top: 4rem;
  }
  .cardRowBoletos{
    /* padding:5px; */
    min-height:240px;
  }
    
}
.cardRowBoletos{
  padding:10px;
  display: flex;
  justify-content: center;
  align-content: stretch;
}
.fila1Boleto{
display: flex;
justify-content: center;
}

.fila3Boleto{
margin-top:1.5rem;
width:100%;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.buscador_new{
  background-color: var(--color-acentuado);
  /* filter: drop-shadow(2px 4px 6px black); */
  padding: 1rem;
}

body,h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
font-family: var(--font-family);
}
.ir_ubicacion{
    background-color: var(--color-degradado);
    border: none;
    padding: 0;
    width: 45px;
    height: 45px;
    cursor: pointer;
    border-radius: 50%;
    margin-top: 6rem;
    margin-left: 1rem;
    position: absolute;
    z-index: 99;
}


.dark-ligth{
  background-color: var(--mode_dark-ligth);
  border: none;
  padding: 0;
  width: 45px;
  height: 45px;
  cursor: pointer;
  border-radius: 50%;
  margin-top: 10rem;
  margin-left: 1rem;
  position: absolute;
  z-index: 99;
}

.dark {
  background-color: var( --color-acentuado) !important;
  border: none;
}

.dark-ligth:focus{
  border: none;
  outline:none;
}
.hide_viaje_info {
    height: 3rem;
    transition:  0.5s ease!important; 
    background-color: transparent!important;
}
.fondoImagen{
  display:grid!important;
  align-items:center;
  border: none!important;
}
.irAtras{
  background-color: var(--main-primary-color);
    border: none;
    padding: 0;
    width: 45px!important;
    height: 45px;
    cursor: pointer!important;
    border-radius: 50%;
    margin-top: 2rem;
    margin-left: 1rem;
    position: absolute;
    z-index: 99;
}
.label {
    font-weight: bold;
    font-size:16px;
    color: var(--main-primary-color);
}

/* Estilos para los valores */
.value {
    /* Aquí puedes agregar cualquier estilo adicional que desees */
}
.div_expandir{
display: flex;
justify-content: center;
}
.btn_expandir{
  width: 50px;
  height: 25px;
  background-color: var(--main-primary-color);
  border-radius: 2rem;
  margin-bottom: 0.5rem;
  border: none;
  /* filter: drop-shadow(2px 4px 6px black); */
}

  .show_flex{
display: flex !important;
  transition: 0.5s ease;
}
.hide {
  display: none !important;
  transition: 0.5s ease;
}
.de_a {
  width: 15px;
  height: 72px;
  object-fit: contain;
  margin-right: 15px;
}
.viaje-info {
  position: absolute;
  bottom: 0rem;
  left: 0;
  right: 0;
  background-color: var(--mode_dark-ligth);
  padding: 10px;
  transition: 0.5s ease;
  /* height: 30rem; */
  z-index: 999;
  /* max-width: 350px; */
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(2px 4px 6px var(--color-degradado));
  
}
.card_de_a {
  display: flex;
  align-items: center;
  background-color:var(--mode_dark-ligth);
  border: none;
  border-radius: 1rem;
  padding: 5px;
  margin-bottom: 15px;
  flex-direction: inherit;
  transition: 0.5s ease;
  /* box-shadow: var(--sombra-card); */
}
.ol-zoom {
  display:none!important;
}
.column {
  flex: 1;
  padding: 0 15px;
  text-align: start;
}

.de_a_bold {
  font-weight: bold;
  font-size: 15px;
}
.localida {
  font-weight: 500;
  font-size: 15px;
  color: #979797;
}
#referencias2{
  position: relative; /* Importante para que el 'absolute' se relacione con este contenedor */
width: 100%;
/* height: 100vh;  */
}
  
   
.ov-btn-grow-skew, .form-select, .form-control, .botonCambiarBusqueda   {
  border-radius:var(--radius-btn);
  min-width:100px;
  min-height:50px;
  width: 100%;
  border: none;
  font-weight: bold;
}
       
.botonCambiarBusqueda {
  background-color: var(--main-secondary-color);
  color: white;
  border-radius: 5px;
  padding: 3px;
  padding: 10px 2px 10px 0px;
  margin-right: 3% !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: none;
  font-weight: bold;
}

.botonCambiarBusqueda:hover {
  color: var(--main-primary-color) !important;
}
.botonCambiarBusqueda::after {
  content: "";
  background: #fff; /* color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.3s ease;
}

.botonCambiarBusqueda:hover::after {
  transition: all 0.3s ease-out;
  transform: skewX(-45deg) scale(1, 1);
}
.coche{
  background:var(--color-acentuado)!important;
  color:white!important;
}
.forma{
  font-family: var(--font-family);
  border:none!important;
  background:var(--color-acentuado);
}
   
   .card-group{
     border-radius:var(--radius-card)
   ;}
   
   .nav-filtros{
   background:var(--main-primary-color);
   padding: 0.5rem;
   
   }
   /* #carouselExampleIndicators > div > div > div > button{
   background:var(--color-acentuado)!important;
   } */
   .pax_input{
    min-width: 10px;
    text-align: center;
    
   }
   .logoPasajes{
    max-width: 6rem;
    margin-top: 2rem;
   }
  
   #pruebaBoleto{
     overflow-y: auto;
     max-height: 100vh;
     width:100%;
   }
   .buscar_gps{
     background: var(--color-acentuado)!important;
     color: var(--mode_dark-ligth);
   }
   .contenidoBarraCambiar {
     max-width: 100%;
   }
   .span-input{
     margin-bottom: 1rem;
   }
   #destino_cambiar_busqueda, #origen_cambiar_busqueda{
     display:flex;
     font-size:16px;
     color:white;
     font-weight: bold;
   }
   .bi-arrow-down-right-circle{
     margin-right:1rem;
   }
   .bi-arrow-up-right-circle{
     display:flex;
     align-items: center;
   }
   #select_empresa, #ordenarPor{
     text-align:center;
   }
   .title_poput{
     font-size: 20px;
       font-weight: 600;
     }
     .subtitle_poput{
       font-size: 18px;
         font-weight: 300;
     }

  .eliminar_pax_btn, .agregar_pax_btn{
    border: none;
  }
  #add_eli_pax{
    align-items: center;
  }
  .eliminar_pax, .agregar_pax{
    display: flex;
    background-color: white;
    border-radius: 50%!important;
    width: 40px;
    height: 40px;
    margin: 5px!important;
  }
  .botonCambiarBusqueda, .empresaSelect{
    border-radius: 10px;
  }


  #cerrarBusqueda {
    /* justify-content: center !important;
    align-items: center !important; */
    /* position: relative;*/
    margin-top: 5px;
    margin-left: -5px !important;
    width: 100%;
    color: var(--main-primary-color);
    background-color: white !important;
    border: 1px solid var(--main-secondary-color);
  }
  
  .cierraBuscador {
    display: none;
    transition: 2s ease;
  }
  
  .muestraBuscador {
    display: block;
    transition: 2s ease;
  }


  .searchbar {
font-size: 14px;
font-family: arial, sans-serif;
color: #202124;
display: flex;
z-index: 3;
height: 50px;
background: white;
border: 1px solid #dfe1e5;
box-shadow: none;
border-radius: var(--radius-btn);;
max-width: 12rem;
}
.searchbar:hover {
box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
border-color: rgba(223,225,229,0);
}
.searchbar-wrapper {
flex: 1;
display: flex;
padding: 5px 8px 0 14px;
}
.searchbar-left {
font-size: 14px;
font-family: arial, sans-serif;
color: #202124;
display: flex;
align-items: center;
padding-right: 13px;
margin-top: -5px;
}
.search-icon-wrapper {
margin: auto;
}
.search-icon {
margin-top: 3px;
color: #9aa0a6;
height: 20px;
line-height: 20px;
width: 20px;
}
.searchbar-icon {
display: inline-block;
fill: currentColor;
height: 24px;
line-height: 24px;
position: relative;
width: 24px;
}
.searchbar-center {
display: flex;
flex: 1;
flex-wrap: wrap;
}
.searchbar-input-spacer {
color: transparent;
flex: 100%;
white-space: pre;
height: 34px;
font-size: 16px;
}
.searchbar-input {
background-color: transparent;
border: none;
margin: 0;
padding: 0;
color: rgba(0, 0, 0, .87);
word-wrap: break-word;
outline: none;
display: flex;
flex: 100%;
margin-top: -37px;
height: 34px;
font-size: 16px;
max-width: 100%;
width: 100%;
}
.searchbar-right {
display: flex;
flex: 0 0 auto;
margin-top: -5px;
align-items: center;
flex-direction: row
}
.searchbar-clear-icon {
margin-right: 12px
}
.voice-search {
flex: 1 0 auto;
display: flex;
cursor: pointer;
align-items: center;
border: 0;
background: transparent;
outline: none;
padding: 0 8px;
width: 2.8em;
}

.calendario_group{
  
}
.calendario_group {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto; /* Permite desplazamiento horizontal si hay demasiados días */
  justify-content: space-between;
  background:var(--main-primary-color);
}

.calendario_group button {
  flex: 1 1 auto;
  min-width: 100px; /* Ajusta el ancho mínimo de los botones */
  margin: 5px;
  text-align: center; /* Centra el texto */
  background: var(--color-acentuado);
  filter: drop-shadow(2px 4px 6px black);
  font-weight: bold;
}

.fechaActiva {
  /* border: 3px solid var(--main-primary-color); */
  background-color: var(--main-secondary-color) !important;
}
.preloader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #00000080;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.loaded {
  opacity: 0;
  visibility: hidden;
}

.spinner {
  border: 16px solid var(--main-primary-color);
  border-radius: 50%;
  border-top: 16px solid var(--main-secondary-color);
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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


.card{
  border:none!important;
  flex-direction: unset!important;
}

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

.input-group .bootstrap-select.form-control .dropdown-toggle {
  height: 100%;
}

.dropdown-item:hover{
  color: #212529!important;
}

.btn-secondary{
  margin: 0!important;
  border-color:var(--main-primary-color)!important;
}

.btn-secondary:hover{
  margin: 0!important;
  border-color:var(--main-primary-color)!important;
  background: var(--main-secondary-color)!important;
}

.pax-selection {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #f8f9fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 200px;
  margin: auto;
}

.pax-counter {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-acentuado);
  margin: 0 1rem;
  min-width: 40px;
  text-align: center;
}

.btn-pax {
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
}

.btn-increment {
  background-color: var(--main-primary-color);
  color: white;
  border: 2px solid;
}

.btn-decrement {
  background-color: var(--cgray);
  color: white;
  border: 2px solid;
}

.pax-label {
  margin-right: 1rem;
  font-weight: bold;
  font-size: 1.2rem;
}



.swal2-confirm{
  background-color: var(--main-primary-color)!important;
}
.swal2-cancel{
  background-color: var(--cgray)!important;
}
.swal2-title{
  color: var(--main-primary-color)!important;
}


/* viene de indes este css */
.forma{
 font-family: var(--font-family);
 border:none!important;
 background:var(--main-primary-color);
 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.jumbotron {
  background: transparent;
  margin-bottom: 0;
}
.display-5 {
  font-weight: bold;
  text-shadow: var(--sombra-text);
  color: var(--color-acentuado);
  font-size: 3rem;
}
.display-4 {
  font-weight: bold;
  text-shadow: var(--sombra-text);
  color: white;
  font-size: 3.5rem;
}
.lead {
  text-shadow: var(--sombra-text);
  color: white;
  font-size: 2rem;
}

#modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}
.btn_info{

}
#modal-content {
  background-color: #fff;
  padding: 20px;
  width:50%;
  text-align:center;
  border-radius: var(--radius-btn);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#modal-container.active {
  opacity: 1;
  pointer-events: auto;
}
.footer-image {
  /* position: fixed; */
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  z-index: -1;
}
/* Estilos para el botón de Apple */
.btn-apple {
    background-color: #a3a3a3; /* Color gris similar al de Apple */
    border-color: #a3a3a3;
}

.btn-apple:hover {
    background-color: #666666; /* Color gris oscuro para el efecto hover */
    border-color: #666666;
}

/* Estilos para el botón de Android */
.btn-android {
    background-color: #a4c639; /* Color verde característico de Android */
    border-color: #a4c639;
}

.btn-android:hover {
    background-color: #8c9c34; /* Color verde oscuro para el efecto hover */
    border-color: #8c9c34;
}


/* inicio mdo telefono */
@media only screen and (max-width: 767px) {
  .footer-image {
    position: fixed;
  }
  .btn_buscar {
    width: 264px; /* Hacer que el ancho sea del 100% para adaptarse a pantallas más pequeñas */
  }
  .display-4 {
    font-size: 2rem;
  }
  .display-5 {
    font-size: 2rem;
  }
  .content_img {
    right: 0rem;
    height: 85%;
    transform: translateX(65px);
    top:2rem;
  }
  .lead {
    font-size: 1.5rem;
  }
  .jumbotron {
    padding-bottom: 0;
  }
  .filtros_boletos .filtro {
    display: none;
  }
  .buscador_new{
    min-height: 300px;
  }
  .svg-container {
    margin-top: 1rem;
  }
  .swal2-popup {
   width: 100%!important;
  }

  .wrapper{
    max-height: 89vh;
  }

  .welcome-text .big {
    font-size: 55px!important;
  }

}
/* fin mdo telefono */
/* Estilo general para el contenedor de la imagen */
a:not([href]):not([tabindex]){
  color: var(--main-primary-color);
}


.section-title {
    font-family: 'Recoleta', serif;
    font-size: 2rem;
    color: #481a82;
    margin-bottom: 1rem;
}

.card-header {
    background-color: #ff5f83;
    color: white;
}

.preferences-card {
    border: 1px solid #ff5f83;
}

.btn-custom {
    background-color: #481a82;
    color: white;
    border-radius: 50px;
    padding: 0.5rem 1rem;
}

.btn-custom:hover {
    background-color: #ff5f83;
    color: white;
}

.svg-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 2rem;
}

.svg-item {
  margin-right: 10px; /* Espacio entre las SVG */
  transition: transform 0.3s ease;
  cursor: pointer;
  filter: drop-shadow(2px 4px 6px black);
}

.svg-item:hover  {
  transform: scale(1.1); /* Efecto de escala al pasar el mouse */
}
.history-table {
  margin-top: 20px;
}
.history-table th, .history-table td {
  text-align: center;
}
.history-table .btn-view {
  color: #007bff;
  border: none;
  background: none;
}
.history-table .btn-view:hover {
  text-decoration: underline;
}
.card-header {
  background-color: #f8f9fa;
}
#swal2-html-container{
  padding:0px!important;
}

.loginNav {
    cursor: pointer;
    text-decoration: none!important;
    color: var(--main-primary-color);
    font-weight: 600;
    font-size: 1rem;
    margin: 1rem;
    display: flex;
    align-items: center;
    position: relative;
    height: 16px;
    transition: color 0.15s ease-in-out, fill 0.15s ease-in-out;
    border-bottom: none!important;
}

.loginNav svg {
    fill: var(--main-primary-color)!important;
    margin-right: 0.5rem;
    transition: fill 0.15s ease-in-out;
}

.loginNav:hover {
    color: var(--main-secondary-color)!important;
}

.loginNav:hover svg {
    fill: var(--main-secondary-color)!important;
}

.loginNav:hover img {
    fill: var(--main-secondary-color)!important;
}

.iconos{
  width: 24px;
  margin-right:0.5rem;
}

/* fin css de index */

/* Clave (key) */
.key {
  font-weight: bold;
  color: var(--cgray); /* Color oscuro para el texto */
  font-size: 1rem;
}

.value {
  color: var(--gray); /* Color azul profesional */
  font-size: 0.9rem;
  font-weight: 400; /* Peso normal para los valores */
}

/* Espaciado adicional */
.mt-3 {
  margin-top: 20px;
}

/* banner inicio */
.welcome-container {
  display: none; /* Inicialmente oculto */
  align-items: center;
  justify-content: center;
  height: 100vh;
  width:100%;
  margin: 0;
  background-color: #354393; /* Fondo del body */
  font-family: 'Ubuntu', sans-serif;
  overflow: hidden;
  text-align: center;
  position: relative;
  color: white;
  flex-direction: column;
  z-index: 10000;
  position: absolute;
}
.welcome-text {
  font-size: 24px; /* Tamaño del texto normal */
  color: white;
  margin-bottom: 20px;
}
.welcome-text .big {
  font-size: 96px; /* Tamaño más grande para "BIENVENIDA" */
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff; /* Color para la palabra "BIENVENIDA" */
  margin-top: 20px;
}
.welcome-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}
.image-container {
  opacity: 0; /* Inicialmente oculta */
  margin-top: 30px;
}
.image-container img {
  max-width: 100%; /* Ajusta el tamaño de la imagen */
  height: auto;
}

/* fin banner inicio */

.navbar {
  background-color: var(--white) !important;
  font-weight: bold;
  position: relative;
  padding: 0rem 0.5rem;
}
.imgLogo {
  width: 7rem;
}

.btnIr{
  border-radius:50%;
  width:100%;
  background-color: var(--main-secondary-color);
  color: white;
  transition:  0.3s ease;
}

.btnIr:hover{
  background: white;
  color: var(--main-primary-color);
}


.custom-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000; /* Asegúrate de que esté por encima de otros elementos */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px; /* Bordes redondeados */
  background-color: white; /* Color de fondo */
  max-width: 400px; /* Ancho máximo */
  width: 100%; /* Ancho del popup */
  padding: 5px;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Opcional: estilos para el botón de cerrar */
.custom-popup .btn-secondary {
  margin-top: 10px;
}


.proxArribos{
  border-radius: 10px;
  color: white;
  display: flex;
  filter: drop-shadow(2px 4px 6px black);
  border: 2px solid;
  background-color: white;
  align-items: center;
  justify-content: space-between;
}
.swal-custom {
  background: var(--main-primary-color) !important; /* Aplica el color de fondo */
  color: #fff; /* Color del texto */
}

.swal-custom .swal2-title {
  color: white!important; /* Cambia el color del título a blanco */
}