/* Promo banner — la tarjeta-enlace de promoción del home (y de la previa del
 * partido para los sorteos): icono + antetítulo + título + subtítulo, con una
 * identidad por VARIANTE:
 *   · `--biwenger`  Liga oficial Feeberse Score en Biwenger (rojo, copa, enlace externo)
 *   · `--ucl`       Champions League Premium (azul noche, abre el modal del código)
 *   · `--raffle`    sorteo de partido (components/raffle/_match_raffle_banner),
 *                    con un selector por sorteo para sus colores (`--sud26-boca-…`,
 *                    `--lpf26-river-…`)
 * La base solo pone la caja; los colores son de cada variante. Nació como banner
 * de Biwenger y se renombró el 2026-09-14 al ganar la segunda y tercera identidad.
 * CSS global (app.js) → sin FOUC.
 */
@layer components {
  .promo-banner {
    --promo-icon: 44px;
    --promo-arrow: 28px;

    position: relative;
    display: block;
    /* Mismo gutter horizontal que respira el feed y el rail de la Porra
       (`--space-3` a cada lado): sin él la tarjeta llega a los bordes de la
       pantalla mientras el resto del contenido va inset ("se sale por los
       lados"). Bloque → el margen recorta el ancho, no hay overflow. */
    margin: var(--space-1) var(--space-3) var(--space-3);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    /* Fondo neutro de respaldo: la identidad (degradado, sombra) la pone cada
       variante (`--biwenger`, `--ucl`, `--raffle`). */
    background: var(--color-surface);
    text-decoration: none;
    font-family: var(--font-body);
  }

  .promo-banner[hidden] { display: none; }

  /* Textura de rejilla diagonal (decorativa), igual idioma que el banner Porra. */
  .promo-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M0 18L18 0' stroke='%23fff' stroke-width='.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 18px 18px;
    pointer-events: none;
  }

  .promo-banner:active { transform: scale(0.985); }

  @media (prefers-reduced-motion: reduce) {
    .promo-banner:active { transform: none; }
  }

  .promo-banner__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--promo-icon) 1fr var(--promo-arrow);
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }

  /* Disco del icono: blanco translúcido, para que la copa dorada respire sobre
     el rojo sin tocar el fondo directamente. */
  .promo-banner__icon {
    inline-size: var(--promo-icon);
    block-size: var(--promo-icon);
    border-radius: 50%;
    background: rgb(255 255 255 / 16%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  .promo-banner__icon svg { inline-size: 26px; block-size: 26px; }

  .promo-banner__text { min-width: 0; }

  .promo-banner__eyebrow {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 82%);
    margin-block-end: 2px;
  }

  /* Cuenta atrás hasta el cierre, en pequeño arriba a la derecha (solo el
     sorteo que la trae, ver raffle/_match_raffle_banner): misma fila que el
     antetítulo, separados por el hueco. La fila mide lo que su letra pequeña,
     así que la tarjeta queda algo más baja que sin cierre — buscado (PO, 1-oct):
     se gana el aire que sobraba arriba. */
  .promo-banner__toprow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-block-end: 2px;
  }

  /* El antetítulo no se parte nunca: si se encogiera para hacer sitio al
     cierre saltaría a dos líneas y la tarjeta crecería. */
  .promo-banner__toprow .promo-banner__eyebrow {
    margin-block-end: 0;
    white-space: nowrap;
  }

  /* Mismo cuerpo que el antetítulo, pero sin mayúsculas, con menos peso y en un
     blanco más tenue: es un dato al margen y no compite con «Sorteo · …». Si un
     móvil muy estrecho no le deja sitio, se recorta con puntos suspensivos en
     vez de salirse de la tarjeta. */
  .promo-banner__deadline {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6rem;
    font-weight: 600;
    /* Cifras de ancho fijo: la cuenta atrás cambia cada minuto y sin esto el
       texto baila al pasar de un 1 a un 8. */
    font-variant-numeric: tabular-nums;
    color: rgb(255 255 255 / 72%);
  }

  .promo-banner__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .promo-banner__subtitle {
    margin: 2px 0 0;
    font-size: 0.78rem;
    line-height: 1.2;
    color: rgb(255 255 255 / 90%);
  }

  /* Disco BLANCO sólido + chevron rojo: se lee tanto sobre el rojo como sobre el
     lavado blanco de la esquina, y remata el juego rojo/blanco. */
  .promo-banner__arrow {
    inline-size: var(--promo-arrow);
    block-size: var(--promo-arrow);
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--color-surface);
  }

  .promo-banner__arrow svg { inline-size: 15px; block-size: 15px; }

  @media (hover: hover) {
    .promo-banner:hover .promo-banner__arrow { transform: translateX(1px); }
  }

  /* Variante Biwenger — rojo Biwenger con un lavado BLANCO en degradado desde la
     esquina inferior derecha, lejos del icono y del texto, para que el blanco del
     copy siga pasando AA. El brillo se apaga al 58% del radio. */
  .promo-banner--biwenger {
    background:
      radial-gradient(135% 135% at 100% 100%, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 0%) 58%),
      linear-gradient(115deg, #e2001a 0%, #c30016 45%, #9c0012 100%);
    box-shadow: 0 6px 18px rgb(156 0 18 / 32%);
  }

  /* Disco BLANCO + chevron rojo: se lee tanto sobre el rojo como sobre el lavado. */
  .promo-banner--biwenger .promo-banner__arrow {
    color: #e2001a;
    box-shadow: 0 2px 6px rgb(120 0 14 / 28%);
  }

  @media (hover: hover) {
    .promo-banner--biwenger:hover { box-shadow: 0 8px 22px rgb(156 0 18 / 42%); }
  }
}

@layer components {
  /* Variante Champions League Premium — misma caja, otra identidad.
   *
   * Los colores viven AQUÍ y no en `tokens.css` a propósito: ese fichero es
   * GENERADO por `bin/sync-design-tokens` desde DESIGN.md, y hoy tiene 33 líneas
   * añadidas a mano que el puente no conoce (weight-extrabold, la paleta
   * Albiceleste, bottom-nav-clearance, z-sticky, focus-ring…). Regenerarlo las
   * borra. La paleta `ucl-` SÍ está declarada en DESIGN.md y el bridge ya la
   * emite, así que el día que se reconcilie esa deriva basta sustituir estos
   * tres literales por `var(--color-ucl-*)` y borrar el bloque.
   *
   * Azul noche de la competición en vez del rojo Biwenger: la promo es de la
   * Champions y tiene que leerse como tal antes de leer una palabra.
   */
  .promo-banner--ucl {
    --ucl-navy: #0a1a4f;
    --ucl-blue: #123a94;
    --ucl-star: #7cc0ff;

    /* El lavado va desde la esquina inferior derecha, lejos del icono y del
       bloque de texto, para que el copy blanco siga pasando AA sobre el azul.
       Mismo criterio que el rojo original. */
    background:
      radial-gradient(135% 135% at 100% 100%, rgb(124 192 255 / 34%) 0%, rgb(124 192 255 / 0%) 60%),
      linear-gradient(115deg, var(--ucl-blue) 0%, var(--ucl-navy) 55%, #050f30 100%);
    box-shadow: 0 6px 18px rgb(10 26 79 / 42%);

    /* `<button>` y no `<a>`: la promo no lleva a ningún sitio, levanta el modal.
       Hay que devolverle la caja que el user-agent le quita.

       El ancho NO puede ser `auto`: un botón hace shrink-to-fit aunque se le
       ponga `display: block`, así que se encogía al ancho de su texto — y cuanto
       más corto el copy, más estrecha la tarjeta. La base lo daba por hecho
       porque era un `<a>`, que sí se estira. `calc()` sobre el 100% del
       contenedor, descontando los dos márgenes laterales que hereda de la base,
       reproduce exactamente la caja del enlace original. */
    box-sizing: border-box;
    inline-size: calc(100% - (2 * var(--space-3)));
    border: 0;
    padding: 0;
    text-align: start;
    font: inherit;
    cursor: pointer;
    appearance: none;
  }

  /* El escudo llega como PNG del proveedor, no como SVG inline: el disco lo
     recorta y el contenedor le da el aire. Sin `border-radius` propio — es un
     escudo de competición, y esos nunca van redondeados. */
  .promo-banner--ucl .promo-banner__icon {
    background: rgb(255 255 255 / 92%);
  }

  .promo-banner--ucl .promo-banner__icon img {
    inline-size: 28px;
    block-size: 28px;
    object-fit: contain;
  }

  /* El chevron y su sombra en azul. Cuando la base ERA el banner de Biwenger su
     rojo vivía en reglas sin modificador y aquí se repintaba; desde que el rojo
     es de `--biwenger` la base es neutra, pero la variante sigue fijando los
     suyos para no depender del color por defecto. */
  .promo-banner--ucl .promo-banner__arrow {
    color: var(--ucl-blue);
    box-shadow: 0 2px 6px rgb(10 26 79 / 30%);
  }

  @media (hover: hover) {
    .promo-banner--ucl:hover { box-shadow: 0 8px 22px rgb(10 26 79 / 52%); }
  }
}

@layer components {
  /* Variante SORTEO DE PARTIDO (components/raffle/_match_raffle_banner) — la misma
   * caja, SIN chevron ni botón (PO, 2026-09-14): el subtítulo tiene que caber en
   * una línea a 360 px, y con botón caía en dos o tres. Toda la tarjeta es el
   * enlace a la grada.
   *
   * Los colores van por sorteo en tres variables y NADA más: el club manda el
   * fondo (`--raffle-main`/`--raffle-dark`) y su color secundario el brillo de la
   * esquina (`--raffle-accent`). El default es el de Boca, que fue el primero.
   * Un sorteo nuevo son tres líneas en su propio selector: mientras el acento
   * estuvo cosido al gradiente, cambiar de club obligaba a reescribirlo entero.
   *
   * Para el fondo va SIEMPRE el color oscuro del club, aunque su camiseta sea
   * clara: el texto del banner es blanco y sobre el blanco de River no se leería.
   * El color claro se lleva al icono, que es donde se reconoce la camiseta.
   */
  .promo-banner--raffle {
    --raffle-dark: #062a6b;
    --raffle-main: #0b3b8f;
    --raffle-accent: 246 197 43;

    background:
      radial-gradient(135% 135% at 100% 100%, rgb(var(--raffle-accent) / 30%) 0%, rgb(var(--raffle-accent) / 0%) 58%),
      linear-gradient(115deg, var(--raffle-main) 0%, var(--raffle-dark) 60%, #041a45 100%);
    box-shadow: 0 6px 18px rgb(6 42 107 / 40%);
  }

  /* River: rojo de la banda al fondo y blanco al brillo — el reverso de Boca, que
     lleva el azul al fondo y el oro al brillo. */
  .promo-banner--lpf26-river-camiseta {
    --raffle-dark: #7d0a1d;
    --raffle-main: #c8102e;
    --raffle-accent: 255 255 255;

    background:
      radial-gradient(135% 135% at 100% 100%, rgb(var(--raffle-accent) / 26%) 0%, rgb(var(--raffle-accent) / 0%) 58%),
      linear-gradient(115deg, var(--raffle-main) 0%, var(--raffle-dark) 60%, #4d0512 100%);
    box-shadow: 0 6px 18px rgb(125 10 29 / 42%);
  }

  /* Despedida de Messi (Selección argentina): el celeste se OSCURECE para el
     fondo —con el celeste real de la camiseta el texto blanco no se leería, la
     misma razón por la que River no lleva el blanco detrás— y el oro del sol de
     Mayo va al brillo de la esquina. El celeste puro queda para las
     entradas del icono. */
  .promo-banner--intl26-messi-despedida {
    --raffle-dark: #0b3d75;
    --raffle-main: #1f6fb2;
    --raffle-accent: 246 180 14;

    background:
      radial-gradient(135% 135% at 100% 100%, rgb(var(--raffle-accent) / 28%) 0%, rgb(var(--raffle-accent) / 0%) 58%),
      linear-gradient(115deg, var(--raffle-main) 0%, var(--raffle-dark) 60%, #062347 100%);
    box-shadow: 0 6px 18px rgb(11 61 117 / 42%);
  }

  /* Título en mayúsculas SOLO en este sorteo (PO, 1-oct). No va en la regla
     común: `.promo-banner__title` la comparten Biwenger, la Champions Premium y
     los demás sorteos, y en mayúsculas un título ocupa bastante más. Medido:
     «GANÁ UNA ENTRADA DOBLE» cabe entero a 360 px en la home y en la previa. */
  .promo-banner--intl26-messi-despedida .promo-banner__title {
    text-transform: uppercase;
  }

  /* Icono + texto: sin tercera columna, el texto gana el ancho del chevron. Icono,
     relleno y hueco algo más prietos que la base: el subtítulo («Comentá en el San
     Pablo–Boca y participás») pide 250 px y a 360 px la tarjeta de la previa le
     dejaba 244 — caía en dos líneas, y en la home cabía sin un píxel de margen. */
  .promo-banner--raffle {
    --promo-icon: 40px;
  }

  .promo-banner--raffle .promo-banner__inner {
    grid-template-columns: var(--promo-icon) 1fr;
    gap: 10px;
    padding-inline: 10px;
  }

  /* Dentro del rail la tarjeta ya no ocupa el ancho entero (deja asomar la
     siguiente), y el subtítulo perdía ~55 px: a 360 px se quedaba en 195 y caía en
     dos líneas incluso el corto. Medido, no estimado. Se recuperan apretando lo
     que no es texto —icono, hueco y relleno—, que es lo único que sobra en una
     tarjeta de una sola línea. */
  .promo-rail__item .promo-banner--raffle {
    --promo-icon: 32px;
  }

  .promo-rail__item .promo-banner--raffle .promo-banner__inner {
    gap: 8px;
    padding-inline: 8px;
  }

  .promo-rail__item .promo-banner--raffle .promo-banner__icon svg {
    inline-size: 24px;
    block-size: 24px;
  }

  .promo-banner--raffle .promo-banner__icon svg {
    inline-size: 28px;
    block-size: 28px;
  }

  @media (hover: hover) {
    .promo-banner--raffle:hover { box-shadow: 0 8px 22px rgb(6 42 107 / 52%); }
    .promo-banner--lpf26-river-camiseta:hover { box-shadow: 0 8px 22px rgb(125 10 29 / 54%); }
  }

  /* Dentro de la previa del partido el contenedor ya pone el aire lateral: sin
     márgenes horizontales propios y con la misma separación que las tarjetas. */
  .promo-banner--in-match {
    margin: 0 0 var(--card-gap);
  }
}