/* =========================
   DASHBOARD
========================= */

.dashboard{

    width:100%;
}

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

.dashboard-hero{

    background:
        linear-gradient(
            135deg,
            rgba(15,23,42,.96),
            rgba(30,41,59,.88)
        );

    border:
        1px solid rgba(255,255,255,.05);

    border-radius:34px;

    padding:48px 50px;

    margin-bottom:34px;

    text-align:center;

    box-shadow:
        0 12px 32px rgba(0,0,0,.24);
}

.dashboard-hero h1{

    font-size:72px;

    line-height:1;

    margin-bottom:16px;

    color:#38ef7d;

    letter-spacing:-3px;
}

.dashboard-hero p{

    font-size:22px;

    color:#94a3b8;

    margin-bottom:30px;
}

/* =========================
   HERO BUTTON
========================= */

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:18px;

    background:#22c55e;

    color:#020617;

    font-size:18px;

    font-weight:800;

    transition:.25s;

    box-shadow:
        0 12px 28px rgba(34,197,94,.22);
}

.hero-btn:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 34px rgba(34,197,94,.30);
}

/* =========================
   STATS GRID
========================= */

.stats-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));

    gap:26px;

    margin-bottom:34px;
}

/* =========================
   STAT CARD
========================= */

.stat-card{

    background:
        rgba(15,23,42,.90);

    border:
        1px solid rgba(255,255,255,.05);

    border-radius:28px;

    padding:44px 24px;

    text-align:center;

    transition:.25s;

    box-shadow:
        0 10px 28px rgba(0,0,0,.18);
}

.stat-card:hover{

    transform:
        translateY(-5px);

    border:
        1px solid rgba(56,239,125,.12);
}

.stat-card h2{

    font-size:64px;

    color:#38ef7d;

    margin-bottom:12px;
}

.stat-card p{

    color:#cbd5e1;

    font-size:20px;
}

/* =========================
   RANKING BOX
========================= */

.ranking-box{

    background:
        rgba(15,23,42,.90);

    border:
        1px solid rgba(255,255,255,.05);

    border-radius:30px;

    padding:34px;

    box-shadow:
        0 10px 28px rgba(0,0,0,.18);
}

.ranking-box h2{

    font-size:54px;

    margin-bottom:28px;

    color:#38ef7d;

    letter-spacing:-2px;
}

/* =========================
   TABLA
========================= */

.tabla-ranking{

    width:100%;

    border-collapse:collapse;
}

.tabla-ranking thead th{

    padding:18px;

    text-align:left;

    color:#94a3b8;

    font-size:14px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.tabla-ranking tbody td{

    padding:22px 18px;

    font-size:17px;

    border-bottom:
        1px solid rgba(255,255,255,.04);
}

.tabla-ranking tbody tr{

    transition:.2s;
}

.tabla-ranking tbody tr:hover{

    background:
        rgba(255,255,255,.02);
}

/* =========================
   TOP POSITIONS
========================= */

.tabla-ranking tbody tr:nth-child(1) td:first-child{

    color:#facc15;

    font-weight:800;
}

.tabla-ranking tbody tr:nth-child(2) td:first-child{

    color:#cbd5e1;

    font-weight:800;
}

.tabla-ranking tbody tr:nth-child(3) td:first-child{

    color:#fb923c;

    font-weight:800;
}