/*Estilo para NavBar*/
.nav-link {
    position: relative;
    color: #000; /* Color del texto de los enlaces */
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #007bff; /* Color del subrayado */
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.nav-link:hover {
    color: #007bff; /* Color del texto al pasar el cursor */
}

.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-link.active {
    color: #007bff; /* Color del texto de la opción activa */
}

.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}



/*Estilos para Expedientes - CREACION*/

.client_container {
    border-radius: 21px;
    background: #fafafa;
    border-bottom-right-radius: 10px;
    box-shadow:  15px 15px 35px #8c8c8c,
                -15px -15px 35px #ffffff;
}

.data_container {
    border-radius: 21px;
    background: #fafafa;
    box-shadow:  15px 15px 35px #8c8c8c,
                -15px -15px 35px #ffffff;
}

.promotion_container {
    border-radius: 21px;
    background: #fafafa;
    box-shadow:  15px 15px 35px #8c8c8c,
                -15px -15px 35px #ffffff;
    padding: 10px;
    height: 380px; /* Mantiene la altura fija */
    margin-bottom: 40px;
    overflow-y: auto; /* Habilita la barra de desplazamiento vertical */
    overflow-x: hidden; /* 🚀 Evita la barra de desplazamiento horizontal */
    max-width: 100%; /* Asegura que el contenido no desborde */
}

.promotion_container_edit{
    border-radius: 21px;
    background: #fafafa;
    box-shadow:  15px 15px 35px #8c8c8c,
                -15px -15px 35px #ffffff;
    padding: 10px;
    height: 700px; /* Ajusta esta altura según tus necesidades */
    margin-bottom: 40px;
    overflow-y: auto; /* Habilita la barra de desplazamiento vertical */
    overflow-x: hidden; /* 🚀 Evita la barra de desplazamiento horizontal */

}



.files_container{
    border-radius: 21px;
    background: #fafafa;
    box-shadow:  15px 15px 35px #8c8c8c,
                -15px -15px 35px #ffffff;
    border: 1px solid #ddd;
    padding: 10px;
    height: 380px; /* Ajusta esta altura según tus necesidades */
    overflow-y: auto; /* Habilita la barra de desplazamiento vertical */
}

.files_container_edit{
    border-radius: 21px;
    background: #fafafa;
    box-shadow:  15px 15px 35px #8c8c8c,
                -15px -15px 35px #ffffff;
    border: 1px solid #ddd;
    padding: 10px;
    height: 700px; /* Ajusta esta altura según tus necesidades */
    overflow-y: auto; /* Habilita la barra de desplazamiento vertical */
}

.observations_container {
    border-radius: 21px;
    background: #fafafa;
    box-shadow: 15px 15px 35px #8c8c8c, -15px -15px 35px #ffffff;
    border: 1px solid #ddd;
    padding: 10px;
    max-height: 450px;
    overflow-y: auto;
}

/* Ajusta la altura para dispositivos móviles */
@media (max-width: 768px) {
    .observations_container {
        height: auto; /* Permite que se expanda según el contenido */
        min-height: 300px; /* Asegura que tenga una altura mínima */
    }
    .promotion_container{
        min-height: 600px;
    }
    .files_container{
        min-height: 400px;
    }
}

.section_title{
    padding-bottom: 15px;
}

/*SECCION DE INDEXS*/
#button_create_green{
    background-color: #60CA80; 
    color: #ffffff; 
    border: none;
    width: 135px;

}

#edit_button_blue{
    background-color: #3498DB; 
    color: #ffffff; 
    border: none;
    width: 55px;
}

#delete_button_red{
    width: 70px;
    background-color: #E74C3C; 
    color: #ffffff; 
    border: none;

}



/* ALGUNOS ESTILOS EXTRAS*/

/*Este titulo se queda pegado en la parte de arriba del contenedor para que no se mueva*/

#sticky-title {
    position: sticky;
    top: 0;
    background-color: #fafafa; /* Fondo igual al contenedor para que se vea bien */
    z-index: 10; /* Para que quede encima de los demás elementos */
    padding: 10px;
    border-bottom: 2px solid #ccc; /* Opcional, para destacar el título */
    margin-bottom: 15px;

}