/* Asegura que el body ocupe toda la altura disponible */
html, body {
    height: 100%;
    margin: 0;
}

/* Contenedor principal */
.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: calc(100vh - 100px); /* Asegura que quede por debajo del navbar y por encima del footer */
    padding-top: 20px; /* Espacio superior */
}

/* Cuadro de los top usuarios */
.top-users-container {
    width: 400px;
    padding: 20px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Encabezado */
.top-users-container h1 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

/* Lista de usuarios */
.top-users-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-users-container li {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #555;
}

/* Destacar los primeros 3 usuarios */
.top-users-container li.top-1 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #d4af37; /* Color dorado */
}

.top-users-container li.top-2 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #c0c0c0; /* Color plateado */
}

.top-users-container li.top-3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #cd7f32; /* Color bronce */
}

span.nombre-usuario:hover {
    color: #0d3f71; /* Cambia el color al pasar el mouse */
    cursor: pointer;
}