/* ====== AG Bets — Neon Gamer (Azul + Fucsia) ====== */
:root{
  --ag-bg-1:#0f1220; --ag-bg-2:#0b0e1a;
  --ag-grad-blue:#00c8ff; --ag-grad-blue-2:#3b82f6;
  --ag-grad-pink:#ff00aa; --ag-grad-pink-2:#ec4899;
  --ag-surface:#0f1424; --ag-surface-2:#0b1221;
  --ag-border:rgba(255,255,255,.08); --ag-border-strong:rgba(255,255,255,.12);
  --ag-text:#e5e7eb; --ag-muted:#9ca3af;

  /* ===== NUEVO: tipografía y escala ===== */
  --ag-font:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-1: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-2: clamp(1.35rem, 1.1rem + .7vw, 1.75rem);
  --fs-3: clamp(1.1rem, 1.0rem + .3vw, 1.25rem);
  --fs-body: 0.97rem;
  --fs-small: .86rem;
}

*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

html{ font-size:16px; }

/* ===== ACTUALIZADO: aplica fuente y ritmo tipográfico ===== */
body{
  color:var(--ag-text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,200,255,.12), transparent 50%),
    radial-gradient(1000px 600px at 110% 10%, rgba(255,0,170,.12), transparent 50%),
    linear-gradient(180deg, var(--ag-bg-1) 0%, var(--ag-bg-2) 100%);
  min-height:100vh;

  font-family:var(--ag-font);
  font-size:var(--fs-body);
  line-height:1.55;
  letter-spacing:.1px;
}

h1{ font-size:var(--fs-1); font-weight:800; }
h2{ font-size:var(--fs-2); font-weight:800; }
h3{ font-size:var(--fs-3); font-weight:700; }
.small, small{ font-size:var(--fs-small); }

body::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:3px 3px;
}

/* ===== Navbar ===== */
.navbar{
  background:rgba(11,14,26,.65)!important;
  backdrop-filter:blur(8px) saturate(140%);
  border-bottom:1px solid var(--ag-border);
}
.navbar .nav-link{ color:#cfd6e3 !important; font-weight:700; letter-spacing:.15px; }
.navbar .nav-link:hover, .navbar .nav-link.active{ color:#fff !important; }

/* ===== Tabs ===== */
.nav-tabs{ border-bottom:none !important; }
.nav-tabs .nav-link{
  color:#cfd6e3 !important; font-weight:600; border:none !important; background:transparent !important;
}
.nav-tabs .nav-link.active{
  color:#fff !important; border-bottom:3px solid var(--ag-grad-blue) !important;
}
.nav-tabs .nav-link:hover{ color:#fff !important; }

/* ===== Cards ===== */
.match-card{
  background:linear-gradient(180deg, var(--ag-surface) 0%, var(--ag-surface-2) 100%);
  border:1px solid var(--ag-border); border-radius:.9rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.match-card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  border-color:rgba(0,200,255,.35);
  filter:saturate(115%);
}
.badge.series-pill{
  background:rgba(255,255,255,.06);
  border:1px solid var(--ag-border-strong);
  color:var(--ag-text); font-weight:700;
}

/* Contraste interno de card */
.match-card p, .match-card span, .match-card strong,
.match-card .text-muted, .match-card small{ color:#ffffff !important; }
.match-card .small, .match-card small{ color:#e8e8e8 !important; font-weight:500; }

/* Mensaje vacío tabs */
.tab-pane p.text-muted{ color:rgba(255,255,255,.92) !important; font-weight:600; }

/* ===== Botones votación ===== */
.btn-vote{ font-weight:700; border-width:2px; transition:transform .12s, box-shadow .12s, filter .12s; }
.btn-vote:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn-outline-primary{ border-color:var(--ag-grad-blue-2); color:#dbeafe; }
.btn-outline-primary:hover{
  box-shadow:0 8px 18px rgba(59,130,246,.35);
  background:linear-gradient(90deg, var(--ag-grad-blue-2), var(--ag-grad-blue));
  color:#031427;
}
.btn-outline-secondary{ border-color:#94a3b8; color:#cbd5e1; }
.btn-outline-secondary:hover{
  box-shadow:0 8px 18px rgba(148,163,184,.35);
  background:linear-gradient(90deg,#94a3b8,#64748b); color:#0b0e1a;
}
.btn-outline-danger{ border-color:var(--ag-grad-pink-2); color:#ffe4f3; }
.btn-outline-danger:hover{
  box-shadow:0 8px 18px rgba(236,72,153,.35);
  background:linear-gradient(90deg, var(--ag-grad-pink-2), var(--ag-grad-pink));
  color:#260012;
}
.btn-vote.active{ filter:brightness(1.05); box-shadow:0 0 0 2px rgba(255,255,255,.05), 0 10px 20px rgba(0,0,0,.35) inset; }

/* ===== Progress bar ===== */
.progress{ background:rgba(255,255,255,.06); border:1px solid var(--ag-border); border-radius:999px; overflow:hidden; }
.progress-bar.bg-primary{ background:linear-gradient(90deg, var(--ag-grad-blue-2), var(--ag-grad-blue)); }
.progress-bar.bg-secondary{ background:linear-gradient(90deg,#94a3b8,#64748b); }
.progress-bar.bg-danger{ background:linear-gradient(90deg, var(--ag-grad-pink-2), var(--ag-grad-pink)); }

/* ===== Ranking ===== */
.leaderboard-table thead th{ color:#eaf2ff; border-bottom:1px solid var(--ag-border)!important; background:transparent; }
.leaderboard-table tbody tr:hover{ background:rgba(0,200,255,.05); }
.leader-medal{ font-size:1.25rem; line-height:1; }
.points-badge{
  background: #1e2374;
  color: white;
  border-radius: 999px;
  font-weight: 600;
  padding: .25rem .55rem;
  font-size: .8rem;
}

/* ===== Admin: tabla ===== */
.table{ width:100% !important; }
.table thead th{ color:#eaf2ff; border-bottom:1px solid var(--ag-border)!important; }
.table tbody tr:hover{ background:rgba(0,200,255,.05); }
.table td, .table th{ white-space:nowrap; }

/* ============================
   Admin Matches — mejoras
   ============================ */
.admin-matches-table,
.admin-matches-table th,
.admin-matches-table td { color: #f3f6ff !important; }

.admin-matches-table td,
.admin-matches-table th {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  vertical-align: middle;
}

.admin-matches-table .player-name { color: #ffffff !important; font-weight: 600; }
.admin-matches-table .col-title { white-space: normal !important; }
.badge.series-pill { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #ffffff !important; }

.admin-matches-table thead th {
  color: #eaf2ff !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.admin-matches-table tbody tr:hover { background: rgba(0,200,255,.06); }

.form-control-dark,
.form-select-dark {
  background-color: #151a2b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
.form-control-dark::placeholder { color: rgba(255,255,255,.55) !important; }
.form-select-dark option { background: #151a2b; color: #fff; }

.text-pink { color: #ff73b6 !important; }
.card.bg-dark { background: rgba(21,26,43,.95) !important; }

.badge.bg-primary-subtle,
.badge.bg-danger-subtle {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.2);
}

.text-muted.fw-semibold { font-weight: 700 !important; color: #b9c3d6 !important; }

.rank-col { font-weight: 700; text-align: center; width: 60px; }
.rank-number { background: #1e2374; color: white; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 0.8rem; }
.leader-medal { font-size: 1.3rem; display: inline-block; min-width: 42px; text-align: center; }

/* Ordena botones + mensajes dentro del form */
.vote-form{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.vote-form .btn-vote{ flex:0 0 auto; }
.vote-form .login-link{
  flex-basis:100%; align-self:flex-start; display:block;
  padding:0; margin-top:.5rem; text-decoration:underline;
}
.vote-form .locked-note{ flex-basis:100%; margin-top:.5rem; font-size:.85rem; }

/* Mejoras en navbar colapsado (móvil) */
@media (max-width: 991.98px){
  .navbar .user-info{ width:100%; padding-top:.25rem; padding-bottom:.25rem; }
  .navbar .logout-btn{ margin-top:.25rem; }
}

/* ===== Partido Estelar ===== */
.match-card--featured{
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, var(--ag-surface) 0%, var(--ag-surface-2) 100%) padding-box,
    conic-gradient(from var(--_angle, 0deg),
      #ffd36e, #ffb800, #ff7ab5, #00d9ff, #ffd36e) border-box;
  animation: featured-rotate 6s linear infinite;
  box-shadow: 0 0 0 1px rgba(255,184,0,.25) inset, 0 12px 40px rgba(255,184,0,.12);
}
.match-card--featured:hover{
  filter: saturate(120%);
  box-shadow: 0 0 0 1px rgba(255,184,0,.35) inset, 0 16px 48px rgba(255,184,0,.18);
}
@keyframes featured-rotate{ to{ --_angle: 360deg; } }

.featured-ribbon{
  position:absolute; top:10px; right:-12px;
  display:flex; align-items:center; gap:.35rem;
  font-weight:800; font-size:.8rem; letter-spacing:.02em;
  color:#1b1000; padding:.35rem .65rem .35rem .55rem;
  background: linear-gradient(135deg,#ffe69b,#ffcc5e,#ffb800);
  border:1px solid rgba(0,0,0,.15); border-right:none; border-radius:6px 0 0 6px;
  box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25);
  text-transform:uppercase;
}
.featured-ribbon svg{ width:14px; height:14px; fill:#7a4b00; filter: drop-shadow(0 0 2px rgba(255,255,255,.35)); }
@media (max-width: 420px){ .featured-ribbon{ top:8px; right:-10px; font-size:.75rem; } }

/* ===== Botón “Ingresar con Steam” — moderno / neon glass ===== */
.btn-steam{
  --steam-border-1: rgba(0,200,255,.9);
  --steam-border-2: rgba(255,0,170,.9);
  --steam-bg: rgba(255,255,255,.06);
  --steam-text: #eaf2ff;

  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:800; letter-spacing:.01em;
  color:var(--steam-text); text-decoration:none;
  padding:.6rem .95rem; border-radius:999px;
  position:relative; isolation:isolate;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) padding-box;
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow:0 2px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space:nowrap;
}
.btn-steam::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  padding:1px;
  background: conic-gradient(from var(--_a,0deg), var(--steam-border-1), var(--steam-border-2), var(--steam-border-1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: steam-rotate 6s linear infinite; opacity:.9;
}
.btn-steam:hover{
  transform: translateY(-1px);
  box-shadow:0 6px 28px rgba(0,200,255,.20), 0 2px 12px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12);
  filter: saturate(115%);
}
.btn-steam:active{ transform: translateY(0); }
.btn-steam .steam-ic{ width:18px; height:18px; display:block; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.btn-steam .steam-label{ font-size:.9rem; }
@media (prefers-reduced-motion: reduce){ .btn-steam::before{ animation: none; } }
@media (max-width: 420px){ .btn-steam{ padding:.55rem .8rem; } .btn-steam .steam-label{ font-size:.85rem; } }
@keyframes steam-rotate{ to{ --_a: 360deg; } }

/* ===== Botón de Cerrar Sesión — elegante / moderno ===== */
.btn-logout{
  --logout-border-1: rgba(255,0,128,.9);
  --logout-border-2: rgba(0,200,255,.9);
  --logout-bg: rgba(255,255,255,.06);
  --logout-text: #eaf2ff;

  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; color:var(--logout-text);
  text-decoration:none; padding:.55rem .9rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)) padding-box;
  backdrop-filter:blur(8px) saturate(140%);
  box-shadow:0 2px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
  overflow:hidden;
}
.btn-logout::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  padding:1px;
  background:conic-gradient(from var(--_a,0deg), var(--logout-border-1), var(--logout-border-2), var(--logout-border-1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:logout-rotate 7s linear infinite; opacity:.9;
}
@keyframes logout-rotate{to{--_a:360deg;}}
.btn-logout:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 28px rgba(255,0,128,.25), 0 2px 12px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12);
  filter:saturate(115%);
}
.btn-logout:active{transform:translateY(0);}
.logout-ic{ width:18px; height:18px; fill:currentColor; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); transition:transform .2s ease; }
.btn-logout:hover .logout-ic{ transform: translateX(2px); }
.logout-label{ font-size:.9rem; white-space:nowrap; }
@media (max-width:420px){ .btn-logout{padding:.5rem .8rem;} .logout-label{font-size:.85rem;} }

/* ===== NUEVO: Chip de usuario (avatar + nombre + puntos) ===== */
.user-chip{
  display:flex; align-items:center; gap:.6rem;
  padding:.35rem .6rem; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 2px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}
.user-chip .avatar{
  position:relative; width:32px; height:32px; border-radius:999px;
  display:inline-grid; place-items:center;
  background: conic-gradient(#00c8ff, #ff00aa, #00c8ff);
  padding:2px;
}
.user-chip .avatar img{
  width:100%; height:100%; border-radius:999px; display:block; background:#0b0e1a;
}
.user-chip .user-meta{ display:flex; align-items:center; gap:.5rem; }
.user-chip .user-name{
  max-width:12.5rem; font-weight:800; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-chip .user-points{
  font-weight:800; font-size:.78rem;
  padding:.15rem .5rem; border-radius:999px;
  color:#06121a;
  background:linear-gradient(135deg, #9ae6ff, #00c8ff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
@media (max-width: 420px){
  .user-chip{ padding:.3rem .5rem; }
  .user-chip .user-name{ max-width:8.5rem; }
}

/* ===== Admin Home — Hero + Tiles ===== */
.admin-hero{
  position:relative;
  padding-top:.5rem;
}
.admin-title{
  font-size: var(--fs-1);
  font-weight:800;
  letter-spacing:.3px;
}
.admin-subtitle{
  color:var(--ag-muted);
  font-size:.95rem;
}

.admin-grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap:1rem;
}
@media (min-width:768px){
  .admin-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:1200px){
  .admin-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.admin-tile{
  position:relative;
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.1rem;
  border-radius:1rem;
  text-decoration:none;
  color:var(--ag-text);
  border:1px solid var(--ag-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  overflow:hidden;
}
.admin-tile::before{
  /* sutil borde animado */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: conic-gradient(from var(--_r,0deg), rgba(0,200,255,.9), rgba(255,0,170,.9), rgba(0,200,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.45; pointer-events:none;
  animation: admin-rot 10s linear infinite;
}
@keyframes admin-rot{ to{ --_r:360deg; } }

.admin-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow:0 16px 44px rgba(0,0,0,.35);
  filter:saturate(110%);
}

.tile-icon{
  flex:0 0 auto;
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(0,200,255,.25), rgba(255,0,170,.25));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.tile-icon svg{ width:22px; height:22px; fill:#eaf2ff; opacity:.95; }

.tile-body{ flex:1 1 auto; min-width:0; }
.tile-title{ font-weight:800; letter-spacing:.2px; }
.tile-desc{
  color:#cbd5e1; font-size:.9rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.tile-cta{
  flex:0 0 auto;
  font-weight:800; font-size:.85rem;
  padding:.35rem .65rem; border-radius:999px;
  color:#06121a;
  background:linear-gradient(135deg, #9ae6ff, #00c8ff);
  border:1px solid rgba(255,255,255,.25);
}

/* Lista secundaria “glass” (si decides mantenerla) */
.glass-list .list-group-item{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  color: #eaf2ff;
  border-radius:.7rem !important;
  margin-bottom:.5rem;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.glass-list .list-group-item:hover{
  transform: translateY(-1px);
  filter: saturate(112%);
  border-color: rgba(255,255,255,.2);
}
.glass-list .list-dot{
  width:10px; height:10px; border-radius:999px;
  background:linear-gradient(135deg, var(--ag-grad-blue-2), var(--ag-grad-pink-2));
  box-shadow:0 0 0 2px rgba(255,255,255,.08) inset;
}

/* ===== Admin Matches — tabla pro ===== */
.admin-title{ font-size:var(--fs-2); font-weight:800; }

.btn-new{ font-weight:800; letter-spacing:.2px; }

.admin-toolbar .form-control-dark,
.admin-toolbar .form-select-dark{
  height: 42px;
  border-radius:.7rem;
}

.admin-table-wrap{
  border-radius:1rem;
  overflow-x:auto;                /* permite el scroll horizontal */
  overflow-y:hidden;              /* conserva el borde redondeado sin barra vertical */
  -webkit-overflow-scrolling: touch;  /* scroll suave en iOS */
}

/* Header pegajoso */
.admin-table thead th{
  position:sticky; top:0; z-index:2;
  background:rgba(15,20,36,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  color:#eaf2ff;
}
.admin-table{ margin-bottom:0; }
.admin-table tbody tr{ transition: background .12s ease, transform .06s ease; }
.admin-table tbody tr:hover{ background:rgba(0,200,255,.06); }

.min-col{ white-space:nowrap; }

/* Chip jugador */
.player-chip{ display:flex; align-items:center; gap:.5rem; }
.player-chip img{ border-radius:999px; display:block; }
.player-chip .name{ font-weight:700; }

/* Serie */
.bo-pill{
  display:inline-block; min-width: 46px;
  padding:.15rem .45rem; font-weight:800; font-size:.78rem;
  border-radius:999px; color:#0a1522;
  background:linear-gradient(135deg,#bfe3ff,#7cc7ff);
  border:1px solid rgba(255,255,255,.35);
}

/* Estado */
.status-badge{
  display:inline-block; padding:.2rem .55rem; border-radius:999px;
  font-weight:800; font-size:.78rem; border:1px solid rgba(255,255,255,.2);
}
.status-secondary{ background:rgba(148,163,184,.25); color:#e7eefc; }
.status-warning{ background:rgba(251,191,36,.25); color:#fff0ce; }
.status-success{ background:rgba(34,197,94,.25); color:#d9ffea; }
.status-dark{ background:rgba(17,24,39,.55); color:#eaf2ff; }
.status-danger{ background:rgba(244,63,94,.28); color:#ffe3ea; }

/* Acciones */
.btn-actions{ display:inline-flex; gap:.35rem; }
.btn-actions .btn{ border-radius:.6rem; font-weight:700; }

/* Empty */
.empty-state{
  padding:2rem; text-align:center; color:#cbd5e1;
}

/* Clickable row (excepto en acciones) */
.admin-row td:last-child{ cursor:auto; }              /* la celda no es “clickable” */
.btn-actions .btn,
.admin-row td:last-child a,
.admin-row td:last-child button{ cursor:pointer; }   /* los botones sí */

/* ===== Botón glass moderno ===== */
.btn-glass{
  --bg: rgba(255,255,255,.08);
  --hover: rgba(255,255,255,.15);
  --txt: #f5f8ff;
  --blur: 12px;

  display:inline-flex; align-items:center; gap:.55rem;
  padding:.65rem 1.1rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  color:var(--txt);
  backdrop-filter: blur(var(--blur));
  background: var(--bg);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05),
              0 2px 12px rgba(0,0,0,.35);
  transition: all .2s ease;
}

.btn-glass:hover{
  background: var(--hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(59,130,246,.25);
}

.btn-glass:active{
  transform: translateY(0);
}

/* iconito interno */
.btn-glass__ic{
  width:22px; height:22px; flex:0 0 22px;
  display:grid; place-items:center;
  font-size:15px;
  background: rgba(157, 199, 5, 0.1);
  border-color: rgba(59,130,246,.25);
  border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* efecto foco */
.btn-glass:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.5),
    0 0 0 6px rgba(59,130,246,.25);
}

/* compactar en móviles */
@media (max-width: 480px){
  .btn-glass{ padding:.55rem .9rem; font-size:.95rem; }
  .btn-glass__ic{ width:20px; height:20px; font-size:13px; }
}

/* ===== Ganador: pills con más contraste ===== */
.winner-group{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1rem;
  align-items:center;
}

.btn-choice{
  --_bg:#ffffff;              /* fondo claro real */
  --_txt:#111827;             /* texto bien oscuro */
  --_bd:#cbd5e1;              /* borde visible (slate-300) */
  --_hover-bg:#f1f5f9;        /* fondo hover (slate-100) */
  --_active-bg:#93c5fd;       /* fondo seleccionado (azul claro) */
  --_active-txt:#0f172a;      /* texto en seleccionado */
  --_ring:#60a5fa55;          /* ring azul suave */

  border-radius:999px;
  padding:.48rem 1rem;
  font-weight:600;
  border:1px solid var(--_bd);
  background:var(--_bg);
  color:var(--_txt);
  transition:background .15s, border-color .15s, box-shadow .15s, transform .1s;
}

.btn-choice:hover{
  background:var(--_hover-bg);
  border-color:#94a3b8; /* slate-400 */
}

.btn-check:focus + .btn-choice{
  box-shadow:0 0 0 3px var(--_ring);
}

.btn-check:checked + .btn-choice{
  background:var(--_active-bg);
  color:var(--_active-txt);
  border-color:transparent;
  box-shadow:0 0 0 3px var(--_ring);
  transform:translateY(-1px);
}

/* Si usas tarjeta oscura */
.card.bg-dark .btn-choice{
  --_bg:#1e293b;     /* slate-800 */
  --_txt:#e2e8f0;    /* slate-200 */
  --_bd:#475569;     /* slate-600 */
  --_hover-bg:#334155; /* slate-700 */
  --_active-bg:#3b82f6; /* azul */
  --_active-txt:#ffffff;
}

.autocomplete-list {
  position: relative;
}
.autocomplete-list .menu {
  position: absolute;
  z-index: 1000;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .5rem;
  margin-top: .25rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.autocomplete-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  cursor: pointer;
}
.autocomplete-item:hover { background: #f8f9fa; }
.autocomplete-item img { width: 24px; height: 24px; border-radius: 9999px; }
.autocomplete-empty { padding: .5rem .75rem; color: #6c757d; }

/* Nombre dorado del ganador */
.winner-name {
  color: #ffd700 !important;
  font-weight: 350;
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.75), 0 0 6px rgba(255, 215, 0, 0.45);
}

/* Avatar con borde y glow dorado */
.winner-avatar {
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.9), 0 0 7px rgba(255, 215, 0, 0.6);
  border: 1px solid #ffd700;
}

.series-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px; /* pastilla */
  background: linear-gradient(90deg, #3c3c47, #1c1c25); /* fondo similar */
  border: 1px solid rgba(255,255,255,0.18);
  color: #ffffff;
  letter-spacing: 0.3px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

/* Borde superior tipo “glow” como el botón de Steam */
.series-mini::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #60baff, #f64fb3, #ffce6a);
  opacity: .85;
}

/* fila superior de la card */
.match-card .card-body > .d-flex.justify-content-between{
  align-items: center;
  gap: .5rem;
}

/* bloque IZQUIERDO (avatares + nombres): que pueda encogerse */
.match-card .card-body > .d-flex.justify-content-between > .d-flex.align-items-center.gap-2{
  flex: 1 1 0%;   /* ocupa el espacio disponible */
  min-width: 0;   /* permite shrink de contenido en flex */
}

/* nombres: si falta espacio en móviles, que hagan ellipse en vez de “desaparecer” */
.match-card .card-body strong{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45vw; /* evita que uno tape al otro en pantallas chicas */
}
@media (max-width: 420px){
  .match-card .card-body > .d-flex.justify-content-between{
    flex-wrap: wrap;
  }
  .match-card .badge.series-pill{
    margin-left: auto;   /* se queda a la derecha */
    order: 2;            /* cae a la siguiente línea si no cabe */
  }
}
/* Ribbon ESTELAR más compacto (general) */
.featured-ribbon{
  top: 6px;
  right: -8px;
  font-size: .68rem;              /* antes .8rem */
  padding: .26rem .46rem .26rem .42rem;
  gap: .30rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.22);
}
.featured-ribbon svg{
  width: 12px; height: 12px;      /* icono más chico */
}

/* El BO3 pequeño cuando va dentro del ribbon */
.featured-ribbon .series-mini{
  margin-left: .35rem;
  padding: .10rem .40rem;
  font-size: .64rem;
  border-radius: 999px;
}

/* En pantallas chicas lo compactamos aún más */
@media (max-width: 420px){
  .featured-ribbon{
    top: 4px;
    right: -6px;
    font-size: .60rem;
    padding: .22rem .38rem .22rem .36rem;
    gap: .25rem;
  }
  .featured-ribbon svg{ width: 11px; height: 11px; }
  .featured-ribbon .series-mini{
    padding: .06rem .30rem;
    font-size: .58rem;
  }
}

/* Por si acaso, el chip BO3 de la esquina tiene prioridad visual */
.badge.series-pill{ z-index: 5; }
/* 1) En cards destacadas, ocultar el BO3 de la esquina
   (ya lo mostramos como .series-mini dentro del ribbon) */
.match-card--featured .badge.series-pill{
  display: none;
}

/* 2) Ribbon estelar aún más compacto + sin interferir con clics */
.featured-ribbon{
  top: 4px;
  right: -8px;
  font-size: .62rem;
  padding: .22rem .36rem .22rem .34rem;
  gap: .28rem;
  pointer-events: none; /* evita tapar el pill o el header */
}
.featured-ribbon svg{ width: 11px; height: 11px; }

.featured-ribbon .series-mini{
  margin-left: .30rem;
  padding: .06rem .32rem;
  font-size: .58rem;
  border-radius: 999px;
}

@media (min-width: 576px){
  .featured-ribbon{
    top: 6px;
    right: -10px;
    font-size: .66rem;
    padding: .24rem .40rem .24rem .36rem;
  }
  .featured-ribbon svg{ width: 12px; height: 12px; }
  .featured-ribbon .series-mini{ font-size: .60rem; padding: .08rem .38rem; }
}
/* Contenedor del ribbon */
.featured-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg, #f7d75b, #ffb400);
  color: #000;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.62rem;
  position: absolute;
  top: 6px;
  right: 6px;
  pointer-events: none; /* para no bloquear clics */
}

/* Icono */
.featured-ribbon svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* BO3 dentro del ribbon */
.featured-ribbon .series-mini {
  background: rgba(0, 0, 0, 0.32);
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.60rem;
  letter-spacing: .3px;
  line-height: 1; 
  display: flex;
  align-items: center;
}

/* Ocultar la versión de BO3 de la esquina en match destacado */
.match-card--featured .badge.series-pill {
  display: none;
}
/* Contenedor principal */
.featured-ribbon {
  position: absolute;
  top: 6px;
  right: 6px;
  pointer-events: none;

  display: flex;
  flex-direction: column;         /* ← ahora vertical */
  align-items: center;
  justify-content: center;

  background: linear-gradient(90deg, #f7d75b, #ffb400);
  color: #000;
  font-weight: 600;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.64rem;
  line-height: 1.1;
}

/* Icono */
.featured-ribbon svg {
  width: 12px;
  height: 12px;
  margin-bottom: 2px;            /* separación con el texto */
}

/* Texto ESTELAR */
.featured-ribbon span {
  font-size: 0.64rem;
  margin-bottom: 2px;
  white-space: nowrap;
}

/* BO3 debajo */
.featured-ribbon .series-mini {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.60rem;
  line-height: 1;
}

/* Ocultar el BO3 original externo cuando es estelar */
.match-card--featured .badge.series-pill {
  display: none;
}
/* Contraste fuerte para el texto "ESTELAR" dentro del ribbon */
.featured-ribbon { 
  background: linear-gradient(90deg,#f7d75b,#ffb400);
  color: #1a0e00; /* texto oscuro por defecto */
}

/* Solo el texto ESTELAR (no afecta al BO3) */
.featured-ribbon span:not(.series-mini){
  color: #1a0e00;                 /* marrón oscuro = contraste AAA sobre amarillo */
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
  -webkit-text-stroke: .35px rgba(0,0,0,.18); /* contorno sutil para nitidez */
  text-shadow:
    0 1px 0 rgba(255,255,255,.35), /* leve bisel claro */
    0 0 6px rgba(0,0,0,.18);       /* glow suave para separar del fondo */
}

/* El BO3 sigue legible con pastilla oscura */
.featured-ribbon .series-mini{
  background: rgba(0,0,0,.32);
  color: #fff;
}
.match-card--featured .featured-ribbon span:not(.series-mini){ color:#1a0e00 !important; }

/* ✅ Centrar perfectamente el BO3 dentro del ribbon */
.featured-ribbon {
  display: flex;
  flex-direction: column;
  align-items: center;        /* <--- centra horizontalmente */
  justify-content: center;    /* <--- centra verticalmente */
  text-align: center;         /* <--- por si acaso */
  padding: 6px 6px !important; /* equilibrado en ambos lados */
}

/* Asegura que ESTELAR y BO3 no se desplacen */
.featured-ribbon span:not(.series-mini) {
  display: block;
  width: 100%;
  text-align: center;
}

.featured-ribbon .series-mini {
  margin-top: 3px;            /* separa un poco */
  width: auto;
  text-align: center;
  display: inline-flex;
  justify-content: center;
}
/* Centrado perfecto del contenido del ribbon (icono, ESTELAR y BO3) */
.featured-ribbon{
  /* caja consistente y simétrica */
  min-width: 74px;                 /* evita que el contenido empuje más a un lado */
  padding: 6px 6px !important;     /* mismo padding a izquierda y derecha */
  
  display: flex;
  flex-direction: column;
  align-items: center;              /* centra horizontal */
  justify-content: center;          /* centra vertical */
  gap: 3px;
  text-align: center;
}

/* Cada hijo ocupa el ancho de la caja y centra su texto */
.featured-ribbon > *{
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

/* BO3 exactamente al medio */
.featured-ribbon .series-mini{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;                   /* centra en el eje horizontal */
  padding: 2px 6px;                 /* puedes bajar a 2px 5px si lo quieres aún más compacto */
}

.vs-sep {
  display: inline-block;
  padding: 0 0px; /* Ajusta si quieres más o menos espacio */
  color: #999; /* o el color que ya usas */
  font-weight: 750;
}

/* Centrar cards en la pestaña Próximos */
#proximos .row.row-cols-1.row-cols-md-2 {
  justify-content: center;
}

/* No dejar que se estire infinito cuando haya una sola */
#proximos .match-card {
  max-width: 720px;
  margin-inline: auto;
}

/* BO7: versión “super estelar” encima del featured normal */
.match-card--featured.match-card--bo7 {
  /* refuerza el brillo dorado */
  box-shadow:
    0 0 0 1px rgba(255, 184, 0, 0.55) inset,
    0 22px 60px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(255, 215, 0, 0.65);
  animation: featured-rotate 4s linear infinite; /* más rápido que el normal */
}

/* halo extra encima del contenido */
.match-card--bo7::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(236, 72, 153, 0.16), transparent 55%);
}

/* Ribbon todavía más “Gran Final” para BO7 */
.match-card--bo7 .featured-ribbon {
  background: linear-gradient(135deg, #fff9c8, #ffd700, #ffb400);
  box-shadow:
    0 0 20px rgba(255, 215, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* El texto GRAN FINAL bien marcado */
.match-card--bo7 .featured-ribbon span:not(.series-mini) {
  font-weight: 900;
  letter-spacing: 0.4px;
}

/* El BO7 del ribbon con pastilla oscura bien centrada */
.match-card--bo7 .featured-ribbon .series-mini {
  background: rgba(0, 0, 0, 0.6);
}

.match-card--bo7 {
  border-width: 2px;
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.35);
}

/* ----------------------------- */
/*  ESTILO ESPECIAL PARA BO7     */
/* ----------------------------- */

/* BO7: final destacada pero proporcionada */
.match-card.match-bo7 {
  position: relative;

  /* fondo apenas más cálido que una card normal */
  background:
    linear-gradient(180deg, rgba(20,16,35,1) 0%, rgba(12,10,26,1) 100%);

  border: 2px solid rgba(255,215,0,0.85);
  box-shadow:
    0 0 18px rgba(255,215,0,0.45),
    0 0 40px rgba(255,215,0,0.25);

  /* SIN escala para que no se vea más grande que las otras */
  transform: none;
}

/* Hover: un poco más de glow, pero sin agrandar la card */
.match-card.match-bo7:hover {
  box-shadow:
    0 0 24px rgba(255,215,0,0.6),
    0 0 50px rgba(255,215,0,0.35);
  transform: none;
}

/* Halo suave por fuera de la card (no aumenta el tamaño visual del contenido) */
.match-card.match-bo7::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 30px rgba(255,215,0,0.7);
  opacity: 0.9;
}

/* Badge BO7 rediseñado */
.match-card.match-bo7 .badge-bo7 {
    position: absolute;
    top: -15px;
    right: -15px;
    background: linear-gradient(45deg, #ffd700, #ffae00);
    padding: 14px 22px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,215,0,0.7);
    color: #000;
    font-weight: 900;
    font-size: 15px;
    text-align: center;
    border: 2px solid #fff;
    animation: pulseBO7 2s infinite;
}

.match-card.match-bo7 .featured-ribbon {
  box-shadow:
    0 0 10px rgba(255,215,0,0.6),
    0 0 0 1px rgba(0,0,0,0.35);
}