/* League detail page — league-specific pieces only. The sticky + compact hero behaviour lives in the shared `components/entity-sticky.css` and `components/entity-hero.css`; the generic logo / title / subtitle primitives (`.entity-logo-wrapper`, `.entity-logo`, `.entity-title`, `.entity-subtitle`, `.entity-country`) come from `pages/team-detail.css` which defines them page-agnostic. Only two classes are league-specific and live here: - `.league-round-badge` — the "J32" / "Cuartos" pill pinned to the bottom-right corner of the logo. - `.league-season-selector` + `.league-season-static` — wrapper and bare-season-label fallback. The trigger button itself reuses the shared `.select-trigger` + `.select-modal-*` from `components/select-modal.css`. The `--team-color-*` custom properties stay the same name used on the team page: each entity page injects its own palette on `` and the shared `.entity-hero` gradient reads them transparently, so the CSS here does not have to branch on page kind. */ @layer pages { .league-logo-wrapper { /* Geometry inherited from `.entity-logo-wrapper`. The class sticks here only as a hook for the round-badge anchor so team / player pages (which have no badge) stay untouched. */ position: relative; } .league-round-badge { position: absolute; right: -10px; bottom: -4px; min-width: 28px; padding: 3px 8px; background: var(--color-accent); color: var(--color-bg); border-radius: 999px; font-family: Oswald, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.3; text-align: center; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / 35%); } .league-season-selector { display: inline-flex; align-items: center; } .league-season-trigger { /* Shared `.select-trigger` owns the full chrome (surface, padding, 44px touch target). The trigger lives inside `.entity-subtitle` so override only the typography — readable colour against the muted country row next to it. */ color: var(--color-text); } .league-season-static { font-size: 13px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } /* Tab panel skeleton — mirrors `.team-tabpanel__skeleton` from team page (same geometry + shimmer). Kept local because the class is only consumed by the league shell; promoting it requires a renaming sweep across team-detail that isn't part of this work. */ .league-tabpanel__skeleton { min-height: 280px; border-radius: 12px; margin: 16px; } .league-content { min-height: calc(100dvh + 200px); padding: 12px; } /* Tab placeholder — rendered by `pages/league/_placeholder.html.twig` for tabs whose content is deferred (stats / totw / history / bracket). Kept deliberately austere: matches the neutral section- card look without importing the full card chrome. */ .league-tab-placeholder { margin: 16px; padding: 32px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; text-align: center; } .league-tab-placeholder__title { margin: 0 0 8px; font-family: Oswald, sans-serif; font-size: 18px; font-weight: 700; color: var(--color-text); } .league-tab-placeholder__copy { margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; } /* ── Overview tab ─────────────────────────────────────────────── */ /* Facts banner — three quick competition facts (current round, goals per match, leader). Uses the shared `.card` as wrapper; the inner `.league-facts` is a 3-column auto-fit grid so cup / hybrid variants that carry different slots still line up cleanly. */ .league-facts-card { padding: 8px 0; } .league-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .league-fact { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; padding: 4px 8px; text-align: center; min-width: 0; } .league-fact + .league-fact { border-left: 1px solid var(--color-border-subtle); } .league-fact__label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .league-fact__value { display: inline-flex; align-items: center; gap: 6px; font-family: Oswald, sans-serif; font-size: 22px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1.1; min-width: 0; } .league-fact__total { font-size: 13px; color: var(--color-text-muted); font-weight: 600; } .league-fact__logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; } .league-fact__pts { /* Inline suffix of the leader label: "LÍDER (70 PTS)". Stays in the label row so all three facts share the same value-on-top / label- below rhythm. */ font-size: 10px; color: var(--color-text-muted); font-weight: 600; } .league-fact--leader .league-fact__value { font-size: 18px; } /* Current matchday list — wraps `components/matches/_match_row.html.twig` with a compact stack; each row sits inside the shared card, so no extra chrome needed. */ .league-matchday-list { display: flex; flex-direction: column; gap: 12px; } .league-matchday-day { display: flex; flex-direction: column; gap: 4px; } .league-matchday-day__header { padding: 0 4px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); } /* Per-group sub-header inside a matchday day. Sibling of the day header * one level deeper — same visual family as home's * .league-group__group-header so the user sees the same anchor across * surfaces ("Grupo A" reads identically on home and on the league * overview / matches tab). */ .league-matchday-group__header { padding: 4px 4px 2px; font-family: var(--font-body); font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); } /* Standings preview — compact sibling of the full standings table rendered in the overview. Shows pos + team + played + points with an automatic "Zona de descenso" divider inserted by the partial when positions jump. Kept here (not a top-level component) because it's overview-bound; promote to `components/` once team overview or another surface needs it. */ .standings-preview { display: flex; flex-direction: column; } .standings-preview__header, .standings-preview__row { display: grid; grid-template-columns: 24px 1fr 32px 34px 32px; align-items: center; gap: 8px; padding: 6px 10px; } .standings-preview__header { padding-top: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--color-border-subtle); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); text-align: right; } .standings-preview__row { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border-subtle); } .standings-preview__row:last-child { border-bottom: none; } .standings-preview__row--champions { box-shadow: inset 3px 0 0 var(--color-accent); } .standings-preview__row--relegation { box-shadow: inset 3px 0 0 var(--color-live, #e23b3b); } .standings-preview__row--current { background: var(--color-surface-hover); } .standings-preview__pos { font-family: Oswald, sans-serif; font-size: 14px; font-weight: 700; color: var(--color-text-muted); text-align: center; font-variant-numeric: tabular-nums; } .standings-preview__team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .standings-preview__logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .standings-preview__name { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .standings-preview__played, .standings-preview__gd { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-align: right; } .standings-preview__pts { font-family: Oswald, sans-serif; font-size: 15px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; text-align: right; } .standings-preview__separator { padding: 8px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-live, #e23b3b); border-top: 1px dashed var(--color-border-subtle); } /* League numbers — teaser del tab Datos al pie del Overview. Bloques: progress bar (jornada) + strip de 3 totales + stacked outcome bar + 3 teasers (entretenimiento / goles tardíos / xG) + link-button `Ver Datos →`. Reusa paleta y lenguaje visual de `assets/styles/components/league-stats.css` para que ambas vistas se lean como parte del mismo sistema. */ .league-numbers { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 0; } .league-numbers__progress { display: flex; flex-direction: column; gap: 8px; } .league-numbers__progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .league-numbers__progress-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } .league-numbers__progress-round { font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .league-numbers__progress-bar { position: relative; height: 8px; border-radius: 999px; background: rgb(255 255 255 / 6%); overflow: hidden; } .league-numbers__progress-fill { display: block; height: 100%; background: linear-gradient( 90deg, var(--color-accent) 0%, color-mix(in oklch, var(--color-accent) 60%, transparent) 100% ); border-radius: 999px; transition: width 0.6s ease; } /* Split progress (group + KO) — mismo modelo que comp-stats-progress en el tab Datos: segmento de grupos jugado en accent, resto del grupo gris suave, KO jugados en acento secundario amarillo. */ .league-numbers__progress-bar--split { display: flex; } .league-numbers__progress-seg { display: block; height: 100%; transition: width 0.6s ease; } .league-numbers__progress-seg--group { background: var(--color-accent); } .league-numbers__progress-seg--group-rest { background: rgb(255 255 255 / 8%); } .league-numbers__progress-seg--knockout { background: linear-gradient( 90deg, color-mix(in oklch, var(--color-accent) 75%, var(--color-yellow-card, #f5b400)) 0%, var(--color-yellow-card, #f5b400) 100% ); } .league-numbers__progress-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; font-size: 11px; color: var(--color-text-muted); } .league-numbers__progress-legend-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .league-numbers__progress-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .league-numbers__progress-legend-item--group .league-numbers__progress-legend-dot { background: var(--color-accent); } .league-numbers__progress-legend-item--knockout .league-numbers__progress-legend-dot { background: var(--color-yellow-card, #f5b400); } .league-numbers__progress-legend-count { color: var(--color-text); font-variant-numeric: tabular-nums; } .league-numbers__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .league-numbers__cell { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; padding: 4px 8px; text-align: center; min-width: 0; } .league-numbers__cell + .league-numbers__cell { border-left: 1px solid var(--color-border-subtle); } .league-numbers__value { font-family: Oswald, sans-serif; font-size: 22px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1.1; } .league-numbers__label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .league-numbers__outcomes { display: flex; flex-direction: column; gap: 8px; } .league-numbers__bar { display: flex; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; background: var(--color-border-subtle); } .league-numbers__bar-seg { display: block; height: 100%; } .league-numbers__outcomes-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .league-numbers__outcome { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-muted); min-width: 0; } .league-numbers__outcome-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Paleta compartida con `.h2h-bar.*` + `.comp-stats-outcomes__*`: home → accent (verde), draw → color-draw (gris), away → accent-secondary (cyan). Antes los tres bars hablaban paletas distintas (home=accent, away=--color-live rojo) — la diferencia confundía en páginas que los mostraban juntos. */ .league-numbers__bar-seg--home, .league-numbers__outcome--home .league-numbers__outcome-dot { background: var(--color-accent); } .league-numbers__bar-seg--draw, .league-numbers__outcome--draw .league-numbers__outcome-dot { background: var(--color-draw); } .league-numbers__bar-seg--away, .league-numbers__outcome--away .league-numbers__outcome-dot { background: var(--color-accent-secondary); } .league-numbers__outcome-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .league-numbers__outcome-pct { font-family: Oswald, sans-serif; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; margin-left: auto; } /* Teaser row: tres data points que no aparecen en otras secciones del Overview. Cada uno ancla a un widget del tab Datos via el link-button abajo. */ .league-numbers__teasers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 10px 0; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); } .league-numbers__teaser { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 6px; text-align: center; min-width: 0; } .league-numbers__teaser + .league-numbers__teaser { border-left: 1px solid var(--color-border-subtle); } .league-numbers__teaser-value { font-family: Oswald, sans-serif; font-size: 18px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1; } .league-numbers__teaser--pos .league-numbers__teaser-value { color: var(--color-accent); } .league-numbers__teaser--neg .league-numbers__teaser-value { color: var(--color-danger, #e74c3c); } .league-numbers__teaser-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--color-text-muted); line-height: 1.2; } .league-numbers__cta { /* `.link-button` del bundle global ya monta el chrome; marcamos el gap extra arriba para separar del divisor del teaser row. */ margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .league-numbers__progress-fill { transition: none; } } /* ── Matches tab ──────────────────────────────────────────────── */ /* No lateral padding on the matches tab: the tab-panel shell already provides it (removing the old `padding: 0 16px 20px` double-pad). */ .league-matches-header { display: flex; justify-content: flex-end; padding: 0 4px 12px; } /* Split header: [◀ prev] [ trigger centered ] [next ▶]. The centre column takes the remaining width so the trigger pill sits flush in the middle and the arrows hug the edges. Arrows are 44px square touch targets that disable visually at the extremes of the round list. */ .league-matches-header--split { display: grid; grid-template-columns: 35px 1fr 35px; align-items: center; gap: 8px; justify-content: unset; } .league-matches-header--split .league-round-selector { justify-self: center; } .league-round-nav { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border-subtle); color: var(--color-text); text-decoration: none; transition: background-color 120ms ease, color 120ms ease; } .league-round-nav:hover { background: var(--color-surface-hover); color: var(--color-accent); border-color: var(--color-accent); } .league-round-nav.is-disabled { opacity: 0.35; pointer-events: none; } /* Active load of a new round — arrows, trigger and list get locked while the fetch runs. Same UX the home match list uses when the calendar strip changes day. */ .league-round-nav.is-locked, .league-round-trigger.is-locked { opacity: 0.55; pointer-events: none; } .league-matchday-list.is-hidden, .skeleton-list.is-hidden { display: none; } .league-round-nav svg { width: 20px; height: 20px; } /* stylelint-disable-next-line no-descending-specificity */ .league-round-selector { display: inline-flex; } .league-round-trigger { min-width: 140px; } .league-round-trigger__count { color: var(--color-text-muted); font-weight: 500; } .league-round-played-tag { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .league-matches-round-title { margin: 0 4px 8px; } /* `_match_row.html.twig` already sets `margin-top: 8px` on each row, so a flex/grid wrapper would double-space. A bare div keeps the compact stack. */ .league-matches-list { display: block; } /* ── TOTW tab ─────────────────────────────────────────────────── */ .league-totw { padding: 8px 0 20px; } .league-totw-toolbar { padding: 8px 16px 4px; } /* Pitch lives inside `.card`; pull the card's own padding out so the pitch chrome can stretch edge-to-edge while the period header keeps reasonable inset. */ .league-totw-card { padding: 0; overflow: hidden; } .league-totw-period { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 16px 10px; text-align: center; } .league-totw-period__label { font-family: Oswald, sans-serif; font-size: 14px; font-weight: 700; color: var(--color-text); letter-spacing: 0.02em; } .league-totw-period__hint { font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } /* Palmarés / History tab — extracted to `assets/styles/components/league-history.css` so history owns its own stylesheet alongside the other tab-specific components (league-group, team-bestxi, etc.). */ /* ─── Standings · Group split (Mundial / Eurocopa) ────────────── Grid responsive de mini-tablas (1 col mobile, 2 col tablet, 3 col desktop). Cada card es una mini-tabla con 5 columnas (#, equipo, PJ, DG, Pts) y bordes laterales coloreados según zona (verde 1-2 clasifica, ámbar 3 mejor tercero, neutro 4). */ .standings-groups { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (width >= 640px) { .standings-groups { grid-template-columns: repeat(2, 1fr); } } @media (width >= 1024px) { .standings-groups { grid-template-columns: repeat(3, 1fr); } } .standings-group-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .standings-group-card__header { display: flex; align-items: center; padding: 10px 12px; background: var(--color-surface-hover); border-bottom: 1px solid var(--color-border); } .standings-group-card__title { font-family: Oswald, sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text); } .standings-group-card__table { width: 100%; border-collapse: collapse; font-size: 13px; } .standings-group-card__table thead th { padding: 6px 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); text-align: center; border-bottom: 1px solid var(--color-border); } .standings-group-card__col-pos { width: 28px; text-align: center; } .standings-group-card__col-team { text-align: left !important; } .standings-group-card__col-stat, .standings-group-card__col-pts { width: 36px; text-align: center; } .standings-group-card__row { border-bottom: 1px solid var(--color-border); border-left: 3px solid transparent; } .standings-group-card__row:last-child { border-bottom: none; } /* Top-2 = zona "knockout" del torneo (clasifica a octavos). Comparte paleta con `.zone-knockout` / `.zone-champions` de la tabla flat (azul UEFA) — un equipo que termina top-2 en su grupo del Mundial pasa a fase eliminatoria, semánticamente equivalente a entrar en la zona Champions de una liga doméstica. */ .standings-group-card__row.is-qualified { border-left-color: var(--color-zone-champions); } .standings-group-card__row.is-thirdspot { border-left-color: var(--color-zone-cl-playoff); } .standings-group-card__row.is-eliminated { border-left-color: transparent; } /* Equipo(s) del partido en match-detail — misma paleta accent que `.current-team` de la tabla flat (standings.css). El border-left de zona se conserva; el resalte es el fondo. */ .standings-group-card__row.current-team { background: color-mix(in srgb, var(--color-accent) 8%, transparent); } .standings-group-card__pos { padding: 8px 4px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); } .standings-group-card__team { padding: 8px 6px; min-width: 0; } /* Cell holds an anchor (team_url) — flex layout lives here so the logo + name align the same whether the row links or falls back to a plain span. */ .standings-group-card__team-link { display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: inherit; } .standings-group-card__logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } .standings-group-card__name { font-weight: 500; color: var(--color-text); /* Nombre completo (no shortName) — wrap natural si no cabe en una línea (selecciones largas como "Bosnia y Herzegovina" / "Estados Unidos" en mini-tablas A-L del WC). Hyphenation suaviza el corte. */ overflow-wrap: anywhere; hyphens: auto; line-height: 1.15; min-width: 0; } .standings-group-card__stat { padding: 8px 4px; text-align: center; font-variant-numeric: tabular-nums; color: var(--color-text-muted); } .standings-group-card__gd.is-positive { color: var(--color-accent, #22c55e); } .standings-group-card__gd.is-negative { color: var(--color-danger, #ef4444); } .standings-group-card__pts { padding: 8px 6px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); } /* Leyenda de zonas debajo de la grid de grupos. */ .standings-groups-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding: 10px 12px; font-size: 11px; color: var(--color-text-muted); } .standings-groups-legend__item { display: inline-flex; align-items: center; gap: 6px; } .standings-groups-legend__dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .standings-groups-legend__dot.is-qualified { background: var(--color-zone-champions); } .standings-groups-legend__dot.is-thirdspot { background: var(--color-zone-cl-playoff); } .standings-groups-legend__dot.is-eliminated { background: var(--color-border); } /* ─── Overview · groups widget (compact) ───────────────────── Group-stage overview surfaces the 12 groups in a compact widget (vs the full 12-table Clasificación). Two variants share the data: · pills — one thin row per group, teams as horizontal pills. · carousel — horizontal-scroll of group mini-cards. Zone accent (left edge) matches the flat/group tables: top-2 = champions blue (advance), 3rd = cl-playoff amber (best-third hope). */ .group-widget__carousel { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 6px 0 8px; scrollbar-width: none; } .group-widget__carousel::-webkit-scrollbar { display: none; } .group-mini { flex: 0 0 auto; min-width: 118px; background: var(--color-surface-sunken); border-radius: 10px; padding: 8px; scroll-snap-align: start; } .group-mini__label { font-family: var(--font-title); font-size: 12px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 6px; letter-spacing: 0.4px; } .group-mini__row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-left: 3px solid transparent; border-radius: 4px; text-decoration: none; color: inherit; } .group-mini__row.is-qualified { border-left-color: var(--color-zone-champions); } .group-mini__row.is-thirdspot { border-left-color: var(--color-zone-cl-playoff); } .group-mini__logo { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; } .group-mini__code { font-family: var(--font-body); font-size: 12px; font-weight: 600; } .group-mini__pts { margin-left: auto; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--color-text); } /* ─── Overview · standings preview (variant grupos) ────────── Lista compacta de los líderes de cada grupo, una fila por grupo con el chip "GRUPO X" + escudo + nombre + puntos. */ .groups-leaders { list-style: none; margin: 0; padding: 0; } .groups-leaders__row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); } .groups-leaders__row:last-child { border-bottom: none; } .groups-leaders__group-chip { flex-shrink: 0; padding: 2px 8px; font-family: Oswald, sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); background: var(--color-surface-hover); border-radius: 4px; min-width: 64px; text-align: center; } .groups-leaders__logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; } .groups-leaders__name { flex: 1; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .groups-leaders__pts { flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); font-size: 14px; } .groups-leaders__pts-suffix { margin-left: 2px; font-size: 10px; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; } /* ─── Tab Partidos · vista Por Equipo: card-header con logo + nombre del equipo. El logo va inline (24px), no como bloque centrado del card-header genérico. */ .card-header.league-matches-team-header { display: flex; align-items: center; gap: 10px; justify-content: flex-start; } .league-matches-team-header__logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; } /* ─── Tab Partidos · pills toolbar (Por ronda / grupo / equipo) ── La pill row va por encima del round selector y vive sin borders ni fondo extra para no competir con la card-row de abajo. */ .league-matches-grouping-toolbar { margin-bottom: 10px; } /* ─── Segmented control matches grouping ──────────────────────── Reusa `.pst-per90-toggle` del player-stats per-90 toggle. Sin reglas extra — el chrome (bg, border, padding, active state) viene del componente compartido. Modifier propio por si en el futuro necesitamos overrides locales. */ .league-matches-grouping-toggle { margin-bottom: 15px; margin-top: 0; } /* División selector (multi-division national-team comps) — sits above the segmented control and scopes the whole view. Toggle (≤4) reuses `.pst-per90-toggle`; select (>4) reuses the select-modal trigger. */ .league-division-toggle, .league-division-selector { margin-bottom: 12px; } /* Full-width select — the trigger fills the row (chevron pinned right) instead of hugging its label. */ .league-division-selector { display: block; width: 100%; } .league-division-trigger { width: 100%; justify-content: space-between; } /* Selector de grupo / equipo dentro de su vista — mismo wrap que el round selector existente para mantener visual parity. */ .league-matches-group-selector, .league-matches-team-selector { margin-bottom: 12px; } /* ─── Tab Partidos · vista Por Equipo (3-pill toggle) ────────── Cada team-card lleva una pill row Finalizados | Próximos | Temporada que cambia el panel renderizado. Patrón clónico al stats-positions toolbar. Separación generosa abajo (16px) para que el primer day-header del listado no quede pegado. */ .team-matches-pills { margin-bottom: 16px; } .team-matches-empty { padding: 24px 12px; text-align: center; font-size: 13px; color: var(--color-text-muted); } }