/* ── Cartas de hito (definidas con el usuario el 8/11; la lógica está en hitos.mjs) ─────────────────
   El RUBRO del hito pinta la carta (carta--tema-*) y el NIVEL define cuánto se mueve (carta--nivel-*):
   Bronce quieta · Plata brillo · Oro borde que se mueve y late · Diamante cristal con doble brillo y chispas ·
   Leyenda tornasolada con chispas. */

/* Carta del club (sin hito), elegida por el usuario el 8/11 (opción A): negra y gris con el amarillo del club en los
   números, quieta y sin brillo. Antes era dorada y se confundía con un nivel "Oro": una carta Plata parecía peor que
   una sin hito. Ahora el dorado y los colores quedan para quien cumple un hito. */
.carta:not([class*="carta--nivel-"]) {
  background: linear-gradient(150deg, #8d8d95, #3b3b41 28%, #1a1a1e 58%, #45454d 82%, #9a9aa2);
  background-size: 100% 100%; animation: none; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55));
}
.carta:not([class*="carta--nivel-"]) .carta__interior { background: radial-gradient(120% 70% at 50% 18%, #26262b 0%, #141416 50%, #0b0b0c 80%); }
.carta:not([class*="carta--nivel-"]) .carta__interior::after { display: none; }
.carta:not([class*="carta--nivel-"]) .carta__franjas { opacity: 0.06; }
.carta:not([class*="carta--nivel-"]) .carta__media b, .carta:not([class*="carta--nivel-"]) .carta__media span { text-shadow: none; }
/* El borde lleva el color del rubro con reflejos del metal del nivel, y es más grueso cuanto más alto el nivel. */
.carta[class*="carta--tema-"] {
  background: linear-gradient(150deg, var(--metal, var(--t-claro)), var(--t-base) 28%, var(--t-oscuro) 58%, var(--t-base) 80%, var(--metal, var(--t-claro)));
  background-size: 300% 300%;
}
.carta--nivel-bronce { --metal: #e7a46c; padding: 3px; }
.carta--nivel-plata { --metal: #f4f7fa; padding: 4px; }
.carta--nivel-oro { --metal: #fff1a0; padding: 5px; }
.carta--nivel-diamante { --metal: #e6fbff; padding: 5px; }
.carta--nivel-leyenda { padding: 6px; }
.carta[class*="carta--tema-"] .carta__interior { background: radial-gradient(120% 70% at 50% 18%, var(--t-fondo) 0%, var(--t-fondo2) 45%, #0b0b0c 78%); }
.carta[class*="carta--tema-"] .carta__franjas { background: repeating-linear-gradient(135deg, var(--t-base) 0 14px, transparent 14px 28px); }
.carta[class*="carta--tema-"] .carta__media,
.carta[class*="carta--tema-"] .carta__pro,
.carta[class*="carta--tema-"] .carta__atributos span { color: var(--t-acento); }
.carta[class*="carta--tema-"] .carta__media b,
.carta[class*="carta--tema-"] .carta__media span { text-shadow: 0 0 14px var(--t-brillo); }
.carta[class*="carta--tema-"] .carta__nombre { border-color: var(--t-linea); }
.carta[class*="carta--tema-"] .carta__atributos div:nth-child(even) { border-left-color: var(--t-linea); }
.carta[class*="carta--tema-"] .carta__interior::after { background: linear-gradient(115deg, transparent 40%, var(--t-reflejo) 50%, transparent 60%); }
.carta[class*="carta--tema-"] .carta__interior::before { background: radial-gradient(circle at var(--luz, 50%) 30%, var(--t-reflejo), transparent 55%); }

/* ⚽ Goleador: rojo fuego */
.carta--tema-goles {
  --t-claro: #ffc2a8; --t-base: #f0412c; --t-oscuro: #6e0f08; --t-acento: #ff7a55; --t-fondo: #45120a; --t-fondo2: #1c0806;
  --t-brillo: rgba(255, 90, 50, 0.45); --t-linea: rgba(255, 110, 70, 0.45); --t-reflejo: rgba(255, 190, 150, 0.22); --t-sombra: 255, 70, 40;
}
/* 🎯 Asistidor: celeste eléctrico */
.carta--tema-asistencias {
  --t-claro: #d4f6ff; --t-base: #25b9f2; --t-oscuro: #0a3f5e; --t-acento: #66d6ff; --t-fondo: #0b3247; --t-fondo2: #08151d;
  --t-brillo: rgba(60, 190, 255, 0.45); --t-linea: rgba(90, 200, 255, 0.45); --t-reflejo: rgba(190, 240, 255, 0.22); --t-sombra: 40, 180, 240;
}
/* 🔗 Pasador ("Enganche" en Enganche Sur, ver hitoPases en la ficha): fucsia (pases dados; sumado el 10/11, elegido entre fucsia, naranja y turquesa porque es el único tono
   lejos de los otros seis) */
.carta--tema-pases {
  --t-claro: #ffc4e1; --t-base: #ff3d9a; --t-oscuro: #6e0a3c; --t-acento: #ff7ab8; --t-fondo: #47102c; --t-fondo2: #1d0712;
  --t-brillo: rgba(255, 60, 155, 0.45); --t-linea: rgba(255, 90, 170, 0.45); --t-reflejo: rgba(255, 200, 230, 0.22); --t-sombra: 255, 60, 155;
}
/* 🛡️ Muralla: verde esmeralda (robos; en arqueros, vallas invictas) */
.carta--tema-robos {
  --t-claro: #c2f7d6; --t-base: #22c26c; --t-oscuro: #0a4d2b; --t-acento: #55e394; --t-fondo: #0c3822; --t-fondo2: #07170f;
  --t-brillo: rgba(40, 210, 120, 0.45); --t-linea: rgba(70, 220, 140, 0.45); --t-reflejo: rgba(190, 255, 215, 0.2); --t-sombra: 30, 200, 110;
}
/* ⭐ Figura: blanco perla */
.carta--tema-figura {
  --t-claro: #ffffff; --t-base: #e9e4d6; --t-oscuro: #8a8475; --t-acento: #f6f1e4; --t-fondo: #34312b; --t-fondo2: #141311;
  --t-brillo: rgba(255, 250, 235, 0.4); --t-linea: rgba(255, 250, 235, 0.4); --t-reflejo: rgba(255, 255, 255, 0.24); --t-sombra: 240, 235, 220;
}
/* 🧤 Guardián: violeta (vallas invictas de los arqueros) */
.carta--tema-vallas {
  --t-claro: #e3d6ff; --t-base: #9a6bff; --t-oscuro: #35176e; --t-acento: #b897ff; --t-fondo: #24144a; --t-fondo2: #0f0a1e;
  --t-brillo: rgba(160, 110, 255, 0.45); --t-linea: rgba(170, 130, 255, 0.45); --t-reflejo: rgba(220, 200, 255, 0.22); --t-sombra: 150, 100, 255;
}
/* 🏟️ Histórico: los dos colores del club, como el escudo (partidos con el club). Borde a rayas como la franja de la web. */
.carta--tema-partidos {
  --t-claro: var(--principal-claro); --t-base: var(--principal); --t-oscuro: var(--secundario); --t-acento: var(--principal); --t-fondo: var(--principal-fondo); --t-fondo2: #0b0b0c;
  --t-brillo: rgb(var(--principal-rgb) / 0.4); --t-linea: rgb(var(--principal-rgb) / 0.55); --t-reflejo: rgb(var(--principal-claro-rgb) / 0.18); --t-sombra: var(--principal-rgb-c);
}
.carta.carta--tema-partidos { background: repeating-linear-gradient(135deg, var(--principal) 0 12px, var(--secundario) 12px 24px); background-size: 200% 200%; }
.carta--tema-partidos .carta__franjas { opacity: 0.16; }

/* Carta combinada (opción B): dos hitos del mismo nivel. El borde va del color del primero al del segundo, las rayas
   del fondo y la columna derecha de atributos toman el color del segundo. carta--tema2-* da ese segundo color. */
.carta--tema2-goles { --t2-claro: #ffc2a8; --t2-base: #f0412c; --t2-oscuro: #6e0f08; --t2-acento: #ff7a55; --t2-fondo: #45120a; }
.carta--tema2-asistencias { --t2-claro: #d4f6ff; --t2-base: #25b9f2; --t2-oscuro: #0a3f5e; --t2-acento: #66d6ff; --t2-fondo: #0b3247; }
.carta--tema2-pases { --t2-claro: #ffc4e1; --t2-base: #ff3d9a; --t2-oscuro: #6e0a3c; --t2-acento: #ff7ab8; --t2-fondo: #47102c; }
.carta--tema2-robos { --t2-claro: #c2f7d6; --t2-base: #22c26c; --t2-oscuro: #0a4d2b; --t2-acento: #55e394; --t2-fondo: #0c3822; }
.carta--tema2-figura { --t2-claro: #ffffff; --t2-base: #e9e4d6; --t2-oscuro: #8a8475; --t2-acento: #f6f1e4; --t2-fondo: #34312b; }
.carta--tema2-vallas { --t2-claro: #e3d6ff; --t2-base: #9a6bff; --t2-oscuro: #35176e; --t2-acento: #b897ff; --t2-fondo: #24144a; }
.carta--tema2-partidos { --t2-claro: var(--principal-claro); --t2-base: var(--principal); --t2-oscuro: var(--principal-fondo2); --t2-acento: var(--principal); --t2-fondo: var(--principal-fondo); }
.carta.carta--doble {
  background: linear-gradient(150deg, var(--metal, var(--t-claro)), var(--t-base) 16%, var(--t-oscuro) 47%, var(--t2-oscuro) 53%, var(--t2-base) 84%, var(--metal, var(--t2-claro)));
  background-size: 100% 100%;
}
.carta.carta--doble .carta__interior {
  background: radial-gradient(110% 55% at 30% 10%, var(--t-fondo), transparent 70%), radial-gradient(110% 55% at 70% 100%, var(--t2-fondo), transparent 70%), #0b0b0c;
}
.carta.carta--doble .carta__franjas { background: repeating-linear-gradient(135deg, var(--t2-base) 0 14px, transparent 14px 28px); opacity: 0.14; }
.carta.carta--doble .carta__pro { color: var(--t2-acento); }

/* Carta total: 3 hitos o más del mismo nivel. El borde y las rayas llevan todos los colores (--borde-total y
   --franjas-total los arma el JS con los rubros que tenga) y el fondo es neutro para que no gane ninguno. */
.carta.carta--total { background: var(--borde-total); background-size: 100% 100%; }
.carta.carta--total .carta__interior { background: radial-gradient(120% 70% at 50% 18%, #2b2b35 0%, #121218 50%, #0b0b0c 80%); }
.carta.carta--total .carta__franjas { background: var(--franjas-total); opacity: 0.22; }
.carta.carta--total .carta__media, .carta.carta--total .carta__pro { color: #fff; }
.carta.carta--total .carta__media b, .carta.carta--total .carta__media span { text-shadow: 0 0 14px rgba(255, 255, 255, 0.3); }
.carta.carta--total .carta__nombre { border-color: rgba(255, 255, 255, 0.3); }
.carta.carta--total .carta__atributos div:nth-child(even) { border-left-color: rgba(255, 255, 255, 0.25); }
.carta.carta--total .carta__atributos span { color: #b9b9c2; }

/* En la combinada y en la total, cada atributo toma el color del rubro del hito (GOL rojo, ASI celeste…). */
.carta .carta__atributos .attr--goles span { color: #ff7a55; }
.carta .carta__atributos .attr--asistencias span { color: #66d6ff; }
.carta .carta__atributos .attr--pases span { color: #ff7ab8; }
.carta .carta__atributos .attr--robos span { color: #55e394; }
.carta .carta__atributos .attr--figura span { color: #f6f1e4; }
.carta .carta__atributos .attr--vallas span { color: #b897ff; }

/* Rótulo del hito en el pie de la carta, con el color del metal del nivel. */
.carta__hito { font-weight: 800; font-size: 5cqw; letter-spacing: 0.1em; }
.carta--nivel-bronce .carta__hito { color: #e09a5f; }
.carta--nivel-plata .carta__hito { color: #dfe5ec; }
.carta--nivel-oro .carta__hito { color: #f7d116; }
.carta--nivel-diamante .carta__hito { color: #bff4ff; text-shadow: 0 0 8px rgba(160, 235, 255, 0.6); }
.carta--nivel-leyenda .carta__hito {
  background: linear-gradient(90deg, #8ff3ff, #f7a8ff, #fff3a6, #8ff3ff); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo-texto 4s linear infinite;
}
@keyframes holo-texto { to { background-position: 200% 0; } }

/* 🥉 Bronce: el color nuevo, quieta. */
.carta.carta--nivel-bronce { animation: none; filter: drop-shadow(0 16px 24px rgba(var(--t-sombra), 0.18)); }
.carta--nivel-bronce .carta__interior::after { display: none; }

/* 🥈 Plata: un brillo la cruza cada tanto; el borde queda quieto. */
.carta.carta--nivel-plata { animation: none; filter: drop-shadow(0 16px 28px rgba(var(--t-sombra), 0.25)); }
.carta--nivel-plata .carta__interior::after { animation: brillo-carta 5s ease-in-out infinite; }

/* 🥇 Oro: el borde se mueve, el resplandor late y el brillo pasa más seguido. */
.carta.carta--nivel-oro { animation: oro-borde 4s ease-in-out infinite alternate, hito-late 2.4s ease-in-out infinite; }
.carta--nivel-oro .carta__interior::after { animation: brillo-carta 3.2s ease-in-out infinite; }
@keyframes hito-late {
  0%, 100% { filter: drop-shadow(0 16px 24px rgba(var(--t-sombra), 0.25)); }
  50% { filter: drop-shadow(0 16px 40px rgba(var(--t-sombra), 0.6)); }
}

/* 💠 Diamante: borde de cristal (blanco y celeste sobre el color del rubro), resplandor que late, dos brillos
   seguidos y chispas. */
.carta.carta--nivel-diamante { animation: oro-borde 3.4s ease-in-out infinite alternate, hito-late 2.4s ease-in-out infinite; }
.carta.carta--nivel-diamante:not(.carta--doble):not(.carta--total) {
  background: linear-gradient(150deg, #ffffff, var(--t-base) 20%, #e6fbff 34%, var(--t-oscuro) 50%, #bff4ff 64%, var(--t-base) 80%, #ffffff);
  background-size: 300% 300%;
}
.carta.carta--nivel-diamante .carta__interior::after {
  background: linear-gradient(115deg, transparent 34%, rgba(230, 251, 255, 0.3) 42%, transparent 48%, transparent 54%, rgba(230, 251, 255, 0.22) 60%, transparent 66%);
  animation: brillo-carta 2.8s ease-in-out infinite;
}

/* 💎 Leyenda: fondo oscuro con reflejo tornasolado que sigue al mouse o al dedo, borde tornasol y chispas. */
.carta.carta--nivel-leyenda {
  background: linear-gradient(120deg, var(--t-claro), #8ff3ff 18%, var(--t-base) 34%, #f7a8ff 52%, var(--t-oscuro) 66%, #fff3a6 82%, var(--t-claro));
  background-size: 300% 300%;
  animation: oro-borde 3s ease-in-out infinite alternate, hito-late 2.4s ease-in-out infinite;
}
.carta.carta--nivel-leyenda .carta__interior { background: radial-gradient(120% 70% at 50% 18%, var(--t-fondo) 0%, #0a0a0f 60%, #050507 100%); }
.carta.carta--nivel-leyenda .carta__interior::before {
  opacity: 0.55; mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--luz, 50%) 35%, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(115deg, transparent 20%, rgba(143, 243, 255, 0.35) 35%, rgba(247, 168, 255, 0.35) 50%, rgba(255, 243, 166, 0.35) 65%, transparent 80%);
  background-size: 100% 100%, 250% 250%;
  animation: holo-foil 6s ease-in-out infinite alternate;
}
.carta.carta--nivel-leyenda:hover .carta__interior::before, .carta.carta--nivel-leyenda.carta--tocada .carta__interior::before { opacity: 0.85; }
@keyframes holo-foil { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
.carta__chispas { display: none; }
.carta--nivel-diamante .carta__chispas,
.carta--nivel-leyenda .carta__chispas {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 82% 12%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 70% 46%, #fff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 22% 62%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 70%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 40% 84%, #fff 0 1px, transparent 1.8px);
  animation: chispas 2.6s ease-in-out infinite;
}
.carta--nivel-diamante .carta__chispas::after,
.carta--nivel-leyenda .carta__chispas::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 60% 22%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 15% 44%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 78% 58%, #fff 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 55% 76%, #fff 0 1px, transparent 1.8px);
  animation: chispas 2.6s ease-in-out 1.3s infinite;
}
@keyframes chispas { 0%, 100% { opacity: 0; transform: translateY(4px); } 50% { opacity: 0.9; transform: translateY(-4px); } }

/* Medallitas de todos los hitos, debajo de la carta. */
.medallas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.medalla {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 6px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--linea); font: 600 12px/1 var(--cuerpo); color: var(--texto); white-space: nowrap;
}
.medalla i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.medalla--bronce i { background: #e09a5f; } .medalla--plata i { background: #dfe5ec; }
.medalla--oro i { background: #f7d116; } .medalla--diamante i { background: #bff4ff; box-shadow: 0 0 6px #8fe9ff; } .medalla--leyenda i { background: conic-gradient(#8ff3ff, #f7a8ff, #fff3a6, #8ff3ff); }

@media (prefers-reduced-motion: reduce) {
  .carta[class*="carta--nivel-"], .carta[class*="carta--nivel-"] .carta__interior::after,
  .carta[class*="carta--nivel-"] .carta__interior::before, .carta__chispas, .carta__chispas::after, .carta__hito { animation: none !important; }
}

/* ── Perfil: pestaña "Hitos" ─────────────────────────────────── */
.perfil__carta .medallas { max-width: 340px; }
.hitos-lista, .insignias-hito { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.hito-fila { padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--linea); }
.hito-fila__cabeza { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.hito-fila__cabeza > span:first-child { flex: 1; min-width: 0; }
.hito-fila__cabeza small { color: var(--tenue); font-weight: 500; font-size: 12px; }
.hito-fila__cabeza > b { font: 800 22px/1 var(--titulos); font-variant-numeric: tabular-nums; }
.hito-fila__nivel { padding: 3px 8px; border-radius: 999px; font: 700 12px/1 var(--cuerpo); background: var(--panel-2); border: 1px solid var(--linea); white-space: nowrap; }
.hito-fila__nivel--bronce { color: #e7a46c; } .hito-fila__nivel--plata { color: #e8edf2; } .hito-fila__nivel--oro { color: #f7d116; }
.hito-fila__nivel--diamante { color: #bff4ff; } .hito-fila__nivel--leyenda { color: #f7a8ff; }
.hito-fila__barra { height: 7px; margin: 8px 0 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.hito-fila__barra i { display: block; height: 100%; border-radius: inherit; background: var(--color); box-shadow: 0 0 10px var(--color); }
.hito-fila__sigue { color: var(--tenue); font-size: 13px; }
.hito-fila__sigue b { color: var(--texto); }
.insignias-hito { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.insignia-hito { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: var(--panel); border: 1px solid var(--linea); }
.insignia-hito__icono { font-size: 24px; line-height: 1; }
.insignia-hito b { display: block; font-size: 14px; }
.insignia-hito small { display: block; color: var(--principal); font-weight: 700; font-size: 13px; }
.insignia-hito--bloqueada { opacity: 0.5; }
.insignia-hito--bloqueada .insignia-hito__icono { filter: grayscale(1); }
.insignia-hito--bloqueada small { color: var(--tenue); font-weight: 500; font-size: 12px; }
@media (max-width: 760px) {
  .perfil[data-tab="hitos"] .perfil-seccion:not([data-seccion="hitos"]) { display: none; }
  .perfil[data-tab="stats"] .perfil-seccion[data-seccion="hitos"],
  .perfil[data-tab="puesto"] .perfil-seccion[data-seccion="hitos"],
  .perfil[data-tab="partidos"] .perfil-seccion[data-seccion="hitos"] { display: none; }
  .perfil__carta .medallas { max-width: 92vw; }
}

/* Plantel: medallitas de nivel en cada ficha. */
.ficha__hitos { grid-column: 1 / -1; margin-top: 2px; font-size: 13px; letter-spacing: 1px; }

/* ── Pestaña "Hitos y cartas" (#hitos): guía con cartas de muestra ── */
.guia__bajada { max-width: 760px; margin: -6px 0 6px; color: var(--tenue); font-size: 16px; }
.guia__bajada b { color: var(--texto); }
.guia__sub { margin-top: 38px; font-size: 24px; }
.guia__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px 18px; margin-top: 16px; }
.guia-carta { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.guia-carta .carta { width: 200px; }
.guia-carta .carta__hito { font-size: 5.2cqw; }
/* El rótulo de la combinada es largo ("BRONCE · 500 PASES + 25 ROBOS"): más chico en todas las cartas, no solo en la guía. */
.carta--doble .carta__hito, .guia-carta .carta--doble .carta__hito { font-size: 4.3cqw; letter-spacing: 0.03em; }
.guia-carta figcaption { max-width: 240px; color: var(--tenue); font-size: 13.5px; }
.guia-carta figcaption b { display: block; margin-bottom: 2px; color: var(--texto); font: 700 18px/1.2 var(--titulos); letter-spacing: 0.04em; text-transform: uppercase; }
.guia__regla { max-width: 760px; margin: 8px 0 0; padding: 12px 14px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); border-left: 4px solid var(--principal); color: var(--tenue); }
.guia__regla b { color: var(--texto); }
.guia-metas th, .guia-metas td { text-align: center; }
.guia-metas tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
.guia-metas tbody th small { display: block; margin-left: 18px; color: var(--tenue); font-weight: 500; font-size: 12px; }
.guia-metas td { font: 700 18px/1 var(--titulos); font-variant-numeric: tabular-nums; }
.guia-metas__punto { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--color); box-shadow: 0 0 8px var(--color); }
.guia-metas__nivel span { display: block; font-size: 11px; }
.guia-metas__nivel--bronce { color: #e7a46c; } .guia-metas__nivel--plata { color: #e8edf2; } .guia-metas__nivel--oro { color: #f7d116; }
.guia-metas__nivel--diamante { color: #bff4ff; } .guia-metas__nivel--leyenda { color: #f7a8ff; }
.guia-insignias { margin-top: 12px; }
.guia-insignias .guia-insignias__como { color: var(--tenue); font-weight: 500; font-size: 12.5px; }
.guia-plantel { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.guia-plantel__fila { display: grid; grid-template-columns: minmax(170px, 1fr) 2fr minmax(220px, 1.3fr); gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--linea); }
.guia-plantel__nombre .link-jugador { font-weight: 700; }
.guia-plantel__nombre small { display: block; color: var(--tenue); font-size: 12px; }
.guia-plantel__medallas .medallas { justify-content: flex-start; }
.guia-plantel__proximo { color: var(--tenue); font-size: 13px; }
.guia-plantel__proximo b { color: var(--principal); }
@media (max-width: 760px) {
  .guia__grilla { grid-template-columns: repeat(2, 1fr); gap: 22px 10px; }
  .guia-carta .carta { width: min(165px, 43vw); }
  .guia-carta figcaption { font-size: 12.5px; }
  .guia-carta figcaption b { font-size: 15px; }
  .guia-plantel__fila { grid-template-columns: 1fr; gap: 6px; }
  .guia-metas th, .guia-metas td { padding-left: 3px; padding-right: 3px; }
  .guia-metas tbody th { white-space: normal; font-size: 12.5px; line-height: 1.25; }
  .guia-metas td { font-size: 15px; }
  .guia-metas__punto { width: 8px; height: 8px; margin-right: 5px; }
  .guia-metas tbody th small { display: none; }
  .guia-metas__nivel span { display: none; }
}