/* ========================================================
   DATA GAMES — ESPN-style components
   Reusable classes used across the app pages.
   Coexists with existing utilities — does NOT override them.
   ======================================================== */

/* ── Tipografía utility ── */
.dg-cond { font-family:'Roboto Condensed','Inter',sans-serif; }
.dg-body { font-family:'Inter','DM Sans',system-ui,sans-serif; }

@keyframes dg-pulse  { 0%,100%{opacity:1;} 50%{opacity:.4;} }
@keyframes dg-ticker { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes dg-fadeUp { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

/* ── Section header ── */
.dg-section {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:12px;
}
.dg-section-title {
  font-family:'Roboto Condensed','Inter',sans-serif;
  font-size:clamp(22px,2.6vw,30px); font-weight:900;
  text-transform:uppercase; letter-spacing:-.5px; line-height:1;
  display:inline-flex; align-items:center;
  margin:0;
}
.dg-section-title::before {
  content:''; display:inline-block; width:5px; height:26px; background:#2563eb;
  margin-right:12px; border-radius:2px;
}
.dg-section-title.red::before    { background:#dc2626; }
.dg-section-title.green::before  { background:#10b981; }
.dg-section-title.amber::before  { background:#fbbf24; }
.dg-section-title.purple::before { background:#a78bfa; }
.dg-section-sub {
  font-size:13px; color:rgba(255,255,255,.55); font-weight:500;
}

/* ── LIVE label ── */
.dg-live-label {
  display:inline-flex; align-items:center; gap:6px;
  background:#dc2626; color:#fff; font-weight:800; font-size:10px;
  letter-spacing:1.2px; text-transform:uppercase; padding:4px 9px; border-radius:3px;
  font-family:'Inter',sans-serif;
}
.dg-live-label::before {
  content:''; width:6px; height:6px; border-radius:50%; background:#fff;
  animation:dg-pulse 1.5s ease-in-out infinite;
}

/* ── LIVE TICKER ── */
.dg-ticker-wrap {
  background:linear-gradient(90deg,#0b1120 0%,#1e293b 50%,#0b1120 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.06);
  overflow:hidden; height:38px; display:flex; align-items:center;
}
.dg-ticker-label {
  flex-shrink:0; background:#dc2626; color:#fff; font-weight:800; font-size:11px;
  letter-spacing:1.2px; text-transform:uppercase; padding:0 14px; height:38px;
  display:flex; align-items:center; gap:6px; font-family:'Inter',sans-serif;
}
.dg-ticker-label::before {
  content:''; width:8px; height:8px; border-radius:50%; background:#fff;
  animation:dg-pulse 1.5s ease-in-out infinite;
}
.dg-ticker {
  flex:1; overflow:hidden; white-space:nowrap; height:100%;
  display:flex; align-items:center;
}
.dg-ticker-track {
  display:inline-flex; gap:0; animation:dg-ticker 50s linear infinite;
}
.dg-ticker-item {
  padding:0 22px; font-size:13px; font-weight:600; color:rgba(255,255,255,.8);
  letter-spacing:.3px; display:inline-flex; align-items:center; gap:8px;
  border-right:1px solid rgba(255,255,255,.08);
}
.dg-ticker-item strong { color:#fff; font-weight:800; }
.dg-ticker-item .score {
  color:#60a5fa; font-weight:900; padding:2px 8px;
  background:rgba(37,99,235,.18); border-radius:4px;
}

/* ── Stat banner (big condensed numbers) ── */
.dg-stats-banner {
  background:linear-gradient(135deg,#0b1120 0%,#1e293b 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px; padding:32px 28px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:24px;
}
.dg-stat-item { display:flex; flex-direction:column; gap:6px; }
.dg-stat-num {
  font-family:'Roboto Condensed',sans-serif;
  font-size:clamp(40px,5vw,60px); font-weight:900;
  line-height:.9; letter-spacing:-1.5px; color:#60a5fa;
}
.dg-stat-num.red    { color:#f87171; }
.dg-stat-num.green  { color:#34d399; }
.dg-stat-num.amber  { color:#fbbf24; }
.dg-stat-num.purple { color:#a78bfa; }
.dg-stat-lbl {
  font-size:11px; color:rgba(255,255,255,.55); text-transform:uppercase;
  letter-spacing:1.5px; font-weight:700;
}

/* ────────────────────────────────────────────────
   ── FOX SPORTS scoreboard card (exotic version) ──
   Inspirado en los score-chips de FoxSports.com
   ──────────────────────────────────────────────── */
@keyframes dg-shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes dg-glow-live {
  0%, 100% { box-shadow:0 0 0 1px rgba(220,38,38,.45), 0 0 28px rgba(220,38,38,.20); }
  50%      { box-shadow:0 0 0 1px rgba(220,38,38,.7),  0 0 40px rgba(220,38,38,.32); }
}

.dg-match-card {
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(135deg,#111827 0%,#0a0f1c 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:0;
  transition:transform .18s, border-color .18s, box-shadow .18s;
  overflow:hidden;
}
/* Top accent stripe (sport color) */
.dg-match-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#2563eb 0%,#60a5fa 50%,#2563eb 100%);
  background-size:200% 100%;
  opacity:.85;
}
.dg-match-card:hover {
  transform:translateY(-3px); border-color:rgba(96,165,250,.45);
  box-shadow:0 12px 36px rgba(0,0,0,.5), 0 0 30px rgba(37,99,235,.15);
}
.dg-match-card:hover::before { animation:dg-shimmer 2s linear infinite; }
.dg-match-card.live {
  border-color:rgba(220,38,38,.45);
  animation:dg-glow-live 2.5s ease-in-out infinite;
}
.dg-match-card.live::before {
  background:linear-gradient(90deg,#dc2626 0%,#fb923c 50%,#dc2626 100%);
  background-size:200% 100%;
  animation:dg-shimmer 2s linear infinite;
}
.dg-match-card.cursor { cursor:pointer; }

/* Top strip: league + status */
.dg-mc-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  border-bottom:1px solid rgba(255,255,255,.05);
  font-family:'Inter',sans-serif;
}
.dg-mc-league {
  font-size:10.5px; font-weight:800; color:rgba(255,255,255,.7);
  letter-spacing:1.5px; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
}
.dg-mc-league .ic { font-size:14px; }
.dg-mc-status {
  font-family:'Roboto Condensed',sans-serif;
  font-size:13px; font-weight:800; color:#fff;
  letter-spacing:.5px;
}
.dg-mc-status.scheduled { color:rgba(255,255,255,.6); }
.dg-mc-status.live { color:#f87171; }
.dg-mc-status.live::before {
  content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#dc2626; box-shadow:0 0 8px #dc2626; margin-right:6px; vertical-align:middle;
  animation:dg-pulse 1.4s ease-in-out infinite;
}
.dg-mc-status.finished { color:#34d399; }

/* Team rows */
.dg-mc-team {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  position:relative;
  transition:background .15s;
}
.dg-mc-team + .dg-mc-team { border-top:1px solid rgba(255,255,255,.04); }
.dg-mc-team.loser { opacity:.42; }
.dg-mc-team.winner::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:#60a5fa;
}
.dg-mc-team.winner.alt::before { background:#fbbf24; }

/* Logo circular */
.dg-mc-logo {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#2563eb,#60a5fa);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; color:#fff;
  font-family:'Inter',sans-serif;
  box-shadow:0 2px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
  position:relative;
}
.dg-mc-logo.alt   { background:linear-gradient(135deg,#dc2626,#fbbf24); }
.dg-mc-logo.green { background:linear-gradient(135deg,#10b981,#34d399); }
.dg-mc-logo.purple { background:linear-gradient(135deg,#7c3aed,#a78bfa); }
.dg-mc-logo img { width:100%; height:100%; object-fit:contain; border-radius:50%; }

/* Possession indicator (live only) */
.dg-mc-possession {
  position:absolute; bottom:-2px; right:-2px;
  width:14px; height:14px; border-radius:50%;
  background:#22c55e; border:2px solid #0a0f1c;
  box-shadow:0 0 10px #22c55e;
  animation:dg-pulse 1.4s ease-in-out infinite;
}

/* Names: short + long */
.dg-mc-team-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dg-mc-short {
  font-family:'Roboto Condensed',sans-serif;
  font-size:18px; font-weight:900; color:#fff; line-height:1;
  letter-spacing:.5px; text-transform:uppercase;
}
.dg-mc-long {
  font-size:12px; color:rgba(255,255,255,.55); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dg-mc-record {
  font-size:10px; color:rgba(255,255,255,.40); font-weight:600;
  letter-spacing:.5px; margin-top:2px;
  font-family:'Roboto Condensed',sans-serif;
}

/* Score grande */
.dg-mc-score {
  font-family:'Roboto Condensed',sans-serif;
  font-size:36px; font-weight:900; color:#fff; line-height:.9;
  min-width:48px; text-align:right; flex-shrink:0;
  letter-spacing:-1px;
}
.dg-mc-score.dim { color:rgba(255,255,255,.35); font-weight:700; }
.dg-mc-score .pen {
  display:block; font-size:11px; color:#fbbf24; font-weight:700;
  letter-spacing:.5px; margin-top:2px;
}

/* Footer game notes */
.dg-mc-foot {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 16px;
  background:rgba(255,255,255,.025);
  border-top:1px solid rgba(255,255,255,.05);
  font-size:10.5px; color:rgba(255,255,255,.55); font-weight:700;
  letter-spacing:1px; text-transform:uppercase; font-family:'Inter',sans-serif;
  flex-wrap:wrap;
}
.dg-mc-foot .gn {
  color:#93c5fd; background:rgba(37,99,235,.18);
  padding:3px 8px; border-radius:3px; letter-spacing:1px;
}
.dg-mc-foot .vn {
  display:inline-flex; align-items:center; gap:4px;
}
.dg-mc-divider { display:none; }  /* no longer used */

/* ── Match LIST row (compact, estilo ESPN scoreboard) ── */
.dg-match-row {
  display:flex; align-items:center; padding:14px 18px; gap:14px;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .15s; cursor:pointer; flex-wrap:wrap;
}
.dg-match-row:last-child { border-bottom:none; }
.dg-match-row:hover { background:rgba(37,99,235,.05); }
.dg-mr-time {
  font-family:'Roboto Condensed',sans-serif;
  font-size:14px; font-weight:700; color:rgba(255,255,255,.55);
  min-width:62px; letter-spacing:.5px;
}
.dg-mr-time.live { color:#dc2626; }
.dg-mr-teams { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.dg-mr-team {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.dg-mr-team-name {
  font-size:14px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.dg-mr-team-name.win { font-weight:800; color:#fff; }
.dg-mr-team-name.loss { color:rgba(255,255,255,.5); }
.dg-mr-team-score {
  font-family:'Roboto Condensed',sans-serif;
  font-size:18px; font-weight:900; min-width:30px; text-align:right;
}
.dg-mr-team-score.win { color:#60a5fa; }
.dg-mr-team-score.loss { color:rgba(255,255,255,.45); }
.dg-mr-meta {
  font-size:10px; color:rgba(255,255,255,.45); font-weight:700;
  letter-spacing:.8px; text-transform:uppercase; min-width:90px; text-align:right;
}

/* ── Sport pill ── */
.dg-sport-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px;
}
.dg-sport-pill {
  background:#0a0a0a; border:1px solid rgba(255,255,255,.08); border-radius:6px;
  padding:14px 12px; display:flex; flex-direction:column; align-items:center;
  gap:6px; text-align:center; transition:all .15s; cursor:pointer;
}
.dg-sport-pill:hover {
  border-color:#2563eb; background:rgba(37,99,235,.06); transform:translateY(-2px);
}
.dg-sport-pill .ic { font-size:24px; }
.dg-sport-pill .nm {
  font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
}

/* ── CTA stripe ── */
.dg-cta-stripe {
  background:linear-gradient(90deg,#1e40af 0%,#2563eb 50%,#1d4ed8 100%);
  padding:24px 26px; border-radius:8px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.dg-cta-stripe::before, .dg-cta-stripe::after {
  content:''; position:absolute; top:0; bottom:0; width:140px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08));
  transform:skewX(-20deg); pointer-events:none;
}
.dg-cta-stripe::before { left:-70px; }
.dg-cta-stripe::after  { right:-70px; transform:skewX(-20deg) scaleX(-1); }
.dg-cta-stripe h3 {
  font-family:'Roboto Condensed',sans-serif;
  font-size:clamp(20px,2.2vw,26px); font-weight:900;
  text-transform:uppercase; letter-spacing:-.3px; color:#fff;
  position:relative; z-index:1;
}
.dg-cta-stripe-btn {
  background:#000; color:#fff; font-weight:800; font-size:13px;
  padding:11px 22px; border-radius:4px; text-transform:uppercase; letter-spacing:1px;
  border:none; cursor:pointer; position:relative; z-index:1; transition:all .15s;
}
.dg-cta-stripe-btn:hover { background:#fbbf24; color:#000; }

/* ── Empty state ── */
.dg-empty {
  text-align:center; padding:50px 20px; color:rgba(255,255,255,.5);
  border:1px dashed rgba(255,255,255,.10); border-radius:8px;
}
.dg-empty .em-ic { font-size:38px; margin-bottom:10px; opacity:.6; }
.dg-empty .em-tx { font-size:14px; font-weight:600; }

/* ── Light theme overrides ── */
:root.light .dg-stats-banner {
  background:linear-gradient(135deg,#1e293b 0%,#0b1120 100%);
}
:root.light .dg-match-card {
  background:#fff;
  border-color:rgba(0,0,0,.08);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
:root.light .dg-match-card .dg-mc-name { color:#111; }
:root.light .dg-match-card .dg-mc-score { color:#111; }
:root.light .dg-match-card .dg-mc-divider { background:rgba(0,0,0,.08); }
:root.light .dg-match-card .dg-mc-head { border-bottom-color:rgba(0,0,0,.08); }
:root.light .dg-match-card .dg-mc-foot { border-top-color:rgba(0,0,0,.08); color:#475569; }
:root.light .dg-match-row { border-bottom-color:rgba(0,0,0,.06); }
:root.light .dg-match-row:hover { background:rgba(37,99,235,.05); }
:root.light .dg-mr-team-name.win { color:#111; }
:root.light .dg-mr-team-name.loss { color:#64748b; }
:root.light .dg-section-sub { color:#64748b; }
:root.light .dg-stat-lbl { color:#475569; }
:root.light .dg-mc-meta { color:#64748b; }
:root.light .dg-empty {
  border-color:rgba(0,0,0,.10); color:#64748b;
}