/* --- IMPORTAR ESTILOS BASE --- */
@import url("Cuerpo.css");

/* --- PERSONALIZACIÓN DE RANKING --- */

.ranking-header-content {
    color: #F5F5F5;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 90%;
    max-width: 600px;
    text-align: center;
}

.ranking-contenedor {
    margin-top: 40px; /* Ya no necesita tanto margen porque el video es relative */
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    position: relative;
    color: #F5F5F5;
}

.title {
    font-size: clamp(32px, 8vw, 48px);
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 0 0 10px #00A859;
}

.text {
    font-size: clamp(14px, 4vw, 18px);
    margin-bottom: 40px;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px 20px;
    border-radius: 50px;
}

/* --- TABLA DE RANKING --- */

.tabla-ranking {
    width: 95%;
    max-width: 800px;
    background: rgba(18, 18, 18, 0.9);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 168, 89, 0.3);
    border: 1px solid rgba(245, 245, 245, 0.1);
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

thead {
    background: #00A859;
    color: #121212;
}

th {
    padding: 20px;
    font-size: 16px;
    text-transform: uppercase;
}

td {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(245, 245, 245, 0.05);
    font-size: 15px;
}

tr:hover {
    background: rgba(0, 168, 89, 0.1);
    transition: 0.3s ease;
}

/* Estilos para el Top 3 */

.top-1 {
    color: #FFD700; /* Oro */
    font-weight: bold;
    font-size: 18px;
    background: rgba(255, 215, 0, 0.05);
}

.top-2 {
    color: #C0C0C0; /* Plata */
    font-weight: bold;
}

.top-3 {
    color: #CD7F32; /* Bronce */
    font-weight: bold;
}

.top-1 i { color: #FFD700; }
.top-2 i { color: #C0C0C0; }
.top-3 i { color: #CD7F32; }

/* --- RESPONSIVIDAD --- */

@media (max-width: 768px) {
    .ranking-header-content {
        top: 50%;
    }

    .ranking-contenedor {
        margin-top: 20px;
    }

    th, td {
        padding: 12px 10px;
        font-size: 13px;
    }

    .top-1 { font-size: 15px; }
}

@media (max-width: 480px) {
    .ranking-header-content {
        top: 45%;
    }

    .ranking-contenedor {
        margin-top: 10px;
    }

    th:nth-child(4), td:nth-child(4) {
        display: none; /* Ocultar nivel en móviles muy pequeños */
    }

    .title {
        font-size: 28px;
    }
}