/* Partidos — Redesign desde 0 (alineado a Estadísticas)
   - Fondo estándar: solo body::before
   - Sin modal: detalle es una sección full-screen (mobile-first)
*/

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);
}

.text-muted-ol {
    color: var(--muted) !important;
}

.page-sub {
    font-weight: 800;
}

/* Filters */
.filters-card {
    background: rgba(15,27,46,.72);
    border: 1px solid rgba(231,238,252,.10);
    box-shadow: 0 10px 24px rgba(0,0,0,.20);
    border-radius: 18px;
    padding: 12px;
}


/* Filters layout (desktop): search + selects en 2 columnas (el HTML tiene fg-search/fg-selects fuera de filters-grid) */
.filters-card {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    grid-template-areas:
        "search selects";
    gap: 10px;
}

    .filters-card .fg-search {
        grid-area: search;
    }

    .filters-card .fg-selects {
        grid-area: selects;
        align-content: start;
    }

@media (max-width: 991px) {
    .filters-card {
        display: block;
    }
}

/* (fix) había un cierre de llave suelto que podía cortar el parseo del CSS */

.search-pro {
    position: relative;
}

    .search-pro i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        opacity: .85;
    }

.ol-input {
    padding-left: 44px !important;
    border-radius: 16px !important;
    background: rgba(231,238,252,.06) !important;
    border: 1px solid rgba(231,238,252,.14) !important;
    color: rgba(231,238,252,.92) !important;
    font-weight: 850;
}

    .ol-input::placeholder {
        color: rgba(168,182,214,.78) !important;
    }

    .ol-input:focus {
        border-color: rgba(74,163,255,.55) !important;
        box-shadow: 0 0 0 4px rgba(74,163,255,.16) !important;
    }

.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;
    }

.filters-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.kpi-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .kpi-strip .k {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid rgba(231,238,252,.10);
        background: rgba(231,238,252,.03);
    }

    .kpi-strip .l {
        color: rgba(148,163,184,.92);
        font-weight: 900;
        font-size: .8rem;
        letter-spacing: .3px;
        text-transform: uppercase;
    }

    .kpi-strip .v {
        font-weight: 950;
        letter-spacing: .2px;
    }


.filters-grid {
    display: grid;
    grid-template-columns: 1.3fr .9fr;
    gap: 10px;
    align-items: center;
}

.fg-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 991px) {
    .filters-grid {
        grid-template-columns: 1fr;
    }

    .fg-selects {
        grid-template-columns: 1fr;
    }
}

/* Match list */
.match-list {
    display: grid;
    gap: 12px;
}

.match-card {
    border-radius: 18px;
    border: 1px solid rgba(231,238,252,.10);
    background: linear-gradient(180deg, rgba(18,33,58,.86), rgba(15,27,46,.90));
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    overflow: hidden;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}

    .match-card:hover {
        transform: translateY(-2px);
        border-color: rgba(74,163,255,.30);
    }

.mc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.mc-date {
    width: 64px;
    flex: 0 0 auto;
    text-align: center;
    border-radius: 14px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(231,238,252,.03);
    padding: 10px 8px;
}

    .mc-date .d {
        font-weight: 950;
        font-size: 1.25rem;
        line-height: 1;
    }

    .mc-date .m {
        color: rgba(148,163,184,.92);
        font-weight: 900;
        font-size: .8rem;
        margin-top: 2px;
        text-transform: uppercase;
    }

.mc-main {
    min-width: 0;
    flex: 1;
}

.mc-title {
    font-weight: 950;
    margin: 0;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-sub {
    color: rgba(148,163,184,.92);
    font-weight: 800;
    margin-top: 4px;
    font-size: .92rem;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mc-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.mc-score {
    font-weight: 950;
    font-size: 1.25rem;
    letter-spacing: .3px;
}

.mc-pill {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(231,238,252,.12);
    background: rgba(231,238,252,.03);
    font-weight: 950;
    white-space: nowrap;
}

    .mc-pill.ok {
        color: var(--ok);
    }

    .mc-pill.warn {
        color: var(--warn);
    }

    .mc-pill.bad {
        color: var(--bad);
    }

.mc-foot {
    padding: 0 14px 14px 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(231,238,252,.02);
    color: rgba(231,238,252,.86);
    font-weight: 900;
    font-size: .86rem;
}

    .mc-chip i {
        opacity: .9;
    }

/* Detail view */
.detail-hero {
    border-radius: 20px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(15,27,46,.72);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    padding: 12px 12px 10px;
    margin-bottom: 12px;
}

.detail-head {
    /* Base (desktop-first). Mobile overrides below */
    border-radius: 16px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(12,22,44,.45);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    padding: 12px 14px;
}

    /* Top row: back + score */
    .detail-head .dh-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .detail-head .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid rgba(231,238,252,.12);
        background: rgba(255,255,255,.04);
        color: rgba(231,238,252,.95);
        font-weight: 900;
        text-decoration: none !important;
    }

        .detail-head .back-link:hover {
            background: rgba(255,255,255,.07);
        }

    .detail-head .dh-score {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 54px;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid rgba(231,238,252,.12);
        background: rgba(255,255,255,.05);
    }

        .detail-head .dh-score .score {
            font-weight: 950;
            letter-spacing: .6px;
            font-size: 20px;
            color: rgba(255,255,255,.94);
        }

        .detail-head .dh-score.is-empty {
            display: none !important;
        }

    /* Main info (desktop): two columns of compact "rows" */
    .detail-head .dh-sub {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .detail-head .dh-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(231,238,252,.10);
        background: rgba(255,255,255,.03);
    }

        .detail-head .dh-row .k {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255,255,255,.70);
            font-weight: 800;
            font-size: 13px;
            white-space: nowrap;
        }

            .detail-head .dh-row .k i {
                opacity: .95;
            }

        .detail-head .dh-row .v {
            font-weight: 900;
            font-size: 13px;
            color: rgba(255,255,255,.93);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 62%;
            text-align: right;
        }

    /* Chips (desktop): right aligned and compact */
    .detail-head .detail-chips {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
    }

/* Safety: si quedara algún dScore viejo, nunca mostrarlo */
#dScore {
    display: none !important;
}


.detail-chips {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

    .detail-chips::-webkit-scrollbar {
        height: 0;
    }

@media (min-width: 992px) {
    .detail-chips {
        flex-wrap: wrap;
        overflow: visible;
    }
}

.detail-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.detail-card {
    border-radius: 18px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(15,27,46,.72);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    padding: 14px;
}


.detail-card-wide {
    grid-column: 1 / -1;
}

.dh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

@media (min-width: 431px) {
    .detail-v2 .dv2-top {
        padding-left: 170px;
    }
}


.dh .t {
    font-weight: 950;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dh .meta {
    color: rgba(148,163,184,.92);
    font-weight: 900;
}

.d-list {
    display: grid;
    gap: 10px;
}

.d-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(231,238,252,.08);
    background: rgba(231,238,252,.02);
    border-radius: 14px;
    padding: 10px 12px;
}

    .d-row .l {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .d-row .name {
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .d-row .pill {
        border-radius: 999px;
        border: 1px solid rgba(231,238,252,.12);
        background: rgba(231,238,252,.03);
        padding: 6px 10px;
        font-weight: 950;
        white-space: nowrap;
    }

.d-empty {
    color: rgba(148,163,184,.92);
    font-weight: 850;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px dashed rgba(231,238,252,.14);
    border-radius: 14px;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    border: 1px solid rgba(231,238,252,.10);
    overflow: hidden;
    background: rgba(231,238,252,.04);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

    .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .avatar .fallback {
        font-size: 22px;
        opacity: .85;
    }

/* Overlay spinner */
.ol-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(2,6,23,.58);
    backdrop-filter: blur(6px);
    z-index: 1090;
}

    .ol-overlay.d-none {
        display: none !important;
    }

.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-card .spinner-border {
        width: 2.15rem;
        height: 2.15rem;
        border-width: .22rem;
    }

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

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


/* Month header */
.month-head {
    color: rgba(148,163,184,.92);
    font-weight: 950;
    letter-spacing: .28px;
    text-transform: uppercase;
    font-size: .82rem;
    margin: 10px 6px -2px;
}

/* Mobile tightening: avoid horizontal scroll */
.mc-row {
    flex-wrap: wrap;
}

@media (max-width: 420px) {
    .mc-date {
        width: 58px;
        padding: 9px 7px;
    }

    .mc-main {
        width: calc(100% - 76px);
    }

    .mc-title {
        white-space: normal;
    }

    .mc-right {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        gap: 10px;
        padding-left: 76px;
    }

    .mc-foot {
        padding-top: 2px;
    }
}



/* =========================
   V3 polish — compact cards, month separators, search icon, detail order
   (Overrides only; keeps base style in place)
   ========================= */

.search-pro {
    position: relative;
}

    .search-pro i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        opacity: .92;
        pointer-events: none;
        z-index: 2;
    }

.ol-input {
    padding-left: 44px !important;
    line-height: 1.15;
}

/* Month header */
.month-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 2px 6px;
    color: rgba(231,238,252,.88);
    font-weight: 950;
    letter-spacing: .32px;
    text-transform: uppercase;
    font-size: .78rem;
}

    .month-head::before {
        content: "";
        height: 1px;
        flex: 1 1 auto;
        background: linear-gradient(90deg, rgba(74,163,255,.00), rgba(74,163,255,.40), rgba(74,163,255,.00));
        opacity: .75;
    }

    .month-head span {
        padding: 7px 10px;
        border-radius: 999px;
        border: 1px solid rgba(231,238,252,.10);
        background: rgba(15,27,46,.62);
        box-shadow: 0 10px 24px rgba(0,0,0,.14);
    }

/* Match card — more compact */
.match-card {
    border-radius: 16px;
    border: 1px solid rgba(231,238,252,.10);
    background: linear-gradient(180deg, rgba(18,33,58,.78), rgba(15,27,46,.86));
    box-shadow: 0 10px 24px rgba(0,0,0,.14);
    overflow: hidden;
}

.mc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
}

.mc-date {
    width: 60px;
    flex: 0 0 auto;
    text-align: center;
    border-radius: 14px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(231,238,252,.03);
    padding: 9px 7px;
}

.mc-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.mc-score {
    font-weight: 950;
    font-size: 1.05rem;
    letter-spacing: .4px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(231,238,252,.12);
    background: rgba(231,238,252,.04);
    min-width: 74px;
    text-align: center;
}

.mc-foot {
    padding: 0 12px 12px 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Mobile: no horizontal scroll */
.mc-row {
    flex-wrap: wrap;
}

@media (max-width: 420px) {
    .mc-main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mc-right {
        width: 100%;
        justify-content: flex-end;
    }

    .mc-score {
        min-width: 68px;
    }

    .mc-title {
        white-space: normal;
    }
}

/* Detail order: mobile is DOM (Resumen, XI, Goles, Cambios, Rojas)
   Desktop should read: Resumen / Goles / XI / Cambios / Rojas (2 columns)
*/
#dResumen {
    grid-area: resumen;
}

#dXI {
    grid-area: xi;
}

#dGoles {
    grid-area: goles;
}

#dCambios {
    grid-area: cambios;
}

#dDisciplina {
    grid-area: rojas;
}

@media (min-width: 992px) {
    .detail-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "resumen goles"
            "xi cambios"
            "rojas rojas";
    }
}

/* Detail rows a bit more polished */
.d-row {
    border: 1px solid rgba(231,238,252,.09);
    background: rgba(231,238,252,.02);
    border-radius: 14px;
}

.dh .meta {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(231,238,252,.03);
}


/* =========================
   V4 improvements — match-card less "grotesco", detail mobile fixes, note styling
   ========================= */

#viewDetail {
    padding-bottom: 96px; /* para que no lo tape el bottom-nav en mobile */
}

/* Chips del detalle: en mobile permiten scroll horizontal, no se rompen */
.detail-chips {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

    .detail-chips::-webkit-scrollbar {
        height: 6px;
    }

    .detail-chips::-webkit-scrollbar-thumb {
        background: rgba(231,238,252,.14);
        border-radius: 999px;
    }

/* Nota/descripcion en Resumen */
.detail-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(231,238,252,.03);
    color: rgba(231,238,252,.88);
    margin: 10px 0 12px;
}

    .detail-note i {
        opacity: .9;
        margin-top: 2px;
    }

    .detail-note .txt {
        font-weight: 850;
        line-height: 1.25;
        word-break: break-word;
    }

/* Match card: tipografia y jerarquia mas fina */
.match-card {
    border-radius: 16px;
}

.mc-title {
    font-size: 1.02rem;
    margin: 0;
}

.mc-team {
    font-weight: 950;
}

.mc-vs {
    opacity: .7;
    font-weight: 950;
    margin: 0 6px;
}

.mc-rival {
    font-weight: 950;
}

.mc-sub {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: rgba(148,163,184,.92);
    font-weight: 850;
    font-size: .88rem;
}

.mc-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(231,238,252,.10);
    background: rgba(231,238,252,.02);
}

    .mc-mini i {
        opacity: .9;
    }

/* Score mas discreto */
.mc-score {
    font-size: 1.02rem;
    min-width: 72px;
}

/* Chip secundario "Ver detalle" */
.mc-chip.ghost {
    opacity: .85;
}

    .mc-chip.ghost i {
        opacity: .85;
    }





/* =========================
   Cambios (revert al estilo que te gustaba)
   - Mobile: Sale / Entra en 2 renglones dentro del mismo card
   - Web: 1 sola línea por cambio (Sale → Entra) sin saltos
   ========================= */

.d-row-change {
    align-items: stretch;
}

.change-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.change-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .change-item .name {
        min-width: 0;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .change-item .tag {
        padding: 4px 8px;
        border-radius: 999px;
        border: 1px solid rgba(231,238,252,.12);
        background: rgba(231,238,252,.03);
        font-weight: 950;
        font-size: .78rem;
        white-space: nowrap;
    }

        .change-item .tag.out {
            color: var(--bad);
        }

        .change-item .tag.in {
            color: var(--ok);
        }

/* Desktop: una sola línea "Sale ...  →  Entra ..." */
@media (min-width: 768px) {
    .change-stack {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .change-item {
        flex: 1 1 0;
    }

        .change-item.out::after {
            content: "→";
            margin-left: 12px;
            margin-right: 2px;
            opacity: .85;
            font-weight: 950;
            flex: 0 0 auto;
        }
    /* Para que la flecha no se vaya abajo y el row no wrappee */
    .d-row.d-row-change {
        flex-wrap: nowrap;
    }

        .d-row.d-row-change .pill {
            margin-left: auto;
        }
}

/* Mobile: permitir que la pill baje si no entra, pero SIN romper el stack */
@media (max-width: 576px) {
    .d-row.d-row-change {
        align-items: flex-start;
    }

        .d-row.d-row-change .pill {
            margin-left: auto;
            margin-top: 6px;
        }
}

@media (max-width: 576px) {
    /* Detalle: filas más cómodas */
    .d-row {
        align-items: flex-start;
    }

        .d-row .name {
            white-space: normal;
        }

        .d-row .pill {
            margin-left: auto;
            margin-top: 6px;
        }
}


@media (max-width: 576px) {
    .detail-card, .detail-hero, .filters-card {
        background: rgba(15,27,46,.92);
    }
}

@media (max-width: 576px) {
    .d-row {
        flex-wrap: wrap;
    }
}


/* =========================
   V9 HOTFIX — Mobile “superposición”
   Fuerza el flujo vertical en móviles (evita que Grid/overrides terminen solapando cards).
   Mantiene Desktop igual.
   ========================= */
@media (max-width: 576px) {
    /* Asegurar flujo normal */
    #viewDetail {
        position: relative;
    }

        #viewDetail .detail-hero,
        #viewDetail .detail-chips,
        #viewDetail .detail-grid,
        #viewDetail .detail-card {
            position: relative;
        }

        /* En mobile, usar columna (más robusto que CSS grid cuando hay overrides) */
        #viewDetail .detail-grid {
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
        }

        #viewDetail .detail-card,
        #viewDetail .detail-card-wide {
            width: 100% !important;
        }
}

/* =========================
   V10 tweaks — detalle head + chips + cambios (sin flecha)
   ========================= */

/* Detalle: en mobile el botón Volver arriba (no queda "en el medio") */
@media (max-width: 576px) {
    .detail-head {
        grid-template-columns: 1fr;
        grid-template-areas:
            "back"
            "title"
            "score";
        row-gap: 10px;
    }

    .back-link {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid rgba(231,238,252,.10);
        background: rgba(231,238,252,.03);
    }

    .detail-score {
        justify-self: start;
    }
}

/* Chips: aseguramos que LOCAL/VISITA se vea como chip normal */
.detail-chips .mc-chip {
    white-space: nowrap;
}

/* Cambios: en web sacar la flecha (no suma) */
@media (min-width: 768px) {
    .change-item.out::after {
        content: ""; /* antes era "→" */
        margin: 0;
    }
}


/* ===============================
   v13 — compact match cards + lighter filters card
   (overrides added at end to ensure they apply)
=============================== */


/* ---------- FILTERS: lighter + less bulky ---------- */
.filters-card.filters-card {
    padding: 10px 12px !important;
    border-radius: 16px !important;
    background: rgba(15,27,46,.55) !important;
    border-color: rgba(231,238,252,.08) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.14) !important;
}

.filters-grid {
    gap: 8px !important;
}

.fg-selects {
    gap: 8px !important;
}

.search-pro .ol-input {
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
}

.select-pill {
    padding: 8px 10px !important;
    border-radius: 14px !important;
    background: rgba(11,18,32,.28) !important;
    border-color: rgba(231,238,252,.10) !important;
}

    .select-pill i {
        font-size: .95rem;
        opacity: .9;
    }

    .select-pill .ol-select {
        font-weight: 800 !important;
        padding-top: .15rem !important;
        padding-bottom: .15rem !important;
    }

/* Mobile: aún más compacto */
@media (max-width: 576px) {
    .filters-card.filters-card {
        padding: 10px !important;
    }

    .filters-grid {
        gap: 8px !important;
    }

    .select-pill {
        padding: 8px 10px !important;
    }

    .search-pro .ol-input {
        font-size: 1rem !important;
    }
}

/* ---------- MATCH CARD: reduce height ---------- */
.match-card.match-card {
    border-radius: 16px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.16) !important;
}

.match-card .mc-row {
    padding: 10px 12px !important;
    gap: 10px !important;
}

.match-card .mc-date {
    width: 56px !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
}

    .match-card .mc-date .d {
        font-size: 1.12rem !important;
    }

    .match-card .mc-date .m {
        font-size: .72rem !important;
    }

.match-card .mc-title {
    font-size: 1.02rem !important;
}

.match-card .mc-sub {
    margin-top: 3px !important;
    font-size: .86rem !important;
    gap: 8px !important;
}

.match-card .mc-score {
    font-size: 1.08rem !important;
}

.match-card .mc-pill {
    padding: 3px 8px !important;
    font-size: .72rem !important;
}

.match-card .mc-foot {
    padding: 8px 12px !important;
}

/* Mobile: evitar que crezca por chips */
@media (max-width: 576px) {
    .match-card .mc-sub {
        gap: 6px !important;
    }

    .match-card .mc-foot {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
}
/* ===============================
   Premium layout — limitar ancho real del contenido
   =============================== */
.page-wrap {
    max-width: 980px;
    margin-inline: auto;
}

/* En pantallas enormes, que no quede “estirado” */
@media (min-width: 1400px) {
    .page-wrap {
        max-width: 1040px;
    }
}

/* ===============================
   Premium match-card — borde glow + chevron + feel “app”
   =============================== */
.match-card {
    position: relative;
    isolation: isolate;
}

    .match-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient( 135deg, rgba(74,163,255,.35), rgba(231,238,252,.08), rgba(74,163,255,.18) );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: .55;
        pointer-events: none;
        z-index: -1;
    }

    .match-card:hover::before {
        opacity: .85;
    }

    /* sensacion de “lista app”: un poquito menos de aire abajo */
    .match-card .mc-foot {
        opacity: .95;
    }


/* ================================
   Detail tabs (mobile)
   ================================ */
.detail-tabs {
    position: sticky;
    top: 64px;
    z-index: 30;
    display: flex;
    gap: 8px;
    padding: 10px 0 6px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

    .detail-tabs::-webkit-scrollbar {
        height: 6px;
    }

    .detail-tabs::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.10);
        border-radius: 999px;
    }

.dt-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.88);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1;
    white-space: nowrap;
}

    .dt-item i {
        opacity: .9;
    }

    .dt-item span {
        transform: translateY(.5px);
    }

    .dt-item.active {
        background: rgba(255,255,255,.16);
        border-color: rgba(255,255,255,.22);
        color: #fff;
    }

.detail-card[data-tabpanel] {
    display: none;
}

    .detail-card[data-tabpanel].is-active {
        display: block;
    }
/* ================================
   Timeline
   ================================ */
.tl {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tl-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.tl-time {
    flex: 0 0 auto;
    min-width: 52px;
    text-align: center;
    font-weight: 900;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
}

    .tl-time.missing {
        opacity: .7;
    }

.tl-body {
    flex: 1 1 auto;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    border-radius: 14px;
    padding: 10px 12px;
}

.tl-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tl-kind {
    font-weight: 900;
    letter-spacing: .2px;
}

    .tl-kind .k-ico {
        margin-right: 8px;
        opacity: .95;
    }

.tl-note {
    font-size: .9rem;
    opacity: .85;
}

.tl-players {
    margin-top: 8px;
    display: grid;
    gap: 8px;
}

.tl-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tl-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 3px 8px;
    font-weight: 900;
    font-size: .78rem;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
}

    .tl-badge.ok {
        background: rgba(41, 219, 157, .12);
        border-color: rgba(41, 219, 157, .22);
    }

    .tl-badge.bad {
        background: rgba(255, 92, 92, .12);
        border-color: rgba(255, 92, 92, .22);
    }

    .tl-badge.warn {
        background: rgba(255, 196, 99, .12);
        border-color: rgba(255, 196, 99, .22);
    }



/* Desktop: usar vista por pestañas, no grilla */
.detail-grid {
    display: block !important;
}

/* Timeline accordion */
.tl-item.tl-click {
    cursor: pointer;
}

.tl-item .tl-players {
    display: none;
}

.tl-item.is-open .tl-players {
    display: block;
}

.tl-sum {
    margin-top: 6px;
    color: rgba(255,255,255,.88);
    font-weight: 800;
}

.tl-note {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tl-score {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 900;
}

.tl-team {
    opacity: .9;
    font-weight: 800;
}

.tl-red {
    color: #ff4d4d;
}

.pill-link {
    text-decoration: none;
}

    .pill-link:hover {
        text-decoration: underline;
    }


/* Red card icon */
.ico-red {
    color: #ff4d4f;
}


/* ================================
   Detail head (mobile refinado)
   ================================ */
.detail-head {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    border-radius: 18px;
    padding: 12px;
}

.back-link {
    color: rgba(255,255,255,.85) !important;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 991.98px) {
    .detail-head {
        position: sticky;
        top: 56px; /* debajo nav */
        z-index: 25;
        border-radius: 16px;
        padding: 10px 12px;
        backdrop-filter: blur(10px);
    }

        .detail-head .dh-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .detail-head .dh-score {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 900;
        }

            .detail-head .dh-score .score {
                font-size: 22px;
                letter-spacing: .5px;
            }

        .detail-head .dh-sub {
            margin-top: 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .detail-head .dh-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            font-size: 13px;
            color: rgba(255,255,255,.75);
        }

            .detail-head .dh-row .k {
                display: flex;
                align-items: center;
                gap: 8px;
                white-space: nowrap;
            }

            .detail-head .dh-row .v {
                font-weight: 800;
                color: rgba(255,255,255,.92);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 62%;
                text-align: right;
            }
}
/* ================================
   PRIME FIX: premium head must NOT be sticky on mobile
   (generic .detail-head sticky breaks the premium layout)
   ================================ */
@media (max-width: 991.98px) {
    .detail-head--premium {
        position: relative !important;
        top: auto !important;
        z-index: 1 !important;
    }
}



/* =========================
   Detail Head Premium (vTop)
   ========================= */

.detail-head--premium {
    position: relative;
    padding: 14px 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    overflow: hidden;
}

    .detail-head--premium:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(1200px 420px at 20% 0%, rgba(255,255,255,.08), transparent 60%);
        pointer-events: none;
    }

    .detail-head--premium .dh-bar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .detail-head--premium .back-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 6px 10px;
        border-radius: 14px;
        background: transparent;
        border: 1px solid transparent;
        color: rgba(255,255,255,.92) !important;
        font-weight: 900;
        letter-spacing: .2px;
    }

        .detail-head--premium .back-link i {
            opacity: .9;
        }

        .detail-head--premium .back-link i {
            width: 28px;
            height: 28px;
            display: inline-grid;
            place-items: center;
            border-radius: 999px;
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.10);
            opacity: 1;
        }

        .detail-head--premium .back-link:hover {
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.12);
            text-decoration: none;
        }

    .detail-head--premium .detail-chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

        .detail-head--premium .detail-chips .chip,
        .detail-head--premium .detail-chips .mc-chip {
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.12);
            color: rgba(255,255,255,.92);
            padding: 6px 10px;
            border-radius: 999px;
            font-weight: 850;
            font-size: 12px;
            line-height: 1;
            white-space: nowrap;
        }

    .detail-head--premium .dh-score-mini {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
    }

        .detail-head--premium .dh-score-mini .score {
            display: inline-block;
            padding: 7px 10px;
            border-radius: 12px;
            background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.14);
            font-weight: 800;
            letter-spacing: .4px;
        }

        .detail-head--premium .dh-score-mini.is-empty {
            display: none;
        }

    .detail-head--premium .dh-hero {
        position: relative;
        padding-top: 12px;
        text-align: left;
    }

    .detail-head--premium .dh-title {
        font-weight: 900;
        font-size: 18px;
        line-height: 1.15;
        letter-spacing: .2px;
        margin: 6px 0 10px;
        color: rgba(255,255,255,.96);
        text-shadow: 0 10px 30px rgba(0,0,0,.45);
    }

    .detail-head--premium .dh-when {
        color: rgba(255,255,255,.72);
        font-size: 12.5px;
        margin-top: 2px;
    }

    .detail-head--premium .dh-meta {
        display: none !important;
    }

    .detail-head--premium .dh-meta-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255,255,255,.035);
        border: 1px solid rgba(255,255,255,.06);
    }

        .detail-head--premium .dh-meta-item i {
            margin-top: 2px;
            opacity: .85;
        }

        .detail-head--premium .dh-meta-item .v {
            font-weight: 700;
            color: rgba(255,255,255,.92);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .detail-head--premium .dh-score-big {
        display: none;
    }

/* Desktop: score grande centrado y layout más hero */
@media (min-width: 992px) {
    .detail-head--premium {
        padding: 18px 18px 18px;
    }

        .detail-head--premium .dh-score-mini {
            display: none;
        }

        .detail-head--premium .dh-hero {
            text-align: center;
            padding-top: 16px;
        }

        .detail-head--premium .dh-title {
            font-size: 22px;
            margin-bottom: 10px;
        }

        .detail-head--premium .dh-score-big {
            display: block;
            margin: 6px auto 6px;
        }

            .detail-head--premium .dh-score-big .score {
                display: inline-block;
                padding: 10px 16px;
                border-radius: 16px;
                background: rgba(255,255,255,.10);
                border: 1px solid rgba(255,255,255,.16);
                font-size: 22px;
                font-weight: 900;
                letter-spacing: .6px;
                box-shadow: 0 18px 40px rgba(0,0,0,.35);
            }

        .detail-head--premium .dh-when {
            font-size: 13px;
            margin-top: 6px;
        }

        .detail-head--premium .dh-meta {
            flex-direction: row;
            justify-content: center;
            gap: 10px;
            margin-top: 14px;
        }

        .detail-head--premium .dh-meta-item {
            width: min(520px, 48%);
        }

            .detail-head--premium .dh-meta-item .v {
                white-space: nowrap;
            }
}

#dScore {
    display: none !important;
}


/* =========================
   Premium fixes v3 (web vs alignment + mobile layout)
   ========================= */

/* Web: title split (t1 vs t2) */
.dh-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

    .dh-title .t1, .dh-title .t2 {
        font-weight: 900;
    }

    .dh-title .vs {
        font-weight: 900;
        opacity: .75;
        letter-spacing: .4px;
        position: relative;
        top: 2px; /* align with score dash feel */
    }

/* Mobile layout fixes */
@media (max-width: 576px) {
    .detail-head--premium {
        padding: 12px 12px;
    }

    .dh-bar {
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255,255,255,.06);
        flex-wrap: wrap;
        align-items: center;
    }

        .dh-bar .back-link {
            flex: 0 0 auto;
        }

        .dh-bar .detail-chips {
            flex: 1 1 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

    .dh-score-mini {
        position: static !important;
        margin-left: auto;
        transform: none !important;
        z-index: 1;
    }

    /* Hide big score on mobile; pill only */
    .dh-score-big {
        display: none;
    }

    /* Improve spacing so tabs don't feel glued */
    .detail-hero {
        padding: 12px;
        margin-bottom: 10px;
    }

    .dh-hero {
        padding-top: 2px;
    }

    .dh-title {
        justify-content: flex-start;
        font-size: 1.02rem;
        line-height: 1.15;
        margin-top: 4px;
    }

    .dh-when {
        font-size: .80rem;
        opacity: .85;
        margin-top: 4px;
    }

    .dh-meta {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 10px;
    }

    .dh-meta-item {
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
    }

    /* Tabs: give them their own bar so they don't visually overlap */
    .detail-tabs {
        top: 56px; /* smaller sticky offset on mobile */
        padding: 10px 0 10px;
        margin-top: 6px;
        background: linear-gradient(to bottom, rgba(7,14,28,.92), rgba(7,14,28,.00));
        backdrop-filter: blur(8px);
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
}

/* Safety: never show legacy dScore */
#dScore {
    display: none !important;
}

/* =====================================================
   DETAIL HERO PREMIUM v4
   Fixes:
   - mobile containment/overlap (head stays in flow)
   - tabs no longer overlap header on mobile
   - 'vs' centered exactly above score dash (grid title)
   ===================================================== */

/* Make sure hero/header participates in normal layout (no leaking/overlap) */
.detail-hero {
    position: relative;
}

.detail-head.detail-head--premium {
    position: relative;
    z-index: 20;
    overflow: hidden;
}

/* New premium structure (matches current DOM: dh-bar, dh-score-mini, dh-hero, dh-title...) */
.detail-head.detail-head--premium {
    display: grid;
    grid-template-areas:
        "bar score"
        "hero hero";
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 14px 14px 12px;
}

    .detail-head.detail-head--premium .dh-bar {
        grid-area: bar;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        min-width: 0;
    }

        .detail-head.detail-head--premium .dh-bar .back-link {
            flex: 0 0 auto;
        }

    .detail-head.detail-head--premium .detail-chips {
        flex: 1 1 auto;
        justify-content: flex-end;
        overflow: visible;
        flex-wrap: wrap;
        min-width: 0;
    }

    .detail-head.detail-head--premium .dh-score-mini {
        grid-area: score;
        align-self: start;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid rgba(231,238,252,.14);
        background: rgba(255,255,255,.06);
    }

        .detail-head.detail-head--premium .dh-score-mini .score {
            font-weight: 950;
            letter-spacing: .6px;
            font-size: 18px;
        }

    .detail-head.detail-head--premium .dh-hero {
        grid-area: hero;
        text-align: center;
        padding-top: 2px;
    }

    /* Title grid: keeps 'vs' perfectly centered (aligned with score center/dash) */
    .detail-head.detail-head--premium .dh-title {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: baseline;
        column-gap: 10px;
        max-width: 980px;
        margin: 0 auto;
    }

        .detail-head.detail-head--premium .dh-title .t1 {
            justify-self: end;
        }

        .detail-head.detail-head--premium .dh-title .t2 {
            justify-self: start;
        }

        .detail-head.detail-head--premium .dh-title .vs {
            justify-self: center;
            font-weight: 950;
            opacity: .85;
            letter-spacing: .6px;
            /* micro alignment vs score dash */
            position: relative;
            top: 1px;
        }

    /* Score big: centered block */
    .detail-head.detail-head--premium .dh-score-big {
        margin-top: 10px;
    }

        .detail-head.detail-head--premium .dh-score-big .score {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 76px;
            padding: 10px 16px;
            border-radius: 999px;
            border: 1px solid rgba(231,238,252,.16);
            background: rgba(255,255,255,.07);
            font-weight: 980;
            font-size: 22px;
            letter-spacing: .8px;
        }

    .detail-head.detail-head--premium .dh-when {
        margin-top: 8px;
        font-size: 12px;
        font-weight: 800;
        color: rgba(231,238,252,.70);
    }

    .detail-head.detail-head--premium .dh-meta {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .detail-head.detail-head--premium .dh-meta-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(231,238,252,.10);
        background: rgba(255,255,255,.03);
        min-width: 0;
    }

        .detail-head.detail-head--premium .dh-meta-item .v {
            font-weight: 900;
            color: rgba(255,255,255,.92);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

/* Desktop: hide mini pill, keep big score */
@media (min-width: 992px) {
    .detail-head.detail-head--premium .dh-score-mini {
        display: none;
    }
}

/* Mobile: keep everything contained + avoid overlaps */
@media (max-width: 768px) {
    /* Head should NOT be pulled out of flow; keep it normal */
    .detail-head.detail-head--premium {
        grid-template-areas:
            "bar score"
            "hero hero";
        padding: 12px 12px 10px;
    }

        /* Title: allow wrap nicely */
        .detail-head.detail-head--premium .dh-title {
            font-size: 18px;
            line-height: 1.15;
            column-gap: 8px;
        }

            .detail-head.detail-head--premium .dh-title .t1,
            .detail-head.detail-head--premium .dh-title .t2 {
                overflow: hidden;
                text-overflow: ellipsis;
            }

        /* On mobile we keep only the small pill score (big score hidden) */
        .detail-head.detail-head--premium .dh-score-big {
            display: none;
        }

        /* Meta cards stack */
        .detail-head.detail-head--premium .dh-meta {
            grid-template-columns: 1fr;
        }

    /* Tabs: remove sticky to prevent overlap with head; keep nice background */
    .detail-tabs {
        position: relative;
        top: auto;
        z-index: 5;
        margin-top: 10px;
        padding: 10px 0 8px;
        border-top: 1px solid rgba(231,238,252,.08);
        border-bottom: 1px solid rgba(231,238,252,.08);
        background: rgba(12,22,44,.20);
        backdrop-filter: blur(10px);
    }

    /* Grid spacing to ensure nothing visually collides */
    .detail-grid {
        margin-top: 12px;
    }
}

/* Ensure older styles for .detail-head (dh-top/dh-sub) don't interfere with premium head */
.detail-head.detail-head--premium .dh-top,
.detail-head.detail-head--premium .dh-sub,
.detail-head.detail-head--premium .dh-row,
.detail-head.detail-head--premium .dh-score {
    display: none !important;
}


/* Mobile: evita chips apilados en algunos Android */

@media (max-width: 576px) {
    .detail-head--premium .dh-bar {
        padding-right: 78px; /* deja espacio para el score mini */
        align-items: flex-start;
    }

    .detail-head--premium .detail-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }

        .detail-head--premium .detail-chips::-webkit-scrollbar {
            display: none;
        }
}


/* ================================
   PRIME FIX: back icon centered (web + mobile)
   ================================ */
.detail-head--premium .back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .detail-head--premium .back-link i {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        line-height: 1;
    }

/* ================================
   PRIME v3: dChips nunca apilados (Android/Galaxy)
   - En mobile/tablet (<=992) forzamos 1 linea con scroll horizontal
   - Reserva espacio para el score mini
   ================================ */
@media (max-width: 991.98px) {
    .detail-head--premium .dh-bar {
        align-items: center;
        gap: 10px;
    }

    .detail-head--premium .detail-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        min-width: 0;
        max-width: calc(100% - 86px); /* deja lugar para el score mini */
        padding-right: 4px;
    }

        .detail-head--premium .detail-chips .mc-chip,
        .detail-head--premium .detail-chips .chip {
            flex: 0 0 auto;
        }

        .detail-head--premium .detail-chips::-webkit-scrollbar {
            display: none;
        }
}

/* ================================
   PRIME v3: back icon-only en mobile
   (texto solo en desktop)
   ================================ */
.detail-head--premium .back-link {
    white-space: nowrap;
}

    .detail-head--premium .back-link .back-txt {
        display: inline;
    }

@media (max-width: 991.98px) {
    .detail-head--premium .back-link {
        padding: 6px 8px;
        gap: 0;
    }

        .detail-head--premium .back-link .back-txt {
            display: none;
        }
}

/* =========================
   PRIME FIX v4 (Mobile)
   - dChips no se corta (Galaxy)
   - Detail surface no “se cae al fondo” en listas largas
   ========================= */

@media (max-width: 991.98px) {

    /* 1) Evitar que el detalle “termine” antes y se vea el fondo del body */
    #viewDetail {
        padding-bottom: 96px; /* bottom-nav + safe */
    }

    .detail-grid {
        padding-bottom: 28px;
        position: relative;
    }

        /* panel suave detrás de las cards cuando scrolleás mucho */
        .detail-grid::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(8, 16, 30, .22);
            border-radius: 18px;
            pointer-events: none;
        }

        .detail-grid > * {
            position: relative;
            z-index: 1;
        }

    /* 2) dChips: nunca apilados, nunca cortados */
    .detail-head--premium .dh-bar {
        align-items: center;
        gap: 10px;
    }

    /* chips como “fila scrolleable” con padding para que no muerda el primero */
    .detail-head--premium .detail-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        /* clave para Galaxy: padding lateral */
        padding-left: 12px !important;
        padding-right: 72px !important; /* deja espacio para el score pill */

        margin: 0 !important;
        min-width: 0;
        gap: 8px;
        justify-content: flex-start !important;
        /* “fade” visual opcional: hace más premium */
        mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 20px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 20px), transparent 100%);
    }

        .detail-head--premium .detail-chips > * {
            scroll-snap-align: start;
            flex: 0 0 auto;
            white-space: nowrap;
        }

    /* Si el score pill está en la barra visualmente, evitar que tape chips */
    .detail-head--premium .dh-score-mini {
        z-index: 3;
    }
}

@media (max-width: 991.98px) {
    #viewDetail .mt-4.text-center.muted.small {
        display: none;
    }
}


/* =========================
   PRIME OVERRIDES (vFinal)
   - dChips sin scroll (wrap prolijo)
   - Surface continua en detalle (listas largas)
   ========================= */

/* No queremos scroll horizontal en chips del detalle */
#viewDetail .detail-chips {
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
    padding-bottom: 0 !important;
}

    #viewDetail .detail-chips::-webkit-scrollbar {
        display: none !important;
    }

/* Surface continua del detalle (evita que “se caiga al fondo” al final) */
#viewDetail {
    position: relative;
    padding-bottom: 140px; /* safe + bottom-nav + aire */
}

@media (max-width: 991.98px) {
    #viewDetail::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        background: rgba(8,16,30,.22);
        border: 1px solid rgba(255,255,255,.04);
        pointer-events: none;
        z-index: 0;
    }

    #viewDetail > * {
        position: relative;
        z-index: 1;
    }
}

/* Mobile: dChips en 2 columnas (sin scroll, sin apilar 1x1) */
@media (max-width: 575.98px) {

    .detail-head--premium .dh-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .detail-head--premium .back-link {
        align-self: flex-start;
    }

    .detail-head--premium .detail-chips {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

        .detail-head--premium .detail-chips > * {
            width: 100%;
            justify-content: center;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
}

/* Tablet: chips wrap centrados (sin scroll) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .detail-head--premium .detail-chips {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px;
    }
}

/* ===== FIX DEFINITIVO dChips (sin scroll, 2 columnas) ===== */
@media (max-width: 575.98px) {

    /* la barra del head: permitir que el bloque de chips tome ancho */
    .detail-head--premium .dh-bar {
        display: grid !important;
        grid-template-columns: 1fr auto; /* chips | score pill */
        align-items: start !important;
        gap: 10px !important;
    }

        /* el volver (si está icon-only) no debe ocupar una fila “rara” */
        .detail-head--premium .dh-bar .back-link {
            grid-column: 1 / -1;
            justify-self: start;
        }

    /* chips: 2 columnas, sin scroll */
    .detail-head--premium #dChips {
        grid-column: 1 / 2;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        /* clave: que no se achique ni se vaya */
        min-width: 0;
        width: 100%;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* score pill queda a la derecha, alineado arriba */
    .detail-head--premium .dh-score-mini {
        grid-column: 2 / 3;
        justify-self: end;
        align-self: start;
        position: static !important;
        top: auto !important;
        right: auto !important;
        margin-top: 0 !important;
    }

    /* IMPORTANTÍSIMO: los chips son mc-chip, evitar que ocupen 100% o wrap raro */
    .detail-head--premium #dChips .mc-chip {
        display: inline-flex !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 8px 10px !important;
        line-height: 1.1;
    }

        /* si algún chip trae ícono y texto, evitar saltos */
        .detail-head--premium #dChips .mc-chip i {
            flex: 0 0 auto;
        }
}

/* Tablet: que wrapee centrado (sin scroll) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .detail-head--premium #dChips {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        overflow: visible !important;
    }

        .detail-head--premium #dChips .mc-chip {
            width: auto !important;
            max-width: 100% !important;
        }
}

@media (max-width: 991.98px) {
    #viewDetail {
        min-height: calc(100vh - 56px);
        padding-bottom: 110px; /* bottom-nav + safe */
    }

    body {
        background-attachment: fixed;
    }
}
/* ===== FIX DEFINITIVO dChips (sin scroll) – usando grid del contenedor ===== */
@media (max-width: 575.98px) {

    /* El head premium se vuelve un grid: bar + hero */
    .detail-head--premium {
        display: grid !important;
        grid-template-columns: 1fr auto; /* izquierda | derecha */
        grid-auto-rows: auto;
        gap: 10px !important;
    }

        /* La barra (volver + chips) ocupa ancho completo */
        .detail-head--premium .dh-bar {
            grid-column: 1 / -1;
            display: grid !important;
            grid-template-columns: 1fr auto; /* volver | score */
            grid-template-rows: auto auto; /* fila 1 volver/score, fila 2 chips */
            gap: 10px !important;
            align-items: center;
            min-width: 0;
        }

            /* Volver arriba izquierda */
            .detail-head--premium .dh-bar .back-link {
                grid-column: 1 / 2;
                grid-row: 1;
                justify-self: start;
            }

        /* Score pill arriba derecha (aunque esté fuera de dh-bar en el DOM) */
        .detail-head--premium .dh-score-mini {
            grid-column: 2 / 3;
            grid-row: 1;
            justify-self: end;
            align-self: center;
            position: static !important;
            top: auto !important;
            right: auto !important;
            margin: 0 !important;
            z-index: 2;
        }

        /* dChips abajo (fila 2) en 2 columnas, SIN scroll */
        .detail-head--premium #dChips {
            grid-column: 1 / -1;
            grid-row: 2;
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: 8px !important;
            width: 100%;
            min-width: 0;
            overflow: visible !important;
            padding: 0 !important;
            margin: 0 !important;
        }

            /* Los “chips” pasan a ser badges full-width y prolijos */
            .detail-head--premium #dChips .mc-chip {
                display: flex !important;
                align-items: center;
                justify-content: center;
                gap: 8px;
                width: 100% !important;
                max-width: 100% !important;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 8px 10px !important;
                border-radius: 999px;
                line-height: 1.1;
            }

        /* El bloque hero abajo del bar */
        .detail-head--premium .dh-hero {
            grid-column: 1 / -1;
        }
}

/* Tablet: que wrapee centrado y listo */
@media (min-width: 576px) and (max-width: 991.98px) {
    .detail-head--premium #dChips {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        overflow: visible !important;
    }

        .detail-head--premium #dChips .mc-chip {
            width: auto !important;
            max-width: 100% !important;
        }
}


/* ============================================================
   DETALLE v2 — Hero innovador (mobile-first) 2026-03-02
   Se aisla con .detail-v2 para NO romper nada existente.
   ============================================================ */

.detail-v2 {
    padding-bottom: 84px;
}
    /* espacio para bottom-nav */
    .detail-v2 .dv2-hero {
        position: relative;
        margin: 12px auto 10px;
        padding: 14px 14px 12px;
        border-radius: 22px;
        background: radial-gradient(1100px 600px at 20% 0%, rgba(79,140,255,.22), transparent 60%), radial-gradient(1000px 600px at 90% 20%, rgba(255,110,196,.16), transparent 55%), linear-gradient(180deg, rgba(10,16,28,.82), rgba(10,16,28,.62));
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 18px 60px rgba(0,0,0,.38);
        backdrop-filter: blur(10px);
        overflow: hidden;
    }

/* micro-animación de entrada del hero */
@media (prefers-reduced-motion: no-preference) {
    .detail-v2 .dv2-hero {
        opacity: 0;
        transform: translateY(10px);
    }

        .detail-v2 .dv2-hero.dv2-hero-in {
            animation: dv2HeroIn .38s cubic-bezier(.2,.9,.2,1) both;
        }

    @keyframes dv2HeroIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

.detail-v2 .dv2-hero::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(520px 240px at 20% 20%, rgba(255,255,255,.08), transparent 70%), radial-gradient(560px 260px at 85% 15%, rgba(255,255,255,.06), transparent 70%);
    pointer-events: none;
}

.detail-v2 .dv2-back {
    position: absolute;
    z-index: 10;
    left: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
    color: rgba(255,255,255,.92);
    padding: 10px 12px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

    .detail-v2 .dv2-back:active {
        transform: translateY(1px);
    }

    .detail-v2 .dv2-back .back-txt {
        font-weight: 700;
        letter-spacing: .2px;
    }

@media (max-width: 430px) {
    .detail-v2 .dv2-back .back-txt {
        display: none;
    }

    .detail-v2 .dv2-back {
        width: 44px;
        height: 44px;
        justify-content: center;
        padding: 0;
        border-radius: 14px;
    }
}

.detail-v2 .dv2-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-left: 64px; /* deja espacio al back */
    margin-bottom: 10px;
}

@media (min-width: 431px) {
    .detail-v2 .dv2-top {
        padding-left: 170px;
    }
}

.detail-v2 .dv2-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 28px;
}

.detail-v2 .dv2-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.92);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

    .detail-v2 .dv2-pill i {
        opacity: .9;
    }

.detail-v2 .dv2-status {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
}

.detail-v2 .dv2-match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 10px;
}

.detail-v2 .dv2-team {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-v2 .dv2-home {
    align-items: flex-start;
    text-align: left;
}

.detail-v2 .dv2-away {
    align-items: flex-end;
    text-align: right;
}

.detail-v2 .dv2-badge {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    font-weight: 900;
    letter-spacing: .4px;
    color: rgba(255,255,255,.95);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.detail-v2 .dv2-name {
    font-weight: 900;
    letter-spacing: .2px;
    color: rgba(255,255,255,.95);
    font-size: 16px;
    line-height: 1.15;
}

.detail-v2 .dv2-sub {
    color: rgba(255,255,255,.72);
    font-weight: 700;
    font-size: 12px;
}

.detail-v2 .dv2-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

.detail-v2 .dv2-score-num {
    font-weight: 1000;
    font-size: 28px;
    letter-spacing: .8px;
    line-height: 1;
    color: rgba(255,255,255,.98);
}

.detail-v2 .dv2-kick {
    font-weight: 800;
    font-size: 12px;
    color: rgba(255,255,255,.78);
    text-align: center;
    max-width: 220px;
}

.detail-v2 .dv2-place {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 2px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.16);
    color: rgba(255,255,255,.88);
    text-decoration: none;
}

    .detail-v2 .dv2-place:active {
        transform: translateY(1px);
    }

    .detail-v2 .dv2-place i {
        opacity: .9;
    }

.detail-v2 .detail-tabs {
    position: sticky;
    top: 0;
    z-index: 25;
    margin: 10px 0 8px;
    border-radius: 18px;
    backdrop-filter: blur(10px);
    background: rgba(10,16,28,.70);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 40px rgba(0,0,0,.24);
}

.detail-v2 .detail-grid {
    padding-bottom: 12px;
}

/* Tabs más “app” */
.detail-v2 .dt-item {
    border-radius: 14px !important;
    font-weight: 800;
}

    .detail-v2 .dt-item.active {
        background: rgba(255,255,255,.10) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
    }

/* Desktop: aire + score más grande */
@media (min-width: 992px) {
    .detail-v2 .dv2-hero {
        padding: 18px 18px 14px;
    }

    .detail-v2 .dv2-name {
        font-size: 18px;
    }

    .detail-v2 .dv2-score-num {
        font-size: 34px;
    }

    .detail-v2 .dv2-match {
        gap: 16px;
    }
}



/* Mobile: filas del XI y Cambios en UNA sola línea (sin saltos) */
@media (max-width: 430px) {
    .detail-v2 .detail-card .d-row .l {
        min-width: 0;
    }

    .detail-v2 .detail-card .d-row .name {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .detail-v2 .detail-card[data-tabpanel='xi'] .pill.jersey {
        min-width: 56px;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    .detail-v2 .detail-card[data-tabpanel='cambios'] .pill {
        flex: 0 0 auto;
    }

    .detail-v2 .detail-card[data-tabpanel='xi'] .d-row {
        gap: 8px;
    }
}


/* ===============================
   PARTIDOS V2 — WOW ADDONS
   - quick badges en hero
   - list mode (Todos/Jugados/Pendientes)
   - month head sticky
================================= */

.detail-v2 .dv2-quick {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}

    .detail-v2 .dv2-quick .q-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 8px 24px rgba(0,0,0,.18);
        backdrop-filter: blur(10px);
    }

    .detail-v2 .dv2-quick .q-ico {
        font-size: 14px;
        opacity: .95;
    }

    .detail-v2 .dv2-quick .q-lbl {
        font-size: 12px;
        opacity: .82;
        font-weight: 700;
        letter-spacing: .2px;
        white-space: nowrap;
    }

    .detail-v2 .dv2-quick .q-val {
        font-size: 14px;
        font-weight: 900;
        padding-left: 6px;
    }

@media (max-width: 420px) {
    .detail-v2 .dv2-quick .q-item {
        padding: 9px 10px;
        border-radius: 12px;
    }

    .detail-v2 .dv2-quick .q-lbl {
        font-size: 11px;
    }
}

/* list mode */
.list-mode {
    margin-top: 10px;
    display: inline-flex;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    padding: 4px;
    gap: 4px;
}

    .list-mode .lm-btn {
        border: 0;
        background: transparent;
        color: rgba(255,255,255,.85);
        font-weight: 800;
        font-size: 13px;
        padding: 8px 12px;
        border-radius: 999px;
    }

        .list-mode .lm-btn.active {
            background: rgba(255,255,255,.14);
            color: #fff;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
        }

        .list-mode .lm-btn:active {
            transform: translateY(1px);
        }

@media (min-width: 992px) {
    .fg-search {
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .fg-search .search-pro {
            flex: 1;
        }

        .fg-search .list-mode {
            margin-top: 0;
        }
}

/* sticky month head */
.month-head {
    position: sticky;
    top: 12px;
    z-index: 3;
    margin: 14px 0 10px;
}

    .month-head > span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(10,14,22,.72);
        border: 1px solid rgba(255,255,255,.10);
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 26px rgba(0,0,0,.22);
        font-weight: 900;
        letter-spacing: .6px;
        text-transform: uppercase;
        font-size: 12px;
    }