* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Hace que el body ocupe toda la altura de la ventana */
    margin: 0;
    background-color:white;
}

/* Estilos generales */
.body-admin {
    background-color: #f8f9fa; /* Color de fondo claro */
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    height: 100vh;  /*Altura total de la ventana */
    /*height: 100%;*/
    margin: 0px;
    display: flex;
    justify-content: center; /* Centrar el contenido horizontalmente */
}

.card {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: #007bff; /* Color del encabezado */
    color: #fff;
}

.btn-primary {
    background-color: #F77620;
    border-color: #F77620;
}

.btn-primary:hover {
    background-color: #C65D1A;
    border-color: #C65D1A;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #4e555b;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* Estilos específicos del dashboard */
.dashboard-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 90vh; /* Altura total de la ventana */
    width: 100%; /* Ancho total del dashboard */
    max-width: 95%; /* Ajustar según sea necesario */
    margin: 0 auto; /* Centrar el dashboard horizontalmente */
    
}

.logo-tamaño {
    width: 100px;
    height: 100px;
}

.sidebar-container {
    flex: 15%; /* Reduce el ancho para el sidebar */
    padding-right: 10px;
    margin-right: 20px; /* Espacio fijo a la derecha del sidebar */
    margin-left: 10px;
    /*overflow-y: hidden;  Evitar scroll innecesario */
    height: 100%; /* Altura completa */
    text-align: left; /* Alinear el contenido a la izquierda */
}

/* Estilo para los enlaces sin subrayado */
.sidebar .list-group-item a {
    text-decoration: none;
    color: #7A53A6;  /* Cambia el color según tu preferencia */
    transition: color 0.3s ease;
    
}

.sidebar .list-group-item a:hover {
    color: #7A53A6;  /* Cambia el color al pasar el cursor */
    text-decoration: none;
    font-weight: bold;
}

.sidebar .list-group-item {
    height: 40px;
    
}

.usuario-color {
    color: #21AFCC;
}

.btn-outline-danger {
    border-color: #21AFCC;
    color: #21AFCC;
}

.btn-outline-danger:hover {
    background-color: #21AFCC;
    color: #fff; /* Color del texto al hacer hover */
    border-color: #21AFCC;
}

.usuario-section {
    border-bottom: 2px solid #21AFCC;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.direccion-section {
    border-bottom: 2px solid #21AFCC;
    margin: 10px;
    padding-bottom: 5px;
}

#logo-desc h4{
    font-size: 18px;
}
.menu-section {
    margin-top: 15px;
}

.content {
    flex: 55%; /* Ajusta el ancho para la columna de contenido */
    overflow-y: auto;
    height: 100%; /* Altura completa */
    text-align: left; /* Alinear el contenido a la izquierda */
    margin-right: 30px;
    /*overscroll-behavior: none;*/
}

.statistics-container {
    flex: 15%; /* Reduce el ancho para la columna de estadísticas */
    overflow-y: hidden; /* Evitar scroll innecesario */
    height: 100%; /* Altura completa */
    text-align: left; /* Alinear el contenido a la izquierda */
}

/*Tamaño del grafico*/
.statistics-container p { 
    line-height: 0.8; /* Ajusta este valor según el interlineado que prefieras */
}

.small-pie-chart {
    width: 300px !important; /* Ajusta el tamaño según tus necesidades */
    height: 300px !important; /* Ajusta el tamaño según tus necesidades */
    margin-bottom: 20px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}

.table-section {
    visibility: hidden; /* Ocultar todas las secciones de tablas por defecto, pero mantener el espacio */
    height: 0; /* Altura 0 para las secciones ocultas */
}

.table-section.active {
    visibility: visible; /* Mostrar la sección activa */
    height: auto; /* Restaurar la altura automática */
}

.table-section h2 {
    position: -webkit-sticky; /* Para compatibilidad con Safari */
    position: sticky;
    top: 0;
    background-color: #f8f9fa; /* Reemplaza este color con el color de fondo que estés usando en el contenedor */
    z-index: 10; /* Para asegurarse de que el título esté por encima de otros elementos */
    padding: 10px 0; /* Opcional: añadir algo de relleno */
}

.accordion {
    background-color: transparent; /* Eliminar fondo gris */
    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #f8f9fa; /* Fondo claro al hacer hover */
}

.panel {
    padding: 0 10px;
    display: none;
    background-color: #fff; /* Fondo blanco para el panel */
    overflow: hidden;
}

/* Clases para mantener la vista de login separada */
.login-card {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.login-card-header {
    background-color: #F5C118; /* Color del encabezado */
    color: #fff;
    font-size: 16px;
}

.login-margen {
    margin-top: 150px;
}

/* Asegurar que los egresados se muestren en lista vertical */
.panel table {
    width: 100%;
    margin-bottom: 20px;
    table-layout: fixed; /* Establecer un layout fijo para la tabla */
}

.panel table th, .panel table td {
    width: 50%; /* Ancho fijo para las columnas */
    word-break: break-word; /* Ajustar el texto que exceda el ancho de la columna */
}

/* Añadir un ancho fijo a los contenedores de las tablas */
.table-container {
    width: 100%;
    overflow-x: auto;
}

.mt-10 {
    margin-top: 10px;
}

.mt-40 {
    margin-top: 40px;
}


/*******************************************************************/

.body-egresado {
    /*width: 100%;*/
    background-color: white;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Hace que el body ocupe toda la altura de la ventana */
    
}

@media screen and (max-width: 768px) {
    .body-egresado {
        margin-bottom: 50px;
    }
}

.container_login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;  /*espacio entre las secciones */
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    padding: 0 20px 10px 20px; 
    text-align: center;
    z-index: 2;
    margin-bottom: 50px;

    
}
.container_login h1{
    font-size: 30px;
}

footer .sacar-hipervinculo {
    text-decoration: none;
}

.container_login a,
.container_login h3,
.container_login .content_login_dni {
    margin-top: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container_login h3{
    color: #333;
    font-size: 20px;
}
.container_login .vistaPremio{
    margin: 20px 10px;
}
.vistaPremio h4{
    font-size: 14px;
}
.container_login .premio{
    color: #21AFCC;
    font-size: 26px;
}
.content_login_dni .button_login { 
    margin: 15px;
    background-color: #21AFCC; 
    border: none; 
    border-radius: 4px; 
    color: #fff; 
    padding: 10px 15px; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
} 

.content_login_dni .button_login:hover { 
    background-color: #1A98B5; 
}

.content_login_dni input[type="number"] { 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 5px; 
    margin: 5px; 
    font-size: 14px; 
    width: 300px;
}
.container_login img{
    height: 90px;
}
.content_login_dni h2{
    font-size: 24px;
    text-align: center;
}
.content_login_dni h5{
    font-size: 14px;
    margin: 10px;
}
.content_login_verificar h2{
    font-size: 20px;
    margin-bottom: 15px;
}
.content_login_verificar form{
    display: flex;
    flex-direction: column;
    margin: 25px;
}
.content_login_verificar button{
    margin-top: 15px;
    background-color: #21AFCC; 
    border: none; 
    border-radius: 4px; 
    color: #fff; 
    padding: 5px 10spx; 
    font-size: 16px; 
    cursor: pointer; 
    transition: background-color 0.3s ease; 
}

.content_login_verificar input{
    font-size: 16px;
    margin: 10px;
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 10px;  
    width: 300px;
}
.container_login h1, h2, h3{ 
    color: #21AFCC; 
    margin-bottom: 10px; 
} 

.container_login h5 { 
    color: #555; 
    margin: 5px 0; 
    font-size: 16px;
}

.button_login:hover {
    background-color: #0c645d;
}

/* Saca las flechitas en input de formulario de inicio */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
.imgPremio{
    margin: 30px;
    padding: 10px;

}
.imgPremio img{
    width: 70px;
    height: auto;
    margin: 10px;
}

footer { 
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    justify-content: center;
    background-color:white;
    color: #4e555b;
    height: 100px;
}
.footer-copyright{
    padding: 10px;
}

/*********************************/


/*footer { 
    margin-top: 10px;
    width: 100%; 
    background-color: #f8f9fa; 
    padding: 5px; 
    text-align: center; 
    position: absolute;
    bottom: 0; 
}
*/
/***********************************/

.contenedorCaja {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.caja_id1, .caja_id2, .caja_id3, .caja_id4, .caja_id5{
    width: 60px;
    height:60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.caja_id1 {
    background-color: #21AFCC;
    border-color: #21AFCC;
}

.caja_id2 {
    background-color: #F5C118;
    border-color: #F5C118;
}

.caja_id3 {
    background-color: #F77620;
    border-color: #F77620;
}

.caja_id4 {
    background-color: #3CB52A;
    border-color: #3CB52A;
}

.caja_id5 {
    background-color: #7A53A6;
    border-color: #7A53A6;
}

.caja_id1:hover, .caja_id2:hover, .caja_id3:hover, .caja_id4:hover, .caja_id5:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.mensaje {
    font-size: 18px;
    color: #21AFCC;
    text-align: center;
    font-weight: bold;
}

#resultado {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
}

.saludo{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.saludo form{
    margin-top: 10px;
}
.msjSaludo {
    margin: 10px;
    color: #21AFCC;
    font-size: 20px;
    padding: 5px;
    opacity: 0;
    animation: fadeIn 2s forwards;
    animation-delay: 0.5s; /* Puedes ajustar el retraso para sincronizar las animaciones */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.premio{
    color: white;
    padding: 15px;
    display: flex;
    
}
@media screen and (min-width: 768px) {
/*----------------WELCOME-------*/
    .body{
        margin: 80px;
    }
    #logo-desc h4{
        font-size: 20px;
    }
    .container_login{
        gap: 6px;
    }
    .container_login h1{
        font-size: 26px;
    }
    .container_login h5{
        font-size: 14px;
    }
    .content_login_dni form{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .content_login_dni h2{
        font-size: 20px;
    }
    .content_login_dni input[type="number"] {
        font-size: 16px;
        width: 300px;
    }
    .content_login_dni .button_login{
        font-size: 16px;
        padding: 5px;
        margin: 15px;
    }

/*----------------JUEGO-------*/
    .contenedorCaja {
        display: flex;
        gap: 15px;
    }
    .caja_id1, .caja_id2, .caja_id3, .caja_id4, .caja_id5{
        width: 80px;
        height:80px;
    }
    .imgPremio img{
        width: 90px;
        height: auto;
        margin: 20px;
    }






/*----------------FOOTER-------*/
    footer{
        height: 40px;
    }
    .footer-copyright{
        font-size: 14px;
    }
}