/* ═══════════════════════════════════════════════════════════════════════════
   WHISTLE — Score90X Design System
   Extraído 1:1 del archivo de diseño "Score90X Dashboard.dc.html"
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
    /* Fondos */
    --bg-main:      #0B0E1A;
    --bg-surface:   #0D111E;   /* header / sidebar */
    --bg-card:      rgba(255,255,255,.02);
    --bg-card-hover:rgba(255,255,255,.04);
    --bg-row:       rgba(255,255,255,.015);
    --bg-input:     rgba(255,255,255,.04);

    /* Bordes */
    --border-glass: rgba(255,255,255,.06);
    --border-glass-soft: rgba(255,255,255,.05);
    --border-active:rgba(108,92,231,.35);

    /* Acentos — paleta exacta Score90X */
    --accent-neon:  #6C5CE7;   /* violeta primario */
    --accent-neon-light: #9C8BFF;
    --accent-neon-dark:  #4B3BC9;
    --accent-blue:  #3B82F6;   /* azul — equipo visitante / live */
    --accent-blue-light: #5DA0FF;
    --accent-red:   #EF4444;   /* rojo — live / alertas */
    --accent-gold:  #F59E0B;   /* dorado — highlights */
    --accent-gold-dark: #D97706;
    --accent-green: #34D399;   /* verde — positivo / clasificado */

    /* Texto */
    --text-main:    #E6E8F2;
    --text-bright:  #FFFFFF;
    --text-sub:     #C7CBDA;
    --text-muted:   #8B91A7;
    --text-dim:     #565C73;

    /* Cancha (se mantiene para vistas 3D existentes) */
    --pitch-dark:   #166534;
    --pitch-light:  #15803d;

    /* Layout */
    --sidebar-w-open:  220px;
    --sidebar-w-closed: 64px;
    --nav-height:       64px;

    /* Tipografía — Sora (display) + Manrope (body), del diseño original */
    --font-heading: 'Sora', 'Manrope', system-ui, sans-serif;
    --font-body:    'Manrope', system-ui, sans-serif;

    /* Sombras */
    --shadow-card:  0 4px 24px rgba(0,0,0,.4);
    --shadow-live:  0 8px 24px rgba(239,68,68,.35);
    --shadow-glow:  0 8px 24px rgba(108,92,231,.4);
    --shadow-glow-gold: 0 8px 24px rgba(245,158,11,.35);

    /* Radios — generosos, como el diseño original */
    --radius-sm:  9px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 20px;

    /* alias retrocompat */
    --surface-color: #0D111E;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width:8px; height:8px; }
::-webkit-scrollbar-track  { background:transparent; }
::-webkit-scrollbar-thumb  { background:rgba(255,255,255,.08); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:rgba(108,92,231,.4); }

/* ── Animaciones globales ────────────────────────────────────────────────── */
.fade-in { animation: fadeIn 280ms ease-out forwards; }
@keyframes fadeIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0);    }
}

@keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.35; transform:scale(.7); }
}

/* s90pulse: el punto blanco dentro del badge LIVE */
@keyframes s90pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.35; transform:scale(.7); }
}

/* s90glow: el halo rojo pulsante alrededor del badge LIVE */
@keyframes livePulse {
    0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.5); }
    50%      { box-shadow:0 0 0 6px rgba(239,68,68,0); }
}

@keyframes spin {
    100% { transform:rotate(360deg); }
}

@keyframes skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position:-200% 0; }
}

/* ── Skeleton loaders ────────────────────────────────────────────────────── */
.skel-cell {
    height:14px;
    background:linear-gradient(90deg,
        rgba(255,255,255,.04) 25%,
        rgba(255,255,255,.09) 50%,
        rgba(255,255,255,.04) 75%);
    background-size:300% 100%;
    animation:skel-shimmer 1.5s ease-in-out infinite;
    border-radius:4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — fiel a la columna izquierda del Score90X dc.html (232px, 18px/14px pad)
   ══════════════════════════════════════════════════════════════════════════ */
.sidebar {
    position:fixed; top:0; left:0;
    height:100vh;
    width:var(--sidebar-w-open);
    background:var(--bg-surface);
    border-right:1px solid var(--border-glass);
    display:flex; flex-direction:column;
    z-index:1000;
    transition:width .25s ease;
    overflow:hidden;
}
.sidebar.closed { width:var(--sidebar-w-closed); }

/* Header */
.sidebar-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px;
    height:var(--nav-height);
    border-bottom:1px solid var(--border-glass);
    flex-shrink:0;
}
.sidebar-logo {
    font-family:var(--font-heading);
    font-size:1.3rem; font-weight:800;
    color:var(--text-bright);
    letter-spacing:-.5px;
    white-space:nowrap; overflow:hidden;
    transition:opacity .15s;
}
.sidebar-logo::after { content:''; }
.sidebar.closed .sidebar-logo { opacity:0; pointer-events:none; width:0; }

.sidebar-toggle {
    background:rgba(255,255,255,.04); border:1px solid var(--border-glass); cursor:pointer;
    color:var(--text-muted); font-size:1rem; line-height:1;
    padding:7px; border-radius:var(--radius-sm); flex-shrink:0;
    transition:color .2s, background .2s;
}
.sidebar-toggle:hover { color:var(--text-main); background:rgba(255,255,255,.07); }

/* Nav — replica .s90nav del diseño */
.sidebar-nav {
    flex:1; display:flex; flex-direction:column;
    padding:14px 10px; gap:4px;
    overflow-y:auto; overflow-x:hidden;
}

.sidebar-link {
    display:flex; align-items:center; gap:13px;
    height:42px;
    padding:0 13px;
    color:var(--text-muted);
    text-decoration:none;
    font-family:var(--font-body);
    font-size:.84rem; font-weight:600;
    white-space:nowrap;
    border-radius:11px;
    margin:0;
    transition:background .15s, color .15s;
    cursor:pointer; border:none; background:none;
    width:100%; text-align:left;
}
.sidebar-link:hover  { background:rgba(255,255,255,.05); color:var(--text-main); }
.sidebar-link.active {
    background:rgba(108,92,231,.16);
    color:var(--text-bright);
    box-shadow:inset 3px 0 0 var(--accent-neon);
}

.sidebar-icon  { font-size:1.05rem; flex-shrink:0; width:22px; text-align:center; }
.sidebar-label { flex:1; transition:opacity .15s; white-space:nowrap; }
.sidebar.closed .sidebar-label { opacity:0; pointer-events:none; }

.sidebar-divider { height:1px; background:var(--border-glass); margin:8px 14px; }

/* Footer — banner promo estilo "trophy card" del diseño */
.sidebar-footer {
    padding:10px 10px 16px;
    border-top:1px solid var(--border-glass);
    display:flex; flex-direction:column; gap:6px;
    flex-shrink:0;
}

.sidebar-plan {
    display:flex; align-items:center; gap:12px;
    padding:9px 11px; border-radius:var(--radius-md);
    background:linear-gradient(160deg, rgba(58,31,110,.5), rgba(27,42,110,.4) 60%, rgba(14,19,48,.5));
    border:1px solid var(--border-glass);
    overflow:hidden;
}
.sidebar-plan-badge {
    font-family:var(--font-heading);
    font-size:.6rem; font-weight:800;
    padding:3px 9px; border-radius:20px; letter-spacing:1px; flex-shrink:0;
}
.sidebar-plan-name {
    font-size:.76rem; color:var(--text-sub); white-space:nowrap;
    transition:opacity .15s;
}
.sidebar.closed .sidebar-plan-name { opacity:0; }

/* Wrapper */
.sidebar-page-wrapper {
    margin-left:var(--sidebar-w-open);
    transition:margin-left .25s ease;
    min-height:100vh;
}
.sidebar-page-wrapper.sidebar-closed { margin-left:var(--sidebar-w-closed); }

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS / GLASS PANELS — replica las <section>/<div> del centro y panel derecho
   ══════════════════════════════════════════════════════════════════════════ */
.glass-panel {
    background:var(--bg-card);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-lg);
    padding:1.1rem 1.3rem;
    display:flex; flex-direction:column;
    overflow-y:auto;
}

.glass-card {
    background:var(--bg-card);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-md);
    padding:1.3rem;
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer;
    transition:transform .2s, border-color .2s, background .2s;
}
.glass-card:hover {
    transform:translateY(-3px);
    border-color:var(--border-active);
    background:var(--bg-card-hover);
}

/* Panel title */
.panel-title {
    font-family:var(--font-heading);
    font-size:.92rem; font-weight:800;
    color:var(--text-bright);
    margin-bottom:.85rem;
    padding-bottom:.6rem;
    border-bottom:1px solid var(--border-glass-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT GENERAL
   ══════════════════════════════════════════════════════════════════════════ */
.page-container {
    padding:1.4rem 1.8rem 2rem;
    max-width:1100px;
    margin:0 auto;
    min-height:100vh;
}

.section-title {
    font-family:var(--font-heading);
    font-size:1.4rem; font-weight:800;
    color:var(--text-bright);
    margin-bottom:1.4rem;
    padding-bottom:.7rem;
    border-bottom:1px solid var(--border-glass);
    letter-spacing:-.3px;
}

.category-title {
    font-family:var(--font-heading);
    font-size:.95rem; font-weight:700;
    color:var(--text-muted);
    margin:1.7rem 0 .75rem;
    text-transform:uppercase; letter-spacing:1.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES & STATUS — del diseño: badgeBg/badgeColor sobre m.ht/m.vs/live
   ══════════════════════════════════════════════════════════════════════════ */
.badge-live {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--accent-red);
    color:#fff;
    font-family:var(--font-body);
    font-size:.62rem; font-weight:800; letter-spacing:.5px;
    padding:5px 11px; border-radius:9px;
    animation:livePulse 1.8s ease-in-out infinite;
}
.badge-live::before {
    content:'';
    width:7px; height:7px; border-radius:50%;
    background:#fff;
    animation:s90pulse 1.2s ease-in-out infinite;
}

.badge-liga {
    padding:4px 10px; border-radius:9px;
    font-family:var(--font-body);
    font-size:.68rem; font-weight:800;
    color:#fff;
}

/* ── Btn primary — gradiente violeta→azul del botón "Watch Live" ──────────── */
.btn-primary {
    background:linear-gradient(135deg, var(--accent-neon), var(--accent-blue));
    color:#fff; border:none; border-radius:11px;
    padding:11px 20px;
    font-family:var(--font-body);
    font-size:.85rem; font-weight:700;
    cursor:pointer; transition:filter .2s, transform .2s;
    box-shadow:var(--shadow-glow);
}
.btn-primary:hover { filter:brightness(1.12); transform:translateY(-1px); }

/* ── Submit / Login ──────────────────────────────────────────────────────── */
.btn-submit {
    background:var(--accent-neon);
    color:#fff; border:none; border-radius:11px;
    padding:13px; width:100%;
    font-family:var(--font-heading);
    font-size:1.05rem; font-weight:700;
    cursor:pointer; transition:filter .2s, transform .2s;
}
.btn-submit:hover { filter:brightness(1.12); transform:translateY(-2px); }

/* ── Glass input ─────────────────────────────────────────────────────────── */
.glass-input {
    background:var(--bg-input);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-sm);
    padding:13px 14px; color:var(--text-main);
    font-family:var(--font-body); font-size:.92rem;
    outline:none; transition:border-color .2s; width:100%;
}
.glass-input:focus { border-color:var(--accent-neon); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN / LANDING
   ══════════════════════════════════════════════════════════════════════════ */
.login-view {
    height:100vh; display:flex;
    justify-content:center; align-items:center;
    background:radial-gradient(120% 140% at 50% -20%, #5A2A8C 0%, #2A2270 38%, #141A3A 72%, var(--bg-main) 100%);
}
.login-card {
    background:var(--bg-surface);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-xl);
    padding:2.6rem; width:100%; max-width:400px; text-align:center;
    box-shadow:var(--shadow-card);
}
.login-logo {
    font-family:var(--font-heading);
    font-size:2.3rem; font-weight:800;
    color:var(--text-bright); margin-bottom:2rem; letter-spacing:-.5px;
}
.login-logo span { color:var(--accent-neon); }

.input-container {
    display:flex; flex-direction:column;
    text-align:left; gap:.4rem; margin-bottom:1.2rem;
}
.input-container label {
    font-size:.74rem; color:var(--text-muted);
    font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGA DETALLE
   ══════════════════════════════════════════════════════════════════════════ */
.liga-header {
    display:flex; align-items:center; gap:1.2rem;
    padding:1.2rem 1.5rem;
    background:var(--bg-surface);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-lg);
    margin-bottom:1.5rem;
}
.liga-flag-large  { font-size:2.8rem; }
.liga-title-main  { font-family:var(--font-heading); font-size:1.85rem; font-weight:800; line-height:1.1; letter-spacing:-.3px; }
.liga-content-grid { display:grid; grid-template-columns:2fr 1fr; gap:1.2rem; }

/* Standings table */
.table-responsive    { width:100%; overflow-x:auto; }
.standings-table     { width:100%; border-collapse:collapse; font-size:.85rem; }
.standings-table th  { padding:10px 8px; color:var(--text-dim); border-bottom:1px solid var(--border-glass); font-family:var(--font-body); text-transform:uppercase; letter-spacing:.5px; font-size:.68rem; font-weight:700; }
.standings-table td  { padding:10px 8px; border-bottom:1px solid var(--border-glass-soft); }
.standings-table tbody tr { transition:background .18s; cursor:pointer; }
.standings-table tbody tr:hover { background:rgba(255,255,255,.035); }
.col-pos  { width:36px; font-weight:700; color:var(--text-dim); }
.col-team { font-weight:700; display:flex; align-items:center; gap:8px; color:var(--text-sub); }
.col-pts  { font-weight:800; color:var(--accent-green); }

.team-shield {
    width:22px; height:22px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:.55rem;
    border:1px solid var(--border-glass);
}

/* Match items — replica .s90row */
.match-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 0; border-bottom:1px solid var(--border-glass-soft);
}
.match-item:last-child { border-bottom:none !important; }
.match-teams { display:flex; flex-direction:column; gap:4px; font-size:.87rem; font-weight:700; color:var(--text-main); }
.match-date  {
    font-size:.68rem; color:var(--accent-neon);
    background:rgba(108,92,231,.14);
    padding:4px 9px; border-radius:7px;
    font-weight:800;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISTA EQUIPO / ALINEACIÓN
   ══════════════════════════════════════════════════════════════════════════ */
.equipo-header {
    display:flex; align-items:center; gap:1.2rem; margin-bottom:1.5rem;
    background:linear-gradient(90deg, rgba(108,92,231,.14) 0%, transparent 100%);
    padding:1.2rem 1.5rem; border-radius:var(--radius-lg);
    border:1px solid rgba(108,92,231,.25);
}
.equipo-title { font-family:var(--font-heading); font-size:1.85rem; font-weight:800; letter-spacing:-.3px; }
.equipo-grid  { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }

.roster-list { display:flex; flex-direction:column; gap:.4rem; margin-top:.8rem; }
.roster-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 12px; background:var(--bg-row);
    border:1px solid var(--border-glass-soft); border-radius:var(--radius-sm);
}
.player-num  { font-family:var(--font-heading); font-weight:800; font-size:1.05rem; color:var(--accent-neon-light); width:32px; }
.player-name { flex:1; font-weight:700; font-size:.86rem; color:var(--text-main); }
.player-pos  { font-size:.7rem; font-weight:700; padding:3px 8px; background:rgba(255,255,255,.06); border-radius:6px; color:var(--text-muted); }

/* Cancha 3D */
.tactical-board { display:flex; justify-content:center; align-items:center; padding:1.5rem 0; }
.pitch-vertical {
    width:300px; height:450px;
    background:repeating-linear-gradient(0deg,
        var(--pitch-dark), var(--pitch-dark) 10%,
        var(--pitch-light) 10%, var(--pitch-light) 20%);
    transform:rotateX(45deg);
    border:2px solid rgba(255,255,255,.6);
    border-radius:6px; position:relative;
    box-shadow:0 40px 60px rgba(0,0,0,.9),inset 0 0 30px rgba(0,0,0,.5);
    transform-style:preserve-3d;
}
.pitch-vertical::before { content:''; position:absolute; top:50%; width:100%; height:2px; background:rgba(255,255,255,.6); transform:translateY(-50%); }
.pitch-vertical::after  { content:''; position:absolute; top:50%; left:50%; width:70px; height:70px; border:2px solid rgba(255,255,255,.6); border-radius:50%; transform:translate(-50%,-50%); }
.area-top-v,.area-bottom-v { position:absolute; left:50%; width:48%; height:16%; border:2px solid rgba(255,255,255,.6); transform:translateX(-50%); }
.area-top-v    { top:0;    border-top:none;    }
.area-bottom-v { bottom:0; border-bottom:none; }

.pitch-perspective { perspective:1000px; width:100%; display:flex; justify-content:center; align-items:center; }
.pitch-horizontal {
    width:100%; max-width:620px; aspect-ratio:1.6/1;
    background:repeating-linear-gradient(90deg,
        var(--pitch-dark), var(--pitch-dark) 10%,
        var(--pitch-light) 10%, var(--pitch-light) 20%);
    transform:rotateX(35deg);
    border:2px solid rgba(255,255,255,.6); border-radius:6px; position:relative;
    box-shadow:0 40px 60px rgba(0,0,0,.9),inset 0 0 40px rgba(0,0,0,.5);
    transform-style:preserve-3d;
}
.pitch-horizontal::before { content:''; position:absolute; left:50%; top:0; height:100%; width:2px; background:rgba(255,255,255,.6); transform:translateX(-50%); }
.pitch-horizontal::after  { content:''; position:absolute; top:50%; left:50%; width:75px; height:75px; border:2px solid rgba(255,255,255,.6); border-radius:50%; transform:translate(-50%,-50%); }
.area-left,.area-right { position:absolute; top:50%; width:15%; height:45%; border:2px solid rgba(255,255,255,.6); transform:translateY(-50%); }
.area-left  { left:0;  border-left:none;  }
.area-right { right:0; border-right:none; }

.player-token {
    position:absolute; width:28px; height:28px;
    background:var(--text-main); color:#0B0E1A;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-heading); font-weight:800; font-size:13px;
    transform:translate(-50%,-50%) translateZ(25px) rotateX(-45deg);
    box-shadow:0 15px 15px rgba(0,0,0,.8);
    border:2px solid var(--accent-neon); transition:.3s; cursor:pointer;
}
.player-token:hover { background:var(--accent-neon); color:#fff; transform:translate(-50%,-50%) translateZ(35px) rotateX(-45deg) scale(1.2); }

.pos-gk  { bottom:5%;  left:50%; } .pos-df1 { bottom:22%; left:15%; } .pos-df2 { bottom:18%; left:38%; }
.pos-df3 { bottom:18%; left:62%; } .pos-df4 { bottom:22%; left:85%; }
.pos-md1 { bottom:42%; left:25%; } .pos-md2 { bottom:35%; left:50%; } .pos-md3 { bottom:42%; left:75%; }
.pos-fw1 { top:25%;    left:25%; } .pos-fw2 { top:15%;    left:50%; } .pos-fw3 { top:25%;    left:75%; }

/* ═══════════════════════════════════════════════════════════════════════════
   H2H
   ══════════════════════════════════════════════════════════════════════════ */
.h2h-header-panel {
    display:flex; justify-content:space-around; align-items:center;
    padding:1.6rem; margin-bottom:1.5rem;
    background:linear-gradient(135deg, rgba(255,255,255,.02) 0%, rgba(108,92,231,.06) 100%);
    border-radius:var(--radius-lg);
}
.h2h-team            { display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; }
.h2h-team .team-shield { width:80px; height:80px; font-size:2.5rem; box-shadow:0 10px 20px rgba(0,0,0,.5); }
.h2h-team-name       { font-family:var(--font-heading); font-size:1.7rem; font-weight:800; text-align:center; letter-spacing:-.3px; }
.h2h-vs              { font-family:var(--font-heading); font-size:2.3rem; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--accent-neon), var(--accent-blue)); padding:10px 18px; border-radius:var(--radius-md); box-shadow:var(--shadow-glow); z-index:10; }
.h2h-stats-board     { display:flex; flex-direction:column; gap:1.2rem; padding:1.5rem; }
.h2h-stat-row        { display:flex; flex-direction:column; gap:7px; }
.h2h-stat-labels     { display:flex; justify-content:space-between; font-weight:700; font-size:.95rem; }
.h2h-stat-labels .lbl-center { font-size:.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.h2h-bar-container   { display:flex; width:100%; height:6px; background:rgba(0,0,0,.4); border-radius:4px; overflow:hidden; gap:4px; }
.h2h-bar-left        { background:linear-gradient(90deg, var(--accent-neon-light), var(--accent-neon)); display:flex; justify-content:flex-end; border-radius:4px 0 0 4px; }
.h2h-bar-right       { background:linear-gradient(90deg, var(--accent-blue), var(--accent-blue-light)); border-radius:0 4px 4px 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   NOTICIAS — replica .s90news
   ══════════════════════════════════════════════════════════════════════════ */
.news-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; margin-top:1.2rem; }
.news-card {
    background:var(--bg-card);
    border:1px solid var(--border-glass);
    border-radius:var(--radius-md); overflow:hidden;
    transition:transform .2s, background .2s;
    display:flex; flex-direction:column;
}
.news-card:hover { transform:translateY(-4px); background:var(--bg-card-hover); }

.news-image-placeholder {
    width:100%; height:150px;
    background:linear-gradient(45deg, #11162A, #1B2240);
    display:flex; align-items:center; justify-content:center;
    font-size:2.5rem; border-bottom:1px solid var(--border-glass);
}
.news-content { padding:1.2rem; display:flex; flex-direction:column; flex:1; }
.news-header  { display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; }
.news-tag     { font-size:.65rem; font-weight:800; text-transform:uppercase; padding:3px 8px; border-radius:5px; letter-spacing:.5px; }
.tag-mercado      { background:rgba(108,92,231,.16); color:var(--accent-neon-light); }
.tag-lesion       { background:rgba(239,68,68,.16);  color:var(--accent-red);  }
.tag-declaracion  { background:rgba(245,158,11,.16);  color:var(--accent-gold); }
.news-date    { font-size:.74rem; color:var(--text-dim); }
.news-title   { font-family:var(--font-heading); font-size:1.1rem; font-weight:700; color:var(--text-bright); margin-bottom:.6rem; line-height:1.25; }
.news-excerpt { font-size:.85rem; color:var(--text-muted); line-height:1.5; margin-bottom:1.2rem; flex:1; }
.news-read-more { font-family:var(--font-body); font-size:.85rem; font-weight:700; color:var(--accent-neon); text-decoration:none; transition:color .2s; }
.news-read-more:hover { color:var(--accent-neon-light); }

/* ═══════════════════════════════════════════════════════════════════════════
   LEAGUES GRID
   ══════════════════════════════════════════════════════════════════════════ */
.leagues-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.2rem; }
.league-info  { display:flex; align-items:center; gap:12px; }
.league-flag  { font-size:1.8rem; }
.league-name  { font-weight:700; font-size:.92rem; color:var(--text-main); }
.league-country { font-size:.75rem; color:var(--text-muted); margin-top:2px; }

.categoria-wrapper { margin-bottom:2rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT (legacy - World Cup home)
   ══════════════════════════════════════════════════════════════════════════ */
.dashboard-container {
    display:grid;
    grid-template-columns:280px 1fr 280px;
    grid-template-rows:1fr 80px;
    gap:1.2rem; padding:1.2rem;
    height:100vh; overflow:hidden;
}
.panel-left   { grid-column:1; grid-row:1; }
.panel-center { grid-column:2; grid-row:1; display:flex; justify-content:center; align-items:center; position:relative; }
.panel-right  { grid-column:3; grid-row:1; gap:10px; }
.panel-bottom { grid-column:1/-1; grid-row:2; display:flex; align-items:center; flex-direction:row; padding:0 1.2rem; gap:1.5rem; }

.stat-box    { margin-bottom:1rem; }
.stat-header { display:flex; justify-content:space-between; font-size:.75rem; font-weight:700; margin-bottom:5px; color:var(--text-muted); }
.stat-bar    { width:100%; height:6px; background:rgba(255,255,255,.07); border-radius:4px; overflow:hidden; display:flex; gap:4px; }
.stat-fill-local  { background:linear-gradient(90deg, var(--accent-neon-light), var(--accent-neon)); border-radius:4px 0 0 4px; }
.stat-fill-visita { background:linear-gradient(90deg, var(--accent-blue), var(--accent-blue-light)); border-radius:0 4px 4px 0; }
.stat-values { display:flex; justify-content:space-between; font-size:.95rem; font-family:var(--font-heading); font-weight:800; margin-top:5px; }

.mini-league { display:flex; align-items:center; gap:10px; padding:10px; background:var(--bg-row); border:1px solid var(--border-glass-soft); border-radius:var(--radius-sm); cursor:pointer; transition:.2s; }
.mini-league:hover { border-color:var(--border-active); background:rgba(108,92,231,.05); }
.mini-league-name { font-size:.86rem; font-weight:700; color:var(--text-main); }

.news-ticker { display:flex; gap:2.5rem; overflow:hidden; white-space:nowrap; width:100%; color:var(--text-main); font-size:.88rem; }
.news-item span { color:var(--accent-neon-light); font-weight:700; margin-right:6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   STAT BARS (H2H / Partido) — réplica exacta de la sección "Match Stats"
   ══════════════════════════════════════════════════════════════════════════ */
.stat-bar-row { margin-bottom:.95rem; }
.stat-bar-row .labels { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; font-size:.72rem; }
.stat-bar-row .labels span:first-child { font-weight:800; color:var(--accent-neon-light); width:34px; }
.stat-bar-row .labels span:last-child  { font-weight:800; color:var(--accent-blue-light); width:34px; text-align:right; }
.stat-bar-row .labels .lbl { font-size:.7rem; color:var(--text-muted); font-weight:600; }
.stat-bar-track { width:100%; height:6px; background:transparent; border-radius:4px; overflow:hidden; display:flex; gap:4px; }
.stat-bar-home  { background:linear-gradient(90deg, var(--accent-neon), var(--accent-neon-light)); border-radius:4px 0 0 4px; }
.stat-bar-away  { background:linear-gradient(90deg, var(--accent-blue), var(--accent-blue-light)); border-radius:0 4px 4px 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SCORE DISPLAY / LIVE — para vistas de partido en detalle
   ══════════════════════════════════════════════════════════════════════════ */
.score-display {
    font-family:var(--font-heading);
    font-size:2.5rem; font-weight:800;
    color:var(--text-bright); line-height:1.05;
    letter-spacing:1px;
}
.score-badge-home {
    display:grid; place-items:center;
    width:56px; height:56px; border-radius:14px;
    background:linear-gradient(135deg, var(--accent-neon), var(--accent-neon-dark));
    font-family:var(--font-heading); font-weight:800; font-size:1.7rem; color:#fff;
    box-shadow:var(--shadow-glow);
}
.score-badge-away {
    display:grid; place-items:center;
    width:56px; height:56px; border-radius:14px;
    background:linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
    font-family:var(--font-heading); font-weight:800; font-size:1.7rem; color:#fff;
    box-shadow:var(--shadow-glow-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHIPS / TABS — réplica .s90tab
   ══════════════════════════════════════════════════════════════════════════ */
.chip {
    height:34px; padding:0 15px; border-radius:9px; cursor:pointer;
    font-family:var(--font-body); font-weight:700; font-size:.78rem;
    border:none;
    background:transparent;
    color:var(--text-muted);
    transition:all .18s; white-space:nowrap;
    display:inline-flex; align-items:center;
}
.chip.active, .chip:hover {
    background:var(--accent-neon);
    color:#fff;
}
.chip:hover:not(.active) { color:var(--text-main); background:rgba(255,255,255,.05); }

/* ── Plan badges ──────────────────────────────────────────────────────────── */
.plan-badge-free   { background:rgba(139,145,167,.16); color:var(--text-muted); }
.plan-badge-pro    { background:rgba(108,92,231,.16);  color:var(--accent-neon-light); }
.plan-badge-promax { background:rgba(245,158,11,.16);  color:var(--accent-gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
    .dashboard-container { grid-template-columns:1fr; grid-template-rows:auto auto auto auto; height:auto; overflow-y:auto; }
    .panel-center { grid-column:1; grid-row:1; min-height:280px; }
    .panel-left   { grid-column:1; grid-row:2; }
    .panel-right  { grid-column:1; grid-row:3; }
    .panel-bottom { grid-column:1; grid-row:4; flex-direction:column; text-align:center; padding:.8rem; }
    .liga-content-grid,.equipo-grid { grid-template-columns:1fr; }
    .h2h-header-panel { flex-direction:column; gap:1.2rem; }
    .h2h-vs { transform:rotate(90deg); padding:5px 14px; }
}

@media (max-width:768px) {
    .sidebar {
        width:100% !important;
        height:var(--sidebar-w-closed);
        top:auto; bottom:0; left:0;
        flex-direction:row;
        border-right:none;
        border-top:1px solid var(--border-glass);
        padding-bottom:env(safe-area-inset-bottom);
    }
    .sidebar-header,.sidebar-divider,.sidebar-footer { display:none; }
    .sidebar-nav {
        flex-direction:row; padding:0; gap:0;
        overflow-x:auto; overflow-y:hidden;
        align-items:stretch; width:100%;
    }
    .sidebar-link {
        flex-direction:column; gap:2px;
        padding:7px 5px; margin:0; border-radius:0;
        width:auto; flex:1;
        align-items:center; justify-content:center;
        font-size:.55rem;
    }
    .sidebar-link.active { box-shadow:inset 0 3px 0 var(--accent-neon); }
    .sidebar-icon  { font-size:1.2rem; width:auto; }
    .sidebar-label { opacity:1 !important; font-size:.55rem; }
    .sidebar-page-wrapper,
    .sidebar-page-wrapper.sidebar-closed { margin-left:0 !important; padding-bottom:var(--sidebar-w-closed); }
    .page-container { padding:1rem 1rem 1rem; }
    .dashboard-container { padding-top:1rem; padding-bottom:calc(var(--sidebar-w-closed) + 1rem); }
}