/* =================================================================
   Forma Soccer · joomsport.css
   Overrides para el output de JoomSport Pro 4.3.1
   -----------------------------------------------------------------
   Estrategia: CSS-first scopeado bajo #joomsport-container.
   Variables tipo `--brand-blue` se definen en template.css :root.
   Inventario de selectores en docs/reference/joomsport-classes.md.
   Mockup target: docs/mockups/02-mundialito.html (vista `?view=table`)
   ================================================================= */

/* ---------- 1 · Reset y tipografía del wrapper ----------
   JoomSport monta todo bajo #joomsport-container con Tahoma 12px gris.
   Lo alineamos al sistema tipográfico del template. */
#joomsport-container {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 14px;
  color: var(--ink, #0F172A);
  line-height: 1.5;
  background: transparent;
}

/* JoomSport mete una nav-bar interna, "back" arrows y chrome decorativo
   que no queremos — los cubrimos con el header del template.

   .div_for_socbut → print icon decorativo top-right.
   .heading .selection.pull-right → form vacío contenedor del season
                                     dropdown nativo de JoomSport. Lo
                                     escondemos quirúrgicamente para
                                     preservar el h2 hermano (page
                                     title con nombre de la temporada).
                                     `.selection` solo aparece en este
                                     wrapper, no hay riesgo de colisión. */
#joomsport-container .module-middle,
#joomsport-container .back.dotted,
#joomsport-container .navHeadFull,
#joomsport-container .navSingle,
#joomsport-container .div_for_socbut,
#joomsport-container .heading .selection.pull-right {
  display: none;
}

/* Links genéricos: brand orange en hover, color heredado por defecto */
#joomsport-container a {
  color: var(--brand-blue, #1F3D8E);
  text-decoration: none;
  transition: color 0.15s;
}
#joomsport-container a:hover {
  color: var(--brand-orange, #ED5A1F);
}

/* ---------- 2 · Page chrome ----------
   JoomSport envuelve la vista en .page-content (min-height 400px,
   border opcional). Lo aplanamos y dejamos que la sección del
   template haga el padding/wrap. */
#joomsport-container .page-content {
  min-height: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Page title h2 — el wrapper .heading.col-xs-12.col-lg-12 lo envuelve
   y JoomSport lo emite con el nombre de la temporada (ej. "Mundialito
   América") o de la entidad de la vista (team/player/match). Lo
   tratamos como page title con tipografía display de la marca.
   font-body es Montserrat (no hay --font-display en el template). */
#joomsport-container .page-content h2 {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  color: var(--brand-blue, #1F3D8E);
  margin: 32px 0 24px;
}

/* JoomSport mete un wrapper interno col-xs-6 que dejaba el otro
   medio para el form .selection (ahora oculto). El h2 quedaba
   constreñido al 50% y wrapeaba feo. Lo soltamos full-width. */
#joomsport-container .heading.col-xs-12 > .heading.col-xs-6 {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}

/* Hide redundant default h2 en team/player views: el hero vendoreado
   (#jsObjectPhoto.fs-team-page con badge naranja+nombre; análogo en
   player) ya provee el page identity. El h2 default de JoomSport
   muestra emblem placeholder + nombre, duplicado del hero.

   Approach: :has() sobre sibling general (~). El .heading.col-xs-12
   y el #jsObjectPhoto son siblings dentro de .page-content > div.
   - Standings:   sibling siguiente es .seasonTable        → no match
   - Match:       sibling siguiente es #jsMatchViewID       → no match
   - Team:        sibling siguiente es #jsObjectPhoto.fs-team-page   → match
   - Player:      sibling siguiente es #jsObjectPhoto.fs-player-page → match

   Body classes (.view-team, .view-player) NO sirven acá: Joomla las
   setea desde el menú activo del template, no desde la vista del
   componente. Las 4 vistas comparten el mismo menu item así que
   todas heredan `page-home`. */
#joomsport-container .heading.col-xs-12:has(~ #jsObjectPhoto.fs-team-page),
#joomsport-container .heading.col-xs-12:has(~ #jsObjectPhoto.fs-player-page) {
  display: none;
}

/* h2.groups separa grupos dentro de una temporada (ej. "Grupo A") */
#joomsport-container h2.groups {
  font-size: 14px;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-orange, #ED5A1F);
  padding: 0;
  margin: 32px 0 12px;
  border-bottom: 0;
}

/* ---------- 3 · Standings (vista ?view=table) ----------
   JoomSport emite:
     <table class="table table-striped cansorttbl" id="jstable_N">
       <thead><tr><th class="jsalcenter jsNoWrap jsCell5perc">…</th>…</tr></thead>
       <tbody><tr><td class="jsalcenter">1</td><td class="jsNoWrap"><a>Team</a></td>…</tr></tbody>
     </table>
   Mockup target: .standings de docs/mockups/02-mundialito.html */
#joomsport-container .table-responsive {
  padding: 0;
  margin-bottom: 32px;
  background: var(--white, #FFFFFF);
  border: 1px solid var(--line, #E5E2DC);
  overflow-x: auto;
  /* iOS momentum scroll natural en touch */
  -webkit-overflow-scrolling: touch;
}

/* Hint visual sutil de scrollable en mobile: gradiente de fade en el
   borde derecho que indica "hay más contenido". Solo se aplica cuando
   la tabla efectivamente desborda (con overflow-x: auto el contenedor
   ya está scrolleando). El mask-image se aplica sobre el viewport del
   container, no sobre el contenido scrolleable, así el hint queda
   sticky en el borde derecho mientras scrolleás. */
@media (max-width: 720px) {
  #joomsport-container .table-responsive {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
}

#joomsport-container table.cansorttbl,
#joomsport-container .seasonTable table.table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background: transparent;
}

/* Header */
#joomsport-container table.cansorttbl thead th {
  background: var(--cream, #FAF7F2);
  padding: 16px 12px;
  border-bottom: 1px solid var(--line, #E5E2DC);
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #6B7280);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
#joomsport-container table.cansorttbl thead th a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#joomsport-container table.cansorttbl thead th a:hover {
  color: var(--brand-orange, #ED5A1F);
}
/* Las flechas .fa de sort son ruido visual — fuera */
#joomsport-container table.cansorttbl thead th i.fa {
  display: none;
}
/* Quita el striped default y los borders de Bootstrap heredados */
#joomsport-container .table-striped > tbody > tr:nth-of-type(odd) > td,
#joomsport-container .table-striped > tbody > tr:nth-of-type(odd) > th {
  background: transparent;
}
#joomsport-container .table > tbody > tr > td,
#joomsport-container .table > thead > tr > th {
  border-top: 0;
}

/* Body rows */
#joomsport-container table.cansorttbl tbody tr {
  border-bottom: 1px solid var(--line, #E5E2DC);
  transition: background 0.15s;
}
#joomsport-container table.cansorttbl tbody tr:hover {
  background: var(--blue-pale, #EDF0FA);
  cursor: pointer;
}
#joomsport-container table.cansorttbl tbody tr:last-child {
  border-bottom: 0;
}

/* Cell defaults: mono numeric centered (la mayoría de columnas son stats) */
#joomsport-container table.cansorttbl tbody td {
  padding: 16px 12px;
  vertical-align: middle;
  text-align: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  color: var(--ink-2, #2C3548);
}

/* Rank column — itálica 22px azul, naranja para top.
   Targetea .col-rank (inyectado por nuestro vendoring de table-group.php)
   con fallback a td:first-child para escenarios sin patch aplicado. */
#joomsport-container table.cansorttbl tbody td.col-rank,
#joomsport-container table.cansorttbl tbody td:first-child {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  color: var(--brand-blue, #1F3D8E);
  width: 56px;
  letter-spacing: -0.02em;
  text-align: center;
}
#joomsport-container table.cansorttbl tbody tr:first-child td.col-rank,
#joomsport-container table.cansorttbl tbody tr:first-child td:first-child {
  color: var(--brand-orange, #ED5A1F);
}

/* Team column — el cell aloja un .team-cell flex con badge + name */
#joomsport-container table.cansorttbl tbody td.col-team,
#joomsport-container table.cansorttbl tbody td:nth-child(2) {
  text-align: left;
}
#joomsport-container .team-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
#joomsport-container .team-badge {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: 13px;
  letter-spacing: -0.02em;
  user-select: none;
}
#joomsport-container .team-badge.has-logo {
  background-size: cover;
  background-position: center;
  background-color: var(--blue-pale, #EDF0FA);
  color: transparent;
}
/* Paleta de 10 colores estables — el índice se calcula con crc32 del
   nombre del equipo en table-group.php, así que es consistente entre
   renders sin necesidad de guardar nada en BD. */
#joomsport-container .team-badge.color-0 { background: var(--brand-blue, #1F3D8E); }
#joomsport-container .team-badge.color-1 { background: var(--brand-orange, #ED5A1F); }
#joomsport-container .team-badge.color-2 { background: var(--c-baby, #F472B6); }
#joomsport-container .team-badge.color-3 { background: var(--c-africa, #F59E0B); }
#joomsport-container .team-badge.color-4 { background: var(--c-europa-chica, #10B981); }
#joomsport-container .team-badge.color-5 { background: var(--c-europa-grande, #3B82F6); }
#joomsport-container .team-badge.color-6 { background: var(--c-america, #EF4444); }
#joomsport-container .team-badge.color-7 { background: var(--c-asia, #8B5CF6); }
#joomsport-container .team-badge.color-8 { background: var(--c-femenil, #EC4899); }
#joomsport-container .team-badge.color-9 { background: var(--ink-2, #2C3548); }

#joomsport-container .team-cell .team-name,
#joomsport-container table.cansorttbl tbody td:nth-child(2) {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  font-style: normal;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink, #0F172A);
}
#joomsport-container .team-cell .team-name a {
  color: inherit;
}
#joomsport-container .team-cell .team-name a:hover {
  color: var(--brand-orange, #ED5A1F);
}

/* Points column — itálica 22px azul, naranja para top.
   Targetea .col-pts inyectado por vendoring. SIN fallback a :last-child
   porque en muchas configs de JoomSport "Against" termina siendo la
   última columna y el highlight quedaba sobre goles-en-contra. */
#joomsport-container table.cansorttbl tbody td.col-pts {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  color: var(--brand-blue, #1F3D8E);
  letter-spacing: -0.02em;
}
#joomsport-container table.cansorttbl tbody tr:first-child td.col-pts {
  color: var(--brand-orange, #ED5A1F);
}

/* col-form: el mockup muestra "Forma" (W/D/L de últimos 6 partidos) pero
   JoomSport no la calcula. Implementarla en PHP en cada render trae
   riesgo N+1. Por ahora ocultamos la columna entera si aparece — quitar
   este display:none cuando se vendoree la lógica de forma. */
#joomsport-container table.cansorttbl .col-form {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   11 · Match detail (vista ?view=match&id=N) — vendoring de match.php
   Target: docs/mockups/05-match-detail.html (versión realista, ver
   limitaciones documentadas en docs/mockups/README.md sección "⚠️")
   ═══════════════════════════════════════════════════════════════════ */

#joomsport-container .fs-match-page {
  background: var(--white, #FFFFFF);
  padding: 0 0 32px;
}

/* ─── Info bar — pills con label + valor ──────────────────────── */
#joomsport-container .fs-match-info {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px 32px;
  background: var(--cream, #FAF7F2);
  border-bottom: 1px solid var(--line, #E5E2DC);
}
#joomsport-container .fs-match-info .info-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-2, #2C3548);
  text-transform: uppercase;
}
#joomsport-container .fs-match-info .info-pill-label {
  font-size: 10px;
  color: var(--muted, #6B7280);
  font-weight: 800;
  letter-spacing: 0.14em;
}

/* ─── Hero board — grid 3 cols: home | score | away ───────────── */
#joomsport-container .fs-match-board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 56px 32px 64px;
  background: var(--brand-blue, #1F3D8E);
  color: var(--white, #FFFFFF);
}
#joomsport-container .fs-team-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
#joomsport-container .fs-match-board .team-badge {
  width: 96px;
  height: 96px;
  font-size: 36px;
  /* Ring blanco sutil: si el color del badge coincide con el fondo azul
     del hero (Uruguay → color-0 → brand-blue), igual queda visible. */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}
#joomsport-container .fs-match-board .fs-team-name,
#joomsport-container .fs-match-board .fs-team-name a {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(20px, 3vw, 36px);
  text-transform: uppercase;
  letter-spacing: -0.025em;
  /* !important porque el global de joomla 'a { color: ... }' carga
     después y le gana al cascade en algunos rendering paths. */
  color: var(--white, #FFFFFF) !important;
  margin: 0;
  line-height: 1;
}
#joomsport-container .fs-match-board .fs-team-name a:hover {
  color: var(--brand-orange, #ED5A1F) !important;
}

/* ─── Score column con status pill encima ─────────────────────── */
#joomsport-container .fs-score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 280px;
}

#joomsport-container .fs-status {
  display: inline-block;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 6px 14px;
  text-transform: uppercase;
}
#joomsport-container .fs-status.status-final {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}
#joomsport-container .fs-status.status-today {
  background: var(--brand-orange, #ED5A1F);
  color: var(--white, #FFFFFF);
}
#joomsport-container .fs-status.status-scheduled {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white, #FFFFFF);
}

#joomsport-container .fs-score-numbers {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  /* 18vw da más prominencia al score en mobile: 380 viewport → 68.4px
     (sobre el floor 64). Cap a 128 en desktop. line-height 1 evita que
     el descender italic recorte el baseline cuando stackea con la
     status pill encima. */
  font-size: clamp(64px, 18vw, 128px);
  line-height: 1;
  letter-spacing: -0.05em;
}
#joomsport-container .fs-score-home,
#joomsport-container .fs-score-away {
  min-width: 80px;
  text-align: center;
  color: var(--white, #FFFFFF);
}
#joomsport-container .fs-score-sep {
  color: var(--brand-orange, #ED5A1F);
  font-size: 64%;
}

#joomsport-container .fs-aet-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  text-align: center;
}

/* ─── Responsive: stack en mobile ─────────────────────────────── */
@media (max-width: 720px) {
  #joomsport-container .fs-match-board {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 20px;
  }
  #joomsport-container .fs-score-col {
    order: 2;
    min-width: 0;
  }
  #joomsport-container .fs-team-side.fs-team-away {
    order: 3;
  }
  /* Info bar: padding tighter + gap menor para que las pills wrappeen
     a 2 filas sin verse desbalanceado. flex-wrap ya está activo. */
  #joomsport-container .fs-match-info {
    padding: 16px 20px;
    gap: 12px 18px;
  }
  /* Team badge un pelo más chico para no competir con el score */
  #joomsport-container .fs-match-board .team-badge {
    width: 72px;
    height: 72px;
    font-size: 28px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   12 · Scorers section (reemplaza la timeline cronológica del mockup)
   ═══════════════════════════════════════════════════════════════════ */

#joomsport-container .fs-scorers {
  padding: 56px 32px;
  background: var(--white, #FFFFFF);
}
#joomsport-container .fs-scorers-head {
  text-align: center;
  margin-bottom: 40px;
}
#joomsport-container .fs-scorers-head .eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--brand-orange, #ED5A1F);
  margin-bottom: 10px;
}
#joomsport-container .fs-scorers-title {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 4vw, 48px);
  text-transform: uppercase;
  letter-spacing: -0.025em;
  color: var(--brand-blue, #1F3D8E);
  margin: 0;
  line-height: 1;
}

#joomsport-container .fs-scorers-grid {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
#joomsport-container .fs-scorers-divider {
  width: 2px;
  background: var(--brand-orange, #ED5A1F);
  align-self: stretch;
  min-height: 160px;
}
#joomsport-container .fs-scorers-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#joomsport-container .fs-scorers-team {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--brand-blue, #1F3D8E);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line, #E5E2DC);
}
#joomsport-container .fs-scorers-empty {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #6B7280);
  font-weight: 700;
  margin: 0;
  padding: 20px 0;
}

#joomsport-container .fs-scorer-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line, #E5E2DC);
}
#joomsport-container .fs-scorer-row:last-child {
  border-bottom: 0;
}

#joomsport-container .player-avatar {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: 13px;
  letter-spacing: -0.02em;
  user-select: none;
  flex-shrink: 0;
}
/* Reusa la misma paleta de 10 colores que .team-badge */
#joomsport-container .player-avatar.color-0 { background: var(--brand-blue, #1F3D8E); }
#joomsport-container .player-avatar.color-1 { background: var(--brand-orange, #ED5A1F); }
#joomsport-container .player-avatar.color-2 { background: var(--c-baby, #F472B6); }
#joomsport-container .player-avatar.color-3 { background: var(--c-africa, #F59E0B); }
#joomsport-container .player-avatar.color-4 { background: var(--c-europa-chica, #10B981); }
#joomsport-container .player-avatar.color-5 { background: var(--c-europa-grande, #3B82F6); }
#joomsport-container .player-avatar.color-6 { background: var(--c-america, #EF4444); }
#joomsport-container .player-avatar.color-7 { background: var(--c-asia, #8B5CF6); }
#joomsport-container .player-avatar.color-8 { background: var(--c-femenil, #EC4899); }
#joomsport-container .player-avatar.color-9 { background: var(--ink-2, #2C3548); }

#joomsport-container .player-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
#joomsport-container .player-first {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 600;
  font-size: 12px;
  color: var(--muted, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#joomsport-container .player-last {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink, #0F172A);
  letter-spacing: -0.01em;
  margin-top: 2px;
}

#joomsport-container .player-chips {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
#joomsport-container .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
}
#joomsport-container .chip.chip-goal {
  background: var(--brand-orange, #ED5A1F);
}
#joomsport-container .chip.chip-assist {
  background: var(--brand-blue, #1F3D8E);
}

/* Hat-trick badge — reemplaza el chip-goal cuando $p['goals'] >= 3 en
   match-view.php. Pill redondeado con gradient naranja + sombra para
   destacar visualmente del resto de chips rectangulares. Cubre póker
   y mayores (>=4 goles) sin tier extra. */
#joomsport-container .chip.chip-hat-trick {
  background: linear-gradient(135deg, var(--brand-orange, #ED5A1F) 0%, #FF7A3A 100%);
  color: white;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(237, 90, 31, 0.3);
}

@media (max-width: 720px) {
  #joomsport-container .fs-scorers {
    padding: 40px 20px;
  }
  #joomsport-container .fs-scorers-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  #joomsport-container .fs-scorers-divider {
    width: auto;
    height: 2px;
    min-height: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   13 · Team profile (vista ?view=team&tid=X&sid=Y) — vendoring team.php
   Target: docs/mockups/03-team-profile.html
   ═══════════════════════════════════════════════════════════════════ */

#joomsport-container .fs-team-page {
  background: var(--white, #FFFFFF);
}

/* ─── Hero: badge gigante 180×180 | nombre + pills | stats column ─ */
#joomsport-container .fs-team-hero {
  background: var(--brand-blue, #1F3D8E);
  color: var(--white, #FFFFFF);
  padding: 56px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
#joomsport-container .fs-team-hero-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
#joomsport-container .fs-team-hero-left .team-badge {
  /* Badge responsive: 180 cap en desktop, escala con viewport en mobile
     hasta floor 96 (legible y proporcional al hero name a 380px).
     - 1440 desktop: 25vw=360 → cap 180
     - 720 tablet:   25vw=180 → exactamente 180
     - 380 mobile:   25vw=95  → floor 96 */
  width: clamp(96px, 25vw, 180px);
  height: clamp(96px, 25vw, 180px);
  font-size: clamp(38px, 10vw, 70px);
  /* Ring blanco igual que en match-board para colores que choquen con bg azul */
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.22);
}
#joomsport-container .fs-team-hero-name {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--white, #FFFFFF) !important;
  margin: 0;
}
#joomsport-container .fs-team-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
#joomsport-container .fs-team-pills .info-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.10);
  padding: 8px 12px;
  text-transform: uppercase;
}
#joomsport-container .fs-team-pills .info-pill-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
}
#joomsport-container .fs-team-pills .pill-highlight {
  background: var(--brand-orange, #ED5A1F);
  color: var(--white, #FFFFFF);
}

/* ─── Stats column: 4 bloques (Pts naranja, resto blanco) ───────── */
#joomsport-container .fs-team-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, auto));
  grid-template-rows: repeat(2, auto);
  gap: 24px 36px;
  align-items: end;
}
#joomsport-container .stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 96px;
}
#joomsport-container .stat-block .stat-num {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--white, #FFFFFF);
}
#joomsport-container .stat-block .stat-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  margin-top: 6px;
}
#joomsport-container .stat-block.stat-pts .stat-num {
  color: var(--brand-orange, #ED5A1F);
}
#joomsport-container .stat-block.stat-pts .stat-label {
  color: var(--brand-orange, #ED5A1F);
  opacity: 0.9;
}

@media (max-width: 720px) {
  #joomsport-container .fs-team-hero {
    grid-template-columns: 1fr;
    padding: 32px 20px;
    gap: 24px;
  }
  #joomsport-container .fs-team-hero-stats {
    justify-content: start;
    gap: 16px 24px;
  }
  /* Stat num un pelo más chico en mobile para que entren 2×2 sin
     forzar wrap raro de las labels mono. */
  #joomsport-container .fs-team-hero .stat-block .stat-num {
    font-size: clamp(36px, 10vw, 56px);
  }
}

/* ─── §2 · Forma del torneo: 6 bloques W/D/L coloreados ─────────── */
#joomsport-container .fs-team-form {
  padding: 48px 32px;
  background: var(--white, #FFFFFF);
}
#joomsport-container .fs-team-form-head {
  margin-bottom: 28px;
}
#joomsport-container .fs-team-form-head .eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--brand-orange, #ED5A1F);
  margin-bottom: 8px;
}
#joomsport-container .fs-section-title {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(28px, 4vw, 40px);
  text-transform: uppercase;
  letter-spacing: -0.025em;
  color: var(--brand-blue, #1F3D8E);
  margin: 0;
  line-height: 1;
}

#joomsport-container .fs-form-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  max-width: 1080px;
}

#joomsport-container .fs-form-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 12px;
  min-height: 160px;
  color: var(--white, #FFFFFF) !important;
  text-align: center;
  transition: transform 0.15s, filter 0.15s;
}
#joomsport-container .fs-form-block:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  color: var(--white, #FFFFFF) !important;
}
#joomsport-container .fs-form-W { background: var(--win, #10B981); }
#joomsport-container .fs-form-D { background: var(--draw, #F59E0B); }
#joomsport-container .fs-form-L { background: var(--loss, #EF4444); }

#joomsport-container .fs-form-block .form-letter {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.04em;
}
#joomsport-container .fs-form-block .form-score {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  font-style: italic;
  font-size: 20px;
  letter-spacing: -0.02em;
  background: rgba(0, 0, 0, 0.18);
  padding: 2px 10px;
  line-height: 1.1;
}
#joomsport-container .fs-form-block .form-opp {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
#joomsport-container .fs-form-block .form-opp-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
/* Reusa paleta team-badge color-* para el dot del rival */
#joomsport-container .fs-form-block .form-opp-dot.color-0 { background: var(--brand-blue, #1F3D8E); }
#joomsport-container .fs-form-block .form-opp-dot.color-1 { background: var(--brand-orange, #ED5A1F); }
#joomsport-container .fs-form-block .form-opp-dot.color-2 { background: var(--c-baby, #F472B6); }
#joomsport-container .fs-form-block .form-opp-dot.color-3 { background: var(--c-africa, #F59E0B); }
#joomsport-container .fs-form-block .form-opp-dot.color-4 { background: var(--c-europa-chica, #10B981); }
#joomsport-container .fs-form-block .form-opp-dot.color-5 { background: var(--c-europa-grande, #3B82F6); }
#joomsport-container .fs-form-block .form-opp-dot.color-6 { background: var(--c-america, #EF4444); }
#joomsport-container .fs-form-block .form-opp-dot.color-7 { background: var(--c-asia, #8B5CF6); }
#joomsport-container .fs-form-block .form-opp-dot.color-8 { background: var(--c-femenil, #EC4899); }
#joomsport-container .fs-form-block .form-opp-dot.color-9 { background: var(--ink-2, #2C3548); }
#joomsport-container .fs-form-block .form-venue {
  opacity: 0.7;
  font-size: 10px;
}
#joomsport-container .fs-form-block .form-date {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.75;
}

@media (max-width: 720px) {
  #joomsport-container .fs-team-form {
    padding: 32px 20px;
  }
  #joomsport-container .fs-form-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #joomsport-container .fs-form-block {
    min-height: 130px;
  }
}

/* ─── §3 · Plantel grid 2-col con avatares del color del equipo ─── */
#joomsport-container .fs-team-plantel {
  padding: 48px 32px 56px;
  background: var(--cream, #FAF7F2);
}
#joomsport-container .fs-team-plantel-head {
  margin-bottom: 28px;
}
#joomsport-container .fs-team-plantel-head .eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--brand-orange, #ED5A1F);
  margin-bottom: 8px;
}

#joomsport-container .fs-plantel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  max-width: 1080px;
}
#joomsport-container .fs-plantel-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line, #E5E2DC);
}
#joomsport-container .fs-plantel-row:last-child,
#joomsport-container .fs-plantel-row:nth-last-child(2) {
  /* Si total impar, último elemento queda solo en columna izquierda — OK */
}

/* Reusa .player-avatar y .player-meta + .chip de la sección scorers
   (sección 12 del archivo) — no se redefinen acá. */

@media (max-width: 720px) {
  #joomsport-container .fs-team-plantel {
    padding: 32px 20px;
  }
  #joomsport-container .fs-plantel-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   14 · Player profile (vista ?view=player&id=N&sid=Y) — player.php
   Target: docs/mockups/04-player-profile.html
   Convención: misma gramática visual que team profile (hero blue
   con avatar grande + nombre, pills, link al team). Sin dorsales,
   sin posición, sin photo — limitaciones de schema documentadas
   en docs/research-joomsport-team-player-data.md.
   ═══════════════════════════════════════════════════════════════════ */

#joomsport-container .fs-player-page {
  background: var(--white, #FFFFFF);
}

/* ─── Hero: avatar grande + team link (badge mini + nombre) + nombre ─ */
#joomsport-container .fs-player-hero {
  background: var(--brand-blue, #1F3D8E);
  color: var(--white, #FFFFFF);
  padding: 56px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
}
#joomsport-container .fs-player-avatar {
  /* Avatar responsive: mismo pattern que team-badge del hero team-view.
     Mantiene 180px cap desktop, escala con viewport hasta floor 96 en
     mobile real. Font scale acompaña para mantener ratio interno. */
  width: clamp(96px, 25vw, 180px);
  height: clamp(96px, 25vw, 180px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(38px, 10vw, 70px);
  letter-spacing: -0.04em;
  color: var(--white, #FFFFFF);
  /* Ring blanco para colores que choquen con bg azul (color-0) */
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.22);
  user-select: none;
}
/* Paleta reutilizada (color-0..9 ya definida arriba en .team-badge y
   .player-avatar — los selectores son distintos pero queremos misma
   semántica visual; redefinir para evitar especificidad). */
#joomsport-container .fs-player-avatar.color-0 { background: var(--brand-blue, #1F3D8E); }
#joomsport-container .fs-player-avatar.color-1 { background: var(--brand-orange, #ED5A1F); }
#joomsport-container .fs-player-avatar.color-2 { background: var(--c-baby, #F472B6); }
#joomsport-container .fs-player-avatar.color-3 { background: var(--c-africa, #F59E0B); }
#joomsport-container .fs-player-avatar.color-4 { background: var(--c-europa-chica, #10B981); }
#joomsport-container .fs-player-avatar.color-5 { background: var(--c-europa-grande, #3B82F6); }
#joomsport-container .fs-player-avatar.color-6 { background: var(--c-america, #EF4444); }
#joomsport-container .fs-player-avatar.color-7 { background: var(--c-asia, #8B5CF6); }
#joomsport-container .fs-player-avatar.color-8 { background: var(--c-femenil, #EC4899); }
#joomsport-container .fs-player-avatar.color-9 { background: var(--ink-2, #2C3548); }

#joomsport-container .fs-player-hero-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Team link: badge mini + nombre del equipo (validado en match-view scorers) */
#joomsport-container .fs-player-team-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.78) !important;
  align-self: flex-start;
}
#joomsport-container .fs-player-team-link:hover {
  color: var(--white, #FFFFFF) !important;
}
#joomsport-container .fs-player-team-badge {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: 11px;
  color: var(--white, #FFFFFF);
  letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}
#joomsport-container .fs-player-team-badge.color-0 { background: var(--brand-blue, #1F3D8E); }
#joomsport-container .fs-player-team-badge.color-1 { background: var(--brand-orange, #ED5A1F); }
#joomsport-container .fs-player-team-badge.color-2 { background: var(--c-baby, #F472B6); }
#joomsport-container .fs-player-team-badge.color-3 { background: var(--c-africa, #F59E0B); }
#joomsport-container .fs-player-team-badge.color-4 { background: var(--c-europa-chica, #10B981); }
#joomsport-container .fs-player-team-badge.color-5 { background: var(--c-europa-grande, #3B82F6); }
#joomsport-container .fs-player-team-badge.color-6 { background: var(--c-america, #EF4444); }
#joomsport-container .fs-player-team-badge.color-7 { background: var(--c-asia, #8B5CF6); }
#joomsport-container .fs-player-team-badge.color-8 { background: var(--c-femenil, #EC4899); }
#joomsport-container .fs-player-team-badge.color-9 { background: var(--ink-2, #2C3548); }

/* Nombre: first name pequeño-medio + last name massive (jerarquía
   visual donde el apellido manda — pattern de jerseys deportivos) */
#joomsport-container .fs-player-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  line-height: 0.88;
}
#joomsport-container .fs-player-first {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
#joomsport-container .fs-player-last {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  /* Floor 40 (vs 48 antes) para que apellidos largos quepan a 380. 11vw
     da más prominencia al apellido en mid-mobile. Cap 96 desktop. */
  font-size: clamp(40px, 11vw, 96px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--white, #FFFFFF);
}

@media (max-width: 720px) {
  #joomsport-container .fs-player-hero {
    grid-template-columns: 1fr;
    padding: 32px 20px;
    gap: 20px;
    justify-items: start;
  }
  /* Avatar mobile override removido — el clamp del rule base ya cubre
     todos los viewports sin necesidad de @media override. */
}

/* ─── §2 · Top-scorer pill tiered (Bota de Oro / Top 5 / Goleador) ── */
#joomsport-container .fs-topscorer-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin-top: 6px;
  align-self: flex-start;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white, #FFFFFF);
  white-space: nowrap;
}
#joomsport-container .fs-topscorer-pill .fs-topscorer-icon {
  font-size: 15px;
  line-height: 1;
}
#joomsport-container .fs-topscorer-pill .fs-topscorer-label {
  font-weight: 800;
}
#joomsport-container .fs-topscorer-pill .fs-topscorer-count {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.85;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Bota de Oro · top scorer del torneo · amber gold para evocar trofeo */
#joomsport-container .fs-topscorer-pill.tier-gold {
  background: var(--c-africa, #F59E0B);
  color: var(--ink, #0F172A);
}
#joomsport-container .fs-topscorer-pill.tier-gold .fs-topscorer-count {
  border-left-color: rgba(15, 23, 42, 0.3);
}

/* Top 5 del torneo · brand orange (siguiente nivel, energía pero no top) */
#joomsport-container .fs-topscorer-pill.tier-top5 {
  background: var(--brand-orange, #ED5A1F);
}

/* Goleador del equipo · blue-dark sobre hero blue (diferenciación
   pero misma familia cromática — accolade a nivel equipo) */
#joomsport-container .fs-topscorer-pill.tier-team {
  background: var(--blue-dark, #14296B);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ─── §3 · Stat cards: 3 bloques (PJ proxy / Goles / Asistencias) ─── */
#joomsport-container .fs-player-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 40px 32px;
  background: var(--white, #FFFFFF);
}
#joomsport-container .fs-stat-card {
  background: var(--cream, #FAF7F2);
  border: 1px solid var(--line, #E5E2DC);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  min-height: 140px;
  justify-content: center;
}
#joomsport-container .fs-stat-card .fs-stat-card-icon {
  font-size: 20px;
  line-height: 1;
  opacity: 0.85;
}
#joomsport-container .fs-stat-card .fs-stat-card-num {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(48px, 6vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--brand-blue, #1F3D8E);
}
#joomsport-container .fs-stat-card .fs-stat-card-label {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2, #2C3548);
}
#joomsport-container .fs-stat-card .fs-stat-card-hint {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted, #6B7280);
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 2px;
}

/* Goals card → number en naranja (consistente con .col-pts top y
   con .chip.chip-goal) */
#joomsport-container .fs-stat-card.stat-card-goals .fs-stat-card-num {
  color: var(--brand-orange, #ED5A1F);
}

@media (max-width: 720px) {
  #joomsport-container .fs-player-stats {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 12px;
  }
}

/* ─── §4 · Performance por jornada (3 estados visuales) ────────── */
#joomsport-container .fs-player-perf {
  padding: 48px 32px;
  background: var(--cream, #FAF7F2);
}
#joomsport-container .fs-player-perf-head {
  margin-bottom: 28px;
}
#joomsport-container .fs-player-perf-head .eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--brand-orange, #ED5A1F);
  margin-bottom: 8px;
}
#joomsport-container .fs-perf-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

#joomsport-container .fs-perf-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
  background: var(--white, #FFFFFF);
  border: 1px solid var(--line, #E5E2DC);
  color: var(--ink, #0F172A) !important;
  text-decoration: none;
  min-height: 170px;
  transition: transform 0.15s, border-color 0.15s;
}
#joomsport-container .fs-perf-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-blue, #1F3D8E);
  color: var(--ink, #0F172A) !important;
}

/* State: contributed → border azul + chips visibles */
#joomsport-container .fs-perf-card.state-contributed {
  border-color: var(--brand-blue, #1F3D8E);
  border-width: 1px;
  box-shadow: inset 4px 0 0 var(--brand-orange, #ED5A1F);
  padding-left: 16px;
}

/* State: noevent (jugó sin contribuir) → desaturado, "—" en chips */
#joomsport-container .fs-perf-card.state-noevent {
  opacity: 0.78;
  background: #FAFAF8;
}
#joomsport-container .fs-perf-card.state-noevent:hover {
  opacity: 1;
}

/* State: upcoming (partido por jugarse) → border dashed */
#joomsport-container .fs-perf-card.state-upcoming {
  border-style: dashed;
  border-color: var(--line, #E5E2DC);
  background: transparent;
}

/* Meta: jornada name + date */
#joomsport-container .fs-perf-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#joomsport-container .fs-perf-jornada {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink, #0F172A);
  text-transform: uppercase;
}
#joomsport-container .fs-perf-date {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted, #6B7280);
}

/* Opponent row */
#joomsport-container .fs-perf-opp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2, #2C3548);
}
#joomsport-container .fs-perf-vs {
  font-style: italic;
  font-weight: 600;
  color: var(--muted, #6B7280);
  font-size: 10px;
}
#joomsport-container .fs-perf-opp-badge {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 900;
  font-style: italic;
  font-size: 8px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
#joomsport-container .fs-perf-opp-badge.color-0 { background: var(--brand-blue, #1F3D8E); }
#joomsport-container .fs-perf-opp-badge.color-1 { background: var(--brand-orange, #ED5A1F); }
#joomsport-container .fs-perf-opp-badge.color-2 { background: var(--c-baby, #F472B6); }
#joomsport-container .fs-perf-opp-badge.color-3 { background: var(--c-africa, #F59E0B); }
#joomsport-container .fs-perf-opp-badge.color-4 { background: var(--c-europa-chica, #10B981); }
#joomsport-container .fs-perf-opp-badge.color-5 { background: var(--c-europa-grande, #3B82F6); }
#joomsport-container .fs-perf-opp-badge.color-6 { background: var(--c-america, #EF4444); }
#joomsport-container .fs-perf-opp-badge.color-7 { background: var(--c-asia, #8B5CF6); }
#joomsport-container .fs-perf-opp-badge.color-8 { background: var(--c-femenil, #EC4899); }
#joomsport-container .fs-perf-opp-badge.color-9 { background: var(--ink-2, #2C3548); }
#joomsport-container .fs-perf-opp-name {
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Score row */
#joomsport-container .fs-perf-score {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
}
#joomsport-container .fs-perf-score .result-W,
#joomsport-container .fs-perf-score .result-D,
#joomsport-container .fs-perf-score .result-L {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  font-weight: 900;
}
#joomsport-container .fs-perf-score .result-W { background: var(--win, #10B981); }
#joomsport-container .fs-perf-score .result-D { background: var(--draw, #F59E0B); }
#joomsport-container .fs-perf-score .result-L { background: var(--loss, #EF4444); }
#joomsport-container .fs-perf-score .score-num {
  font-size: 16px;
  color: var(--ink, #0F172A);
}
#joomsport-container .fs-perf-score-upcoming {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted, #6B7280);
  text-transform: uppercase;
}

/* Chips row (reusa .chip de la sección 12) */
#joomsport-container .fs-perf-chips {
  display: flex;
  gap: 4px;
  margin-top: auto;
}
#joomsport-container .fs-perf-noevent {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  font-weight: 800;
  color: var(--muted, #6B7280);
}

@media (max-width: 1024px) {
  #joomsport-container .fs-perf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  #joomsport-container .fs-player-perf {
    padding: 32px 20px;
  }
  #joomsport-container .fs-perf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Filas con background coloreado por config (qualif/relegation via inline style)
   — respetamos la prioridad del style="background-color:..." inline pero
   suavizamos el hover */
#joomsport-container table.cansorttbl tbody tr[style*="background"]:hover {
  filter: brightness(0.97);
}

/* ---------- 4 · Bonuses y leyenda de colores ----------
   .matchExtraFields cierra la tabla con bonus opcionales y la
   leyenda de tblcolors (qualifies / relegated / etc.) */
#joomsport-container .matchExtraFields {
  padding: 14px 24px;
  background: var(--cream, #FAF7F2);
  border-top: 1px solid var(--line, #E5E2DC);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #6B7280);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
#joomsport-container .jstbl_legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#joomsport-container .jstbl_legend > div:first-child {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ---------- 5 · Tabs (vistas team / match / tournament) ----------
   JoomSport usa Bootstrap .nav-tabs. Reemplazamos los sprites PNG
   con tipografía clean siguiendo el patrón del mockup. */
#joomsport-container .nav-tabs {
  border-bottom: 1px solid var(--line, #E5E2DC);
  margin: 0 0 24px;
  padding: 0;
  font-size: 12px;
}
#joomsport-container .nav-tabs > li {
  margin-bottom: -1px;
}
#joomsport-container .nav-tabs > li:first-child {
  margin-left: 0;
}
#joomsport-container .nav-tabs > li > a {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 14px 18px;
  color: var(--muted, #6B7280);
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  transition: color 0.15s, border-color 0.15s;
}
#joomsport-container .nav-tabs > li > a:hover {
  background: transparent;
  border-color: var(--orange-pale, #FFE8DC);
  color: var(--brand-orange, #ED5A1F);
}
#joomsport-container .nav-tabs > li.active > a,
#joomsport-container .nav-tabs > li.active > a:focus {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--brand-orange, #ED5A1F);
  color: var(--brand-blue, #1F3D8E);
  font-weight: 800;
}
#joomsport-container .nav-tabs > li.active > a:hover {
  color: var(--brand-blue, #1F3D8E);
}
/* Esconde los iconos PNG sprite (tableS / flag / chart / users / photos)
   — quedan vacíos pero el espacio se colapsa porque les sacamos size */
#joomsport-container .nav-tabs > li > a > i {
  display: none;
}

/* ---------- 6 · Breadcrumbs y history ---------- */
#joomsport-container ol.breadcrumb {
  padding: 0;
  margin: 0 0 16px;
  background: transparent;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
#joomsport-container .breadcrumb i {
  margin-right: 6px;
}
#joomsport-container .history {
  padding: 8px 0;
}

/* ---------- 7 · Pagination ---------- */
#joomsport-container .pagination {
  margin: 24px 0;
}
#joomsport-container .pagination a,
#joomsport-container .pagination span {
  border: 1px solid var(--line, #E5E2DC);
  padding: 8px 14px;
  margin: 0 2px;
  color: var(--ink-2, #2C3548);
  background: var(--white, #FFFFFF);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
}
#joomsport-container .pagination a:hover {
  background: var(--brand-blue, #1F3D8E);
  color: white;
  border-color: var(--brand-blue, #1F3D8E);
}
#joomsport-container .pagination .active > span {
  background: var(--brand-orange, #ED5A1F);
  color: white;
  border-color: var(--brand-orange, #ED5A1F);
}

/* ---------- 8 · Search bar ---------- */
#joomsport-container .searchBar {
  border-bottom: 1px solid var(--line, #E5E2DC);
  margin: 0 0 24px;
  padding: 12px 0;
}
#joomsport-container .searchBar .form-control {
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-size: 13px;
  border: 1px solid var(--line, #E5E2DC);
  padding: 8px 12px;
}

/* ---------- 9 · Botones y forms básicos ---------- */
#joomsport-container .btn,
#joomsport-container .navbar-nav .btn {
  background: var(--brand-blue, #1F3D8E);
  color: white;
  border: 0;
  border-radius: 0;
  padding: 12px 22px;
  font-family: var(--font-body, 'Montserrat', sans-serif);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  text-shadow: none;
  box-shadow: none;
}
#joomsport-container .btn:hover,
#joomsport-container .navbar-nav .btn:hover {
  background: var(--blue-dark, #14296B);
  color: white;
}

/* ---------- 10 · Pendientes (vistas a vendorear en Fase 2) ----------
   Las siguientes vistas necesitan reescritura del HTML — el CSS por
   sí solo no alcanza para lograr el look del mockup. Cuando se
   vendoreen los templates en joomsport-patches/modified/sportleague/views/default/,
   agregar las secciones siguientes:
     - match detail (jsmatchHeader, scoreBig, BigMScore1/2, timeline)
     - team profile (jsObjectPhoto, squad-list, team-overview)
     - player profile (object-view, player-stat)
*/