/**
 * styles-additions.css — Whistle / Score90X
 * Complementa styles.css. Hover states fieles al .dc.html original.
 */

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.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;
}

/* ── Live pulse keyframes (compat) ───────────────────────────────────────── */
@keyframes pulse {
    0%,100% { opacity:1; }
    50%      { opacity:.4; }
}

/* ── Standings col-team flex fix ─────────────────────────────────────────── */
.standings-table .col-team { display:flex; align-items:center; }

/* ── Match item border cleanup ───────────────────────────────────────────── */
.match-item:last-child { border-bottom:none !important; }

/* ── Hover states — réplica exacta del .dc.html original ─────────────────── */
.s90row:hover  { background:rgba(255,255,255,.035); border-color:rgba(108,92,231,.35); }
.s90nav:hover  { background:rgba(255,255,255,.05); color:#E6E8F2; }
.s90tab:hover  { color:#E6E8F2; }
.s90btn:hover  { filter:brightness(1.12); }
.s90news:hover { background:rgba(255,255,255,.04); }
.s90link:hover { color:#6C5CE7; }
.s90hdr:hover  { color:#E6E8F2; }

/* ── Live badge global (compat con código que use .live-badge) ──────────── */
.live-badge {
    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;
}

/* ── Hero gradient overlay (radial igual al hero del dashboard) ─────────── */
.hero-gradient {
    background:radial-gradient(120% 140% at 50% -20%, #5A2A8C 0%, #2A2270 38%, #141A3A 72%, #0E1228 100%);
}

/* ── Top nav header link (estilo .s90hdr para barras superiores futuras) ── */
.topnav-link {
    font-size:13.5px; font-weight:600; color:var(--text-muted);
    text-decoration:none; padding:21px 0; position:relative;
    transition:color .15s;
}
.topnav-link.active {
    color:var(--text-bright); font-weight:700;
    box-shadow:inset 0 -2px 0 var(--accent-neon);
}

/* ── Avatar circle (estilo "JD" del header) ──────────────────────────────── */
.avatar-circle {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,#6C5CE7,#3B82F6);
    display:grid; place-items:center;
    font-size:13px; font-weight:800; color:#fff;
}