body {
    font-family: 'Roboto', Arial, Tahoma, sans-serif;
    background-color: #f4f4f4;
    color: #4a4a4a;
    margin: 0;
    padding: 0;
}

.meeting-box {
    border: 1px solid #ccc;
    border-radius: 0px;
    padding: 15px;
    margin: 10px 0;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.meeting-box strong {
    color: #003459; /* Color para el título */
    font-size: 1.2em;
}

.meeting-box .icon {
    margin-right: 10px;
    color: #003459; /* Color para los íconos */
}

.meeting-box a {
    color: #fff; /* Color del texto del botón */
    text-decoration: none;
    padding: 10px 15px;
    background-color: #007bff; /* Color del botón */
    border-radius: 0;
    display: inline-flex; /* Alineación con el ícono */
    align-items: center; /* Centrar verticalmente */
    transition: background-color 0.3s;
}

.meeting-box a:hover {
    background-color: #0056b3; /* Color del botón al pasar el mouse */
}

.meeting-box .directions-icon {
    margin-right: 5px; /* Espacio entre el ícono y el texto */
}

/* Estilos del contenido del listado de reuniones */
#container {
    margin: 20px; /* Margen general */
}

#text1 {
    padding: 20px;
    background-color: #f9f9f9; /* Fondo suave para el contenido */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

h1 {
    font-size: 1.5em;
    color: #5f9ea0;
    text-align: center; /* Centrar el título */
    margin-bottom: 18px; /* Espaciado inferior */
}

div strong {
    font-size: 1.3em;
    color: #007c96; /* Color destacado para los nombres de los grupos */
    display: block; /* Asegurar que los nombres de los grupos estén en una línea separada */
    margin-top: 20px; /* Espaciado superior */
    margin-bottom: 10px; /* Espaciado inferior */
}

ul {
    list-style: none; /* Eliminar viñetas */
    padding-left: 20px; /* Espaciado a la izquierda */
    margin-bottom: 20px; /* Espaciado inferior para separar los grupos */
}

ul li {
    font-size: 1.1em;
    margin-bottom: 10px; /* Espaciado entre cada elemento de la lista */
    line-height: 1.6; /* Altura de línea */
    color: #333; /* Color del texto */
}

/* Centrando el botón de imprimir */
#button-container {
    display: flex;
    justify-content: center; /* Centrar el botón */
    margin-top: 20px;
}

/* Estilos de impresión */
@media print {
    body * {
        visibility: hidden; /* Ocultar todo el contenido por defecto */
    }

    #container, #container * {
        visibility: visible; /* Asegurarse de que el contenedor y sus elementos sean visibles */
    }

    #container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        box-sizing: border-box; /* Asegura que el padding y los bordes no afecten el tamaño total */
        overflow: hidden; /* Evitar que los elementos se desborden */
    }

    /* Ajustar el ancho de los elementos internos para que no se desborden */
    .meeting-box {
        width: 100%; /* Asegura que la caja de la reunión ocupe el 100% del área disponible */
        box-sizing: border-box; /* Incluir el padding y el borde dentro del ancho total */
        margin: 0 auto; /* Centrar los elementos */
    }

    /* Limitar el ancho máximo del contenido impreso y ajustarlo si es necesario */
    * {
        max-width: 100%; /* Evitar que los elementos se desborden */
        box-sizing: border-box; /* Asegura que el padding y los bordes no afecten el tamaño total */
    }

    /* Asegurar que los íconos y botones también se ajusten */
    .button-container a {
        max-width: 100%; /* Ajustar el botón al 100% del área de impresión */
        box-sizing: border-box;
    }

    /* Opcional: ajustar la escala para que el contenido no se desborde */
    @page {
        size: auto; /* Tamaño automático */
        margin: 20mm; /* Márgenes de impresión */
    }

    /* Eliminar bordes de los contenedores de las reuniones */
    .meeting-box {
        border: none;
    }

    /* Ocultar elementos no deseados en la impresión */
    #printButton, .button-container {
        display: none;
    }
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Ajusta el margen si necesitas */
}

#printButton {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007BFF; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#printButton i {
    margin-right: 8px; /* Espacio entre el icono y el texto */
}

/* Contenedor de los botones */
.link-buttons {
    display: flex; /* Usar flexbox */
    justify-content: center; /* Centrar los botones horizontalmente */
    gap: 15px; /* Espacio entre los botones */
    margin-top: 20px; /* Espacio superior opcional */
}

/* Estilo para los botones */
.directions-button, .whatsapp-button {
    display: inline-flex; /* Usar flexbox para los botones */
    align-items: center; /* Alinear el ícono y el texto verticalmente */
    background-color: #007BFF; /* Color de fondo del botón */
    color: white; /* Color del texto */
    text-decoration: none; /* Quitar subrayado del enlace */
    padding: 10px 20px; /* Relleno interno del botón */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de la fuente */
    transition: background-color 0.3s; /* Transición suave para el cambio de color */
}

/* Separar el ícono del texto con un margen derecho */
.directions-button i, .whatsapp-button i {
    margin-right: 10px; /* Espacio entre el ícono y el texto */
}

/* Cambio de color cuando el usuario pasa el mouse */
.directions-button:hover, .whatsapp-button:hover {
    background-color: #0056b3; /* Color de fondo cuando se pasa el mouse */
}

/* Estilos para la navegación general */
.navigation-container {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}

/* Estilos para el encabezado */
.navigation-container h3 {
    color: #40E0D0;
    text-align: center;
}

/* Estilos para la barra de navegación desplazable */
.scrolling-navigation {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

/* Estilos para los elementos de la lista */
.scrolling-navigation ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estilos para cada ítem de la lista */
.scrolling-navigation li {
    flex-shrink: 0;
    padding: 10px 20px;
}

/* Estilos para los enlaces dentro de la lista */
.scrolling-navigation li a {
    text-decoration: none;
    font-size: 16px;
    color: #3366FF;
    font-weight: bold;
}

/* Estilos para el ícono de mapa */
.scrolling-navigation li a i {
    margin-right: 5px; /* Espacio entre el ícono y el texto */
}
/* Colores para los íconos específicos */
        .fa-map-marker-alt { color: #ff5733; } 
        .fa-clock { color: #f1c40f; }          
        .fa-phone-alt { color: #3498db; }       
        .fa-envelope { color: #f39c12; }        
        .fa-globe { color: #2980b9; }           
        .fa-instagram { color: #D43089; }       
        .fa-whatsapp { color: #25d366; }        
        .fa-youtube { color:#FF0000; }         
        .contact a {
            color: #add8e6;
            text-decoration: none;}
        .fa-download { color: #ff7043;}
        .fa-info-circle { color:#a3ecef;}
        .fa-book { color:#bbe3cf;}
        .fa-wifi {color:#90bbec; }
        .fa-calendar-alt { color:#90bbcf;}
        .fa-home-alt { color: #009929;}
        .fa-book-open-reader { color: #90ddec;}
        .fa-calendar-day { color:#002d82;}
        .fa-users { color: #42dd42;}
        .location { color: #003f5d;}
        .fa-search-location { color: #C6EFA5;}
        .fa-book { color: #C6EFA4;}
        .fa-book-reader { color: #c6efa3;}
        .fa-address-book { color: #c6efa2;}
        .fa-hand-holding-usd { color: #c6efa1;}
        .fa-calendar-alt { color: #c6efa0;}
        .fa-home { color: #009919;}
        .fa-house-user { color: #009919;}
        /* Contenedor principal */
#whatsapp-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #25D366;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        font-size: 24px;
        color: white;
        z-index: 1000;
    }

    #whatsapp-btn i {
        font-size: 30px;
    }

    #whatsapp-btn:hover {
        background-color: #128C7E;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    }
        .button-container {
        display: flex;
        justify-content: center; /* Centra los botones horizontalmente */
        gap: 15px; /* Espacio entre los botones */
        margin-top: 20px; /* Espacio superior, opcional */
    }

    .btn, .whatsapp-button {
        display: inline-flex;
        align-items: center;
        padding: 10px 15px;
        font-size: 14px;
        text-decoration: none;
        border-radius: 5px;
        background-color: #003459;
        color: white;
        transition: background-color 0.3s ease;
    }

    .whatsapp-button {
        background-color: #25D366;
    }

    .btn:hover, .whatsapp-button:hover {
        background-color: #128C7E; /* Cambio de color al pasar el mouse */
    }

    .whatsapp-button i, .btn i {
        margin-right: 8px; /* Espacio entre el ícono y el texto */
    }
    /* Centrando el contenedor del botón */
.button-container {
    text-align: center;
    margin-top: 10px;
}

/* Estilo del botón */
.button-container .btn {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff; /* color azul primario */
    color: #fff; /* color del texto en blanco */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.button-container .btn i {
    margin-right: 8px; /* Espacio entre el icono y el texto */
}

/* Hover efecto para el botón */
.button-container .btn:hover {
    background-color: #0056b3; /* Color más oscuro al pasar el mouse */
}
/* Estilos del contenedor de botones */
.button-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espacio entre los botones */
}

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

.btn {
    background-color: #3366FF;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
}
 /* Añadir separación al contenedor .navigation-container */
    .navigation-container {
        margin-top: 30px;  /* Separación superior */
        margin-bottom: 30px;  /* Separación inferior */
    }