/* ==========================================================================
   El Camino DT — La bienvenida al club
   --------------------------------------------------------------------------
   La única pantalla del juego que se pinta con los colores del club en vez de
   con la paleta de la casa. Se lo permite porque dura un clic: el resto de la
   carrera vuelve a «pizarra y cal», que es lo que aguanta ocho horas de tabla.

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

.saludo {
  width: min(560px, 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;
  /* La misma y única sombra del sistema. Acá decía 64px de difuminado contra
     los 60 del diálogo genérico: cuatro píxeles que nadie decidió, sólo la
     huella de haberla copiado a mano. Un modal es un modal. */
  box-shadow: var(--sombra-modal);
}

.saludo::backdrop {
  background: var(--velo);
  backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   LA BANDA
   --------------------------------------------------------------------------
   El color del club, a pantalla completa por una vez. La franja diagonal del
   segundo color es lo que evita que un club de un solo tono se vea plano — y
   es la forma en que una camiseta se reconoce de lejos.
   -------------------------------------------------------------------------- */

.saludo__banda {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  color: var(--club-tinta);
  background:
    linear-gradient(115deg, transparent 58%, var(--club-franja) 58.4%, var(--club-franja) 72%, transparent 72.4%),
    linear-gradient(160deg, color-mix(in srgb, var(--club-fondo) 88%, white 12%), var(--club-fondo) 62%);
  /* La línea de cierre sale DEL COLOR DEL CLUB, oscurecido. Un negro fijo
     funcionaba sobre el azul de Boca y se veía sucio sobre el celeste de
     Racing; y además habría sido un color inventado fuera de la paleta, que es
     precisamente lo que esta pantalla no puede permitirse dos veces. */
  border-bottom: 1px solid color-mix(in srgb, var(--club-fondo) 55%, black);
}

.saludo__escudo {
  width: 56px;
  height: 56px;
  --halo: 1px;
  object-fit: contain;
  flex: none;
  /* El escudo tiene que despegarse del fondo aunque compartan color: Racing
     celeste sobre celeste es un escudo que desaparece.
     El halo del rescate va DELANTE y se compone acá: `filter` no se suma, y si
     esta regla lo declarara sola se llevaría puesto el de `.marca-halo`. */
  filter: var(--halo-filtro, ) drop-shadow(0 2px 5px hsl(0 0% 0% / 0.45));
}

.saludo__id { min-width: 0; }

.saludo__eco {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.72;
}

.saludo__club {
  margin: 2px 0 1px;
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.saludo__division {
  font-size: var(--fs-md);
  opacity: 0.86;
}

/* El logo de la liga va sobre un plato claro. Los cuatro logos de división son
   oscuros, y sobre el rojo de UAI Urquiza o el bordó de Lanús desaparecían: un
   logo que sólo se ve en la mitad de los clubes es peor que no ponerlo. */
.saludo__liga {
  width: 38px;
  height: 38px;
  object-fit: contain;
  margin-left: auto;
  flex: none;
  padding: 5px;
  border-radius: var(--r-pill);
  /* El blanco de la casa —`--ink-100`, apenas verdoso— y no un blanco puro:
     el plato es una superficie del sistema, aunque lo que descanse encima sea
     de otra marca. */
  background: var(--ink-100);
  box-sizing: content-box;
}

/* --------------------------------------------------------------------------
   EL CUERPO
   -------------------------------------------------------------------------- */

.saludo__cuerpo { padding: 16px 20px 4px; }

.saludo__frase {
  margin: 0 0 14px;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  /* La cita del presidente lleva un filete del color del club: es la única
     marca de identidad que baja de la banda al texto. */
  border-left: 2px solid var(--club-franja);
  padding-left: 12px;
}

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

.saludo__dato {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  background: var(--bg-row);
}

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

.saludo__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  /* Una etiqueta de dos renglones empuja su nota hacia abajo y rompe la línea
     que las cuatro comparten. Se mantienen en uno: si un rótulo no entra, el
     rótulo es demasiado largo — no la columna demasiado angosta. */
  white-space: nowrap;
}

.saludo__nota {
  font-size: var(--fs-xs);
  color: var(--text-disabled);
  /* Y las cuatro notas apoyan en el mismo piso, pase lo que pase arriba. */
  margin-top: auto;
  /* Los nombres largos —«Leonel Esteban Niklinski»— no pueden ensanchar una
     columna de cuatro. Se cortan con puntos y el nombre entero está en la
     carta. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saludo__firma {
  margin: 14px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.saludo__firma strong { color: var(--text-secondary); font-weight: 600; }
.saludo__firma span { display: block; color: var(--text-disabled); }

.saludo__pie {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px 18px;
}

/* --------------------------------------------------------------------------
   PANTALLA CHICA
   --------------------------------------------------------------------------
   Cuatro datos en fila no entran abajo de 460 px, y apretarlos deja «0,9 M»
   partido en dos renglones. Dos y dos.
   -------------------------------------------------------------------------- */

@media (max-width: 460px) {
  .saludo__datos { grid-template-columns: repeat(2, 1fr); }
  .saludo__club { font-size: var(--fs-xl); }
  .saludo__escudo { width: 46px; height: 46px; --halo: 0.83px; }
  .saludo__pie { flex-direction: column-reverse; }
  .saludo__pie .action { width: 100%; justify-content: center; }
}

/* Quien pidió que no se mueva nada, que no se mueva nada — y por eso todo esto
   sigue viviendo dentro del `no-preference`, que es lo que hace que con menos
   movimiento pedido la bienvenida aparezca y desaparezca seca.

   PASÓ DE FOTOGRAMAS A TRANSICIÓN el 1/9/2026, por lo mismo que los ocho
   modales de `movimiento.css`: una animación sobre `[open]` sólo puede correr
   mientras el atributo está puesto, así que la bienvenida llegaba con sus
   220ms y se apagaba de un cuadro al siguiente. Los números son los suyos y no
   los del sistema —ocho píxeles y 0,985 contra cuatro y 0,98— porque esta
   pantalla se toma su tiempo a propósito: es la única vez en la carrera que
   aparece. Lo que se comparte es el mecanismo, no la medida.

   `.saludo` no es un `.dialogo`, así que nada de la hoja del sistema le llega:
   esto hay que escribirlo acá. */
@media (prefers-reduced-motion: no-preference) {
  .saludo {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    transition:
      opacity var(--dur-fast) var(--ease-salida),
      transform var(--dur-fast) var(--ease-salida),
      overlay 220ms allow-discrete,
      display 220ms allow-discrete;
  }
  .saludo[open] {
    opacity: 1;
    transform: none;
    transition:
      opacity 220ms var(--ease),
      transform 220ms var(--ease),
      overlay 220ms allow-discrete,
      display 220ms allow-discrete;
  }
  @starting-style {
    .saludo[open] { opacity: 0; transform: translateY(8px) scale(0.985); }
  }
  /* Cerrada deja de ser modal en el acto y todavía se ve: sin esto se come un
     clic sobre lo que hay debajo. */
  .saludo:not([open]) { pointer-events: none; }
}