/* ════════════════════════════════════════════════════════════
   FEATURES (v3) — estilos de los componentes nuevos que en v2 no
   existían: goleadores, noticias, prode, ticker en vivo y cuadro.
   Reusa los tokens de variables.css, así que respeta el rebrand.
   ════════════════════════════════════════════════════════════ */

/* Placeholder de escudo (cuando no hay imagen o falla la carga) */
.mc-crest-ph{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:11px;color:var(--dim);
  background:var(--bg3);
}

/* Badges extra */
.badge-warn{ background:rgba(232,184,75,.15); color:var(--accent); }

/* Grupo/fase dentro de la match card */
.mc-group{ grid-column:1/-1; text-align:center; margin-bottom:2px; }
.mc-verified{ color:var(--win); font-size:11px; margin-top:2px; }

/* ── TICKER en vivo ── */
#ticker-track{
  display:flex; align-items:center; gap:var(--sp-2);
  height:34px; padding:0 var(--sp-3);
  white-space:nowrap; overflow-x:auto; scrollbar-width:none;
  font-family:var(--font-display); font-size:var(--fs-xs);
  letter-spacing:.4px; color:var(--sub); background:var(--bg1);
  border-bottom:1px solid var(--bord);
}
#ticker-track::-webkit-scrollbar{ display:none; }
.tk-item{ display:inline-flex; align-items:center; gap:6px; }
.tk-item b{ color:var(--text); }
.tk-item .dot{ width:5px;height:5px;border-radius:50%;background:var(--live);animation:pulse-dot 1.4s ease-in-out infinite; }
.tk-sep{ color:var(--dim); }

/* ── GOLEADORES ── */
.scorers{ padding:var(--sp-2) var(--sp-2) var(--sp-4); }
.scorer-row{
  display:grid; grid-template-columns:34px 1fr auto; align-items:center;
  gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); margin:0 var(--sp-1) var(--sp-1);
  background:var(--bg2); border:1px solid var(--bord); border-radius:var(--r-md);
}
.scorer-rank{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-md);
  color:var(--dim); text-align:center;
}
.scorer-row.top1{ border-color:var(--accent); box-shadow:var(--glow-accent); }
.scorer-row.top1 .scorer-rank{ color:var(--accent); }
.scorer-row.top2 .scorer-rank, .scorer-row.top3 .scorer-rank{ color:var(--accent-hi); }
.scorer-name{ font-weight:600; color:var(--text); display:flex; flex-direction:column; min-width:0; }
.scorer-name .scorer-team{ font-size:var(--fs-xs); color:var(--dim); font-weight:400; }
.scorer-goals{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg);
  color:var(--accent-hi); display:flex; flex-direction:column; align-items:flex-end; line-height:1;
}
.scorer-goals-lbl{ font-size:9px; color:var(--dim); font-weight:400; letter-spacing:.5px; }

/* Escudo dentro de la tabla de posiciones */
.st-team{ text-align:left; }
.st-team{ display:flex; align-items:center; gap:6px; }
.st-team .mc-crest, .scorer-row .mc-crest{ width:20px;height:20px; }

/* ── NEWS ── (news-card ya existe en components.css; solo hover extra) */
@media(hover:hover){ .news-card:hover{ border-color:var(--accent); } }

/* ── PRODE ── */
.prode-head{ padding:var(--sp-3); }
.prode-input{
  width:calc(100% - 32px); margin:0 var(--sp-2) var(--sp-2);
  padding:10px 14px; border-radius:var(--r-full);
  background:var(--bg2); border:1px solid var(--bord); color:var(--text);
  font:inherit; font-size:var(--fs-sm);
}
.prode-input:focus{ outline:none; border-color:var(--accent); }
.prode-teams{ display:flex; flex-wrap:wrap; gap:var(--sp-1); padding:0 var(--sp-2); }
.prode-team.on{ background:var(--accent-glow); border-color:var(--accent); color:var(--accent-hi); }
.prode-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-2); align-items:center;
  padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--bord2);
}
.prode-pts{ color:var(--accent-hi); font-family:var(--font-display); }

/* ── CUADRO / BRACKET ── */
.bracket{ display:flex; gap:var(--sp-2); overflow-x:auto; padding:var(--sp-3) var(--sp-2); scrollbar-width:none; }
.bracket::-webkit-scrollbar{ display:none; }
.bracket-col{ min-width:240px; flex-shrink:0; }
.bracket-title{ padding:0 var(--sp-2) var(--sp-2); }
.bracket-col .match-card{ margin:0 0 var(--sp-1); }

/* ── FAB de compartir (nuevo en v3, opcional) ── */
.fab-share{
  position:fixed; right:var(--sp-3); bottom:calc(80px + env(safe-area-inset-bottom,0));
  width:46px; height:46px; border-radius:var(--r-full);
  background:var(--accent); color:var(--bg0); font-size:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); z-index:40; transition:transform var(--t-fast);
}
.fab-share:active{ transform:scale(.92); }