/* ==========================================================================
   PRIME CHAMPIONS · DESAFÍO DIARIO
   --------------------------------------------------------------------------
   El modo tiene tres pantallas: el draft del día, el resultado y la tabla del
   mes. Comparten el lenguaje del resto de los modos (prime-modos.css) y se
   distinguen por el acento: aquí es el oro, porque es una jornada única y no
   una partida más.
   ========================================================================== */

/* ==========================================================================
   1 · CABECERA
   ========================================================================== */

.desafioHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 32px);
    flex-wrap: wrap;
    padding: clamp(20px, 3.4vw, 34px);
    margin-bottom: clamp(18px, 3vw, 26px);
    border-radius: var(--pc-radio-lg, 22px);
    background:
        radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--pc-oro) 20%, transparent), transparent 60%),
        linear-gradient(160deg, var(--pc-superficie-2), var(--pc-fondo-elevado));
    border: 1px solid color-mix(in srgb, var(--pc-oro) 28%, transparent);
    box-shadow: var(--pc-sombra-3);
}

.desafioHeroTexto { flex: 1 1 280px; min-width: 0; }

.desafioEtiqueta {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pc-oro) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc-oro) 34%, transparent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--pc-oro);
}

.desafioHero h1 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 4.2vw, 2.2rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--pc-texto);
}

.desafioHero p {
    margin: 0;
    max-width: 54ch;
    font-size: 0.94rem;
    color: var(--pc-texto-suave);
}

/* El rival del día es la cara de la jornada, así que tiene su propia caja. */
.desafioRival {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 22px;
    border-radius: var(--pc-radio, 16px);
    background: rgba(10, 8, 19, 0.4);
    border: 1px solid var(--pc-borde);
    text-align: center;
}

html.modo-claro .desafioRival { background: rgba(72, 46, 119, 0.05); }

.desafioRival > span {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}

.desafioRival img { width: 58px; height: 58px; object-fit: contain; }
.desafioRival b { font-size: 0.95rem; color: var(--pc-texto); }
.desafioRival small { font-size: 0.72rem; color: var(--pc-oro); font-weight: 700; }

/* ==========================================================================
   2 · DRAFT
   ========================================================================== */

.desafioCuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: clamp(14px, 2.4vw, 22px);
    align-items: start;
}

@media (max-width: 900px) {
    .desafioCuerpo { grid-template-columns: 1fr; }
}

.desafioProgreso {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.desafioProgreso b { font-size: 0.95rem; color: var(--pc-texto); }
.desafioProgreso > span { font-size: 0.88rem; color: var(--pc-texto-suave); }
.desafioProgreso strong { color: var(--pc-oro); }

.desafioBarra {
    flex: 1 1 120px;
    height: 6px;
    border-radius: 999px;
    background: var(--pc-superficie-3);
    overflow: hidden;
}

.desafioBarra i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pc-500), var(--pc-oro));
    transition: width var(--pc-lento) var(--pc-salida);
}

.desafioEquipos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: clamp(10px, 1.8vw, 16px);
}

.desafioEquipo {
    display: flex;
    flex-direction: column;
    padding: 14px;
    border-radius: var(--pc-radio, 16px);
    background: var(--pc-panel);
    border: 1px solid var(--pc-borde);
    transition: border-color var(--pc-normal), box-shadow var(--pc-normal);
}

.desafioEquipo:hover {
    border-color: color-mix(in srgb, var(--pc-oro) 40%, transparent);
    box-shadow: var(--pc-sombra-2);
}

.desafioEquipo > header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--pc-borde-suave);
}

.desafioEquipo > header img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }

.desafioEquipo > header b {
    font-size: 0.82rem;
    line-height: 1.2;
    color: var(--pc-texto);
    min-width: 0;
}

.desafioEquipo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }

.desafioJugador {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(10, 8, 19, 0.35);
    border: 1px solid transparent;
    color: var(--pc-texto);
    text-align: left;
    cursor: pointer;
    transition: background var(--pc-normal), border-color var(--pc-normal), transform var(--pc-rapido) var(--pc-salida);
}

html.modo-claro .desafioJugador { background: rgba(72, 46, 119, 0.05); }

.desafioJugador:hover {
    background: color-mix(in srgb, var(--pc-oro) 12%, transparent);
    border-color: color-mix(in srgb, var(--pc-oro) 42%, transparent);
    transform: translateX(2px);
}

.desafioJugadorMedia {
    font-family: var(--pc-fuente-datos, "Barlow Condensed", sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pc-oro);
    min-width: 26px;
}

.desafioJugadorNombre {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desafioJugadorPos {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--pc-texto-tenue);
}

/* Un jugador ofrecido fuera de su puesto: se avisa, pero se deja elegir para
   que nunca haya una ronda sin salida. */
.desafioJugador--fuera { opacity: 0.72; }
.desafioJugador--fuera .desafioJugadorPos { color: var(--pc-aviso); }

/* ==========================================================================
   3 · EL ONCE
   ========================================================================== */

.desafioPanelOnce {
    padding: 16px;
    border-radius: var(--pc-radio, 16px);
    background: var(--pc-superficie-2);
    border: 1px solid var(--pc-borde);
    position: sticky;
    top: 16px;
}

@media (max-width: 900px) {
    .desafioPanelOnce { position: static; }
}

.desafioPanelOnce h2 {
    margin: 0 0 12px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}

.desafioOnce { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.desafioOnce > li {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 0.78rem;
}

.desafioHueco {
    background: rgba(10, 8, 19, 0.25);
    border: 1px dashed var(--pc-borde);
    color: var(--pc-texto-tenue);
}

html.modo-claro .desafioHueco { background: rgba(72, 46, 119, 0.04); }

.desafioElegido {
    background: color-mix(in srgb, var(--pc-exito) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc-exito) 26%, transparent);
    animation: desafioFicha 320ms var(--pc-salida);
}

@keyframes desafioFicha {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

.desafioElegidoPos {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--pc-texto-tenue);
}

.desafioElegido b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pc-texto);
}

.desafioElegidoMedia {
    font-family: var(--pc-fuente-datos, "Barlow Condensed", sans-serif);
    font-weight: 800;
    color: var(--pc-oro);
}

/* ==========================================================================
   4 · ESPERA
   ========================================================================== */

.desafioEsperando {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: clamp(40px, 8vw, 80px) 20px;
    text-align: center;
    color: var(--pc-texto-suave);
}

.desafioPelota {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--pc-borde);
    border-top-color: var(--pc-oro);
    animation: desafioGirar 700ms linear infinite;
}

@keyframes desafioGirar { to { transform: rotate(360deg); } }

/* ==========================================================================
   5 · RESULTADO
   ========================================================================== */

.desafioResultado {
    padding: clamp(22px, 4vw, 38px);
    border-radius: var(--pc-radio-lg, 22px);
    background: var(--pc-panel);
    border: 1px solid var(--pc-borde);
    box-shadow: var(--pc-sombra-3);
    text-align: center;
    animation: desafioEntra 460ms var(--pc-salida);
}

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

.desafioResultado.es-victoria { border-color: color-mix(in srgb, var(--pc-exito) 45%, transparent); }
.desafioResultado.es-empate   { border-color: color-mix(in srgb, var(--pc-aviso) 45%, transparent); }
.desafioResultado.es-derrota  { border-color: color-mix(in srgb, var(--pc-peligro) 40%, transparent); }

.desafioResultadoRotulo {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}

.es-victoria .desafioResultadoRotulo { color: var(--pc-exito); }
.es-empate   .desafioResultadoRotulo { color: var(--pc-aviso); }
.es-derrota  .desafioResultadoRotulo { color: var(--pc-peligro); }

.desafioMarcador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3vw, 26px);
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.desafioMarcador > span {
    font-size: 0.86rem;
    color: var(--pc-texto-suave);
    max-width: 22ch;
}

.desafioMarcador b {
    font-family: var(--pc-fuente-datos, "Barlow Condensed", sans-serif);
    font-size: clamp(2.4rem, 8vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    color: var(--pc-texto);
    font-variant-numeric: tabular-nums;
}

.desafioPuntos {
    list-style: none;
    width: min(420px, 100%);
    margin: 0 auto 20px;
    padding: 0;
    display: grid;
    gap: 6px;
}

.desafioPuntos > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 14px;
    border-radius: 9px;
    background: rgba(10, 8, 19, 0.3);
    font-size: 0.86rem;
    color: var(--pc-texto-suave);
}

html.modo-claro .desafioPuntos > li { background: rgba(72, 46, 119, 0.05); }

.desafioPuntos b { color: var(--pc-texto); font-variant-numeric: tabular-nums; }

.desafioPuntosTotal {
    margin-top: 4px;
    background: color-mix(in srgb, var(--pc-oro) 14%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--pc-oro) 34%, transparent);
}

.desafioPuntosTotal span { color: var(--pc-texto); font-weight: 700; }

.desafioPuntosTotal b {
    font-family: var(--pc-fuente-datos, "Barlow Condensed", sans-serif);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--pc-oro);
}

.desafioTotalDelDia { color: var(--pc-texto-suave); margin: 0 0 20px; }
.desafioTotalDelDia b { color: var(--pc-oro); font-size: 1.2rem; }

.desafioSinRanking {
    width: min(460px, 100%);
    margin: 0 auto 18px;
    padding: 11px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pc-aviso) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc-aviso) 30%, transparent);
    font-size: 0.83rem;
    color: var(--pc-texto-suave);
}

.desafioAcciones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.desafioAcciones > button {
    min-height: 48px;
    padding: 13px 24px !important;
    border-radius: var(--pc-radio-sm, 10px) !important;
    font-size: 0.92rem !important;
}

/* El centrado va forzado: hay reglas de `text-align: left` en la cascada de
   prime-pantallas.css que alcanzan a los párrafos de las pantallas sociales, y
   este renglón acababa pegado al margen izquierdo de una tarjeta centrada. */
.desafioProximo {
    margin: 18px 0 0;
    font-size: 0.78rem;
    color: var(--pc-texto-tenue);
    text-align: center !important;
}

.desafioResultado p,
.desafioAviso p { text-align: center; }

.desafioAviso {
    padding: clamp(24px, 4vw, 40px);
    border-radius: var(--pc-radio-lg, 22px);
    background: var(--pc-panel);
    border: 1px solid var(--pc-borde);
    text-align: center;
    color: var(--pc-texto-suave);
}

.desafioAviso p { margin: 0 0 16px; }

/* ==========================================================================
   6 · TABLA DEL MES
   ========================================================================== */

.desafioTabla {
    padding: clamp(20px, 3.4vw, 32px);
    border-radius: var(--pc-radio-lg, 22px);
    background: var(--pc-panel);
    border: 1px solid var(--pc-borde);
}

.desafioTablaCab { text-align: center; margin-bottom: 20px; }

.desafioTablaCab h2 {
    margin: 0 0 4px;
    font-size: clamp(1.2rem, 3.4vw, 1.6rem);
    color: var(--pc-texto);
}

.desafioTablaCab p { margin: 0; font-size: 0.85rem; color: var(--pc-texto-suave); }

/* La tabla scrollea dentro de su caja: en un teléfono, cinco columnas no
   entran y el desborde tiene que quedarse aquí, no en la página. */
.desafioTablaScroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.desafioTablaLista {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.desafioTablaLista th {
    padding: 9px 12px;
    text-align: left;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
    border-bottom: 1px solid var(--pc-borde);
}

.desafioTablaLista td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--pc-borde-suave);
    color: var(--pc-texto-suave);
    vertical-align: middle;
}

.desafioTablaLista td b { display: block; color: var(--pc-texto); }
.desafioTablaLista td small { display: block; font-size: 0.72rem; color: var(--pc-texto-tenue); }

.desafioTablaPuntos {
    font-family: var(--pc-fuente-datos, "Barlow Condensed", sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--pc-oro) !important;
    font-variant-numeric: tabular-nums;
}

.desafioTablaYo {
    background: color-mix(in srgb, var(--pc-primario) 12%, transparent);
}

.desafioTablaYo td { color: var(--pc-texto); }

.desafioTablaVacia {
    padding: 30px 20px;
    text-align: center;
    color: var(--pc-texto-suave);
}

/* ==========================================================================
   7 · MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .desafioElegido,
    .desafioResultado { animation: none; }
    .desafioPelota { animation-duration: 2s; }
    .desafioJugador:hover { transform: none; }
    .desafioBarra i { transition: none; }
}