/* ==========================================================================
   El Camino DT — La vuelta olímpica
   --------------------------------------------------------------------------
   La segunda —y última— pantalla del juego que se pinta con los colores del
   club en vez de con la paleta de la casa. La otra es la bienvenida, y son las
   dos caras de lo mismo: el día que llegás y el día que ganás. Todo lo que hay
   en el medio vuelve a «pizarra y cal», que es lo que aguanta ocho horas de
   tabla.

   Comparte forma con la bienvenida a propósito —banda de color arriba, datos
   abajo, un botón— y NO comparte clases. Se pensó reusar `.saludo`: no se hizo
   porque las dos escenas quieren cosas distintas de la banda. La bienvenida
   presenta a un club y su dato grande es el nombre; ésta presenta un TÍTULO y
   su dato grande es el nombre del torneo, con el club debajo. Compartir clases
   habría dejado a la primera pagando por lo que necesita la segunda cada vez
   que una de las dos se toque.

   Los tres colores llegan como variables desde `vuelta.js`, ya elegidos por
   contraste. Acá no se decide ninguno — esta hoja sólo los coloca.
   ========================================================================== */

.vuelta {
  /* 680 Y NO 520. Con 520 el diálogo se leía como un aviso del sistema en el
     medio de una pantalla de 1760, y las dos notas de abajo —«apertura de tu
     carrera», «24 partidos · 37 goles»— se cortaban con puntos suspensivos. Es
     la escena más importante del juego y tiene que ocupar como tal; el resto de
     los diálogos se quedan donde estaban, que ninguno es esto. */
  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);
}

/* El velo va más oscuro que el de los otros diálogos y con más desenfoque. Es
   el único momento del juego en que lo de atrás no importa nada: detrás de una
   mesa de negociación está la tabla que hace falta consultar, y detrás de esto
   está un partido que ya terminó. */
.vuelta::backdrop {
  background: var(--velo);
  backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   LA BANDA
   --------------------------------------------------------------------------
   El color del club a pantalla completa, con la franja diagonal del segundo
   color: es la forma en que una camiseta se reconoce de lejos, y es lo mismo
   que hace la bienvenida.

   Más alta que la de la bienvenida —y es la única diferencia de medida entre
   las dos— porque acá la banda ES la escena. Abajo hay tres cifras; arriba está
   lo que pasó.

   LA FRANJA ENTRA POR LA IZQUIERDA Y SE CORTA ANTES DEL TEXTO: acá abajo está
   el nombre del título, que es lo más largo que dice esta pantalla —y el que la
   vara mide con «Copa de la División Profesional»—. El argumento entero y lo
   que se midió están en `bienvenida.css`, que es donde nació esta banda; en dos
   palabras, la tinta se elige contra el FONDO y la franja es el otro polo de la
   camiseta, así que una franja debajo de una letra es una letra que no se lee
   en 1.221 de 1.656 clubes.
   -------------------------------------------------------------------------- */

.vuelta__banda {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 28px;
  color: var(--club-tinta);
  background:
    linear-gradient(112deg, var(--club-franja) 0 9%, transparent 9.4%),
    linear-gradient(160deg, color-mix(in srgb, var(--club-fondo) 88%, var(--club-lavado, var(--club-fondo)) 12%), var(--club-fondo) 62%);
  /* La línea de cierre sale DEL COLOR DEL CLUB, oscurecido: un negro fijo
     funciona sobre el azul de Boca y se ve sucio sobre el celeste de Racing. */
  border-bottom: 1px solid color-mix(in srgb, var(--club-fondo) 55%, black);
}

.vuelta__escudo {
  width: 84px;
  height: 84px;
  --halo: 1.5px;
  object-fit: contain;
  flex: none;
  /* El escudo tiene que despegarse del fondo aunque compartan color: el celeste
     de Racing sobre celeste es un escudo que desaparece.
     El halo del rescate va DELANTE y se compone acá: `filter` no se suma. */
  filter: var(--halo-filtro, ) drop-shadow(0 3px 8px hsl(0 0% 0% / 0.45));
}

.vuelta__id { min-width: 0; }

/* SIN OPACIDAD, y es de las cinco bandas: `opacity` no apaga una tinta, la
   mezcla con el fondo que tiene debajo, y en la coronación eso dejaba 768 de
   los 1.673 clubes por debajo de 4,5:1 contra los 191 del lavado solo. La
   jerarquía la hacen el tamaño, el peso, las mayúsculas y el `tracking`. La
   medición entera está en `bienvenida.css`. */
.vuelta__eco {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* EL NOMBRE DEL TORNEO ES EL DATO GRANDE, y es lo que separa esta escena de la
   bienvenida. Ahí el titular es el club porque lo que pasó es que llegaste
   acá; acá el titular es el título porque el club ya se sabe.

   Condensada y ajustada: «Copa Libertadores» y «Supercopa Argentina» tienen que
   entrar en un renglón sobre un diálogo de 680, y partidos en dos pierden el
   golpe. */
.vuelta__titulo {
  margin: 4px 0 3px;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.015em;
}

.vuelta__club { font-size: var(--fs-lg); }

/* La marca del torneo sobre un plato claro, igual que el logo de la liga en la
   bienvenida y por el mismo motivo: los logos de división y los trofeos son
   dibujos oscuros, y sobre el rojo de Independiente o el bordó de Lanús
   desaparecen. Un logo que sólo se ve en la mitad de los clubes es peor que no
   ponerlo. */
.vuelta__marca {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-left: auto;
  flex: none;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  box-sizing: content-box;
}

/* --------------------------------------------------------------------------
   LOS DATOS
   --------------------------------------------------------------------------
   Tres, y los tres salen de lo que la carrera ya sabe: cuántos de éste llevás,
   quién hizo los goles y cómo fue la campaña. Ninguno se inventa.

   SON TRES O SON DOS. Un plantel sin goleador y una campaña sin partidos son
   estados posibles, y `vuelta.js` no dibuja la tarjeta que no tiene dato: tres
   cajas con un guion adentro se leen como una pantalla que no cargó. Por eso la
   retícula es `auto-fit` y no `repeat(3)` — acá el número de columnas SÍ
   depende de cuántas hay, que es lo contrario de la vitrina.
   -------------------------------------------------------------------------- */

.vuelta__cuerpo { padding: 22px 28px 8px; }

.vuelta__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}

.vuelta__dato {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 15px 18px;
  background: var(--bg-row);
  min-width: 0;
}

.vuelta__valor {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.vuelta__label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.vuelta__nota {
  font-size: var(--fs-sm);
  /* `--text-muted` y no `--text-disabled`: esto es un DATO de la carrera —el
     goleador, las fechas, los goles—, no un control apagado. Sobre el fondo del
     `.vuelta__dato` —que es fijo, `rgb(28,28,44)`, y no el color del club: los
     colores del club pintan sólo la cabecera— daba **2,67** con piso 4,5, y con
     `--text-muted` da 4,99.

     Nadie lo había visto porque esta superficie NO SE MEDÍA: el arnés le pasaba
     a `vueltaOlimpica()` una cadena donde va una entrada de
     `TITULOS_DEL_JUEGO`, el diálogo nunca se dibujaba y el informe contaba cero
     hallazgos. Es el cuarto sitio del día donde `--text-disabled` estaba
     escribiendo datos vivos. */
  color: var(--text-muted);
  /* Las notas apoyan en el mismo piso pase lo que pase arriba, y los nombres
     largos se cortan con puntos en vez de ensanchar su columna. */
  margin-top: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CENTRADO COMO LOS DEMÁS PIES DEL JUEGO (3/9/2026). No hereda de
   `.dialogo__pie` —esta placa tiene su propio marco y su propio padding— así
   que el valor está escrito dos veces a propósito y no por copia: son dos
   reglas con el mismo criterio. La importancia crece hacia la derecha y la
   fila va en el medio; el criterio y el porqué viven en `.dialogo__pie`
   (`app.css`), que es la que manda en los siete pies restantes. */
.vuelta__pie {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  padding: 20px 28px 24px;
}

/* --------------------------------------------------------------------------
   PANTALLA CHICA
   -------------------------------------------------------------------------- */

@media (max-width: 460px) {
  /* SIN LA DIAGONAL, Y ESTO ES DE LAS CUATRO BANDAS DEL JUEGO. En una de 344 el
     texto cruza la franja —el eco y el titular llegan a 328 y la franja empieza
     a los 201, medido— y ahí el texto se apoya sobre el segundo color del club.
     Eso sólo se lee cuando ese color es oscuro: **la tinta del club no llega a
     4,5:1 contra su propia franja en 1.221 de los 1.656 clubes (73,7 %)**, y el
     peor caso da 1,00 —blanco sobre el amarillo puro de UE Sant Andreu—, o sea
     el renglón directamente no está.

     ACÁ DECÍA ADEMÁS QUE «EN UNA BANDA DE 680 EL TEXTO TERMINA MUCHO ANTES DE
     LA FRANJA», y era la única parte que no se había medido: el titular llega
     al 83 % del ancho, y esa misma mañana del 8/9/2026 Alberto encontró la
     coronación de Sportivo Barracas con «Primera B Metropolitana» partido al
     medio por la franja blanca. Desde entonces la diagonal se corta antes del
     texto en TODOS los anchos —112°, del 0 al 9 %, como la mesa—, así que esta
     regla ya no es la única que lo evita; se queda porque en 344 la cuña
     tampoco tiene lugar. La medición entera y las dos correcciones que se
     probaron y no sirven están en `bienvenida.css`.

     Se saca la diagonal y no se mueve el texto porque la diagonal es lo
     prescindible: la identidad la siguen dando el color de la banda y el
     escudo, que es lo que se reconoce de lejos. Correrla a la derecha no
     alcanzaba —el texto llega al 95 % del ancho— y achicar la columna de texto
     deja los nombres largos en cuatro renglones.

     Escrito en las cuatro hojas y no en una compartida por el mismo motivo por
     el que las cuatro bandas no comparten clases; lo que se comparte es el
     porqué, y vive acá. */
  .vuelta__banda {
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--club-fondo) 88%, var(--club-lavado, var(--club-fondo)) 12%), var(--club-fondo) 62%);
  }

  .vuelta__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tres cifras en dos columnas dejaban una celda vacía abajo a la derecha y
     la tercera cortada («32 fechas · 4…»): la que queda sola ocupa el renglón. */
  .vuelta__dato:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .vuelta__titulo { font-size: var(--fs-xl); }
  .vuelta__escudo { width: 52px; height: 52px; --halo: 0.94px; }
  .vuelta__banda { padding: 18px 16px; gap: 12px; }
  .vuelta__pie .action { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   LA ENTRADA
   --------------------------------------------------------------------------
   Sube desde abajo y crece un pelo, como el resto de los diálogos, pero más
   lento y desde más lejos: 320 ms contra 220 y ocho píxeles más de recorrido.
   Es la única animación del juego que se permite durar, y dura porque este
   diálogo aparece una vez por título y no seis veces por mercado.

   Quien pidió que no se mueva nada, que no se mueva nada.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .vuelta[open] { animation: vuelta-entra 320ms var(--ease); }
  @keyframes vuelta-entra {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
}