/* ==========================================================================
   El Camino DT — La coronación del ascenso
   --------------------------------------------------------------------------
   La cuarta pantalla que se pinta con los colores del club, y la que menos se
   parece a las otras tres pese a compartir su forma. La bienvenida presenta un
   CLUB, la vuelta olímpica presenta un TÍTULO, la mudanza presenta una
   CATEGORÍA; ésta presenta un ESCALÓN — de dónde salís y adónde vas— y ése es
   el único elemento que no existe en ninguna de las otras.

   NO COMPARTE CLASES CON NINGUNA, por el mismo motivo que ellas no las
   comparten entre sí: las cuatro quieren cosas distintas de la banda, y
   compartir clases deja a cada una pagando por lo que necesitan las otras cada
   vez que una se toque.

   --------------------------------------------------------------------------
   EL ESCALÓN ES LA PIEZA, Y ES LA QUE HAY QUE DEFENDER
   --------------------------------------------------------------------------
   `.corona__salto` dibuja lo que la vuelta olímpica no sabe decir:

       EL AÑO QUE VIENE  ↑  PRIMERA DIVISIÓN

   Es literal y es la razón de que esta escena exista: un club del ascenso no da
   la vuelta por una copa, da la vuelta porque el año que viene juega en otro
   lado. Si alguna vez hay que sacrificar algo de esta pantalla por espacio, se
   sacrifican las tarjetas — el escalón, no.

   LA FLECHA ES DECORATIVA Y LO DICE (`aria-hidden`), así que lo que queda tiene
   que decirse solo: «El año que viene · Primera División» se lee entero sin
   ella. Ésa es la vara para cualquier flecha de este proyecto — si al sacarla la
   caja deja de significar, la flecha era un dato y no un dibujo, y entonces no
   puede estar oculta.
   ========================================================================== */

.corona {
  /* Los mismos 680 de la vuelta olímpica y de la mudanza. Que las tres midan
     igual es parte de que se lean como la misma familia. */
  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);
}

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

/* --------------------------------------------------------------------------
   LA BANDA
   --------------------------------------------------------------------------
   El color del club entero, como la vuelta olímpica: acá no se apaga nada, que
   es toda la diferencia con la caída de `mudanza.css`.

   LA FRANJA ENTRA POR LA IZQUIERDA Y SE CORTA ANTES DEL TEXTO, y ESTA banda es
   la que lo pidió: el titular de acá es el nombre de la categoría ganada, o sea
   el más largo de la familia —«Primera B Metropolitana», 23 caracteres— y es el
   que Alberto vio partido al medio por la franja blanca de Sportivo Barracas el
   8/9/2026. El argumento entero, la medición de los 1.656 clubes y las dos
   correcciones que se probaron y no sirven están en `bienvenida.css`; lo mide
   `herramientas/franja-bajo-el-texto.html`, y con `?control=1` se ve este mismo
   titular partido por la franja de antes.
   -------------------------------------------------------------------------- */

.corona__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%);
  border-bottom: 1px solid color-mix(in srgb, var(--club-fondo) 55%, black);
}

.corona__escudo {
  width: 84px;
  height: 84px;
  --halo: 1.5px;
  object-fit: contain;
  flex: none;
  /* 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));
}

.corona__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`. */
.corona__eco {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* EL DATO GRANDE ES LA CATEGORÍA QUE GANASTE, y no «Campeón de Liga». El nombre
   genérico ya está en el eco de arriba; lo que distingue a este campeonato de
   los otros doce del juego es CUÁL se ganó. */
.corona__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;
}

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

.corona__marca {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-left: auto;
  flex: none;
  padding: 6px;
  border-radius: var(--r-pill);
  /* El plato claro, como en la vuelta y en la bienvenida: los logos de división
     son dibujos oscuros y sobre el bordó de Los Andes desaparecen. */
  background: var(--ink-100);
  box-sizing: content-box;
}

/* --------------------------------------------------------------------------
   EL ESCALÓN
   -------------------------------------------------------------------------- */

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

.corona__salto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 14px 18px;
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  background: var(--bg-row);
  /* Los nombres largos —«Campeonato Brasileiro Série B»— se acomodan en dos
     renglones en vez de desbordar la caja. */
  flex-wrap: wrap;
  text-align: center;
}

/* EL RÓTULO, Y NO LA CATEGORÍA DE LA QUE SALÍS. Acá había un «Primera
   Nacional» tachado, que era bonito y era la tercera vez que esa categoría
   aparecía en la misma pantalla —el titular ya la dice—. Lo que faltaba no era
   el origen sino CUÁNDO, así que el hueco se llenó con eso. */
.corona__cuando {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* La flecha lleva el color del club: es la única pieza del cuerpo que lo trae,
   y por eso el escalón se lee como parte de la banda y no como un panel más. */
.corona__flecha {
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--club-franja);
  /* El segundo color de un club puede ser casi el fondo del panel —los clubes
     de negro y bordó— así que la flecha se apoya en su propio peso además del
     color: sin esto desaparece en unos cuantos. */
  font-weight: 700;
  text-shadow: 0 0 12px color-mix(in srgb, var(--club-franja) 45%, transparent);
}

/* Adónde vas: el dato encendido de la caja. */
.corona__hasta {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  color: var(--text-primary);
}


/* --------------------------------------------------------------------------
   LAS TARJETAS
   --------------------------------------------------------------------------
   `auto-fit` y no `repeat(3)`: la tercera —la ventaja— puede no existir, y la
   segunda tampoco si el campeón salió de un cuadro sin tabla. Es la misma
   retícula de la vuelta olímpica y por el mismo motivo.
   -------------------------------------------------------------------------- */

.corona__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;
}

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

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

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

/* EN `--text-muted` Y NO EN EL APAGADO. El barrido no la acusó —con la carrera
   sembrada `laVentajaDelCampeon()` devuelve null y la nota no se dibuja— pero
   es la HERMANA EXACTA de `.mudanza__nota`, que sí se midió en 2,67, con el
   mismo token sobre la misma clase de placa. Arreglar una y dejar la otra es
   dejar el defecto esperando a que la carrera del arnés cambie. */
.corona__nota {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Centrado como los demás pies del juego; el criterio vive en `.dialogo__pie`. */
.corona__pie {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  padding: 20px 28px 24px;
}

/* --------------------------------------------------------------------------
   PANTALLA CHICA
   --------------------------------------------------------------------------
   El escalón se acuesta: de dónde venís arriba, adónde vas abajo, y la flecha
   girada noventa grados entre los dos. En 375 px «Primera Nacional ↑ Primera
   División» en una línea deja los dos nombres partidos por la mitad, y ahí el
   dibujo deja de ser un escalón para ser cuatro palabras sueltas.

   Las tarjetas se acuestan por lo mismo que en `mudanza.css`: tres columnas de
   88 px cortan las notas, y un dato que no se termina de leer no es un dato
   chico, es un dato que no está.
   -------------------------------------------------------------------------- */

@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á. */
  .corona__banda {
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--club-fondo) 88%, var(--club-lavado, var(--club-fondo)) 12%), var(--club-fondo) 62%);
  }

  .corona__titulo { font-size: var(--fs-xl); }
  .corona__escudo { width: 52px; height: 52px; --halo: 0.94px; }
  .corona__banda { padding: 18px 16px; gap: 12px; }
  .corona__marca { width: 32px; height: 32px; padding: 4px; }
  .corona__cuerpo { padding: 18px 16px 6px; }

  .corona__salto {
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
  }
  .corona__flecha { transform: rotate(0deg); font-size: var(--fs-lg); }


  .corona__datos { grid-template-columns: 1fr; }
  .corona__dato {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'valor label' 'valor nota';
    column-gap: 14px;
    padding: 11px 14px;
  }
  .corona__valor {
    grid-area: valor;
    align-self: center;
    font-size: var(--fs-lg);
    min-width: 76px;
  }
  .corona__label { grid-area: label; }
  .corona__nota {
    grid-area: nota;
    margin-top: 0;
    white-space: normal;
    overflow: visible;
  }

  .corona__pie { padding: 16px 16px 20px; }
  .corona__pie .action { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   LA ENTRADA
   --------------------------------------------------------------------------
   Sube, como la vuelta olímpica y como el ascenso de `mudanza.css`: es el gesto
   de algo que llega. Los mismos 320 ms, que es lo que dura la única animación
   del juego a la que se le permite durar.

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

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