body {
    background-color: #2d2d2d; /* Fondo oscuro */
    color: #e0e0e0; /* Texto claro */
}

.navbar-dark .navbar-brand {
    color: #5b9bd5; /* Color primario para el nombre de la marca */
}

.navbar-dark .navbar-nav .nav-link {
    color: #e0e0e0;
}

    .navbar-dark .navbar-nav .nav-link:hover {
        color: #5b9bd5; /* Color de enlace activo */
    }

footer {
    background-color: #1c1c1c;
    color: #a0a0a0;
}

.container {
    background-color: #333333; /* Fondo para el contenido principal */
    border-radius: 8px;
    padding: 20px;
}

a {
    color: #5b9bd5;
}

    a:hover {
        color: #337ab7;
    }

/* Estilos generales */
body {
    background-color: #1f1f2e;
    color: #e0e0e0;
    font-family: Arial, sans-serif;
}

/* Navbar */
.navbar {
    background-color: #2d2d3a;
}

.navbar-brand, .navbar-nav .nav-link {
    color: #ffffff !important;
}

    .navbar-nav .nav-link:hover {
        color: #a29bfe !important;
    }

/* Menu lateral */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        .sidenav a:hover {
            color: #a29bfe;
        }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

/* Contenedor principal */
.container, .footer {
    background-color: #2d2d3a;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

/* Tarjetas de información */
.info-card {
    background-color: #2b2b3a;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .info-card h2, .info-card h3 {
        color: #ffffff;
    }

/* Estilos de footer */
.footer {
    background-color: #1f1f2e;
    color: #e0e0e0;
    text-align: center;
    padding: 15px;
    border-top: 1px solid #444;
}
/* Personalización del modal para que coincida con el esquema de colores de la app */
.modal-content {
    background-color: #333333; /* Fondo oscuro */
    color: #e0e0e0; /* Texto claro */
    border-radius: 8px; /* Esquinas redondeadas como el contenedor principal */
}

.modal-header {
    border-bottom: 1px solid #444444; /* Línea más sutil entre la cabecera y el cuerpo */
    background-color: #2d2d2d; /* Fondo de la cabecera del modal */
    color: #e0e0e0; /* Texto claro en la cabecera */
}

.modal-body {
    background-color: #333333; /* Fondo oscuro para el cuerpo del modal */
    color: #e0e0e0; /* Texto claro en el cuerpo */
}

.modal-footer {
    background-color: #2d2d2d; /* Fondo de la parte inferior del modal */
    border-top: 1px solid #444444; /* Línea entre el cuerpo y el pie de modal */
}

/* Personalización del botón de cerrar */
.btn-close {
    background-color: transparent;
    color: #e0e0e0; /* Color del icono de cerrar */
}

.btn-Modal trash {
    background: transparent; /* Fondo transparente */
    border: none; /* Eliminar borde */
    padding: 0; /* Sin relleno extra */
}
/* Estilo para el botón de eliminación sin fondo */
button.btn-Modal.trash {
    background: none; /* Sin fondo */
    border: none; /* Sin borde */
    padding: 0; /* Sin relleno */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
}

    button.btn-Modal.trash i {
        color: #ffffff; /* Blanco */

        font-size: 18px; /* Ajusta el tamaño del ícono si es necesario */
    }


    button.btn-Modal.trash:hover i {
        color: #8ab8e6; /* Azul claro */
    }

    .btn-close:hover {
        color: #5b9bd5; /* Cambiar color cuando el mouse pasa por encima */
    }

/* Estilo del botón de cerrar en la parte inferior */
.btn-secondary {
    background-color: #5b9bd5; /* Color primario para el botón de cerrar */
    color: white;
}

    .btn-secondary:hover {
        background-color: #337ab7; /* Color del botón al pasar el mouse */
    }


.notificacion-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Alinea el contenido a los extremos */
    padding: 10px;
    border-bottom: 1px solid #ddd; /* Opcional, agrega separación entre notificaciones */
}

    .notificacion-item p {
        margin: 0;
        flex: 1;
    }

.btn-Modal.trash {
    margin-left: 10px; /* Opcional, añade espacio entre el texto y el botón */
}

/* Estilos personalizados para el modal con animación */
.modal.custom-fade .modal-dialog {
    transform: translateY(-30px); /* Posición inicial */
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Animación de entrada */
.modal.custom-fade.show .modal-dialog {
    transform: translateY(0); /* Desplazamiento hacia su posición final */
    opacity: 1;
}

/* Desenfoque de fondo cuando el modal está abierto */
.blur-background .container,
.blur-background header,
.blur-background footer {
    filter: blur(5px); /* Ajusta el valor para cambiar el nivel de desenfoque */
    transition: filter 0.4s ease; /* Suaviza la transición del efecto de desenfoque */
}

/* Animación de entrada personalizada para el modal */
.modal.custom-fade .modal-dialog {
    transform: translateY(-30px);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.modal.custom-fade.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}