/**
 * Vista pública — estilo broadcast deportivo (ESPN / Fox Sports)
 * Solo activo con body.mode-public
 */

/**
 * Vista pública — estilo broadcast deportivo (ESPN / Fox Sports)
 * Solo activo con body.mode-public
 */

body.mode-public {
  --bc-bg: #070605;
  --bc-surface: #12100d;
  --bc-surface-2: #1a1612;
  --bc-line: rgba(255, 255, 255, 0.08);
  --bc-line-strong: rgba(245, 197, 24, 0.35);
  --bc-text: #f4f0ea;
  --bc-muted: #9a8f82;
  --bc-gold: #f5c518;
  --bc-gold-dim: #c9a012;
  --bc-live: #00e676;
  --bc-live-glow: rgba(0, 230, 118, 0.35);
  --bc-danger: #ff4757;
  --bc-radius: 14px;
  --bc-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  background: var(--bc-bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(245, 197, 24, 0.14), transparent 55%),
    radial-gradient(ellipse 40% 30% at 100% 50%, rgba(0, 230, 118, 0.06), transparent),
    linear-gradient(180deg, #0a0806 0%, #070605 40%, #050404 100%);
}

.mode-public .app-header {
  background: rgba(7, 6, 5, 0.92);
  border-bottom: 1px solid var(--bc-line);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.mode-public .logo-icon {
  background: linear-gradient(135deg, var(--bc-gold), #ffe566);
  box-shadow: 0 0 20px rgba(245, 197, 24, 0.35);
}

.mode-public .main-content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

/* ── Ticker broadcast ── */
.mode-public .live-ticker {
  height: 40px;
  background: linear-gradient(90deg, #0d0b09, #151210, #0d0b09);
  border-bottom: 1px solid var(--bc-line-strong);
}

.mode-public .live-ticker::before {
  content: 'LIVE';
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: #000;
  background: var(--bc-live);
  z-index: 2;
}

.mode-public .live-ticker {
  display: flex;
  overflow: hidden;
}

.mode-public .live-ticker .ticker-track {
  flex: 1;
  animation: ticker 35s linear infinite;
}

.mode-public .ticker-item.live {
  color: var(--bc-text);
  font-weight: 500;
}

.mode-public .ticker-item.live strong {
  color: var(--bc-gold);
  font-size: 1rem;
}

.mode-public .ticker-dot {
  background: var(--bc-live);
  box-shadow: 0 0 8px var(--bc-live-glow);
}

/* ── Hero ── */
.bc-hero {
  position: relative;
  padding: 2rem 0 1.5rem;
  margin-bottom: 2rem;
}

.bc-hero-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  align-items: stretch;
}

.bc-hero-main {
  position: relative;
  padding: 2rem 2rem 1.75rem;
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-line);
  background:
    linear-gradient(135deg, rgba(245, 197, 24, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, var(--bc-surface-2), var(--bc-surface));
  overflow: hidden;
}

.bc-hero-main::after {
  content: '';
  position: absolute;
  right: -20%;
  top: -30%;
  width: 55%;
  height: 140%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.07), transparent 65%);
  pointer-events: none;
}

.bc-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bc-gold);
  margin-bottom: 0.75rem;
}

.bc-hero-kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--bc-gold);
}

.bc-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.65rem;
}

.bc-hero-title em {
  font-style: normal;
  color: var(--bc-gold);
  display: block;
}

.bc-hero-sub {
  color: var(--bc-muted);
  font-size: 1.02rem;
  max-width: 36ch;
  line-height: 1.55;
}

.bc-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.bc-stat-chip {
  display: flex;
  flex-direction: column;
  min-width: 88px;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--bc-line);
}

.bc-stat-chip strong {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  color: var(--bc-text);
}

.bc-stat-chip span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bc-muted);
  margin-top: 0.2rem;
}

.bc-stat-chip.is-live strong { color: var(--bc-live); }
.bc-stat-chip.is-live { border-color: rgba(0, 230, 118, 0.35); }

/* Live panel */
.bc-live-panel {
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-line);
  background: var(--bc-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bc-live-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--bc-line);
}

.bc-live-panel-head h3 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.bc-live-count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--bc-live);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bc-live-panel-body {
  flex: 1;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 320px;
  overflow-y: auto;
}

.bc-live-mini {
  padding: 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bc-line);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
}

.bc-live-mini:hover {
  border-color: var(--bc-line-strong);
  transform: translateX(2px);
}

.bc-live-mini.is-live {
  border-color: rgba(0, 230, 118, 0.4);
  background: rgba(0, 230, 118, 0.05);
}

.bc-live-mini-tournament {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bc-gold);
  margin-bottom: 0.35rem;
}

.bc-live-mini-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
}

.bc-live-mini-team {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}

.bc-live-mini-team:last-child { text-align: right; }

.bc-live-mini-score {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--bc-gold);
  white-space: nowrap;
}

.bc-live-mini-vs {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bc-muted);
  white-space: nowrap;
}

.bc-live-mini-meta {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--bc-muted);
  text-align: center;
  line-height: 1.35;
}

.bc-stream-match-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.35rem 0 0.15rem;
  font-weight: 600;
}

.bc-stream-match-line .bc-live-mini-team {
  font-size: 0.95rem;
}

.bc-stream-match-meta {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--bc-muted);
}

.mode-public .ticker-vs {
  opacity: 0.75;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85em;
}

.bc-live-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--bc-muted);
  font-size: 0.85rem;
}

/* Section */
.bc-section { margin-bottom: 2.5rem; }

.bc-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--bc-gold);
}

.bc-section-head h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1.25rem;
}

/* Tournament card broadcast */
.bc-tcard {
  position: relative;
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-line);
  background: var(--bc-surface);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.bc-tcard:hover {
  transform: translateY(-4px);
  border-color: var(--bc-line-strong);
  box-shadow: var(--bc-shadow);
}

.bc-tcard-stripe {
  height: 4px;
  background: linear-gradient(90deg, var(--bc-gold), var(--stripe-color, var(--bc-gold-dim)));
}

.bc-tcard-inner { padding: 1.25rem 1.35rem 1.35rem; }

.bc-tcard-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.bc-tcard-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.05;
  margin-bottom: 0.35rem;
}

.bc-tcard-desc {
  font-size: 0.82rem;
  color: var(--bc-muted);
  margin-bottom: 1rem;
}

.bc-tcard-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.bc-metric {
  text-align: center;
  padding: 0.55rem 0.35rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--bc-line);
}

.bc-metric-val {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--bc-gold);
  line-height: 1;
}

.bc-metric-lbl {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--bc-muted);
  margin-top: 0.15rem;
}

.bc-tcard-leader {
  font-size: 0.78rem;
  color: var(--bc-muted);
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border-left: 3px solid var(--bc-gold);
  background: rgba(245, 197, 24, 0.06);
  margin-bottom: 1rem;
}

.bc-tcard-leader strong { color: var(--bc-text); }

.bc-tcard-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Badges sin emoji */
.bc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bc-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border: 1px solid var(--bc-line);
  color: var(--bc-muted);
  background: rgba(255, 255, 255, 0.04);
}

.bc-badge-sport { color: var(--bc-text); border-color: rgba(255, 255, 255, 0.12); }
.bc-badge-live {
  color: #000;
  background: var(--bc-live);
  border-color: var(--bc-live);
}

.bc-badge-accent {
  color: var(--bc-gold);
  border-color: rgba(245, 197, 24, 0.35);
}

/* Tournament page hero */
.bc-tournament-hero {
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-line);
  background:
    linear-gradient(120deg, rgba(245, 197, 24, 0.1), transparent 50%),
    var(--bc-surface-2);
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}

.bc-tournament-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0.5rem 0 0.75rem;
}

.bc-tournament-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
}

.bc-meta-pill {
  text-align: center;
  min-width: 76px;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--bc-line);
}

.bc-meta-pill strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  color: var(--bc-gold);
}

.bc-meta-pill span {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--bc-muted);
}

.bc-meta-pill.is-live strong { color: var(--bc-live); }

.bc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--bc-muted);
  margin: 1rem 0 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bc-breadcrumb a {
  color: var(--bc-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.bc-breadcrumb a:hover { color: var(--bc-gold); }

.bc-breadcrumb-sep { opacity: 0.4; }

/* Public tabs */
.bc-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--bc-line);
  overflow-x: auto;
}

.bc-tab {
  position: relative;
  padding: 0.85rem 1.35rem;
  border: none;
  background: transparent;
  color: var(--bc-muted);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
}

.bc-tab:hover { color: var(--bc-text); }

.bc-tab.active {
  color: var(--bc-gold);
}

.bc-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--bc-gold);
}

.bc-panel {
  /* Sin animación en cada sync en vivo — evita parpadeo */
}

@keyframes bcFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Broadcast card wrapper */
.bc-card {
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-line);
  background: var(--bc-surface);
  overflow: hidden;
}

.bc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid var(--bc-line);
}

.bc-card-head h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bc-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bc-live);
}

.bc-live-dot--idle {
  color: var(--bc-muted);
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 0.72rem;
}

.bc-card-body { padding: 0; }
.bc-card-body.padded { padding: 1rem 1.25rem; }

/* Standings broadcast */
.mode-public .standings-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.mode-public .standings-table thead th {
  background: rgba(0, 0, 0, 0.5);
  color: var(--bc-muted);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.75rem 0.65rem;
  border-bottom: 2px solid var(--bc-gold);
}

.mode-public .standings-table tbody tr {
  border-bottom: 1px solid var(--bc-line);
  transition: background 0.15s;
}

.mode-public .standings-table tbody tr:hover {
  background: rgba(245, 197, 24, 0.04);
}

.mode-public .standings-row.zone-champion {
  background: linear-gradient(90deg, rgba(245, 197, 24, 0.12), transparent);
}

.mode-public .standings-row.zone-podium {
  background: rgba(245, 197, 24, 0.04);
}

.mode-public .standings-table td {
  padding: 0.7rem 0.65rem;
}

.mode-public .pts-badge {
  background: rgba(245, 197, 24, 0.2);
  border-color: rgba(245, 197, 24, 0.45);
  font-size: 1rem;
  min-width: 36px;
}

.mode-public .group-tabs {
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.25);
}

.mode-public .group-tab.active {
  background: var(--bc-gold);
  color: #0a0806;
}

/* Match broadcast cards */
.bc-fixture-round { margin-bottom: 1.75rem; }

.bc-round-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bc-line);
}

.bc-round-label {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bc-gold);
}

.bc-round-progress {
  font-size: 0.72rem;
  color: var(--bc-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bc-matches {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.bc-match {
  border-radius: 12px;
  border: 1px solid var(--bc-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  overflow: hidden;
  transition: border-color 0.2s;
}

.bc-match:hover { border-color: rgba(255, 255, 255, 0.14); }

.bc-match.live {
  border-color: rgba(0, 230, 118, 0.45);
  box-shadow: 0 0 24px rgba(0, 230, 118, 0.08);
}

.bc-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 1rem;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.65rem;
}

.bc-match-status {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.bc-match.live .bc-match-status { color: var(--bc-live); }
.bc-match.played .bc-match-status { color: var(--bc-muted); }
.bc-match.awaiting_result .bc-match-status { color: #5b9cf5; }
.bc-match.scheduled .bc-match-status { color: var(--bc-muted); }

.bc-match-board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
}

.bc-match-team {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.bc-match-team.away {
  flex-direction: row-reverse;
  text-align: right;
}

.bc-match-team-name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

.bc-match-score {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1;
  color: var(--bc-text);
  min-width: 88px;
  justify-content: center;
}

.bc-match.live .bc-match-score { color: var(--bc-live); }

.bc-match-score-sep {
  font-size: 1.4rem;
  color: var(--bc-muted);
  font-weight: 400;
}

.bc-match-score-pending {
  font-size: 1rem;
  color: var(--bc-muted);
  letter-spacing: 2px;
}

.bc-match-foot {
  padding: 0.5rem 1rem 0.65rem;
  font-size: 0.72rem;
  color: var(--bc-muted);
  border-top: 1px solid var(--bc-line);
}

/* Scorers broadcast */
.bc-scorers { list-style: none; margin: 0; padding: 0; }

.bc-scorer {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--bc-line);
}

.bc-scorer:last-child { border-bottom: none; }

.bc-scorer-rank {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--bc-muted);
  text-align: center;
}

.bc-scorer.r1 .bc-scorer-rank { color: var(--bc-gold); font-size: 1.3rem; }
.bc-scorer.r2 .bc-scorer-rank { color: #c0c0c0; }
.bc-scorer.r3 .bc-scorer-rank { color: #cd7f32; }

.bc-scorer-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.bc-scorer-team {
  font-size: 0.75rem;
  color: var(--bc-muted);
  margin-top: 0.1rem;
}

.bc-scorer-goals {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bc-gold);
  min-width: 2rem;
  text-align: center;
}

/* Empty state */
.mode-public .bc-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--bc-muted);
}

.mode-public .bc-empty h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--bc-text);
  margin-bottom: 0.35rem;
}

.mode-public .export-bar { margin-bottom: 1rem; }

.mode-public .btn-primary {
  background: linear-gradient(135deg, var(--bc-gold), #ffe566);
  color: #0a0806;
  font-weight: 700;
  border: none;
}

.mode-public .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 20px rgba(245, 197, 24, 0.35);
}

.mode-public .app-footer {
  border-top-color: var(--bc-line);
  background: rgba(0, 0, 0, 0.35);
}

.mode-public .app-footer strong { color: var(--bc-gold); }

@media (max-width: 900px) {
  .bc-hero-grid { grid-template-columns: 1fr; }
  .bc-live-panel-body { max-height: none; }
  .bc-tournament-hero { padding: 1.25rem 1.35rem; }
  .bc-match-board { gap: 0.65rem; padding: 1rem; }
  .bc-match-team-name { font-size: 0.82rem; }
}

.bc-search-bar {
  margin-bottom: 1.25rem;
}

.bc-search-bar input[type="search"] {
  width: 100%;
  max-width: 420px;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--bc-line);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 1rem;
}

.bc-complex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.bc-complex-card {
  padding: 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--bc-line);
  background: rgba(255, 255, 255, 0.03);
}

.bc-complex-card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
}

.bc-tcard-complex,
.bc-hero-complex-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bc-gold);
  margin: 0 0 0.35rem;
}

.client-admin-card { min-width: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.bc-stream-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1.25rem;
}

.bc-stream-card {
  border-radius: 12px;
  border: 1px solid var(--bc-line);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.bc-stream-card.is-live {
  border-color: rgba(0, 230, 118, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.12);
}

.bc-stream-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.bc-stream-iframe,
.bc-stream-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.bc-stream-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: var(--bc-muted);
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.9rem;
}

.bc-stream-placeholder--live {
  color: var(--bc-live);
}

.bc-stream-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #000;
  overflow: hidden;
  text-align: left;
}

.bc-stream-preview:focus-visible {
  outline: 2px solid var(--bc-gold, var(--accent));
  outline-offset: 2px;
}

.bc-stream-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.bc-stream-preview:hover .bc-stream-preview-img,
.bc-stream-preview:focus-visible .bc-stream-preview-img {
  transform: scale(1.03);
  opacity: 0.88;
}

.bc-stream-preview-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--bc-muted);
  font-size: 0.9rem;
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.85));
}

.bc-stream-preview-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bc-stream-preview-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font-size: 1.1rem;
  padding-left: 0.2rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}

.bc-stream-preview:hover .bc-stream-preview-play-icon,
.bc-stream-preview:focus-visible .bc-stream-preview-play-icon {
  transform: scale(1.08);
  background: rgba(0, 0, 0, 0.72);
}

.bc-stream-card.is-live .bc-stream-preview-play-icon {
  border-color: rgba(0, 230, 118, 0.85);
}

.bc-stream-card-body {
  padding: 1rem 1.1rem 1.15rem;
}

.bc-stream-card-title {
  margin: 0.35rem 0 0.25rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.bc-stream-card-desc {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  color: var(--bc-muted);
}

.bc-stream-card-meta {
  font-size: 0.78rem;
  margin: 0 0 0.65rem;
}

.bc-empty-streams {
  grid-column: 1 / -1;
}

.bc-section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.bc-global-search {
  margin-bottom: 1.5rem;
}

.bc-global-search input[type="search"] {
  width: 100%;
  max-width: 480px;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--bc-line);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 1rem;
}

/* ── Aviso transmisiones (EffyOne / organizador) ── */
.bc-streams-notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--bc-radius);
  border: 1px solid rgba(245, 197, 24, 0.28);
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.09), rgba(255, 255, 255, 0.03));
  color: var(--bc-text);
}

.bc-streams-notice--compact {
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.bc-streams-notice--compact .bc-streams-notice-text {
  font-size: 0.88rem;
  margin-bottom: 0.5rem;
}

.bc-streams-notice--compact .bc-streams-notice-list {
  display: none;
}

.bc-streams-notice-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bc-gold);
  background: rgba(245, 197, 24, 0.15);
  border: 1px solid rgba(245, 197, 24, 0.35);
}

.bc-streams-notice-body {
  flex: 1;
  min-width: 0;
}

.bc-streams-notice-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--bc-gold);
}

.bc-streams-notice-text {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--bc-muted);
}

.bc-streams-notice-text strong {
  color: var(--bc-text);
  font-weight: 600;
}

.bc-streams-notice-list {
  margin: 0 0 0.75rem;
  padding-left: 1.15rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--bc-muted);
}

.bc-streams-notice-list li + li {
  margin-top: 0.25rem;
}

.bc-streams-notice-action {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  border-left: 3px solid var(--bc-gold);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--bc-text);
}

.bc-streams-notice-action-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.2rem;
  color: var(--bc-gold-dim);
}

.bc-empty-streams-hint {
  margin-top: 0.75rem;
  max-width: 36rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--bc-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
 * FAN HOME (rediseño público) — "datos primero".
 * Tokens --fan-* (base neutral + acento reemplazable por liga) y clases fan-*.
 * Mobile-first; el grid principal/lateral aparece en >=880px.
 * Cero colores hardcodeados fuera de estos tokens.
 * ═════════════════════════════════════════════════════════════════════════ */

body.mode-public {
  --fan-ink-950: #050608;
  --fan-ink-900: #0b0f14;
  --fan-ink-850: #111821;
  --fan-ink-800: #17202b;
  --fan-line-soft: rgba(255, 255, 255, 0.07);
  --fan-line-strong: rgba(255, 255, 255, 0.14);
  --fan-text: #f5f7fa;
  --fan-text-muted: #94a0ad;
  --fan-text-soft: #c9d1da;
  --fan-brand: #f4c430;
  --fan-live: #19e27a;
  --fan-danger: #ff4d5e;
  /* Acento reemplazable por liga/club (fallback a marca) */
  --fan-accent: var(--league-accent, var(--fan-brand));
  --fan-accent-contrast: var(--league-accent-contrast, #1a1306);
  --fan-live-color: var(--league-live, var(--fan-live));
  --fan-r-sm: 6px;
  --fan-r-md: 8px;
  --fan-r-lg: 12px;
}

/* Numeros tabulares en todo marcador/posicion/stat del bloque fan */
.fan-home-data .num,
.fan-score-n, .fan-pos, .fan-pts, .fan-stat, .fan-scorer-gl, .fan-scorer-rk,
.fan-fix-res, .fan-fix-time, .fan-goal-min {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* -- Heroe marketing ADELGAZADO -- */
.bc-hero--slim {
  padding: 1.25rem 0 0.75rem;
  margin-bottom: 1.25rem;
}
.bc-hero-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--fan-r-lg);
  border: 1px solid var(--fan-line-soft);
  background: linear-gradient(135deg, rgba(244, 196, 48, 0.06), transparent 55%), var(--fan-ink-900);
}
.bc-hero--slim .bc-hero-kicker { margin-bottom: 0.4rem; }
.bc-hero--slim .bc-hero-title {
  font-size: clamp(1.4rem, 5.2vw, 2rem);
  margin-bottom: 0.3rem;
}
.bc-hero--slim .bc-hero-title em { display: inline; }
.bc-hero--slim .bc-hero-sub { font-size: 0.9rem; max-width: 46ch; }
.bc-hero-livechip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fan-text-soft);
  background: var(--fan-ink-800);
  border: 1px solid var(--fan-line-soft);
}
.bc-hero-livechip--idle { color: var(--fan-text-muted); }

/* -- Layout del bloque fan -- */
.fan-home-data { display: block; margin-bottom: 1.5rem; }
.fan-block { margin-bottom: 1.25rem; }
.fan-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.fan-col { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
@media (min-width: 880px) {
  .fan-grid { grid-template-columns: 1.65fr 1fr; align-items: start; }
}

/* -- Eyebrow + punto live -- */
.fan-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fan-text-muted);
}
.fan-eyebrow b { color: var(--fan-text); }
.fan-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fan-live-color);
  box-shadow: 0 0 0 0 rgba(25, 226, 122, 0.6);
  animation: fanPulse 2s ease-out infinite;
  flex: none;
}
.fan-dot--idle { background: var(--fan-text-muted); animation: none; }
.fan-dot--ink { background: var(--fan-accent-contrast); box-shadow: none; animation: none; }
@keyframes fanPulse {
  0% { box-shadow: 0 0 0 0 rgba(25, 226, 122, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(25, 226, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 226, 122, 0); }
}

/* -- Heroe de datos (partido destacado) -- */
.fan-hero {
  position: relative;
  border: 1px solid var(--fan-line-strong);
  border-radius: var(--fan-r-lg);
  overflow: hidden;
  background:
    radial-gradient(700px 280px at 50% -40%, rgba(25, 226, 122, 0.13), transparent 70%),
    linear-gradient(180deg, var(--fan-ink-850), var(--fan-ink-900));
}
.fan-hero.is-live { border-color: rgba(25, 226, 122, 0.32); }
.fan-hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0;
  font-size: 0.74rem; font-weight: 600; color: var(--fan-text-muted);
}
.fan-hero-ctx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fan-badge-live {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
  background: var(--fan-live-color); color: var(--fan-accent-contrast);
  font-weight: 700; font-size: 0.7rem; letter-spacing: 0.5px;
  padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
}
.fan-hero-final {
  flex: none; font-weight: 700; font-size: 0.7rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--fan-text-soft);
}
.fan-score-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 0.75rem; padding: 0.85rem 1rem 1.1rem;
  text-decoration: none; color: inherit;
}
.fan-team-block {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  text-align: center; min-width: 0;
}
.fan-team-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.95rem, 3.4vw, 1.15rem); line-height: 1.05;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fan-score {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 11vw, 3.6rem); line-height: 0.85;
}
.fan-score-dash { color: var(--fan-text-muted); font-weight: 600; font-size: 0.5em; }
.fan-score-vs { color: var(--fan-text-muted); font-weight: 700; font-size: 0.42em; letter-spacing: 1px; }
.fan-score-pen {
  display: block; width: 100%; text-align: center;
  font-family: var(--font-body, inherit); font-size: 0.62rem; font-weight: 600;
  color: var(--fan-text-muted); margin-top: 0.15rem;
}
.fan-score--flash { animation: fanFlash 1.1s ease-out 1; }
@keyframes fanFlash {
  0% { filter: brightness(1.8) drop-shadow(0 0 12px rgba(25, 226, 122, 0.7)); }
  100% { filter: none; }
}
.fan-goals {
  border-top: 1px solid var(--fan-line-soft);
  display: grid; grid-template-columns: 1fr 1fr;
}
.fan-goals-side {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.6rem 1rem; font-size: 0.8rem; color: var(--fan-text-soft); min-width: 0;
}
.fan-goals-side--r { text-align: right; border-left: 1px solid var(--fan-line-soft); }
.fan-goal { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.fan-goals-side--r .fan-goal { flex-direction: row-reverse; }
.fan-goal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fan-goal-ball { font-size: 0.8em; opacity: 0.85; flex: none; }
.fan-goal-min { color: var(--fan-text-muted); font-weight: 700; font-size: 0.72rem; flex: none; }

/* -- Crest / escudo -- */
.fan-crest {
  display: grid; place-items: center; flex: none;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-display); font-weight: 700; color: #fff;
  overflow: hidden; object-fit: cover;
}
.fan-crest--xs { width: 22px; height: 22px; font-size: 0.58rem; }
.fan-crest--sm { width: 30px; height: 30px; font-size: 0.72rem; }
.fan-crest--lg { width: 54px; height: 54px; font-size: 1.05rem; border-width: 1.5px; }
.fan-crest--img { background: var(--fan-ink-800); }

/* -- Card generica fan -- */
.fan-card {
  border: 1px solid var(--fan-line-soft);
  border-radius: var(--fan-r-md);
  background: linear-gradient(180deg, var(--fan-ink-900), rgba(11, 15, 20, 0.6));
  overflow: hidden;
}
.fan-card-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.85rem 0.9rem 0.7rem;
  border-bottom: 1px solid var(--fan-line-soft);
}
.fan-card-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.4px;
}
.fan-pill {
  font-size: 0.7rem; font-weight: 600; color: var(--fan-text-muted);
  background: var(--fan-ink-800); border: 1px solid var(--fan-line-soft);
  padding: 3px 8px; border-radius: 999px; flex: none;
}
.fan-card-foot {
  display: block; padding: 0.6rem 0.9rem; border-top: 1px solid var(--fan-line-soft);
  font-size: 0.78rem; font-weight: 600; color: var(--fan-accent); text-decoration: none;
}
.fan-card-foot:hover { text-decoration: underline; }

/* -- Tabla compacta (sin scroll horizontal) -- */
.fan-table { display: block; }
.fan-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 30px 42px 44px;
  align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.4rem 0.5rem;
  border-top: 1px solid var(--fan-line-soft);
}
.fan-row:first-child { border-top: none; }
.fan-row--head {
  padding-top: 0.6rem; padding-bottom: 0.5rem;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--fan-text-muted); font-weight: 700;
}
.fan-row--lead { background: linear-gradient(90deg, rgba(244, 196, 48, 0.08), transparent 50%); }
.fan-row--podium { background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 50%); }
.fan-pos {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  text-align: center; color: var(--fan-text-soft);
}
.fan-row--lead .fan-pos { color: var(--fan-accent); }
.fan-team-cell { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.fan-team-cell--head { text-align: left; }
.fan-team-cell-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.85rem; font-weight: 500;
}
.fan-stat {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  text-align: center; color: var(--fan-text-soft);
}
.fan-dg { color: var(--fan-text-muted); }
.fan-dg--pos { color: var(--fan-live-color); }
.fan-dg--neg { color: var(--fan-danger); }
.fan-pts {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  text-align: center; color: var(--fan-text);
}
.fan-hide-sm { display: none; }
@media (min-width: 560px) {
  .fan-row {
    grid-template-columns: 30px minmax(0, 1fr) 34px 34px 34px 44px 48px;
  }
  .fan-standings--nodraw .fan-row {
    grid-template-columns: 30px minmax(0, 1fr) 34px 34px 44px 48px;
  }
  .fan-row .fan-hide-sm { display: block; }
}

/* -- Goleadores -- */
.fan-scorers { display: block; }
.fan-scorer {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.9rem; border-top: 1px solid var(--fan-line-soft);
}
.fan-scorer:first-child { border-top: none; }
.fan-scorer-rk {
  font-family: var(--font-display); font-weight: 700; width: 18px;
  text-align: center; color: var(--fan-text-muted); flex: none;
}
.fan-scorer-nm { flex: 1; min-width: 0; }
.fan-scorer-nm b {
  display: block; font-size: 0.85rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fan-scorer-nm small { color: var(--fan-text-muted); font-size: 0.72rem; }
.fan-scorer-gl {
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: baseline; gap: 3px; flex: none;
}
.fan-scorer-gl small {
  font-size: 0.66rem; color: var(--fan-text-muted); font-weight: 600;
  font-family: var(--font-body, inherit);
}
.fan-scorer--lead { background: linear-gradient(90deg, rgba(244, 196, 48, 0.1), transparent 55%); }
.fan-scorer--lead .fan-scorer-gl { color: var(--fan-accent); }
.fan-scorer-medal { font-size: 0.9em; }

/* -- Lista de partidos (proximos / ultimos / mas en vivo) -- */
.fan-fix-list { display: block; }
.fan-fix-day {
  padding: 0.5rem 0.9rem 0.35rem; border-top: 1px solid var(--fan-line-soft);
  background: rgba(5, 6, 8, 0.3);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--fan-text-muted);
}
.fan-fix-day:first-child { border-top: none; }
.fan-fix {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.9rem; border-top: 1px solid var(--fan-line-soft);
  font-size: 0.84rem;
}
.fan-fix:first-child { border-top: none; }
.fan-fix-side { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.fan-fix-side--h { justify-content: flex-end; }
.fan-fix-side span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}
.fan-fix-mid {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 48px; text-align: center;
}
.fan-fix-res { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.fan-fix-time {
  font-family: var(--font-display); color: var(--fan-text-soft);
  background: var(--fan-ink-800); border: 1px solid var(--fan-line-soft);
  border-radius: var(--fan-r-sm); padding: 2px 7px; font-size: 0.75rem;
}
.fan-fix-live {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px; color: var(--fan-live-color);
}
.fan-w { color: var(--fan-accent); font-weight: 700; }

/* -- Estados vacios / banner -- */
.fan-hero--empty { padding: 1.5rem 1.25rem; text-align: center; }
.fan-empty-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 0.4rem; }
.fan-empty-title-sm { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.25rem; color: var(--fan-text); }
.fan-empty-text { color: var(--fan-text-muted); font-size: 0.86rem; line-height: 1.5; max-width: 48ch; margin: 0 auto; }
.fan-empty-inline { padding: 1.25rem 1rem; text-align: center; }
.fan-read-banner {
  margin-bottom: 0.85rem; padding: 0.55rem 0.85rem;
  border-radius: var(--fan-r-sm); font-size: 0.8rem; color: var(--fan-text-soft);
  background: rgba(77, 163, 255, 0.08); border: 1px solid rgba(77, 163, 255, 0.25);
}

/* -- Skeleton (sin spinner) -- */
.fan-sk-hero { height: 168px; border-radius: var(--fan-r-lg); margin-bottom: 1.1rem; }
.fan-sk-card { padding: 0.9rem; border: 1px solid var(--fan-line-soft); border-radius: var(--fan-r-md); }
.fan-sk-line { height: 14px; border-radius: 4px; margin: 0.5rem 0; }
.fan-sk-hero, .fan-sk-line {
  background: linear-gradient(90deg, var(--fan-ink-850) 25%, var(--fan-ink-800) 37%, var(--fan-ink-850) 63%);
  background-size: 400% 100%;
  animation: fanShimmer 1.4s ease-in-out infinite;
}
@keyframes fanShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* -- Foco visible (accesibilidad AA, teclado) -- */
.fan-score-row:focus-visible,
.fan-card-foot:focus-visible,
.bc-hero-livechip:focus-visible {
  outline: 2px solid var(--fan-accent); outline-offset: 2px; border-radius: var(--fan-r-sm);
}

/* -- prefers-reduced-motion: apaga pulso/flash/shimmer -- */
@media (prefers-reduced-motion: reduce) {
  .fan-dot, .fan-score--flash, .fan-sk-hero, .fan-sk-line { animation: none !important; }
}