/* mudanza.css */
/* ==========================================================================
   El Camino DT — La mudanza de categoría: el descenso y el ascenso
   --------------------------------------------------------------------------
   Una de las pocas pantallas que se pintan con los colores del club en vez de
   con la paleta de la casa —con la bienvenida, la vuelta olímpica y la
   coronación—: son los días que no son de mirar tablas.

   DESDE EL 11/10/2026 SON CINCO PIEZAS QUE ROTAN (ver la cabecera de
   `mudanza.js`): B la tabla con la raya, C la carta del presidente, D el riel
   de las fechas, E la cancha vacía a sangre y F la ficha seca. Cada una es un
   modificador del diálogo —`.mudanza--tabla`, `--carta`, `--riel`, `--cancha`,
   `--ficha`— y comparten el marco, la banda y el pie. Las tres tarjetas de
   antes (`.mudanza__datos`) se fueron con el rediseño.

   LOS COLORES LLEGAN RESUELTOS desde `mudanza.js` en `--mudanza-fondo` y
   `--mudanza-franja`, ya apagados o no según el ánimo: el rescate del escudo
   se decide en JavaScript mirando ese fondo. Bajando la tinta es fija
   (`--ink-100`, medida en 4,83:1 contra el peor de los 1.656 clubes apagados);
   subiendo la elige `coloresDe()` y llega en `--mudanza-tinta`.

   NO HAY ROJO NI VERDE en ninguna pieza: el rojo es alarma y el verde es del
   sistema. Tu club va en naranja (`--tuyo`), que es lo que dice «ésta es tu
   fila» en todo el juego.

   ENTRA ENTERO, sin rodar, con el botón adentro: medido a 1280×720, 1440×900,
   375×667 y 375×812 con las cinco piezas (memoria «los modales sin scroll»).
   ========================================================================== */

.mudanza {
  /* Los mismos 680 de la vuelta olímpica: el día que ganás y el día que
     cambiás de categoría ocupan lo mismo. */
  width: min(680px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  color: var(--text-primary);
  overflow: hidden;
  box-shadow: var(--sombra-modal);
}

.mudanza::backdrop {
  background: var(--velo);
  backdrop-filter: blur(4px);
}

.mudanza h2, .mudanza p { margin: 0; }

/* --------------------------------------------------------------------------
   LA BANDA (tabla y riel) Y LO QUE COMPARTE CON LA CARTA
   --------------------------------------------------------------------------
   La camiseta con la luz apagada bajando y a todo color subiendo. LA FRANJA
   ENTRA POR LA IZQUIERDA Y SE CORTA ANTES DEL TEXTO, como las otras bandas: ver
   `bienvenida.css`. CON RESPALDO en la tinta: bajando nadie la declara.
   -------------------------------------------------------------------------- */

.mudanza__banda {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 26px 18px;
  color: var(--mudanza-tinta, var(--ink-100));
  background:
    linear-gradient(112deg, var(--mudanza-franja) 0 6%, transparent 6.3%),
    linear-gradient(160deg, color-mix(in srgb, var(--mudanza-fondo) 82%, var(--mudanza-lavado, var(--mudanza-fondo)) 4%), var(--mudanza-fondo) 62%);
  border-bottom: 1px solid color-mix(in srgb, var(--mudanza-fondo) 55%, black);
}
.mudanza__banda--lisa {
  background: linear-gradient(160deg, color-mix(in srgb, var(--mudanza-fondo) 82%, var(--mudanza-lavado, var(--mudanza-fondo)) 4%), var(--mudanza-fondo) 62%);
  padding-block: 16px;
}

/* EL ESCUDO ES LA ÚNICA COSA A COLOR bajando: no lleva más tratamiento que el
   rescate de `marcaDeEscudo()` y una sombra. */
.mudanza__escudo {
  width: 60px;
  height: 60px;
  --halo: 1.2px;
  object-fit: contain;
  flex: none;
  filter: var(--halo-filtro, ) drop-shadow(0 3px 8px hsl(0 0% 0% / 0.55));
}
.mudanza__banda .mudanza__escudo { margin-left: 18px; }
.mudanza__banda--lisa .mudanza__escudo { margin-left: 0; width: 52px; height: 52px; }

.mudanza__id { min-width: 0; flex: 1; }

/* SIN OPACIDAD: la jerarquía la hacen el tamaño, el peso y las versalitas. */
.mudanza__eco {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* EL DATO GRANDE ES LA CATEGORÍA NUEVA: es lo que el DT va a mirar todos los
   sábados del año que viene. Condensada para que «Primera B Metropolitana»
   entre en un renglón. */
.mudanza__titulo {
  margin-top: 3px;
  font-size: var(--fs-3xl);
  line-height: 1;
  font-weight: 800;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.015em;
}
.mudanza__banda--lisa .mudanza__titulo { font-size: var(--fs-2xl); }

.mudanza__club { display: block; margin-top: 3px; font-size: var(--fs-md); }

/* La marca de la categoría sobre un plato claro: los logos de división son
   dibujos oscuros y sobre la banda desaparecerían. */
.mudanza__liga {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-left: auto;
  flex: none;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  box-sizing: content-box;
}

.mudanza__cuerpo { padding: 16px 26px 0; }

/* EL PIE, igual en las cinco: el aviso de la carta a la izquierda y el botón a
   la derecha. En el teléfono se apilan y el botón va a lo ancho. */
.mudanza__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: 16px 26px 22px;
}
.mudanza__pie .action { flex: none; margin-left: auto; }
.mudanza__aviso { font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   B · LA RAYA FINAL
   --------------------------------------------------------------------------
   Nueve filas alrededor de tu puesto y de la raya que te movió. Las cifras de
   las tres tarjetas viejas son TU FILA: no se repiten afuera.
   -------------------------------------------------------------------------- */

.mudanza__leyenda {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.mudanza__tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.mudanza__tabla th {
  padding: 0 6px 5px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-align: right;
  color: var(--text-muted);
}
.mudanza__tabla th:nth-child(2) { text-align: left; }
.mudanza__tabla td {
  height: 30px;
  padding: 0 6px;
  border-top: 1px solid var(--line-hairline);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}
.mudanza__tabla td:first-child { width: 28px; color: var(--text-muted); }
.mudanza__tabla td:nth-child(2) { text-align: left; color: var(--text-primary); }
.mudanza__tabla td:last-child { width: 40px; font-weight: 700; color: var(--text-primary); }
.mudanza__equipo { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mudanza__equipo img { width: 20px; height: 20px; object-fit: contain; flex: none; }
/* Los que bajan con vos, apagados como en una cancha vacía. */
.mudanza__fila--fuera td { color: var(--text-muted); }
.mudanza__fila--fuera .mudanza__equipo img { filter: grayscale(1) brightness(0.75); }
/* TU FILA: naranja en la letra y el lavado de pertenencia, nunca violeta ni
   acento (no se pulsa). */
.mudanza__fila--yo td { background: var(--tuyo-wash); color: var(--text-primary); }
.mudanza__fila--yo td:first-child { box-shadow: inset 3px 0 0 var(--tuyo); color: var(--tuyo); }
.mudanza__fila--yo td:nth-child(2) { color: var(--tuyo); font-weight: 700; }
/* LA RAYA: una línea clara con su rótulo, una fila propia de 20 px para que el
   rótulo no tape ningún nombre. */
.mudanza__raya td {
  height: 20px;
  padding: 0 0 0 34px;
  border-top: 2px solid var(--ink-200);
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-200);
}
.mudanza__mas td {
  height: 22px;
  border-top: 0;
  text-align: left;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.mudanza__remate { margin-top: 12px; font-size: var(--fs-md); line-height: 1.4; color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   C · LA CARTA DEL PRESIDENTE
   --------------------------------------------------------------------------
   Desde el 11/10/2026 es la pieza GRANDE: 1120 px en vez de los 680 de las
   otras («más grande, más detallado, más elaborado»). Un lado con el color del
   club que cuenta la mudanza entera —el salto con sus dos marcas, la puerta,
   seis cifras y el año fecha a fecha— y una mesa con la carta en papel, su
   membrete con lugar y año, el escudo de agua y el sello junto a la firma, y
   debajo lo que viene.

   ENTRA SIN RODAR: lo que se ajusta al alto de la ventana es la letra del
   papel y el aire, nunca la caja (memoria «los modales sin scroll»).
   -------------------------------------------------------------------------- */

.mudanza--carta {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(var(--alto-ventana, 100dvh) - 32px);
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
}

.mudanza__lado {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 28px 26px;
  color: var(--mudanza-tinta, var(--ink-100));
  background:
    linear-gradient(112deg, var(--mudanza-franja) 0 4%, transparent 4.3%),
    linear-gradient(170deg, var(--mudanza-fondo), color-mix(in srgb, var(--mudanza-fondo) 58%, black));
}
.mudanza__lado-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mudanza__lado .mudanza__escudo { width: 104px; height: 104px; margin-left: 10px; }
.mudanza__lado .mudanza__eco {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.mudanza__lado .mudanza__titulo { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.mudanza__lado .mudanza__club { font-size: var(--fs-md); opacity: 0.86; }

/* EL SALTO: de dónde a dónde, con las dos marcas sobre su plato claro (los
   logos de división son dibujos oscuros). La línea de puntos es el escalón. */
.mudanza__salto {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mudanza__salto::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 30px;
  border-left: 2px dotted color-mix(in srgb, currentColor 45%, transparent);
}
.mudanza__salto li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.2; }
.mudanza__salto small {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.75;
}
.mudanza__salto-logo {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 4px;
  object-fit: contain;
  border-radius: 6px;
  background: #f4f4f7;
}
.mudanza__salto-de { opacity: 0.7; }
.mudanza__salto-de .mudanza__salto-logo { filter: grayscale(1); }

/* La puerta por la que se pasó: «Subió como campeón». */
.mudanza__puerta {
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* SEIS CIFRAS EN DOS FILAS: la cifra arriba y el rótulo abajo (la Regla de la
   Etiqueta de `app.css`). El puesto va en naranja: es tu fila. */
.mudanza__cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 10px;
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.mudanza__cifras div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mudanza__cifras dd {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mudanza__cifras dt { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.78; }
.mudanza__cifras small { font-size: var(--fs-xs); font-weight: 500; }

/* El año, fecha a fecha: el mismo riel de la pieza D, en chico. */
.mudanza__ano { display: grid; gap: 6px; }
.mudanza__ano-rot { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.78; }
.mudanza__lado .mudanza__riel { gap: 2px; }
.mudanza__lado .mudanza__f { height: 14px; }
.mudanza__lado .mudanza__f--G { background: currentColor; }
.mudanza__lado .mudanza__f--E { background: color-mix(in srgb, currentColor 45%, transparent); }
.mudanza__lado .mudanza__f--P { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent); }

/* LA MESA */
.mudanza__mesa {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 30px 30px 0;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--mudanza-fondo) 16%, transparent), transparent 70%), var(--bg-panel);
}
.mudanza__mesa .mudanza__pie { padding: 4px 0 24px; }

/* EL PAPEL: la única superficie clara de la escena, y por eso tinta oscura y
   propia. Apenas torcido, como una hoja apoyada. */
.mudanza__carta {
  position: relative;
  overflow: hidden;
  padding: 30px 40px 24px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent 30%),
    #f3efe6;
  color: #1e1c17;
  box-shadow: 0 1px 0 #fffaf0 inset, 0 14px 34px hsl(0 0% 0% / 0.5), 0 2px 6px hsl(0 0% 0% / 0.3);
  rotate: -0.5deg;
}
/* El escudo de agua: el papel con membrete se imprime con el escudo detrás. */
.mudanza__agua {
  position: absolute;
  right: -40px;
  bottom: -30px;
  width: 300px;
  height: 300px;
  object-fit: contain;
  opacity: 0.06;
  filter: grayscale(1);
  pointer-events: none;
}
.mudanza__membrete {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #cfc7b5;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f584a;
  line-height: 1.35;
}
.mudanza__membrete-escudo { width: 46px; height: 46px; object-fit: contain; }
.mudanza__membrete strong { display: block; font-size: var(--fs-sm); color: #1e1c17; letter-spacing: 0.05em; }
.mudanza__lugar { margin-left: auto; text-align: right; font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; font-style: italic; }
.mudanza__texto { position: relative; }
.mudanza__carta p { margin-bottom: 12px; font-size: var(--fs-lg); line-height: 1.6; }
.mudanza__despedida {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 22px;
  margin-top: 8px;
}
.mudanza__firma { margin: 0 !important; text-align: right; font-size: var(--fs-xs) !important; color: #5f584a; }
.mudanza__firma span { display: block; font-size: var(--fs-xl); font-style: italic; font-weight: 300; color: #1e1c17; }

/* EL SELLO: el escudo dentro de un aro con el nombre del club, en la tinta de
   la franja y torcido, como un sello de goma que se apoyó rápido. */
.mudanza__sello {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  flex: none;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--mudanza-fondo) 70%, #1e1c17);
  box-shadow: inset 0 0 0 4px #f3efe6, inset 0 0 0 5px color-mix(in srgb, var(--mudanza-fondo) 70%, #1e1c17);
  rotate: -14deg;
  opacity: 0.72;
}
.mudanza__sello img { width: 34px; height: 34px; object-fit: contain; filter: grayscale(0.3); }
.mudanza__sello i {
  position: absolute;
  bottom: 9px;
  left: 8px;
  right: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  text-align: center;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mudanza-fondo) 70%, #1e1c17);
}

/* LO QUE VIENE: el año nuevo en un renglón de datos. */
.mudanza__viene {
  display: grid;
  gap: 8px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-950);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.mudanza__viene-rot { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.mudanza__viene ul {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* La cifra arriba y lo que es abajo, como las del lado. */
.mudanza__viene li { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-xs); }
.mudanza__viene b { font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mudanza__viene-ancho b { font-size: var(--fs-md); padding-top: 4px; }

/* VENTANAS PETISAS: la letra del papel y el aire se achican antes que nada. */
@media (max-height: 820px) {
  .mudanza__lado { padding: 22px 22px; gap: 11px; }
  .mudanza__lado .mudanza__escudo { width: 80px; height: 80px; }
  .mudanza__mesa { padding: 22px 24px 0; gap: 12px; }
  .mudanza__carta p { font-size: var(--fs-md); line-height: 1.5; margin-bottom: 8px; }
  .mudanza__carta { padding: 22px 30px 18px; }
  .mudanza__viene b { font-size: var(--fs-lg); }
  .mudanza__membrete { margin-bottom: 12px; padding-bottom: 10px; }
  .mudanza__mesa .mudanza__pie { padding-bottom: 18px; }
  .mudanza__sello { width: 62px; height: 62px; }
  .mudanza__ano { display: none; }
}

/* De tablet para abajo, una columna: el lado arriba como banda. */
@media (max-width: 860px) {
  .mudanza--carta { grid-template-columns: 1fr; overflow-y: auto; }
  .mudanza__lado { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 16px 18px; }
  .mudanza__lado-cab { display: contents; }
  .mudanza__lado .mudanza__escudo { width: 56px; height: 56px; margin: 0; grid-row: span 2; }
  .mudanza__lado .mudanza__eco { justify-self: start; }
  .mudanza__lado .mudanza__titulo { font-size: var(--fs-2xl); }
  .mudanza__salto, .mudanza__puerta, .mudanza__ano { display: none; }
  .mudanza__cifras { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; }
  .mudanza__cifras dd { font-size: var(--fs-md); }
  .mudanza__mesa { padding: 14px 14px 0; gap: 10px; }
  .mudanza__mesa .mudanza__pie { padding: 4px 0 18px; }
  .mudanza__carta { padding: 14px 16px 10px; rotate: none; }
  .mudanza__carta p { font-size: var(--fs-xs); margin-bottom: 6px; }
  .mudanza__lugar, .mudanza__agua { display: none; }
  .mudanza__membrete-escudo { width: 32px; height: 32px; }
  .mudanza__sello { width: 52px; height: 52px; }
  .mudanza__sello img { width: 24px; height: 24px; }
  .mudanza__sello i { display: none; }
  .mudanza__firma span { font-size: var(--fs-lg); }
  .mudanza__viene { padding: 10px 12px; font-size: var(--fs-xs); }
  .mudanza__viene ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mudanza__viene b { font-size: var(--fs-md); }
}

/* EN EL TELÉFONO TIENE QUE ENTRAR ENTERA (medido a 375×667: 907 px de alto
   contra 692 antes de esto). Se queda lo que cuenta la mudanza —la categoría,
   tres cifras, la carta y el año que viene en un renglón— y se van los adornos:
   el sello, el rival de la fecha 1 y tres de las seis cifras. */
@media (max-width: 520px) {
  .mudanza__lado { padding: 12px 14px; gap: 6px 12px; }
  .mudanza__lado .mudanza__escudo { width: 46px; height: 46px; }
  .mudanza__lado .mudanza__titulo { font-size: var(--fs-xl); }
  .mudanza__lado .mudanza__club { font-size: var(--fs-xs); }
  .mudanza__cifras { gap: 6px; padding-top: 8px; }
  .mudanza__cifras div:nth-child(n + 4) { display: none; }
  .mudanza__cifras dd { font-size: var(--fs-md); }
  .mudanza__mesa { padding: 10px 10px 0; gap: 8px; }
  .mudanza__carta { padding: 12px 14px 8px; }
  .mudanza__carta p { font-size: 13px; line-height: 1.42; margin-bottom: 5px; }
  .mudanza__membrete { margin-bottom: 8px; padding-bottom: 6px; gap: 8px; }
  .mudanza__membrete-escudo { width: 26px; height: 26px; }
  .mudanza__sello { display: none; }
  .mudanza__despedida { margin-top: 2px; }
  .mudanza__firma span { font-size: var(--fs-md); }
  .mudanza__viene { gap: 4px; padding: 8px 12px; }
  .mudanza__viene ul { display: flex; flex-wrap: wrap; gap: 2px 16px; }
  .mudanza__viene li { flex-direction: row; align-items: baseline; gap: 4px; white-space: nowrap; }
  .mudanza__viene-ancho { display: none !important; }
  .mudanza__viene b { font-size: var(--fs-sm); }
  .mudanza__mesa .mudanza__pie { padding: 2px 0 12px; }
}

/* --------------------------------------------------------------------------
   D · EL CAMINO DE VUELTA
   --------------------------------------------------------------------------
   Dos rieles: el año que terminó, una celda por partido de liga —ganado lleno,
   empatado a medias, perdido hueco: por BRILLO y nunca por rojo y verde—, y el
   año que viene vacío, con la primera fecha, la última de gracia y lo que se
   juega al final.
   -------------------------------------------------------------------------- */

.mudanza__tramo + .mudanza__tramo { margin-top: 20px; }
.mudanza__tramo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.mudanza__tramo-cab b { font-size: var(--fs-md); }
.mudanza__tramo-cab span { font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.mudanza__riel { display: grid; grid-template-columns: repeat(var(--fechas), minmax(0, 1fr)); gap: 2px; }
.mudanza__f { display: block; height: 22px; border-radius: 2px; }
.mudanza__f--G { background: var(--ink-100); }
.mudanza__f--E { background: var(--ink-500); }
.mudanza__f--P { box-shadow: inset 0 0 0 1px var(--ink-500); }
.mudanza__riel--vacio .mudanza__f { height: 28px; background: var(--bg-row); box-shadow: inset 0 0 0 1px var(--line-hairline); }
.mudanza__riel--vacio .mudanza__f--uno { background: var(--ink-200); }
.mudanza__claves { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-size: var(--fs-2xs); color: var(--text-muted); }
.mudanza__claves .mudanza__f { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.mudanza__claves-dato { margin-left: auto; color: var(--text-secondary); }
.mudanza__hitos { position: relative; height: 70px; }
.mudanza__hito {
  position: absolute;
  top: 0;
  height: 30px;
  padding: 4px 0 0 6px;
  border-left: 1px solid var(--ink-300);
  font-size: var(--fs-2xs);
  line-height: 1.3;
  color: var(--text-secondary);
  white-space: nowrap;
}
.mudanza__hito b { display: block; font-size: var(--fs-xs); color: var(--text-primary); }
.mudanza__hito--bajo { height: 70px; padding-top: 38px; }
/* La primera tapa la línea de la de gracia cuando el rival tiene nombre largo. */
.mudanza__hito:first-child { z-index: 1; height: auto; padding-bottom: 2px; padding-right: 8px; background: var(--bg-panel); }
.mudanza__hito--fin { right: 0; padding: 4px 6px 0 0; border-left: 0; border-right: 1px solid var(--ink-300); text-align: right; }

/* --------------------------------------------------------------------------
   E · CANCHA VACÍA
   --------------------------------------------------------------------------
   La foto a sangre detrás de todo el diálogo y el texto sobre negro al 90 %:
   el texto blanco directo sobre una foto ocupada se pierde (memoria «la
   lámina sobre foto real»). Bajando la foto pierde el color; subiendo se tiñe
   del club abajo.
   -------------------------------------------------------------------------- */

.mudanza--cancha {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 540px;
  color: #fff;
  border-color: #2a2a33;
}
.mudanza__foto { position: absolute; inset: 0; z-index: -2; background: center 40% / cover #0b0d12; }
.mudanza--caida .mudanza__foto { filter: grayscale(0.85) brightness(0.8) contrast(1.05); }
.mudanza__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(8 9 13 / 0.05) 0%, rgb(8 9 13 / 0.25) 35%, rgb(8 9 13 / 0.9) 60%, rgb(8 9 13 / 0.97) 100%);
}
.mudanza--subida .mudanza__velo {
  background: linear-gradient(180deg, rgb(8 9 13 / 0) 0%, rgb(8 9 13 / 0.2) 35%, color-mix(in srgb, var(--mudanza-fondo) 30%, rgb(8 9 13 / 0.92)) 62%, rgb(8 9 13 / 0.97) 100%);
}
.mudanza__chip {
  position: absolute;
  top: 18px;
  left: 22px;
  padding: 6px 12px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--r-pill);
  background: rgb(8 9 13 / 0.72);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mudanza--cancha .mudanza__cuerpo { padding: 0 28px; }
.mudanza__quien { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: 600; }
.mudanza__quien .mudanza__escudo { width: 44px; height: 44px; }
.mudanza__grande {
  margin: 10px 0 !important;
  font-size: 5.4rem;
  line-height: 0.88;
  font-weight: 900;
  font-stretch: 75%;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
/* Los nombres largos —«Brasileirão Série A», «Primera B Metropolitana»— bajan
   un escalón para entrar en dos renglones. */
.mudanza__grande { text-wrap: balance; }
.mudanza__frase { max-width: 540px; font-size: var(--fs-lg); line-height: 1.35; color: rgb(255 255 255 / 0.86); }
.mudanza__frase strong { color: #fff; font-weight: 600; }
.mudanza__linea { display: flex; margin: 16px 0 0; border-top: 1px solid rgb(255 255 255 / 0.2); }
.mudanza__linea div { display: flex; flex-direction: column; margin-right: 18px; padding: 10px 18px 0 0; border-right: 1px solid rgb(255 255 255 / 0.16); }
.mudanza__linea div:last-child { border-right: 0; }
.mudanza__linea dd { margin: 0; font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.mudanza__linea dt { font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(255 255 255 / 0.72); }
.mudanza--cancha .mudanza__pie { padding-top: 18px; }
.mudanza--cancha .mudanza__aviso { color: rgb(255 255 255 / 0.72); }

/* --------------------------------------------------------------------------
   F · FICHA SECA
   --------------------------------------------------------------------------
   Sin foto ni banda: pizarra y cal. Una oración grande y cinco renglones de
   34 px, como una ficha del juego. La única pieza sin el color del club: el
   escudo lo pone solo.
   -------------------------------------------------------------------------- */

.mudanza--ficha .mudanza__cuerpo { padding: 24px 28px 0; }
.mudanza__arriba { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mudanza--ficha .mudanza__eco { color: var(--label-color); }
.mudanza__movida { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.mudanza__marca { width: 26px; height: 26px; object-fit: contain; padding: 3px; border-radius: var(--r-pill); background: var(--ink-100); box-sizing: content-box; }
.mudanza__marca--vieja { filter: grayscale(1); opacity: 0.55; }
.mudanza__titular { display: flex; align-items: center; gap: 18px; margin: 16px 0 18px; }
.mudanza__titular .mudanza__escudo { width: 74px; height: 74px; }
.mudanza__oracion { font-size: var(--fs-editorial); line-height: 0.95; font-weight: 800; font-stretch: var(--wd-condensed); letter-spacing: -0.015em; }
.mudanza__ficha { display: grid; grid-template-columns: 170px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line-hairline); }
.mudanza__ficha dt, .mudanza__ficha dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  min-height: 34px;
  margin: 0;
  border-bottom: 1px solid var(--line-hairline);
  font-size: var(--fs-sm);
}
.mudanza__ficha dt { color: var(--text-muted); }
.mudanza__ficha dd { font-variant-numeric: tabular-nums; }
.mudanza__ficha small { font-size: var(--fs-sm); color: var(--text-muted); }
.mudanza__tuyo { color: var(--tuyo); font-weight: 700; }

/* --------------------------------------------------------------------------
   PANTALLA CHICA
   --------------------------------------------------------------------------
   Sin la diagonal (en 344 el texto cruzaría la franja: ver `bienvenida.css`),
   la tabla sin las columnas que sobran, la carta debajo del lado y el pie
   apilado con el botón a lo ancho.
   -------------------------------------------------------------------------- */

@media (max-width: 460px) {
  .mudanza__banda, .mudanza__banda--lisa {
    padding: 14px 16px;
    gap: 10px;
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--mudanza-fondo) 82%, var(--mudanza-lavado, var(--mudanza-fondo)) 4%), var(--mudanza-fondo) 62%);
  }
  .mudanza__banda .mudanza__escudo { width: 44px; height: 44px; margin-left: 0; --halo: 0.94px; }
  .mudanza__titulo, .mudanza__banda--lisa .mudanza__titulo { font-size: var(--fs-xl); }
  .mudanza__liga { width: 28px; height: 28px; padding: 4px; }
  .mudanza__cuerpo { padding: 12px 14px 0; }
  .mudanza__pie { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px 18px; }
  .mudanza__pie .action { width: 100%; margin-left: 0; }
  .mudanza__aviso { text-align: center; }

  .mudanza__opc { display: none; }
  .mudanza__leyenda span:last-child { display: none; }
  .mudanza__mas { display: none; }
  .mudanza__tabla td { height: 27px; padding: 0 4px; }
  .mudanza__raya td { padding-left: 30px; }
  .mudanza__remate { font-size: var(--fs-sm); }

  /* La carta tiene su propio corte a 860 px, junto a sus reglas (§C). */
  .mudanza__lado .mudanza__titulo { font-size: var(--fs-xl); }

  .mudanza__tramo-cab { flex-direction: column; gap: 2px; }
  .mudanza__tramo-cab span { text-align: left; font-size: var(--fs-xs); }
  .mudanza__riel { gap: 1px; }
  .mudanza__claves-dato { margin-left: 0; flex-basis: 100%; }
  /* En 311 px los hitos no entran colgados del riel: van en lista. */
  .mudanza__hitos { display: grid; gap: 6px; height: auto; margin-top: 8px; }
  .mudanza__hito, .mudanza__hito--bajo, .mudanza__hito--fin {
    position: static; height: auto; padding: 0 0 0 8px; background: none;
    border-left: 1px solid var(--ink-300); border-right: 0; text-align: left; white-space: normal;
  }

  .mudanza--cancha { min-height: 500px; }
  .mudanza--cancha .mudanza__cuerpo { padding: 0 16px; }
  .mudanza__chip { top: 14px; left: 16px; }
  .mudanza__grande { font-size: 3.4rem; }
  .mudanza__frase { font-size: var(--fs-md); }
  .mudanza__linea { display: grid; grid-template-columns: 1fr 1fr; }
  .mudanza__linea div { margin: 0; padding: 8px 0 0; border-right: 0; }
  .mudanza__linea dd { font-size: var(--fs-lg); }

  .mudanza--ficha .mudanza__cuerpo { padding: 18px 16px 0; }
  .mudanza__movida > span { display: none; }
  .mudanza__titular { gap: 12px; margin: 12px 0 14px; }
  .mudanza__titular .mudanza__escudo { width: 52px; height: 52px; }
  .mudanza__oracion { font-size: var(--fs-3xl); }
  .mudanza__ficha { grid-template-columns: 96px minmax(0, 1fr); }
  .mudanza__ficha dt, .mudanza__ficha dd { min-height: 32px; padding: 5px 0; font-size: var(--fs-xs); }
  .mudanza__ficha small { font-size: var(--fs-xs); }
}

/* --------------------------------------------------------------------------
   LA ENTRADA, QUE ENTRA POR LADOS OPUESTOS
   --------------------------------------------------------------------------
   El ascenso entra desde abajo creciendo, como todo diálogo que llega; el
   descenso desde arriba encogiéndose apenas: la única animación del juego que
   baja. Quien pidió que no se mueva nada, que no se mueva nada.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .mudanza--caida[open]  { animation: mudanza-cae 320ms var(--ease); }
  .mudanza--subida[open] { animation: mudanza-sube 320ms var(--ease); }

  @keyframes mudanza-cae {
    from { opacity: 0; transform: translateY(-14px) scale(1.02); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes mudanza-sube {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
}

/* menu.css */
/* ==========================================================================
   El Camino DT — El menú del botón derecho
   --------------------------------------------------------------------------
   Cero tokens nuevos. Es la superficie del diálogo —panel sobre línea fuerte—
   con las medidas de la fila de estado: 24px de alto útil, icono apagado a la
   izquierda y texto en 13px.

   SIN SOMBRA, a diferencia del diálogo. La única sombra del sistema existe
   porque un modal tapa la pantalla entera y tiene que despegarse del plano;
   este menú mide 200px y se apoya sobre lo que estabas mirando, así que le
   alcanza con un borde en Línea Fuerte, que es un paso más claro que
   cualquier borde de la pantalla que hay debajo.
   ========================================================================== */

.menu {
  position: fixed;
  /* Por encima del chrome pegajoso (20), que es lo más alto del sistema. */
  z-index: var(--z-flotante);
  display: grid;
  /* `minmax(0, 1fr)` y no la columna automática: una fila del menú lleva el
     texto de la acción a la izquierda y su pista a la derecha —«Cambiar el
     número · Ahora lleva el 2»— y las dos juntas piden más que el ancho máximo
     del menú. Con la columna midiéndose por su contenido, las filas se salían y
     el menú aparecía con una BARRA DE DESPLAZAMIENTO HORIZONTAL abajo, que en
     un menú de cinco renglones no es un control, es un defecto. Con la columna
     acotada a cero, `.menu__texto` hace lo que ya sabía hacer: recortarse. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  min-width: 200px;
  /* Y un poco más de ancho antes de recortar nada: el menú de un futbolista
     lleva su nombre entero —«Ver la ficha de Lucas Ruiz»— y a 280 empezaba a
     comerse el apellido con una pista al lado que sí entraba. */
  max-width: 340px;
  max-height: calc(var(--alto-ventana) - 2 * var(--sp-4));
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-panel);
}

.menu__item {
  display: flex;
  align-items: center;
  /* Sin esto la fila se niega a bajar de su contenido —es el `min-width: auto`
     de todo elemento flexible— y la columna acotada de arriba no sirve de
     nada: el que tiene que ceder es el texto de la acción. */
  min-width: 0;
  gap: var(--sp-4);
  min-height: 26px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  font-size: var(--fs-md);
  color: var(--text-secondary);
  text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

/* CON EL DEDO, 44. La lista de los mínimos táctiles vive en `app.css` —«EL
   DEDO»— y ahí están los ochenta controles del juego; éste es la excepción que
   tiene que estar acá, porque `menu.css` se carga después de `app.css` y la
   regla base de arriba declara `min-height`: a igual especificidad ganaría la
   de este archivo, y el renglón de allá sería una regla muerta que se lee como
   si funcionara. Se corrigió después de escribirlo así y medir 30 px igual.

   POR QUÉ IMPORTA MÁS ACÁ QUE EN UNA TABLA. En una lista, errarle a un renglón
   por dos píxeles abre la ficha del futbolista de al lado y se vuelve; acá
   EJECUTA. Los renglones de este menú venden, mandan a la reserva, sacan del
   banco y cambian el número de la camiseta, y ninguno pregunta después. Un
   menú es la superficie donde el error de puntería es más caro del juego, y
   era la única que había quedado en 30.

   Y LA MISMA VARA QUE EL RESTO: `pointer: coarse` más el ancho, que es la
   pareja con la que `app.css` reparte los 44. Con qué se toca decide el
   mínimo; el ancho está para que una tableta apaisada, que muestra el juego en
   su forma de escritorio, no pierda densidad. */
@media (pointer: coarse) and (max-width: 860px) {
  .menu__item { min-height: 44px; }
}

.menu__item .i { color: var(--icon-quiet); }

/* El hueco de un ítem sin icono. Mide lo que mide un `.i--sm` para que el texto
   quede en la misma columna que el de los ítems que sí lo llevan. */
.menu__hueco { width: 13px; flex: none; }

/* El foco se dibuja como el hover y no sólo con el anillo: en un menú abierto
   con el teclado, el ítem enfocado ES la selección. */
.menu__item:focus {
  background: var(--bg-hover);
  color: var(--text-primary);
}
@media (hover: hover) {
  .menu__item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
}

.menu__item:focus .i { color: inherit; }
@media (hover: hover) {
  .menu__item:hover .i { color: inherit; }
}

/* Una acción que no se puede hacer se muestra apagada con su motivo al lado,
   igual que la tabla del plantel muestra el veto: esconderla dejaría al DT
   buscando una acción que él cree que existe. */
.menu__item[disabled] {
  color: var(--text-disabled);
  cursor: default;
  background: none;
}

.menu__item[disabled] .i { color: var(--text-disabled); }

.menu__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__pista {
  margin-left: auto;
  padding-left: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  /* Y cede antes de empujar. La pista la escribe el dato —el motivo por el que
     algo no se puede, que puede ser una frase entera— y sin esto no se recorta
     ninguna de las dos: el `max-width` del menú corta la pista contra el borde
     con `overflow: hidden`, o sea en silencio y sin puntos suspensivos. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El pie. Aparece sólo en el menú que no tenía ninguna acción que ofrecer —el
   mapa— y dice cómo llegar al menú del navegador. No es un ítem: no se enfoca,
   no se pulsa y no entra en el recorrido del teclado, así que se dibuja como lo
   que es, la letra chica de abajo, separada por la misma línea que separa los
   grupos. */
.menu__pie {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--line-hairline);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.menu__sep {
  height: 1px;
  margin: var(--sp-2) 0;
  border: 0;
  background: var(--line-hairline);
}

/* Aparece fundiéndose y no creciendo: el menú ya sale del punto que tocaste,
   que es toda la relación de causa que necesita. Esa decisión sigue en pie —el
   desplegable SÍ crece desde su botón porque su botón está en un sitio fijo de
   la pantalla y el menú nace bajo el puntero—; lo que faltaba era irse. */
.menu { animation: menu-aparece var(--dur-fast) var(--ease); }

@keyframes menu-aparece { from { opacity: 0; } }

/* Y SE VA, que hasta el 1/9/2026 no hacía: `menu.js` llamaba a `.remove()` y el
   menú desaparecía entre dos fotogramas después de haber llegado fundiéndose.
   Es la Regla de la Mitad que Falta —ver `movimiento.css`, punto 4— en el
   hermano del desplegable, y se resuelve igual: el guion pone la marca, espera
   lo que dura esto y recién ahí lo saca del DOM.

   Deja de recibir clics en el mismo instante en que empieza a irse. Importa más
   acá que en el desplegable: los ítems de este menú venden a un futbolista y lo
   mandan a la reserva, y un menú que ya se está yendo no puede aceptar el
   segundo clic de un doble clic apurado. */
.menu[data-yendose] {
  animation: menu-se-va var(--dur-fast) var(--ease-salida) forwards;
  pointer-events: none;
}

@keyframes menu-se-va { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .menu { animation: none; }
  /* La salida no se apaga, se acorta: la regla global de `app.css` la deja en
     1ms, y su `forwards` es lo que mantiene al menú invisible hasta que el
     guion lo saca. Con `none` se quedaría a la vista los 140ms de la espera. */
  .menu[data-yendose] { animation-duration: 1ms; }
}