body {
    background-color: #051349; /* Color de fondo */
    color: white; /* Color de texto */
    font-family: 'Montserrat', sans-serif; /* Fuente Montserrat */
}

h1 {
text-align: center;
margin-bottom: 60px;
margin-top: 50px;
color: #F3D669;
font-size: 35px;
font-weight: normal;
font-family: 'Montserrat', sans-serif;
}

.filters-container {
display: flex;
flex-direction: column; /* Alinear verticalmente */
align-items: center; /* Centrar horizontalmente todo el contenido */
padding: 20px; /* Espaciado interno */
background-color: #050031; /* Color de fondo */
max-width: 1300px; /* Ancho máximo */
margin: 0 auto; /* Centrar el contenedor */
min-height: 200px; /* Altura mínima */
border-radius: 15px; /* Bordes redondeados */
}

.filters-title {
text-align: center; /* Centra el texto */
color: #F3D669; /* Color del texto */
font-size: 25px; /* Tamaño de fuente */
margin-top: 20px;
margin-bottom: 20px; /* Espacio adicional debajo del título */
font-weight: bold; /* Opcional: hace que el texto sea más destacado */
}

.dropdown-filters {
margin-top: 20px; /* Espacio adicional arriba de los dropdowns */
display: flex; /* Alinear horizontalmente los dropdowns */
flex-wrap: wrap; /* Permitir que se ajusten */
justify-content: center; /* Centrar los dropdowns */
gap: 50px; /* Espacio entre los dropdowns, ajusta según sea necesario */

}

.filters-container div {
    flex: 1; /* Hacer que cada filtro ocupe espacio igual */
    margin: 7px; /* Margen entre filtros */

}

select {
width: 240px; /* Ajusta el valor según lo necesites */
text-align: center; /* Centra el texto dentro del dropdown */
height: 40px; /* Ajusta la altura según sea necesario */
border-radius: 15px; /* Ajusta el valor para cambiar la redondez */
font-size: 16px;
}

label {
    
    display: block; /* Asegurar que el título esté encima del select */
    margin-bottom: 25px; /* Espaciado debajo del título */
    text-align: center; /* Centrar el texto del label */
    white-space: nowrap; 
    font-size: 15px;
    font-weight: bold; /* Opcional: hace que el texto sea más destacado */
}

table {
width: 80%; /* Hace que la tabla ocupe todo el ancho del contenedor */
border-collapse: collapse; /* Evita bordes duplicados */
margin: 20px auto; /* Centra la tabla */
margin: 40px auto; /* Solo margin-top de 40px, centrado */
}

th, td {
padding: 12px; /* Espacio interno */
text-align: left; /* Alineación del texto */
}

th {
background-color: #050031; /* Fondo de encabezados */
color: white; /* Texto de encabezados */
border-bottom: 2px solid white;
}

.divider {
    border: none;
border-left: 2px solid #ffffff;
height: 80px;
margin: 0 2px;

}

tbody tr:nth-child(even) {
background-color: #050031; /* Color para las filas pares */
}

tbody tr:nth-child(odd) {
background-color: #051349; /* Color para las filas impares */
}

select:hover
{
cursor: pointer; /* Cambia el cursor a un puntero */
/*background-color: #F3D669; /* Cambia el color de fondo al pasar el cursor */
color: #000000; /* Cambia el color del texto */
transition: background-color 0.3s, color 0.3s; /* Agrega una transición suave */
}

table tr:hover {
cursor: pointer; /* Cambia el cursor a un puntero */
/*background-color: #adad0a; /* Cambia el color de fondo al pasar el cursor */
color: #F3D669; /* Cambia el color del texto */
transition: background-color 0.3s, color 0.3s; /* Agrega una transición suave */
}

.ganador td {
font-weight: bold; /* Hacer el texto más grueso */
color: gold; /* Cambiar el color a dorado */
font-size: 1.2em; /* Aumentar el tamaño de la fuente, ajusta el valor según necesites */
}

/* Estilos del Modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo */
    z-index: 1; /* En la parte superior */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Altura completa */
    overflow: auto; /* Habilitar scroll si es necesario */
    background-color: rgb(0,0,0); /* Color de fondo negro */
    background-color: rgba(0,0,0,0.4); /* Fondo con opacidad */
    opacity: 0; /* Comienza invisible */
    transition: opacity 0.3s ease; /* Transición de opacidad */
}

.modal.show {
opacity: 1; /* Visible cuando se muestra */
}
.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 15% desde la parte superior y centrado */
    padding: 30px;
    border: 1px solid #888;
    width: 35%; /* Ancho del modal */
    color: black; /* Cambiar color de texto a negro */
    text-align: center; /* Centrar el texto */
    border-radius: 15px; /* Bordes redondeados */
    
}

.close {
    color: #3bb0ff;
    float: right;
    font-size: 57px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: rgb(0, 132, 255);
    text-decoration: none;
    cursor: pointer;
}

.modal-content h3 {
color: #23a7ff; /* Cambiar color del h3 a azul */
font-size: 25px;
}

.close-button {
background-color: #3bb0ff; /* Color celeste */
color: white; /* Color del texto */
padding: 12px 26px; /* Espaciado interno (más grande) */
border: none; /* Sin borde */
font-size: 18px; /* Tamaño de fuente (más grande) */
border-radius: 10px; /* Bordes redondeados */
cursor: pointer; /* Cambiar el cursor al pasar el ratón */
}

.close-button:hover {
background-color: rgb(0, 132, 255); /* Celeste más oscuro */
}

header {
background-color: var(--gris_fondo);
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
width: 90%;
margin: auto;
box-sizing: border-box;
}

.logo img {
width: 70px;
}

.nav_menu {
width: 100%;
margin: 0 2%;
max-width: 700px;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-grow: 1;
}

nav ul li {
margin: 0 10px;
}

nav ul li a {
color: #155A9F;
text-decoration: none;
padding: 8px 12px;
border: 1px solid transparent;
display: flex;
align-items: center;
}

nav ul li a:hover,
nav ul li a.active {
color: #F3D669;
border-radius: 10px;
text-decoration: underline #F3D669;
}

.header_right {
display: flex;
align-items: center;
}

.header_right .logo_usuario {
width: 20px;
margin-right: 10px;
}

.header_right span {
margin-right: 10px;
color: var(--amarillo);
}

footer {
background-color: #A3A3A3;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 20px 0; /* Ajusta el padding según sea necesario */
margin-top: 17%;
}

.footer_section.logo_section {
display: flex;
align-items: center;
justify-content: center;
}

.logo_footer {
margin-right: 20px;
width: 60px;
}

.logo_footer_social {
margin-right: 10px;
width: 40px;
}

.logo_footer_social:hover {
transform: scale(1.1);
}

.footer_text {
text-align: left;
font-size: 10px;
color: #1b1b1b; /* Cambiado a un gris más oscuro */
}

.footer_horario {
width: 70%;
text-align: left;
font-size: 10px;
margin: auto auto 10px;
color: #1e1e1e;
}

.texto_horario {
margin: 3px 0;
color: #212121;
}

.footer_section {
width: 100%;
flex: 1;
text-align: center;
margin: 0 70px;
}

.footer_section p {
color: #202020; /* Color de texto */
}

.footer_section.centro {
border-right: 1px solid #A3A3A3;
border-left: 1px solid #A3A3A3;
}

.div_calificacion {
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}