/* ==========================================================================
   El desafío del día — la tarjeta del final (en el partido) y la página
   `/desafio`. Las dos dicen lo mismo con las mismas piezas: el marcador con
   los dos escudos, la racha y los botones.

   LA TARJETA ENTRA ENTERA (ver «los modales sin scroll»): el alto lo pone el
   contenido, con un tope de la ventana menos los márgenes, y los botones van
   al pie sin quedar nunca afuera.
   ========================================================================== */

.desafio-velo {
  position: fixed; inset: 0; z-index: 2147482000;
  display: grid; place-items: center; padding: var(--sp-5);
  background: var(--velo, rgba(6, 5, 12, 0.72));
}

.desafio-tarjeta {
  box-sizing: border-box;
  width: min(100%, 30rem); max-height: calc(100dvh - 2 * var(--sp-5));
  overflow: auto;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: var(--bg-raised); color: var(--text-primary);
  border: 1px solid var(--line-strong); border-radius: var(--r-tarjeta, var(--r-lg));
  box-shadow: var(--sombra-modal);
  text-align: center; font-family: var(--font-ui);
}
.desafio-tarjeta.is-ok { border-top: 4px solid var(--good); }
.desafio-tarjeta.is-no { border-top: 4px solid var(--danger); }

.desafio-tarjeta__sobre {
  margin: 0; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-texto, var(--accent));
}
.desafio-tarjeta__titulo { margin: 0; font-size: var(--fs-2xl); font-weight: 800; line-height: var(--lh-tight); }
.desafio-tarjeta__antes,
.desafio-tarjeta__manana,
.desafio-tarjeta__nota { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-snug); }
.desafio-tarjeta__nota { color: var(--text-muted); }
.desafio-tarjeta__copiado { margin: 0; min-height: 1em; font-size: var(--fs-xs); color: var(--text-muted); word-break: break-word; }

.desafio-marcador {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--sp-4);
}
.desafio-marcador__club {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); line-height: var(--lh-snug); min-width: 0;
}
.desafio-marcador__club b { font-weight: 700; overflow-wrap: anywhere; }
.desafio-marcador__escudo { width: 56px; height: 56px; object-fit: contain; }
.desafio-marcador__goles {
  font-size: var(--fs-3xl); font-weight: 800; font-variant-numeric: tabular-nums;
  display: flex; gap: var(--sp-2); align-items: baseline;
}
.desafio-marcador__goles i { font-style: normal; color: var(--text-muted); }

.desafio-cifras {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: 0;
}
.desafio-cifras div {
  padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-panel);
}
.desafio-cifras dt { font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.desafio-cifras dd { margin: var(--sp-1) 0 0; font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }

.desafio-botones { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.desafio-boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 var(--sp-6); border-radius: var(--r-boton, var(--r-md));
  border: 1px solid var(--line-control-strong, var(--line-strong)); background: transparent;
  color: var(--text-primary); font: inherit; font-size: var(--fs-sm); font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.desafio-boton:hover { background: var(--bg-hover); }
.desafio-boton:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.desafio-boton.is-principal {
  flex-basis: 100%; border-color: transparent;
  background: var(--accent); color: var(--text-on-accent, var(--text-primary));
}
.desafio-boton.is-principal:hover { background: var(--accent-strong, var(--accent)); }

@media (max-width: 420px) {
  .desafio-tarjeta { padding: var(--sp-6) var(--sp-4) var(--sp-5); gap: var(--sp-3); }
  .desafio-marcador__escudo { width: 44px; height: 44px; }
  .desafio-boton { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   LA PÁGINA `/desafio`
   -------------------------------------------------------------------------- */
.desafio-pagina {
  box-sizing: border-box; margin: 0; min-height: 100dvh;
  display: grid; place-items: center; padding: var(--sp-6) var(--sp-4);
  background: var(--bg-page); color: var(--text-primary); font-family: var(--font-ui);
}
.desafio-pagina .desafio-tarjeta { box-shadow: none; max-height: none; overflow: visible; }
.desafio-tarjeta__consigna { margin: 0; font-size: var(--fs-md); line-height: var(--lh-body); }
.desafio-reloj { font-variant-numeric: tabular-nums; }
.desafio-pie { margin: var(--sp-5) 0 0; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }
.desafio-pie a { color: inherit; }

/* --------------------------------------------------------------------------
   EL PARTIDO EN MODO DESAFÍO: sin el menú de la carrera. La fila de abajo
   —Portal, Plantilla, Fichajes… y la fecha— es de una carrera que en el
   desafío no existe: la del cajón aparte es de mentira, y su fecha también.
   Los enlaces llevarían a TU carrera (o a la portada si no tenés), que es
   salir del desafío por una puerta que no dice que lo es.
   -------------------------------------------------------------------------- */
html[data-desafio] .chrome__row--secondary,
html[data-desafio] .breadcrumb { display: none; }

/* --------------------------------------------------------------------------
   LA PÍLDORA DE LA PUERTA (`pildoraDelDesafio()` en `home.js`): el escudo del
   club de hoy, el número y la situación —o cómo te fue y la racha—. Del ancho
   de su texto y no de la columna: es una invitación, no una tercera puerta.
   -------------------------------------------------------------------------- */
.tapa__desafio {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  max-width: 100%; box-sizing: border-box;
  margin: var(--sp-6) 0 0; padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  border: 1px solid var(--accent-line, var(--line-strong)); border-radius: var(--r-pill);
  background: var(--accent-wash, transparent); color: var(--text-primary);
  text-decoration: none; text-align: left;
}
.tapa__desafio:hover { background: var(--accent-wash-hi, var(--bg-hover)); }
.tapa__desafio:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tapa__desafio.is-jugado { border-color: var(--line-strong); background: transparent; }
.tapa__desafio-escudo { width: 32px; height: 32px; object-fit: contain; flex: none; }
.tapa__desafio-txt { display: flex; flex-direction: column; min-width: 0; }
.tapa__desafio-sobre {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-texto, var(--accent));
}
.tapa__desafio-que { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-snug); }
.tapa__desafio .i { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
/* La tarjeta y el pie centrados uno sobre otro: sin esto `main` toma el ancho
   del pie y la tarjeta queda corrida a la izquierda. */
.desafio-pagina main { display: flex; flex-direction: column; align-items: center; width: 100%; }