@layer components {
  /* League Palmarés (history) tab — 4 blocks:
     1. Champion hero card with league-color gradient, stats grid,
        coach avatar row, runner-up sub-row link.
     2. Trophies podium + ranked (shared partials in trophies.css).
     3. Promoted teams — 3 mini cards from feeder competition.
     4. Milestones timeline — reuses `.team-history__milestones` from
        team-history.css so league and team share the dotted rail. */

  .league-history {
    padding: 0;
  }

  /* ── 1. Champion hero card ───────────────────────────────────────
     Gradient uses the league's own color custom properties (same vars
     the team card uses, injected per-league by the page wrapper) so
     Premier League paints purple, La Liga red, etc. Without the glow
     fallback the card reads flat on neutral themes. */

  /* Card tinted with the WINNER'S colors via `--champ-color-*` vars
     (fixture ships HSLA strings per-team: Liverpool red, etc.). The
     gradient uses `color-mix in srgb` so the HSLA alpha is preserved
     and mixes with `--bg-card` (base surface) — gives a subtle tint
     without washing the surface tokens into a different hue. */
  .league-champion-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
    margin-bottom: 12px;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    background: linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--champ-color-1, var(--color-accent)) 25%,
        var(--bg-card, var(--color-surface))
      ),
      color-mix(
        in srgb,
        var(--champ-color-2, var(--color-accent)) 15%,
        var(--bg-card, var(--color-surface))
      )
    );
    border: 1px solid color-mix(in srgb, var(--champ-color-1, var(--color-accent)) 20%, transparent);
  }

  .league-champion-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at 85% -10%,
      var(--champ-glow, transparent) 0%,
      transparent 45%
    );
    pointer-events: none;
  }

  .league-champion-card > * {
    position: relative;
    z-index: 1;
  }

  .league-champion-card__header {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
  }

  /* Final-match score chip · cup/hybrid heroes only. Anchored to the
     top-right corner of the card via absolute positioning so the
     "Último campeón · 2024/2025" badge stays where it is and the
     score reads as a prominent visual on the same line as the badge.
     Numbers use Oswald to match the team score-bug typography of
     `_match_card.html.twig`; logos stay small so the team name +
     trophy stays the dominant signal. */
  .league-champion-card__final {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    z-index: 2;
  }

  .league-champion-card__final-team {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .league-champion-card__final-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .league-champion-card__final-score-num {
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    min-width: 1.2ch;
    text-align: right;
  }

  .league-champion-card__final-pens {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: rgb(255 255 255 / 65%);
    letter-spacing: 0.02em;
    margin-top: 2px;
  }

  @media (width <= 480px) {
    .league-champion-card__final {
      top: 12px;
      right: 12px;
    }

    .league-champion-card__final-score-num {
      font-size: 22px;
    }

    .league-champion-card__final-logo {
      width: 18px;
      height: 18px;
    }
  }

  /* Plain label reading over the tinted gradient (no pill, no fill).
     Mirrors `.trophies-hero__badge` of the team-history page so the
     two hero badges feel like the same component — whites at 60%
     opacity + tight title typography are the signature. */
  .league-champion-card__badge {
    font-family: var(--font-title);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(255 255 255 / 60%);
  }

  .league-champion-card__body {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
  }

  .league-champion-card__logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .league-champion-card__name {
    font-family: Oswald, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.05;
    min-width: 0;

    /* Wrap to two lines instead of ellipsing — selección/club names
       like "Paris Saint-Germain" or "Manchester United" need to fit
       in full. Hyphenation softens line breaks on the longest strings. */
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .league-champion-card__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .league-champion-card__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  .league-champion-card__stat-value {
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  /* Subtítulo del valor — usado por el primer stat del hero
     cup/hybrid para meter la cuenta de penaltis "(4-3)" bajo el
     marcador del tiempo reglamentario sin inflar la cifra
     principal. Manrope para no competir con el Oswald del valor
     (memoria `feedback_minutes_use_manrope`: cifras "secundarias"
     en el cuerpo del componente, no en la tipo titular). */
  .league-champion-card__stat-sub {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .league-champion-card__stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .league-champion-card__coach {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 10px;
  }

  .league-champion-card__coach-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-surface-hover);
  }

  .league-champion-card__coach-avatar img:not(.league-champion-card__coach-flag) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .league-champion-card__coach-flag {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--color-surface);
  }

  .league-champion-card__coach-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .league-champion-card__coach-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .league-champion-card__coach-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
  }

  .league-champion-card__runnerup {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 -16px -16px;
    border-top: 1px solid var(--color-border-subtle);
    background: transparent;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s ease;
  }

  .league-champion-card__runnerup:hover,
  .league-champion-card__runnerup:focus-visible {
    background: var(--color-surface-hover);
    outline: none;
  }

  .league-champion-card__runnerup-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .league-champion-card__runnerup-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .league-champion-card__runnerup-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    min-width: 0;

    /* Knob: wrap natural para selecciones/clubs largos. Cambia a
       `overflow: hidden; text-overflow: ellipsis; white-space: nowrap`
       si en algún surface se prefiere truncar a una línea. */
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .league-champion-card__runnerup-points {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .league-champion-card__runnerup-chevron {
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  /* ── Header meta helper ──────────────────────────────────────── */
  .league-history-meta {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0;
  }

  /* ── 3. Campeones anteriores timeline ──────────────────────────
     Each row stacks two lines: campeón (bold, full opacity) on top and
     subcampeón (muted, smaller) below, sharing the season tag column on
     the left. The stat column on the right tolerates either a points
     string ("91 pts" — liga doméstica) or a final-score text ("3-1",
     "1-1 (5-3p)" — cup/CL/WC). */
  .league-history-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .league-history-timeline__row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .league-history-timeline__row:last-child {
    border-bottom: none;
  }

  .league-history-timeline__season {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .league-history-timeline__teams {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .league-history-timeline__line {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
  }

  .league-history-timeline__logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .league-history-timeline__logo--placeholder {
    display: inline-block;
    border-radius: 50%;
    background: var(--color-surface-2);
    border: 1px dashed var(--color-border-subtle);
  }

  .league-history-timeline__name {
    font-size: 14px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .league-history-timeline__line--champion .league-history-timeline__name {
    font-weight: 600;
  }

  .league-history-timeline__line--runnerup {
    opacity: 0.7;
  }

  .league-history-timeline__line--runnerup .league-history-timeline__name {
    font-size: 13px;
    text-decoration: line-through;
  }

  /* Champions poster (bi-annual leagues, Argentina): per-year cards. A year with
     ONE champion shows the crest as protagonist; a year with several lists them
     compactly (crest + tournament + club), tinted with a subtle gradient.
     Adapted from the "C2 · póster" design to the v2 tokens + real crests.
     MOBILE-FIRST: a single column with the single-champion hero laid out
     HORIZONTALLY (crest left, name right). Wider viewports (≥600px) switch to a
     multi-column grid with the hero stacked + centred (the desktop poster). */
  .champions-poster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .champions-poster__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 13px 14px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 14px;
  }

  .champions-poster__card--multi {
    background: linear-gradient(180deg, rgb(255 255 255 / 3%), var(--color-surface));
  }

  .champions-poster__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  .champions-poster__year {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .champions-poster__count {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--color-text-subtle);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border-subtle);
    padding: 2px 7px;
    border-radius: 999px;
  }

  /* Single champion → crest protagonist. Mobile = horizontal row (crest left,
     caption right); desktop stacks + centres it (see the ≥600px block below). */
  .champions-poster__hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 13px;
    padding: 2px 0;
    text-align: left;
  }

  .champions-poster__cap {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
  }

  /* Wider viewports (tablet/desktop): the original multi-column poster with the
     single-champion hero stacked + centred. */
  @media (min-width: 600px) {
    .champions-poster {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .champions-poster__card {
      padding: 16px 14px 17px;
    }

    .champions-poster__hero {
      flex-direction: column;
      gap: 10px;
      padding: 6px 0 4px;
      text-align: center;
    }

    .champions-poster__cap {
      flex: 0 1 auto;
      align-items: center;
    }
  }

  /* Several champions in one year → stack equal hero blocks, divided by a
     hairline so each title reads with the same weight as a single-champion
     year. The card just grows taller. */
  .champions-poster__hero + .champions-poster__hero {
    padding-top: 12px;
    border-top: 1px solid var(--color-border-subtle);
  }

  .champions-poster__torn {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }

  .champions-poster__hero .champions-poster__torn {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .champions-poster__name {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.15;
    color: var(--color-text);
  }

  .champions-poster__name--hero {
    font-weight: 700;
    font-size: 19px;
  }

  .champions-poster__crest {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    object-fit: contain;
  }

  .champions-poster__crest--hero {
    width: 52px;
    height: 52px;
  }

  .champions-poster__crest--placeholder {
    border-radius: 50%;
    background: var(--color-surface-sunken);
    border: 1px dashed var(--color-border-subtle);
  }

  /* Score column — mimetiza la columna `.match-card__score` de las
     cards de partido: dos números apilados (campeón arriba, subcampeón
     abajo) + chip pequeño para el resultado de penaltis cuando aplica.
     Comparte la jerarquía visual del livescore standard. */
  .league-history-timeline__score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding-right: 4px;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
  }

  .league-history-timeline__score-home,
  .league-history-timeline__score-away {
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  /* Away score = runner-up's number. Stays at the same 18px tabular
     grammar as the home score so the column reads as a scoreboard, but
     drops to muted color + lighter weight so the visual hierarchy
     mirrors the team list above (champion line bold, runner-up line
     struck-through and dimmed). A `__score-away` is only ever rendered
     alongside a `__line--runnerup`, so styling the class directly is
     enough — no sibling selector required. */
  .league-history-timeline__score-away {
    color: var(--color-text-muted);
    font-weight: 500;
  }

  .league-history-timeline__score-pen {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: lowercase;
    letter-spacing: 0.3px;
  }

  /* "PTS" label below the points number — same typographic grammar as
     `.league-champion-card__stat-label` (uppercase 10px muted) so the
     timeline and hero card stay coherent. Solo se renderiza para liga
     doméstica (cup/CL/WC usan home-away score, no points). */
  .league-history-timeline__score-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  /* Clickable rows (Phase 3: timeline row → season standings modal).
     Adds an extra column for the chevron and a hover affordance so the
     row reads as an interactive target, mirroring the runner-up row of
     the hero card (same chevron grammar). */
  .league-history-timeline__row--clickable {
    grid-template-columns: 56px 1fr auto 14px;
    cursor: pointer;
    transition:
      background-color 0.15s ease,
      transform 0.15s ease;
    border-radius: 8px;
  }

  .league-history-timeline__row--clickable:hover {
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  }

  .league-history-timeline__row--clickable:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .league-history-timeline__chevron {
    color: var(--color-text-muted);
    flex-shrink: 0;
    align-self: center;
  }

  /* Skeleton inside the lazy dialog body — 6 wireframe rows while the
     `/season-standings/{id}` fetch resolves. Matches the row height of
     `.team-standings-table tbody tr` so the visual swap doesn't
     reflow. */
  .league-history-standings-dialog__skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }

  .league-history-standings-dialog__skeleton-row {
    display: block;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(
      90deg,
      var(--color-surface-2) 0%,
      color-mix(in srgb, var(--color-surface-2) 60%, var(--color-surface-1)) 50%,
      var(--color-surface-2) 100%
    );
    background-size: 200% 100%;
    animation: league-history-skeleton-shimmer 1.4s ease-in-out infinite;
  }

  @keyframes league-history-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .league-history-standings-dialog__skeleton-row {
      animation: none;
    }
  }

  /* Native `hidden` attribute must beat the skeleton's `display: flex`
     parent — keeps the slot-toggling controller logic predictable
     (memoria: `feedback_hidden_attribute_display_override`). */
  .league-history-standings-dialog__skeleton[hidden],
  .league-history-standings-dialog__champion[hidden] {
    display: none;
  }

  /* Big toggle "Eliminatorias / Clasificación" dentro del dialog.
     Reusa `.pst-per90-toggle` (player-stats.css) — los estilos base
     vienen de allí. Aquí solo ajustamos los márgenes para encajar en
     el head del dialog y manejar el estado disabled. */
  .league-history-standings-dialog__toggle {
    margin: 4px 16px 8px;
    width: calc(100% - 32px);
  }

  /* Opción deshabilitada (e.g. Eliminatorias mientras data-layer
     denormaliza bracket histórico). Mantenemos el botón visible para
     no resetear el layout cuando llegue el feature, pero atenuamos. */
  .league-history-standings-dialog__toggle .pst-per90-btn[disabled],
  .league-history-standings-dialog__toggle .pst-per90-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }

  .league-history-standings-dialog__toggle .pst-per90-btn[disabled]:hover,
  .league-history-standings-dialog__toggle .pst-per90-btn.is-disabled:hover {
    color: var(--color-text-muted);
    background: transparent;
  }

  .league-history-standings-dialog__bracket-empty {
    padding: 32px 16px;
  }

  /* Panels nativos del controller: `hidden` ataca el panel completo;
     conviene asegurar que cae bien aunque algún hijo tenga `display`
     declarado más adelante (memoria
     `feedback_hidden_attribute_display_override`). */
  .league-history-standings-dialog [data-league-history-bracket-toggle-target="panel"][hidden] {
    display: none;
  }

  /* ── 4. Promoted cards ─────────────────────────────────────────
     Horizontal scroll row — 3 mini cards. Accent ribbon on the left
     edge visually ranks champion / runner-up / playoff. Fixed width
     per card so the row is scannable on <375px screens. */
  .league-promoted {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  /* Feeder competition chip (right-aligned in the section header).
     The feeder is shared by all 3 promoted teams so repeating it on
     every card is noise — chip in the title does the job. */
  .league-promoted__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .league-promoted__source-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  .league-promoted__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 10px;
    min-height: 124px;
    text-align: center;
  }

  .league-promoted__logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
  }

  .league-promoted__name {
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.04em;
    line-height: 1.1;

    /* Knob: nombre completo con wrap natural. Cambia a `white-space:
       nowrap; overflow: hidden; text-overflow: ellipsis` si en algún
       surface se prefiere truncar a una línea. */
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .league-promoted__position {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .league-promoted__badge {
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    background: var(--color-surface-hover);
    border-radius: 6px;
  }

  .league-promoted__badge--champion {
    color: #8a5a00;
    background: color-mix(in oklab, #ffd166 30%, transparent);
  }

  .league-promoted__badge--runner-up {
    color: var(--color-text-muted);
    background: color-mix(in oklab, #cbd5e1 25%, transparent);
  }

  .league-promoted__badge--playoff {
    color: #6d28d9;
    background: color-mix(in oklab, #a78bfa 25%, transparent);
  }

  /* Movements (in/out) — `data.movements.{in,out}` viene del wire para
     league/hybrid/group; cup quedan vacíos por diseño. Misma visual base
     que `.league-promoted__card` pero ajusta a número variable de items
     (auto-fill, no 3 fijas) — La Liga típicamente trae 3-in/3-out pero
     una WC puede traer 16+ entries. */
  .league-movements {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
  }

  .league-movements__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 10px;
  }

  .league-movements__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    color: inherit;
    text-decoration: none;
    text-align: center;
  }

  a.league-movements__link:hover .league-movements__name {
    text-decoration: underline;
  }

  .league-movements__logo,
  .league-movements__flag {
    width: 36px;
    height: 36px;
    object-fit: contain;
  }

  .league-movements__name {
    font-family: Oswald, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 0.03em;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .league-movements--out .league-movements__link {
    opacity: 0.78;
  }

  /* Position pill bajo el nombre del equipo: "18º · 32 pts" — Manrope
     pequeño, tabular nums, foreground muted para no robar protagonismo
     al name. */
  .league-movements__position {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    line-height: 1.15;
  }

  /* Path badge: champion / runner-up / playoff / direct. Pill compacta
     debajo del position. Champion + runner-up usan el acento de la liga
     anfitriona; playoff usa un naranja warning; direct queda neutro. */
  .league-movements__path-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    background: var(--color-surface-sunken);
    color: var(--color-text-subtle);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  .league-movements__path-badge--champion {
    background: color-mix(in srgb, var(--color-accent, #f5b50a) 18%, transparent);
    color: var(--color-accent, #f5b50a);
  }

  .league-movements__path-badge--runner-up {
    background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
    color: var(--color-text-muted);
  }

  .league-movements__path-badge--playoff {
    background: color-mix(in srgb, #ff8a3d 22%, transparent);
    color: #ff8a3d;
  }

  .league-movements__path-badge--direct {
    background: color-mix(in srgb, var(--color-text-subtle) 12%, transparent);
    color: var(--color-text-subtle);
  }

  /* Feeder/destination liga al lado derecho del card-header: logo + nombre,
     clickable. Mismo registro tipográfico que el card-title pero plain-case. */
  .league-movements-card__feeder {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    max-width: 60%;
  }

  a.league-movements-card__feeder:hover {
    color: var(--color-text);
    background: var(--color-surface);
  }

  .league-movements-card__feeder-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .league-movements-card__feeder-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* CTA "Ver campeonato" bajo la lista de descendidos: pill ancho, alineado
     a la izquierda, chevron mínimo a la derecha. Hover sube saturation. */
  .league-movements-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
  }

  .league-movements-card__cta:hover {
    background: var(--color-surface);
    color: var(--color-text);
  }

  /* Cup/hybrid/group: card de "Los nuevos" sin position/badge — solo
     bandera + liga local debajo del nombre. */
  .league-promoted__origin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.1;
  }

  .league-promoted__flag {
    width: 12px;
    height: 9px;
    object-fit: cover;
    border-radius: 1px;
    flex-shrink: 0;
  }

  .league-promoted__origin-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90px;
  }

  .league-history-standings-dialog__pills {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    flex-shrink: 0;
  }

  /* ─── History · modal de clasificación del último campeón ─────
     Bottom-sheet en mobile (slide-up), centrado en desktop. Usa
     <dialog> nativo abierto por trophy-dialog controller. Body
     carga `components/standings/_rows.html.twig` (reuso del widget
     clasificación canónico). */

  /* Dialog stays out of the DOM flow when closed (UA default `display: none`).
     `display` + `overlay` join the transition list with `allow-discrete` so
     the slide-in still animates from `transform: translateY(100%)` set by
     `@starting-style` below. Without this the bottom-sheet flickered into
     view full-height and ignored its closed state. */
  .league-history-standings-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: var(--color-bg, #0b0d12);
    color: var(--color-text);
    position: fixed;
    inset: auto 0 0;
    transform: translateY(100%);
    flex-direction: column;
    overflow: hidden;
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      overlay 0.28s cubic-bezier(0.22, 1, 0.36, 1) allow-discrete,
      display 0.28s cubic-bezier(0.22, 1, 0.36, 1) allow-discrete;
  }

  .league-history-standings-dialog[open] {
    display: flex;
    transform: translateY(0);
  }

  @starting-style {
    .league-history-standings-dialog[open] {
      transform: translateY(100%);
    }
  }

  .league-history-standings-dialog::backdrop {
    background: rgb(0 0 0 / 55%);
  }

  .league-history-standings-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 10px;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .league-history-standings-dialog__title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .league-history-standings-dialog__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
  }

  .league-history-standings-dialog__subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .league-history-standings-dialog__close {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }

  .league-history-standings-dialog__close:hover {
    background: var(--color-surface-hover, rgb(255 255 255 / 6%));
    color: var(--color-text);
  }

  .league-history-standings-dialog__champion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 12px;
  }

  .league-history-standings-dialog__champion-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .league-history-standings-dialog__champion-label {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    font-weight: 700;
  }

  .league-history-standings-dialog__champion-name {
    font-weight: 700;
    color: var(--color-text);
  }

  .league-history-standings-dialog__body {
    flex: 1;
    overflow: hidden auto;
    padding: 8px 0 24px;

    /* Hide scrollbar chrome (memoria: no scrollbar visible en modals). */
    scrollbar-width: none;
  }

  .league-history-standings-dialog__body::-webkit-scrollbar {
    display: none;
  }

  @media (width >= 640px) {
    .league-history-standings-dialog {
      max-width: 640px;
      max-height: 85vh;
      border-radius: 16px;
      inset: 50% auto auto 50%;
      transform: translate(-50%, -50%) scale(0.96);
      opacity: 0;
      transition:
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease,
        overlay 0.22s ease allow-discrete,
        display 0.22s ease allow-discrete;
    }

    .league-history-standings-dialog[open] {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }

    @starting-style {
      .league-history-standings-dialog[open] {
        transform: translate(-50%, -50%) scale(0.96);
        opacity: 0;
      }
    }
  }
}