/* ==========================================================================
   PRIME CHAMPIONS · REDISEÑO POR PANTALLA
   --------------------------------------------------------------------------
   Última capa del sistema (tokens → componentes → pantallas). Aquí vive lo
   que es propio de cada vista: cabeceras, marcadores, campo de juego,
   tableros y estados vacíos.
   ========================================================================== */

/* ==========================================================================
   PATRÓN COMÚN DE PANTALLA
   `.pantalla` es flex-column centrado, así que un botón suelto quedaba
   centrado arriba. Se le da una barra propia alineada a la izquierda.
   ========================================================================== */
.pantalla {
    padding: clamp(16px, 3vw, 42px) clamp(12px, 4vw, 64px) clamp(32px, 5vw, 64px);
}

.btnVolverPantalla {
    align-self: flex-start;
    position: sticky;
    top: 10px;
    margin: 0 0 var(--pc-e4);
}

/* Título de pantalla con jerarquía consistente. */
#champions > h1,
#formaciones > h2,
.draftTitulo h2 {
    margin-bottom: var(--pc-e2);
}

#formaciones > p {
    color: var(--pc-texto-suave);
    text-align: center;
    margin-bottom: var(--pc-e5);
}

#champions > h1 {
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   FORMACIONES
   ========================================================================== */
.formacion {
    min-height: 118px;
    padding: var(--pc-e4);
    border-radius: var(--pc-radio);
    border: 1px solid var(--pc-borde);
    background: linear-gradient(160deg, var(--pc-superficie) 0%, var(--pc-fondo-elevado) 100%);
    color: var(--pc-texto);
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    gap: var(--pc-e1);
    flex-direction: column;
    transition: transform var(--pc-normal) var(--pc-salida), border-color var(--pc-normal), box-shadow var(--pc-normal);
}

.formacion span {
    font-family: var(--pc-fuente-display);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.formacion small { color: var(--pc-texto-tenue); }

.formacion:hover {
    transform: translateY(-4px);
    border-color: var(--pc-primario);
    box-shadow: 0 14px 34px var(--pc-glow-suave);
}

.opcionesVariantes {
    display: grid;
    gap: var(--pc-e3);
}

.variante {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--pc-e4);
    text-align: left;
    border-radius: var(--pc-radio);
    border: 1px solid var(--pc-borde);
    background: color-mix(in srgb, var(--pc-primario) 7%, transparent);
    color: var(--pc-texto);
}

.variante b { font-size: var(--pc-t-lg); font-family: var(--pc-fuente-display); }
.variante small { color: var(--pc-texto-suave); font-weight: 500; text-transform: none; letter-spacing: 0; }

.variante:hover {
    border-color: var(--pc-primario);
    background: color-mix(in srgb, var(--pc-primario) 16%, transparent);
}

/* ==========================================================================
   DRAFT
   ========================================================================== */
.draftTitulo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--pc-e4);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto var(--pc-e5);
}

.draftLayout {
    display: grid;
    grid-template-columns: minmax(320px, 30%) minmax(0, 1fr);
    gap: clamp(14px, 2vw, 28px);
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    align-items: start;
}

.panelJugadores,
.panelCancha {
    background: linear-gradient(160deg, var(--pc-superficie) 0%, var(--pc-fondo-elevado) 100%);
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio-lg);
    padding: var(--pc-e4);
    box-shadow: var(--pc-sombra-2);
    min-width: 0;
}

.panelTitulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pc-e2);
    padding-bottom: var(--pc-e3);
    margin-bottom: var(--pc-e4);
    border-bottom: 1px solid var(--pc-borde-suave);
}

.panelTitulo > span:first-child {
    font-family: var(--pc-fuente-display);
    font-size: var(--pc-t-lg);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.panelTitulo small { color: var(--pc-texto-tenue); }

#jugadores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: var(--pc-e3);
}

/* Campo con marcas reales en lugar de un rectángulo liso. */
#campo {
    position: relative;
    display: flex;
    flex-direction: column;   /* ataque arriba, portería abajo */
    justify-content: space-around;
    gap: var(--pc-e2);
    min-height: clamp(380px, 58vh, 620px);
    padding: clamp(14px, 2vw, 26px);
    overflow: hidden;
}

#campo::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px solid color-mix(in srgb, var(--pc-primario-alt) 26%, transparent);
    border-radius: 10px;
    pointer-events: none;
}

#campo::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(180px, 34%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 2px solid color-mix(in srgb, var(--pc-primario-alt) 22%, transparent);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--pc-primario-alt) 22%, transparent);
}

#campo .fila {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: clamp(8px, 1.4vw, 18px);
    flex-wrap: wrap;
}

.posicion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: clamp(74px, 9vw, 108px);
    min-height: clamp(66px, 8vh, 92px);
    padding: var(--pc-e2);
    cursor: pointer;
    text-align: center;
}

.posicion .pos {
    font-family: var(--pc-fuente-datos);
    font-size: var(--pc-t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--pc-texto-tenue);
}

.posicion .jugadorNombre {
    font-size: var(--pc-t-2xs);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
    color: var(--pc-texto);
}

.posicion .jugadorMedia {
    font-family: var(--pc-fuente-datos);
    font-size: var(--pc-t-xs);
    color: var(--pc-oro);
    font-weight: 700;
}

.posicion .jugadorPos {
    font-size: 0.62rem;
    color: var(--pc-texto-tenue);
    letter-spacing: 0.06em;
}

/* Ruleta del bombo */
.ruletaDraftBox {
    display: grid;
    justify-items: center;
    gap: var(--pc-e3);
    padding: var(--pc-e5) var(--pc-e4);
}

.ruletaDraftBadge {
    font-size: var(--pc-t-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 999px;
    color: #1a1005;
    background: linear-gradient(135deg, var(--pc-oro), #d09312);
}

html.modo-claro .ruletaDraftBadge { color: #fff; background: linear-gradient(135deg, #7a5400, #5c3f00); }

.ruletaTextoEstado { color: var(--pc-texto-suave); font-size: var(--pc-t-sm); text-align: center; }

/* ==========================================================================
   CHAMPIONS · MARCADORES
   ========================================================================== */
.resultados {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: var(--pc-e3);
    margin: var(--pc-e4) 0;
}

/* El selector `.resultados div` pintaba TODOS los descendientes: se acota. */
.resultados > div { background: none; padding: 0; }

.partidoCard {
    display: grid;
    grid-template-columns: 1fr;   /* anula la rejilla de 3 columnas anterior */
    gap: 6px;
    padding: var(--pc-e3) var(--pc-e4);
    min-width: 0;
}

.filaMarcador {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--pc-e2);
    min-width: 0;
    color: var(--pc-texto-suave);
}

.filaMarcador.esGanador { color: var(--pc-texto); }

.filaMarcador .logoMini {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.nombreMarcador {
    min-width: 0;
    font-size: var(--pc-t-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filaMarcador.esGanador .nombreMarcador { font-weight: 800; }

.golesMarcador {
    font-family: var(--pc-fuente-datos);
    font-size: var(--pc-t-lg);
    font-weight: 700;
    color: var(--pc-texto);
    min-width: 1.2em;
    text-align: right;
}

.filaMarcador.esGanador .golesMarcador { color: var(--pc-oro); }

.pinPenaltis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--pc-primario-alt);
    border: 1px solid color-mix(in srgb, var(--pc-primario-alt) 45%, transparent);
    background: color-mix(in srgb, var(--pc-primario) 16%, transparent);
}

.avisoPenaltis {
    font-size: var(--pc-t-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pc-primario-alt);
}

.btnVerStatsPartidoMini {
    width: 100%;
    min-height: 40px;
    margin-top: var(--pc-e2);
    padding: 6px 10px;
    font-size: var(--pc-t-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 9px;
    background: color-mix(in srgb, var(--pc-primario) 12%, transparent);
    border: 1px solid var(--pc-borde);
    color: var(--pc-primario-alt);
}

.btnVerStatsPartidoMini:hover {
    background: color-mix(in srgb, var(--pc-primario) 24%, transparent);
    border-color: var(--pc-primario);
    color: var(--pc-texto);
}

html.modo-claro .btnVerStatsPartidoMini { color: var(--pc-primario); }

/* Marcador grande del modal de resultados */
.partidoGrande {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--pc-e4);
}

.equipoGrande {
    display: flex;
    align-items: center;
    gap: var(--pc-e3);
    min-width: 0;
}

.equipoGrande:last-of-type { flex-direction: row-reverse; text-align: right; }

.equipoGrande img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }

.equipoGrande span {
    min-width: 0;
    font-weight: 700;
    font-size: var(--pc-t-md);
    overflow-wrap: anywhere;
}

.marcadorGrande {
    display: flex;
    align-items: center;
    gap: var(--pc-e2);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--pc-oro);
}

.marcadorGrande b { color: var(--pc-texto-tenue); font-weight: 400; }

.resumenGoleadoresMini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pc-e3);
    margin-top: var(--pc-e3);
    padding-top: var(--pc-e3);
    border-top: 1px solid var(--pc-borde-suave);
    font-size: var(--pc-t-xs);
    color: var(--pc-texto-suave);
}

.colGolesL { text-align: left; }
.colGolesV { text-align: right; }
.colGolesL span, .colGolesV span { display: block; }

/* Cruces de eliminatorias */
.cruces { gap: var(--pc-e3); }

.cruces .carta {
    padding: var(--pc-e4);
    text-align: center;
    font-size: var(--pc-t-sm);
    font-weight: 600;
    line-height: 1.35;
}

.cruces .carta img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 4px; }
.cruces .carta b { color: var(--pc-texto-tenue); font-size: var(--pc-t-xs); letter-spacing: 0.14em; }

/* Leyenda de la tabla */
.leyendaTabla {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pc-e4);
    margin-bottom: var(--pc-e4);
    padding: var(--pc-e3) var(--pc-e4);
    border-radius: var(--pc-radio);
    border: 1px solid var(--pc-borde);
    background: color-mix(in srgb, var(--pc-superficie) 70%, transparent);
    font-size: var(--pc-t-xs);
    color: var(--pc-texto-suave);
}

.leyendaTabla > div { display: inline-flex; align-items: center; gap: 7px; }
.leyendaTabla span { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.leyendaTabla .verde { background: var(--pc-exito); }
.leyendaTabla .amarillo { background: var(--pc-oro); }
.leyendaTabla .rojo { background: var(--pc-peligro); }

/* Pantalla de campeón */
#champions #listaEquipos h1 {
    font-size: var(--pc-t-4xl);
    text-align: center;
    margin: var(--pc-e2) 0 var(--pc-e4);
    background: linear-gradient(92deg, var(--pc-100), var(--pc-oro), var(--pc-200));
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: pcGradText 8s linear infinite;
}

html.modo-claro #champions #listaEquipos h1 {
    background: linear-gradient(92deg, var(--pc-500), var(--pc-700), var(--pc-400));
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

.cardXINombre, .cardXIEquipo { font-size: var(--pc-t-2xs); }

/* ==========================================================================
   SUPERVIVENCIA
   ========================================================================== */
.contenidoSupervivencia,
#contenidoSupervivencia {
    width: min(100%, 1100px);
    margin-inline: auto;
}

.heroSupervivencia,
.survivalHero {
    position: relative;
    overflow: hidden;
    border-radius: var(--pc-radio-lg);
    padding: clamp(24px, 4vw, 46px) clamp(18px, 3vw, 40px);
    text-align: center;
    background:
        radial-gradient(120% 130% at 50% -20%, color-mix(in srgb, var(--pc-peligro) 34%, transparent), transparent 62%),
        linear-gradient(160deg, var(--pc-superficie-2), var(--pc-fondo-elevado));
    border: 1px solid color-mix(in srgb, var(--pc-peligro) 30%, transparent);
    box-shadow: var(--pc-sombra-3);
}

.heroSupervivencia h1,
.survivalHero h1 {
    color: var(--pc-texto);
    text-shadow: 0 4px 26px rgba(0, 0, 0, 0.45);
}

.heroSupervivencia p,
.survivalHero p {
    margin-inline: auto;
    color: var(--pc-texto-suave);
}

/* Las métricas se sacan del hero y forman su propia rejilla legible. */
.statsSupervivencia,
.survivalStats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: var(--pc-e3);
    margin-top: var(--pc-e5);
}

.statsSupervivencia > div,
.survivalStats > div {
    padding: var(--pc-e4);
    border-radius: var(--pc-radio);
    border: 1px solid var(--pc-borde);
    background: color-mix(in srgb, var(--pc-superficie) 80%, transparent);
    text-align: center;
}

/* ==========================================================================
   COPERO
   ========================================================================== */
.explicaModo {
    max-width: 760px;
    margin: var(--pc-e4) auto 0;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: color-mix(in srgb, var(--pc-exito) 7%, transparent);
    overflow: hidden;
    text-align: left;
}

.explicaModo > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--pc-e3) var(--pc-e4);
    font-size: var(--pc-t-sm);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pc-exito);
    display: flex;
    align-items: center;
    gap: var(--pc-e2);
    min-height: var(--pc-tap);
}

.explicaModo > summary::-webkit-details-marker { display: none; }

.explicaModo > summary::before {
    content: "＋";
    font-size: 1.1em;
    line-height: 1;
    transition: transform var(--pc-normal) var(--pc-salida);
}

.explicaModo[open] > summary::before { content: "－"; }

.pasosModo {
    margin: 0;
    padding: 0 var(--pc-e5) var(--pc-e4) calc(var(--pc-e5) + 14px);
    display: grid;
    gap: var(--pc-e2);
    color: var(--pc-texto-suave);
    font-size: var(--pc-t-sm);
    line-height: 1.55;
}

.pasosModo li::marker { color: var(--pc-exito); font-weight: 700; }
.pasosModo b { color: var(--pc-texto); }

/* Las dos tarjetas del menú copero deben tener la misma altura. */
.coperoMenuGrid { align-items: stretch; }
.coperoCardBox { height: 100%; }
/* El boton se ancla al fondo para que las dos tarjetas cierren a la misma
   altura aunque una tenga tres campos y la otra uno. */
.coperoCardBox > button { margin-top: auto; }

/* El pie de la tarjeta de tienda dependia de `space-between`, que reparte el
   hueco entre todos los hijos: con descripciones de distinto largo los pies
   bailaban unos pixeles. */
.cardItemTienda { justify-content: flex-start; }
.cardItemTienda .itemFooterRow { margin-top: auto; }
.coperoCardBox h3 { font-size: var(--pc-t-lg); }
.coperoCardBox p { color: var(--pc-texto-suave); }

.coperoBadge {
    display: inline-block;
    background: color-mix(in srgb, var(--pc-exito) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc-exito) 40%, transparent);
    color: var(--pc-exito);
}

/* ==========================================================================
   TORNEO Y SUBASTA
   ========================================================================== */
.torneoCodigoBox {
    display: grid;
    justify-items: center;
    gap: var(--pc-e2);
    padding: var(--pc-e5);
    border-radius: var(--pc-radio-lg);
    border: 1px dashed var(--pc-borde-fuerte);
    background: color-mix(in srgb, var(--pc-primario) 8%, transparent);
}

.torneoCodigoVal {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    color: var(--pc-texto);
}

.torneoPlayerGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
    gap: var(--pc-e3);
}

.torneoPlayerCard {
    display: flex;
    align-items: center;
    gap: var(--pc-e3);
    padding: var(--pc-e3);
    border-radius: var(--pc-radio);
    border: 1px solid var(--pc-borde);
    background: color-mix(in srgb, var(--pc-superficie) 80%, transparent);
    min-width: 0;
}

.torneoPlayerCard.isHost { border-color: var(--pc-oro); }

.torneoScoreBadge {
    min-width: 34px;
    padding: 3px 9px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    background: color-mix(in srgb, var(--pc-primario) 16%, transparent);
    color: var(--pc-texto);
}

.torneoTable td,
.torneoTable th { white-space: nowrap; }

tr.esMiClub td { background: color-mix(in srgb, var(--pc-primario) 14%, transparent) !important; }

/* ==========================================================================
   MODAL PRIME CHAMPIONS TEAM
   ========================================================================== */
.modalEquipoContenido { width: min(100%, 780px); }

.equipoHeader {
    text-align: center;
    margin-bottom: var(--pc-e5);
}

.equipoBadge {
    display: inline-block;
    margin-bottom: var(--pc-e3);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: var(--pc-t-2xs);
    font-weight: 800;
    letter-spacing: 0.22em;
    color: var(--pc-primario-alt);
    background: color-mix(in srgb, var(--pc-primario) 14%, transparent);
    border: 1px solid var(--pc-borde-fuerte);
}

html.modo-claro .equipoBadge { color: var(--pc-primario); }

.equipoHeader h2 { font-size: var(--pc-t-3xl); margin: 0 0 var(--pc-e2); }
.equipoHeader p { color: var(--pc-texto-suave); margin: 0 auto; font-size: var(--pc-t-md); }

.equipoSeccion { margin-bottom: var(--pc-e6); }

.equipoSeccionTitulo {
    display: flex;
    align-items: center;
    gap: var(--pc-e3);
    margin: 0 0 var(--pc-e4);
    font-size: var(--pc-t-sm);
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pc-texto-suave);
}

.equipoSeccionLinea {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--pc-borde-fuerte), transparent);
}

.equipoGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--pc-e3);
}

.equipoCard {
    display: flex;
    gap: var(--pc-e4);
    padding: var(--pc-e4);
    border-radius: var(--pc-radio);
    border: 1px solid var(--pc-borde);
    background: linear-gradient(155deg, var(--pc-superficie-2), var(--pc-fondo-elevado));
    transition: transform var(--pc-normal) var(--pc-salida), border-color var(--pc-normal);
    min-width: 0;
}

html.modo-claro .equipoCard { background: linear-gradient(155deg, #ffffff, #f7f2ff); }

.equipoCard:hover { transform: translateY(-3px); border-color: var(--pc-borde-fuerte); }
.equipoCard--staff { border-left: 3px solid var(--pc-primario); }
.equipoCard--colab { border-left: 3px solid var(--pc-oro); }

.equipoAvatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-family: var(--pc-fuente-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--pc-primario), var(--pc-primario-hondo));
    box-shadow: 0 6px 18px var(--pc-glow-suave);
}

.equipoAvatar--alt { background: linear-gradient(135deg, var(--pc-200), var(--pc-500)); }
.equipoAvatar--comunidad {
    background: linear-gradient(135deg, var(--pc-oro), #cf8f14);
    font-size: 1.4rem;
}

.equipoInfo { min-width: 0; }
.equipoInfo h4 { margin: 0 0 6px; font-size: var(--pc-t-lg); }

.equipoRoles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
    font-size: var(--pc-t-sm);
    color: var(--pc-texto-suave);
}

.equipoRoles .rolPrincipal {
    color: var(--pc-primario-alt);
    font-weight: 700;
    letter-spacing: 0.04em;
}

html.modo-claro .equipoRoles .rolPrincipal { color: var(--pc-primario); }
.equipoCard--colab .rolPrincipal { color: var(--pc-oro); }

.equipoLinks { margin-top: var(--pc-e3); }

.btnEnlaceEquipo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 10px;
    font-size: var(--pc-t-xs);
    font-weight: 700;
    text-decoration: none;
    color: var(--pc-exito);
    border: 1px solid color-mix(in srgb, var(--pc-exito) 40%, transparent);
    background: color-mix(in srgb, var(--pc-exito) 12%, transparent);
    transition: background var(--pc-normal), color var(--pc-normal);
}

.btnEnlaceEquipo:hover { background: var(--pc-exito); color: #04150f; }

.equipoFooter {
    padding-top: var(--pc-e4);
    border-top: 1px solid var(--pc-borde-suave);
    text-align: center;
}

.equipoFooter p { margin: 0 auto; color: var(--pc-texto-suave); font-size: var(--pc-t-sm); }

/* ==========================================================================
   LOGROS Y TIENDA
   ========================================================================== */
.tarjetaLogroItem { border-radius: var(--pc-radio); }

.btnAccionLogro:disabled,
.btnAccionTienda:disabled,
.claimedBtn {
    background: color-mix(in srgb, var(--pc-texto-tenue) 18%, transparent) !important;
    color: var(--pc-texto-suave) !important;
    border-color: var(--pc-borde) !important;
    opacity: 1;
}

.puntosSub,
.tagTipoArticulo,
.tagDestinoItem,
.kpiSub,
.badgeGlobalRank,
.eaVersion,
.eaFooter span,
.selectorHint,
.eaBrandSub {
    color: var(--pc-texto-suave) !important;
}

/* ==========================================================================
   PERFIL, RANKING Y PANELES EXTRA
   ========================================================================== */
.panelVacio {
    max-width: 46ch;
    margin-inline: auto;
    color: var(--pc-texto-suave);
}

.heroPerfil,
.managerHeroCard,
.tarjetaPublicaFutHero {
    border-radius: var(--pc-radio-lg);
    border: 1px solid var(--pc-borde);
    background: linear-gradient(150deg, var(--pc-superficie-2), var(--pc-fondo-elevado));
    box-shadow: var(--pc-sombra-2);
}

html.modo-claro .heroPerfil,
html.modo-claro .managerHeroCard,
html.modo-claro .tarjetaPublicaFutHero {
    background: linear-gradient(150deg, #ffffff, #f7f2ff);
}

.managerCard { border-radius: var(--pc-radio); }
.managerCard:hover { border-color: var(--pc-primario); box-shadow: 0 10px 28px var(--pc-glow-suave); }

.metricasPerfil > div,
.kpiManagerCard {
    border-radius: var(--pc-radio);
    border: 1px solid var(--pc-borde);
    background: color-mix(in srgb, var(--pc-superficie) 80%, transparent);
}

.avisoInvitadoForo,
.avisoInvitado {
    color: var(--pc-texto-suave) !important;
    border-radius: var(--pc-radio);
}

/* ==========================================================================
   CASINO
   ========================================================================== */
.c-hero { max-width: 900px; }

.c-header-card,
.c-game-box,
.c-display {
    border-radius: var(--pc-radio-lg) !important;
    border-color: var(--pc-borde) !important;
    background: linear-gradient(160deg, var(--pc-superficie), var(--pc-fondo-elevado)) !important;
}

html.modo-claro .c-header-card,
html.modo-claro .c-game-box,
html.modo-claro .c-display {
    background: linear-gradient(160deg, #ffffff, #f7f2ff) !important;
}

.c-title { font-family: var(--pc-fuente-display) !important; color: var(--pc-texto) !important; }
.c-subtitle, .c-msg, .c-bets-label, .c-paytable { color: var(--pc-texto-suave) !important; }
.c-balance b { color: var(--pc-oro) !important; font-family: var(--pc-fuente-datos) !important; }

.c-bj-card,
.cartaItem {
    background: #f6f2fb !important;
    color: #1d1533 !important;
    border-radius: 10px !important;
}

.c-bj-card.red,
.cartaItem.roja { color: #c2185b !important; }

.cartaTapada,
.c-bj-card-back {
    background: linear-gradient(135deg, var(--pc-600), var(--pc-800)) !important;
    color: var(--pc-100) !important;
    border-color: var(--pc-borde-fuerte) !important;
}

/* ==========================================================================
   TOTW Y EQUIPOS
   ========================================================================== */
.totwPitchGrid,
.gridEquipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
    gap: var(--pc-e3);
}

.equipoLista {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: var(--pc-e4) var(--pc-e3);
    text-align: center;
    cursor: pointer;
}

.equipoLista h3 { font-size: var(--pc-t-md); margin: 0; overflow-wrap: anywhere; }
.equipoLista small { color: var(--pc-texto-tenue); }
.logoEquipo { width: 62px; height: 62px; object-fit: contain; }
.logoEquipoGrande { width: 110px; height: 110px; object-fit: contain; }

.grupoJugadores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: var(--pc-e2);
}

.jugadorFila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pc-e3);
    padding: var(--pc-e3) var(--pc-e4);
}

.jugadorFila h3 { font-size: var(--pc-t-md); margin: 0; }
.jugadorFila small { color: var(--pc-texto-tenue); }

.tituloGrupo {
    margin: var(--pc-e5) 0 var(--pc-e3);
    font-size: var(--pc-t-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pc-texto-suave);
}

/* ==========================================================================
   ENLACES Y OBJETIVOS TÁCTILES
   ========================================================================== */
.eaInstaLink,
#cambiarModo,
#linkOlvidaste,
.textoTerminos a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--pc-tap);
    padding: 6px 4px;
    color: var(--pc-primario-alt);
    text-decoration: none;
    font-weight: 600;
}

html.modo-claro .eaInstaLink,
html.modo-claro #cambiarModo,
html.modo-claro #linkOlvidaste,
html.modo-claro .textoTerminos a { color: var(--pc-primario); }

.eaInstaLink:hover,
#cambiarModo:hover,
#linkOlvidaste:hover,
.textoTerminos a:hover { text-decoration: underline; }

.eaFooter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pc-e3);
    margin-top: var(--pc-e6);
    padding-top: var(--pc-e4);
    border-top: 1px solid var(--pc-borde-suave);
    font-size: var(--pc-t-xs);
    color: var(--pc-texto-suave);
}

/* ==========================================================================
   RESPONSIVE POR PANTALLA
   ========================================================================== */
@media (max-width: 1000px) {
    .draftLayout { grid-template-columns: 1fr; }
    #campo { min-height: 400px; }
}

@media (max-width: 600px) {
    .partidoGrande { grid-template-columns: 1fr; justify-items: center; gap: var(--pc-e2); }
    .equipoGrande:last-of-type { flex-direction: row; text-align: left; }
    .resumenGoleadoresMini { grid-template-columns: 1fr; }
    .colGolesV { text-align: left; }
    .equipoCard { flex-direction: column; gap: var(--pc-e3); }
    .equipoSeccionTitulo { font-size: var(--pc-t-xs); }
    .draftTitulo { flex-direction: column; align-items: flex-start; gap: var(--pc-e2); }
    .posicion { width: clamp(62px, 20vw, 84px); }
    .eaFooter { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   CORRECCIONES DE CONTRASTE (auditoría WCAG AA)
   Cada regla arregla un par texto/fondo que no llegaba a 4.5:1 (3:1 en texto
   grande). Se mantiene el color de marca, se ajusta la luminosidad.
   ========================================================================== */
.eyebrow,
.subtextHeader,
.panelTitulo small,
.formacion small,
.jugadorFila small,
.equipoLista small,
.posicion .pos,
.posicion .jugadorPos,
.cruces .carta b {
    color: var(--pc-texto-suave) !important;
}

.badgeGlobalRank,
.patchVersionPill,
.tagTipoArticulo,
.tagDestinoItem {
    color: var(--pc-texto) !important;
    background: color-mix(in srgb, var(--pc-primario) 26%, transparent) !important;
    border: 1px solid var(--pc-borde-fuerte) !important;
}

html.modo-claro .badgeGlobalRank,
html.modo-claro .patchVersionPill,
html.modo-claro .tagTipoArticulo,
html.modo-claro .tagDestinoItem {
    color: var(--pc-primario-hondo) !important;
    background: color-mix(in srgb, var(--pc-primario) 12%, #ffffff) !important;
}

.btnTiendaHeaderLogros,
.btnTiendaFlotanteLogros {
    background: linear-gradient(135deg, var(--pc-500), var(--pc-700)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.valLocal,
.valVisitante,
.labelStatCel,
.kpiSub,
.puntosSub {
    color: var(--pc-texto-suave) !important;
}

.statHeader .labelStat { color: var(--pc-texto-tenue) !important; }

/* El título de la celebración iba en oro sobre un panel también dorado. */
.tituloCampeonGlorioso {
    color: var(--pc-texto) !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}

html.modo-claro .tituloCampeonGlorioso {
    color: var(--pc-texto) !important;
    text-shadow: none;
}

.statBoxCelebracion {
    border: 1px solid var(--pc-borde) !important;
    background: color-mix(in srgb, var(--pc-fondo) 45%, transparent) !important;
}

.valorStatCel { color: var(--pc-oro) !important; }

/* Emojis decorativos: no aportan información, no deben auditarse como texto. */
.avatarIcon,
.instaIcon,
.equipoSeccionIcono {
    color: inherit;
}

/* ==========================================================================
   MODO INVITADO
   Explica por qué una función necesita cuenta, en lugar de fallar en silencio.
   ========================================================================== */
.modalInvitadoCaja {
    width: min(100%, 520px);
    text-align: left;
}

.invitadoBadge {
    display: inline-block;
    margin-bottom: var(--pc-e3);
    padding: 5px 13px;
    border-radius: 999px;
    font-size: var(--pc-t-2xs);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pc-oro);
    background: color-mix(in srgb, var(--pc-oro) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc-oro) 38%, transparent);
}

.modalInvitadoCaja h3 {
    margin: 0 44px var(--pc-e3) 0;
    font-size: var(--pc-t-xl);
}

.invitadoDetalle {
    margin: 0 0 var(--pc-e3);
    color: var(--pc-texto-suave);
    font-size: var(--pc-t-md);
}

.invitadoExtra {
    margin: 0 0 var(--pc-e3);
    padding: 10px 14px;
    border-radius: var(--pc-radio-sm);
    background: color-mix(in srgb, var(--pc-primario) 10%, transparent);
    border: 1px solid var(--pc-borde);
    color: var(--pc-texto);
    font-size: var(--pc-t-sm);
}

.invitadoVentajas {
    margin: 0 0 var(--pc-e5);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--pc-e2);
    font-size: var(--pc-t-sm);
    color: var(--pc-texto-suave);
}

.invitadoVentajas li {
    display: flex;
    gap: var(--pc-e2);
    align-items: flex-start;
}

.invitadoVentajas li::before {
    content: "✓";
    flex-shrink: 0;
    color: var(--pc-exito);
    font-weight: 800;
}

.invitadoAcciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pc-e3);
}

.invitadoAcciones .btnPrime { flex: 1 1 180px; }

/* Banner en línea para pantallas que sí se pueden mirar sin cuenta. */
.avisoInvitadoLinea {
    display: flex;
    align-items: center;
    gap: var(--pc-e3);
    flex-wrap: wrap;
    margin: 0 0 var(--pc-e4);
    padding: var(--pc-e3) var(--pc-e4);
    border-radius: var(--pc-radio);
    border: 1px solid color-mix(in srgb, var(--pc-oro) 32%, transparent);
    background: color-mix(in srgb, var(--pc-oro) 9%, transparent);
    font-size: var(--pc-t-sm);
}

.avisoInvitadoIcono {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pc-oro) 18%, transparent);
}

.avisoInvitadoLinea > span:nth-child(2) {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.avisoInvitadoLinea b { color: var(--pc-texto); }
.avisoInvitadoLinea small { color: var(--pc-texto-suave); line-height: 1.45; }
.avisoInvitadoLinea .btnPrime { flex-shrink: 0; }

@media (max-width: 600px) {
    .invitadoAcciones { flex-direction: column; }

    /* `flex: 1 1 180px` mide el ANCHO mientras los botones van en fila, pero
       al pasar a columna esos 180 px se convierten en ALTURA: los dos botones
       del aviso salían de casi 200 px de alto cada uno y el modal se leía como
       roto. Al apilarse, cada botón ocupa lo suyo. */
    .invitadoAcciones .btnPrime {
        flex: 0 0 auto;
        width: 100%;
    }

    .avisoInvitadoLinea .btnPrime { width: 100%; }
}

/* ==========================================================================
   MODAL DE TÉRMINOS
   ========================================================================== */
.modalTerminosContenido {
    width: min(100%, 700px);
    display: flex;
    flex-direction: column;
    gap: var(--pc-e4);
}

.modalTerminosContenido h2 { font-size: var(--pc-t-2xl); margin: 4px 44px 0 0; }
.modalTerminosContenido h3 { font-size: var(--pc-t-md); }
.modalTerminosContenido p,
.modalTerminosContenido li { color: var(--pc-texto-suave); font-size: var(--pc-t-sm); }

.pieModalTerminos {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--pc-e4);
    border-top: 1px solid var(--pc-borde-suave);
}

@media (max-width: 600px) {
    .pieModalTerminos { justify-content: stretch; }
    .pieModalTerminos .btnPrime { width: 100%; }
}

/* Etiquetas de la comparativa de estadísticas del partido. */
.statHeader .labelStat,
.labelStat {
    color: var(--pc-texto-suave) !important;
}

/* Todos los enlaces de la pantalla de acceso son objetivos táctiles. */
#auth a,
#crearClub a,
.authCheckbox a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 2px;
}

/* ==========================================================================
   ÚLTIMOS AJUSTES DE ACCESIBILIDAD
   ========================================================================== */

/* Toda tabla ancha se desplaza dentro de su caja en pantallas estrechas. */
@media (max-width: 900px) {
    .pantalla table,
    #listaEquipos table,
    .contenidoSocial table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Objetivos táctiles que se quedaban a uno o dos píxeles del mínimo. */
.eaControlBtn {
    min-width: 44px;
}

.cerrar,
.cerrarCelebracionBtn,
.btnCerrarPatchModal,
.cerrarModalTiendaBtn {
    min-width: 42px;
    min-height: 42px;
}

/* La hoja original lo pintaba de rosa claro al pasar el raton y el texto
   blanco se quedaba en 4.06:1. Se usa el relleno de peligro del tema. */
.cerrarModalTiendaBtn:hover {
    background: var(--pc-peligro-fondo) !important;
    color: #ffffff !important;
    border-color: var(--pc-peligro-fondo) !important;
}

/* ==========================================================================
   PANTALLAS MUY ESTRECHAS (320 px)
   ========================================================================== */
@media (max-width: 360px) {
    /* El título troceado con letter-spacing amplio no cabía en una línea. */
    .eaSectionTitle {
        flex-wrap: wrap;
        letter-spacing: 0.08em;
        font-size: var(--pc-t-xs);
    }
    .pc-split__c { white-space: normal; }

    /* Las insignias de estado de los logros deben poder envolverse. */
    .tagEstado,
    .logroItemPuntos,
    .badgeSuperTier,
    .totwBadgePill {
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    .logroHeaderRow {
        flex-wrap: wrap;
        gap: 6px;
    }

    .filtrosLogros,
    .torneoNavTabs,
    .c-tabs { flex-direction: column; }

    .btnFiltroLogros,
    .torneoTabBtn,
    .c-tab { width: 100%; }

    /* El heroe del Balon de Oro es una fila fija: con un nombre de jugador
       largo se desbordaba por la derecha en 320 px. Pasa a columna y el
       nombre puede partirse. */
    .heroBalonOro {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        padding: 16px 12px;
    }

    .balonOroDetails {
        min-width: 0;
        flex: 1 1 100%;
    }

    .balonOroDetails h2 {
        font-size: 1.25rem;
        overflow-wrap: anywhere;
    }

    .eyebrowBalon,
    .balonOroStats {
        display: block;
        overflow-wrap: anywhere;
    }
}

/* Las pestanas del casino se quedaban en 40 px de alto: por debajo del
   minimo tactil de 44. */
.c-tab {
    min-height: 44px;
}

/* El filtro de logros activo/inactivo con el par accesible del sistema. */
.btnFiltroLogros {
    color: var(--pc-texto-suave);
    background: color-mix(in srgb, var(--pc-primario) 8%, transparent);
    border: 1px solid var(--pc-borde);
}

.btnFiltroLogros.activo,
.btnFiltroLogros.active {
    background: linear-gradient(135deg, var(--pc-500), var(--pc-700));
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
}

/* El botón dorado de "Nueva Champions" llevaba texto blanco (2.5:1). */
.accionesFinales button:last-child,
#btnNuevaFinal {
    background: linear-gradient(135deg, var(--pc-oro), #d09312) !important;
    color: #1a1005 !important;
}

html.modo-claro .accionesFinales button:last-child,
html.modo-claro #btnNuevaFinal {
    background: linear-gradient(135deg, #7a5400, #5c3f00) !important;
    color: #ffffff !important;
}

/* La tarjeta del partido propio se marca con el borde dorado, no tiñendo
   el fondo: así el texto conserva el contraste del panel. */
.miPartidoCard,
.partidoGrandeCard.miPartidoCard {
    border: 1.5px solid var(--pc-oro) !important;
    background: var(--pc-panel) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc-oro) 30%, transparent),
                var(--pc-sombra-2) !important;
}

.miPartidoCard .nombreMarcador,
.miPartidoCard .equipoGrande span { color: var(--pc-texto) !important; }

/* "Volver" es una acción secundaria: nunca debe competir con la principal. */
.volverSuperBtn,
.btnVolver,
.volverPanel {
    background: color-mix(in srgb, var(--pc-primario) 8%, transparent) !important;
    color: var(--pc-texto) !important;
    border: 1px solid var(--pc-borde) !important;
    box-shadow: none !important;
}

.volverSuperBtn:hover,
.btnVolver:hover,
.volverPanel:hover {
    background: color-mix(in srgb, var(--pc-primario) 18%, transparent) !important;
    border-color: var(--pc-primario) !important;
}

/* Las métricas de Supervivencia ocupan el ancho del panel. */
.statsSupervivencia,
.survivalStats {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
}


/* ==========================================================================
   VISTA DE CAMPEON
   --------------------------------------------------------------------------
   El escudo y la tarjeta de la final eran hijos sueltos del contenedor y se
   alineaban a la izquierda mientras los titulos iban centrados. Aqui todo el
   bloque comparte eje.
   ========================================================================== */
.campeonBloque {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--pc-e2);
    margin-bottom: var(--pc-e5);
}

.campeonBloque > h2,
.campeonBloque > h3,
.campeonBloque > h1 {
    margin: 0;
    text-align: center;
}

.campeonBloque > h3 {
    font-size: var(--pc-t-sm);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pc-texto-suave);
    margin-top: var(--pc-e2);
}

.campeonEscudo {
    width: clamp(96px, 22vw, 140px);
    height: clamp(96px, 22vw, 140px);
    object-fit: contain;
    filter: drop-shadow(0 10px 26px var(--pc-oro-glow));
}

/* La tarjeta de la final es una sola: sin tope de ancho se estiraba a todo el
   contenedor y se veia descolgada del resto del bloque. */
.campeonFinalResultado {
    width: 100%;
    max-width: 420px;
}

.campeonFinalResultado .resultados {
    grid-template-columns: 1fr;
    margin: 0;
}

/* El aviso de Prime Score / campeon comparte el mismo eje y ancho. */
.campeonBloque > div[style] {
    width: 100%;
    max-width: 420px;
    margin-inline: auto !important;
}


/* ==========================================================================
   TARJETAS DE OPCION (crear sala / unirse / elegir modo)
   --------------------------------------------------------------------------
   Antes eran divs sueltos: el boton iba pegado al parrafo, asi que con un
   titulo de dos lineas o un texto mas largo cada accion quedaba a distinta
   altura. Ahora son columnas flexibles con la accion anclada abajo, de modo
   que todos los botones de la fila comparten linea.
   ========================================================================== */
.rejillaTarjetasOpcion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr));
    gap: var(--pc-e4);
    align-items: stretch;
}

.tarjetaOpcion {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: var(--pc-e2);
    padding: var(--pc-e5) var(--pc-e4);
    background: var(--pc-panel);
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio-lg);
    box-shadow: var(--pc-sombra-2);
}

.tarjetaOpcion--primaria { border-color: color-mix(in srgb, var(--pc-primario) 55%, transparent); }
.tarjetaOpcion--oro { border-color: color-mix(in srgb, var(--pc-oro) 55%, transparent); }

/* Altura reservada para dos lineas: los titulos arrancan todos a la misma
   altura aunque uno de ellos quepa en una sola. */
.tarjetaOpcion > h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7em;
    margin: 0;
    font-family: var(--pc-fuente-display);
    font-size: var(--pc-t-lg);
    line-height: 1.25;
    color: var(--pc-texto);
}

/* El cuerpo se centra en el espacio que sobre.
   Las tarjetas de una misma fila igualan altura, pero no tienen el mismo
   contenido: la de "unirse" lleva ademas un campo de codigo. Con el texto
   pegado arriba, la tarjeta corta abria un agujero de ~100 px justo encima de
   su boton. Repartiendo el sobrante arriba y abajo, el texto queda centrado y
   el agujero desaparece sin mover los botones, que siguen alineados entre si. */
.tarjetaOpcion > p {
    margin: auto 0;
    font-size: var(--pc-t-sm);
    line-height: 1.55;
    color: var(--pc-texto-suave);
}

/* El hueco sobrante se acumula aqui: la accion queda pegada al fondo. */
.tarjetaOpcionAccion {
    display: grid;
    gap: var(--pc-e2);
    margin-top: auto;
    padding-top: var(--pc-e3);
}

.tarjetaOpcionAccion .btnPrime { width: 100%; }

.campoCodigoSala {
    width: 100%;
    text-align: center;
    font-family: var(--pc-fuente-datos);
    font-size: var(--pc-t-lg);
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

@media (max-width: 420px) {
    .tarjetaOpcion > h3 { min-height: 0; }
    .campoCodigoSala { letter-spacing: 0.16em; }
}


/* ==========================================================================
   CARTAS DEL EQUIPO DE LA SEMANA
   --------------------------------------------------------------------------
   La estadistica lleva la etiqueta ENCIMA del valor: en linea ("RIT 88") el
   numero se caia a la linea siguiente en cuanto la columna se estrechaba.
   El nombre ocupa la zona flexible de la carta, asi que las cajas de
   estadisticas y las pildoras quedan a la misma altura en toda la fila.
   ========================================================================== */
.totwPitchGrid {
    grid-template-columns: repeat(auto-fill, minmax(min(188px, 100%), 1fr));
    align-items: stretch;
}

.cardTOTWSemana {
    display: flex;
    flex-direction: column;
    gap: var(--pc-e2);
    padding: var(--pc-e4) var(--pc-e3);
    min-width: 0;
}

.totwCardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pc-e1);
}

.totwMedia {
    font-family: var(--pc-fuente-datos);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pc-oro);
}

.totwPos {
    flex: 0 0 auto;
    font-family: var(--pc-fuente-ui);
    font-size: var(--pc-t-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Zona flexible: absorbe la diferencia entre un nombre de una linea y uno de
   tres, de modo que lo de abajo queda anclado. */
.totwPlayerName {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 2.4em;
    margin: 0;
    font-family: var(--pc-fuente-display);
    font-size: var(--pc-t-md);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: var(--pc-texto);
}

.totwCardStats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pc-e2) var(--pc-e1);
    margin: 0;
    padding: var(--pc-e2);
    border-radius: var(--pc-radio-sm);
    background: color-mix(in srgb, var(--pc-990) 55%, transparent);
    border: 1px solid var(--pc-borde-suave);
}

.totwStat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
    line-height: 1.1;
}

.totwStat > span {
    font-family: var(--pc-fuente-ui);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--pc-texto-tenue);
}

.totwStat > b {
    font-family: var(--pc-fuente-datos);
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--pc-texto);
}

.totwBadgePill {
    align-self: center;
    text-align: center;
    background: color-mix(in srgb, var(--pc-oro) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc-oro) 40%, transparent);
    color: var(--pc-oro);
}

html.modo-claro .totwCardStats {
    background: color-mix(in srgb, var(--pc-primario) 5%, #ffffff) !important;
    border-color: var(--pc-borde) !important;
}

html.modo-claro .totwStat > span { color: var(--pc-texto-suave) !important; }
html.modo-claro .totwStat > b { color: var(--pc-texto) !important; }

@media (max-width: 480px) {
    .totwPitchGrid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
    .totwMedia { font-size: 1.7rem; }
    .totwPlayerName { font-size: var(--pc-t-sm); min-height: 2.6em; }
    .totwStat > b { font-size: 0.85rem; }
}

/* ==========================================================================
   PREVISUALIZACIONES DE LA TIENDA
   --------------------------------------------------------------------------
   Cada estilo a la venta trae su propia decoración y algunos añaden 2 px de
   borde o una fila extra. Eso cambiaba la altura de la caja y desplazaba todo
   lo de abajo: en una misma fila, los botones de comprar quedaban a alturas
   distintas. Con altura fija la decoración deja de mover la maqueta.
   ========================================================================== */
.tiendaPreviewBox {
    box-sizing: border-box;
    height: 86px;
    overflow: hidden;
}

.tiendaPreviewBox.previewPerfil,
.tiendaPreviewBox.previewRanking {
    display: flex;
    align-items: center;
}

@media (max-width: 480px) {
    .tiendaPreviewBox { height: 78px; }
}

/* ==========================================================================
   PIE DE LA TARJETA DE TIENDA
   --------------------------------------------------------------------------
   El pie era una fila `precio | botón`. Con etiquetas largas ("🔒 FALTAN
   150000 PTS") el botón pasaba a dos líneas, el pie crecía y, como está
   anclado abajo, el botón de esa tarjeta arrancaba más arriba que el de la de
   al lado. Se apila: precio arriba, botón a todo el ancho en una sola línea.
   ========================================================================== */
.itemFooterRow {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pc-e2);
    justify-items: stretch;
}

.itemFooterRow > .precioBadge {
    justify-self: center;
    text-align: center;
}

.itemFooterRow > div:not(.precioBadge) {
    display: grid;
}

.itemFooterRow .btnAccionTienda {
    width: 100%;
    min-height: 40px;
    padding-inline: var(--pc-e2);
    font-size: var(--pc-t-2xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El botón del modo copero pasó al sistema `.btnPrime`, que no ocupa todo el
   ancho por defecto. */
.coperoCardBox > .btnPrime { width: 100%; }

/* El texto de la opción seleccionada se cortaba a mitad de palabra. */
.coperoFormGroup select { text-overflow: ellipsis; }

/* La fila de etiquetas de la tarjeta de tienda: con nombres largos ("Negro
   Azabache Mamba") la segunda etiqueta llegaba justo al borde de la tarjeta.
   Se le permite encoger y recortar con puntos suspensivos. */
.cardItemTopRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pc-e2);
    min-width: 0;
}

.cardItemTopRow > .tagDestinoItem {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cardItemTopRow > .tagTipoArticulo { flex: 0 0 auto; }


/* ==========================================================================
   PANTALLA DE FORMACIONES
   --------------------------------------------------------------------------
   Seis dibujos en una rejilla de cinco columnas dejaban una tarjeta huerfana
   y medio pantallazo vacio. Tres columnas reparten seis en dos filas parejas,
   y cada tarjeta muestra el croquis del dibujo en lugar de sólo el número.
   ========================================================================== */
#gridFormaciones.gridFormaciones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 860px;
    margin-inline: auto;
    gap: var(--pc-e4);
}

.formacion {
    position: relative;
    min-height: 190px;
    justify-content: flex-end;
    overflow: hidden;
}

/* Croquis: el ataque arriba, el arquero abajo. */
.formacionDibujo {
    position: absolute;
    inset: var(--pc-e3) var(--pc-e4) auto auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 74px;
    padding: 9px 6px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--pc-990) 45%, transparent);
    border: 1px solid var(--pc-borde-suave);
    pointer-events: none;
}

.formacionLinea {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.formacionLinea > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pc-primario-alt);
    box-shadow: 0 0 6px var(--pc-glow-suave);
}

.formacionLinea--arquero > i { background: var(--pc-oro); }

.formacion:hover .formacionLinea > i { background: var(--pc-oro); }

html.modo-claro .formacionDibujo {
    background: color-mix(in srgb, var(--pc-primario) 6%, #ffffff) !important;
    border-color: var(--pc-borde) !important;
}

@media (max-width: 760px) {
    #gridFormaciones.gridFormaciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
    #gridFormaciones.gridFormaciones { grid-template-columns: 1fr; }
    .formacion { min-height: 150px; }
    .formacionDibujo { width: 64px; }
}

/* ==========================================================================
   FILA DE INDICADORES DE RENDIMIENTO
   Seis fichas en cinco columnas dejaban otra huerfana.
   ========================================================================== */
.kpiRowAnalytics,
.gridMetricasManager {
    /* Seis fichas: los unicos repartos sin huerfana son 6, 3, 2 y 1. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kpiRowAnalytics { max-width: 920px; }

@media (min-width: 640px) {
    .kpiRowAnalytics,
    .gridMetricasManager { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
    .kpiRowAnalytics,
    .gridMetricasManager { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 400px) {
    .kpiRowAnalytics,
    .gridMetricasManager { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TARJETA DE LOGRO
   --------------------------------------------------------------------------
   Era una fila de tres columnas (icono | texto | acción) dentro de una tarjeta
   de 360 px: el título se partía en tres líneas, la descripción quedaba en una
   cinta centrada de 100 px y el botón bailaba de altura en cada tarjeta.
   Ahora: cabecera arriba, descripción a todo el ancho y un pie fijo abajo con
   los puntos y la acción, igual en todas.
   ========================================================================== */
.tarjetaLogroItem {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "icono info"
        "pie   pie";
    align-items: start;
    gap: var(--pc-e3);
    padding: var(--pc-e4);
    text-align: left;
}

.tarjetaLogroItem .logroItemIcono {
    grid-area: icono;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--pc-radio-sm);
    background: color-mix(in srgb, var(--pc-primario) 12%, transparent);
    border: 1px solid var(--pc-borde-suave);
    font-size: 1.6rem;
    line-height: 1;
}

.tarjetaLogroItem .logroItemInfo {
    grid-area: info;
    min-width: 0;
    display: grid;
    gap: var(--pc-e1);
}

.tarjetaLogroItem .logroHeaderRow {
    align-items: flex-start;
    gap: var(--pc-e2);
    margin: 0;
}

.tarjetaLogroItem .logroHeaderRow h3 {
    font-family: var(--pc-fuente-display);
    font-size: var(--pc-t-md);
    line-height: 1.2;
    text-align: left;
    overflow-wrap: anywhere;
}

.tarjetaLogroItem .logroHeaderRow .tagEstado { flex: 0 0 auto; }

.tarjetaLogroItem .logroItemInfo p {
    text-align: left;
    color: var(--pc-texto-suave);
}

/* Pie común: puntos a la izquierda, acción a la derecha, siempre al fondo. */
.tarjetaLogroItem .logroRightCol {
    grid-area: pie;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--pc-e3);
    margin: 0;
    padding-top: var(--pc-e3);
    border-top: 1px solid var(--pc-borde-suave);
}

.tarjetaLogroItem .logroRightCol > button { flex: 0 0 auto; }

@media (max-width: 420px) {
    .tarjetaLogroItem { gap: var(--pc-e2); padding: var(--pc-e3); }
    .tarjetaLogroItem .logroItemIcono { width: 40px; height: 40px; font-size: 1.35rem; }
    .tarjetaLogroItem .logroRightCol { flex-wrap: wrap; }
}

/* El botón de acción del casino es dorado, pero heredaba la sombra dura
   violeta de la capa retro: quedaba un borde morado bajo un botón de oro.
   El selector lleva el id para ganar a `prime-retro.css`, que carga después. */
#casinoView .c-action-btn {
    box-shadow:
        0 4px 0 color-mix(in srgb, var(--pc-oro) 45%, #000),
        0 8px 22px var(--pc-oro-glow);
}

#casinoView .c-action-btn:not(:disabled):hover {
    box-shadow:
        0 5px 0 color-mix(in srgb, var(--pc-oro) 45%, #000),
        0 12px 30px var(--pc-oro-glow);
}

#casinoView .c-action-btn:not(:disabled):active {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--pc-oro) 45%, #000);
}

/* ==========================================================================
   ENLACES DE APOYO (donaciones)
   Antes eran degradados fuera de paleta escritos en el atributo `style`.
   ========================================================================== */
.enlaceApoyo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pc-e2);
    padding: 16px 20px;
    border-radius: var(--pc-radio);
    font-family: var(--pc-fuente-ui);
    font-weight: 800;
    text-decoration: none;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: transform var(--pc-normal) var(--pc-salida), box-shadow var(--pc-normal);
}

.enlaceApoyo:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.enlaceApoyo--whatsapp {
    background: linear-gradient(135deg, #0f7a5f 0%, #0a5c47 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(15, 122, 95, 0.28);
}

.enlaceApoyo--instagram {
    background: linear-gradient(135deg, #7014cc 0%, #a81a48 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(168, 26, 72, 0.26);
}

html.modo-claro .enlaceApoyo--whatsapp,
html.modo-claro .enlaceApoyo--instagram { color: #ffffff !important; }

/* ==========================================================================
   PANELES DEL PERFIL DEL MANAGER
   --------------------------------------------------------------------------
   Las secciones se pegaban al bloque anterior y el "0V - 0E - 0D" partia en
   dos lineas, alargando esa ficha por encima de las demas.
   ========================================================================== */
.managerPanelCard + .managerPanelCard,
.managerPanelCard { margin-top: var(--pc-e5); }

.managerPanelCard > .panelCardHeader { margin-bottom: var(--pc-e3); }

.kpiManagerCard {
    display: flex;
    flex-direction: column;
    gap: var(--pc-e1);
    min-width: 0;
}

.kpiManagerCard .kpiBigValue,
.kpiManagerCard .kpiBigValueColor {
    white-space: nowrap;
    font-size: clamp(1.15rem, 1.5vw, 1.45rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La etiqueta y el pie quedan siempre en el mismo sitio dentro de la ficha. */
.kpiManagerCard .kpiSub,
.kpiManagerCard .progressBarWinRate { margin-top: auto; }

/* ==========================================================================
   BUSCADOR DE EQUIPOS
   ========================================================================== */
.equiposBuscador {
    display: flex;
    align-items: center;
    gap: var(--pc-e3);
    max-width: 520px;
    margin: 0 auto var(--pc-e5);
}

.equiposBuscador input {
    flex: 1 1 auto;
    min-width: 0;
}

.equiposConteo {
    flex: 0 0 auto;
    font-family: var(--pc-fuente-datos);
    font-size: var(--pc-t-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}

/* Etiqueta sólo para lectores de pantalla. */
.visualmenteOculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* La insignia del héroe es una píldora, no una barra: en bloque ocupaba todo
   el ancho y en modo claro se veía como una franja blanca. */
.badgeGlowText {
    display: inline-flex;
    align-items: center;
    width: auto;
}

/* El escudo y su píldora se apilan y se centran: al pasar la píldora a
   `inline-flex` se había ido a la derecha del escudo. */
.totwLogoBadge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pc-e2);
}

/* ==========================================================================
   CARTAS DEL XI IDEAL (ceremonia)
   --------------------------------------------------------------------------
   El nombre del club se partía en dos o tres líneas ("EQUIPO DE LA SEMANA") y
   cada carta acababa con una altura distinta dentro de la misma línea del
   campo. Se reservan dos líneas para el jugador y una para el club.
   ========================================================================== */
.cardXIPlayer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.cardXINombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
    line-height: 1.1;
    text-align: center;
}

.cardXIEquipo {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Media y posición se leían pegadas ("99EI"). */
.cardXIPlayer .cardXITop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pc-e2);
    width: 100%;
}


/* ==========================================================================
   CARTAS DE JUGADOR — NIVELES VISIBLES
   --------------------------------------------------------------------------
   Antes todas las cartas compartían fondo y solo cambiaba el borde: un 91 y un
   82 se veían igual. Cada banda tiene ahora color de número, marco, galón
   superior y tinte de fondo propios, de modo que la diferencia se capta de un
   vistazo sin leer la cifra.

     hasta 87   base      · gris apagado
     88 a 90    élite     · violeta de marca
     91 a 95    oro       · dorado
     96 o más   leyenda   · violeta claro con halo
     TOTW       equipo de la semana · oro intenso
   ========================================================================== */
.playerCard {
    --nivel: var(--pc-texto-tenue);
    --nivel-velo: 6%;
    position: relative;
    isolation: isolate;
}

.playerCard.card-blue   { --nivel: var(--pc-primario-alt); --nivel-velo: 14%; }
.playerCard.card-gold   { --nivel: var(--pc-oro); --nivel-velo: 16%; }
.playerCard.card-legend { --nivel: #d9b7ff; --nivel-velo: 20%; }
.playerCard.card-totw   { --nivel: #ffd76a; --nivel-velo: 24%; }

/* Tinte de fondo del nivel, por encima de la superficie del tema. */
.playerCard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(120% 80% at 50% -10%,
            color-mix(in srgb, var(--nivel) var(--nivel-velo), transparent) 0%,
            transparent 62%);
    font-size: 0;
    opacity: 1;
}

/* Galón superior: la banda de color que identifica el nivel. */
.playerCard::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 2;
    border-radius: var(--pc-radio) var(--pc-radio) 0 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--nivel) 22%,
        var(--nivel) 78%,
        transparent 100%);
    transform: none;
    transition: none;
    /* La carta TOTW animaba este mismo pseudo-elemento con un destello en
       diagonal: la animacion arrastraba el galon por toda la carta. */
    animation: none;
    inset-inline: 0;
}

.playerCard:hover::before { transform: none; }

/* El número toma el color del nivel: es la señal principal. */
.playerCard .playerMedia {
    font-family: var(--pc-fuente-datos);
    font-size: clamp(2.1rem, 3.2vw, 2.9rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: var(--nivel);
    text-shadow: 0 0 18px color-mix(in srgb, var(--nivel) 45%, transparent);
}

/* La píldora de posición acompaña al nivel sin robarle protagonismo. */
.playerCard .playerPos {
    color: var(--nivel);
    background: color-mix(in srgb, var(--nivel) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--nivel) 38%, transparent);
    font-family: var(--pc-fuente-ui);
    font-size: var(--pc-t-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.playerCard .playerName {
    font-family: var(--pc-fuente-display);
    font-size: var(--pc-t-lg);
    line-height: 1.15;
    color: var(--pc-texto);
}

.playerCard .playerPositions {
    font-family: var(--pc-fuente-datos);
    font-size: var(--pc-t-2xs);
    letter-spacing: 0.08em;
    color: var(--pc-texto-tenue);
    opacity: 1;
}

/* Marcos por nivel: cuanto más alto, más presencia. */
.playerCard.card-blue   { border-color: color-mix(in srgb, var(--nivel) 46%, transparent) !important; }

.playerCard.card-gold {
    border-color: color-mix(in srgb, var(--nivel) 58%, transparent) !important;
    box-shadow: 0 10px 26px rgba(6, 4, 12, 0.45), 0 0 0 1px color-mix(in srgb, var(--nivel) 22%, transparent) !important;
}

.playerCard.card-legend {
    border-color: color-mix(in srgb, var(--nivel) 68%, transparent) !important;
    box-shadow: 0 12px 30px rgba(6, 4, 12, 0.5), 0 0 24px color-mix(in srgb, var(--nivel) 26%, transparent) !important;
}

.playerCard.card-totw {
    border-color: var(--nivel) !important;
    box-shadow: 0 12px 30px rgba(6, 4, 12, 0.5), 0 0 30px color-mix(in srgb, var(--nivel) 34%, transparent) !important;
}

html.modo-claro .playerCard.card-blue   { --nivel: var(--pc-primario); }
html.modo-claro .playerCard.card-gold   { --nivel: #8a5f00; }
html.modo-claro .playerCard.card-legend { --nivel: var(--pc-primario-hondo); }
html.modo-claro .playerCard.card-totw   { --nivel: #7a5400; }
html.modo-claro .playerCard { --nivel: var(--pc-texto-tenue); }

html.modo-claro .playerCard .playerMedia { text-shadow: none; }
html.modo-claro .playerCard .playerPos {
    background: color-mix(in srgb, var(--nivel) 12%, #ffffff) !important;
    color: var(--nivel) !important;
}

@media (max-width: 480px) {
    .playerCard .playerMedia { font-size: 2rem; }
    .playerCard .playerName { font-size: var(--pc-t-md); }
}

/* La etiqueta de "posición no requerida" va superpuesta al pie de la carta y
   se comía la línea de posiciones. Se le reserva sitio. */
.playerCard:has(.tagProhibidoDraft) { padding-bottom: 46px; }

.playerCard .tagProhibidoDraft {
    max-width: calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El botón de la tarjeta de equipo del draft quedaba en 40 px: por debajo del
   mínimo táctil de 44. */
.btnAbrirDraftEquipo {
    min-height: 44px;
    padding-inline: var(--pc-e3);
}


/* ==========================================================================
   NIVEL LEYENDA (96+) — TRATAMIENTO DE CRACK
   --------------------------------------------------------------------------
   El violeta claro se leía por debajo del dorado de 91-95, así que un 92
   parecía más que un 97. Esta banda pasa a tener número con degradado, doble
   marco, estrella de fondo y un barrido holográfico lento.
   ========================================================================== */
.playerCard.card-legend {
    --nivel: #e3c6ff;
    --nivel-oro: #ffd76a;
    --nivel-velo: 26%;
    border-width: 2px !important;
    border-color: color-mix(in srgb, var(--nivel) 78%, transparent) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--nivel-oro) 30%, transparent) inset,
        0 14px 34px rgba(6, 4, 12, 0.55),
        0 0 30px color-mix(in srgb, var(--nivel) 34%, transparent),
        0 0 60px color-mix(in srgb, var(--nivel-oro) 16%, transparent) !important;
}

/* Fondo: tinte violeta, beso dorado abajo, estrella de marca de agua y la
   banda del barrido, todo en la misma capa. */
.playerCard.card-legend::after {
    background:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.07' d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E")
            no-repeat right -22px bottom -24px / 104px 104px,
        linear-gradient(115deg,
            transparent 38%,
            color-mix(in srgb, #ffffff 22%, transparent) 47%,
            color-mix(in srgb, var(--nivel-oro) 26%, transparent) 52%,
            transparent 61%) 0 0 / 260% 100% no-repeat,
        radial-gradient(120% 90% at 50% -14%,
            color-mix(in srgb, var(--nivel) var(--nivel-velo), transparent) 0%,
            transparent 64%),
        radial-gradient(90% 70% at 50% 118%,
            color-mix(in srgb, var(--nivel-oro) 14%, transparent) 0%,
            transparent 62%);
    opacity: 1;
    animation: pcBarridoLeyenda 4.6s linear infinite;
}

@keyframes pcBarridoLeyenda {
    0%   { background-position: right -22px bottom -24px, 160% 0, 50% -14%, 50% 118%; }
    55%  { background-position: right -22px bottom -24px, -60% 0, 50% -14%, 50% 118%; }
    100% { background-position: right -22px bottom -24px, -60% 0, 50% -14%, 50% 118%; }
}

/* Galón superior bicolor: violeta con centro dorado. */
.playerCard.card-legend::before {
    height: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--nivel) 18%,
        var(--nivel-oro) 50%,
        var(--nivel) 82%,
        transparent 100%);
}

/* El número: más grande y con degradado recortado. */
.playerCard.card-legend .playerMedia {
    font-size: clamp(2.6rem, 4vw, 3.5rem);
    background: linear-gradient(150deg, var(--nivel) 0%, #ffffff 46%, var(--nivel-oro) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 0 12px color-mix(in srgb, var(--nivel) 55%, transparent))
        drop-shadow(0 0 26px color-mix(in srgb, var(--nivel-oro) 30%, transparent));
}

.playerCard.card-legend .playerPos {
    color: #1a1005;
    background: linear-gradient(135deg, var(--nivel), var(--nivel-oro));
    border-color: transparent;
}

.playerCard.card-legend .playerName {
    color: #ffffff;
    text-shadow: 0 0 20px color-mix(in srgb, var(--nivel) 40%, transparent);
}

/* Modo claro: sin degradado recortado (sobre papel se pierde) pero con el
   mismo peso: número grande, marco doble y estrella. */
html.modo-claro .playerCard.card-legend {
    --nivel: #6a1fb8;
    --nivel-oro: #a8760a;
    border-color: color-mix(in srgb, var(--nivel) 65%, transparent) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--nivel-oro) 34%, transparent) inset,
        0 12px 28px rgba(72, 46, 119, 0.18),
        0 0 24px color-mix(in srgb, var(--nivel) 18%, transparent) !important;
}

html.modo-claro .playerCard.card-legend .playerMedia {
    background: none;
    -webkit-text-fill-color: var(--nivel);
    color: var(--nivel);
    filter: none;
}

html.modo-claro .playerCard.card-legend .playerPos {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--nivel), var(--nivel-oro)) !important;
}

html.modo-claro .playerCard.card-legend .playerName {
    color: var(--pc-texto) !important;
    text-shadow: none;
}

/* Quien pide menos movimiento no quiere un barrido en bucle. */
@media (prefers-reduced-motion: reduce) {
    .playerCard.card-legend::after { animation: none; background-position: right -22px bottom -24px, -60% 0, 50% -14%, 50% 118%; }
}


/* ==========================================================================
   TARJETA DE LEYENDA DEL EQUIPO
   --------------------------------------------------------------------------
   Mismo lenguaje que el nivel 96+ de las cartas de jugador: marco doble,
   galón bicolor, estrella de fondo y barrido holográfico. Se reserva para
   quien fundó el proyecto.
   ========================================================================== */
.equipoCard--leyenda {
    --nivel: #e3c6ff;
    --nivel-oro: #ffd76a;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-width: 2px !important;
    border-color: color-mix(in srgb, var(--nivel) 70%, transparent) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--nivel-oro) 28%, transparent) inset,
        0 12px 30px rgba(6, 4, 12, 0.5),
        0 0 28px color-mix(in srgb, var(--nivel) 28%, transparent),
        0 0 56px color-mix(in srgb, var(--nivel-oro) 14%, transparent) !important;
}

.equipoCard--leyenda::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.045' d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E")
            no-repeat right -34px bottom -36px / 110px 110px,
        linear-gradient(115deg,
            transparent 38%,
            color-mix(in srgb, #ffffff 20%, transparent) 47%,
            color-mix(in srgb, var(--nivel-oro) 24%, transparent) 52%,
            transparent 61%) 0 0 / 260% 100% no-repeat,
        radial-gradient(120% 90% at 50% -14%,
            color-mix(in srgb, var(--nivel) 22%, transparent) 0%,
            transparent 64%),
        radial-gradient(90% 70% at 50% 118%,
            color-mix(in srgb, var(--nivel-oro) 12%, transparent) 0%,
            transparent 62%);
    animation: pcBarridoLeyenda 4.6s linear infinite;
}

.equipoCard--leyenda::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    z-index: 2;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--nivel) 18%,
        var(--nivel-oro) 50%,
        var(--nivel) 82%,
        transparent 100%);
}

.equipoCard--leyenda .equipoAvatar {
    background: linear-gradient(150deg, var(--nivel), var(--nivel-oro)) !important;
    color: #1a1005 !important;
    border-color: transparent !important;
    box-shadow: 0 0 22px color-mix(in srgb, var(--nivel) 40%, transparent);
}

.equipoCard--leyenda .equipoInfo h4 {
    background: linear-gradient(150deg, var(--nivel) 0%, #ffffff 46%, var(--nivel-oro) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--nivel) 45%, transparent));
}

.equipoCard--leyenda .rolPrincipal {
    color: var(--nivel-oro) !important;
}

/* Modo claro: sin recorte de degradado, pero con el mismo peso. */
html.modo-claro .equipoCard--leyenda {
    --nivel: #6a1fb8;
    --nivel-oro: #a8760a;
    border-color: color-mix(in srgb, var(--nivel) 60%, transparent) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--nivel-oro) 32%, transparent) inset,
        0 10px 26px rgba(72, 46, 119, 0.16),
        0 0 22px color-mix(in srgb, var(--nivel) 16%, transparent) !important;
}

html.modo-claro .equipoCard--leyenda .equipoInfo h4 {
    background: none;
    -webkit-text-fill-color: var(--nivel);
    color: var(--nivel) !important;
    filter: none;
}

html.modo-claro .equipoCard--leyenda .equipoAvatar {
    color: #ffffff !important;
}

html.modo-claro .equipoCard--leyenda .rolPrincipal { color: #8a5f00 !important; }

@media (prefers-reduced-motion: reduce) {
    .equipoCard--leyenda::after { animation: none; }
}

/* ==========================================================================
   DRAFT · tarjetas de club
   --------------------------------------------------------------------------
   Antes cada opción era una columna alta: escudo grande flotando, nombre,
   media, formación y un botón violeta a todo lo ancho. Tres opciones no
   entraban en una pantalla y, con todo ese espacio, sólo se decían tres
   datos. Ahora la tarjeta es horizontal y en el mismo lugar entra además lo
   que de verdad hace falta para elegir: las figuras del club y cuántos de sus
   jugadores sirven para el puesto que estás buscando.
   La tarjeta entera sigue siendo clickeable, así que el botón sobra.
   ========================================================================== */
.cartaEquipo {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: var(--pc-radio, 16px);
    cursor: pointer;
    background: linear-gradient(158deg, var(--pc-superficie) 0%, var(--pc-fondo-elevado) 100%);
    border: 1px solid var(--pc-borde);
    box-shadow: var(--pc-sombra-2);
    transition: border-color .18s, transform .18s, box-shadow .18s;
}

.cartaEquipo + .cartaEquipo { margin-top: 16px; }

.cartaEquipo:hover,
.cartaEquipo:focus-visible {
    transform: translateY(-2px);
    border-color: var(--pc-primario);
    box-shadow: var(--pc-sombra-3);
}

/* Los clubes de +90 y el equipo de la semana se distinguen por el borde y un
   resplandor apenas insinuado, no por una etiqueta que tape media tarjeta. */
.cartaEquipo--legendaria { border-color: rgba(242, 193, 78, 0.42); }
.cartaEquipo--legendaria::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(120% 80% at 50% 0, rgba(242, 193, 78, 0.13), transparent 62%);
}
.cartaEquipo--totw { border-color: rgba(184, 138, 230, 0.5); }
.cartaEquipo--totw::before {
    background: radial-gradient(120% 80% at 50% 0, rgba(160, 98, 221, 0.18), transparent 62%);
}

/* Sin jugadores para el puesto que falta: se apaga, pero sigue siendo
   clickeable para poder mirar la plantilla. */
.cartaEquipo--sinPosicion { opacity: 0.72; }

.cartaEquipoTag {
    position: absolute;
    top: 0;
    left: 14px;
    transform: translateY(-50%);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    color: #221a05;
    background: linear-gradient(135deg, #f4cf6a, #e0a92a);
    box-shadow: 0 2px 10px rgba(242, 193, 78, 0.34);
    white-space: nowrap;
}
.cartaEquipoTag--totw {
    background: linear-gradient(135deg, var(--pc-primario-alt), var(--pc-primario-hondo));
    color: #fff;
    box-shadow: 0 2px 10px var(--pc-glow);
}

.cartaEquipoCabecera {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.cartaEquipoEscudo {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pc-borde-suave);
    flex-shrink: 0;
}
.cartaEquipoEscudo img { width: 38px; height: 38px; object-fit: contain; }

/* text-transform explícito: si no, hereda el de los títulos y el nombre del
   club sale en versalitas espaciadas. */
.cartaEquipoNombre {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pc-texto);
    overflow-wrap: anywhere;
}

.cartaEquipoFormacion {
    margin-top: 5px;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--pc-texto-tenue);
}

.cartaEquipoMedia {
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 52px;
    padding: 0 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pc-borde);
}
.cartaEquipoMedia b {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
    color: var(--pc-texto);
    font-variant-numeric: tabular-nums;
}
.cartaEquipoMedia span {
    margin-top: 3px;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--pc-texto-tenue);
}
.cartaEquipo--legendaria .cartaEquipoMedia { border-color: rgba(242, 193, 78, 0.4); }
.cartaEquipo--legendaria .cartaEquipoMedia b { color: var(--pc-oro); }

.cartaEquipoFiguras { display: flex; flex-wrap: wrap; gap: 5px; }
.figuraChip {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--pc-texto-suave);
    border: 1px solid var(--pc-borde-suave);
    overflow-wrap: anywhere;
}
.figuraChip b { color: var(--pc-texto); font-weight: 800; font-variant-numeric: tabular-nums; }

.cartaEquipoPie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--pc-borde-suave);
    font-size: 0.74rem;
    font-weight: 700;
}
.cartaEquipoDisponibles { color: var(--pc-exito); overflow-wrap: anywhere; }
.cartaEquipoDisponibles--cero { color: var(--pc-aviso); }
.cartaEquipoIr { color: var(--pc-primario-alt); white-space: nowrap; }

html.modo-claro .cartaEquipoEscudo,
html.modo-claro .cartaEquipoMedia,
html.modo-claro .figuraChip {
    background: rgba(20, 10, 35, 0.045);
}

@media (max-width: 420px) {
    .cartaEquipoCabecera { gap: 9px; }
    .cartaEquipoEscudo { width: 44px; height: 44px; }
    .cartaEquipoEscudo img { width: 32px; height: 32px; }
    .cartaEquipoNombre { font-size: 0.94rem; }
    .cartaEquipoMedia { min-width: 44px; height: 44px; }
    .cartaEquipoMedia b { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cartaEquipo:hover { transform: none; }
}

/* La tarjeta de club es horizontal: escudo + nombre + media necesitan un ancho
   mínimo real. Con el minmax de 150px que había, en un teléfono entraban dos
   columnas de 175px y al nombre le quedaban unos 50px: "Real Madrid 2023"
   terminaba partido letra por letra en vertical. */
#jugadores:has(.cartaEquipo) {
    grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
    gap: 16px;
}

/* 'anywhere' parte la palabra aunque haya lugar más abajo; 'break-word' sólo
   parte cuando de verdad no entra de otra forma. */
.cartaEquipoNombre,
.figuraChip,
.cartaEquipoDisponibles {
    overflow-wrap: break-word;
}

/* Las figuras se tiñen con el mismo nivel que tendrá su carta al abrir el club:
   quien ve un nombre dorado en el resumen se encuentra una carta dorada. Sin
   color los tres chips se leían igual y no se distinguía a la estrella del
   complemento. Se reutiliza --nivel, el mismo token de .playerCard. */
.figuraChip.card-blue   { --nivel: var(--pc-primario-alt); }
.figuraChip.card-gold   { --nivel: var(--pc-oro); }
.figuraChip.card-legend { --nivel: #d9b7ff; }
.figuraChip.card-totw   { --nivel: #ffd76a; }

.figuraChip.card-blue,
.figuraChip.card-gold,
.figuraChip.card-legend,
.figuraChip.card-totw {
    background: color-mix(in srgb, var(--nivel) 13%, transparent);
    border-color: color-mix(in srgb, var(--nivel) 42%, transparent);
    color: color-mix(in srgb, var(--nivel) 78%, var(--pc-texto));
}

.figuraChip.card-blue b,
.figuraChip.card-gold b,
.figuraChip.card-legend b,
.figuraChip.card-totw b {
    color: var(--nivel);
}

/* En modo claro los mismos tonos no llegan al contraste mínimo sobre papel:
   se usan las variantes hondas, igual que hacen las cartas de jugador. */
html.modo-claro .figuraChip.card-blue   { --nivel: var(--pc-primario); }
html.modo-claro .figuraChip.card-gold   { --nivel: #8a5f00; }
html.modo-claro .figuraChip.card-legend { --nivel: #6b3fa8; }
html.modo-claro .figuraChip.card-totw   { --nivel: #8a5f00; }
html.modo-claro .figuraChip.card-blue,
html.modo-claro .figuraChip.card-gold,
html.modo-claro .figuraChip.card-legend,
html.modo-claro .figuraChip.card-totw {
    background: color-mix(in srgb, var(--nivel) 10%, transparent);
    color: color-mix(in srgb, var(--nivel) 88%, var(--pc-texto));
}

/* ==========================================================================
   DRAFT · borde de fuego para los clubes de +90
   --------------------------------------------------------------------------
   Adaptación de ElectricBorder de reactbits.dev: en vez de arcos eléctricos,
   llama. Se construye con la misma técnica que ya usa StarBorder en este
   proyecto (conic-gradient recortado con mask-composite y el ángulo animado
   vía @property --pc-ang), así que no hace falta ni un canvas ni JavaScript.

   Son dos anillos girando a distinta velocidad y en sentidos opuestos: uno
   solo nunca se ve como fuego, se lee como una luz que da vueltas. Con dos
   desfasados las lenguas se cruzan y el borde titila como una llama.
   ========================================================================== */
.cartaEquipo--legendaria {
    isolation: isolate;
}

.cartaEquipo--legendaria::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    padding: 2px;
    background:
        conic-gradient(from var(--pc-ang, 0deg),
            transparent 0deg,
            #ff3d00 28deg,
            #ff8c1a 58deg,
            #ffc14e 84deg,
            #ff6b1a 112deg,
            transparent 150deg,
            transparent 210deg,
            #ff4d00 246deg,
            #ffb347 282deg,
            transparent 320deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: pcGiroBorde 3.2s linear infinite, pcLlamaTitila 1.9s ease-in-out infinite;
    filter: blur(0.4px) saturate(1.15);
}

/* Segundo anillo, más tenue y girando al revés: es el que rompe la simetría. */
.cartaEquipo--legendaria .cartaEquipoCabecera::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: var(--pc-radio, 16px);
    padding: 2px;
    background:
        conic-gradient(from var(--pc-ang, 0deg),
            transparent 0deg,
            #ffd76a 40deg,
            transparent 96deg,
            transparent 250deg,
            #ff5722 290deg,
            transparent 340deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: pcGiroBordeInverso 4.6s linear infinite;
    opacity: 0.75;
    filter: blur(1.4px);
    pointer-events: none;
}

/* La cabecera es 'relative' sólo para anclar ese segundo anillo al borde de la
   tarjeta; el inset negativo lo estira hasta cubrirla entera. */
.cartaEquipo--legendaria .cartaEquipoCabecera {
    position: static;
}

@keyframes pcGiroBordeInverso {
    to { --pc-ang: -360deg; }
}

/* El titileo va en la opacidad y no en el tamaño: mover el borde obligaría a
   recalcular el layout de la tarjeta en cada fotograma. */
@keyframes pcLlamaTitila {
    0%, 100% { opacity: 1; }
    38%      { opacity: 0.72; }
    64%      { opacity: 0.93; }
}

/* Brasa detrás de la tarjeta: da el calor sin ensuciar el borde. */
.cartaEquipo--legendaria {
    box-shadow: var(--pc-sombra-2), 0 0 22px -6px rgba(255, 109, 26, 0.45);
}
.cartaEquipo--legendaria:hover {
    box-shadow: var(--pc-sombra-3), 0 0 30px -4px rgba(255, 109, 26, 0.6);
    border-color: rgba(255, 140, 26, 0.6);
}

/* El equipo de la semana conserva su violeta: si también fuera fuego, los dos
   distintivos se confundirían. */
.cartaEquipo--totw::after { display: none; }
.cartaEquipo--totw .cartaEquipoCabecera::before { display: none; }
.cartaEquipo--totw { box-shadow: var(--pc-sombra-2), 0 0 22px -6px var(--pc-glow); }

@media (prefers-reduced-motion: reduce) {
    .cartaEquipo--legendaria::after,
    .cartaEquipo--legendaria .cartaEquipoCabecera::before {
        animation: none;
    }
}