/* =========================================================
   ALQUIFE LUDAOS
   CLASIFICACIÓN
   ESTILOS ESPECÍFICOS DE LA PÁGINA
========================================================= */


/* =========================================================
   VARIABLES LOCALES
========================================================= */

:root {

    --classification-bg: #0b0d0f;
    --classification-surface: #101417;
    --classification-surface-soft: #151a1e;
    --classification-border: #252a2e;

    --classification-text: #f1f3f4;
    --classification-text-soft: #aeb4b9;
    --classification-text-muted: #666d73;

    --classification-primary: #b7f34a;
    --classification-green: #b7f34a;
    --classification-red: #ef4444;
    --classification-gold: #d4a72c;

    --classification-green-soft:
        rgba(183, 243, 74, 0.10);

    --classification-red-soft:
        rgba(239, 68, 68, 0.10);

    --classification-gold-soft:
        rgba(212, 167, 44, 0.10);

    --classification-shadow:
        0 12px 40px rgba(0, 0, 0, 0.28);

    --classification-radius: 16px;
}


/* =========================================================
   PAGE BASE
========================================================= */

html {
    scroll-behavior: smooth;
}


/*
    Importante:
    No redefinimos body, .main, .sidebar, .topbar,
    .profile, etc.

    Esos elementos pertenecen al layout global
    y deben ser controlados por style.css.
*/


/* =========================================================
   CONTENT
========================================================= */

.content {

    max-width: 1380px;

    margin:
        0 auto;

    padding:
        42px 38px 70px;
}


/* =========================================================
   PAGE HERO
========================================================= */

.page-hero {

    display: flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        30px;
}


.eyebrow {

    display:
        inline-block;

    margin-bottom:
        8px;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    color:
        var(--classification-text-muted);
}


.page-hero h2 {

    margin:
        0;

    color:
        var(--classification-text);

    font-size:
        clamp(28px, 3vw, 40px);

    line-height:
        1.1;

    letter-spacing:
        -0.04em;
}


.page-hero p {

    margin:
        10px 0 0;

    color:
        var(--classification-text-soft);

    font-size:
        13px;
}


/* =========================================================
   HERO · JORNADA ACTUAL
========================================================= */

.hero-matchday {

    min-width:
        180px;

    padding:
        16px 18px;

    border:
        1px solid var(--classification-border);

    border-radius:
        15px;

    background:
        var(--classification-surface);

    box-shadow:
        var(--classification-shadow);
}


.hero-matchday span {

    display:
        block;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    color:
        var(--classification-text-muted);
}


.hero-matchday strong {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--classification-text);

    font-size:
        16px;
}


.hero-matchday small {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--classification-green);

    font-size:
        10px;
}


/* =========================================================
   PANELS
========================================================= */

.panel {

    background:
        var(--classification-surface);

    border:
        1px solid var(--classification-border);

    border-radius:
        var(--classification-radius);

    box-shadow:
        var(--classification-shadow);
}


.panel-header {

    padding:
        24px 26px 0;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;
}


.panel-eyebrow {

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    color:
        var(--classification-text-muted);
}


.panel-header h3 {

    margin:
        0;

    color:
        var(--classification-text);

    font-size:
        18px;

    letter-spacing:
        -0.02em;
}


.panel-description {

    margin:
        8px 26px 22px;

    color:
        var(--classification-text-soft);

    font-size:
        12px;

    line-height:
        1.6;
}


.ranking-status {

    padding:
        6px 9px;

    border-radius:
        8px;

    background:
        var(--classification-green-soft);

    color:
        var(--classification-green);

    font-size:
        9px;

    font-weight:
        700;
}


/* =========================================================
   GENERAL RANKING
========================================================= */

.general-ranking-panel {

    overflow:
        hidden;

    margin-bottom:
        24px;
}


.general-ranking {

    width:
        100%;
}


/* =========================================================
   RANKING HEADER
========================================================= */

.ranking-header {

    display:
        grid;

    grid-template-columns:
        58px minmax(180px, 1fr) 130px 130px 130px;

    padding:
        13px 26px;

    background:
        var(--classification-surface-soft);

    border-top:
        1px solid var(--classification-border);

    border-bottom:
        1px solid var(--classification-border);
}


.ranking-header span {

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    color:
        var(--classification-text-muted);
}


/* =========================================================
   RANKING ROW
========================================================= */

.ranking-row {

    display:
        grid;

    grid-template-columns:
        58px minmax(180px, 1fr) 130px 130px 130px;

    align-items:
        center;

    min-height:
        72px;

    padding:
        0 26px;

    border-top:
        1px solid var(--classification-border);

    transition:
        background 0.2s ease;
}


.ranking-row:hover {

    background:
        rgba(255, 255, 255, 0.025);
}


/* =========================================================
   POSITION
========================================================= */

.ranking-position {

    font-size:
        15px;

    font-weight:
        800;

    color:
        var(--classification-text-muted);
}


.ranking-position.first {

    color:
        var(--classification-gold);
}


.ranking-position.second {

    color:
        #7b8794;
}


.ranking-position.third {

    color:
        #b7793f;
}


/* =========================================================
   PLAYER
========================================================= */

.ranking-player {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.ranking-avatar {

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        50%;

    background:
        #22282d;

    color:
        #c9ced2;

    font-size:
        12px;

    font-weight:
        800;
}


.ranking-avatar img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.ranking-player-info {

    min-width:
        0;
}


.ranking-player-info strong {

    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--classification-text);

    font-size:
        13px;
}


.ranking-player-info span {

    display:
        block;

    margin-top:
        3px;

    font-size:
        9px;

    color:
        var(--classification-text-muted);
}


/* =========================================================
   POINTS
========================================================= */

.ranking-points {

    color:
        var(--classification-text);

    font-size:
        14px;

    font-weight:
        800;
}


.ranking-last-points {

    font-size:
        12px;

    font-weight:
        700;
}


.ranking-last-points.positive {

    color:
        var(--classification-green);
}


.ranking-last-points.negative {

    color:
        var(--classification-red);
}


/* =========================================================
   POSITION CHANGE
========================================================= */

.ranking-change {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    font-size:
        11px;

    font-weight:
        700;
}


.ranking-change.up {

    color:
        var(--classification-green);
}


.ranking-change.down {

    color:
        var(--classification-red);
}


.ranking-change.same {

    color:
        var(--classification-text-muted);
}


/* =========================================================
   CURRENT PLAYER
========================================================= */

.current-player {

    background:
        rgba(183, 243, 74, 0.035);
}


.current-player .ranking-player-info strong,
.current-player .matchday-player strong {

    font-weight:
        800;
}


/* =========================================================
   CURRENT MATCHDAY
========================================================= */

.matchday-ranking-panel {

    margin-bottom:
        24px;

    overflow:
        hidden;
}


.matchday-ranking {

    overflow:
        hidden;
}


.matchday-row {

    display:
        grid;

    grid-template-columns:
        58px minmax(180px, 1fr) 130px 130px;

    align-items:
        center;

    min-height:
        66px;

    padding:
        0 26px;

    border-top:
        1px solid var(--classification-border);
}


.matchday-position {

    font-size:
        14px;

    font-weight:
        800;

    color:
        var(--classification-text-muted);
}


.matchday-points {

    color:
        var(--classification-text);

    font-size:
        14px;

    font-weight:
        800;
}


.matchday-penalty {

    font-size:
        11px;

    font-weight:
        700;
}


.matchday-penalty.pays {

    color:
        var(--classification-red);
}


.matchday-penalty.none {

    color:
        var(--classification-text-muted);
}


/* =========================================================
   EVOLUTION
========================================================= */

.evolution-panel {

    margin-bottom:
        24px;

    overflow:
        hidden;
}


.chart-wrapper {

    padding:
        0 26px 20px;
}


.chart-container {

    position:
        relative;

    width:
        100%;

    min-height:
        390px;

    border:
        1px solid var(--classification-border);

    border-radius:
        14px;

    background:
        var(--classification-bg);

    overflow:
        hidden;
}


.chart-container canvas {

    display:
        block;

    width:
        100%;

    height:
        390px;
}


.chart-legend {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px 18px;

    padding:
        0 26px 25px;
}


.chart-legend-item {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    font-size:
        10px;

    font-weight:
        600;

    color:
        var(--classification-text-soft);
}


.chart-legend-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;
}


/* =========================================================
   HALL OF FAME / SHAME
========================================================= */

.records-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        24px;
}


.hall-panel {

    overflow:
        hidden;
}


.records-list {

    padding:
        18px 26px 26px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.record {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        58px;

    padding:
        10px 12px;

    border:
        1px solid var(--classification-border);

    border-radius:
        12px;

    background:
        var(--classification-surface-soft);
}


.record-icon {

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        #22282d;

    font-size:
        15px;
}


.record-info {

    min-width:
        0;

    flex:
        1;
}


.record-info strong {

    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--classification-text);

    font-size:
        11px;
}


.record-info span {

    display:
        block;

    margin-top:
        3px;

    font-size:
        9px;

    color:
        var(--classification-text-muted);
}


.record-value {

    flex:
        0 0 auto;

    text-align:
        right;

    color:
        var(--classification-text);

    font-size:
        11px;

    font-weight:
        800;
}


/* =========================================================
   LOADING / EMPTY / ERROR
========================================================= */

.ranking-loading {

    min-height:
        100px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    color:
        var(--classification-text-muted);

    font-size:
        12px;
}


.ranking-empty {

    padding:
        45px 25px;

    text-align:
        center;

    color:
        var(--classification-text-muted);

    font-size:
        12px;
}


.ranking-error {

    padding:
        30px;

    text-align:
        center;

    color:
        var(--classification-red);

    font-size:
        12px;
}


/* =========================================================
   PLAYER SELECTOR
========================================================= */

.player-selector {

    position:
        fixed;

    inset:
        0;

    z-index:
        1000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px;

    background:
        rgba(11, 13, 15, 0.97);
}


.player-selector.hidden {

    display:
        none;
}


.player-selector-content {

    width:
        min(720px, 100%);

    padding:
        45px;

    background:
        var(--classification-surface);

    border:
        1px solid var(--classification-border);

    border-radius:
        24px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55);

    text-align:
        center;
}


/* =========================================================
   SELECTOR BRAND
========================================================= */

.selector-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--classification-text);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.selector-brand-icon {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        var(--classification-primary);

    color:
        #111;
}


.selector-eyebrow {

    margin:
        28px 0 8px;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    color:
        var(--classification-text-muted);
}


.player-selector h1 {

    margin:
        0;

    color:
        var(--classification-text);

    font-size:
        30px;

    letter-spacing:
        -0.04em;
}


.selector-subtitle {

    margin:
        9px 0 28px;

    color:
        var(--classification-text-soft);

    font-size:
        12px;
}


/* =========================================================
   PLAYER GRID
========================================================= */

.player-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        10px;
}


.player-card {

    padding:
        16px 10px;

    border:
        1px solid var(--classification-border);

    border-radius:
        13px;

    background:
        var(--classification-surface-soft);

    color:
        var(--classification-text);

    cursor:
        pointer;

    transition:
        0.2s ease;
}


.player-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #3a4248;

    background:
        #1b2024;
}


.player-card-avatar {

    width:
        42px;

    height:
        42px;

    margin:
        0 auto 9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        50%;

    background:
        #22282d;

    color:
        #c9ced2;

    font-size:
        12px;

    font-weight:
        800;
}


.player-card-avatar img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.player-card-info {

    min-width:
        0;
}


.player-card strong {

    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        10px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .content {

        padding:
            32px 25px 60px;
    }


    .ranking-row,
    .ranking-header {

        grid-template-columns:
            45px minmax(160px, 1fr) 100px 100px 90px;

        padding-left:
            20px;

        padding-right:
            20px;
    }

}


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 900px) {

    .records-grid {

        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .content {

        padding:
            25px 15px 50px;
    }


    /* -----------------------------------------------
       HERO
    ------------------------------------------------ */

    .page-hero {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            18px;

        margin-bottom:
            22px;
    }


    .page-hero h2 {

        font-size:
            30px;
    }


    .hero-matchday {

        width:
            100%;
    }


    /* -----------------------------------------------
       PANELS
    ------------------------------------------------ */

    .panel-header {

        padding:
            20px 18px 0;
    }


    .panel-description {

        margin:
            7px 18px 18px;
    }


    /* -----------------------------------------------
       GENERAL RANKING
    ------------------------------------------------ */

    .general-ranking-panel {

        overflow-x:
            auto;
    }


    .ranking-header {

        display:
            none;
    }


    .ranking-row {

        grid-template-columns:
            38px minmax(145px, 1fr) 65px;

        min-width:
            330px;

        padding:
            0 18px;

        gap:
            5px;
    }


    .ranking-row > .ranking-last-points,
    .ranking-row > .ranking-change {

        display:
            none;
    }


    .ranking-points {

        text-align:
            right;
    }


    /* -----------------------------------------------
       MATCHDAY
    ------------------------------------------------ */

    .matchday-ranking-panel {

        overflow-x:
            auto;
    }


    .matchday-row {

        grid-template-columns:
            38px minmax(145px, 1fr) 65px 65px;

        min-width:
            330px;

        padding:
            0 18px;
    }


    /* -----------------------------------------------
       CHART
    ------------------------------------------------ */

    .chart-wrapper {

        padding:
            0 15px 15px;

        overflow-x:
            auto;
    }


    .chart-container {

        min-width:
            600px;

        min-height:
            330px;
    }


    .chart-container canvas {

        height:
            330px;
    }


    .chart-legend {

        padding:
            0 18px 20px;
    }


    /* -----------------------------------------------
       RECORDS
    ------------------------------------------------ */

    .records-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .records-list {

        padding:
            15px 18px 20px;
    }


    /* -----------------------------------------------
       PLAYER SELECTOR
    ------------------------------------------------ */

    .player-selector {

        padding:
            15px;
    }


    .player-selector-content {

        padding:
            30px 18px;

        border-radius:
            20px;
    }


    .player-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .content {

        padding-left:
            11px;

        padding-right:
            11px;
    }


    .page-hero h2 {

        font-size:
            27px;
    }


    .panel {

        border-radius:
            15px;
    }

}