:root {
    --bg0: #0b1220;
    --bg1: #0f1a2b;
    --card: #0f1b2e;
    --text: #e7eefc;
    --muted: #a8b6d6;
    --border: rgba(231,238,252,.10);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 16px;
    --accent: #4aa3ff;
    --accent2: #7c5cff;
    --ok: #2dd4bf;
    --warn: #fbbf24;
    --bad: #fb7185;
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    color: var(--text);
    background: radial-gradient(1200px 700px at 20% 0%, rgba(74,163,255,.18), transparent 60%), radial-gradient(900px 600px at 80% 10%, rgba(124,92,255,.14), transparent 55%), linear-gradient(180deg, var(--bg0), var(--bg1));
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

a {
    color: inherit;
    text-decoration: none
}

.container-xl {
    max-width: 1180px
}

/* Navbar */
.navbar-pro {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(11,18,32,.72);
    border-bottom: 1px solid var(--border);
}

    .navbar-pro .brand {
        font-weight: 900;
        letter-spacing: .3px;
        display: flex;
        align-items: center;
        gap: .6rem;
    }

.badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow: 0 0 0 4px rgba(74,163,255,.12);
}

.nav-link-pro {
    color: var(--muted);
    padding: .55rem .8rem;
    border-radius: 999px;
    font-weight: 700;
}

    .nav-link-pro:hover {
        color: var(--text);
        background: rgba(231,238,252,.06)
    }

    .nav-link-pro.active {
        color: var(--text);
        background: rgba(74,163,255,.16);
        border: 1px solid rgba(74,163,255,.25)
    }

/* Hero */
.hero {
    border-radius: 22px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    background: radial-gradient(800px 500px at 20% 20%, rgba(74,163,255,.22), transparent 60%), radial-gradient(700px 500px at 80% 0%, rgba(124,92,255,.18), transparent 55%), rgba(15,27,46,.80);
}

.hero-inner {
    padding: 16px 16px 14px;
}

.hero-title {
    font-weight: 950;
    letter-spacing: .2px;
    margin: 0;
    font-size: 1.28rem
}

.hero-sub {
    margin-top: 6px;
    color: var(--muted);
    font-weight: 700;
    line-height: 1.25
}

.hero .chip {
    margin-top: 10px
}

/* Chips */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(231,238,252,.05);
    color: var(--muted);
    font-weight: 700;
}

/* Cards */
.card-pro {
    background: linear-gradient(180deg, rgba(18,33,58,.95), rgba(15,27,46,.95));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.section-title {
    font-weight: 950;
    margin: 0;
    font-size: 1.08rem;
    letter-spacing: .15px;
}

.hr-soft {
    border-color: rgba(231,238,252,.10);
    opacity: 1;
}

/* Buttons */
.btn-pro {
    border-radius: 999px;
    font-weight: 850;
    border: 1px solid rgba(74,163,255,.35);
    background: rgba(74,163,255,.18);
    color: var(--text);
    padding: .55rem .9rem;
}

    .btn-pro:hover {
        background: rgba(74,163,255,.26)
    }

.btn-pro-ghost {
    border-radius: 999px;
    font-weight: 850;
    border: 1px solid rgba(231,238,252,.16);
    background: rgba(231,238,252,.06);
    color: var(--text);
    padding: .55rem .9rem;
}

    .btn-pro-ghost:hover {
        background: rgba(231,238,252,.10)
    }

/* Page head */
.page-head {
    padding: 6px 2px 0;
}

.page-title {
    font-weight: 950;
    margin: 0;
    letter-spacing: .2px;
    font-size: 1.35rem;
}

.page-sub {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}

/* Badges */
.badge-cat {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .45rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(231,238,252,.12);
    background: rgba(231,238,252,.06);
    color: var(--muted);
    font-weight: 800;
    font-size: .82rem;
}

/* Match card (used across pages) */
.match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(11,18,32,.22);
    transition: transform .08s ease, background .12s ease;
}

    .match:hover {
        transform: translateY(-1px);
        background: rgba(11,18,32,.30);
    }

    .match .left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .match .title {
        font-weight: 950;
        letter-spacing: .1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .match .meta {
        color: var(--muted);
        font-weight: 750;
        font-size: .9rem;
        margin-top: 2px;
    }

/* Pills */
.pill {
    min-width: 64px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    letter-spacing: .2px;
    border: 1px solid rgba(231,238,252,.12);
    background: rgba(231,238,252,.06);
}

    .pill.ok {
        border-color: rgba(45,212,191,.35);
        background: rgba(45,212,191,.12);
    }

    .pill.warn {
        border-color: rgba(251,191,36,.35);
        background: rgba(251,191,36,.12);
    }

    .pill.bad {
        border-color: rgba(251,113,133,.35);
        background: rgba(251,113,133,.12);
    }

/* KPIs */
.kpi {
    border-radius: 16px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(11,18,32,.22);
    padding: 12px 12px;
}

    .kpi .label {
        color: var(--muted);
        font-weight: 850;
        font-size: .9rem;
    }

    .kpi .value {
        font-weight: 950;
        font-size: 1.55rem;
        line-height: 1.1;
        margin-top: 4px;
    }

    .kpi .hint {
        color: rgba(168,182,214,.95);
        font-weight: 800;
        font-size: .9rem;
        margin-top: 4px;
    }

/* Chips (buttons) helper */
.chips {
    display: flex;
    gap: 10px;
    overflow: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

.chip-btn {
    border: 1px solid rgba(231,238,252,.12);
    background: rgba(231,238,252,.06);
    color: var(--muted);
    border-radius: 999px;
    padding: .5rem .85rem;
    font-weight: 900;
    white-space: nowrap;
}

    .chip-btn.active {
        color: var(--text);
        background: rgba(74,163,255,.18);
        border-color: rgba(74,163,255,.28);
    }

/* Muted */
.muted {
    color: var(--muted);
}

.small {
    font-size: .9rem
}

/* Bottom nav (mobile) */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    border-top: 1px solid rgba(231,238,252,.10);
    background: rgba(11,18,32,.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .bottom-nav .wrap {
        max-width: 1180px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(5,1fr);
        padding: 8px 10px;
        gap: 6px;
    }

.bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 6px;
    border-radius: 14px;
    color: rgba(168,182,214,.92);
    font-weight: 850;
}

    .bn-item .ico {
        font-size: 1.15rem;
        line-height: 1;
    }

    .bn-item .txt {
        font-size: .72rem;
    }

    .bn-item.active {
        color: var(--text);
        background: rgba(74,163,255,.18);
        border: 1px solid rgba(74,163,255,.22);
    }

/* Safe bottom padding */
.safe-bottom {
    padding-bottom: 86px;
}

@media (min-width: 992px) {
    .bottom-nav {
        display: none;
    }

    .safe-bottom {
        padding-bottom: 24px;
    }
}

/* ===== Overlay Spinner (shared) ===== */
#overlaySpinner {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(2,6,23,.58);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
}

    #overlaySpinner.d-none {
        display: none !important;
    }

    #overlaySpinner .ol-overlay-card {
        width: min(420px, 92vw);
        border-radius: 18px;
        border: 1px solid rgba(148,163,184,.18);
        background: rgba(15,23,42,.72);
        box-shadow: 0 18px 54px rgba(0,0,0,.35);
        padding: 18px 18px 16px;
        display: flex;
        gap: 14px;
        align-items: center;
    }

    #overlaySpinner .spinner-border {
        width: 2.15rem;
        height: 2.15rem;
        border-width: .22rem;
        opacity: .95;
    }

    #overlaySpinner .ol-overlay-txt .t {
        font-weight: 950;
        letter-spacing: .2px;
    }

    #overlaySpinner .ol-overlay-txt .s {
        color: rgba(148,163,184,.9);
        font-weight: 800;
        margin-top: 2px;
        font-size: .92rem;
    }

/* =========================================================
   GLOBAL BACKGROUND OVERLAY (shared)
   ========================================================= */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('ChatGPT Image 7 jul 2025, 03_29_05 p.m..png') center/cover no-repeat fixed;
    opacity: .07;
    pointer-events: none;
    filter: blur(1px) saturate(1.02) contrast(1.03);
    transform: scale(1.03);
}

/* Shared muted helper (Partidos reference) */
.text-muted-ol {
    color: var(--muted) !important;
}

/* Shared page wrapper (keeps content comfortably away from edges) */
.page-wrap {
    max-width: 980px;
    margin: 0 auto;
}

/* Partidos uses a slightly stronger subtitle weight */
.page-sub {
    font-weight: 800;
}

/* =========================================================
   SELECTS — same visual language as Partidos
   ========================================================= */
.select-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(231,238,252,.12);
    background: rgba(11,18,32,.35);
}

    .select-pill i {
        opacity: .9;
    }

.ol-select {
    background: transparent !important;
    border: 0 !important;
    color: rgba(231,238,252,.92) !important;
    font-weight: 900;
    padding-left: 0 !important;
}

    .ol-select:focus {
        box-shadow: none !important;
    }

    .ol-select option {
        background-color: #0b1220 !important;
        color: #e5e7eb !important;
    }

/* =========================================================
   OVERLAY — support BOTH ids (#overlaySpinner, #loadingOverlay) and .ol-overlay
   ========================================================= */
.ol-overlay,
#loadingOverlay,
#overlaySpinner {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(2,6,23,.58);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
}

    .ol-overlay.d-none,
    #loadingOverlay.d-none,
    #overlaySpinner.d-none {
        display: none !important;
    }

    .ol-overlay .ol-overlay-card,
    #loadingOverlay .ol-overlay-card,
    #overlaySpinner .ol-overlay-card {
        width: min(420px, 92vw);
        border-radius: 18px;
        border: 1px solid rgba(148,163,184,.18);
        background: rgba(15,23,42,.72);
        box-shadow: 0 18px 54px rgba(0,0,0,.35);
        padding: 18px 18px 16px;
        display: flex;
        gap: 14px;
        align-items: center;
    }

    .ol-overlay .spinner-border,
    #loadingOverlay .spinner-border,
    #overlaySpinner .spinner-border {
        width: 2.15rem;
        height: 2.15rem;
        border-width: .22rem;
        opacity: .95;
    }

    .ol-overlay .ol-overlay-txt .t,
    #loadingOverlay .ol-overlay-txt .t,
    #overlaySpinner .ol-overlay-txt .t {
        font-weight: 950;
        letter-spacing: .2px;
    }

    .ol-overlay .ol-overlay-txt .s,
    #loadingOverlay .ol-overlay-txt .s,
    #overlaySpinner .ol-overlay-txt .s {
        color: rgba(148,163,184,.9);
        font-weight: 800;
        margin-top: 2px;
        font-size: .92rem;
    }

/* =========================================================
   RACHA (últimos 5)
   ========================================================= */
.streak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(231,238,252,.04);
    font-weight: 950;
    letter-spacing: .3px;
}

    .streak.w {
        border-color: rgba(45,212,191,.35);
        background: rgba(45,212,191,.10);
    }

    .streak.d {
        border-color: rgba(251,191,36,.35);
        background: rgba(251,191,36,.10);
    }

    .streak.l {
        border-color: rgba(251,113,133,.35);
        background: rgba(251,113,133,.10);
    }



/* =========================================================
   INICIO — "Últimos partidos" con más color (accent por resultado)
   ========================================================= */
.match.match-w {
    border-left: 4px solid rgba(45,212,191,.85);
}

.match.match-d {
    border-left: 4px solid rgba(251,191,36,.85);
}

.match.match-l {
    border-left: 4px solid rgba(251,113,133,.85);
}

.match.match-w:hover {
    box-shadow: 0 14px 34px rgba(45,212,191,.10);
}

.match.match-d:hover {
    box-shadow: 0 14px 34px rgba(251,191,36,.10);
}

.match.match-l:hover {
    box-shadow: 0 14px 34px rgba(251,113,133,.10);
}

/* =========================================================
   INICIO — Temporada (tops mini)
   ========================================================= */
.season-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .season-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.season-box {
    border-radius: 16px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(11,18,32,.22);
    padding: 12px 12px;
}

    .season-box .h {
        font-weight: 950;
        letter-spacing: .12px;
        margin-bottom: 8px;
    }

.season-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .season-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-weight: 850;
    }

    .season-list .n {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .season-list .v {
        color: rgba(231,238,252,.92);
        opacity: .92;
        font-weight: 950;
    }