/* ════════════════════════════════════════════════════════════
   COMPONENTS — cards, badges, tablas, botones.
   Todo con clases genéricas (.card, .badge) para reusar entre vistas.
   ════════════════════════════════════════════════════════════ */

/* ── Card base ── */
.card{
  background:var(--bg2);
  border:1px solid var(--bord);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  transition:background var(--t-fast), border-color var(--t-fast);
}
.card:active{ background:var(--bg3); } /* mobile: feedback al tocar, no hover */
@media(hover:hover){
  .card:hover{ background:var(--bg3); border-color:var(--accent); }
}

/* ── Section header (reemplaza .dh de v1) ── */
.section-head{
  display:flex;align-items:center;gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-3);
  position:sticky;top:0;z-index:5;
  background:var(--bg0);
}
.section-head::after{ content:'';flex:1;height:1px;background:var(--bord2); }

/* ── Badge (LIVE / FT / HT / pill genérico) ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;
  border-radius:var(--r-full);
  font-family:var(--font-display);
  font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
}
.badge-live{ background:var(--live-glow); color:var(--live); }
.badge-live .dot{
  width:5px;height:5px;border-radius:50%;background:var(--live);
  animation:pulse-dot 1.4s ease-in-out infinite;
}
.badge-neutral{ background:var(--accent-glow); color:var(--accent-hi); }

/* ── MATCH CARD ── */
.match-card{
  display:grid;
  grid-template-columns:1fr 76px 1fr;
  align-items:center;
  gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-3);
  margin:0 var(--sp-2);
  border-radius:var(--r-md);
  position:relative;
}
.match-card + .match-card{ margin-top:var(--sp-1); }
.match-card.is-live{ border-color:var(--live); background:var(--live-glow); }
.match-card.is-next{ border-left:3px solid var(--accent); }

.mc-team{ display:flex;align-items:center;gap:var(--sp-1);min-width:0; }
.mc-team.away{ flex-direction:row-reverse;text-align:right; }
.mc-crest{
  width:26px;height:26px;object-fit:contain;flex-shrink:0;
  background:var(--bg3);border-radius:var(--r-sm);
}
.mc-name{
  font-family:var(--font-body);font-size:var(--fs-sm);font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.mc-center{ display:flex;flex-direction:column;align-items:center;gap:2px; }
.mc-score{
  font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:1px;
}
.mc-time{ font-family:var(--font-display);font-size:var(--fs-xs);color:var(--accent-hi);font-weight:600; }
.mc-stage{ font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px; }

/* ── COMPETITION CARD (para la vista "Ligas" del bottom nav) ── */
.comp-card{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  margin:0 var(--sp-2) var(--sp-1);
}
.comp-card-emoji{ font-size:22px; }
.comp-card-name{ font-weight:600;font-size:var(--fs-base);color:var(--text); }
.comp-card-sub{ font-size:var(--fs-xs);color:var(--dim); }

/* ── NEWS CARD ── */
.news-card{
  display:flex;flex-direction:column;gap:var(--sp-1);
  padding:var(--sp-3);
  margin:0 var(--sp-2) var(--sp-2);
}
.news-source{ font-size:var(--fs-xs);color:var(--accent-hi);font-weight:600;text-transform:uppercase;letter-spacing:.6px; }
.news-title{ font-family:var(--font-body);font-weight:700;font-size:var(--fs-base);color:var(--text);line-height:1.35; }
.news-date{ font-size:11px;color:var(--dim); }

/* ── STANDINGS TABLE ── */
.standings{ width:100%;border-collapse:collapse;font-size:var(--fs-sm); }
.standings th{
  font-family:var(--font-display);font-size:9px;letter-spacing:1px;text-transform:uppercase;
  color:var(--dim);padding:var(--sp-1) 6px;text-align:center;
}
.standings th:first-child, .standings td:first-child{ text-align:left;padding-left:var(--sp-3); }
.standings td{ padding:var(--sp-1) 6px;text-align:center;color:var(--text);border-top:1px solid var(--bord2); }
.standings td.pts{ color:var(--accent-hi);font-weight:700; }
.standings tr.zone-top td:first-child{ box-shadow:inset 3px 0 0 var(--win); }
.standings tr.zone-bottom td:first-child{ box-shadow:inset 3px 0 0 var(--live); }

/* ── ESTADOS (loading / empty) ── */
.state-load{ display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-6) var(--sp-3);color:var(--dim); }
.spinner{ width:26px;height:26px;border:2px solid var(--bord);border-top-color:var(--accent);border-radius:50%; }
.state-empty{ padding:var(--sp-6) var(--sp-3);text-align:center;color:var(--dim);font-size:var(--fs-sm);line-height:1.8; }

/* ── SKELETON (shimmer, shape solamente — la animación vive en animations.css) ── */
.skeleton-card{
  height:64px;
  border-radius:var(--r-md);
  background:linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 37%, var(--bg2) 63%);
  background-size:400% 100%;
}

/* ── BOTONES ── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;
  border-radius:var(--r-full);
  background:var(--bg2);border:1px solid var(--bord);
  color:var(--text);font-size:var(--fs-sm);font-weight:600;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--accent);border-color:var(--accent);color:#0B1220; }
.btn-like.liked{ background:var(--live-glow);border-color:var(--live);color:var(--live); }

/* ── TOAST (confirmaciones tipo "¡Predicción guardada!") ── */
.toast{
  position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom, 0));
  transform:translateX(-50%);
  background:var(--bg3);border:1px solid var(--bord);
  padding:10px 20px;border-radius:var(--r-full);
  font-size:var(--fs-sm);color:var(--text);
  box-shadow:var(--shadow-md);
  z-index:50;
}