.contenedor_booking {
     width: 100%; /* El div ocupará el 100% del ancho de su contenedor padre */
     height: auto; /* La altura se ajusta automáticamente al contenido */
     background-color: #f0f0f0;
     border-radius: 20px; /* Bordes redondeados */
     display: flex;
     flex-direction: column; /* Coloca las imágenes en columna, una debajo de la otra */
     justify-content: center; /* Centra horizontalmente */
     align-items: center; /* Centra verticalmente */
     overflow: hidden; /* Asegura que las imágenes no se salgan del div */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Añade una sombra para un mejor efecto visual */
     padding: 10px; /* Espaciado interno para un mejor diseño */
 }

 .contenedor_booking img {
     max-width: 100%;
     margin-bottom: 10px; /* Añade espacio entre las imágenes */
     border-radius: 10px; /* Opcional: Redondea los bordes de las imágenes */
     object-fit: cover; /* Asegura que la imagen se ajuste correctamente */
 }

 .contenedor_booking img:last-child {
     margin-bottom: 0; /* Elimina el margen inferior de la última imagen */
 }



/* alert informativo al pulsar las rutas */

.overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.6);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 9999;
 display: none; /* Oculto por defecto */
}
.alert-box {
 background-color: #fff;
 padding: 30px;
 border-radius: 15px;
 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 max-width: 500px;
 
 position: relative;
 animation: fadeIn 0.5s;
}
@keyframes fadeIn {
 from {opacity: 0;}
 to {opacity: 1;}
}
.alert-box h2 {
 font-size: 1.5em;
 margin-bottom: 20px;
 color: #333;
}
.alert-box p {
 font-size: 1em;
 color: #555;
 line-height: 1.5;
 margin-bottom: 20px;
}
.close-btn {
 background-color: #007bff;
 color: #fff;
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 font-size: 1em;
 transition: background-color 0.3s ease;
}
.close-btn:hover {
 background-color: #0056b3;
}
.close-icon {
 position: absolute;
 top: 15px;
 right: 15px;
 font-size: 1.2em;
 color: #555;
 cursor: pointer;
}



/* Estilo de poner la letra en la tabla al lado del check */

     .custom-text {
         color: red;
         font-weight: bold;
         font-size: 20px;
     }

 
 
/* STYLE para imprimir */
 
 .display_none {      display: none;    }
 .hidden-print {      display: none;    }

 .print-only   {      display: none;    }

 @media print {      
     .hidden-print {        display: none;      }

     body, html {
             margin: 0;
             padding: 0;
             height: 100%;
             width: 100%;
         }

     
      #map {
         position: absolute;
             bottom: 0;
             width: 100%;
             height: 50%; /* Ocupa la mitad de la página */
         }
     
       .print-only   {        display: block;     }

     .no-print     {        display: none;      }
 }


 .print-section   {      display: none;        }  


 /* REVOLUTION LAYERS STYLES */

     .tp-caption.NotGeneric-Title,
     .NotGeneric-Title {
         color: rgba(255, 255, 255, 1.00);
         font-size: 70px;
         line-height: 70px;
         font-weight: 800;
         font-style: normal;
         text-decoration: none;
         background-color: transparent;
         border-color: transparent;
         border-style: none;
         border-width: 0px;
         border-radius: 0 0 0 0px
     }

     .tp-caption.NotGeneric-SubTitle,
     .NotGeneric-SubTitle {
         color: rgba(255, 255, 255, 1.00);
         font-size: 13px;
         line-height: 20px;
         font-weight: 500;
         font-style: normal;
         text-decoration: none;
         background-color: transparent;
         border-color: transparent;
         border-style: none;
         border-width: 0px;
         border-radius: 0 0 0 0px;
         letter-spacing: 4px
     }

     .tp-caption.NotGeneric-Icon,
     .NotGeneric-Icon {
         color: rgba(255, 255, 255, 1.00);
         font-size: 30px;
         line-height: 30px;
         font-weight: 400;
         font-style: normal;
         text-decoration: none;
         background-color: rgba(0, 0, 0, 0);
         border-color: rgba(255, 255, 255, 0);
         border-style: solid;
         border-width: 0px;
         border-radius: 0px 0px 0px 0px;
         letter-spacing: 3px
     }

     .tp-caption.Hero-Button,
     .Hero-Button {
         color: rgba(255, 255, 255, 1.00);
         font-size: 14px;
         line-height: 14px;
         font-weight: 500;
         font-style: normal;
         text-decoration: none;
         background-color: rgba(0, 0, 0, 0);
         border-color: rgba(255, 255, 255, 0.50);
         border-style: solid;
         border-width: 1px;
         border-radius: 0px 0px 0px 0px;
         letter-spacing: 3px
     }

     .tp-caption.Hero-Button:hover,
     .Hero-Button:hover {
         color: rgba(0, 0, 0, 1.00);
         text-decoration: none;
         background-color: rgba(255, 255, 255, 1.00);
         border-color: rgba(255, 255, 255, 1.00);
         border-style: solid;
         border-width: 1px;
         border-radius: 0px 0px 0px 0px;
         cursor: pointer
     }

 /*  Stylos de contenedores y asociados al mapa */

     .content_rutas {
         /* height: 800px;*/
         /* Simulación de contenido extenso */
         padding: 20px;
         
     }


     #rellenodebajodelmapa {  
         /* Este es el div que contien al div del mapa */
         
         background-color:  #f9f9f9; 
         padding:0px;
         width: 100%;
         height: 50vh;			
         /*justify-content: flex-end; /* Alinea horizontalmente a la derecha */
         
         justify-content: center;    /* Alinea horizontalmente a la derecha */
         align-items: center;			
         
     }



     #configuraturuta {  
         /* Este es el div que contiene al div del mapa */
         display: flex;
         
         /*background-color: #f9f9f9 ; ESTE ES EL COLOR DEL FONDO DE TODA LAS PAGINAS*/

         background-color: #f9f9f9;
         padding-bottom: 2px;  
         padding-left: 10px;  

         width: 100%;			
         /*justify-content: flex-end; /* Alinea horizontalmente a la derecha */
         justify-content: center; /* Alinea horizontalmente a la derecha */
         flex-direction: column; /* Apila los hijos verticalmente */
         align-items: center;
         z-index: 1000; /* Asegura que esté por encima de otros elementos */
         
     }

     .fixed {
         position: fixed;
         top: 50px; /* posicion que se queda anclado por debajo del marco de arriba */
         left: 0;
         width: 100%;
         /* Asegurar que el div fijo ocupe todo el ancho */
     }

     .placeholder_rutas {
         
         visibility: hidden;
     }
 
     #map {
         height: 45vh;
         width: 75%;
         margin-top: 2px;
         border: 5px solid #000; /* Color del marco */
         box-shadow: 0 0 10px rgba(6, 212, 226, 0.5); /* Sombra del marco */
         
     }
     #controls {
         padding: 20px;
     }
 

/*  Estilo para que solo sea el borde la fila y no la tabla entera */

 #miTabla {
     border-collapse: collapse; /* Combina los bordes de las celdas */
     width: 100%;
 }
 #miTabla tr {
     border-bottom: 1px solid black; /* Borde inferior para cada fila */
 }
 #miTabla td, #miTabla th {
     padding: 8px;
     text-align: left;
 }
 #miTabla tr:last-child {
     border-bottom: none; /* Quitar el borde de la última fila */
 }