/* ============================================================================
   Data Games — Sistema de diseño (tema "Stadium", oscuro premium)
   Acento: Azul eléctrico + glow cian. Tipografía: Geist. Sin emojis (íconos SVG).
   Cargar en cualquier página: <link rel="stylesheet" href="/static/css/datagames.css">
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root{
  /* ── Marca: Azul eléctrico + glow cian ── */
  --dg-accent:#3B82F6;            /* azul real (primario) */
  --dg-accent-bright:#38BDF8;     /* glow cian (en vivo, resaltados) */
  --dg-accent-deep:#1D4ED8;       /* azul profundo (hover/sólidos) */
  --dg-accent-2:#2563EB;
  --dg-grad:linear-gradient(135deg,#38BDF8 0%,#2563EB 100%);
  --dg-grad-soft:linear-gradient(135deg,rgba(56,189,248,.16),rgba(37,99,235,.16));
  --dg-accent-soft:rgba(59,130,246,.13);
  --dg-ring:0 0 0 3px rgba(56,189,248,.40);

  /* ── Fondos oscuros premium ── */
  --dg-bg:#070B16;               /* base */
  --dg-bg-2:#0A1020;             /* secciones alternas */
  --dg-surface:#0E1626;          /* tarjetas */
  --dg-surface-2:#131D31;        /* elevado / hover */
  --dg-line:rgba(255,255,255,.08);
  --dg-line-2:rgba(255,255,255,.14);

  /* ── Texto ── */
  --dg-text:#EAF0FA;
  --dg-muted:#9AA7BE;
  --dg-muted-2:#647089;

  /* ── Forma / sombras ── */
  --dg-r:14px; --dg-r-lg:22px; --dg-r-pill:999px;
  --dg-shadow:0 2px 8px rgba(2,6,16,.5);
  --dg-shadow-lg:0 30px 70px -28px rgba(3,10,28,.85);
  --dg-glow:0 0 0 1px rgba(56,189,248,.22), 0 22px 60px -24px rgba(56,189,248,.40);

  --dg-font:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --dg-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --dg-maxw:1140px;
}

/* ── Componentes reutilizables (.dg-*) ───────────────────────────────────── */

.dg-btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--dg-font);font-weight:600;font-size:15px;line-height:1;
  padding:13px 22px;border-radius:var(--dg-r-pill);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
  white-space:nowrap;
}
.dg-btn:active{transform:translateY(1px)}
.dg-btn-primary{
  color:#04101f;background:var(--dg-grad);
  box-shadow:0 10px 30px -10px rgba(56,189,248,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.dg-btn-primary:hover{box-shadow:0 16px 40px -10px rgba(56,189,248,.7), inset 0 1px 0 rgba(255,255,255,.45);transform:translateY(-1px)}
.dg-btn-ghost{
  color:var(--dg-text);background:rgba(255,255,255,.04);border-color:var(--dg-line-2);
}
.dg-btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--dg-accent)}
.dg-btn-sm{padding:9px 15px;font-size:13.5px}

.dg-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:7px 14px;border-radius:var(--dg-r-pill);
  color:var(--dg-accent-bright);background:var(--dg-accent-soft);
  border:1px solid rgba(56,189,248,.30);
}
.dg-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--dg-accent-bright);
  box-shadow:0 0 0 0 rgba(56,189,248,.7);animation:dg-pulse 1.8s infinite}
@keyframes dg-pulse{0%{box-shadow:0 0 0 0 rgba(56,189,248,.55)}70%{box-shadow:0 0 0 8px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}

.dg-card{
  background:var(--dg-surface);border:1px solid var(--dg-line);
  border-radius:var(--dg-r-lg);box-shadow:var(--dg-shadow);
  transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease;
}
.dg-card:hover{transform:translateY(-3px);border-color:rgba(56,189,248,.35);box-shadow:var(--dg-glow)}

.dg-eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dg-accent-bright)}
.dg-title{font-family:var(--dg-font);font-weight:800;letter-spacing:-.02em;color:var(--dg-text);line-height:1.05}
.dg-grad-text{background:var(--dg-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Marquee de deportes (reemplaza el strip de emojis por SVG en movimiento) */
.dg-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.dg-marquee-track{display:inline-flex;gap:14px;align-items:center;white-space:nowrap;animation:dg-marquee 36s linear infinite}
.dg-marquee:hover .dg-marquee-track{animation-play-state:paused}
@keyframes dg-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dg-sport{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:var(--dg-r-pill);
  border:1px solid var(--dg-line);background:var(--dg-surface);color:var(--dg-muted);font-weight:600;font-size:14px}
.dg-sport svg{width:18px;height:18px;color:var(--dg-accent-bright)}

/* ── Feedback: toasts con ícono (claros, profesionales) ──────────────────── */
.dg-toasts{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:10px;width:max-content;max-width:92vw;pointer-events:none}
.dg-toast{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border-radius:14px;
  background:var(--dg-surface-2,#131D31);border:1px solid var(--dg-line,rgba(255,255,255,.12));
  box-shadow:var(--dg-shadow-lg,0 24px 60px -20px rgba(0,0,0,.7));color:var(--dg-text,#EAF0FA);
  font-size:14px;font-weight:500;line-height:1.4;opacity:0;transform:translateY(-12px);
  transition:opacity .22s ease,transform .22s ease;pointer-events:auto;border-left-width:3px}
.dg-toast.show{opacity:1;transform:translateY(0)}
.dg-toast .ic{flex:0 0 auto;width:20px;height:20px;margin-top:1px}
.dg-toast.ok{border-left-color:#22c55e}.dg-toast.ok .ic{color:#4ade80}
.dg-toast.err{border-left-color:#ef4444}.dg-toast.err .ic{color:#f87171}
.dg-toast.info{border-left-color:var(--dg-accent-bright,#38BDF8)}.dg-toast.info .ic{color:var(--dg-accent-bright,#38BDF8)}

/* ── Carga: skeleton shimmer + spinner ───────────────────────────────────── */
.dg-skel{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border-radius:10px}
.dg-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:dg-shimmer 1.3s infinite}
@keyframes dg-shimmer{100%{transform:translateX(100%)}}
.dg-skel-row{height:64px;border-radius:14px;margin-bottom:10px}
.dg-spin{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.25);
  border-top-color:var(--dg-accent-bright,#38BDF8);border-radius:50%;animation:dg-spin .7s linear infinite;vertical-align:-3px}
@keyframes dg-spin{to{transform:rotate(360deg)}}

/* ── Estado vacío (guía clara para no-técnicos) ──────────────────────────── */
.dg-empty{text-align:center;padding:40px 20px;color:var(--dg-muted,#9AA7BE)}
.dg-empty .ico{width:46px;height:46px;margin:0 auto 14px;color:var(--dg-accent-bright,#38BDF8);
  background:var(--dg-accent-soft,rgba(56,189,248,.12));border:1px solid rgba(56,189,248,.25);
  border-radius:14px;display:flex;align-items:center;justify-content:center}
.dg-empty .ico svg{width:22px;height:22px}
.dg-empty h3{color:var(--dg-text,#EAF0FA);font-size:16px;font-weight:700;margin:0 0 5px}
.dg-empty p{margin:0 auto;max-width:340px;font-size:13.5px;line-height:1.55}

/* ── Tooltip de ayuda (data-tip) ─────────────────────────────────────────── */
.dg-tip{position:relative;cursor:help}
.dg-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:#0b1322;color:#eaf0fa;border:1px solid var(--dg-line-2,rgba(255,255,255,.14));border-radius:9px;
  padding:7px 10px;font-size:12px;font-weight:500;line-height:1.4;width:max-content;max-width:240px;white-space:normal;text-align:left;
  box-shadow:var(--dg-shadow-lg,0 24px 60px -20px rgba(0,0,0,.7));opacity:0;pointer-events:none;transition:.16s;z-index:50}
.dg-tip:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  .dg-marquee-track,.dg-pill .dot,.dg-skel::after,.dg-spin{animation:none}
}

/* Tabla compartida (.dg-tbl) — usada por el detalle de torneo del admin y el panel.
   Antes solo existía en panel.html; al moverla aquí el admin deja de salir sin estilo. */
.dg-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dg-tbl{width:100%;border-collapse:collapse;font-size:13px}
.dg-tbl th{text-align:center;padding:8px 6px;color:#9fb3d1;font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.03em;border-bottom:1px solid rgba(255,255,255,.12);white-space:nowrap}
.dg-tbl td{text-align:center;padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.06)}
.dg-tbl th:nth-child(2),.dg-tbl td:nth-child(2){text-align:left}