@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.ttf');
    /* Agrega aquí otros formatos de fuentes si es necesario */
    font-weight: normal;
    font-style: normal;
}

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
    background-color: #023920; /* Color de fondo deseado */
    font-family: 'Roboto', sans-serif;
}

.position-absolute {
    position: absolute;
}

.bottom-0 {
    bottom: 0;
}

.translate-middle-x {
    left: 45%;
    transform: translate(-45%, 0);
}

.container {
    background-color: #023920; /* Color de fondo del contenedor */
    height: 80vh; /* Establece el alto del contenedor al 80% de la altura de la ventana */
}

.img-welcome {
    margin: auto; /* Centra la imagen horizontalmente */
    display: block; /* Asegura que la imagen se muestre como un bloque */
}

.titulo-verde {
    color: #01602D;
    font-weight: bold;
}

.color-welcome{
    background-color: #023920;
}

.fixed-height {
    height: 768px; /* Establecer la altura fija deseada */
    overflow-y: auto; /* Agregar scroll vertical si el contenido excede la altura */
}

.datos-input {
    border: 1px solid #515151; /* Color del borde */
    background-color: #F5F5F5;
    border-radius: 20px; /* Puedes ajustar el valor según tu preferencia */
    padding: 8px; /* Opcional: puedes ajustar el relleno según tus necesidades */
}

.pregunta-caja {
    background-color: #F5F5F5;
    border-radius: 20px; /* Puedes ajustar el valor según tu preferencia */
    padding: 8px; /* Opcional: puedes ajustar el relleno según tus necesidades */
}

.get-started-btn {
    border-radius: 4px;
    padding: 10px 20px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    transition: 0.3s;
    font-size: 1.2rem;
    text-decoration: none;
}

.btn-start {
    background: linear-gradient( to right, #fff 10%, #E4E4E4 90%);
    border: 3px solid #E4E4E4;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    color: #01602D;
}

.get-started-btn, .btn-start {
    font-size: 1rem; /* Ajuste inicial; se puede usar calc() para ajustes responsivos si es necesario */
    padding: 0.5rem 1rem; /* Ajuste para reducir el relleno si se desea */
    display: inline-flex; /* Esto ayuda a mantener alineado el texto y la imagen */
    align-items: center; /* Centra los elementos verticalmente */
    justify-content: center; /* Centra el contenido horizontalmente */
    text-align: center; /* Asegura que el texto esté centrado */
    white-space: normal; /* Permite que el texto pase a la siguiente línea si es necesario */
    max-width: 100%; /* Asegura que el botón no exceda el ancho de su contenedor */
}

/* Media query para pantallas más pequeñas */
@media (max-width: 768px) {
    .get-started-btn, .btn-start {
        font-size: 0.9rem;
        padding: 0.5rem 0.8rem; /* Ajustes menores para pantallas pequeñas */
    }
}

.btn-cerrar-sesion {
    background: #01602D;
    border: 3px solid #E4E4E4;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    color: #fff;
}

.btn-start:hover {
    background: #01602D;
    color: #D0E0D8;
    transition: background-color 0.3s, color 0.3s;
}

.btn-start:focus {
    background: #D0E0D8; /* Cambia el color de fondo cuando se presiona */
    color: #01602D; /* Cambia el color del texto cuando se presiona */
}

.btn-start:active {
    background: #D0E0D8; /* Cambia el color de fondo cuando se presiona */
    color: #01602D; /* Cambia el color del texto cuando se presiona */
}

.btn-cerrar-sesion:hover {
    background: #FFA400;
    color: #D0E0D8;
    transition: background-color 0.3s, color 0.3s;
}

.btn-cerrar-sesion:focus {
    background: #FFA400; /* Cambia el color de fondo cuando se presiona */
    color: #D0E0D8; /* Cambia el color del texto cuando se presiona */
}

.btn-cerrar-sesion:active {
    background: #FFA400; /* Cambia el color de fondo cuando se presiona */
    color: #D0E0D8; /* Cambia el color del texto cuando se presiona */
}

.page-item.active .page-link {
    background-color: #01602D; /* Color de fondo deseado para la página activa */
    border-color: #01602D; /* Cambia el color del borde si es necesario */
    color: #fff; /* Cambia el color del texto si es necesario */
}

.page-link {
    color: #01602D; /* Color de texto para las páginas inactivas */
}

.page-link:hover {
    color: #FFA400; /* Color de texto al pasar el mouse sobre las páginas inactivas */
}

.page-link:focus {
    color: #FFA400; /* Color de texto al enfocar las páginas inactivas */
}

.custom-button {
    background-color: white;
    color: #01602D;
    transition: background-color 0.3s, color 0.3s; /* Agrega transiciones suaves */
}

.custom-button:hover {
    background-color: #01602D;
    color: white;
}

.custom-button img {
    transition: filter 0.3s; /* Agrega transición al filtro */
}

.custom-button:hover img {
    filter: brightness(0) invert(1); /* Cambia el color de la imagen */
}

.divider:after,
.divider:before {
content: "";
flex: 1;
height: 1px;
background: #01602D;
}

.h-custom {
height: calc(100% - 73px);
}

@media (max-width: 450px) {
    .h-custom {
    height: 100%;
    }
}

.panel-right {
    background-color: #E4E4E4;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Estilos personalizados para el listado de eventos */
.eventos-list {
    list-style-type: none; /* Oculta los puntos de la lista */
    padding-left: 0; /* Elimina el relleno izquierdo predeterminado de la lista */
    margin-top: 0; /* Elimina el margen superior de la lista */
}

.eventos-list li {
    margin-bottom: 5px; /* Ajusta el espaciado entre los elementos de la lista */
}

.btn-download {
    background: linear-gradient( to right, #01602D 10%, #01602D 90%);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    color: #fff;
}

.btn-download:hover {
    background: #FFA400;
    color: #D0E0D8;
    transition: background-color 0.3s, color 0.3s;
}

.alert-new-user {
    background: linear-gradient( to right, #fff 10%, #E4E4E4 90%);
    border: 3px solid #E4E4E4;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}