/* ==========================================================================
   ESTILOS PARA LA PÁGINA DE RANKING
   - Archivo: ranking.php
   ========================================================================== */

/* 1. ESTRUCTURA GENERAL DE LA PÁGINA
   -------------------------------------------------------------------------- */

/* Contenedor principal que centra el contenido en la página. */
.ranking-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
    /* Padding horizontal para que no se pegue a los bordes */
}

/* Cabecera con el título principal y la descripción. */
.ranking-header {
    text-align: center;
    margin-bottom: 3rem;
}

.ranking-header h1 {
    font-size: 2rem;
}

/* Párrafo de descripción general. */
.ranking-header p {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* Párrafo de descripción para escritorio (se oculta en móvil). */
.ranking-header .ranking-description-desktop {
    /* Visible por defecto */
}

/* Párrafo de descripción para móvil (oculto por defecto). */
.ranking-header .ranking-description-mobile {
    display: none;
}

/* Contenedor del layout de dos columnas (filtros y resultados). */
.ranking-layout {
    display: flex;
    align-items: flex-start;
    /* Alinea la parte superior de las columnas */
    gap: 2rem;
    /* Espacio entre la columna de filtros y la de resultados */
}

/* Columna izquierda: Controles de filtro. */
.ranking-controls {
    flex: 0 0 320px;
    /* Ancho fijo de 320px, no crece ni se encoge */
    position: sticky;
    /* Se mantiene fijo al hacer scroll */
    top: 100px;
    /* Distancia desde la parte superior (navbar + espacio) */
}

/* Columna derecha: Contenido de los resultados. */
.ranking-content {
    flex: 1;
    /* Ocupa el espacio restante */
    min-width: 0;
    /* Evita que el contenido se desborde en contenedores flex */
}


/* 2. COLUMNA IZQUIERDA: TARJETA DE FILTROS
   -------------------------------------------------------------------------- */

/* Estilo de la tarjeta que contiene los filtros. */
.ranking-filters {
    background-color: color-mix(in srgb, var(--card-color) 85%, var(--bg-color));
    /* Fondo ligeramente más oscuro */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    /* Apila los elementos de filtro verticalmente */
    gap: 1.5rem;
}

/* Texto "Cargando..." que aparece al solicitar datos. */
.loading-text {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}


/* 3. COLUMNA DERECHA: TARJETA DE RESULTADOS
   -------------------------------------------------------------------------- */

/* Estilo de la tarjeta que contiene la lista del ranking. */
.ranking-results-card {
    background-color: var(--card-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem 2rem;
}

/* Título dentro de la tarjeta de resultados (ej: "Ranking para: ..."). */
.ranking-results-card h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    font-size: 1.5rem;
    /* Ajustado para que no sea tan grande */
}

/* Parte dinámica del título (el nombre del bloque/tema) que se resalta. */
.ranking-results-card h2 #ranking-title {
    color: var(--accent-color);
}

/* Lista <ul> que contiene todas las filas del ranking. */
#ranking-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Apila las filas verticalmente */
    gap: 0.5rem;
}

/* Estilo para cada fila <li> de la lista del ranking. */
#ranking-list li {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    /* Define 3 columnas: Posición, Nombre, Puntuación */
    align-items: center;
    padding: 0.8rem 1rem;
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    border-left: 4px solid transparent;
    /* Borde izquierdo para resaltar la fila del usuario */
    transition: background-color var(--transition-fast);
}

/* Estilo para el mensaje de sin datos (rompe el grid) */
#ranking-list li.no-data-message {
    display: block;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

/* Estilo específico para la primera fila, que actúa como cabecera de la tabla. */
#ranking-list li:first-child {
    background-color: transparent;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    padding-bottom: 0.5rem;
}

/* Estilo especial para resaltar la fila del usuario que está viendo el ranking. */
#ranking-list li.usuario-actual {
    border-left-color: var(--accent-color);
    background-color: color-mix(in srgb, var(--accent-color) 15%, transparent);
    font-weight: 700;
}

/* Elementos individuales dentro de cada fila del ranking. */
.rank-pos {
    font-weight: 700;
}

.rank-score {
    font-size: 1.1rem;
    font-weight: 500;
}

.your-rank {
    font-style: italic;
    color: var(--accent-color);
    justify-self: end;
    font-size: 0.9rem;
}


/* 4. MENSAJES DE ESTADO (ERROR)
   -------------------------------------------------------------------------- */

/* Contenedor para mostrar mensajes de error, por ejemplo, si no se encuentran resultados. */
.error-message {
    color: var(--incorrect-color);
    background-color: color-mix(in srgb, var(--incorrect-color) 15%, transparent);
    border: 1px solid var(--incorrect-color);
    padding: 1rem;
    border-radius: var(--border-radius-md);
}


/* 5. DISEÑO RESPONSIVE (AJUSTES PARA MÓVILES Y TABLETS)
   -------------------------------------------------------------------------- */

/* Para pantallas de hasta 992px de ancho (tablets y móviles grandes). */
@media (max-width: 992px) {

    /* El layout de dos columnas se convierte en una sola columna. */
    .ranking-layout {
        flex-direction: column;
        /* Apila las columnas verticalmente */
    }

    /* La columna de filtros ahora ocupa todo el ancho y pierde su posición "pegajosa". */
    .ranking-controls {
        width: 100%;
        /* Ocupa todo el ancho */
        position: static;
        /* Elimina el 'sticky' en móvil */
        flex: 1;
    }

    .ranking-content {
        width: 100%;
        /* Asegura que ocupe todo el ancho en móvil */
    }
}

/* Para pantallas de hasta 768px de ancho (móviles). */
@media (max-width: 768px) {

    /* Reduce el padding lateral del contenedor principal. */
    .ranking-container {
        padding: 0 1rem;
    }

    /* Reduce el tamaño del título principal. */
    .ranking-header h1 {
        font-size: 1.4rem;
    }

    /* Oculta el texto de descripción largo (para escritorio). */
    .ranking-header .ranking-description-desktop {
        display: none;
    }

    /* Muestra el texto de descripción corto (para móvil) y ajusta su tamaño. */
    .ranking-header .ranking-description-mobile {
        display: block;
        font-size: 0.9rem;
        /* Ajuste para pantallas pequeñas */
    }

    /* Reduce el tamaño del título de la tarjeta de resultados. */
    .ranking-results-card h2 {
        font-size: 1.0rem;
    }

    /* Modifica la cabecera de la lista solo en móvil: cambia el color y reduce la fuente. */
    #ranking-list li:first-child {
        color: var(--accent-color);
        font-size: 0.8rem;
    }

    /* Ajusta el tamaño de los elementos de la lista del ranking en móvil. */
    #ranking-list li .rank-pos {
        font-size: 0.8rem;
    }

    #ranking-list li .rank-score {
        font-size: 0.8rem;
    }

    #ranking-list li .your-rank {
        font-size: 0.8rem;
    }

    /* Reduce el tamaño de las etiquetas de los filtros. */
    .ranking-filters .form-group label {
        font-size: 0.9rem;
    }

    /* Reduce el espacio entre los filtros en móvil. */
    .ranking-filters {
        gap: 0.9rem;
    }

    /* Reduce el tamaño de las cajas de selección y su texto en móvil. */
    .ranking-filters .form-group select {
        font-size: 0.9rem;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    /* Reduce el tamaño del botón y su texto. */
    #ver-ranking-btn {
        font-size: 0.9rem;
        padding: .7rem 1.2rem;
    }
}