/* Clases de componentes compartidos (las fábricas de components.js).
   Tokens en base.css. Mobile-first. */

/* ===== Card ===== */
.card {
  background: var(--surface);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card.is-clickable { cursor: pointer; }
@media (hover: hover) {
  .card.is-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
}

/* ===== TeamCrest ===== */
.team-crest {
  border-radius: 50%;
  object-fit: contain;
  background: var(--surface-soft);
  box-shadow: var(--shadow-sm);
  flex: none;
  padding: 3px;
}

/* ===== MatchCard ===== */
.match-card { padding: 14px 16px; }

/* Partido ya jugado: fondo hundido y escudos apagados — el marcador final
   sigue legible pero la card no compite con los próximos/en vivo. */
.match-card--finished {
  background: var(--surface-soft);
  box-shadow: var(--shadow-sm);
}
.match-card--finished .team__crest { filter: saturate(.7); opacity: .85; }
.match-card--finished .team__name { color: var(--ink-2); }
.match-card--finished .team__name.is-winner { color: var(--ink); }
.match-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .7rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.match-card__round { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-card__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.team--away { flex-direction: row-reverse; text-align: right; }
.team__crest { width: 34px; height: 34px; }
.team__name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team__name.is-winner { color: var(--ink); font-weight: 700; }
.match-card__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
}
.match-card__time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.match-card__day { font-size: .72rem; color: var(--ink-3); }

/* ===== ScoreDisplay ===== */
.score-display {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: .01em;
}
.score-display__sep { color: var(--ink-3); font-weight: 600; }

/* ===== Badges de estado ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  color: var(--ink-2);
  white-space: nowrap;
}
.badge--finished { background: var(--surface-sunk); color: var(--ink-2); }
.badge--upcoming { background: #EEF0FF; color: var(--brand-1); }

/* Badge EN VIVO con pulso */
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--live-soft);
  color: var(--live);
  white-space: nowrap;
}
.badge-live__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: live-pulse 1.4s var(--ease) infinite;
}
@keyframes live-pulse {
  0%   { opacity: 1;   transform: scale(1); }
  50%  { opacity: .35; transform: scale(.7); }
  100% { opacity: 1;   transform: scale(1); }
}

/* ===== StatBar (barras enfrentadas) ===== */
.stat-bar { margin: 10px 0; }
.stat-bar__vals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  margin-bottom: 5px;
}
.stat-bar__label { color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-bar__v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 40px; }
.stat-bar__v--home { text-align: left; }
.stat-bar__v--away { text-align: right; }
.stat-bar__track {
  display: flex;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  overflow: hidden;
}
.stat-bar__fill { height: 100%; transition: width var(--t-slow) var(--ease); }
/* Convención de data viz del Match Center: LOCAL = azul, VISITA = verde
   (misma paleta que 1X2, xG hero, curva de evolución y duelo de cifras). */
.stat-bar__fill--home {
  background: linear-gradient(90deg, #2C7BE5, var(--blue));
  border-radius: var(--r-pill) 0 0 var(--r-pill);
}
.stat-bar__fill--away {
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  margin-left: auto;
  background: linear-gradient(90deg, var(--green), #18A765);
}
.stat-bar__v--home { color: var(--blue); font-weight: 700; }
.stat-bar__v--away { color: var(--green); font-weight: 700; }

/* ===== Iconset propio (SVG inline, icons.js) ===== */
.gz-ico {
  width: 1.1em;
  height: 1.1em;
  display: inline-block;
  vertical-align: -0.2em;
  flex: none;
}
.gz-ico--live, .gz-ico--dot.is-live { color: var(--live); }
.gz-ico--win { color: var(--win); }
.gz-ico--loss { color: var(--loss); }
.gz-ico--warn { color: var(--warn); }
.gz-ico--brand { color: var(--brand-1); }
.gz-ico--card.is-yellow { color: #FACC15; }
.gz-ico--card.is-red { color: var(--card-red); }

/* ===== Skeleton loaders ===== */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-soft);
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-card { height: 92px; border-radius: var(--r-md); margin-bottom: 12px; }
.skeleton-block { height: 16px; width: 100%; }

/* ===== SegmentedTabs ===== */
.segmented-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.segmented-tabs::-webkit-scrollbar { display: none; }
.segmented-tabs__tab {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.segmented-tabs__tab:hover { color: var(--ink); }
.segmented-tabs__tab.is-active {
  color: #fff;
  background: var(--grad-brand);
  box-shadow: var(--shadow-sm);
}

/* ===== StandingsTable ===== */
.standings-table {
  width: 100%;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.standings-table th {
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--hairline);
}
.standings-table td {
  text-align: center;
  padding: 9px 4px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
}
.standings-table .t-rank { width: 26px; color: var(--ink-3); }
.standings-table .t-team { text-align: left; }
.standings-table .t-pts { font-weight: 700; color: var(--ink); }
.standings-table tr:last-child td { border-bottom: 0; }
.standings-table__team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.standings-table__crest { width: 22px; height: 22px; }
.standings-table__name {
  font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px;
}
.standings-table tr.is-qualified .t-rank {
  position: relative;
  font-weight: 700;
  color: var(--brand-1);
}
.standings-table tr.is-qualified .t-rank::before {
  content: "";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
}

/* ===== EmptyState ===== */
.empty-state {
  text-align: center;
  padding: 44px 16px;
  color: var(--ink-3);
  font-size: .9rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.empty-state strong { color: var(--ink-2); font-size: 1rem; font-family: var(--font-display); }

/* ===== EventTimelineItem ===== */
.event-item {
  display: grid;
  grid-template-columns: 40px 28px 1fr;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--hairline);
}
.event-item:last-child { border-bottom: 0; }
.event-item__min {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  font-size: .82rem;
  text-align: right;
}
.event-item__icon { text-align: center; font-size: .9rem; }
.event-item--var .event-item__icon {
  font-size: .6rem; font-weight: 800; color: var(--brand-1);
}
.event-item__body { display: flex; flex-direction: column; min-width: 0; }
.event-item__player { font-weight: 600; color: var(--ink); font-size: .88rem; }
.event-item__sub { font-size: .74rem; color: var(--ink-3); }
.event-item--goal .event-item__player { color: var(--goal); }
.event-item--red .event-item__player { color: var(--card-red); }
/* Eventos derivados de stats (córner, remate, atajada, offside): más discretos
   que goles/tarjetas para que lo importante siga resaltando. */
.event-item--minor { padding: 5px 4px; }
.event-item--minor .event-item__min { font-weight: 500; font-size: .74rem; color: var(--ink-3); }
.event-item--minor .event-item__icon { font-size: .72rem; opacity: .85; }
.event-item--minor .event-item__player { font-weight: 500; color: var(--ink-2); font-size: .8rem; }
.event-item--minor .event-item__sub { font-size: .68rem; }

/* Escudo del equipo en cada evento del timeline */
.event-item__crest {
  width: 15px; height: 15px;
  object-fit: contain;
  vertical-align: -2px;
  margin-right: 5px;
  border-radius: 3px;
}
.event-item--minor .event-item__crest { width: 13px; height: 13px; opacity: .9; }
/* visitante (direction rtl en el li): el escudo queda del lado correcto solo */

/* Nombre de jugador como link a su perfil: discreto, subrayado al tocar */
.event-item__plink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
}
.event-item__plink:hover, .event-item__plink:focus-visible {
  color: var(--brand-1);
  border-bottom-color: var(--brand-1);
}

/* ===== Pitch / Lineup ===== */
.pitch-block { margin-bottom: 16px; }
.pitch-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pitch-block__team { font-weight: 700; color: var(--ink); }
.pitch-block__formation {
  font-size: .74rem; font-weight: 700; color: var(--brand-1);
  background: #EEF0FF; padding: 2px 8px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.pitch {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 14px;
  padding: 16px 8px;
  border-radius: var(--r-md);
  background:
    linear-gradient(rgba(22,163,74,.10), rgba(22,163,74,.10)),
    repeating-linear-gradient(0deg, #F2FBF4 0 28px, #EAF7EE 28px 56px);
  border: 1px solid var(--hairline);
}
.pitch__line { display: flex; justify-content: space-around; gap: 6px; }
.pitch__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.pitch__num {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-weight: 700; font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.pitch__name {
  font-size: .64rem; color: var(--ink-2); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px;
}

/* ===== PlayerRow ===== */
.player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.player-row:last-child { border-bottom: 0; }
@media (hover: hover) {
  .player-row:hover { background: var(--surface-soft); }
}
.player-row__photo {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-soft);
  flex: none;
  box-shadow: var(--shadow-sm);
}
.player-row__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.player-row__name {
  font-weight: 600; color: var(--ink); font-size: .9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-row__meta { font-size: .76rem; color: var(--ink-3); }
.player-row__stat {
  display: flex; flex-direction: column; align-items: center;
  flex: none; color: var(--ink-2);
}
.player-row__stat strong {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.player-row__stat small { font-size: .64rem; color: var(--ink-3); text-transform: uppercase; }

/* ===== SectionTitle ===== */
.section-title { /* base.css ya define; reforzado aquí para uso en vistas */
  font-family: var(--font-display);
  font-weight: 700;
}

/* ===== Probabilidad de campeón (chips live-aware) ===== */
.champ-trophy { width: 12px; height: 12px; flex: none; }

.champ-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-1);
  background: rgba(79, 70, 229, .08);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}
.champ-chip.is-live { color: var(--live); background: var(--live-soft); }

.champ-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}
.champ-strip__side {
  font-size: .78rem;
  font-weight: 700;
  color: var(--brand-1);
  min-width: 44px;
  text-align: center;
}
.champ-strip__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.champ-strip__live,
.champ-path__live {
  font-size: .62rem;
  font-weight: 800;
  color: #fff;
  background: var(--live);
  border-radius: var(--r-pill);
  padding: 2px 7px;
  letter-spacing: .05em;
}

.champ-path-holder { flex: 1 1 100%; min-width: 0; }
.team-profile__header { flex-wrap: wrap; }

.champ-path {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.champ-path__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.champ-path__title .champ-trophy { width: 14px; height: 14px; color: var(--brand-1); }
.champ-path__stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.champ-path__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--surface-soft);
  border-radius: var(--r-sm);
  padding: 8px 4px;
}
.champ-path__val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.champ-path__stage:last-child .champ-path__val { color: var(--brand-1); }
.champ-path__label { font-size: .66rem; font-weight: 600; color: var(--ink-3); }

/* Variante del strip en el Match Center: un punto más de presencia */
.champ-strip--mc { margin-top: 14px; padding-top: 12px; }
.champ-strip--mc .champ-strip__side { font-size: .92rem; min-width: 56px; }
.champ-strip--mc .champ-strip__label { font-size: .72rem; }

/* Chip XS (tablas de quiniela, hoja de campeón del bracket) */
.champ-chip--xs { font-size: .62rem; padding: 1px 6px; gap: 3px; }
.champ-chip--xs .champ-trophy { width: 9px; height: 9px; }

/* Chip junto al campeón proyectado de la quiniela */
.q-champion__chip { margin-left: auto; font-size: .82rem; padding: 5px 12px; }
.q-st__team .champ-chip--xs { margin-left: 6px; flex: none; }
.q-champion .q-champion__chip { background: rgba(255,255,255,.18); color: #fff; }
.q-champion .q-champion__chip.is-live { background: rgba(255,255,255,.25); }
.standings-table__team .champ-chip--xs { flex: none; margin-left: 2px; }

/* ===== Cargas: spinner de marca, loader y barra de progreso ===== */
/* Anillo giratorio en rojo de marca */
.gz-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--surface-sunk);
  border-top-color: var(--red, #E4002B);
  animation: gz-spin .8s linear infinite;
  flex: none;
}
.gz-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
.gz-spinner--lg { width: 40px; height: 40px; border-width: 4px; }
@keyframes gz-spin { to { transform: rotate(360deg); } }

/* Balón que rebota (loader lúdico) */
.gz-ball {
  width: 22px; height: 22px; flex: none;
  background:
    radial-gradient(circle at 50% 38%, #fff 0 22%, transparent 23%),
    var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
  animation: gz-bounce .7s var(--ease) infinite alternate;
}
@keyframes gz-bounce {
  from { transform: translateY(0) scale(1, 1); }
  to   { transform: translateY(-10px) scale(.96, 1.04); }
}

/* Estado de carga centrado (spinner + texto) */
.gz-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px 16px; color: var(--ink-3);
  font-size: .9rem; text-align: center;
}

/* Barra de progreso superior al navegar */
.route-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 90; background: var(--grad-hero, var(--red, #E4002B));
  box-shadow: 0 0 8px rgba(228,0,43,.5);
  opacity: 0; transition: width .2s var(--ease), opacity .3s var(--ease);
  pointer-events: none;
}
.route-progress.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gz-spinner, .gz-ball { animation: none; }
  .route-progress { transition: opacity .2s linear; }
}

/* ---------- celebración de gol (overlay efímero, R5) ---------- */
.gz-goal {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center; align-content: center; gap: 6px;
  pointer-events: none;
  animation: gz-goal-in .25s var(--ease), gz-goal-out .45s var(--ease) 2.2s forwards;
}
.gz-goal::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 55% at 50% 46%, rgba(255,255,255,.96) 35%, rgba(255,255,255,.75) 60%, rgba(255,255,255,0) 100%);
}
.gz-goal__art { position: relative; width: min(72vw, 300px); }
.gz-goal__art svg { width: 100%; height: auto; display: block; }
.gz-goal__ball {
  animation: gz-ball-fly .55s cubic-bezier(.3,.9,.4,1) both;
  transform-origin: 198px 58px;
}
@keyframes gz-ball-fly {
  from { transform: translate(-150px, 95px) rotate(-220deg); }
  to   { transform: translate(0, 0) rotate(0deg); }
}
.gz-goal__net {
  animation: gz-net-shake .5s var(--ease) .5s both;
  transform-origin: 198px 58px;
}
@keyframes gz-net-shake {
  0% { transform: translate(0,0); }
  30% { transform: translate(4px,-3px); }
  60% { transform: translate(-3px,2px); }
  100% { transform: translate(0,0); }
}
.gz-goal__burst {
  opacity: 0; transform-origin: 198px 58px;
  animation: gz-burst .5s var(--ease) .5s both;
}
@keyframes gz-burst {
  0% { opacity: 0; transform: scale(.4); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}
.gz-goal__label {
  font-family: var(--font-display);
  font-weight: 800; font-size: clamp(40px, 11vw, 64px); line-height: 1;
  letter-spacing: -.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gz-label-pop .4s cubic-bezier(.2,1.4,.4,1) .45s both;
}
@keyframes gz-label-pop {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
.gz-goal__who {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--ink-2); font-size: 15px;
  font-variant-numeric: tabular-nums;
  animation: gz-label-pop .4s cubic-bezier(.2,1.4,.4,1) .6s both;
}
.gz-goal__crest {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: contain; background: #fff; box-shadow: var(--shadow-sm);
}
/* Autor del gol: protagonista entre el lettering y la línea de marcador */
.gz-goal__scorer {
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(17px, 4.6vw, 24px);
  color: var(--ink);
  animation: gz-label-pop .4s cubic-bezier(.2,1.4,.4,1) .55s both;
}
.gz-goal__confetti {
  position: absolute; top: 18%; left: 50%;
  width: 7px; height: 11px; border-radius: 2px; opacity: 0;
  animation: gz-confetti 1.5s var(--ease) .55s both;
}
.gz-goal__confetti:nth-child(3n+1) { background: var(--red, #E4002B); }
.gz-goal__confetti:nth-child(3n+2) { background: var(--blue, #1D3D8F); }
.gz-goal__confetti:nth-child(3n)   { background: var(--green, #0E7C3A); }
.gz-goal__confetti:nth-child(2)  { --dx: -110px; animation-delay: .58s; }
.gz-goal__confetti:nth-child(3)  { --dx: -78px;  animation-delay: .66s; }
.gz-goal__confetti:nth-child(4)  { --dx: -48px;  animation-delay: .55s; }
.gz-goal__confetti:nth-child(5)  { --dx: -20px;  animation-delay: .72s; }
.gz-goal__confetti:nth-child(6)  { --dx: 8px;    animation-delay: .6s; }
.gz-goal__confetti:nth-child(7)  { --dx: 34px;   animation-delay: .68s; }
.gz-goal__confetti:nth-child(8)  { --dx: 64px;   animation-delay: .56s; }
.gz-goal__confetti:nth-child(9)  { --dx: 92px;   animation-delay: .74s; }
.gz-goal__confetti:nth-child(10) { --dx: 118px;  animation-delay: .62s; }
.gz-goal__confetti:nth-child(11) { --dx: -94px;  animation-delay: .78s; }
.gz-goal__confetti:nth-child(12) { --dx: 50px;   animation-delay: .8s; }
.gz-goal__confetti:nth-child(13) { --dx: -34px;  animation-delay: .82s; }
@keyframes gz-confetti {
  0%   { opacity: 0; transform: translate(var(--dx, 0px), -10px) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx, 0px) * 1.3), 150px) rotate(280deg); }
}
@keyframes gz-goal-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes gz-goal-out { to { opacity: 0; } }

.gz-goal-toast {
  position: fixed; left: 50%; bottom: calc(var(--bottomnav-h, 60px) + 18px);
  transform: translateX(-50%); max-width: 88%; z-index: 70;
  background: var(--ink); color: #fff;
  font: 600 14px/1.45 var(--font-ui); padding: 12px 16px;
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .gz-goal { display: none; }
}

/* ---------- contadores regresivos ---------- */
.countdown-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 12px 0 4px;
}
.countdown-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  padding: 12px 14px; text-align: center;
}
.countdown-card__label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
/* Reloj tipo marcador de estadio: panel oscuro, una celda por dígito que
   "voltea" al cambiar (split-flap) y dos puntos que parpadean al segundo. */
.countdown-card__time {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(19px, 5.4vw, 28px); line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--ink); color: #fff;
  border-radius: 12px; padding: 9px 10px; margin-top: 6px;
  display: flex; justify-content: center; align-items: center; gap: 3px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
  perspective: 220px; overflow: hidden;
}
.cd-digit {
  display: inline-grid; place-items: center;
  min-width: 1.25ch; padding: 4px 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.13) 0 49%, rgba(255,255,255,.05) 51% 100%);
  border-radius: 6px;
  backface-visibility: hidden;
}
.cd-digit.is-flip { animation: cd-flip .45s var(--ease); }
@keyframes cd-flip {
  0% { transform: rotateX(-88deg); opacity: .15; }
  60% { transform: rotateX(14deg); opacity: 1; }
  100% { transform: rotateX(0deg); }
}
.cd-colon {
  color: var(--red, #E4002B);
  animation: cd-blink 1s steps(1) infinite;
  padding: 0 1px;
}
@keyframes cd-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
.cd-sep { color: var(--ink-3); font-size: .6em; align-self: flex-end; padding-bottom: 5px; }
.countdown-card.is-live .countdown-card__time {
  background: var(--grad-brand); color: #fff;
  animation: countdown-live-pulse 1.4s ease-in-out infinite;
}
@keyframes countdown-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .62; }
}
.countdown-card__sub { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .countdown-card.is-live .countdown-card__time,
  .cd-digit.is-flip,
  .cd-colon { animation: none; }
}
@media (max-width: 420px) {
  .countdown-duo { grid-template-columns: 1fr; }
}

/* ===== Mercados de gol del motor (goal-pulse.js) ===== */
.goal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.goal-chips__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.goal-chips__chip b { color: var(--brand-1); font-weight: 800; font-variant-numeric: tabular-nums; }
.goal-chips__chip .gz-ico { width: 14px; height: 14px; color: var(--ink-3); }
.mp-goalchips { justify-content: center; padding: 0 12px 12px; margin-top: 0; }

/* Pulso de gol en cards EN VIVO: "gol próx. 10' 38%". */
.pulse-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
}
.pulse-chip b { font-variant-numeric: tabular-nums; color: var(--ink); }
.pulse-chip .gz-ico { width: 13px; height: 13px; }
.pulse-chip--hot {
  background: var(--live-soft);
  border-color: transparent;
  color: var(--live);
  animation: pulse-chip-beat 1.4s ease-in-out infinite;
}
.pulse-chip--hot b { color: var(--live); }
@keyframes pulse-chip-beat {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-chip--hot { animation: none; }
}