/* Team Best XI tab — v2 grammar. Triple-filter row (Competición · Tipo ·
   Selección) + metric chip row + pitch + bench.

   Reusa por completo el `.unified-field-grass` + `.unified-field-row`
   + `.unified-player-marker/photo/rating/flag/info/name` del match
   lineup (pitch.css en match-detail.css). Aquí solo definimos el
   chrome propio del bestxi: triple dropdowns, metric chips + tier
   ramp por percentil, single-half pitch, bench cards.

   Pairs with templates/pages/team/bestxi/tab.html.twig +
   assets/controllers/team_bestxi_controller.js. */

@layer components {
  /* Top padding is 0 so the first interactive control (triple selector)
     lands at the same vertical baseline as peer tabs (standings,
     stats, history): the triple wrapper already carries its own
     `padding: 8px 16px`. Bottom 24px keeps a breathing room under the
     bench / pitch so they don't butt up against the next section. */
  .team-bestxi {
    padding: 0 0 24px;
  }

  /* `display: flex` on the section's child blocks overrides the global
     `[hidden] { display: none }` UA rule. Restore it scoped so hidden
     attrs (period options in non-active scope) actually hide. */
  .team-bestxi [hidden] {
    display: none;
  }

  /* ─── Row triple: 3 dropdowns 1fr·1fr·1fr ──────────────────────────
     Cabe en 375-390px: ~126px por slot con 6px gap. Cada slot usa
     min-width: 0 + ellipsis en el label para periodos largos. El
     modal del <select-modal> vive position: fixed y no participa en
     el grid. */

  .team-bestxi__triple {
    padding: 0 16px 8px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }

  .team-bestxi__triple-wrap {
    min-width: 0;
  }

  .team-bestxi__triple-slot {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    cursor: pointer;
    min-width: 0;
  }

  .team-bestxi__triple-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .team-bestxi__triple-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    min-width: 0;
  }

  .team-bestxi__triple-chev {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.6;
  }

  /* ─── Algorithm pills: cambian QUÉ XI compone (server-side, fetch
     nuevo cell) y QUÉ número aparece en cada badge (client-side,
     repaint del controller). Una sola fila — el metric-row anterior
     quedó fusionado aquí (se duplicaban 6/7 labels). ──────────── */

  /* Criterion pills (más utilizados / goles / valoración). Shared class
     for team + league bestxi tabs so both render identically. */
  .team-bestxi__criteria-row {
    padding: 12px 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .team-bestxi__criteria-row::-webkit-scrollbar {
    display: none;
  }

  .team-bestxi__criteria-chip {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
  }

  .team-bestxi__criteria-chip.active {
    background: var(--color-accent);
    color: #002820;
  }

  /* Metric tier ramp — applied by the controller on the `.unified-
     player-rating` badge when the active metric changes. Works for any
     metric because it's ranked within the XI, not mapped to an absolute
     scale. Overrides the default `rating-tier tier-X` colours from
     `unified-player-rating` when present. */

  .team-bestxi .unified-player-rating.metric-tier-1 {
    background: linear-gradient(180deg, #0fa 0%, #00c98a 100%);
    color: #002820;
  }

  .team-bestxi .unified-player-rating.metric-tier-2 {
    background: linear-gradient(180deg, #7be3b9 0%, #3ec796 100%);
    color: #012818;
  }

  .team-bestxi .unified-player-rating.metric-tier-3 {
    background: var(--color-surface);
    color: var(--color-text);
  }

  .team-bestxi .unified-player-rating.metric-tier-4 {
    background: #4a5260;
    color: #e2e8f0;
  }

  .team-bestxi .unified-player-rating.metric-tier-5 {
    background: #2f3440;
    color: #94a3b8;
  }

  .team-bestxi .unified-player-rating.metric-tier-na {
    background: transparent;
    color: #64748b;
    border: 1px dashed rgb(255 255 255 / 20%);
  }

  /* Non-rating metrics — neutral chip. Gray background + near-black text
     so counts (goals/assists/minutes/xG/keyPasses) read as raw numbers,
     not as a color-coded rating score. */
  .team-bestxi .unified-player-rating.metric-neutral {
    background: #e5e7eb;
    color: #111827;
  }

  /* ─── Match row (partidos del periodo) ─────────────────────────────
     1 o 2 mini-cards según single-leg / ida-vuelta. Se renderiza solo
     para periods con `matches[]` (matchday / round / phase knockout);
     agregados (season/tournament/month/group-phase) no pintan nada. */

  .team-bestxi__matches {
    margin: 0 16px 10px;
    display: grid;
    gap: 6px;
  }

  .team-bestxi__matches--cols-1 {
    grid-template-columns: 1fr;
  }

  .team-bestxi__matches--cols-2 {
    grid-template-columns: 1fr 1fr;
  }

  .team-bestxi__match-card {
    background: var(--color-surface);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .team-bestxi__match-leg {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    text-align: center;
  }

  .team-bestxi__match-body {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    min-width: 0;
  }

  .team-bestxi__match-side {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 40%;
    overflow: hidden;
  }

  .team-bestxi__match-side img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .team-bestxi__match-side span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .team-bestxi__match-score {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }

  .team-bestxi__match-card--w .team-bestxi__match-score {
    color: var(--color-accent);
  }

  .team-bestxi__match-card--l .team-bestxi__match-score {
    color: #f87171;
  }

  .team-bestxi__match-card--d .team-bestxi__match-score {
    color: #fbbf24;
  }

  /* ─── Pitch: single-half override del .unified-field-grass ──────── */

  .team-bestxi__pitch {
    position: relative;
    background:
      repeating-linear-gradient(
        180deg,
        rgb(22 78 40 / 45%) 0,
        rgb(22 78 40 / 45%) 32px,
        rgb(26 92 50 / 45%) 32px,
        rgb(26 92 50 / 45%) 64px
      ),
      linear-gradient(180deg, #0d1f14 0%, #0a1a10 100%);
    min-height: 480px;
    overflow: hidden;
    border-radius: 12px;
  }

  .team-bestxi__pitch-lines {
    position: absolute;
    inset: 0;
    border: 2px solid rgb(255 255 255 / 12%);
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
  }

  .team-bestxi__pitch-circle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 50%;
  }

  .team-bestxi__pitch-penalty {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 18%;
    border: 1px solid rgb(255 255 255 / 12%);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
  }

  .team-bestxi__pitch-players {
    position: relative;
    z-index: 2;
    height: 480px;
  }

  /* In-pitch formation chip — bottom-right of the pitch container,
     near the GK (which sits centered horizontally so the right corner
     is empty). Replaces the season/month context line entirely. */

  /* League chip — mirror of the formation chip, bottom-LEFT of the pitch.
     Shows the competition badge + name so the user knows what scope the
     XI covers. Max-width usa calc() para garantizar que el chip no
     invada el área del portero (que está horizontalmente centrado en
     el pitch): se reservan ~36px de holgura desde el centro hacia el
     chip. Nombres largos como "UEFA Champions League" se truncan con
     ellipsis sin pisar al GK. */
  .team-bestxi__pitch-league {
    position: absolute;
    bottom: 8px;
    left: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgb(0 0 0 / 55%);
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    backdrop-filter: blur(6px);
    max-width: calc(50% - 36px);
    min-width: 0;
  }

  .team-bestxi__pitch-league img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .team-bestxi__pitch-league span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .team-bestxi__pitch-formation {
    position: absolute;
    bottom: 8px;
    right: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgb(0 0 0 / 55%);
    color: var(--color-text);
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    backdrop-filter: blur(6px);
  }

  .team-bestxi__pitch-formation-hint {
    color: rgb(255 255 255 / 70%);
    font-weight: 600;
    font-size: 10px;
  }

  /* Más aire entre marker y línea de nombre+dorsal scoped al pitch */
  .team-bestxi__pitch .unified-player-info {
    margin-top: 10px;
  }

  /* Crown — círculo Feeberse con ★ dentro, sobre el MVP del XI */
  .team-bestxi__crown {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #002820;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow:
      0 0 0 2px #0a1a10,
      0 2px 6px rgb(0 0 0 / 60%);
    z-index: 11;
  }

  /* ─── Banco del XI: carrusel horizontal de jugadores fuera del XI ─── */

  .team-bestxi__bench {
    margin: 12px 0;
  }

  .team-bestxi__bench-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    padding-left: 4px;
  }

  .team-bestxi__bench-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .team-bestxi__bench-list::-webkit-scrollbar {
    display: none;
  }

  .team-bestxi__bench-card {
    flex: 0 0 auto;
    width: 88px;
    background: var(--color-surface);
    border-radius: 10px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    position: relative;
  }

  .team-bestxi__bench-photo-wrap {
    position: relative;
    width: 40px;
    height: 40px;
  }

  .team-bestxi__bench-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  .team-bestxi__bench-flag {
    position: absolute;
    bottom: -2px;
    left: -4px;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
  }

  .team-bestxi__bench-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .team-bestxi__bench-pos {
    font-size: 9px;
    color: var(--color-text-muted);
    white-space: nowrap;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .team-bestxi__bench-card .rating-tier {
    min-width: 26px;
    padding: 2px 6px;
    border-radius: 5px;
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
  }

  /* ─── MVP card al pie ───────────────────────────────────────────── */

  .team-bestxi__mvp {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px 0;
    padding: 12px;
    background: var(--color-surface);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
  }

  .team-bestxi__mvp-photo-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
  }

  .team-bestxi__mvp-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  .team-bestxi__mvp-flag {
    position: absolute;
    bottom: -2px;
    left: -4px;
    width: 16px;
    height: 11px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgb(0 0 0 / 50%);
  }

  .team-bestxi__mvp-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .team-bestxi__mvp-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
  }

  .team-bestxi__mvp-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
  }

  .team-bestxi__mvp-sub {
    font-size: 11px;
    color: var(--color-text-secondary);
  }

  .team-bestxi__mvp .rating-tier {
    min-width: 38px;
    padding: 4px 10px;
    border-radius: 8px;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    flex-shrink: 0;
  }

  /* Formations breakdown panel — barras horizontales por formación
     con su % de uso. Visible solo cuando hay >1 entry (gate Twig). */

  .team-bestxi__formations-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .team-bestxi__formations-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 12px;
  }

  .team-bestxi__formations-name {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .team-bestxi__formations-bar {
    position: relative;
    height: 8px;
    background: var(--color-surface-hover);
    border-radius: 4px;
    overflow: hidden;
  }

  .team-bestxi__formations-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--team-color-1, var(--color-accent)) 90%, transparent),
      color-mix(in srgb, var(--team-color-2, var(--color-accent)) 90%, transparent)
    );
    border-radius: 4px;
    transition: width 0.3s ease-out;
  }

  .team-bestxi__formations-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-variant-numeric: tabular-nums;
  }

  .team-bestxi__formations-pct {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
  }

  .team-bestxi__formations-matches {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  /* ─── Header row + "¿Cómo lo calculamos?" trigger ─────────────────
     El trigger vive en la cabecera de cada tab (team / league), pegado
     a la derecha. Estilo discreto tipo link-pill secundario para no
     competir con los dropdowns del triple. */
  .team-bestxi__head {
    display: flex;
    align-items: center;
    gap: 8px;

    /* Aire entre el filtro de sujeto y el pitch. Antes lo aportaba el
       padding vertical de `.team-bestxi__criteria-row`; en selección /
       torneo esa fila no se renderiza (algorithms vacío), así que el
       espacio vive aquí, en un elemento estable que siempre existe. */
    margin-bottom: var(--space-3);
  }

  /* Si las pills SÍ se renderizan, su propio `padding: 12px 0` ya aporta
     el aire superior: cancelamos el margen del head para no duplicarlo y
     mantener el caso con-pills byte-idéntico. */
  .team-bestxi__head:has(+ .team-bestxi__criteria-row) {
    margin-bottom: 0;
  }

  /* El select de competición crece; el trigger de metodología queda
     compacto a la derecha. */
  .team-bestxi__head .team-bestxi__triple-wrap {
    flex: 1;
    min-width: 0;
  }

  /* Selecciones nacionales: el XI ideal de la convocatoria no tiene
     selector de competición (scope `squad`), así que una caption
     explica qué pinta el campo. */
  .team-bestxi__squad-head {
    /* Flush with the section edge so the title lines up with the pitch /
       bench left margin (the field is full-width, not inset 16px), and no
       top padding so it sits at the same height as the other tabs' first
       content. */
    padding: 0 0 var(--space-3);
  }

  /* Match the canonical `.card-title` (uppercase, 13px, secondary) so the
     selección XI header reads like every other tab's section title. */
  .team-bestxi__squad-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
  }

  .team-bestxi__squad-hint {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .bestxi-methodology-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--color-surface-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition:
      color 0.15s ease,
      border-color 0.15s ease,
      background 0.15s ease;
  }

  .bestxi-methodology-trigger:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-surface-border));
    background: var(--color-surface-sunken);
  }

  .bestxi-methodology-trigger__icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }

  /* ─── Modal "¿Cómo lo calculamos?" (bottom-sheet) ─────────────────
     Mismo patrón que `.trophies-dialog` (components/trophies.css):
     <dialog> anclado al pie, slide translateY(100%→0), backdrop con
     blur, bottom-sheet en TODOS los viewports (memoria
     feedback_bottom_sheet_and_seasons). Scrollbar chrome del body
     oculto manteniendo el scroll. */
  .bestxi-methodology {
    position: fixed;
    inset: auto 0 0;
    margin: 0 auto;
    max-width: 460px;
    width: 100%;
    max-height: 80vh;
    padding: 0;
    border: 0;
    border-radius: 20px 20px 0 0;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 -4px 24px rgb(0 0 0 / 40%);
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(0);
    transition:
      transform 0.3s ease-in-out,
      overlay 0.3s ease-in-out allow-discrete,
      display 0.3s ease-in-out allow-discrete;
  }

  .bestxi-methodology:not([open]) {
    transform: translateY(100%);
  }

  @starting-style {
    .bestxi-methodology[open] {
      transform: translateY(100%);
    }
  }

  .bestxi-methodology::backdrop {
    background: rgb(0 0 0 / 50%);
    backdrop-filter: blur(2px);
    opacity: 1;
    transition:
      opacity 0.3s ease-in-out,
      overlay 0.3s ease-in-out allow-discrete,
      display 0.3s ease-in-out allow-discrete;
  }

  .bestxi-methodology:not([open])::backdrop {
    opacity: 0;
  }

  @starting-style {
    .bestxi-methodology[open]::backdrop {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .bestxi-methodology,
    .bestxi-methodology::backdrop {
      transition: none;
    }

    .bestxi-methodology:not([open]) {
      transform: translateY(0);
    }

    @starting-style {
      .bestxi-methodology[open] {
        transform: translateY(0);
      }

      .bestxi-methodology[open]::backdrop {
        opacity: 1;
      }
    }
  }

  .bestxi-methodology__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-surface-border);
  }

  .bestxi-methodology__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
  }

  .bestxi-methodology__close {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--color-text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .bestxi-methodology__close:hover {
    background: var(--color-surface-sunken);
    color: var(--color-text);
  }

  .bestxi-methodology__body {
    padding: 14px 16px 18px;
    overflow-y: auto;
    max-height: calc(80vh - 56px);
    scrollbar-width: none;
  }

  .bestxi-methodology__body::-webkit-scrollbar {
    display: none;
  }

  .bestxi-methodology__lead {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text);
  }

  .bestxi-methodology__criteria {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bestxi-methodology__criteria li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-surface-sunken);
  }

  .bestxi-methodology__criteria-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text);
  }

  .bestxi-methodology__criteria-desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-muted);
  }

  .bestxi-methodology__section + .bestxi-methodology__section {
    margin-top: 16px;
  }

  .bestxi-methodology__section > p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-muted);
  }

  .bestxi-methodology__section-title {
    margin: 0 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    /* Etiqueta de sección: por encima del cuerpo (muted) en la jerarquía;
       `subtle` quedaba más apagado que el texto que titula y no se leía. */
    color: var(--color-text-secondary);
  }

  .bestxi-methodology__formation {
    margin: 0;
  }

  .bestxi-methodology__formation dt {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text);
  }

  .bestxi-methodology__formation dd {
    margin: 2px 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-muted);
  }

  .bestxi-methodology__formation dd:last-child {
    margin-bottom: 0;
  }

  .bestxi-methodology__details {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bestxi-methodology__details li {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-muted);
  }

  /* ─── Hueco honesto en el campo ("—") ─────────────────────────────
     Cuando una línea trae menos jugadores que la cuota de la formación
     (gate de elegibilidad), el puesto vacío ocupa su slot con un "—"
     atenuado. Reusa el ancho de `.unified-field-player`
     (calc(100%/--row-players)) para no descuadrar la geometría. */
  .unified-field-player--empty {
    opacity: 1;
    pointer-events: none;
  }

  .unified-player-number--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-subtle);
    background: color-mix(in srgb, var(--color-text-subtle) 12%, transparent);
    border: 1px dashed color-mix(in srgb, var(--color-text-subtle) 35%, transparent);
    font-weight: 700;
  }
}