/* =========================================================
   PANTALLAS
   ========================================================= */

/* =========================================================
   HOME — composición editorial, no un grid de tarjetas
   ========================================================= */

.home{
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.home-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.brand{ display:flex; align-items:center; gap: 12px; }
/* Numero de paso: rotulo de prensa, en oro y con el Didone. */
.t-step{
  font-family: var(--font-num);
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .06em;
  margin-right: 6px;
}

.brand-mark{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--gold);
  color: #14110a;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: 800;
}
.brand-name{
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}

.home-main{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: stretch;
  gap: 0;
}
@media (max-width: 900px){ .home-main{ grid-template-columns: 1fr; } }

.home-copy{
  padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  border-right: 1px solid var(--line);
}
@media (max-width: 900px){ .home-copy{ border-right: none; border-bottom: 1px solid var(--line); } }

.home-title{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .82;
  font-size: var(--type-d4);
  letter-spacing: -.02em;
}
.home-title span{ display:block; }
.home-title .accent{ color: var(--gold); }

.home-sub{
  font-size: var(--type-d1);
  color: var(--muted);
  max-width: 44ch;
}

.home-stats{ display:flex; gap: 28px; flex-wrap: wrap; }
.home-stat .v{
  font-family: var(--font-num);
  font-size: var(--type-3xl);
  font-weight: 800;
  line-height: 1;
}
.home-stat .k{
  font-size: var(--type-3xs);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted);
  margin-top: 4px;
}

/* Muro de identities: el bloque de texto gigante del concepto */
.home-wall{
  position: relative;
  /* Semiopaco a propósito: deja pasar el fondo de video,
     para que la textura llegue también a esta columna. */
  background:
    linear-gradient(180deg, rgba(10,10,10,.62), rgba(10,10,10,.9)),
    repeating-linear-gradient(90deg, #141414 0 42px, #101010 42px 84px);
  background-blend-mode: normal;
  display: flex;
  align-items: center;
  padding: 40px clamp(24px, 4vw, 48px);
  overflow: hidden;
}
.home-wall::after{
  content:"";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 400px at 70% 40%, rgba(79,191,127,.09), transparent 65%);
  pointer-events: none;
}
.wall-block{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .78; }
.wall-block .l1{ font-size: var(--type-d3); }
.wall-block .l2{ font-size: var(--type-d3); color: var(--muted); }
.wall-block .l3{ font-size: var(--type-d2); color: var(--gold); letter-spacing: .04em; }

.home-foot{
  /* El pie tiene que dejar libre la franja de abajo: ahí va el
     crédito del video de fondo y el botón para apagarlo, que son
     fijos. Sin este margen, el crédito se sienta encima del texto
     en cualquier pantalla corta. */
  padding: var(--s4) var(--gutter) calc(var(--s4) + var(--tap));
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================
   LOBBY
   ========================================================= */

.lobby-hero{
  padding: clamp(28px, 5vw, 56px) 0 28px;
  border-bottom: 1px solid var(--line);
}
.lobby-name{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .88;
  font-size: var(--type-d3);
}
.lobby-meta{ display:flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
.lobby-meta .m .v{ font-family: var(--font-num); font-size: var(--type-3xl); font-weight: 800; line-height: 1; }
.lobby-meta .m .k{ font-size: var(--type-3xs); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }

/* Lista de jugadores: fila de transmisión, no tarjeta de perfil */
.player-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  transition: background var(--speed) var(--ease);
}
.player-row:last-child{ border-bottom: none; }
.player-row:hover{ background: rgba(242,237,224,.025); }
.player-row.me{ background: rgba(79,191,127,.09); box-shadow: inset 3px 0 0 var(--grass); }
.player-row.offline{ opacity: .45; }

.pr-avatar{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  font-family: var(--font-num);
  font-size: var(--type-md);
  font-weight: 800;
  color: #04150b;
}
.pr-name{ font-weight: 600; font-size: var(--type-md); }
.pr-team{
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}
.pr-team.blank{ color: var(--muted); font-style: italic; text-transform: none; font-family: var(--font-ui); font-size: var(--type-md); }

.status{ display:inline-flex; align-items:center; gap: 6px; font-size: var(--type-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.status-ready{ color: var(--grass); }
.status-wait{ color: var(--muted); }
.status-online{ color: var(--blue); }

/* =========================================================
   SUBASTA — la gala
   ========================================================= */

.auction{
  display: grid;
  grid-template-columns: 1fr 340px;
  /* La barra de puja es fija abajo, así que el escenario tiene
     que dejarle lugar: sin este padding el último elemento de la
     lista queda tapado por los botones. */
  padding-bottom: var(--auction-bar-h, 210px);
  min-height: 100vh;
  min-height: 100dvh;
}
@media (max-width: 1000px){
  .auction{ grid-template-columns: 1fr; padding-bottom: var(--auction-bar-h, 250px); }
}

.auction-stage{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  border-right: 1px solid var(--line);
  min-width: 0;
}
@media (max-width: 1000px){ .auction-stage{ border-right: none; padding-bottom: var(--s6); } }

/* --- marquesina --- */
.auction-marquee{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
@media (max-width: 420px){
  .auction-marquee .lot{ font-size: var(--type-lg); }
  .auction-marquee__pills .pill{ padding: 4px var(--s2); font-size: 10px; }
}
@media (min-width: 421px){
  .auction-marquee__pills{ flex-wrap: wrap; }
}
.auction-marquee .lot{
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.auction-marquee .lot b{ color: var(--gold); }
.auction-marquee__pills{ display: flex; gap: var(--s2); }

/* --- progreso --- */
.auction-progress{ margin-bottom: var(--s5); }
.auction-progress__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s2);
}
.progress-bar{
  height: 3px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress-bar i{
  display: block;
  height: 100%;
  background: var(--gold);
  transition: width var(--t-slow) var(--ease);
}

/* =========================================================
   LA FICHA DEL JUGADOR — el héroe de la pantalla
   ========================================================= */
.ficha{
  display: grid;
  gap: var(--s5);
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "retrato cuerpo"
    "stats   stats"
    "valor   valor";
  align-items: center;
  background:
    linear-gradient(180deg, rgba(242,237,224,.03), transparent 46%),
    var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s5);
  box-shadow: var(--shadow-2), var(--edge-light);
}
.ficha__retrato{ grid-area: retrato; }
.ficha__retrato .retrato{
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2), 0 0 0 1px var(--line-2);
}

.ficha__cuerpo{ grid-area: cuerpo; min-width: 0; }
.ficha__cifras{
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}
.ficha__ovr{
  font-size: var(--type-2xl);
  color: var(--gold);
  line-height: 1;
}

/* El nombre del jugador en Didone: es el rótulo de la ficha. */
.ficha__nombre{
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 54px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 var(--s2);
  overflow-wrap: anywhere;
}
.ficha__meta{
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  font-size: var(--type-sm);
  color: var(--muted);
}
.ficha__pais{ font-weight: 600; color: var(--text); }
.ficha__club{ font-style: italic; }

/* --- los seis atributos --- */
.ficha__stats{
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.stat{ text-align: center; min-width: 0; }
.stat__v{
  font-family: var(--font-num);
  font-size: var(--type-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat__k{
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--muted);
  margin: 3px 0 5px;
}
.stat__bar{
  height: 2px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.stat__bar i{ display: block; height: 100%; background: var(--muted); }
.stat--top .stat__v{ color: var(--gold); }
.stat--top .stat__bar i{ background: var(--gold); }
.stat--medio .stat__v{ color: var(--text); }
.stat--medio .stat__bar i{ background: var(--text); }
.stat--bajo .stat__v{ color: var(--muted); }
.stat--bajo .stat__bar i{ background: var(--faint); }

/* --- valor --- */
.ficha__valor{
  grid-area: valor;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.ficha__valorItem{ min-width: 0; }
.ficha__base{ font-size: var(--type-2xl); color: var(--text); line-height: 1.1; }
.ficha__mercado{ font-size: var(--type-2xl); color: var(--muted); line-height: 1.1; }
.ficha__pot{ font-size: var(--type-2xl); color: var(--muted); line-height: 1.1; }
.ficha__nota{
  font-size: 10.5px;
  line-height: 1.3;
  margin-top: 3px;
  color: var(--muted);
}
.ficha__valorItem.es-ganga .ficha__mercado,
.ficha__valorItem.es-ganga .ficha__nota{ color: var(--grass); }
.ficha__valorItem.es-caro .ficha__mercado,
.ficha__valorItem.es-caro .ficha__nota{ color: var(--red-tint); }

/* =========================================================
   LA BARRA DE PUJA — fija, abajo, en la zona del pulgar
   ========================================================= */
.auction-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-raise);
  padding: var(--s2) var(--gutter) calc(var(--s2) + var(--safe-bottom));
  background: linear-gradient(180deg, rgba(12,11,9,.86), rgba(12,11,9,.98) 32%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -18px 44px rgba(0,0,0,.7);
}
@media (min-width: 1001px){
  /* En escritorio la barra ocupa lo que hay a la izquierda de la
     columna de equipos, para no tapar la actividad. */
  .auction-bar{ right: 340px; }
}

.auction-bar__live{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.auction-bar__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s2);
}
.auction-bar__price{ min-width: 0; }
.lot-price{
  font-family: var(--font-num);
  font-size: clamp(38px, 7vw, 66px);
  font-weight: 800;
  line-height: .8;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.lot-price.bump{ animation: priceBump var(--t-base) var(--ease-snap); }
@keyframes priceBump{
  0%{ transform: scale(1); }
  30%{ transform: scale(1.07); }
  100%{ transform: scale(1); }
}
.auction-bar__leader{
  font-size: var(--type-xs);
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.2;
}
.auction-bar__leader b{ font-weight: 700; }

.auction-bar__clock{ flex-shrink: 0; text-align: right; }
.clock{
  font-family: var(--font-num);
  font-size: 32px;
  font-weight: 800;
  line-height: .85;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  transition: color var(--t-base) var(--ease);
}
.clock.is-proximo{ color: var(--gold); }
.clock.is-critico{ color: var(--red-tint); animation: latido 1s var(--ease-in-out) infinite; }
@keyframes latido{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .45; }
}
.clock-bar{
  width: 120px;
  height: 3px;
  margin-top: 6px;
  margin-left: auto;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.clock-bar i{
  display: block;
  height: 100%;
  background: var(--grass);
  transition: width 200ms linear, background var(--t-base) var(--ease);
}
.clock-bar.is-proximo i{ background: var(--gold); }
.clock-bar.is-critico i{ background: var(--red); }
.clock-bar__label{
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
  white-space: nowrap;
}
.clock.is-critico + .clock-bar + .clock-bar__label{ color: var(--red-tint); }

/* --- el tope y mi dinero --- */
.auction-bar__cap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 6px 0;
  margin-bottom: 6px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.capLine__item{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.capLine__item:first-child{ align-items: flex-start; }
.capLine__k{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.capLine__v{
  font-size: var(--type-md);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.capLine__item:first-child .capLine__v{ color: var(--gold); }
.capLine__sep{ width: 1px; height: 20px; background: var(--line); flex-shrink: 0; }
@media (max-width: 420px){
  .auction-bar__cap{ flex-wrap: wrap; }
  .capLine__k{ font-size: 8.5px; }
}

/* --- botones de puja --- */
.bid-controls{ display: flex; flex-direction: column; gap: 6px; }
.bid-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.bid-row--dos{ grid-template-columns: 1.2fr 1fr; }
.bid-row__dos{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

.bid-btn{
  min-height: var(--tap);
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.bid-btn:hover:not(:disabled){ background: var(--card-2); border-color: #554e3d; }
.bid-btn:active:not(:disabled){ transform: translateY(1px); }
.bid-btn:disabled{ opacity: .35; cursor: not-allowed; }
.bid-btn__monto{
  font-family: var(--font-num);
  font-size: var(--type-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.bid-btn__delta{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bid-btn--step .bid-btn__monto{ color: var(--gold); }
/* El botón de "todo lo que te queda" es el que más dinero
   compromete: se ve distinto, no solo más grande. */
.bid-btn--max{
  background: var(--gold);
  border-color: var(--gold);
  color: #14110a;
  box-shadow: 0 3px 14px rgba(212,175,106,.24);
}
.bid-btn--max:hover:not(:disabled){ background: var(--gold-live); border-color: var(--gold-live); }
.bid-btn--max .bid-btn__monto{ color: #14110a; }
.bid-btn--max .bid-btn__delta{ color: rgba(20,17,10,.7); }
.bid-btn.bump{ animation: latidoGolpe var(--t-base) var(--ease-snap); }
@keyframes latidoGolpe{
  0%{ transform: scale(1); }
  40%{ transform: scale(.94); }
  100%{ transform: scale(1); }
}
.bid-sec{ font-size: var(--type-sm); }

/* Mensaje de bloqueo: dice por qué, no sólo que no */
.bid-bloqueo{
  padding: var(--s2) var(--s3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  text-align: center;
  font-size: var(--type-sm);
  color: var(--muted);
  background: rgba(242,237,224,.02);
}

/* =========================================================
   MI EQUIPO — tira de números
   ========================================================= */
/* Cuando la pantalla de subasta esta montada, su barra ocupa el
   pie: el crédito del video tiene que subir por encima o queda
   tocando los botones de puja. */
body.has-auction-bar .video-nota{
  bottom: calc(var(--auction-bar-h, 200px) + var(--s2));
}

.mystrip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.mystrip .s{ min-width: 0; }
.mystrip .v{
  font-family: var(--font-num);
  font-size: var(--type-xl);
  font-weight: 800;
  line-height: 1.05;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mystrip .k{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 420px){
  .mystrip{ grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s4); }
}

/* =========================================================
   COLUMNA DE EQUIPOS
   ========================================================= */
.auction-side{
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 0;
}
.side-block{ padding: var(--s4) var(--gutter); border-bottom: 1px solid var(--line); }
.side-title{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  font-size: var(--type-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}
.side-title--sep{ padding: var(--s4) var(--gutter) 0; margin-bottom: 0; }

.trow{
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  min-height: var(--tap);
}
.trow:last-child{ border-bottom: none; }
.trow__cuerpo{ flex: 1; min-width: 0; }
.trow .tn{
  font-size: var(--type-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trow__yo{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grass);
}
.trow .tc{
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trow__dinero{ text-align: right; flex-shrink: 0; }
.trow .tb{ font-size: var(--type-lg); font-weight: 800; line-height: 1; }
.trow.is-leading{ box-shadow: inset 2px 0 0 var(--gold); padding-left: var(--s2); }
.trow.is-leading .tb{ color: var(--gold); }
.trow.is-me{ box-shadow: inset 2px 0 0 var(--grass); padding-left: var(--s2); }
.trow.is-me.is-leading{ box-shadow: inset 2px 0 0 var(--grass); }
.trow.is-passed{ opacity: .5; }

/* Puestos que le faltan a cada equipo */
.need-dots{ display: flex; gap: 3px; justify-content: flex-end; margin-top: 4px; }
.need{
  font-family: var(--font-num);
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  width: 16px;
  border-radius: var(--r-sm);
  background: var(--card-2);
  color: var(--muted);
}
.need[data-pos="POR"]{ box-shadow: inset 0 -2px 0 var(--gold); }
.need[data-pos="DEF"]{ box-shadow: inset 0 -2px 0 var(--blue); }
.need[data-pos="MED"]{ box-shadow: inset 0 -2px 0 var(--grass); }
.need[data-pos="DEL"]{ box-shadow: inset 0 -2px 0 var(--red); }

/* =========================================================
   ACTIVIDAD
   ========================================================= */
.log{
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--gutter) var(--s6);
  min-height: 120px;
}
.log-line{
  display: flex;
  gap: var(--s2);
  padding: 5px 0;
  font-size: var(--type-xs);
  color: var(--muted);
  line-height: 1.35;
  border-bottom: 1px solid rgba(46,42,34,.5);
  animation: entraLinea var(--t-base) var(--ease);
}
@keyframes entraLinea{
  from{ opacity: 0; transform: translateX(-6px); }
  to{ opacity: 1; transform: none; }
}
.log-line .t{
  font-family: var(--font-num);
  color: var(--faint);
  min-width: 20px;
  flex-shrink: 0;
  text-align: right;
  font-size: 10.5px;
}
.log-line b{ font-weight: 700; }
.log-line .amt{
  font-family: var(--font-num);
  font-weight: 800;
  color: var(--text);
}
.log-line.is-sold{ color: var(--gold); }
.log-line.is-sold .amt{ color: var(--gold); }
.log-line.is-you{ color: var(--grass); }
.log-line.is-unsold{ color: var(--faint); font-style: italic; }

/* =========================================================
   REVELACIÓN DEL VENDIDO
   ========================================================= */
.lot-reveal{
  text-align: center;
  padding: var(--s7) var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(212,175,106,.07), transparent 52%),
    var(--card);
  box-shadow: var(--shadow-2), var(--edge-light);
}
.reveal-kicker{
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
  line-height: 1;
}
.reveal-name{
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  margin: var(--s3) 0;
  overflow-wrap: anywhere;
}
.reveal-name--vacio{ color: var(--muted); }
.reveal-cifras{ display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.reveal-ovr{ font-size: var(--type-2xl); color: var(--text); }
.reveal-para{
  font-family: var(--font-num);
  font-size: var(--type-xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: var(--s2);
}
.reveal-price{
  font-family: var(--font-num);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: var(--s2);
}
.reveal-nota{ max-width: 340px; margin: var(--s4) auto 0; }

.lot-hint{
  font-size: var(--type-xs);
  color: var(--muted);
  text-align: center;
  padding: var(--s5) var(--s3);
  letter-spacing: .04em;
  line-height: 1.5;
}

/* =========================================================
   PRESENTACIÓN DE EQUIPOS
   ========================================================= */

.squad-card{ overflow: hidden; }
.squad-head{
  padding: 18px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.squad-head::before{
  content:"";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--team-color, var(--grass));
}
.squad-name{
  font-family: var(--font-display);
  font-size: var(--type-3xl);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}
.squad-owner{ font-size: var(--type-xs); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }

.squad-player{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  font-size: var(--type-sm);
}
.squad-player:last-child{ border-bottom: none; }
.squad-player .nm{ font-weight: 600; }
.squad-player .ovr{ font-family: var(--font-num); font-weight: 800; font-size: var(--type-lg); color: var(--gold); }
.squad-foot{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  background: var(--surface);
  font-size: var(--type-xs);
  color: var(--muted);
}

/* =========================================================
   TRANSMISIÓN — jornadas y partidos en vivo
   ========================================================= */

.broadcast-bar{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.jd-label{
  font-family: var(--font-num);
  font-size: var(--type-3xl);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.jd-label b{ color: var(--grass); }

.match{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  margin-bottom: 10px;
  transition: border-color var(--speed) var(--ease);
}
.match.mine{ border-color: rgba(79,191,127,.5); }

.match-top{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.mteam{ display:flex; align-items:center; gap: 10px; font-weight: 700; font-size: var(--type-md); min-width: 0; }
.mteam.right{ flex-direction: row-reverse; text-align: right; }
.mteam .nm{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

.mscore{ font-size: var(--type-value);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
  min-width: 90px;
  justify-content: center;
}
.mscore.pending{ font-family: var(--font-ui); font-size: var(--type-xs); color: var(--muted); letter-spacing: .2em; }
.mscore .sep{ color: var(--line-2); font-size: var(--type-2xl); }
.mscore .w{ color: var(--grass); }
.mscore .l{ color: var(--muted); }
.mscore .pen{
  font-size: var(--type-3xs);
  letter-spacing: .1em;
  color: var(--muted);
  font-family: var(--font-ui);
  display: block;
  text-align: center;
}

.match-feed{ border-top: 1px solid var(--line); background: var(--surface); }
.feed-toggle{
  width: 100%;
  text-align: left;
  padding: 9px 16px;
  font-size: var(--type-3xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.feed-toggle:hover{ color: var(--text); }
.feed{ padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.fe{
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: var(--type-xs);
  line-height: 1.45;
  color: var(--muted);
  animation: logIn var(--t-base) var(--ease) both;
}
.fe .m{ font-family: var(--font-num); font-weight: 800; color: var(--muted); min-width: 38px; flex-shrink: 0; font-size: var(--type-xs); }
.fe.goal{ color: var(--text); font-weight: 600; }
.fe.goal .m{ color: var(--grass); }
.fe.agonic{ color: var(--gold); }
.fe.milestone{ color: var(--blue); }

/* Partido "en vivo" mientras simula */
.live-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-3xs);
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--red);
  text-transform: uppercase;
}
.live-badge i{ width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulse 1.1s infinite; }
.live-clock{ font-family: var(--font-num); font-size: var(--type-md); font-weight: 800; color: var(--gold); }

/* =========================================================
   TABLA
   ========================================================= */

.standings{ width: 100%; border-collapse: collapse; }
.standings th{
  font-size: var(--type-3xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--line);
}
.standings th:nth-child(1),.standings th:nth-child(2){ text-align: left; }
.standings td{
  padding: 12px 8px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  font-size: var(--type-sm);
  font-variant-numeric: tabular-nums;
}
.standings td:nth-child(1),.standings td:nth-child(2){ text-align: left; }
.standings tr.me{ background: rgba(79,191,127,.09); }
.standings tr.me td:nth-child(2){ box-shadow: inset 2px 0 0 var(--grass); }
.standings tr{ transition: background var(--speed) var(--ease); }
.standings tr:hover{ background: rgba(242,237,224,.025); }

.pos-cell{
  font-family: var(--font-num);
  font-size: var(--type-2xl);
  font-weight: 800;
  color: var(--muted);
  line-height: 1;
}
.pos-cell.p1{ color: var(--gold); font-size: var(--type-3xl); }
.pos-cell.p2{ color: var(--muted); }
.pos-cell.p3{ color: var(--gold); }
.pts-cell{ font-family: var(--font-num); font-size: var(--type-2xl); font-weight: 800; color: var(--gold); line-height: 1; }

.form-dots{ display: flex; gap: 3px; justify-content: flex-end; }
.form-dots i{
  width: 15px; height: 15px;
  border-radius: 2px;
  display: grid; place-items: center;
  font-size: 8.5px;
  font-weight: 800;
  font-style: normal;
  color: #04150b;
}
.form-dots i.G{ background: var(--grass); }
.form-dots i.E{ background: var(--faint); color: var(--card); }
.form-dots i.P{ background: rgba(192,74,78,.62); color: #0c0b09; }

/* Ranking de estadísticas */
.stat-row{
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--type-sm);
}
.stat-row:last-child{ border-bottom: none; }
.stat-rank{ font-family: var(--font-num); font-size: var(--type-md); font-weight: 800; color: var(--muted); min-width: 18px; }
.stat-row:first-child .stat-rank{ color: var(--gold); }
.stat-nm{ font-weight: 600; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-team{ font-size: var(--type-2xs); color: var(--muted); }
.stat-val{ font-family: var(--font-num); font-size: var(--type-2xl); font-weight: 800; color: var(--gold); line-height: 1; }

/* =========================================================
   PLAYOFFS — cuadro
   ========================================================= */

/* En escritorio el cuadro se lee de izquierda a derecha, como
   un afiche de torneo. En un teléfono de 390px no entra: dos
   columnas de 230px más el hueco son 482, y lo que sobra queda
   cortado en el borde sin que se note que se puede scrollear.

   En pantalla chica las rondas se apilan hacia abajo, que es como
   se lee un cuadro en el teléfono, y cada una ocupa el ancho
   entero. Nada se mueve de lado: se lee igual de arriba hacia
   abajo que en la pantalla grande. */
.bracket{
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding-bottom: 12px;
}
.round-col{ min-width: 230px; display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 560px){
  .bracket{
    flex-direction: column;
    overflow-x: visible;
    gap: 18px;
  }
  .round-col{ min-width: 0; width: 100%; }
  .round-title{ text-align: left; }
}
.round-title{
  font-family: var(--font-display);
  font-size: var(--type-xs);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.round-col.current .round-title{ color: var(--grass); }
.bm{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}
.bm-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  font-size: var(--type-sm);
  font-weight: 600;
}
.bm-row:first-child{ border-bottom: 1px solid var(--line); }
.bm-row.win{ color: var(--grass); }
.bm-row.lose{ color: var(--muted); }
.bm-row.bye{ color: var(--muted); font-style: italic; }
.bm-score{ font-family: var(--font-num); font-size: var(--type-xl); font-weight: 800; color: var(--gold); }
.bm-play{ padding: 12px; text-align: center; font-size: var(--type-xs); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }

/* =========================================================
   CAMPEÓN
   ========================================================= */

.champion{
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  overflow-y: auto;
  background:
    radial-gradient(900px 600px at 50% 30%, var(--gold-bg), transparent 65%),
    #050505;
}
.champion.show{ display: flex; animation: screenIn var(--t-slow) var(--ease); }
.champion canvas{ position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.ch-inner{ position: relative; z-index: var(--z-content); width: 100%; max-width: 700px; text-align: center; }
.ch-pos{
  font-family: var(--font-num);
  font-size: var(--type-hero);
  font-weight: 800;
  line-height: .8;
  color: var(--gold);
  animation: popIn var(--t-slow) cubic-bezier(.2,1.5,.35,1) both;
}
@keyframes popIn{ from{ opacity:0; transform: scale(.4); } to{ opacity:1; transform:none; } }
.ch-kicker{
  font-family: var(--font-display);
  font-size: var(--type-d2);
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-top: 4px;
  animation: fadeUp var(--t-slow) var(--t-base) var(--ease) both;
}
.ch-name{
  font-family: var(--font-display);
  font-size: var(--type-d3);
  font-weight: 800;
  line-height: .9;
  text-transform: uppercase;
  margin: 10px 0;
  animation: fadeUp var(--t-slow) 350ms var(--ease) both;
}
.ch-of{
  font-size: var(--type-xs);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  animation: fadeUp var(--t-slow) 450ms var(--ease) both;
}
@keyframes fadeUp{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }

/* Cinco datos en tres columnas. Con "auto-fit" el navegador
   decidía cuántas entran según el ancho y sobraban celdas vacías
   al final —un bloque negro sin nada al lado de "Media"— que
   parece un dato que no llegó a cargar. Con tres columnas y la
   quinta casilla tomando las dos que quedan, la fila se cierra
   sola y el número grande se lee como el cierre de la lista. */
.ch-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 28px 0;
  animation: fadeUp var(--t-slow) var(--t-slow) var(--ease) both;
}
.ch-stat{ background: var(--bg); padding: 16px 10px; }
/* La casilla que queda sola al cerrar la fila ocupa todo lo que
   queda de la grilla, así no queda el hueco. */
.ch-stat:nth-child(3n + 2):last-child{ grid-column: span 2; }
.ch-stat .v{ font-family: var(--font-num); font-size: var(--type-3xl); font-weight: 800; line-height: 1; }
.ch-stat .k{ font-size: var(--type-3xs); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-top: 5px; }

.ch-roster{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 26px; animation: fadeUp var(--t-slow) var(--t-slow) var(--ease) both; }
.ch-p{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 12px 5px 6px;
  font-size: var(--type-xs);
  font-weight: 600;
}
.ch-p b{ color: var(--gold); font-family: var(--font-num); font-size: var(--type-md); }

/* =========================================================
   TRANSICIONES DE FASE
   ========================================================= */

.interlude{
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky);
  display: none;
  align-items: center;
  justify-content: center;
  background: #050505;
  padding: var(--gutter);
  text-align: center;
}
.interlude.show{ display: flex; }
.il-inner{ max-width: 560px; width: 100%; }
.il-line{ font-size: var(--type-d3);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .9;
  animation: ilIn var(--t-slow) var(--ease) both;
}
.il-line + .il-line{ animation-delay: var(--t-fast); }
.il-line + .il-line + .il-line{ animation-delay: 360ms; }
@keyframes ilIn{ from{ opacity:0; transform: translateY(24px); letter-spacing: .2em; } to{ opacity:1; transform:none; letter-spacing: normal; } }
.il-stats{ display:flex; gap: 34px; justify-content: center; margin: 32px 0; animation: ilIn var(--t-slow) var(--t-slow) var(--ease) both; }
.il-stats .v{ font-family: var(--font-num); font-size: var(--type-3xl); font-weight: 800; line-height: 1; }
.il-stats .k{ font-size: var(--type-3xs); text-transform: uppercase; letter-spacing: .18em; color: var(--muted); margin-top: 4px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 760px){
  .wrap{ padding: 0 16px 60px; }
  .home-top{ padding: 14px 16px; }
  .mystrip{ gap: 18px; }
  .auction-stage{ padding: 18px 16px 24px; }
  .match-top{ grid-template-columns: 1fr auto 1fr; gap: var(--s2); padding: 13px; }
  .mteam{ font-size: var(--type-sm); }
  .mscore{ font-size: var(--type-value); min-width: 72px; }
  .standings th:nth-child(n+6), .standings td:nth-child(n+6){ display: none; }
}

/* =========================================================
   AJUSTES DE LA SUBASTA EN PANTALLA CHICA
   Al final a propósito: estas reglas ganan por cascada sobre
   las de arriba, que están escritas para el escritorio.
   ========================================================= */

/* En el teléfono la ficha va en dos columnas: el retrato al
   lado del nombre, no encima. Apiladas, el retrato se comía 104px
   y los atributos quedaban debajo de la carpeta, que es
   justamente la información con la que se puja. */

/* Los seis atributos en una sola fila incluso en 360px: caben
   justos (dos digitos y tres letras) y asi la ficha no crece una
   fila mas, que es lo que empuja el valor de mercado debajo de
   la barra de puja. */
@media (max-width: 380px){
  .ficha{ grid-template-columns: 60px 1fr; }
  .ficha__retrato .retrato{ width: 60px !important; height: 60px !important; }
  .ficha__stats{ grid-template-columns: repeat(6, 1fr); gap: 3px; }
  .stat__v{ font-size: var(--type-md); }
  .stat__k{ font-size: 8px; letter-spacing: .04em; }
  .ficha__valor{ grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
  .ficha__base, .ficha__mercado, .ficha__pot{ font-size: var(--type-md); }
  .ficha__nota{ font-size: 9px; }
  .ficha__valorItem .t-label{ font-size: 8px; letter-spacing: .08em; }
}
/* A 340 o menos ya no entra de otra forma: ahi si se parte en
   dos filas de tres. */
@media (max-width: 339px){
  .ficha__stats{ grid-template-columns: repeat(3, 1fr); gap: var(--s2) 4px; }
}

/* =========================================================
   TRANSMISIÓN — el partido a pantalla completa
   ========================================================= */

.tx{
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 0%, #14120e, var(--bg) 62%),
    var(--bg);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}
.tx.show{ opacity: 1; }
body.tx-open{ overflow: hidden; }

.tx__fondo{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* --- cabecera: marcador, reloj, cerrar --- */
.tx__top{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--gutter) var(--s3);
  border-bottom: 1px solid var(--line);
}

.tx__marcador{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 34px);
}
.tx__equipo{
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  flex: 1;
}
.tx__equipo--visitante{ justify-content: flex-end; }
.tx__nombre{
  font-family: var(--font-display);
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El escudo: las iniciales del equipo sobre su color, que ya
   existe. No hace falta subir un archivo para tener identidad. */
.tx__escudo{
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c);
  color: #0c0b09;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
}
.tx__cifras{
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-shrink: 0;
}
.tx__goles{
  font-family: var(--font-num);
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 800;
  line-height: .85;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: .6em;
  text-align: center;
}
.tx__goles.sube{ animation: subeGol var(--t-slow) var(--ease-snap); }
@keyframes subeGol{
  0%{ transform: scale(1); color: var(--text); }
  35%{ transform: scale(1.22); color: var(--gold); }
  100%{ transform: scale(1); color: var(--text); }
}
.tx__guion{ font-family: var(--font-num); font-size: 22px; color: var(--faint); }

.tx__relojwrap{ grid-column: 2; text-align: center; }
.tx__reloj{
  font-family: var(--font-num);
  font-size: var(--type-2xl);
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tx__fase{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.tx__cerrar{ grid-column: 3; justify-self: end; }

/* --- la narración --- */
.tx__linea{
  position: relative;
  z-index: 2;
  padding: var(--s4) var(--gutter);
  font-family: var(--font-display);
  font-size: clamp(17px, 2.6vw, 24px);
  line-height: 1.3;
  text-align: center;
  color: var(--text);
  min-height: 3.6em;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
}
.tx__linea.cambia{ animation: entraNarracion var(--t-slow) var(--ease); }
@keyframes entraNarracion{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: none; }
}

/* --- cuerpo: eventos a la izquierda, estadísticas a la derecha --- */
.tx__cuerpo{
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 260px;
  min-height: 0;
}
@media (max-width: 760px){
  .tx__cuerpo{ grid-template-columns: 1fr; }
  .tx__panel{ display: none; }
}
.tx__eventos{
  overflow-y: auto;
  padding: var(--s4) var(--gutter) var(--s8);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.txEv{
  display: grid;
  grid-template-columns: 42px 90px 1fr;
  gap: var(--s2);
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(46,42,34,.45);
  font-size: var(--type-sm);
  color: var(--muted);
  animation: entraEvento var(--t-base) var(--ease);
}
@keyframes entraEvento{
  from{ opacity: 0; transform: translateX(-10px); }
  to{ opacity: 1; transform: none; }
}
@media (max-width: 560px){
  .txEv{ grid-template-columns: 38px 1fr; }
  .txEv__eq{ grid-column: 2; grid-row: 1; font-size: 10px; }
  .txEv__t{ grid-column: 2; }
}
.txEv__m{ color: var(--faint); font-size: var(--type-xs); text-align: right; }
.txEv__eq{
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--type-xs);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.txEv.is-gol{ color: var(--text); }
.txEv.is-gol .txEv__t{ color: var(--gold); font-weight: 600; }
.txEv.is-amarilla .txEv__t::before{ content:"Amarilla · "; color: var(--gold); }
.txEv.is-roja .txEv__t::before{ content:"Roja · "; color: var(--red-tint); }

/* --- estadísticas --- */
.tx__panel{
  border-left: 1px solid var(--line);
  padding: var(--s4) var(--s4) var(--s8);
  overflow-y: auto;
}
.tx__panelTitulo{
  font-size: var(--type-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}
.txStat{
  display: grid;
  grid-template-columns: 1fr 34px;
  grid-template-areas: "n v1" "b b" "v2 n2";
  align-items: center;
  gap: 2px 6px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(46,42,34,.45);
}
.txStat__n{ grid-area: n; font-size: var(--type-xs); color: var(--muted); }
.txStat__v{ font-size: var(--type-md); font-weight: 800; text-align: right; }
.txStat__v:first-of-type{ grid-area: v1; }
.txStat__barra{
  grid-area: b;
  height: 3px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: 3px 0;
}
.txStat__barra i{
  display: block;
  height: 100%;
  width: var(--p, 50%);
  background: var(--gold);
  border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease);
}
.txStat__barra::after{
  content:"";
  display: block;
  height: 3px;
  width: calc(100% - var(--p, 50%));
  margin-top: -3px;
  background: var(--blue);
  border-radius: var(--r-pill);
}

/* --- el cartel del gol --- */
.tx__anuncio{
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.txGol{
  text-align: center;
  padding: var(--s7) var(--s9);
  background: linear-gradient(180deg, rgba(212,175,106,.1), transparent 70%), var(--card);
  border: 1px solid var(--gold);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-deep), 0 0 0 1px rgba(212,175,106,.2);
  opacity: 0;
  transform: scale(.9);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease-snap);
}
.txGol.show{ opacity: 1; transform: scale(1); }
.txGol__kicker{
  font-family: var(--font-display);
  font-size: clamp(38px, 8vw, 76px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
  line-height: 1;
}
.txGol__jugador{
  font-family: var(--font-display);
  font-size: clamp(20px, 3.4vw, 32px);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: var(--s2);
  line-height: 1.05;
}
.txGol__equipo{
  font-family: var(--font-num);
  font-size: var(--type-xl);
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 4px;
}
.txGol__min{
  font-family: var(--font-num);
  font-size: var(--type-lg);
  color: var(--muted);
  margin-top: var(--s2);
}

/* =========================================================
   ESCUDO — la identidad de un equipo, en todas las pantallas
   ========================================================= */

.escudo{
  display: inline-grid;
  place-items: center;
  width: var(--esc-tam, 28px);
  height: var(--esc-tam, 28px);
  flex-shrink: 0;
  border-radius: 50%;
  /* El segundo color va en el borde, así el escudo tiene dos
     tonos aunque no haya logo. */
  background: var(--esc-color);
  box-shadow: inset 0 0 0 2px var(--esc-color2);
  overflow: hidden;
  vertical-align: middle;
}
.escudo__inicial{
  font-family: var(--font-num);
  font-weight: 800;
  font-size: calc(var(--esc-tam, 28px) * .42);
  line-height: 1;
  letter-spacing: .01em;
  /* Sobre un color saturado el texto va casi negro: es la
     única combinación que se lee con cualquier escudo. */
  color: #0c0b09;
}
.escudo--conLogo{ box-shadow: inset 0 0 0 2px var(--esc-color2); }
.escudo--conLogo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.escudo-lg{ --esc-tam: 64px; }
.escudo-xl{ --esc-tam: 104px; }

/* =========================================================
   EDITOR DE IDENTIDAD
   ========================================================= */

.idBox{
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  padding: var(--s4);
  box-shadow: var(--shadow-1);
}
.idBox__fila{
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.idBox__previo{
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: var(--s4);
}
.idBox__previoTexto{ min-width: 0; }
.idBox__previoNombre{
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.idBox__previoMeta{
  font-size: var(--type-xs);
  color: var(--muted);
  margin-top: 3px;
}

.idColores{ display: flex; gap: var(--s3); flex-wrap: wrap; }
.idColor{ display: flex; align-items: center; gap: var(--s2); }
.idColor input[type="color"]{
  width: 38px; height: var(--tap);
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
}
.idColor input[type="color"]::-webkit-color-swatch-wrapper{ padding: 3px; }
.idColor input[type="color"]::-webkit-color-swatch{ border: none; border-radius: 2px; }
.idColor label{
  font-size: var(--type-3xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.idLogo{
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.idLogo__archivos{ display: none; }
.idLogo__nota{
  font-size: var(--type-xs);
  color: var(--muted);
  line-height: 1.4;
}

/* La figura del equipo: las dos firmas que definen la plantilla.
   Se marcan con una F dorada, discreta: informa sin gritar. */
.squad-player.es-figura .nm{ color: var(--text); }
.squad-player__f{
  display: inline-grid;
  place-items: center;
  width: 15px; height: 15px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--gold);
  color: #0c0b09;
  font-family: var(--font-num);
  font-size: 9px;
  font-weight: 800;
  vertical-align: 1px;
}

/* =========================================================
   OPCIONES DE LA SALA
   =========================================================
   Los grupos de opciones vienen en dos tamaños: los que elijan
   entre dos o tres cosas y caben en una fila, y los que tienen
   texto largo —el formato, el ritmo— y necesitan más ancho del
   que una celda angosta. Por eso los segundos se envuelven.
   ------------------------------------------------------------ */

.pick--wrap{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s2);
}
.pick--wrap .pick-opt{
  text-align: left;
  align-items: flex-start;
  padding: 10px 12px;
}
.pick--wrap .pick-opt .v{
  font-size: var(--type-md);
  line-height: 1.1;
  margin-bottom: 3px;
}
.pick--wrap .pick-opt .k{
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.pick--wrap .pick-opt.sel .k{ color: var(--text); }
.pick--wrap .pick-opt.sel{ border-color: var(--gold); }

/* La nota de cada opción: dice la consecuencia de elegir, que
   es lo que no se puede adivinar mirando un número. */
.field .t-dim{
  line-height: 1.45;
  max-width: 46ch;
}

/* =========================================================
   MIS TORNEOS
   ========================================================= */

.mt-list{ display: flex; flex-direction: column; gap: 10px; }

.mt-card{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--card);
}
/* Un torneo a medias y uno terminado no se distinguen por la
   intensidad del color sino por el canto: el que sigue vivo
   tiene el dorado, el que terminó se apaga. */
.mt-card--abierto{ border-left-color: var(--gold); }
.mt-card--hecho{ border-left-color: var(--line-2); opacity: .82; }
.mt-card--hecho:hover{ opacity: 1; }

.mt-card__main{ min-width: 0; flex: 1; }
.mt-card__nombre{
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.mt-card__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 7px;
  font-size: var(--type-xs);
  color: var(--muted);
}
.mt-card__estado{
  margin-top: 9px;
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.mt-card--hecho .mt-card__estado{ color: var(--muted); }

.mt-card__lado{ text-align: right; flex-shrink: 0; }
.mt-card__codigo{
  font-size: var(--type-xl);
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--text);
}
.mt-card__fecha{
  font-size: var(--type-3xs);
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: .06em;
}

@media (max-width: 520px){
  .mt-card{ flex-direction: column; gap: var(--s3); }
  .mt-card__lado{ text-align: left; width: 100%; }
  .mt-card__lado .row{ justify-content: flex-start !important; }
}

/* La fila de la barra de la liga no envolvía. Con dos botones
   —que es lo que hay en eliminación directa— la fila se salía
   de la pantalla y el documento scrolleaba en horizontal: 56
   píxeles de contenido que aparecían al hacer scroll vertical en
   un teléfono, sin ningún aviso. */
.broadcast-bar{ flex-wrap: wrap; row-gap: 8px; }
.broadcast-bar .row{ flex-wrap: wrap; }
@media (max-width: 420px){
  .broadcast-bar .btn{ flex: 1 1 auto; }
}

/* =========================================================
   LAS PESTAÑAS NO ENTRAN EN UN TELÉFONO
   ------------------------------------------------------------
   Jornada · Tabla · Estadísticas · Equipos · Cuadro son cinco
   botones en una fila, y la revisión suma uno más. En 390 no entran: el último queda
   afuera del borde y hace scrollear el documento entero 56
   píxeles, lo que en un teléfono se ve como un tirón raro al
   bajar.

   Se les da su propio desplazamiento horizontal, que es lo que
   hacen las barras de pestañas de cualquier app, en vez de
   dejar que el documento entero se mueva. El documento no
   scrollea de lado nunca: eso es lo que hace que un sitio se
   sienta roto.
   ------------------------------------------------------------ */

#tabs,
#revTabs{
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#tabs::-webkit-scrollbar,
#revTabs::-webkit-scrollbar{ display: none; }
#tabs > button,
#revTabs > button{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* =========================================================
   LISTAS LARGAS
   ------------------------------------------------------------
   El historial de la subasta y el de los partidos pueden tener
   cientos de filas. El navegador las pinta todas aunque no se
   vean, y en un teléfono eso se nota: la pantalla tarda en
   responder cuando se abre el detalle.

   `content-visibility` le dice al navegador "esto que está fuera
   de la pantalla no lo pintez hasta que entre", y el alto que se
   le da es una estimación, para que la barra de desplazamiento
   no salte mientras se hace.

   El tamaño estimado importa: sin `contain-intrinsic-size`, el
   navegador asume que el bloque no tiene alto, la barra de
   scroll se calcula sobre la nada y al aparecer el contenido la
   página salta. Es el mismo problema del QR, en otra parte.
   ------------------------------------------------------------ */

.lista-larga > *{
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
}

/* El registro de la subasta, que es la lista más larga que hay:
   cientos de pujas, una por fila. */
#log > *{
  content-visibility: auto;
  contain-intrinsic-size: auto 28px;
}

/* Las páginas de la liga: muchas tarjetas, casi todas fuera de
   la pantalla. */
#matchList > *{
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}

/* Las listas de jugadores de una plantilla. */
#squadGrid > *{
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

@media (prefers-reduced-motion: no-preference){
  /* Esto no anima nada: es una optimización de pintado, y
     desactivar las transiciones durante el salto de visibilidad
     evita el tirón que se ve al scrollear rápido. */
  #log > *, #matchList > *, #squadGrid > *{
    transition: opacity var(--t-base) var(--ease);
  }
}

/* =========================================================
   RESUMEN DEL PARTIDO
   ========================================================= */

.res{
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(6,5,3,.82);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  padding: var(--safe-top) 0 0;
}
.res.show{ opacity: 1; }
body.res-open{ overflow: hidden; }
@media (min-width: 700px){
  .res{ align-items: center; }
}

.res__inner{
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s5) var(--s5) var(--s6);
  box-shadow: var(--shadow-deep);
  transform: translateY(14px);
  transition: transform var(--t-slow) var(--ease-snap);
}
.res.show .res__inner{ transform: none; }
@media (min-width: 700px){
  .res__inner{ border-radius: var(--r-lg); }
}

/* --- cabecera --- */
.res__head{ margin-bottom: var(--s5); }
.res__equipos{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 22px);
  margin-bottom: var(--s4);
}
.res__lado{ display: flex; align-items: center; gap: var(--s2); min-width: 0; flex: 1; }
.res__lado:last-child{ justify-content: flex-end; }
.res__nombre{
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.res__marcador{
  font-family: var(--font-num);
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.res__narrador{
  font-family: var(--font-display);
  font-size: var(--type-md);
  line-height: 1.35;
  color: var(--muted);
  text-align: center;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

/* --- bloques --- */
.res__bloque{ margin-top: var(--s5); }
.res__bloque .t-label{ margin-bottom: var(--s2); }

.res__stats{ border-top: 1px solid var(--line); }
.resStat{
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(46,42,34,.5);
}
.resStat__v{ font-size: var(--type-md); font-weight: 800; }
.resStat__v:last-child{ text-align: right; }
.resStat__n{ text-align: center; font-size: var(--type-xs); color: var(--muted); }

.res__goles, .res__mejores{ display: flex; flex-direction: column; gap: 1px; }
.resG, .resM{
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 8px 0;
  border-bottom: 1px solid rgba(46,42,34,.5);
  font-size: var(--type-sm);
}
.resG__n{ flex: 1; }
.resG__c{ color: var(--gold); font-weight: 800; }
.resM__nota{
  width: 30px;
  text-align: center;
  font-weight: 800;
  color: var(--gold);
}
.resM__n{ flex: 1; }
.resM__g{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================
   LOS GRUPOS
   ------------------------------------------------------------
   Una tabla por grupo. En un teléfono caben dos en pantalla y
   la lista se lee bien; en uno de escritorio, cuatro.

   Los puestos y los clasificados no se calculan acá: llegan
   del servidor. Estas reglas solo dibujan lo que ya está
   decidido, que es lo que hace que dos personas viendo el
   mismo torneo vean exactamente lo mismo.
   ------------------------------------------------------------ */

.gx-lista{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 620px){
  .gx-lista{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  .gx-lista{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gx{
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}

.gx__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--card-2);
}

/* La letra del grupo va en Didone y grande: es lo único que
   identifica la tabla de un vistazo, y es lo que se lee
   primero. */
.gx__letra{
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  letter-spacing: .04em;
}

.gx__tabla{ font-size: var(--type-xs); }

/* La tabla es un <table> de verdad —con caption, th y scope— pero
   se dibuja con la misma grilla de siempre.

   El etiquetado no depende del CSS: el navegador arma el árbol de
   accesibilidad a partir del elemento, no de su display. Por eso
   una tabla con las filas en grid sigue siendo una tabla para el
   lector de pantalla, y puede moverse con la tecla de columnas
   como cualquier otra.

   Antes eran <div> y <span>. Se veían igual, pero un lector
   decía "uno, Boca Juniors, dos, dos, cero, cero, nueve, cero,
   más nueve, seis": nueve números sin decir de qué columna era
   cada uno. Con th y scope se sabe, y además se puede saltar a la
   columna de puntos directo. */
.gx__interna,
.gx__interna thead,
.gx__interna tbody{
  display: block;
  width: 100%;
}
.gx__interna{ border-collapse: collapse; }
.gx__interna td,
.gx__interna th{ padding: 0; font-weight: inherit; }
.gx__interna caption{ caption-side: top; }

/* El borde de abajo lo perdía la fila de encabezado: con el
   <thead> es la última hija de su padre, y ":last-child" le sacaba
   el separador, con lo que la tabla y el cuerpo quedaban pegados.
   La excepción va explícita en el ":last-child" de más abajo y no
   se apoya en el orden de las reglas. */

.gx__fila{
  display: grid;
  /* El puesto, el equipo, y ocho números. El equipo se lleva
     lo que sobra porque el nombre es lo único que no se puede
     recortar. */
  grid-template-columns: 22px minmax(0, 1fr)
                         26px 22px 22px 22px 28px 28px 32px 38px;
  align-items: center;
  gap: 2px;
  padding: 7px var(--s3);
  border-bottom: 1px solid rgba(46,42,34,.5);
}
.gx__fila:last-child:not(.gx__fila--cab){ border-bottom: 0; }
.gx__fila--cab th{ font-weight: 700; }
.gx__fila--cab{
  background: var(--card-2);
  font-size: var(--type-3xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--line);
}
.gx__fila--cab .gx__c:not(.gx__c--e){ text-align: right; }

/* El canto dorado marca al que clasifica. Es la única
   diferencia visual con la que hay que leer la tabla, así que
   no compite con los números: va al costado. */
.gx__fila--pasa{
  box-shadow: inset 2px 0 0 var(--gold);
}
.gx__fila--pasa .gx__c--p{ color: var(--gold); font-weight: 800; }

.gx__c{ text-align: right; font-variant-numeric: tabular-nums; }
.gx__c--p{ text-align: left; color: var(--muted); font-weight: 700; }
.gx__c--pts{ color: var(--text); font-weight: 800; font-size: var(--type-sm); }

.gx__c--e{
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  text-align: left;
}
.gx__nombre{
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La racha: los últimos cinco resultados, en letra. */
.gx__form{ display: inline-flex; gap: 2px; margin-left: auto; }
.gx__form i{
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: rgba(46,42,34,.7);
  color: var(--muted);
}
.gx__form i.f-G{ background: var(--grass); color: #0c0b09; }
.gx__form i.f-E{ background: var(--gold); color: #14110a; }
.gx__form i.f-P{ background: var(--red-tint); color: #14110a; }

/* Los clasificados, como lista de etiquetas con escudo. */
.gx-pasa{
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-left-color: var(--gold);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: var(--type-xs);
}
.gx-pasa b{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text);
}

@media (max-width: 420px){
  /* En un teléfono no entran las ocho columnas con nombres.
     Se van los que menos aportan —partidos ganados y
     empatados, que ya están en la racha— y quedan puesto,
     equipo, jugados, diferencia y puntos. */
  .gx__fila{
    grid-template-columns: 20px minmax(0, 1fr) 24px 30px 36px;
  }
  .gx__fila .gx__c:nth-child(4),
  .gx__fila .gx__c:nth-child(5),
  .gx__fila .gx__c:nth-child(6),
  .gx__fila .gx__c:nth-child(7),
  .gx__fila .gx__c:nth-child(8){ display: none; }
  .gx__form{ display: none; }
}

/* =========================================================
   EL TORNEO, CONTADO
   ========================================================= */

.st{
  margin-bottom: 32px;
}
.st > .t-label{ margin-bottom: 14px; }

.st-vacio,
.st-nota{
  font-size: var(--type-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 58ch;
}

/* --- el camino del campeon: los partidos, uno tras otro --- */

.st-camino{
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.st-paso{
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 54px 78px;
  align-items: center;
  gap: var(--s2);
  padding: 9px 0;
  border-bottom: 1px solid rgba(46,42,34,.6);
  /* El canto del color del resultado. Es lo único que hace
     falta para leer la racha de un vistazo: verde, dorado,
     rojo. */
  box-shadow: inset 2px 0 0 var(--line-2);
}
.st-paso--G{ box-shadow: inset 2px 0 0 var(--grass); }
.st-paso--E{ box-shadow: inset 2px 0 0 var(--gold); }
.st-paso--P{ box-shadow: inset 2px 0 0 var(--red-tint); }

.st-paso__n{
  font-size: var(--type-xs);
  color: var(--muted-2);
  text-align: center;
}
.st-paso__eq{
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-paso__r{
  font-size: var(--type-md);
  font-weight: 800;
  text-align: right;
}
.st-paso--G .st-paso__r{ color: var(--grass); }
.st-paso--P .st-paso__r{ color: var(--red-tint); }
.st-paso__m{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.st-cuenta{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 16px;
  background: var(--line);
  border: 1px solid var(--line);
}
.st-cuenta > div{
  background: var(--bg);
  padding: var(--s3) var(--s2);
  text-align: center;
}
.st-cuenta b{
  display: block;
  font-size: var(--type-xl);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.st-cuenta span{
  display: block;
  margin-top: 5px;
  font-size: var(--type-3xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- los cambios de comando --- */

.st-lideres{ display: flex; flex-direction: column; }

.st-lider{
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid rgba(46,42,34,.6);
  font-size: var(--type-sm);
}
.st-lider__r{
  width: 34px;
  font-weight: 800;
  color: var(--muted);
  flex-shrink: 0;
}
.st-lider__g{
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 2px 6px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--gold);
  flex-shrink: 0;
}
.st-lider__de{
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--line-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-lider__flecha{ color: var(--muted-2); flex-shrink: 0; }
.st-lider__a{
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  min-width: 0;
}
.st-lider__a b{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- el podio --- */

.st-podio{ border-top: 1px solid var(--line); }

.st-p{
  display: grid;
  grid-template-columns: 26px 24px minmax(0, 1fr) 46px 42px;
  align-items: center;
  gap: var(--s2);
  padding: 10px 0;
  border-bottom: 1px solid rgba(46,42,34,.6);
}
.st-p:first-child{ box-shadow: inset 2px 0 0 var(--gold); }
.st-p__n{
  font-size: var(--type-md);
  font-weight: 800;
  color: var(--muted);
  text-align: center;
}
.st-p:first-child .st-p__n{ color: var(--gold); }
.st-p__nomb{
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-p__pt{
  font-size: var(--type-md);
  font-weight: 800;
  color: var(--gold);
  text-align: right;
}
.st-p__dg{
  font-size: var(--type-xs);
  color: var(--muted);
  text-align: right;
}

/* --- los partidos que se recuerdan --- */

.st-matches{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 640px){
  .st-matches{ grid-template-columns: repeat(2, 1fr); }
}

.st-m{
  padding: var(--s4);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-left-color: var(--gold);
  border-radius: var(--r-md);
  background: var(--card);
}
.st-m__fila{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  font-size: var(--type-sm);
}
.st-m__fila > span:last-child{ text-align: right; }
.st-m__fila > span:first-child{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-m__fila .t-num{
  font-size: var(--type-lg);
  font-weight: 800;
  color: var(--gold);
}

@media (max-width: 420px){
  .st-paso{ grid-template-columns: 22px minmax(0, 1fr) 50px; }
  .st-paso__m{ display: none; }
  .st-cuenta{ grid-template-columns: repeat(2, 1fr); }
  .st-p{ grid-template-columns: 22px 22px minmax(0, 1fr) 42px; }
  .st-p__dg{ display: none; }
}