/* ==========================================================================
   CSS IFRAME ESTADÍSTICAS QUINIELA (Diseño NATIVO - AISLADO POR ID)
   ========================================================================== */

:root {
    --qx-red: #981314;
    --qx-red-2: #ca191b;
    --qx-red-soft: rgba(152, 19, 20, .075);
    --qx-red-soft-2: rgba(152, 19, 20, .14);
    --qx-accent: #ca191b;
    --qx-ink: #132039;
    --qx-text: #40516b;
    --qx-muted: #69778d;
    --qx-line: #e0e5ec;
    --qx-line-2: #cfd7e3;
    --qx-bg: #f5f6f8;
    --qx-card: #ffffff;
    --qx-surface-soft: #fbfcfe;
    --qx-green: #0d7a4a;
    --qx-green-bg: #ecfdf5;
    --qx-amber: #a85d00;
    --qx-amber-bg: #fff7e8;
    --qx-danger: #a61b1b;
    --qx-danger-bg: #fff1f1;
    --qx-font: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --qx-radius-lg: 14px;
    --qx-radius: 10px;
    --qx-shadow: 0 7px 20px rgba(15, 23, 42, .055);
    --qx-shadow-hover: 0 16px 42px rgba(15, 23, 42, .14);
    
    --qx-sign-w: 32px;
    --qx-sign-h: 30px;
    --qx-goal-w: 32px;
}

/* ==========================================================================
   1. RESET BÁSICO DENTRO DEL CONTENEDOR (Protección anti landing-maxi.css)
   ========================================================================== */
#stats-shell *, #stats-shell *::before, #stats-shell *::after { box-sizing: border-box !important; }
#stats-shell button { font: inherit !important; background: none !important; border: none !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; }

#stats-shell p, 
#stats-shell li {
    font-size: 16px !important;
    line-height: 1.45 !important;
    color: var(--qx-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: normal !important;
}
#stats-shell ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
#stats-shell h1, 
#stats-shell h2, 
#stats-shell h3, 
#stats-shell h4 {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    font-weight: 850 !important;
    color: var(--qx-ink) !important;
    background: transparent !important;
}

#stats-shell li::before, 
#stats-shell li::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   2. ESTILOS DE LA APP (BASE PC)
   ========================================================================== */
#stats-shell { width: 100% !important; max-width: 1430px !important; margin: 0 auto !important; padding: .7rem !important; font-family: var(--qx-font) !important; background: transparent !important; overflow-anchor: none !important; }

#stats-shell .qx-topbar { display: grid !important; grid-template-columns: minmax(230px, 1fr) auto auto !important; gap: .65rem !important; align-items: center !important; padding: .58rem .8rem !important; border: 1px solid var(--qx-line) !important; border-top: 4px solid var(--qx-red) !important; border-radius: var(--qx-radius-lg) !important; background: var(--qx-card) !important; box-shadow: var(--qx-shadow) !important; }

#stats-shell .qx-kicker { margin: 0 0 2px !important; color: var(--qx-red) !important; font-size: .68rem !important; line-height: 1 !important; font-weight: 850 !important; letter-spacing: .045em !important; text-transform: uppercase !important; }

#stats-shell .qx-topbar h1, 
#stats-shell .qx-topbar h2 { font-size: clamp(1.08rem, 1.9vw, 1.38rem) !important; line-height: 1.08 !important; }

#stats-shell .qx-meta { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; justify-content: flex-end !important; }

#stats-shell .qx-chip, 
#stats-shell .qx-tag, 
#stats-shell .qx-risk { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 20px !important; padding: 3px 8px !important; border-radius: 6px !important; font-size: .68rem !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; }

#stats-shell .qx-chip { color: var(--qx-text) !important; background: var(--qx-card) !important; border: 1px solid var(--qx-line-2) !important; box-shadow: 0 1px 2px rgba(0,0,0,.035) !important; }

#stats-shell .qx-risk { min-height: 32px !important; min-width: 96px !important; padding: 7px 10px !important; color: #fff !important; background: var(--qx-red) !important; font-size: .72rem !important; }
#stats-shell .qx-risk.is-success { color: var(--qx-green) !important; background: var(--qx-green-bg) !important; }
#stats-shell .qx-risk.is-warning { color: var(--qx-amber) !important; background: var(--qx-amber-bg) !important; }
#stats-shell .qx-risk.is-danger { color: var(--qx-danger) !important; background: var(--qx-danger-bg) !important; }

#stats-shell .qx-status { display: none !important; }
#stats-shell .qx-status.is-error { display: block !important; margin-top: 8px !important; padding: 10px !important; border: 1px solid rgba(166, 27, 27, .22) !important; border-radius: var(--qx-radius-lg) !important; color: var(--qx-danger) !important; background: var(--qx-danger-bg) !important; font-size: 0.75rem !important; font-weight: 800 !important; }

#stats-shell .qx-grid { display: grid !important; grid-template-columns: minmax(420px, 480px) minmax(580px, 1fr) !important; gap: 16px !important; margin-top: 12px !important; align-items: start !important; }
#stats-shell .qx-board, #stats-shell .qx-detail { border-radius: var(--qx-radius-lg) !important; background: transparent !important; overflow: hidden !important; transition: box-shadow .22s ease !important; }
#stats-shell .qx-detail { 
    border: 1px solid var(--qx-line) !important; 
    background: var(--qx-card) !important; 
    box-shadow: var(--qx-shadow) !important; 
    /* Truco para evitar tirones en PC: El panel te acompaña al hacer scroll */
    position: sticky !important; 
    top: 24px !important; 
    align-self: start !important; 
}

#stats-shell .qx-panel-head { display: flex !important; align-items: center !important; justify-content: space-between !important; background: #fdf2f2 !important; border: 1px solid #f8e1e1 !important; border-bottom: 2px solid #f8e1e1 !important; border-radius: 6px 6px 0 0 !important; padding: 6px 10px !important; min-height: 40px !important; }
#stats-shell .qx-panel-head h2 { font-size: 0.85rem !important; color: var(--qx-red) !important; text-transform: uppercase !important; }
#stats-shell .qx-panel-head .qx-kicker { display: none !important; }

#stats-shell .qx-board-list { padding: 0 !important; gap: 0 !important; border: 1px solid rgba(202,25,27,.10) !important; border-top: none !important; border-radius: 0 0 6px 6px !important; background: #ffffff !important; overflow: hidden !important; }
#stats-shell .qx-row-wrap { border-bottom: 1px solid #f1f5f9 !important; }
#stats-shell .qx-row-wrap:last-child { border-bottom: none !important; }

#stats-shell .qx-row { width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 22px var(--qx-sign-w) var(--qx-sign-w) var(--qx-sign-w) 16px !important; gap: 3px !important; align-items: center !important; padding: 4px 6px !important; background: #ffffff !important; border: none !important; border-radius: 0 !important; text-align: left !important; cursor: pointer !important; transition: background .18s ease !important; }
#stats-shell .qx-row:hover { background: #f8fafc !important; }
#stats-shell .qx-row.is-active { background: #fffafa !important; }

#stats-shell .qx-row-pleno { width: 100% !important; display: grid !important; grid-template-columns: 1fr 16px !important; gap: 0 !important; background: #fce8e6 !important; border: none !important; border-top: 2px solid #f8aba6 !important; border-bottom: 1px solid #f1f5f9 !important; padding: 2px 6px !important; text-align: left !important; cursor: pointer !important; border-radius: 0 !important; }
#stats-shell .qx-row-pleno:hover { background: #fdf2f2 !important; }
#stats-shell .qx-row-pleno.is-active { background: #fdf2f2 !important; }

#stats-shell .qx-pleno-lines { display: flex !important; flex-direction: column !important; }
#stats-shell .qx-pleno-line { display: grid !important; grid-template-columns: minmax(0, 1fr) 28px var(--qx-goal-w) var(--qx-goal-w) var(--qx-goal-w) var(--qx-goal-w) !important; gap: 3px !important; align-items: center !important; padding: 4px 0 !important; }
#stats-shell .qx-pleno-line + .qx-pleno-line { border-top: 1px solid rgba(202,25,27,.08) !important; }

#stats-shell .qx-chevron { color: var(--qx-muted) !important; font-size: 1.25rem !important; line-height: 1 !important; text-align: center !important; transition: transform 0.2s !important; justify-self: end !important; }
#stats-shell .qx-row:hover .qx-chevron, #stats-shell .qx-row-pleno:hover .qx-chevron { color: var(--qx-red) !important; transform: translateX(3px) !important; }
#stats-shell .qx-row.is-active .qx-chevron, #stats-shell .qx-row-pleno.is-active .qx-chevron { transform: rotate(90deg) !important; color: var(--qx-red) !important; }
#stats-shell .qx-chevron-pleno { align-self: center !important; }

#stats-shell .qx-teams-wrap { display: flex !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; overflow: hidden !important; }

#stats-shell .qx-team-logo-wrap img { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; object-fit: contain !important; vertical-align: middle !important; flex-shrink: 0 !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }
#stats-shell .qx-team-logo { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-width: 22px !important; max-height: 22px !important; object-fit: contain !important; vertical-align: middle !important; flex-shrink: 0 !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }
#stats-shell .qx-data-header .qx-team-logo { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; }
#stats-shell .qx-pleno-detail-row .qx-team-logo { width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; max-width: 14px !important; max-height: 14px !important; }

#stats-shell .qx-team-name { font-size: 0.72rem !important; font-weight: 800 !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#stats-shell .qx-match-time { font-size: 0.65rem !important; color: var(--qx-muted) !important; font-weight: 600 !important; margin-left: auto !important; padding-right: 8px !important; }
#stats-shell .qx-num { font-size: 0.65rem !important; line-height: 1 !important; color: var(--qx-accent) !important; font-weight: 800 !important; text-align: center !important; justify-self: center !important; align-self: center !important; background: transparent !important; border: none !important; width: auto !important; height: auto !important; }
#stats-shell .qx-num-pleno { color: #d38a00 !important; }

#stats-shell .qx-signs, #stats-shell .qx-goals { display: contents !important; }
#stats-shell .qx-sign, #stats-shell .qx-goal { width: var(--qx-sign-w) !important; height: var(--qx-sign-h) !important; min-width: var(--qx-sign-w) !important; min-height: var(--qx-sign-h) !important; border-radius: 3px !important; border: 1px solid #e2e8f0 !important; background: #ffffff !important; color: #94a3b8 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; transition: all .14s ease !important; }
#stats-shell .qx-sign b, #stats-shell .qx-goal b { font-size: 0.8rem !important; line-height: 1 !important; margin: 0 !important; font-weight: 600 !important; color: inherit !important;}

#stats-shell .qx-sign.is-cover, #stats-shell .qx-goal.is-cover { color: var(--qx-red) !important; background: var(--qx-red-soft) !important; border-color: var(--qx-red-soft-2) !important; }
#stats-shell .qx-sign.is-cover b, #stats-shell .qx-goal.is-cover b { font-weight: 800 !important; color: inherit !important; }

#stats-shell .qx-sign.is-main, #stats-shell .qx-goal.is-main { background: var(--qx-red) !important; color: #ffffff !important; border-color: var(--qx-red) !important; }
#stats-shell .qx-sign.is-main b, #stats-shell .qx-goal.is-main b { color: #ffffff !important; font-weight: 800 !important; }

#stats-shell .qx-detail-header-wrap { padding: .72rem !important; border-bottom: 1px solid var(--qx-line) !important; }
#stats-shell .qx-tab-content { padding: .72rem !important; }

#stats-shell .qx-detail-title { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; }
#stats-shell .qx-detail-title h3 { font-size: 1.08rem !important; line-height: 1.08 !important; letter-spacing: -.02em !important; }
#stats-shell .qx-detail-title h3 span { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
#stats-shell .qx-detail-title p { font-size: .68rem !important; font-weight: 700 !important; color: var(--qx-muted) !important; margin-top: 3px !important; }

#stats-shell .qx-detail-tags { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 4px !important; }
#stats-shell .qx-detail-tags .qx-chip { color: var(--qx-red) !important; background: var(--qx-red-soft) !important; border-color: var(--qx-red-soft-2) !important; }
#stats-shell .qx-detail-tags .qx-chip.is-success { color: var(--qx-green) !important; background: var(--qx-green-bg) !important; border-color: rgba(13,122,74,.14) !important; }
#stats-shell .qx-detail-tags .qx-chip.is-warning { color: var(--qx-amber) !important; background: var(--qx-amber-bg) !important; border-color: rgba(168,93,0,.16) !important; }
#stats-shell .qx-detail-tags .qx-chip.is-danger { color: var(--qx-danger) !important; background: var(--qx-danger-bg) !important; border-color: rgba(166,27,27,.16) !important; }

#stats-shell .qx-pleno-detail { display: grid !important; gap: 8px !important; padding: 12px !important; border: 1px solid var(--qx-line) !important; border-radius: 12px !important; background: var(--qx-surface-soft) !important; margin-bottom: 0.85rem !important;}
#stats-shell .qx-pleno-detail-row { display: grid !important; grid-template-columns: minmax(120px, 1fr) auto !important; gap: 8px !important; align-items: center !important; }
#stats-shell .qx-pleno-detail-row > strong { min-width: 0 !important; color: var(--qx-ink) !important; font-size: 0.85rem !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#stats-shell .qx-pleno-goals { display: grid !important; grid-template-columns: repeat(4, 46px) !important; gap: 4px !important; justify-content: end !important;}
#stats-shell .qx-pleno-cell { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; min-height: 38px !important; border: 1px solid var(--qx-line) !important; border-radius: 8px !important; background: #fff !important; padding: 4px !important; }
#stats-shell .qx-pleno-cell b { font-size: 0.85rem !important; margin: 0 !important; line-height: 1 !important; color: var(--qx-ink) !important; }
#stats-shell .qx-pleno-cell small { margin-top: 2px !important; color: var(--qx-muted) !important; font-size: 0.65rem !important; font-weight: 800 !important; line-height: 1 !important; }
#stats-shell .qx-pleno-cell.is-cover { color: var(--qx-red) !important; background: var(--qx-red-soft) !important; border-color: var(--qx-red-soft-2) !important; }
#stats-shell .qx-pleno-cell.is-cover b, #stats-shell .qx-pleno-cell.is-cover small { color: var(--qx-red) !important; }
#stats-shell .qx-pleno-cell.is-main { color: #fff !important; background: var(--qx-red) !important; border-color: var(--qx-red) !important; }
#stats-shell .qx-pleno-cell.is-main small, #stats-shell .qx-pleno-cell.is-main b { color: rgba(255,255,255,.95) !important; }

#stats-shell .qx-tabs { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr)) !important; gap: 7px !important; margin-top: 14px !important; border:none !important; }
#stats-shell .qx-tab-btn { min-height: 34px !important; padding: 8px 9px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--qx-muted) !important; font-size: 0.72rem !important; font-weight: 800 !important; background: #ffffff !important; border: 1px solid rgba(152, 19, 20, .13) !important; border-radius: 11px !important; box-shadow: 0 4px 12px rgba(15, 23, 42, .045) !important; transition: all .16s ease !important; text-transform: uppercase !important; }
#stats-shell .qx-tab-btn.is-active { color: #ffffff !important; background: linear-gradient(135deg, var(--qx-red), var(--qx-red-2)) !important; border-color: transparent !important; box-shadow: 0 8px 17px rgba(152, 19, 20, .23) !important; }

#stats-shell .qx-data-card { background: var(--qx-card) !important; border: 1px solid var(--qx-line) !important; border-radius: 12px !important; box-shadow: var(--qx-shadow) !important; overflow: hidden !important; margin-bottom: 12px !important; }
#stats-shell .qx-data-header { background: var(--qx-surface-soft) !important; padding: 10px 12px !important; font-size: 0.78rem !important; color: var(--qx-ink) !important; border-bottom: 1px solid var(--qx-line) !important; text-align: left !important; }
#stats-shell .qx-data-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 12px !important; border-bottom: 1px solid var(--qx-line) !important; }
#stats-shell .qx-data-row:last-child { border-bottom: none !important; }
#stats-shell .qx-data-row span { font-size: 0.72rem !important; color: var(--qx-text) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.03em !important;}
#stats-shell .qx-data-row strong { font-size: 0.85rem !important; color: var(--qx-ink) !important; }

#stats-shell .qx-summary-hero { position: relative !important; padding: 14px !important; overflow: hidden !important; background: linear-gradient(135deg, rgba(152, 19, 20, .08), rgba(255, 255, 255, .98) 68%) !important; border: 1px solid rgba(152, 19, 20, .16) !important; border-radius: 12px !important; margin-bottom: 16px !important; }
#stats-shell .qx-summary-hero::after { content: "" !important; position: absolute !important; right: -44px !important; top: -58px !important; width: 135px !important; height: 135px !important; background: radial-gradient(circle, rgba(152, 19, 20, .12), transparent 68%) !important; pointer-events: none !important; }
#stats-shell .qx-summary-kicker { position: relative !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; margin: 0 0 8px !important; padding: 4px 8px !important; color: var(--qx-red) !important; font-size: 0.6rem !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: .055em !important; background: rgba(255, 255, 255, .82) !important; border: 1px solid rgba(152, 19, 20, .13) !important; border-radius: 999px !important; }
#stats-shell .qx-summary-hero h4 { position: relative !important; z-index: 1 !important; margin: 0 0 6px !important; color: var(--qx-ink) !important; font-size: 1rem !important; line-height: 1.18 !important; letter-spacing: -.028em !important; }
#stats-shell .qx-summary-hero p { position: relative !important; z-index: 1 !important; margin: 0 !important; color: var(--qx-text) !important; font-size: 0.78rem !important; line-height: 1.42 !important; }

#stats-shell .qx-warning-box { padding: 12px !important; background: var(--qx-amber-bg) !important; border: 1px solid rgba(168, 93, 0, .23) !important; border-radius: 12px !important; margin-bottom: 14px !important; }
#stats-shell .qx-warning-box strong { font-size: 0.78rem !important; margin-bottom: 5px !important; display: block !important; color: var(--qx-ink) !important;}
#stats-shell .qx-warning-box ul { padding-left: 18px !important; color: #704100 !important;}
#stats-shell .qx-warning-box li { font-size: 0.78rem !important; font-weight: 600 !important; margin-bottom: 4px !important; list-style-type: disc !important; }

#stats-shell .qx-editorial-keys h4 { font-size: 0.68rem !important; text-transform: uppercase !important; color: var(--qx-muted) !important; margin: 0 0 10px 0 !important; }
#stats-shell .qx-editorial-keys li { font-size: 0.78rem !important; line-height: 1.4 !important; color: var(--qx-text) !important; padding-left: 18px !important; position: relative !important; margin-bottom: 6px !important; }

/* --- REDISEÑO 3 COLUMNAS ESTRATEGIA --- */
#stats-shell .qx-strategy-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; margin-bottom: 16px !important;}
#stats-shell .qx-strat-card { background: var(--qx-surface-soft) !important; border: 1px solid var(--qx-line) !important; border-radius: 12px !important; padding: 12px !important; text-align: left !important; box-shadow: 0 2px 6px rgba(15,23,42,0.02) !important; }
#stats-shell .qx-strat-card span { display: block !important; font-size: 0.62rem !important; color: var(--qx-muted) !important; text-transform: uppercase !important; font-weight: 850 !important; margin-bottom: 6px !important; }
#stats-shell .qx-strat-card strong { display: block !important; font-size: 0.82rem !important; line-height: 1.4 !important; color: var(--qx-ink) !important; font-weight: 800 !important; white-space: normal !important; word-wrap: break-word !important;}
#stats-shell .qx-strat-avoid { background: var(--qx-danger-bg) !important; border-color: rgba(166,27,27,.15) !important; }
#stats-shell .qx-strat-avoid strong { color: var(--qx-danger) !important; }

#stats-shell .qx-global-lists { margin-bottom: 20px !important; }
#stats-shell .qx-global-lists h4 { font-size: 0.82rem !important; color: var(--qx-ink) !important; margin: 0 0 10px 0 !important; padding-bottom: 6px !important; border-bottom: 2px solid var(--qx-red) !important; }
#stats-shell .qx-global-lists li { background: #fff !important; border: 1px solid var(--qx-line) !important; padding: 10px 12px !important; border-radius: 10px !important; margin-bottom: 8px !important; font-size: 0.82rem !important; display: flex !important; justify-content: space-between !important; align-items: center !important; box-shadow: 0 2px 4px rgba(15,23,42,0.02) !important; }
#stats-shell .qx-global-lists li span { background: var(--qx-red-soft) !important; color: var(--qx-red) !important; padding: 3px 8px !important; border-radius: 6px !important; font-weight: 800 !important; font-size: 0.68rem !important; }
#stats-shell .qx-global-traps h4 { border-bottom-color: var(--qx-amber) !important; }
#stats-shell .qx-global-traps li span { background: var(--qx-amber-bg) !important; color: var(--qx-amber) !important; }

#stats-shell .qx-data-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
#stats-shell .qx-data-subheader { background: #f8fafc !important; padding: 6px 12px !important; font-size: 0.65rem !important; font-weight: 800 !important; color: var(--qx-muted) !important; text-transform: uppercase !important; border-top: 1px solid var(--qx-line) !important; border-bottom: 1px solid var(--qx-line) !important; }
#stats-shell .qx-mini-match-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#stats-shell .qx-mini-match-list li { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 6px 12px !important; border-bottom: 1px solid var(--qx-line) !important; margin: 0 !important; }
#stats-shell .qx-mini-match-list li:last-child { border-bottom: none !important; }
#stats-shell .qx-mini-date { font-size: 0.65rem !important; color: var(--qx-muted) !important; width: 35px !important; flex-shrink: 0 !important; }
#stats-shell .qx-mini-opp { font-size: 0.72rem !important; color: var(--qx-ink) !important; font-weight: 600 !important; flex-grow: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#stats-shell .qx-mini-opp small { color: var(--qx-muted) !important; font-weight: 500 !important; }
#stats-shell .qx-mini-score { font-size: 0.75rem !important; color: var(--qx-ink) !important; font-weight: 800 !important; width: 30px !important; text-align: center !important; flex-shrink: 0 !important;}
#stats-shell .qx-mini-res { display: flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; border-radius: 3px !important; font-size: 0.56rem !important; font-weight: 900 !important; color: #fff !important; flex-shrink: 0 !important;}
#stats-shell .qx-mini-res.is-win { background: var(--qx-green) !important; }
#stats-shell .qx-mini-res.is-draw { background: var(--qx-muted) !important; }
#stats-shell .qx-mini-res.is-loss { background: var(--qx-danger) !important; }

#stats-shell .qx-empty { padding: 12px !important; border: 1px solid var(--qx-line) !important; border-radius: 12px !important; color: var(--qx-muted) !important; background: var(--qx-bg) !important; font-size: 0.75rem !important; font-weight: 800 !important; text-align: center !important; }

#stats-shell .qx-btn-back { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 3px 8px !important; font-size: 0.62rem !important; font-weight: 800 !important; color: var(--qx-text) !important; background: var(--qx-card) !important; border: 1px solid var(--qx-line-2) !important; border-radius: 6px !important; box-shadow: 0 1px 2px rgba(0,0,0,.035) !important; transition: all 0.2s !important; }
#stats-shell .qx-btn-back:hover { background: var(--qx-bg) !important; color: var(--qx-ink) !important; }

#stats-shell .qx-expandable-content { position: relative !important; max-height: 4.8rem !important; overflow: hidden !important; transition: max-height 0.4s ease !important; }
#stats-shell .qx-expandable-container:not(.is-expanded) .qx-expandable-content::after { content: "" !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 2.2rem !important; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) 85%) !important; pointer-events: none !important; }
#stats-shell .qx-expandable-container.is-expanded .qx-expandable-content { max-height: 800px !important; }
#stats-shell .qx-expandable-container.is-expanded .qx-btn-expand { display: none !important; }
#stats-shell .qx-btn-expand { display: block !important; width: 100% !important; background: transparent !important; border: none !important; color: var(--qx-red) !important; font-size: 0.72rem !important; font-weight: 850 !important; text-align: center !important; padding: 6px 0 0 0 !important; margin-top: 4px !important; cursor: pointer !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; }

#stats-shell .qx-prob-row { margin-bottom: 8px !important; }
#stats-shell .qx-prob-row:last-child { margin-bottom: 0 !important; }
#stats-shell .qx-prob-row-head { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; margin-bottom: 5px !important; }
#stats-shell .qx-prob-row-head span { font-size: 0.68rem !important; color: var(--qx-muted) !important; font-weight: 800 !important; text-transform: uppercase !important; }
#stats-shell .qx-prob-row-head b { font-size: 0.85rem !important; color: var(--qx-ink) !important; font-weight: 850 !important; line-height: 1 !important; }
#stats-shell .qx-prob-bar { height: 6px !important; background: var(--qx-line) !important; border-radius: 4px !important; overflow: hidden !important; }
#stats-shell .qx-prob-bar span { display: block !important; height: 100% !important; background: linear-gradient(90deg, var(--qx-red), var(--qx-red-2)) !important; border-radius: inherit !important; transition: width 0.6s ease !important; }

/* Fix específico de PC para anchos */
@media (min-width: 901px) {
    #stats-shell .qx-btn-back { font-size: 0.68rem !important; min-height: 24px !important; padding: 5px 10px !important; }
}

/* ==========================================================================
   MEDIA QUERIES (VERSIÓN MÓVIL BLINDADA)
   ========================================================================== */
@media (max-width: 1000px) {
    #stats-shell .qx-grid { grid-template-columns: minmax(380px, 420px) minmax(400px, 1fr) !important; }
}

@media (max-width: 700px) {
    #stats-shell { padding: 0.5rem 0 85px 0 !important; }
    
    #stats-shell .qx-topbar { grid-template-columns: 1fr !important; gap: 7px !important; padding: .68rem !important; border-radius: 0 !important; border-left: none !important; border-right: none !important;}
    #stats-shell .qx-topbar h1, #stats-shell .qx-topbar h2 { font-size: 1.12rem !important; line-height: 1.12 !important; }
    
    #stats-shell .qx-grid { display: block !important; margin-top: 7px !important; }
    #stats-shell .qx-detail { display: none !important; }
    #stats-shell .qx-desktop-only { display: none !important; }

    #stats-shell .qx-row { grid-template-columns: minmax(0, 1fr) 22px var(--qx-sign-w) var(--qx-sign-w) var(--qx-sign-w) 14px !important; padding: 2px 6px !important; gap: 5px !important; min-height: 40px !important; }
    #stats-shell .qx-pleno-line { grid-template-columns: minmax(0, 1fr) 24px var(--qx-goal-w) var(--qx-goal-w) var(--qx-goal-w) var(--qx-goal-w) !important; padding: 3px 0 !important; }

    #stats-shell .qx-inline-detail { 
        display: block !important; 
        margin: 6px 4px 16px 4px !important; 
        padding: 0 !important; 
        border: 2px solid var(--qx-red) !important; 
        border-radius: 12px !important; 
        background: #ffffff !important; 
        box-shadow: 0 16px 35px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .15) !important; 
        overflow: hidden !important; 
    }
    
    #stats-shell .qx-popup-top { background: linear-gradient(135deg, rgba(152, 19, 20, .08), rgba(152, 19, 20, .025) 52%, rgba(255, 255, 255, .98)) !important; border-bottom: 1px solid var(--qx-line) !important; padding: 12px 14px !important; }
    #stats-shell .qx-popup-body { padding: 12px !important; background: var(--qx-bg) !important; }
    
    #stats-shell .qx-inline-detail .qx-detail-title { 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: flex-start !important; 
        padding-bottom: 0 !important; 
        margin-bottom: 0 !important; 
    }
    
    #stats-shell .qx-inline-detail .qx-detail-title h3 { 
        font-size: 1.1rem !important; 
        color: var(--qx-ink) !important; 
        font-weight: 800 !important; 
        display: block !important;
        line-height: 1.2 !important;
        width: 100% !important;
    }
    
    #stats-shell .qx-inline-detail .qx-detail-title h3 span { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important;}
    #stats-shell .qx-inline-detail .qx-detail-title p { font-size: 0.75rem !important; margin: 6px 0 0 !important; color: var(--qx-text) !important; font-weight: 600 !important; line-height: 1.3 !important;}
    
    #stats-shell .qx-detail-tags { width: 100% !important; justify-content: space-between !important; margin-top: 10px !important; flex-direction: row-reverse !important;}
    #stats-shell .qx-pleno-detail-row { grid-template-columns: 1fr !important; gap: 4px !important; margin-bottom: 8px !important;}
    #stats-shell .qx-pleno-detail-row:last-child { margin-bottom: 0 !important; }
    #stats-shell .qx-pleno-goals { grid-template-columns: repeat(4, 1fr) !important; justify-content: stretch !important;}
    #stats-shell .qx-pleno-detail-row .qx-team-logo { width: 16px !important; height: 16px !important; }

    #stats-shell .qx-core-data-grid { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 12px !important; }
    #stats-shell .qx-data-grid, #stats-shell .qx-strategy-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
    
    #stats-shell .qx-tabs { grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; margin-top: 12px !important; margin-bottom: 0 !important;}
    #stats-shell .qx-tab-btn { min-height: 32px !important; padding: 6px 2px !important; font-size: 0.65rem !important; border-radius: 10px !important; letter-spacing: -0.02em !important;}

    #stats-shell .qx-data-header { font-size: 0.75rem !important; padding: 8px 10px !important; }
    #stats-shell .qx-data-row span { font-size: 0.65rem !important; }
    #stats-shell .qx-data-row strong { font-size: 0.8rem !important; }
}