/* =========================================================================
   CARTOLA ESPECIALISTA — TEMA 2027  (PREVIEW · só localhost)
   -------------------------------------------------------------------------
   Camada de sobreposição: carregada por último, só quando <html class="v27">.
   Não remove nem altera nenhum CSS atual. Para descartar: apague /assets/v27.

   Direção visual: "caderno de scout" — fundo neutro claro, tinta escura,
   laranja da marca só onde há ação/seleção, números grandes e condensados
   (estilo placar de transmissão), tabelas sem caixinhas e sem ruído.

   Sumário
   01 Tokens          07 Tabelas (base)
   02 Base/tipografia 08 Ranking (index)
   03 Header          09 Equipes (club)
   04 Bottom nav      10 xScout / Recorrência / SG
   05 Cards           11 Sheet de filtros, footer, legendas
   06 Controles       12 Responsivo
   ========================================================================= */

/* ============================== 01 TOKENS ============================== */
html.v27 {
  --v-bg: #f4f5f3;
  --v-surface: #ffffff;
  --v-surface-2: #f8f9f7;
  --v-sunken: #eef0ec;
  --v-ink: #13171d;
  --v-ink-2: #3b434e;
  --v-muted: #6a7380;
  --v-muted-2: #959ca6;
  --v-line: #e3e6e1;
  --v-line-2: #eceee9;

  --v-accent: #fb5904;          /* laranja da marca (mantido) */
  --v-accent-ink: #c2410c;      /* laranja para texto (contraste AA) */
  --v-accent-soft: #fff0e6;

  --v-good: #157a43;
  --v-good-bg: #dcf1e4;
  --v-bad: #b3261e;
  --v-bad-bg: #fbe3df;
  --v-mid-bg: #f1f2ef;

  --v-r-lg: 16px;
  --v-r: 12px;
  --v-r-sm: 8px;
  --v-shadow: 0 1px 2px rgba(19, 23, 29, 0.04);
  --v-shadow-pop: 0 12px 32px rgba(19, 23, 29, 0.12);

  --v-font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --v-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  /* Re-mapeia os tokens antigos → todo CSS que usa var() já herda o tema */
  --bg: var(--v-bg);
  --bg-2: var(--v-bg);
  --surface: var(--v-surface);
  --surface-2: var(--v-surface-2);
  --card: var(--v-surface);
  --text: var(--v-ink);
  --muted: var(--v-muted);
  --muted-2: var(--v-muted-2);
  --border: var(--v-line);
  --border-2: var(--v-line-2);
  --line: var(--v-line);
  --line-2: var(--v-line-2);
  --accent: var(--v-accent);
  --radius: var(--v-r-lg);
  --radius-sm: var(--v-r);
  --radius-xs: var(--v-r-sm);
  --shadow-sm: var(--v-shadow);
  --shadow-md: var(--v-shadow);
  --shadow-lg: var(--v-shadow-pop);
  --table-head: var(--v-surface-2);
  --table-zebra: transparent;
  --table-hover: #f6f7f4;
  --sticky-bg: var(--v-surface);
  --sticky-head-bg: var(--v-surface-2);
  --sticky-sep: var(--v-line);
  --ring: 0 0 0 3px rgba(251, 89, 4, 0.22);
  --bn-h: 64px;
  color-scheme: light;
}

/* ============================== 02 BASE ============================== */
/* O <html> também recebe o fundo do tema (o index.css pinta o html de claro
   com !important) e o body cresce com o conteúdo (app.css fixa height:100%).
   Sem isso, no modo escuro aparecia uma faixa clara abaixo da 1ª tela. */
html.v27 { background: var(--v-bg) !important; }
html.v27 body { height: auto !important; }
html.v27 body,
html.v27 body.app-body {
  background: var(--v-bg) !important;
  color: var(--v-ink);
  font-family: var(--v-font);
  font-size: 14px;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
html.v27 body::before,
html.v27 body::after,
html.v27 body.app-body::after,
html.v27 .app-main::before { content: none !important; display: none !important; }

html.v27 ::selection { background: rgba(251, 89, 4, 0.18); }
html.v27 :focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; }

/* Tudo que usava JetBrains Mono vira Barlow com números tabulares */
html.v27 *:not(svg):not(path) { font-family: var(--v-font) !important; }
html.v27 [class*="val"],
html.v27 td,
html.v27 .metric-value .txt,
html.v27 .hero-num,
html.v27 .xfilters-games-input,
html.v27 .xfilters-minutes-input { font-variant-numeric: tabular-nums; letter-spacing: 0; }

html.v27 .wrap,
html.v27 .rail { width: min(1320px, calc(100% - 48px)); }

/* =========================== 03 HEADER =========================== */
html.v27 .app-header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--v-line) !important;
  box-shadow: none !important;
}
html.v27 .app-header::before { display: none !important; }
html.v27 .app-header__inner { padding: 0 !important; min-height: 60px; gap: 20px; }
html.v27 .app-header__left { gap: 28px; align-self: stretch; }

html.v27 .app-logo-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--v-accent) !important;
  border: 0 !important; box-shadow: none !important;
}
html.v27 .app-logo-mark svg { color: #fff !important; width: 17px; height: 17px; stroke-width: 2.4; }
html.v27 #pageTitle {
  font-family: var(--v-display) !important;
  font-size: 19px; font-weight: 700; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--v-ink);
}
html.v27 #pageSubtitle { font-size: 12px; font-weight: 500; color: var(--v-muted); letter-spacing: 0; }

/* abas do topo: texto + sublinhado laranja (sem "pílula") */
html.v27 .app-header__tabs {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; gap: 4px; align-self: stretch; display: flex; align-items: stretch;
}
html.v27 .app-header__tabs .tab {
  position: relative; display: flex; align-items: center;
  padding: 0 12px !important; border-radius: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  font-size: 14px; font-weight: 600; color: var(--v-muted) !important;
}
html.v27 .app-header__tabs .tab:hover { color: var(--v-ink) !important; }
html.v27 .app-header__tabs .tab.is-active,
html.v27 .app-header__tabs .tab.active { color: var(--v-ink) !important; }
html.v27 .app-header__tabs .tab.is-active::after,
html.v27 .app-header__tabs .tab.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--v-accent);
}

html.v27 .icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: transparent !important; border: 1px solid transparent !important;
  box-shadow: none !important;
}
html.v27 .icon-btn:hover { background: var(--v-sunken) !important; transform: none; }
html.v27 .icon-btn svg { color: var(--v-ink-2) !important; }
html.v27 .icon-btn--danger svg { color: var(--v-muted) !important; }
html.v27 .icon-btn--danger:hover svg { color: var(--v-bad) !important; }

/* ========================= 04 BOTTOM NAV ========================= */
html.v27 .app-body { padding-bottom: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px)); }
html.v27 .bottomnav {
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 0 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid var(--v-line) !important;
  box-shadow: none !important;
}
html.v27 .bn-item {
  position: relative;
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 12px !important; padding: 8px 2px 6px !important; gap: 3px !important;
  font-size: 11px !important; font-weight: 600 !important; color: var(--v-muted) !important;
}
html.v27 .bn-item svg { width: 22px; height: 22px; }
html.v27 .bn-item.active { color: var(--v-ink) !important; }
html.v27 .bn-item.active svg,
html.v27 .bn-item.active .bn-ico { color: var(--v-accent) !important; transform: none !important; }
html.v27 .bn-item.active::before {
  content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--v-accent);
}
html.v27 .bn-item:active { transform: scale(0.96); }

/* ============================ 05 CARDS ============================ */
html.v27 .card,
html.v27 .card.app-card,
html.v27 .club-overview,
html.v27 .xfilters,
html.v27 .l-card {
  background: var(--v-surface) !important;
  border: 1px solid var(--v-line) !important;
  border-radius: var(--v-r-lg) !important;
  box-shadow: var(--v-shadow) !important;
}
html.v27 .card::before,
html.v27 .card.app-card::before,
html.v27 .club-overview::before,
html.v27 .card-head-left::before,
html.v27 .card.app-card .card-head-left::before,
html.v27 .overview-block__title::before,
html.v27 .sheet-title::before,
html.v27 .opp-caption::before { display: none !important; content: none !important; }

html.v27 .card-h,
html.v27 .card.app-card .card-h.compact,
html.v27 .xfilters-head,
html.v27 .overview-head,
html.v27 .panel__head {
  background: transparent !important;
  border-bottom: 1px solid var(--v-line-2) !important;
  padding: 14px 20px !important;
}

/* títulos de seção: condensado, forte */
html.v27 .card-title,
html.v27 .card.app-card .card-title,
html.v27 #title,
html.v27 .panel__title,
html.v27 .club-table__title,
html.v27 .xfilters-title,
html.v27 .card.xfilters .card-title,
html.v27 .overview-head__title,
html.v27 .l-title {
  font-family: var(--v-display) !important;
  font-size: 20px !important; font-weight: 700 !important;
  letter-spacing: 0.005em !important; text-transform: none !important;
  color: var(--v-ink) !important;
}
/* "olho" (eyebrow) */
html.v27 .xfilters-eyebrow,
html.v27 .club-head-eyebrow,
html.v27 .overview-block__title,
html.v27 .metric-label,
html.v27 .xfilters-label,
html.v27 .hero-label,
html.v27 .l-kicker,
html.v27 .field-label,
html.v27 .sheet .field-label {
  font-family: var(--v-font) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  color: var(--v-muted) !important;
}
html.v27 .card-head-sub,
html.v27 .club-help,
html.v27 .xfilters-help { color: var(--v-muted) !important; font-size: 13px !important; }

/* badges quadradas de ícone no cabeçalho dos cards (xScout, SG) */
html.v27 .xfilters-badge {
  background: var(--v-sunken) !important; border: 0 !important; box-shadow: none !important;
  border-radius: 10px !important;
}
html.v27 .xfilters-badge svg { color: var(--v-ink-2) !important; }

/* =========================== 06 CONTROLES =========================== */
/* Botões */
html.v27 .btn,
html.v27 .btn--soft,
html.v27 #btnOpenFilters2,
html.v27 .xfilters-collapse,
html.v27 .xfilters-actions button,
html.v27 .rec-mini-actions button {
  font-family: var(--v-font) !important;
  background: var(--v-surface) !important;
  border: 1px solid var(--v-line) !important;
  color: var(--v-ink-2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 600 !important; font-size: 13px !important;
  padding: 7px 12px !important; min-height: 34px;
  transform: none !important;
}
html.v27 .btn:hover,
html.v27 #btnOpenFilters2:hover,
html.v27 .xfilters-collapse:hover,
html.v27 .xfilters-actions button:hover,
html.v27 .rec-mini-actions button:hover { background: var(--v-sunken) !important; color: var(--v-ink) !important; }

/* Controle segmentado (padrão único para TODOS os grupos de opção) */
html.v27 #navViews,
html.v27 .seg,
html.v27 .seg.seg--sm,
html.v27 #mandoSeg,
html.v27 .density-toggle {
  display: inline-flex !important; flex-wrap: nowrap; align-items: center;
  gap: 2px !important; padding: 3px !important;
  background: var(--v-sunken) !important;
  border: 0 !important; border-radius: 11px !important; box-shadow: none !important;
}
html.v27 #navViews .tab,
html.v27 .seg-btn,
html.v27 .seg__btn,
html.v27 .seg.seg--sm .seg-btn,
html.v27 .density-toggle button {
  font-family: var(--v-font) !important;
  background: transparent !important;
  border: 0 !important; box-shadow: none !important;
  border-radius: 8px !important;
  color: var(--v-muted) !important;
  font-size: 13px !important; font-weight: 600 !important;
  padding: 6px 12px !important; min-height: 30px; white-space: nowrap;
  transform: none !important;
}
html.v27 #navViews .tab:hover,
html.v27 .seg-btn:hover,
html.v27 .seg__btn:hover,
html.v27 .density-toggle button:hover { color: var(--v-ink) !important; }
html.v27 #navViews .tab.active,
html.v27 .seg-btn.is-active,
html.v27 .seg__btn.is-active,
html.v27 .seg.seg--sm .seg-btn.is-active,
html.v27 .density-toggle button.is-active {
  background: var(--v-surface) !important;
  color: var(--v-ink) !important;
  box-shadow: 0 1px 2px rgba(19, 23, 29, 0.08), 0 0 0 1px rgba(19, 23, 29, 0.04) !important;
}
html.v27 #navViews .nav-sep {
  width: 1px !important; height: 18px !important; margin: 0 6px !important;
  background: var(--v-line) !important; border: 0 !important;
}
html.v27 #navViews::before,
html.v27 #navViews::after { display: none !important; }

/* Chips de filtro (posição, status, etc.) */
html.v27 .chip,
html.v27 #statusChips .chip,
html.v27 .rec-status-chips .chip {
  font-family: var(--v-font) !important;
  background: var(--v-surface) !important;
  border: 1px solid var(--v-line) !important;
  color: var(--v-ink-2) !important;
  border-radius: 999px !important; box-shadow: none !important;
  font-size: 13px !important; font-weight: 600 !important;
  padding: 5px 12px !important; transform: none !important;
}
html.v27 .chip.is-on,
html.v27 #statusChips .chip.is-on,
html.v27 .rec-status-chips .chip.is-on {
  background: var(--v-ink) !important; border-color: var(--v-ink) !important; color: #fff !important;
}

/* Escudos clicáveis (filtro de clubes / troca de clube)
   ligado = escudo colorido; desligado = escudo apagado. Sem anéis pesados. */
html.v27 #clubChips .chip,
html.v27 .xfilters-clubs .chip,
html.v27 .rec-clubs .chip,
html.v27 .club-nav__row .tab.tab--club {
  width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important;
  border-radius: 50% !important; display: inline-grid !important; place-items: center;
  background: var(--v-surface) !important;
  border: 1px solid var(--v-line) !important; box-shadow: none !important;
  opacity: 0.38; filter: grayscale(1); transition: opacity .15s, filter .15s, border-color .15s;
}
html.v27 #clubChips .chip.is-on,
html.v27 .xfilters-clubs .chip.is-on,
html.v27 .rec-clubs .chip.is-on { opacity: 1; filter: none; }
html.v27 .club-nav__row .tab.tab--club { opacity: 0.75; filter: grayscale(0.35); }
html.v27 .club-nav__row .tab.tab--club.active {
  opacity: 1; filter: none; border-color: var(--v-ink) !important;
  box-shadow: 0 0 0 1px var(--v-ink) !important;
}
html.v27 #clubChips .chip:hover,
html.v27 .club-nav__row .tab.tab--club:hover { opacity: 1; filter: none; }
html.v27 .club-nav__row .tab.tab--club .club-chip-text,
html.v27 #clubChips .chip-text { display: none !important; }
html.v27 .club-chip-crest,
html.v27 #clubChips .chip-crest { width: 24px !important; height: 24px !important; box-shadow: none !important; }

/* Inputs, selects, range */
html.v27 .field-control,
html.v27 select,
html.v27 .xfilters-games-input,
html.v27 .xfilters-minutes-input {
  font-family: var(--v-font) !important;
  background: var(--v-surface) !important;
  border: 1px solid var(--v-line) !important;
  border-radius: 10px !important; box-shadow: none !important;
  color: var(--v-ink) !important; font-weight: 600;
}
html.v27 input[type="range"] { accent-color: var(--v-accent); }

/* Pílulas de contagem ("24 linhas", "20 times", "5 jogos") */
html.v27 .pill,
html.v27 .panel__count,
html.v27 .card-h .badge,
html.v27 [id$="Count"],
html.v27 .round-chip {
  background: var(--v-sunken) !important; color: var(--v-ink-2) !important;
  border: 0 !important; box-shadow: none !important;
  border-radius: 999px !important; font-weight: 600 !important; font-size: 12px !important;
}

/* Chips de filtro ativo ("Últ. 5 jogos ×") */
html.v27 .active-filters { background: transparent !important; border: 0 !important; padding: 10px 20px 0 !important; }
html.v27 .filter-chip {
  background: var(--v-accent-soft) !important; color: var(--v-accent-ink) !important;
  border: 0 !important; box-shadow: none !important; border-radius: 999px !important;
  font-weight: 600 !important;
}

/* Status (Provável / Dúvida / Nulo) */
html.v27 .status-pill { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html.v27 .status-pill__dot { width: 8px !important; height: 8px !important; box-shadow: none !important; }

/* ========================== 07 TABELAS (BASE) ========================== */
html.v27 .table-wrap,
html.v27 .opp-wrap {
  background: var(--v-surface) !important;
  border: 0 !important; border-radius: 0 0 var(--v-r-lg) var(--v-r-lg) !important;
  box-shadow: none !important;
}
html.v27 table.sheet { font-size: 14px; }
html.v27 table.sheet th,
html.v27 table.sheet td {
  border-right: 0 !important;
  border-bottom: 1px solid var(--v-line-2) !important;
}
html.v27 table.sheet thead th,
html.v27 .sheet thead th {
  background: var(--v-surface) !important;
  font-family: var(--v-display) !important;
  font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important;
  color: var(--v-muted) !important;
  border-bottom: 1px solid var(--v-line) !important;
  padding: 12px 12px 10px !important;
  white-space: nowrap; box-shadow: none !important;
}
html.v27 table.sheet thead th:hover { color: var(--v-ink) !important; }
html.v27 table.sheet thead th.th-active,
html.v27 table.sheet thead th.is-sorted,
html.v27 .sheet th.sortable.is-sorted {
  color: var(--v-ink) !important;
  background: var(--v-surface) !important;
  box-shadow: inset 0 -2px 0 var(--v-accent) !important;
  text-decoration: none !important;
}
html.v27 table.sheet tbody td,
html.v27 .sheet td {
  font-family: var(--v-font) !important;
  font-size: 14px !important; font-weight: 500;
  color: var(--v-ink);
  padding: 10px 12px !important;
  background-color: var(--v-surface);
}
/* zebra/hover NUNCA apagam heatmap (inline .v27-heat ou classes hm-*) */
html.v27 table.sheet tbody tr:nth-child(even) td:not(.v27-heat):not([class*="hm"]) { background-color: var(--v-surface) !important; }
html.v27 table.sheet tbody tr:hover td:not(.v27-heat):not([class*="hm"]) { background-color: #f7f8f5 !important; }
html.v27 table.sheet tbody tr:hover td.v27-heat,
html.v27 table.sheet tbody tr:hover td[class*="hm"] { filter: brightness(0.97); }
html.v27 table.sheet tbody tr:last-child td { border-bottom: 0 !important; }

/* células com heatmap (repintadas pelo v27.js) */
html.v27 td.v27-heat { font-weight: 600 !important; }

/* rank (coluna P) — número simples, sem caixinha */
html.v27 td.rank,
html.v27 table.sheet td:nth-child(1) { color: var(--v-muted) !important; font-weight: 600 !important; }
html.v27 td.rank > *,
html.v27 td.rank span {
  background: none !important; border: 0 !important; box-shadow: none !important;
  font-family: var(--v-font) !important; font-size: 14px !important; color: inherit !important;
  min-width: 0 !important; padding: 0 !important;
}
html.v27 td.rank.top1 { color: var(--v-ink) !important; }

/* coluna fixa (sticky): linha fina em vez de sombra/faixa cinza */
html.v27 table.sheet th:nth-child(2),
html.v27 table.sheet td:nth-child(2) { box-shadow: inset -1px 0 0 var(--v-line-2) !important; }

/* colunas estreitas Mando/Status cabem o rótulo inteiro */
html.v27 table.sheet th.col-mando, html.v27 table.sheet td.col-mando,
html.v27 table.sheet th.col-status, html.v27 table.sheet td.col-status,
html.v27 #filtersCard ~ * table.sheet th:nth-child(4),
html.v27 #filtersCard ~ * table.sheet th:nth-child(5) { width: auto !important; max-width: none !important; min-width: 62px !important; }

/* jogador / clube */
html.v27 .cell-club img,
html.v27 .team-crest,
html.v27 .opp-crest { box-shadow: none !important; background: none !important; border: 0 !important; }
html.v27 .cr-jogador,
html.v27 table.sheet tbody td:nth-child(2) { font-weight: 600 !important; }

/* mando: Casa / Fora (texto gerado pelo v27.js) */
html.v27 .v27-mando {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 6px;
}
html.v27 .v27-mando--casa { background: var(--v-accent-soft); color: var(--v-accent-ink); }
html.v27 .v27-mando--fora { background: var(--v-sunken); color: var(--v-ink-2); }

/* Índice final (xScout) */
html.v27 .indice-pill {
  background: var(--v-ink) !important; color: #fff !important; border: 0 !important; box-shadow: none !important;
  border-radius: 8px !important; font-weight: 700 !important; font-family: var(--v-font) !important;
}
html.v27 table.sheet td.col-indice { background: var(--v-surface) !important; }

/* ========================== 08 RANKING (INDEX) ========================== */
html.v27 .app-main { padding-top: 20px; }
html.v27 .card.app-card:first-child .card-h.compact { border-bottom: 0 !important; padding-bottom: 6px !important; }
html.v27 .chiprow#navViews { margin: 0 20px 16px !important; overflow-x: auto; max-width: calc(100% - 40px); }

/* tabela ocupa a largura do card (antes ficava em ~40% da tela):
   layout fixo — P e Equipe com largura definida, colunas de números dividem o resto */
html.v27 #tablesPair #tableWrap table.sheet { width: 100% !important; min-width: 560px !important; table-layout: fixed; }
html.v27 #tablesPair #tableWrap table.sheet th:nth-child(n+3),
html.v27 #tablesPair #tableWrap table.sheet td:nth-child(n+3) { width: auto !important; min-width: 0 !important; }
html.v27 #tablesPair #tableWrap table.sheet th:nth-child(1),
html.v27 #tablesPair #tableWrap table.sheet td:nth-child(1) { width: 64px !important; min-width: 0 !important; max-width: none !important; }
html.v27 #tablesPair #tableWrap table.sheet th:nth-child(2),
html.v27 #tablesPair #tableWrap table.sheet td:nth-child(2) { width: 240px !important; min-width: 0 !important; max-width: none !important; }
html.v27 .tables-pair { gap: 0 !important; }

/* zonas (G6 / meio / Z4): só um marcador fino à esquerda, sem pintar a linha */
html.v27 table.sheet tbody tr.zone-g6 td,
html.v27 table.sheet tbody tr.zone-mid td,
html.v27 table.sheet tbody tr.zone-relegation td { background-color: var(--v-surface) !important; }
html.v27 table.sheet tbody tr.zone-g6 td:nth-child(1),
html.v27 table.sheet tbody tr.zone-mid td:nth-child(1),
html.v27 table.sheet tbody tr.zone-relegation td:nth-child(1) { border-left: 0 !important; box-shadow: inset 3px 0 0 var(--v-line) !important; }
html.v27 table.sheet tbody tr.zone-g6 td:nth-child(1) { box-shadow: inset 3px 0 0 #2fa866 !important; }
html.v27 table.sheet tbody tr.zone-relegation td:nth-child(1) { box-shadow: inset 3px 0 0 #e0473d !important; }

/* valores (antes: "pílulas" monoespaçadas com borda) */
html.v27 td.num .val,
html.v27 table.sheet .val {
  font-family: var(--v-font) !important;
  font-size: 14px !important; font-weight: 600 !important;
  min-width: 48px !important; padding: 6px 8px !important;
  border-radius: 7px !important; box-shadow: none !important; border: 0 !important;
}
html.v27 .team-cell { gap: 10px !important; font-weight: 600; }
html.v27 .team-sparkline { opacity: 0.7; box-shadow: none !important; background: none !important; border: 0 !important; }

/* cards de destaque (Líder / Melhor média …) */
html.v27 .metrics.metrics--compact { gap: 12px !important; }
html.v27 .metric-card {
  background: var(--v-surface) !important;
  border: 1px solid var(--v-line) !important;
  border-radius: var(--v-r-lg) !important;
  box-shadow: none !important; padding: 14px 16px !important;
}
html.v27 .metric-card::before,
html.v27 .metric-card::after,
html.v27 .metric-label::before { display: none !important; }
html.v27 .metric-value { gap: 10px !important; margin-top: 10px !important; min-height: 32px; }
html.v27 .metric-team {
  width: 32px !important; height: 32px !important; border-radius: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
}
html.v27 .metric-team img { width: 30px !important; height: 30px !important; }
html.v27 .v27-team-name {
  font-family: var(--v-display) !important; font-size: 22px; font-weight: 700; line-height: 1;
  color: var(--v-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.v27 .metric-sub {
  margin-top: 10px !important; padding-top: 10px !important;
  border-top: 1px solid var(--v-line-2) !important;
  font-size: 13px !important; font-weight: 500 !important; color: var(--v-muted) !important;
}

/* ========================== 09 EQUIPES (CLUB) ========================== */
html.v27 .club-crest-mini {
  background: none !important; border: 0 !important; box-shadow: none !important;
  width: 56px !important; height: 56px !important;
}
html.v27 .club-head-title {
  font-family: var(--v-display) !important; font-size: 30px !important; font-weight: 700 !important;
  letter-spacing: 0 !important;
}
html.v27 .club-nav__row { gap: 8px !important; }
html.v27 .ov-dot { display: none !important; }
html.v27 .overview-head__title { font-family: var(--v-display) !important; }
html.v27 .v27-club-sigla { font-family: var(--v-font); font-size: 13px; font-weight: 600; color: var(--v-muted); margin-left: 10px; letter-spacing: .04em; }

html.v27 .hero-grid { gap: 12px !important; }
html.v27 .hero-card {
  background: var(--v-surface) !important;
  border: 1px solid var(--v-line) !important;
  border-radius: var(--v-r) !important; box-shadow: none !important;
}
html.v27 .hero-card::before { display: none !important; }
html.v27 .hero-icon,
html.v27 .ins-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; font-size: 0 !important; }
html.v27 .v27-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.v27 .v27-ico--casa { color: var(--v-accent-ink); }
html.v27 .v27-ico--fora { color: var(--v-ink-2); }
html.v27 .hero-num {
  font-family: var(--v-display) !important; font-size: 36px !important; font-weight: 700 !important;
  letter-spacing: 0 !important; color: var(--v-ink) !important;
}
html.v27 .hero-unit { color: var(--v-muted) !important; font-weight: 500 !important; }
html.v27 .hero-rank {
  background: var(--v-sunken) !important; color: var(--v-ink-2) !important; border: 0 !important;
  border-radius: 6px !important; font-weight: 700 !important;
}
html.v27 .hero-card.rk-top .hero-rank { background: var(--v-good-bg) !important; color: var(--v-good) !important; }
html.v27 .hero-card.rk-bot .hero-rank { background: var(--v-bad-bg) !important; color: var(--v-bad) !important; }
html.v27 .hero-full { color: var(--v-muted-2) !important; }

/* Leituras rápidas: lista limpa com marcador lateral */
html.v27 .ins-item {
  background: var(--v-surface-2) !important;
  border: 0 !important; box-shadow: inset 3px 0 0 var(--v-line) !important;
  border-radius: 8px !important; padding: 10px 14px !important; font-size: 14px;
}
html.v27 .ins-item.ins-good { box-shadow: inset 3px 0 0 #2fa866 !important; }
html.v27 .ins-item.ins-bad { box-shadow: inset 3px 0 0 #e0473d !important; }

/* ---- Visão rápida: faixa minimalista (informação secundária às tabelas) ---- */
html.v27 .club-overview .overview-head { padding: 10px 20px !important; }
html.v27 .club-overview .overview-head__title { font-size: 17px !important; }
html.v27 .club-overview .seg { min-height: 0; }
html.v27 .club-overview .seg__btn { min-height: 26px; padding: 4px 10px !important; font-size: 12px !important; }
html.v27 .club-overview .overview-body { padding: 12px 20px 14px !important; gap: 12px !important; display: grid; }
html.v27 .club-overview .overview-block { margin: 0 !important; padding: 0 !important; }
html.v27 .club-overview .overview-block__title { display: none !important; }

/* 4 números lado a lado, separados por linha fina — sem cards */
html.v27 .club-overview .hero-grid {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important;
}
html.v27 .club-overview .hero-card {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 2px 16px !important; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: baseline;
  border-left: 1px solid var(--v-line-2) !important;
}
html.v27 .club-overview .hero-card:first-child { border-left: 0 !important; padding-left: 0 !important; }
html.v27 .club-overview .hero-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 0 0 2px !important; }
html.v27 .club-overview .hero-label { font-size: 10.5px !important; }
html.v27 .club-overview .hero-icon { width: 14px; height: 14px; }
html.v27 .club-overview .v27-ico svg { width: 13px; height: 13px; }
html.v27 .club-overview .hero-value { display: flex; align-items: baseline; gap: 3px; margin: 0 !important; }
html.v27 .club-overview .hero-num { font-size: 24px !important; line-height: 1 !important; }
html.v27 .club-overview .hero-unit { font-size: 11px !important; }
html.v27 .club-overview .hero-foot { display: flex; align-items: center; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html.v27 .club-overview .hero-rank {
  background: none !important; padding: 0 !important; font-size: 12px !important; font-weight: 600 !important;
  color: var(--v-muted) !important;
}
html.v27 .club-overview .hero-rank::after { content: "na liga"; margin-left: .25em; font-weight: 500; }
html.v27 .club-overview .hero-rank { border: 0 !important; box-shadow: none !important; outline: 0 !important; }
html.v27 .club-overview .hero-card.rk-top .hero-rank { background: none !important; color: var(--v-good) !important; }
html.v27 .club-overview .hero-card.rk-bot .hero-rank { background: none !important; color: var(--v-bad) !important; }
html.v27 .club-overview .hero-full { display: none !important; }

/* Leituras rápidas: lista enxuta, sem caixas */
html.v27 .club-overview .ins-list { display: grid; gap: 2px !important; padding-top: 10px; border-top: 1px solid var(--v-line-2); }
html.v27 .club-overview .ins-item,
html.v27 .club-overview .ins-item.ins-good,
html.v27 .club-overview .ins-item.ins-bad {
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 2px 0 !important; font-size: 13px !important; color: var(--v-ink-2); display: flex; align-items: center; gap: 8px;
}
html.v27 .club-overview .ins-text { font-weight: 500 !important; }
html.v27 .club-overview .ins-text b { font-weight: 700; color: var(--v-ink); }
html.v27 .club-overview .ins-icon { width: 14px; height: 14px; }

@media (max-width: 700px) {
  html.v27 .club-overview .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 12px !important; }
  html.v27 .club-overview .hero-card:nth-child(3) { border-left: 0 !important; padding-left: 0 !important; }
  html.v27 .club-overview .overview-body { padding: 12px 14px !important; }
}

/* ---- Equipes: cabeçalho único (montado pelo v27.js) ---- */
html.v27 .v27-hidden { display: none !important; }

html.v27 .club-headcard .card-h,
html.v27 .club-headcard .card-h.compact {
  display: flex !important; align-items: center; gap: 16px;
  border-bottom: 0 !important; padding: 18px 20px 6px !important;
}
html.v27 .club-headcard .club-head-left { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; }
html.v27 .club-headcard .club-crest-mini { width: 44px !important; height: 44px !important; flex: 0 0 auto; }
html.v27 .club-headcard .club-crest-mini img { width: 44px; height: 44px; object-fit: contain; }
html.v27 .club-headcard .club-head-eyebrow,
html.v27 .club-headcard .club-help,
html.v27 .club-headcard #btnOpenFilters2 { display: none !important; }
html.v27 .club-headcard .club-head-title { font-size: 28px !important; line-height: 1 !important; }

/* Todos · 3 · 5 · 10 no canto do cabeçalho, discreto */
html.v27 .v27-club-seg { flex: 0 0 auto; }
html.v27 .v27-club-seg .seg { min-height: 0 !important; }
html.v27 .v27-club-seg .seg__btn { min-height: 26px !important; padding: 4px 10px !important; font-size: 12px !important; }

/* resumo alinhado com o nome do clube (44px escudo + 14px gap) */
html.v27 .v27-club-summary { padding: 6px 20px 16px 78px; display: grid; gap: 8px; }
html.v27 .v27-club-summary .hero-grid { display: flex !important; flex-wrap: wrap; gap: 6px 32px !important; }
html.v27 .v27-club-summary .hero-card {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 0 !important; display: flex !important; align-items: baseline; gap: 6px; min-height: 0 !important;
}
html.v27 .v27-club-summary .hero-card::before { display: none !important; }
html.v27 .v27-club-summary .hero-top { order: 0; margin: 0 !important; display: block; }
html.v27 .v27-club-summary .hero-icon,
html.v27 .v27-club-summary .hero-unit,
html.v27 .v27-club-summary .hero-full { display: none !important; }
html.v27 .v27-club-summary .hero-label {
  font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--v-muted) !important;
}
html.v27 .v27-club-summary .hero-value { order: 1; margin: 0 !important; }
html.v27 .v27-club-summary .hero-num { font-size: 20px !important; line-height: 1 !important; font-weight: 700 !important; }
html.v27 .v27-club-summary .hero-foot { order: 2; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html.v27 .v27-club-summary .hero-rank {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  font-size: 12px !important; font-weight: 600 !important; color: var(--v-muted-2) !important;
}
html.v27 .v27-club-summary .hero-rank::after { content: none !important; }
html.v27 .v27-club-summary .hero-card.rk-top .hero-rank { color: var(--v-good) !important; background: none !important; }
html.v27 .v27-club-summary .hero-card.rk-bot .hero-rank { color: var(--v-bad) !important; background: none !important; }

html.v27 .v27-club-summary .ins-list { display: grid; gap: 2px; padding: 0 !important; border: 0 !important; }
html.v27 .v27-club-summary .ins-item {
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; font-size: 13px !important; color: var(--v-muted) !important;
}
html.v27 .v27-club-summary .ins-icon { display: none !important; }
html.v27 .v27-club-summary .ins-text,
html.v27 .v27-club-summary .ins-text b { font-weight: 500 !important; color: inherit !important; }

/* fileira de escudos: sem círculos, só o escudo; ativo com traço laranja embaixo */
html.v27 .club-headcard .card-b { border-top: 1px solid var(--v-line-2); padding: 8px 14px 6px !important; }
html.v27 .club-headcard .club-nav__row { display: flex !important; flex-wrap: nowrap; justify-content: space-between; gap: 2px !important; overflow-x: auto; scrollbar-width: none; }
html.v27 .club-headcard .club-nav__row::-webkit-scrollbar { display: none; }
html.v27 .club-headcard .club-nav__row .tab.tab--club {
  position: relative; flex: 0 0 auto;
  width: 38px !important; height: 38px !important; min-width: 38px; border-radius: 8px !important;
  border: 0 !important; box-shadow: none !important; background: none !important;
  opacity: .55; filter: grayscale(.85);
}
html.v27 .club-headcard .club-nav__row .tab.tab--club:hover { opacity: 1; filter: none; background: var(--v-sunken) !important; }
html.v27 .club-headcard .club-nav__row .tab.tab--club.active {
  opacity: 1; filter: none; border: 0 !important; box-shadow: none !important;
}
html.v27 .club-headcard .club-nav__row .tab.tab--club.active::after {
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 3px; border-radius: 3px; background: var(--v-accent);
}
html.v27 .club-headcard .club-chip-crest { width: 24px !important; height: 24px !important; }

@media (max-width: 700px) {
  html.v27 .club-headcard .card-h,
  html.v27 .club-headcard .card-h.compact { flex-wrap: wrap; padding: 14px 14px 4px !important; }
  html.v27 .club-headcard .club-head-title { font-size: 24px !important; }
  html.v27 .v27-club-seg { width: 100%; }
  html.v27 .v27-club-summary { padding: 8px 14px 12px; }
  html.v27 .v27-club-summary .hero-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 16px !important; }
  html.v27 .club-headcard .club-nav__row { justify-content: flex-start; }
}

/* ---- Mandante / Visitante (resumo): mini-tabela limpa, sem caixinhas ---- */
html.v27 .club-summaries .panel__head { padding: 12px 18px !important; border-bottom: 0 !important; }
html.v27 .club-summaries .panel__title { font-size: 18px !important; }
html.v27 .club-summaries .panel__count {
  background: none !important; padding: 0 !important; font-size: 12px !important;
  font-weight: 500 !important; color: var(--v-muted) !important;
}
html.v27 .club-summaries .panel__body { padding: 0 18px 16px !important; }
html.v27 .club-summaries .summary-rows { display: grid !important; gap: 10px !important; }
html.v27 .club-summaries .summary-row {
  display: grid !important; grid-template-columns: 72px minmax(0, 1fr); align-items: end; gap: 8px;
  padding: 0 !important; margin: 0 !important;
}
html.v27 .club-summaries .summary-row__label { padding: 0 0 7px !important; }
html.v27 .club-summaries .summary-row__label .t {
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--v-muted) !important;
}
html.v27 .club-summaries .summary-strip {
  display: grid !important; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px !important;
  overflow: visible !important; padding: 0 !important; background: none !important; border: 0 !important;
}
html.v27 .club-summaries .sum-balloon,
html.v27 .club-summaries .sum-balloon[class*="hm"] {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 0 !important; min-width: 0 !important; display: grid; gap: 3px; text-align: center;
}
html.v27 .club-summaries .sum-balloon .k {
  font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .03em !important;
  color: var(--v-muted-2) !important; text-transform: uppercase;
}
html.v27 .club-summaries .sum-balloon .v {
  display: block; padding: 6px 2px !important; border-radius: 6px !important;
  font-size: 14px !important; font-weight: 600 !important; text-align: center; min-width: 0 !important;
  background: var(--v-mid-bg);
}
@media (max-width: 700px) {
  html.v27 .club-summaries .summary-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  html.v27 .club-summaries .summary-row__label { padding: 0 !important; }
  html.v27 .club-summaries .sum-balloon .v { font-size: 12.5px !important; padding: 5px 0 !important; }
}

/* ---- Equipes: tabelas jogo a jogo, versão limpa ---- */
html.v27 .club-tables .club-table__head { padding: 12px 18px 4px !important; border-bottom: 0 !important; background: none !important; }
html.v27 .club-tables .club-table__title { font-size: 18px !important; }
html.v27 .club-tables .club-table__head .pill { display: none !important; }

html.v27 .club-tables .table-wrap { padding: 0 14px 14px !important; }
html.v27 .club-tables table.sheet { border-collapse: separate !important; border-spacing: 2px !important; width: 100%; }
html.v27 .club-tables table.sheet th,
html.v27 .club-tables table.sheet td { border: 0 !important; box-shadow: none !important; }

/* coluna "#" sai (a ordem das linhas já diz isso) */
html.v27 .club-tables .col-idx { display: none !important; }

/* grupos: texto pequeno com um traço fino embaixo, sem faixa cinza */
html.v27 .club-tables table.sheet thead tr.thead-group th {
  background: none !important; color: var(--v-muted-2) !important; font-size: 11px !important;
  letter-spacing: .06em !important; padding: 4px 0 6px !important;
  box-shadow: inset 0 -1px 0 var(--v-line) !important;
}
html.v27 .club-tables table.sheet thead tr.thead-group th.group-empty { box-shadow: none !important; }
html.v27 .club-tables table.sheet thead tr:not(.thead-group) th {
  background: none !important; color: var(--v-muted) !important; font-size: 11.5px !important;
  padding: 6px 2px 4px !important; text-align: center !important; border-bottom: 0 !important;
}

/* células */
html.v27 .club-tables table.sheet tbody td {
  height: 34px; padding: 0 4px !important; text-align: center; font-size: 13.5px !important;
  background: transparent !important; border-radius: 5px;
}
html.v27 .club-tables table.sheet tbody td[class*="hm"] { font-weight: 600 !important; }
html.v27 .club-tables table.sheet tbody td.hm-mid { background: var(--v-mid-bg) !important; }
html.v27 .club-tables table.sheet tbody tr:hover td:not([class*="hm"]) { background: transparent !important; }
html.v27 .club-tables table.sheet tbody td.col-rdd { color: var(--v-ink); font-weight: 600 !important; }

/* resultado: letra simples em tom suave (V verde, E cinza, D vermelho) */
html.v27 .club-tables .result-dot {
  width: 20px !important; height: 20px !important; border-radius: 5px !important; box-shadow: none !important; border: 0 !important;
  display: inline-grid !important; place-items: center; font-size: 11px !important; font-weight: 700 !important;
}
html.v27 .club-tables .result-dot--win  { background: var(--v-good-bg) !important; color: var(--v-good) !important; }
html.v27 .club-tables .result-dot--draw { background: var(--v-sunken) !important; color: var(--v-ink-2) !important; }
html.v27 .club-tables .result-dot--loss { background: var(--v-bad-bg) !important; color: var(--v-bad) !important; }

/* over 2.5: só o símbolo, sem bolinha */
html.v27 .club-tables .over-icon { background: none !important; box-shadow: none !important; border: 0 !important; font-weight: 700; }
html.v27 .club-tables .over-icon--yes { color: var(--v-good) !important; }
html.v27 .club-tables .over-icon--no  { color: var(--v-muted-2) !important; }

/* adversário: só o escudo; o grupo "ADV" já nomeia a coluna */
html.v27 .club-tables table.sheet thead tr:not(.thead-group) th.col-opp { color: transparent !important; }
@media (max-width: 700px) {
  html.v27 .club-tables .table-wrap { padding: 0 8px 10px !important; }
  html.v27 .club-tables table.sheet tbody td { font-size: 12.5px !important; height: 30px; padding: 0 2px !important; }
}
html.v27 .club-tables .opp-td .opp-sigla { display: none !important; }
html.v27 .club-tables .opp-td .opp-crest { width: 22px !important; height: 22px !important; }

/* Resumo "Produzido / Sofrido" */
html.v27 .summary-row,
html.v27 .summary-rows > * {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html.v27 .sum-balloon {
  background: var(--v-surface-2) !important;
  border: 1px solid var(--v-line-2) !important; box-shadow: none !important;
  border-radius: 10px !important;
}
html.v27 .sum-balloon .k { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em; color: var(--v-muted) !important; }
html.v27 .sum-balloon .v {
  font-family: var(--v-font) !important; font-weight: 700 !important; font-size: 15px !important;
  border: 0 !important; box-shadow: none !important; border-radius: 6px !important;
}

/* classes discretas de heatmap (club / xScout) → mesma paleta 2027 */
html.v27 table.sheet tbody tr td.hm-very-good, html.v27 table.sheet tbody tr:nth-child(even) td.hm-very-good, html.v27 table.sheet tbody td.hm-very-good, html.v27 .sum-balloon.hm-very-good .v, html.v27 table.sheet tbody td.hm5, html.v27 td.num .val.good:not(.v27-heat), html.v27 td.num .val.is-good:not(.v27-heat) { background: #b6e4c7 !important; color: #0d5530 !important; }
html.v27 table.sheet tbody tr:nth-child(even) td.hm-good, html.v27 table.sheet tbody td.hm-good, html.v27 .sum-balloon.hm-good .v, html.v27 table.sheet tbody td.hm4 { background: #daf0e2 !important; color: var(--v-ink) !important; }
html.v27 table.sheet tbody tr:nth-child(even) td.hm-mid, html.v27 table.sheet tbody td.hm-mid, html.v27 .sum-balloon.hm-mid .v, html.v27 table.sheet tbody td.hm3, html.v27 td.num .val.mid:not(.v27-heat), html.v27 td.num .val.is-mid:not(.v27-heat) { background: var(--v-mid-bg) !important; color: var(--v-ink) !important; }
html.v27 table.sheet tbody tr:nth-child(even) td.hm-bad, html.v27 table.sheet tbody td.hm-bad, html.v27 .sum-balloon.hm-bad .v, html.v27 table.sheet tbody td.hm2 { background: #fae4df !important; color: var(--v-ink) !important; }
html.v27 table.sheet tbody tr:nth-child(even) td.hm-very-bad, html.v27 table.sheet tbody td.hm-very-bad, html.v27 .sum-balloon.hm-very-bad .v, html.v27 table.sheet tbody td.hm1, html.v27 td.num .val.bad:not(.v27-heat), html.v27 td.num .val.is-bad:not(.v27-heat) { background: #f4c7bf !important; color: #8a1c12 !important; }

/* Comparativo casa x fora (barras) */
html.v27 .cmp-bar { background: var(--v-sunken) !important; border-radius: 4px !important; box-shadow: none !important; }
html.v27 .cmp-bar--home .cmp-bar__fill { background: var(--v-accent) !important; }
html.v27 .cmp-bar--away .cmp-bar__fill { background: var(--v-ink-2) !important; }
html.v27 .cmp-dot--home { background: var(--v-accent) !important; }
html.v27 .cmp-dot--away { background: var(--v-ink-2) !important; }

/* Cabeçalho agrupado das tabelas do clube */
html.v27 table.sheet thead tr.thead-group th {
  background: var(--v-surface-2) !important; color: var(--v-ink-2) !important;
  font-size: 12px !important; border-bottom: 1px solid var(--v-line) !important;
}
html.v27 table.sheet tfoot tr.row-mean td {
  background: var(--v-surface-2) !important; font-weight: 700 !important; border-top: 1px solid var(--v-line) !important;
}
html.v27 .result-dot--win { background: #2fa866 !important; }
html.v27 .result-dot--draw { background: #a3a9b1 !important; }
html.v27 .result-dot--loss { background: #e0473d !important; }

/* ============ 10 xSCOUT / RECORRÊNCIA / SG & OVER ============ */
/* ---- Painel de filtros: uma faixa limpa, todos os controles na mesma linha de base ---- */
html.v27 #filtersCard .xfilters-label,
html.v27 #filtersCard .rec-toggle__label {
  display: flex; align-items: center; min-height: 22px; margin: 0 !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: var(--v-muted) !important;
}
html.v27 #filtersCard .xfilters-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; margin: 0 0 8px !important; }
html.v27 #filtersCard .xfilters-block > .xfilters-label { margin-bottom: 8px !important; }
html.v27 #filtersCard .xfilters-help,
html.v27 #filtersCard .xfilters-games-mini-label,
html.v27 #filtersCard .hint:empty { display: none !important; }

/* "Todos · Nenhum" viram links de texto discretos */
html.v27 #filtersCard .xfilters-actions,
html.v27 #filtersCard .rec-mini-actions { display: inline-flex; gap: 2px; align-items: center; }
html.v27 #filtersCard .xfilters-actions button,
html.v27 #filtersCard .rec-mini-actions button {
  background: none !important; border: 0 !important; min-height: 0 !important;
  padding: 2px 6px !important; border-radius: 6px !important;
  font-size: 12px !important; font-weight: 600 !important; color: var(--v-muted) !important;
}
html.v27 #filtersCard .xfilters-actions button:hover,
html.v27 #filtersCard .rec-mini-actions button:hover { color: var(--v-ink) !important; background: var(--v-sunken) !important; }
html.v27 #filtersCard .xfilters-actions button + button::before,
html.v27 #filtersCard .rec-mini-actions button + button::before { content: none; }

/* sliders: valor ao lado do rótulo, slider + caixinha numa linha */
html.v27 #filtersCard .xfilters-games-value { font-size: 13px !important; color: var(--v-ink) !important; font-weight: 700 !important; }
html.v27 #filtersCard .xfilters-games { display: flex !important; align-items: center; gap: 12px; min-height: 36px; }
html.v27 #filtersCard .xfilters-games-inputwrap { display: flex; flex: 0 0 auto; }
html.v27 #filtersCard .xfilters-games-input { width: 56px !important; height: 32px; padding: 0 6px !important; text-align: center; font-size: 14px !important; }
html.v27 #filtersCard input[type="range"] { flex: 1 1 auto; height: 4px; min-width: 60px; }

/* controles segmentados e chips com a mesma altura (36px) */
html.v27 #filtersCard .seg { min-height: 36px; }
html.v27 #filtersCard .chips:not(.xfilters-clubs),
html.v27 #filtersCard .rec-status-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 36px; }

/* clubes: separados por uma linha fina, escudos distribuídos na largura toda */
html.v27 #filtersCard #statusChips { flex-wrap: nowrap !important; }
html.v27 #filtersCard #statusChips .chip { padding: 5px 10px !important; }
/* tabelas do clube: cabeçalhos curtos sem reticências ("RES…", "ADV…") */
html.v27 .club-tables table.sheet thead th { letter-spacing: .02em !important; }

html.v27 #filtersCard .xfilters-block--clubs {
  margin-top: 18px !important; padding-top: 16px !important;
  border-top: 1px solid var(--v-line-2) !important; border-radius: 0 !important;
}
html.v27 #filtersCard .xfilters-clubs {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; justify-items: center;
}

@media (min-width: 1101px) {
  /* xScout: Posição | Mando | Jogos | Minutagem | Status numa linha só */
  html.v27 #filtersCard:not(.rec-filters) .xfilters-grid {
    display: grid !important;
    grid-template-columns: auto auto minmax(120px, 1fr) minmax(120px, 1fr) auto !important;
    gap: 16px 24px !important; align-items: start;
  }
  /* Recorrência: toggles e status em uma faixa */
  html.v27 #filtersCard.rec-filters .rec-row--toggles { display: flex !important; flex-wrap: wrap; gap: 16px 32px !important; }
  html.v27 #filtersCard.rec-filters .rec-toggle { display: grid !important; gap: 8px; }
  html.v27 #filtersCard.rec-filters .rec-row--status { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  html.v27 #filtersCard:not(.rec-filters) .xfilters-grid {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 28px !important;
  }
}
html.v27 .xfilters-block,
html.v27 .xfilters-block--clubs {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important;
}
html.v27 .xfilters-body { padding: 18px 20px 20px !important; }
html.v27 .xfilters-grid { gap: 20px 28px !important; }
html.v27 .xfilters-block--clubs { padding-top: 4px !important; }
html.v27 .xfilters-games-value,
html.v27 .xfilters-minutes-value { color: var(--v-accent-ink) !important; font-weight: 700 !important; }
html.v27 .xalert {
  background: var(--v-surface-2) !important; border: 1px solid var(--v-line) !important;
  border-radius: 10px !important; color: var(--v-ink-2) !important; box-shadow: none !important;
}
html.v27 .card-h--stack .card-title,
html.v27 .card-h__main > :first-child { font-family: var(--v-display) !important; font-size: 20px !important; font-weight: 700 !important; }

html.v27 .hsg-team small { color: var(--v-muted) !important; }
html.v27 #hsgWrap table.sheet td.hsg-strong { font-weight: 700 !important; }
html.v27 .cr-tip,
html.v27 .hsg-tip {
  background: var(--v-ink) !important; color: #fff !important; border: 0 !important;
  border-radius: 12px !important; box-shadow: var(--v-shadow-pop) !important;
}

/* ========== 11 SHEET DE FILTROS · FOOTER · LEGENDAS · PWA ========== */
html.v27 dialog.sheet::backdrop { background: rgba(19, 23, 29, 0.35) !important; backdrop-filter: blur(2px); }
html.v27 .sheet-panel {
  background: var(--v-surface) !important; border: 0 !important;
  border-radius: 20px !important; box-shadow: var(--v-shadow-pop) !important;
}
html.v27 .sheet-h,
html.v27 .sheet-f { background: transparent !important; border-color: var(--v-line-2) !important; }
html.v27 .sheet-title { font-family: var(--v-display) !important; font-size: 22px !important; font-weight: 700 !important; }
html.v27 .toggle-row {
  background: var(--v-surface-2) !important; border: 1px solid var(--v-line-2) !important;
  box-shadow: none !important; border-radius: 12px !important;
}
html.v27 .toggle-row:has(input:checked) { border-color: rgba(251, 89, 4, 0.35) !important; background: var(--v-accent-soft) !important; }
html.v27 .toggle-switch:checked { background: var(--v-accent) !important; border-color: var(--v-accent) !important; }
html.v27 .toggle-title { color: var(--v-ink) !important; }
html.v27.v27-dark .toggle-switch:not(:checked) { background: var(--v-sunken) !important; }

html.v27 .site-footer {
  background: transparent !important; border-top: 1px solid var(--v-line) !important;
  box-shadow: none !important; margin-top: 32px;
}
html.v27 .footer-brand { font-family: var(--v-display) !important; font-size: 18px !important; text-transform: uppercase; letter-spacing: .02em; }
html.v27 .footer-link { color: var(--v-muted) !important; font-weight: 500 !important; }
html.v27 .footer-link:hover { color: var(--v-ink) !important; }

html.v27 .l-ico { background: var(--v-accent-soft) !important; border: 0 !important; box-shadow: none !important; }
html.v27 .l-chip { background: var(--v-sunken) !important; border: 0 !important; }

/* ============================ 12 RESPONSIVO ============================ */
@media (max-width: 900px) {
  html.v27 .wrap,
  html.v27 .rail { width: calc(100% - 24px); }
  html.v27 .app-header__inner { min-height: 54px; }
  html.v27 #pageTitle { font-size: 17px; }
  html.v27 .app-main { padding-top: 12px; padding-bottom: calc(var(--bn-h) + 20px) !important; }
  html.v27 .card-h,
  html.v27 .card.app-card .card-h.compact,
  html.v27 .xfilters-head,
  html.v27 .overview-head,
  html.v27 .panel__head { padding: 12px 14px !important; }
  html.v27 .chiprow#navViews { margin: 0 14px 14px !important; max-width: calc(100% - 28px); }

  /* destaques: carrossel horizontal com "snap" em vez de 4 cards espremidos */
  html.v27 .metrics.metrics--compact {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: 72%;
    grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px;
    scrollbar-width: none;
  }
  html.v27 .metrics.metrics--compact::-webkit-scrollbar { display: none; }
  html.v27 .metric-card { scroll-snap-align: start; }

  html.v27 table.sheet tbody td,
  html.v27 .sheet td { font-size: 13px !important; padding: 9px 8px !important; }
  html.v27 #tablesPair #tableWrap table.sheet { min-width: 100% !important; }
  html.v27 #tablesPair #tableWrap table.sheet th:nth-child(1),
  html.v27 #tablesPair #tableWrap table.sheet td:nth-child(1) { width: 40px !important; min-width: 0 !important; max-width: none !important; }
  html.v27 #tablesPair #tableWrap table.sheet th:nth-child(2),
  html.v27 #tablesPair #tableWrap table.sheet td:nth-child(2) { width: 52px !important; min-width: 0 !important; max-width: none !important; }
  html.v27 table.sheet thead th { font-size: 12px !important; padding: 10px 8px 8px !important; }
  html.v27 td.num .val, html.v27 table.sheet .val { min-width: 40px !important; font-size: 13px !important; padding: 5px 6px !important; }

  html.v27 .xfilters-body { padding: 14px !important; }
  /* escudos em uma linha com rolagem lateral (painel de filtros fica bem menor) */
  html.v27 .xfilters-clubs, html.v27 #clubChips, html.v27 .rec-clubs,
  html.v27 .club-nav__row {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
    grid-template-columns: none !important; scrollbar-width: none; padding-bottom: 4px;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  html.v27 .xfilters-grid > *, html.v27 .xfilters-body > *, html.v27 .xfilters-block { min-width: 0 !important; max-width: 100%; }
  html.v27 #filtersCard .xfilters-clubs { display: flex !important; grid-template-columns: none !important; gap: 8px; }
  html.v27 .xfilters-clubs > *, html.v27 #clubChips > *, html.v27 .rec-clubs > *,
  html.v27 .club-nav__row > * { flex: 0 0 auto; }
  html.v27 .club-head-title { font-size: 24px !important; }
  html.v27 .hero-num { font-size: 30px !important; }
}
@media (max-width: 380px) {
  html.v27 .bn-item .bn-txt { display: block !important; font-size: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.v27 * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   xSCOUT — painel de filtros como BARRA DE FERRAMENTAS discreta
   Linha 1: posição │ mando │ jogos ≥ │ minutos ≥ │ status
   Linha 2: escudos (sem molduras) ................ Todos · Nenhum
   ===================================================================== */
html.v27 #filtersCard { box-shadow: none !important; }
html.v27 #filtersCard .xfilters-head {
  padding: 12px 20px 0 !important; border-bottom: 0 !important; min-height: 0;
}
html.v27 #filtersCard .xfilters-badge { display: none !important; }
html.v27 #filtersCard .xfilters-titles .card-title {
  font-family: var(--v-font) !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--v-muted) !important;
}
html.v27 #filtersCard .xfilters-collapse {
  border: 0 !important; background: none !important; min-height: 0 !important;
  padding: 2px 6px !important; font-size: 12px !important; color: var(--v-muted) !important;
}
html.v27 #filtersCard .xfilters-collapse:hover { color: var(--v-ink) !important; background: var(--v-sunken) !important; }
html.v27 #filtersCard.is-collapsed .xfilters-head { padding-bottom: 12px !important; }
html.v27 #filtersCard .xfilters-body { padding: 10px 20px 14px !important; }

/* linha 1 */
html.v27 #filtersCard .xfilters-grid {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 0 !important;
}
html.v27 #filtersCard .xfilters-grid > .xfilters-block {
  display: flex !important; align-items: center; gap: 8px; padding: 0 18px !important;
  border-left: 1px solid var(--v-line) !important; min-height: 32px;
  border-radius: 0 !important; background: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
}
html.v27 #filtersCard .xfilters-grid > .xfilters-block:first-child { padding-left: 0 !important; border-left: 0 !important; }

/* rótulos fora (os botões já dizem o que são) */
html.v27 #filtersCard .xfilters-grid > .xfilters-block > .xfilters-label,
html.v27 #filtersCard .xfilters-grid .xfilters-row:not(.xfilters-row--top) { display: none !important; }

/* controles segmentados mais baixos e leves */
html.v27 #filtersCard .seg { min-height: 0 !important; padding: 2px !important; border-radius: 9px !important; }
html.v27 #filtersCard .seg-btn { min-height: 28px !important; padding: 4px 10px !important; font-size: 12.5px !important; }

/* jogos / minutos: só "JOGOS ≥ [8]" — sem slider, sem "8+" repetido */
html.v27 #filtersCard .xfilters-block--games .xfilters-row--top { margin: 0 !important; min-height: 0; }
html.v27 #filtersCard .xfilters-block--games .xfilters-games-value,
html.v27 #filtersCard .xfilters-block--games input[type="range"] { display: none !important; }
html.v27 #filtersCard .xfilters-block--games .xfilters-label {
  font-size: 0 !important; letter-spacing: 0 !important; min-height: 0;
}
html.v27 #filtersCard .xfilters-block--games .xfilters-label::after {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--v-muted);
}
html.v27 #filtersCard .xfilters-block--games:has(#gamesInput) .xfilters-label::after { content: "Jogos ≥"; }
html.v27 #filtersCard .xfilters-block--games:has(#minutesInput) .xfilters-label::after { content: "Minutos ≥"; }
html.v27 #filtersCard .xfilters-games { min-height: 0 !important; gap: 0 !important; }
html.v27 #filtersCard .xfilters-games-input {
  width: 46px !important; height: 30px !important; font-size: 13.5px !important; font-weight: 700 !important;
  border-color: var(--v-line) !important; border-radius: 8px !important; -moz-appearance: textfield;
}
html.v27 #filtersCard .xfilters-games-input::-webkit-inner-spin-button,
html.v27 #filtersCard .xfilters-games-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* status: texto com bolinha de cor (provável verde, dúvida âmbar, nulo cinza) */
html.v27 #filtersCard #statusChips { gap: 2px !important; min-height: 0 !important; }
html.v27 #filtersCard #statusChips .chip {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: none !important; border: 0 !important; border-radius: 8px !important;
  padding: 5px 8px !important; font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--v-muted-2) !important;
}
html.v27 #filtersCard #statusChips .chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--v-muted-2);
}
html.v27 #filtersCard #statusChips .chip:hover { background: var(--v-sunken) !important; }
html.v27 #filtersCard #statusChips .chip.is-on { color: var(--v-ink) !important; background: none !important; }
html.v27 #filtersCard #statusChips .chip.is-on[data-st="7"]::before { background: #22a35a; box-shadow: none; }
html.v27 #filtersCard #statusChips .chip.is-on[data-st="2"]::before { background: #e3a008; box-shadow: none; }
html.v27 #filtersCard #statusChips .chip.is-on[data-st="6"]::before { background: #9aa1aa; box-shadow: none; }

/* linha 2: escudos soltos + Todos · Nenhum à direita */
html.v27 #filtersCard .xfilters-block--clubs {
  display: flex !important; align-items: center; gap: 12px;
  margin-top: 12px !important; padding-top: 10px !important;
  border-top: 1px solid var(--v-line-2) !important;
}
html.v27 #filtersCard .xfilters-block--clubs .xfilters-row { order: 2; margin: 0 !important; flex: 0 0 auto; }
html.v27 #filtersCard .xfilters-block--clubs .xfilters-label { display: none !important; }
html.v27 #filtersCard .xfilters-clubs {
  order: 1; flex: 1 1 auto; min-width: 0;
  display: flex !important; flex-wrap: nowrap; justify-content: space-between; gap: 2px !important;
  overflow-x: auto; scrollbar-width: none;
}
html.v27 #filtersCard .xfilters-clubs::-webkit-scrollbar { display: none; }
html.v27 #filtersCard #clubChips .chip {
  width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 8px !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  opacity: .3; filter: grayscale(1);
}
html.v27 #filtersCard #clubChips .chip.is-on { opacity: 1; filter: none; }
html.v27 #filtersCard #clubChips .chip:hover { opacity: 1; filter: none; background: var(--v-sunken) !important; }
html.v27 #filtersCard #clubChips .chip-crest { width: 22px !important; height: 22px !important; }

@media (max-width: 900px) {
  html.v27 #filtersCard .xfilters-head { padding: 12px 14px 0 !important; }
  html.v27 #filtersCard .xfilters-body { padding: 10px 14px 12px !important; }
  html.v27 #filtersCard .xfilters-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px 12px !important; }
  html.v27 #filtersCard .xfilters-grid > .xfilters-block { padding: 0 !important; border-left: 0 !important; }
  html.v27 #filtersCard .xfilters-grid > .xfilters-block:nth-child(1),
  html.v27 #filtersCard .xfilters-grid > .xfilters-block:nth-child(2),
  html.v27 #filtersCard .xfilters-grid > .xfilters-block:last-child { grid-column: 1 / -1; }
  html.v27 #filtersCard .xfilters-block--clubs { flex-wrap: wrap; }
  html.v27 #filtersCard .xfilters-clubs { flex: 1 1 100%; justify-content: flex-start; }
  html.v27 #filtersCard .xfilters-block--clubs .xfilters-row { order: 0; margin-left: auto !important; }
}

/* =====================================================================
   xSCOUT / RECORRÊNCIA — tabela de jogadores, versão limpa
   (mesma linguagem das tabelas de Equipes: heatmap em blocos, sem grade)
   ===================================================================== */
html.v27 #filtersCard ~ section.card .card-h { padding: 14px 20px 6px !important; border-bottom: 0 !important; align-items: baseline !important; }
html.v27 #filtersCard ~ section.card #title { font-size: 20px !important; }
html.v27 #filtersCard ~ section.card #title .v27-title-meta {
  font-family: var(--v-font); font-size: 13px; font-weight: 500; color: var(--v-muted); margin-left: 10px; letter-spacing: 0;
}
html.v27 #filtersCard ~ section.card .badge,
html.v27 #filtersCard ~ section.card [id$="Count"] {
  background: none !important; padding: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: var(--v-muted) !important;
}

html.v27 #filtersCard ~ section.card .table-wrap { padding: 0 12px 12px !important; }
html.v27 #filtersCard ~ section.card table.sheet { border-collapse: separate !important; border-spacing: 2px !important; }
html.v27 #filtersCard ~ section.card table.sheet th,
html.v27 #filtersCard ~ section.card table.sheet td { border: 0 !important; box-shadow: none !important; }

/* cabeçalho: texto cinza, sem fundo; a coluna ordenada ganha só a cor da tinta e um traço curto */
html.v27 #filtersCard ~ section.card table.sheet thead th {
  background: var(--v-surface) !important; color: var(--v-muted-2) !important;
  font-size: 11.5px !important; padding: 8px 6px 6px !important; text-decoration: none !important;
}
html.v27 #filtersCard ~ section.card table.sheet thead th.is-sorted {
  color: var(--v-ink) !important; box-shadow: inset 0 -2px 0 var(--v-accent) !important;
}

/* células */
html.v27 #filtersCard ~ section.card table.sheet tbody td {
  height: 36px; padding: 0 8px !important; border-radius: 5px; font-size: 13.5px !important;
}
html.v27 #filtersCard ~ section.card table.sheet tbody td:not(.v27-heat):not([class*="hm"]) { background-color: var(--v-surface) !important; }
html.v27 #filtersCard ~ section.card table.sheet tbody td.v27-heat,
html.v27 #filtersCard ~ section.card table.sheet tbody td[class*="hm"] { font-weight: 600 !important; }
html.v27 #filtersCard ~ section.card table.sheet tbody tr:hover td:not(.v27-heat):not([class*="hm"]) { background-color: var(--v-surface-2) !important; }
html.v27 #filtersCard ~ section.card table.sheet tbody td:first-child { color: var(--v-muted-2) !important; font-weight: 500 !important; }
html.v27 #filtersCard ~ section.card table.sheet tbody td:nth-child(2) { font-weight: 600 !important; color: var(--v-ink); }

/* mando: palavra pequena, sem etiqueta */
html.v27 #filtersCard ~ section.card .v27-mando {
  background: none !important; padding: 0 !important; font-size: 11px; letter-spacing: .04em;
}
html.v27 #filtersCard ~ section.card .v27-mando--fora { color: var(--v-muted) !important; }

/* índice: número em destaque pela tipografia, sem pílula preta */
html.v27 #filtersCard ~ section.card .indice-pill {
  background: none !important; color: var(--v-ink) !important; padding: 0 !important;
  font-family: var(--v-display) !important; font-size: 17px !important; font-weight: 700 !important;
}
html.v27 #filtersCard ~ section.card td.col-indice { background: var(--v-surface) !important; }

/* =====================================================================
   SG & OVER — um bloco só: título + filtros no cabeçalho do ranking
   ===================================================================== */
html.v27 #hsgWrap { padding: 0 12px 12px !important; }
html.v27 #hsgTitle { font-size: 20px !important; }
html.v27 #hsgSub { font-size: 13px !important; color: var(--v-muted) !important; margin-top: 2px; }
html.v27 .v27-hsg-controls ~ #hsgCount,
html.v27 #hsgCount { background: none !important; padding: 0 !important; font-size: 12px !important; font-weight: 500 !important; color: var(--v-muted) !important; }
html.v27 .card-h:has(.v27-hsg-controls) { display: flex !important; align-items: center !important; gap: 16px; flex-wrap: wrap; padding: 16px 20px 8px !important; border-bottom: 0 !important; }
html.v27 .card-h:has(.v27-hsg-controls) .card-head-left { flex: 1 1 auto; min-width: 0; }
html.v27 .v27-hsg-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
html.v27 .v27-hsg-controls .seg { min-height: 0 !important; padding: 2px !important; border-radius: 9px !important; }
html.v27 .v27-hsg-controls .seg-btn { min-height: 28px !important; padding: 4px 10px !important; font-size: 12.5px !important; }

/* tabela: nome do time em tinta (não cinza), sigla discreta */
html.v27 section.card #hsgWrap table.sheet tbody td:first-child,
html.v27 #filtersCard ~ section.card #hsgWrap table.sheet tbody td:first-child { color: var(--v-ink) !important; font-weight: 600 !important; }
html.v27 #hsgWrap .hsg-team { gap: 10px !important; }
html.v27 #hsgWrap .hsg-team small { color: var(--v-muted-2) !important; font-weight: 500; font-size: 11px; }
html.v27 #hsgWrap table.sheet { border-collapse: separate !important; border-spacing: 2px !important; }
html.v27 #hsgWrap table.sheet th, html.v27 #hsgWrap table.sheet td { border: 0 !important; box-shadow: none !important; }
html.v27 #hsgWrap table.sheet thead th { background: var(--v-surface) !important; color: var(--v-muted-2) !important; font-size: 11.5px !important; }
html.v27 #hsgWrap table.sheet thead th.is-sorted,
html.v27 #hsgWrap table.sheet thead th.th-active { color: var(--v-ink) !important; box-shadow: inset 0 -2px 0 var(--v-accent) !important; }
html.v27 #hsgWrap table.sheet tbody td { height: 36px; border-radius: 5px; padding: 0 8px !important; }
html.v27 #hsgWrap table.sheet tbody td:not(.v27-heat):not([class*="hm"]) { background-color: var(--v-surface) !important; }
html.v27 #hsgWrap table.sheet td.hsg-strong { font-family: var(--v-display) !important; font-size: 17px !important; }

@media (max-width: 700px) {
  html.v27 .card-h:has(.v27-hsg-controls) { padding: 14px 14px 8px !important; }
  html.v27 .v27-hsg-controls { order: 3; width: 100%; }
}

/* =====================================================================
   RANKING (index) — versão discreta
   ===================================================================== */
/* 1) barra das tabelas: abas à esquerda, "Filtros" à direita, numa linha só */
html.v27 .app-main > .card.app-card:has(#navViews) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 10px 8px 12px !important; box-shadow: none !important;
}
html.v27 .app-main > .card.app-card:has(#navViews) .card-h {
  grid-column: 2; grid-row: 1; padding: 0 !important; border: 0 !important; background: none !important;
}
html.v27 .app-main > .card.app-card:has(#navViews) .card-head-left { display: none !important; }
html.v27 .chiprow#navViews { grid-column: 1; grid-row: 1; margin: 0 !important; max-width: 100% !important; justify-self: start; width: auto !important; justify-content: flex-start !important; }
html.v27 #navViews .tab { padding: 5px 11px !important; min-height: 28px !important; font-size: 12.5px !important; }
html.v27 #btnOpenFilters2 { border: 0 !important; background: none !important; color: var(--v-muted) !important; min-height: 30px; }
html.v27 #btnOpenFilters2:hover { background: var(--v-sunken) !important; color: var(--v-ink) !important; }

/* 2) destaques: uma faixa única dividida em 4, sem cards */
html.v27 .metrics.metrics--compact {
  background: var(--v-surface); border: 1px solid var(--v-line); border-radius: var(--v-r-lg);
  gap: 0 !important; padding: 12px 0 !important;
}
html.v27 .metrics.metrics--compact .metric-card {
  border: 0 !important; border-left: 1px solid var(--v-line-2) !important; border-radius: 0 !important;
  background: none !important; padding: 2px 18px !important;
}
html.v27 .metrics.metrics--compact .metric-card:first-child { border-left: 0 !important; }
html.v27 .metrics.metrics--compact .metric-label { font-size: 10.5px !important; color: var(--v-muted-2) !important; }
html.v27 .metrics.metrics--compact .metric-value { margin-top: 6px !important; min-height: 0 !important; gap: 8px !important; }
html.v27 .metrics.metrics--compact .metric-team,
html.v27 .metrics.metrics--compact .metric-team img { width: 22px !important; height: 22px !important; }
html.v27 .metrics.metrics--compact .v27-team-name { font-size: 18px !important; }
html.v27 .metrics.metrics--compact .metric-sub {
  margin-top: 4px !important; padding-top: 0 !important; border-top: 0 !important;
  font-size: 12px !important; color: var(--v-muted) !important;
}

/* 3) cabeçalho da tabela: título + rodada em texto simples; filtros ativos neutros */
html.v27 .card.app-card:has(#tablesPair) > .card-h { padding: 14px 20px 4px !important; border-bottom: 0 !important; }
html.v27 .card.app-card:has(#tablesPair) #title { font-size: 20px !important; }
html.v27 .round-chip {
  background: none !important; padding: 0 !important; font-size: 13px !important; font-weight: 500 !important;
  color: var(--v-muted) !important; box-shadow: none !important; border: 0 !important;
}
html.v27 .round-chip::before { background: var(--v-accent) !important; box-shadow: none !important; }
html.v27 .active-filters { padding: 4px 20px 6px !important; gap: 6px !important; }
html.v27 .filter-chip {
  background: var(--v-sunken) !important; color: var(--v-ink-2) !important;
  font-size: 12px !important; padding: 3px 6px 3px 10px !important; min-height: 0 !important;
}
html.v27 .filter-chip:hover { background: var(--v-line) !important; }
html.v27 .filter-chip__x { color: var(--v-muted) !important; background: none !important; }

/* rótulo de cada tabela ("Ataque — mandantes" / "Defesa do adversário — fora") */
html.v27 .opp-caption {
  background: none !important; border: 0 !important; box-shadow: inset 0 -1px 0 var(--v-line) !important;
  color: var(--v-muted-2) !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .06em !important; padding: 6px 4px !important; margin: 0 4px 2px !important; text-align: left !important;
}

/* 4) tabela: valores em blocos (mesma linguagem das outras telas) */
html.v27 #tablesPair #tableWrap, html.v27 #opponentWrap { padding: 0 12px 12px !important; }
html.v27 #tablesPair #tableWrap table.sheet, html.v27 #opponentWrap table.sheet { border-collapse: separate !important; border-spacing: 2px !important; width: 100% !important; }
html.v27 #tablesPair #tableWrap table.sheet th, html.v27 #tablesPair #tableWrap table.sheet td,
html.v27 #opponentWrap table.sheet th, html.v27 #opponentWrap table.sheet td { border: 0 !important; }
html.v27 #tablesPair #tableWrap table.sheet td:nth-child(2), html.v27 #tablesPair #tableWrap table.sheet th:nth-child(2),
html.v27 #opponentWrap table.sheet td:nth-child(2), html.v27 #opponentWrap table.sheet th:nth-child(2) { box-shadow: none !important; }
html.v27 #tablesPair #tableWrap table.sheet thead th, html.v27 #opponentWrap table.sheet thead th {
  color: var(--v-muted-2) !important; font-size: 11.5px !important; padding: 8px 6px 6px !important; background: var(--v-surface) !important;
}
html.v27 #tablesPair #tableWrap table.sheet thead th.th-active { color: var(--v-ink) !important; }
html.v27 #tablesPair #tableWrap table.sheet tbody td, html.v27 #opponentWrap table.sheet tbody td { height: 36px; padding: 0 2px !important; }
html.v27 #tablesPair #tableWrap td.num:not(.rank) .val, html.v27 #opponentWrap td.num:not(.rank) .val {
  display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; min-width: 0 !important; height: 32px; padding: 0 !important; border-radius: 5px !important;
}
html.v27 #tablesPair #tableWrap td.rank, html.v27 #opponentWrap td.rank { color: var(--v-muted-2) !important; font-weight: 500 !important; }
html.v27 #opponentWrap td.rank .val { background: none !important; color: inherit !important; font-weight: 500 !important; }

/* zonas: traço fino só na 1ª célula (já existia), sem pintar a linha */
html.v27 #opponentWrap table.sheet tbody tr td:nth-child(1) { box-shadow: none !important; border-left: 0 !important; }

/* minigráfico sem fundo colorido, mais discreto */
html.v27 .team-sparkline svg rect { fill: transparent !important; }
html.v27 .team-sparkline { opacity: .55 !important; }
html.v27 .team-cell:hover .team-sparkline { opacity: 1 !important; }

/* 5) separação entre as duas tabelas lado a lado: só um respiro */
html.v27 .tables-pair { gap: 8px !important; }
html.v27 .opp-wrap { border-left: 0 !important; box-shadow: none !important; }

@media (max-width: 900px) {
  html.v27 .app-main > .card.app-card:has(#navViews) { grid-template-columns: minmax(0, 1fr) auto; }
  html.v27 .metrics.metrics--compact { background: none; border: 0; padding: 0 !important; gap: 8px !important; }
  html.v27 .metrics.metrics--compact .metric-card {
    background: var(--v-surface) !important; border: 1px solid var(--v-line) !important; border-radius: 12px !important; padding: 10px 12px !important;
  }
  html.v27 #tablesPair #tableWrap, html.v27 #opponentWrap { padding: 0 6px 8px !important; }
}

/* ---- Ranking: abas + destaques unificados num só bloco ---- */
html.v27 .card.v27-index-top { padding: 10px 12px 0 !important; row-gap: 0 !important; }
html.v27 .card.v27-index-top .metrics.metrics--compact {
  grid-column: 1 / -1; grid-row: 2;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  border-top: 1px solid var(--v-line-2) !important;
  margin: 10px -12px 0 !important; padding: 12px 0 14px !important;
}
/* cada destaque em 2 linhas: rótulo / escudo + nome + valor */
html.v27 .card.v27-index-top .metric-card {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: baseline;
  column-gap: 10px; row-gap: 6px; padding: 0 20px !important;
}
html.v27 .card.v27-index-top .metric-label { grid-column: 1 / -1; }
html.v27 .card.v27-index-top .metric-value { margin: 0 !important; align-self: center; }
html.v27 .card.v27-index-top .metric-sub {
  margin: 0 !important; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
html.v27 .card.v27-index-top .v27-team-name { font-size: 17px !important; }

@media (max-width: 900px) {
  html.v27 .card.v27-index-top { padding: 8px 8px 0 !important; }
  html.v27 .card.v27-index-top .metrics.metrics--compact {
    margin: 8px -8px 0 !important; padding: 10px 8px 12px !important; gap: 0 !important;
    grid-auto-columns: 70% !important;
  }
  html.v27 .card.v27-index-top .metrics.metrics--compact .metric-card {
    background: none !important; border: 0 !important; border-left: 1px solid var(--v-line-2) !important;
    border-radius: 0 !important; padding: 0 12px !important;
  }
  html.v27 .card.v27-index-top .metrics.metrics--compact .metric-card:first-child { border-left: 0 !important; }
}


/* #####################################################################
   SISTEMA ÚNICO — padrão de todas as telas (referência: xScout)
   Toda página segue a mesma receita:
     [1] CARD DE CONTROLES  → rótulo pequeno + ação em texto (topo)
                               controles numa linha, separados por traço vertical
                               linha secundária (escudos / destaques) após um fio
     [2] CARD DE DADOS      → título 20px condensado + meta cinza + contagem à direita
                               tabela em blocos (heatmap), cabeçalho cinza claro
   ##################################################################### */
html.v27 {
  --sys-eyebrow-size: 11px;
  --sys-title-size: 20px;
  --sys-th-size: 11.5px;
  --sys-td-size: 13.5px;
  --sys-cell-h: 36px;
  --sys-pad-x: 20px;
}

/* largura idêntica em todas as páginas (antes cada CSS tinha a sua) */
html.v27 body .wrap,
html.v27 body main.wrap,
html.v27 body .app-header .wrap,
html.v27 body .site-footer .rail { width: min(1280px, calc(100% - 48px)) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; }
html.v27 body .app-main { padding-top: 20px !important; display: flex; flex-direction: column; gap: 14px; }
html.v27 body .app-main > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ---------- [1] CARD DE CONTROLES ---------- */
/* rótulo de topo (eyebrow) — o mesmo em todas as telas */
html.v27 .v27-tb-eyebrow,
html.v27 #filtersCard .xfilters-titles .card-title,
html.v27 #filtersCard .xfilters-title,
html.v27 .card.v27-index-top #cardTitle {
  font-family: var(--v-font) !important; font-size: var(--sys-eyebrow-size) !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--v-muted) !important; line-height: 1.4 !important;
}
html.v27 #filtersCard .xfilters-eyebrow,
html.v27 #filtersCard .xfilters-badge { display: none !important; }
html.v27 #filtersCard .xfilters-head {
  padding: 12px var(--sys-pad-x) 0 !important; border-bottom: 0 !important; min-height: 0 !important; background: none !important;
}
html.v27 #filtersCard .xfilters-collapse {
  border: 0 !important; background: none !important; min-height: 0 !important; box-shadow: none !important;
  padding: 2px 6px !important; font-size: 12px !important; font-weight: 600 !important; color: var(--v-muted) !important;
}
html.v27 #filtersCard .xfilters-collapse:hover { color: var(--v-ink) !important; background: var(--v-sunken) !important; }
html.v27 #filtersCard.is-collapsed .xfilters-head { padding-bottom: 12px !important; }
html.v27 #filtersCard .xfilters-body { padding: 10px var(--sys-pad-x) 14px !important; }

/* controles segmentados: mesma altura e tipografia em todo o site */
html.v27 #filtersCard .seg,
html.v27 .v27-club-seg .seg,
html.v27 #navViews { min-height: 0 !important; padding: 2px !important; border-radius: 9px !important; }
html.v27 #filtersCard .seg-btn,
html.v27 .v27-club-seg .seg__btn,
html.v27 #navViews .tab { min-height: 28px !important; padding: 4px 10px !important; font-size: 12.5px !important; font-weight: 600 !important; }

/* rótulo em linha antes do controle ("Jogos ≥", "Janela", "Recorte"…) */
html.v27 #filtersCard .rec-toggle__label {
  font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--v-muted) !important; white-space: nowrap; margin: 0 !important; min-height: 0 !important;
}

/* SG & Over: Visão | Janela na mesma faixa do xScout */
html.v27 #filtersCard .hsg-filtergrid { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 0 !important; }
html.v27 #filtersCard .hsg-filtergrid > .xfilters-block {
  display: flex !important; align-items: center; gap: 8px; padding: 0 18px !important; min-height: 32px;
  border: 0 !important; border-left: 1px solid var(--v-line) !important; border-radius: 0 !important; background: none !important;
}
html.v27 #filtersCard .hsg-filtergrid > .xfilters-block:first-child { padding-left: 0 !important; border-left: 0 !important; }
html.v27 #filtersCard .hsg-filtergrid .xfilters-label { display: none !important; }

/* Recorrência: posição │ lado │ janela │ recorte │ mando │ status numa faixa */
html.v27 #filtersCard .rec-body { display: flex !important; flex-wrap: wrap; align-items: center; row-gap: 10px; }
html.v27 #filtersCard .rec-row--toggles { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 0 !important; margin: 0 !important; }
html.v27 #filtersCard .rec-toggle {
  display: flex !important; align-items: center; gap: 8px; padding: 0 18px !important; min-height: 32px;
  border-left: 1px solid var(--v-line) !important;
}
html.v27 #filtersCard .rec-toggle:first-child { padding-left: 0 !important; border-left: 0 !important; }
html.v27 #filtersCard .rec-toggle[hidden] { display: none !important; }
html.v27 #filtersCard .rec-toggle:first-child .rec-toggle__label { display: none !important; }
html.v27 #filtersCard .rec-row--status {
  display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 0 18px !important;
  border-left: 1px solid var(--v-line) !important; min-height: 32px;
}
html.v27 #filtersCard .rec-row--status > .rec-toggle__label,
html.v27 #filtersCard .rec-row--status .rec-mini-actions { display: none !important; }
html.v27 #filtersCard .rec-body > .xfilters-block--clubs { flex: 1 1 100%; }

/* Ranking: rótulo "Tabela estatística" + Filtros no topo, abas, destaques */
html.v27 .card.v27-index-top { grid-template-columns: minmax(0, 1fr) !important; padding: 12px var(--sys-pad-x) 0 !important; row-gap: 10px !important; }
html.v27 .card.v27-index-top .card-h {
  grid-column: 1 / -1 !important; grid-row: 1 !important; display: flex !important; justify-content: space-between; align-items: center;
}
html.v27 .card.v27-index-top .card-head-left { display: flex !important; }
html.v27 .card.v27-index-top .card-head-left::before { display: none !important; }
html.v27 .card.v27-index-top #btnOpenFilters2 { padding: 2px 6px !important; min-height: 0 !important; font-size: 12px !important; }
html.v27 .card.v27-index-top #btnOpenFilters2 svg { display: none; }
html.v27 .card.v27-index-top .chiprow#navViews { grid-column: 1 / -1 !important; grid-row: 2 !important; }
html.v27 .card.v27-index-top .metrics.metrics--compact { grid-row: 3 !important; margin: 4px calc(-1 * var(--sys-pad-x)) 0 !important; padding: 12px 0 14px !important; }

/* Equipes: mesma linha de topo + escudos no padrão do xScout */
html.v27 .v27-tb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px var(--sys-pad-x) 0; }
html.v27 .club-headcard .card-h,
html.v27 .club-headcard .card-h.compact { padding: 10px var(--sys-pad-x) 4px !important; }
html.v27 .club-headcard .club-head-title { font-size: 26px !important; }

/* escudos: UM só estilo (xScout, Recorrência, Equipes) */
html.v27 #clubChips .chip,
html.v27 .club-headcard .club-nav__row .tab.tab--club {
  width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 8px !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  opacity: .35; filter: grayscale(1);
}
html.v27 #clubChips .chip.is-on,
html.v27 .club-headcard .club-nav__row .tab.tab--club.active { opacity: 1; filter: none; }
html.v27 #clubChips .chip:hover,
html.v27 .club-headcard .club-nav__row .tab.tab--club:hover { opacity: 1; filter: none; background: var(--v-sunken) !important; }
html.v27 #clubChips .chip-crest,
html.v27 .club-headcard .club-chip-crest { width: 22px !important; height: 22px !important; }
html.v27 .club-headcard .card-b { padding: 10px var(--sys-pad-x) 10px !important; }

/* ---------- [2] CARD DE DADOS ---------- */
html.v27 .card .card-h:not(.xfilters-head),
html.v27 .club-tables .club-table__head,
html.v27 .club-summaries .panel__head {
  padding: 14px var(--sys-pad-x) 6px !important; border-bottom: 0 !important; background: none !important;
}
html.v27 .card.v27-index-top .card-h { padding: 0 !important; }
html.v27 #title,
html.v27 #hsgTitle,
html.v27 .club-table__title,
html.v27 .club-summaries .panel__title,
html.v27 .l-card__title {
  font-family: var(--v-display) !important; font-size: var(--sys-title-size) !important; font-weight: 700 !important;
  letter-spacing: .005em !important; text-transform: none !important; color: var(--v-ink) !important;
}
html.v27 .card-head-sub, html.v27 #hsgSub, html.v27 .v27-title-meta { font-size: 13px !important; font-weight: 500 !important; color: var(--v-muted) !important; }
html.v27 .badge, html.v27 .panel__count, html.v27 [id$="Count"] {
  background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
  font-size: 12px !important; font-weight: 500 !important; color: var(--v-muted) !important;
}

/* tabela: receita única */
html.v27 .app-main .table-wrap,
html.v27 .app-main .opp-wrap { padding: 0 12px 12px !important; }
html.v27 .app-main table.sheet { border-collapse: separate !important; border-spacing: 2px !important; }
html.v27 .app-main table.sheet th,
html.v27 .app-main table.sheet td { border: 0 !important; }
html.v27 .app-main table.sheet thead tr:not(.thead-group) th {
  background: var(--v-surface) !important; color: var(--v-muted-2) !important;
  font-family: var(--v-display) !important; font-size: var(--sys-th-size) !important; font-weight: 600 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important; padding: 8px 6px 6px !important;
}
html.v27 .app-main table.sheet thead th.is-sorted,
html.v27 .app-main table.sheet thead th.th-active { color: var(--v-ink) !important; box-shadow: inset 0 -2px 0 var(--v-accent) !important; }
html.v27 .app-main table.sheet tbody td { height: var(--sys-cell-h) !important; font-size: var(--sys-td-size) !important; border-radius: 5px; }
html.v27 .club-tables table.sheet tbody td { height: var(--sys-cell-h) !important; }

/* Ranking: blocos de valor do mesmo tamanho dos outros (não esticam a coluna toda) */
html.v27 #tablesPair #tableWrap td.num:not(.rank) .val,
html.v27 #opponentWrap td.num:not(.rank) .val { max-width: 92px; margin: 0 auto; }

/* ---------- LEGENDAS: mesma receita ---------- */
html.v27 .l-page { padding-top: 20px !important; display: flex; flex-direction: column; gap: 14px; }
html.v27 .l-head {
  background: var(--v-surface); border: 1px solid var(--v-line); border-radius: var(--v-r-lg);
  padding: 12px var(--sys-pad-x) 14px !important; margin: 0 !important;
}
html.v27 .l-ico { display: none !important; }
html.v27 .l-kicker { font-size: var(--sys-eyebrow-size) !important; color: var(--v-muted) !important; letter-spacing: .08em !important; margin: 0 0 6px !important; }
html.v27 .l-title { font-family: var(--v-display) !important; font-size: var(--sys-title-size) !important; font-weight: 700 !important; margin: 0 !important; }
html.v27 .l-sub { font-size: 13px !important; font-weight: 500 !important; color: var(--v-muted) !important; margin: 2px 0 0 !important; }
html.v27 .l-card__top { padding: 14px var(--sys-pad-x) 6px !important; border-bottom: 0 !important; background: none !important; }
html.v27 .legend { padding: 0 var(--sys-pad-x) 16px !important; display: grid; gap: 0; }
html.v27 .l-section {
  background: none !important; border: 0 !important; border-top: 1px solid var(--v-line-2) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 14px 0 !important; margin: 0 !important;
}
html.v27 .l-section:first-child { border-top: 0 !important; }
html.v27 .l-h__dot { display: none !important; }
html.v27 .l-h__title { font-family: var(--v-display) !important; font-size: 16px !important; font-weight: 700 !important; margin: 0 0 8px !important; color: var(--v-ink) !important; }
html.v27 .l-p, html.v27 .l-ul li { font-size: 14px !important; font-weight: 500 !important; color: var(--v-ink-2) !important; line-height: 1.6; margin: 4px 0 !important; }
html.v27 .l-chip {
  display: inline-block; min-width: 40px; text-align: center; margin-right: 8px;
  background: var(--v-sunken) !important; color: var(--v-ink) !important; border: 0 !important;
  border-radius: 5px !important; padding: 2px 6px !important; font-size: 12px !important; font-weight: 700 !important;
}

@media (max-width: 900px) {
  html.v27 { --sys-pad-x: 14px; }
  html.v27 body .wrap, html.v27 body main.wrap, html.v27 body .app-header .wrap { width: calc(100% - 24px) !important; }
  html.v27 #filtersCard .rec-toggle, html.v27 #filtersCard .rec-row--status,
  html.v27 #filtersCard .hsg-filtergrid > .xfilters-block { padding: 0 !important; border-left: 0 !important; flex: 1 1 100%; }
}

/* --- ajustes de alinhamento do sistema --- */
html.v27 body main.app-main { padding-left: 0 !important; padding-right: 0 !important; }

html.v27 .app-main > .card.app-card.v27-index-top:has(#navViews) .card-head-left { display: flex !important; }
html.v27 .app-main > .card.app-card.v27-index-top:has(#navViews) .card-h {
  grid-column: 1 / -1 !important; grid-row: 1 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0 !important;
}

/* Recorrência: vence as regras antigas (.rec-filters) */
html.v27 #filtersCard.rec-filters .rec-body { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; row-gap: 10px !important; column-gap: 0 !important; }
html.v27 #filtersCard.rec-filters .rec-row--toggles { display: flex !important; flex-wrap: wrap !important; gap: 10px 0 !important; margin: 0 !important; }
html.v27 #filtersCard.rec-filters .rec-toggle {
  display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 18px !important;
  border-left: 1px solid var(--v-line) !important; min-height: 32px; grid-template-columns: none !important;
  flex-direction: row !important;
}
html.v27 #filtersCard.rec-filters .rec-toggle:first-child { padding-left: 0 !important; border-left: 0 !important; }
html.v27 #filtersCard.rec-filters .rec-toggle[hidden] { display: none !important; }
html.v27 #filtersCard.rec-filters .rec-row--status {
  display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important;
  padding: 0 18px !important; border-left: 1px solid var(--v-line) !important; min-height: 32px;
}
html.v27 #filtersCard.rec-filters .rec-body > .xfilters-block--clubs { flex: 1 1 100% !important; width: 100%; }
html.v27 #filtersCard.rec-filters #statusChips { display: flex !important; flex-wrap: nowrap !important; }
@media (max-width: 900px) {
  html.v27 #filtersCard.rec-filters .rec-toggle,
  html.v27 #filtersCard.rec-filters .rec-row--status { padding: 0 !important; border-left: 0 !important; flex: 1 1 100%; }
}

html.v27 .app-main > .card.app-card.v27-index-top { padding: 12px var(--sys-pad-x) 0 !important; }

html.v27 #filtersCard.rec-filters .rec-toggle,
html.v27 #filtersCard.rec-filters .rec-row--status { padding: 0 14px !important; }
html.v27 #filtersCard.rec-filters .rec-toggle:first-child { padding-left: 0 !important; }
html.v27 #filtersCard.rec-filters .rec-row--toggles { gap: 10px 0 !important; }
html.v27 #filtersCard.rec-filters .xfilters-block--clubs { margin-top: 12px !important; padding-top: 10px !important; border-top: 1px solid var(--v-line-2) !important; }

/* Equipes: sem as frases de "leituras rápidas" — os números já dizem tudo */
html.v27 .v27-club-summary #clubInsights,
html.v27 .v27-club-summary .ins-list { display: none !important; }


/* #####################################################################
   RANKING — harmonia (grade única, um assunto por bloco)
   ##################################################################### */
/* topo: rótulo à esquerda; filtros ativos + "Filtros" agrupados à direita */
html.v27 .v27-filter-group { display: flex; align-items: center; gap: 6px; }
html.v27 .v27-filter-group .active-filters { padding: 0 !important; margin: 0 !important; display: flex; gap: 6px; background: none !important; border: 0 !important; }
html.v27 .v27-filter-group .active-filters[hidden] { display: none !important; }
html.v27 .v27-filter-group .filter-chip { font-size: 11.5px !important; padding: 2px 4px 2px 9px !important; }

/* título da tabela + rodada numa linha, sem bolinha */
html.v27 .card.app-card:has(#tablesPair) > .card-h { padding: 16px var(--sys-pad-x) 4px !important; }
html.v27 .card.app-card:has(#tablesPair) .card-head-left { display: flex !important; align-items: baseline; gap: 10px; }
html.v27 .round-chip::before { display: none !important; }
html.v27 .round-chip { font-size: 13px !important; color: var(--v-muted) !important; }

/* as duas tabelas: colunas iguais, divisória fina no meio, mesmo alinhamento */
html.v27 #tablesPair.is-pair { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 0 !important; padding: 0 0 8px; }
html.v27 #tablesPair.is-pair > .table-wrap { border-right: 1px solid var(--v-line-2) !important; border-radius: 0 !important; padding: 0 14px 12px 12px !important; }
html.v27 #tablesPair.is-pair > .opp-wrap { padding: 0 12px 12px 14px !important; border-radius: 0 !important; max-height: none !important; }
html.v27 #tablesPair .opp-caption {
  margin: 0 0 4px !important; padding: 8px 6px 8px !important; box-shadow: none !important;
  font-size: 11px !important; color: var(--v-muted) !important;
}

/* grade de colunas: P | Equipe | 3 valores de largura igual */
html.v27 #tablesPair table.sheet { table-layout: fixed !important; width: 100% !important; min-width: 0 !important; }
html.v27 #tablesPair table.sheet th:nth-child(1), html.v27 #tablesPair table.sheet td:nth-child(1) { width: 40px !important; }
html.v27 #tablesPair table.sheet th:nth-child(2), html.v27 #tablesPair table.sheet td:nth-child(2) { width: 42% !important; }
html.v27 #tablesPair table.sheet th:nth-child(n+3), html.v27 #tablesPair table.sheet td:nth-child(n+3) { width: auto !important; }
html.v27 #tablesPair table.sheet thead th { text-align: center !important; }
html.v27 #tablesPair table.sheet thead th:nth-child(2) { text-align: left !important; padding-left: 8px !important; }
html.v27 #tablesPair table.sheet tbody td { height: 38px !important; }

/* blocos de valor: mesma largura em todas as colunas e nas duas tabelas */
html.v27 #tablesPair #tableWrap td.num:not(.rank) .val,
html.v27 #tablesPair #opponentWrap td.num:not(.rank) .val {
  width: 100% !important; max-width: 84px !important; height: 32px !important; margin: 0 auto !important;
  font-size: 14px !important; font-weight: 600 !important;
}

/* zonas: só topo (verde) e fundo (vermelho), traço de 2px; meio sem marca */
html.v27 #tablesPair table.sheet tbody tr td:nth-child(1) { box-shadow: none !important; }
html.v27 #tablesPair #tableWrap table.sheet tbody tr.zone-g6 td:nth-child(1) { box-shadow: inset 2px 0 0 #2fa866 !important; }
html.v27 #tablesPair #tableWrap table.sheet tbody tr.zone-relegation td:nth-child(1) { box-shadow: inset 2px 0 0 #e0473d !important; }

/* equipe: escudo + sigla + minigráfico alinhados; minigráfico cinza discreto */
html.v27 #tablesPair .team-cell { display: flex !important; align-items: center; gap: 10px !important; padding-left: 4px; }
html.v27 #tablesPair .team-cell > span:not(.team-sparkline) { min-width: 34px; font-weight: 600; }
html.v27 #tablesPair .team-sparkline { margin-left: auto; margin-right: 8px; opacity: .45 !important; }
html.v27 #tablesPair .team-sparkline svg polyline,
html.v27 #tablesPair .team-sparkline svg path { stroke: var(--v-muted) !important; }

/* sem realce de linha inteira ao passar o mouse (só o minigráfico acende) */
html.v27 #tablesPair table.sheet tbody tr:hover td:not(.v27-heat):not([class*="hm"]) { background-color: var(--v-surface) !important; }
html.v27 #tablesPair table.sheet tbody tr:hover .team-sparkline { opacity: 1 !important; }

@media (max-width: 900px) {
  html.v27 .v27-filter-group .active-filters { display: none !important; }
  html.v27 #tablesPair table.sheet th:nth-child(2), html.v27 #tablesPair table.sheet td:nth-child(2) { width: 52px !important; }
  html.v27 #tablesPair .team-cell > span:not(.team-sparkline), html.v27 #tablesPair .team-sparkline { display: none !important; }
}
html.v27 #tablesPair table.sheet tbody td:nth-child(1) { border-radius: 0 !important; }


/* #####################################################################
   HARMONIA — régua única do site
   1) Grade de 8 pontos   espaços só em 4 · 8 · 16 · 24 · 32
   2) Escala tipográfica  11 · 13 · 15 · 20 · 28  (razão ≈ 1,25)
   3) Orçamento de cor    cor forte só nos extremos (paleta no v27.js)
   4) Menos caixas        espaço no lugar de fios e molduras (Gestalt: proximidade)
   5) Hierarquia          número-chave de cada tela em destaque
   6) Acabamento          transição suave, logo mais leve, modo escuro
   ##################################################################### */
html.v27 {
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px;
  --t-xs: 11px; --t-sm: 13px; --t-md: 15px; --t-lg: 20px; --t-xl: 28px;
  --sys-pad-x: var(--s4);
  --sys-eyebrow-size: var(--t-xs);
  --sys-title-size: var(--t-lg);
  --sys-th-size: var(--t-xs);
  --sys-td-size: var(--t-sm);
  --sys-cell-h: 36px;
}

/* ---------- 1) GRADE DE 8 PONTOS ---------- */
html.v27 body .app-main { padding-top: var(--s4) !important; gap: var(--s4) !important; }
html.v27 .l-page { padding-top: var(--s4) !important; gap: var(--s4) !important; }
html.v27 #filtersCard .xfilters-head,
html.v27 .v27-tb-head { padding: var(--s3) var(--s4) 0 !important; }
html.v27 #filtersCard .xfilters-body { padding: var(--s3) var(--s4) var(--s4) !important; }
html.v27 .card .card-h:not(.xfilters-head),
html.v27 .club-tables .club-table__head,
html.v27 .club-summaries .panel__head,
html.v27 .l-card__top { padding: var(--s4) var(--s4) var(--s2) !important; }
html.v27 .app-main .table-wrap,
html.v27 .app-main .opp-wrap,
html.v27 .club-summaries .panel__body { padding: 0 var(--s3) var(--s3) !important; }
html.v27 .card.v27-index-top,
html.v27 .app-main > .card.app-card.v27-index-top { padding: var(--s3) var(--s4) var(--s4) !important; row-gap: var(--s3) !important; }
html.v27 .card.v27-index-top .metrics.metrics--compact { margin: 0 !important; padding: 0 !important; }
html.v27 .card.v27-index-top .metric-card { padding: 0 var(--s4) !important; }
html.v27 .card.v27-index-top .metric-card:first-child { padding-left: 0 !important; }
html.v27 .club-headcard .card-h, html.v27 .club-headcard .card-h.compact { padding: var(--s3) var(--s4) var(--s2) !important; }
html.v27 .v27-club-summary { padding: 0 var(--s4) var(--s3) calc(var(--s4) + 58px) !important; }
html.v27 .club-headcard .card-b { padding: var(--s2) var(--s3) var(--s3) !important; }
html.v27 .legend { padding: 0 var(--s4) var(--s4) !important; }
html.v27 .l-head { padding: var(--s3) var(--s4) var(--s4) !important; }
html.v27 .club-summaries { gap: var(--s4) !important; }
html.v27 .club-tables { display: grid; gap: var(--s4) !important; }

/* ---------- 2) ESCALA TIPOGRÁFICA (5 tamanhos) ---------- */
/* 11 — rótulos, cabeçalhos de tabela, siglas */
html.v27 .v27-tb-eyebrow, html.v27 #filtersCard .xfilters-title, html.v27 #filtersCard .xfilters-titles .card-title,
html.v27 .card.v27-index-top #cardTitle, html.v27 .metric-label, html.v27 .opp-caption, html.v27 .l-kicker,
html.v27 .app-main table.sheet thead th, html.v27 .club-summaries .sum-balloon .k,
html.v27 .club-tables table.sheet thead tr.thead-group th, html.v27 .hsg-team small,
html.v27 .v27-mando, html.v27 .v27-club-sigla, html.v27 .bn-item { font-size: var(--t-xs) !important; }
/* 13 — texto de apoio, controles, chips, contagens, células de tabelas densas */
html.v27 .seg-btn, html.v27 .seg__btn, html.v27 #navViews .tab, html.v27 .chip, html.v27 .filter-chip,
html.v27 .xfilters-collapse, html.v27 #btnOpenFilters2, html.v27 .rec-toggle__label,
html.v27 .badge, html.v27 .panel__count, html.v27 [id$="Count"], html.v27 .card-head-sub, html.v27 #hsgSub,
html.v27 .v27-title-meta, html.v27 .round-chip, html.v27 .metric-sub, html.v27 .hero-label, html.v27 .hero-rank,
html.v27 .l-sub, html.v27 .xfilters-games-input, html.v27 #pageSubtitle, html.v27 .footer-link,
html.v27 .app-main table.sheet tbody td { font-size: var(--t-sm) !important; }
/* 15 — números das tabelas "leves", nomes, navegação */
html.v27 #tablesPair table.sheet tbody td, html.v27 #tablesPair td.num .val,
html.v27 #hsgWrap table.sheet tbody td, html.v27 .club-summaries .sum-balloon .v,
html.v27 .app-header__tabs .tab, html.v27 #pageTitle, html.v27 .v27-team-name,
html.v27 .l-p, html.v27 .l-ul li, html.v27 .l-h__title { font-size: var(--t-md) !important; }
/* 20 — títulos de card e números-chave */
html.v27 #title, html.v27 #hsgTitle, html.v27 .club-table__title, html.v27 .club-summaries .panel__title,
html.v27 .l-title, html.v27 .l-card__title, html.v27 .hero-num,
html.v27 .indice-pill, html.v27 #hsgWrap table.sheet td.hsg-strong { font-size: var(--t-lg) !important; }
/* 28 — nome do clube */
html.v27 .club-headcard .club-head-title { font-size: var(--t-xl) !important; }

/* ---------- 4) MENOS CAIXAS ---------- */
html.v27 .card, html.v27 .card.app-card, html.v27 .club-overview, html.v27 .xfilters, html.v27 .l-card, html.v27 .l-head {
  border-color: var(--v-line-2) !important; box-shadow: none !important;
}
/* separadores verticais e fios internos → espaço */
html.v27 #filtersCard .xfilters-grid > .xfilters-block,
html.v27 #filtersCard .hsg-filtergrid > .xfilters-block,
html.v27 #filtersCard.rec-filters .rec-toggle,
html.v27 #filtersCard.rec-filters .rec-row--status { border-left: 0 !important; padding: 0 var(--s4) 0 0 !important; }
html.v27 #filtersCard .xfilters-block--clubs,
html.v27 #filtersCard.rec-filters .xfilters-block--clubs { border-top: 0 !important; margin-top: var(--s3) !important; padding-top: 0 !important; }
html.v27 .card.v27-index-top .metrics.metrics--compact { border-top: 0 !important; }
html.v27 .card.v27-index-top .metric-card,
html.v27 .metrics.metrics--compact .metric-card { border-left: 0 !important; }
html.v27 .club-headcard .card-b { border-top: 0 !important; }
html.v27 #tablesPair.is-pair { column-gap: var(--s5) !important; }
html.v27 #tablesPair.is-pair > .table-wrap { border-right: 0 !important; }
html.v27 .v27-club-summary .hero-card { border-left: 0 !important; }

/* ---------- 5) HIERARQUIA: o número-chave de cada tela ---------- */
html.v27 .indice-pill { font-family: var(--v-display) !important; font-weight: 700 !important; }
html.v27 #tablesPair #tableWrap tbody td:nth-child(3) .val,
html.v27 #tablesPair #opponentWrap tbody td:nth-child(3) .val { font-weight: 700 !important; }
html.v27 #tablesPair tbody td:nth-child(n+4) .val { font-weight: 500 !important; }
html.v27 .rec-table-shell td.col-highlight { font-weight: 700 !important; }
html.v27 .app-main table.sheet tbody td.v27-heat { font-weight: 500 !important; }
html.v27 .app-main table.sheet tbody td.v27-heat[style*="color"] { font-weight: 600 !important; }

/* classes de heatmap (Equipes / xScout): mesmo orçamento de cor */
html.v27 table.sheet tbody tr td.hm-very-good, html.v27 table.sheet tbody tr:nth-child(even) td.hm-very-good, html.v27 table.sheet tbody td.hm-very-good,
html.v27 .sum-balloon.hm-very-good .v, html.v27 table.sheet tbody td.hm5 { background: #b2e2c4 !important; color: #0d5530 !important; }
html.v27 table.sheet tbody tr:nth-child(even) td.hm-good, html.v27 table.sheet tbody td.hm-good, html.v27 .sum-balloon.hm-good .v, html.v27 table.sheet tbody td.hm4 { background: #eaf2ec !important; color: var(--v-ink) !important; }
html.v27 table.sheet tbody tr:nth-child(even) td.hm-mid, html.v27 table.sheet tbody td.hm-mid, html.v27 .sum-balloon.hm-mid .v, html.v27 table.sheet tbody td.hm3 { background: var(--v-mid-bg) !important; color: var(--v-ink) !important; }
html.v27 table.sheet tbody tr:nth-child(even) td.hm-bad, html.v27 table.sheet tbody td.hm-bad, html.v27 .sum-balloon.hm-bad .v, html.v27 table.sheet tbody td.hm2 { background: #f5ebe8 !important; color: var(--v-ink) !important; }
html.v27 table.sheet tbody tr td.hm-very-bad, html.v27 table.sheet tbody tr:nth-child(even) td.hm-very-bad, html.v27 table.sheet tbody td.hm-very-bad,
html.v27 .sum-balloon.hm-very-bad .v, html.v27 table.sheet tbody td.hm1 { background: #f2bdb4 !important; color: #8a1c12 !important; }

/* ---------- 6) ACABAMENTO ---------- */
/* logo mais leve: o dado é o protagonista, não a marca */
html.v27 .app-logo-mark { width: 26px !important; height: 26px !important; border-radius: 7px !important; }
html.v27 .app-logo-mark svg { width: 14px !important; height: 14px !important; }
html.v27 .app-header__inner { min-height: 56px !important; }
/* transição suave quando a tabela é redesenhada (troca de aba/filtro) */
@keyframes v27-fade { from { opacity: 0; } to { opacity: 1; } }
html.v27 .app-main table.sheet tbody { animation: v27-fade .15s ease-out; }
html.v27 .v27-theme-btn .i-sun { display: none; }
html.v27.v27-dark .v27-theme-btn .i-sun { display: block; }
html.v27.v27-dark .v27-theme-btn .i-moon { display: none; }
html.v27 .v27-theme-btn svg { width: 17px; height: 17px; }

/* ---------- MODO ESCURO ---------- */
html.v27.v27-dark {
  --v-bg: #0f1216; --v-surface: #161a1f; --v-surface-2: #1b2026; --v-sunken: #232931;
  --v-ink: #eef1f4; --v-ink-2: #c5cbd3; --v-muted: #8f97a2; --v-muted-2: #6c747f;
  --v-line: #2b3139; --v-line-2: #232930;
  --v-accent-ink: #ff9a5c; --v-accent-soft: #2b1d14;
  --v-good: #6ad79c; --v-good-bg: #173323; --v-bad: #ff8f85; --v-bad-bg: #3b1d1a; --v-mid-bg: #23272d;
  --table-hover: #1d2228;
  color-scheme: dark;
}
html.v27.v27-dark .app-header { background: rgba(22, 26, 31, .94) !important; }
html.v27.v27-dark .bottomnav { background: rgba(22, 26, 31, .97) !important; }
html.v27.v27-dark table.sheet tbody tr:hover td:not(.v27-heat):not([class*="hm"]) { background-color: var(--v-surface-2) !important; }
html.v27.v27-dark .sheet-panel, html.v27.v27-dark dialog.sheet { background: var(--v-surface) !important; color: var(--v-ink) !important; }
html.v27.v27-dark .toggle-row { background: var(--v-surface-2) !important; }
html.v27.v27-dark .team-crest, html.v27.v27-dark .cell-club img, html.v27.v27-dark .opp-crest,
html.v27.v27-dark .metric-team img, html.v27.v27-dark .club-chip-crest, html.v27.v27-dark #clubChips .chip-crest { filter: drop-shadow(0 0 1px rgba(255,255,255,.25)); }
html.v27.v27-dark #clubChips .chip:not(.is-on), html.v27.v27-dark .club-headcard .club-nav__row .tab.tab--club:not(.active) { opacity: .3; }
/* classes de heatmap no escuro */
html.v27.v27-dark table.sheet tbody td.hm-very-good, html.v27.v27-dark table.sheet tbody tr td.hm-very-good, html.v27.v27-dark table.sheet tbody tr:nth-child(even) td.hm-very-good, html.v27.v27-dark .sum-balloon.hm-very-good .v, html.v27.v27-dark table.sheet tbody td.hm5 { background: #24603e !important; color: #c8f5da !important; }
html.v27.v27-dark table.sheet tbody td.hm-good, html.v27.v27-dark table.sheet tbody tr:nth-child(even) td.hm-good, html.v27.v27-dark .sum-balloon.hm-good .v, html.v27.v27-dark table.sheet tbody td.hm4 { background: #212c26 !important; color: var(--v-ink) !important; }
html.v27.v27-dark table.sheet tbody td.hm-mid, html.v27.v27-dark table.sheet tbody tr:nth-child(even) td.hm-mid, html.v27.v27-dark .sum-balloon.hm-mid .v, html.v27.v27-dark table.sheet tbody td.hm3 { background: var(--v-mid-bg) !important; color: var(--v-ink) !important; }
html.v27.v27-dark table.sheet tbody td.hm-bad, html.v27.v27-dark table.sheet tbody tr:nth-child(even) td.hm-bad, html.v27.v27-dark .sum-balloon.hm-bad .v, html.v27.v27-dark table.sheet tbody td.hm2 { background: #2e2424 !important; color: var(--v-ink) !important; }
html.v27.v27-dark table.sheet tbody td.hm-very-bad, html.v27.v27-dark table.sheet tbody tr td.hm-very-bad, html.v27.v27-dark table.sheet tbody tr:nth-child(even) td.hm-very-bad, html.v27.v27-dark .sum-balloon.hm-very-bad .v, html.v27.v27-dark table.sheet tbody td.hm1 { background: #682824 !important; color: #ffd1cb !important; }

@media (max-width: 900px) {
  html.v27 { --sys-pad-x: var(--s3); }
  html.v27 #filtersCard .xfilters-head, html.v27 .v27-tb-head { padding: var(--s3) var(--s3) 0 !important; }
  html.v27 #filtersCard .xfilters-body { padding: var(--s3) !important; }
  html.v27 .card .card-h:not(.xfilters-head), html.v27 .club-tables .club-table__head, html.v27 .club-summaries .panel__head { padding: var(--s3) var(--s3) var(--s2) !important; }
  html.v27 .app-main .table-wrap, html.v27 .app-main .opp-wrap { padding: 0 var(--s2) var(--s2) !important; }
  html.v27 body .app-main { gap: var(--s3) !important; padding-top: var(--s3) !important; }
  html.v27 .card.v27-index-top, html.v27 .app-main > .card.app-card.v27-index-top { padding: var(--s3) !important; }
  html.v27 .v27-club-summary { padding: 0 var(--s3) var(--s3) !important; }
  html.v27 .card.v27-index-top .metric-card { padding: 0 var(--s3) 0 0 !important; }
}
/* escuro: textos/células que vinham com cor fixa do CSS antigo */
html.v27.v27-dark .app-main table.sheet tbody td:not([style*="color"]) { color: var(--v-ink) !important; }
html.v27.v27-dark #hsgWrap table.sheet td.hsg-strong:not(.v27-heat):not(.hm) { background: var(--v-surface) !important; }
html.v27.v27-dark td.num .val.is-good:not(.v27-heat), html.v27.v27-dark td.num .val.good:not(.v27-heat) { background: #24603e !important; color: #c8f5da !important; }
html.v27.v27-dark td.num .val.is-mid:not(.v27-heat), html.v27.v27-dark td.num .val.mid:not(.v27-heat) { background: var(--v-mid-bg) !important; color: var(--v-ink) !important; }
html.v27.v27-dark td.num .val.is-bad:not(.v27-heat), html.v27.v27-dark td.num .val.bad:not(.v27-heat) { background: #682824 !important; color: #ffd1cb !important; }

/* ---------- RODAPÉ: sempre no pé da página e bem discreto ---------- */
/* layout "sticky footer": o conteúdo ocupa a altura que sobrar, o rodapé encosta embaixo */
html.v27 body.app-body,
html.v27 body { min-height: 100vh; display: flex !important; flex-direction: column; }
html.v27 body > main,
html.v27 body > .app-main,
html.v27 body > .l-page { flex: 1 0 auto; width: min(1280px, calc(100% - 48px)); }
html.v27 body > #footerMount { margin-top: auto; }

html.v27 .site-footer {
  margin-top: var(--s5) !important; padding: var(--s4) 0 !important;
  background: none !important; border-top: 1px solid var(--v-line-2) !important; box-shadow: none !important;
}
html.v27 .site-footer .rail { display: flex !important; align-items: center !important; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
html.v27 .footer-left { display: flex !important; align-items: baseline; gap: var(--s2); }
html.v27 .footer-brand {
  font-family: var(--v-font) !important; font-size: var(--t-xs) !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--v-muted) !important;
}
html.v27 .footer-tagline { font-size: var(--t-xs) !important; font-weight: 500 !important; color: var(--v-muted-2) !important; }
/* separador "· " removido: o rodapé não exibe mais a marca antes do texto */
html.v27 .footer-right { display: flex !important; align-items: center; gap: var(--s3) !important; }
/* os atalhos de navegação já estão no menu do topo: no rodapé ficam só os legais */
html.v27 .footer-link:not(.footer-link--legal) { display: none !important; }
html.v27 .footer-link, html.v27 .footer-credit, html.v27 .footer-credit a {
  font-size: var(--t-xs) !important; font-weight: 500 !important; color: var(--v-muted-2) !important; text-decoration: none !important;
}
html.v27 .footer-link:hover, html.v27 .footer-credit a:hover { color: var(--v-ink) !important; }
@media (max-width: 900px) {
  html.v27 body > main, html.v27 body > .app-main, html.v27 body > .l-page { width: calc(100% - 24px); }
  html.v27 .site-footer { display: none !important; }
}
html.v27 .footer-left { flex-direction: row !important; }
html.v27 .footer-credit { border: 0 !important; padding: 0 !important; margin: 0 !important; }

/* ---------- Equipes: resumo Mandante/Visitante bem discreto ----------
   sem blocos coloridos: números em texto simples; só a cor da letra indica
   os extremos (verde = muito bom, vermelho = muito ruim). */
html.v27 .club-summaries .panel__head { padding: var(--s3) var(--s4) var(--s1) !important; }
html.v27 .club-summaries .panel__title { font-size: var(--t-md) !important; }
html.v27 .club-summaries .panel__body { padding: 0 var(--s4) var(--s3) !important; }
html.v27 .club-summaries .summary-rows { gap: var(--s2) !important; }
html.v27 .club-summaries .summary-row { grid-template-columns: 64px minmax(0, 1fr) !important; align-items: baseline !important; }
html.v27 .club-summaries .summary-row__label { padding: 0 !important; }
html.v27 .club-summaries .summary-row__label .t { font-size: var(--t-xs) !important; font-weight: 500 !important; color: var(--v-muted-2) !important; }
html.v27 .club-summaries .summary-strip { gap: 0 !important; }
html.v27 .club-summaries .sum-balloon { gap: 2px !important; }
html.v27 .club-summaries .sum-balloon .k { font-size: 10px !important; color: var(--v-muted-2) !important; }
html.v27 .club-summaries .sum-balloon .v,
html.v27 .club-summaries .sum-balloon[class*="hm"] .v {
  background: none !important; padding: 0 !important; border-radius: 0 !important;
  font-size: var(--t-sm) !important; font-weight: 500 !important; color: var(--v-ink-2) !important;
}
html.v27 .club-summaries .sum-balloon.hm-very-good .v { color: var(--v-good) !important; font-weight: 700 !important; }
html.v27 .club-summaries .sum-balloon.hm-very-bad .v { color: var(--v-bad) !important; font-weight: 700 !important; }
html.v27 .club-summaries .summary-row { align-items: end !important; }
html.v27 .club-summaries .summary-row__label { padding-bottom: 1px !important; }

/* resumo Mandante/Visitante: mais respiro e alinhamento
   - cabeçalho separado dos números por 16px
   - "Produzido"/"Sofrido" centralizados na altura da sua linha
   - as duas linhas separadas por um fio fino e 12px de cada lado */
html.v27 .club-summaries .panel__head { padding: var(--s4) var(--s4) var(--s3) !important; align-items: baseline !important; }
html.v27 .club-summaries .panel__body { padding: 0 var(--s4) var(--s4) !important; }
html.v27 .club-summaries .summary-rows { gap: 0 !important; }
html.v27 .club-summaries .summary-row {
  grid-template-columns: 80px minmax(0, 1fr) !important; align-items: center !important;
  padding: 12px 0 !important;
}
html.v27 .club-summaries .summary-row + .summary-row { border-top: 1px solid var(--v-line-2) !important; }
html.v27 .club-summaries .summary-row:first-child { padding-top: 0 !important; }
html.v27 .club-summaries .summary-row:last-child { padding-bottom: 0 !important; }
html.v27 .club-summaries .summary-row__label { padding: 0 !important; align-self: center !important; }
html.v27 .club-summaries .summary-row__label .t { font-size: var(--t-xs) !important; font-weight: 600 !important; color: var(--v-muted) !important; letter-spacing: .02em !important; }
html.v27 .club-summaries .sum-balloon { gap: 6px !important; }
html.v27 .club-summaries .sum-balloon .k { font-size: 10px !important; letter-spacing: .06em !important; line-height: 1 !important; }
html.v27 .club-summaries .sum-balloon .v,
html.v27 .club-summaries .sum-balloon[class*="hm"] .v { font-size: var(--t-md) !important; line-height: 1 !important; }
html.v27 .club-summaries .summary-row { border-radius: 0 !important; background: none !important; box-shadow: none !important; }
@media (max-width: 700px) {
  html.v27 .club-summaries .panel__head { padding: var(--s3) var(--s3) var(--s2) !important; }
  html.v27 .club-summaries .panel__body { padding: 0 var(--s3) var(--s3) !important; }
  html.v27 .club-summaries .summary-row { grid-template-columns: minmax(0, 1fr) !important; row-gap: 8px !important; }
  html.v27 .club-summaries .sum-balloon .v,
  html.v27 .club-summaries .sum-balloon[class*="hm"] .v { font-size: var(--t-sm) !important; }
  html.v27 .club-summaries .sum-balloon .k { font-size: 9.5px !important; letter-spacing: .02em !important; }
}

/* =====================================================================
   LOGIN — versão clean (tema 2027, claro e escuro)
   Escopo: só a página que tem o formulário de login.
   Menos cor: sem orbes, grade, brilho animado ou gradiente no botão.
   ===================================================================== */
html.v27 body:has(#loginForm) {
  background: var(--v-bg) !important;
  color: var(--v-ink) !important;
  font-family: var(--v-font) !important;
}
html.v27 body:has(#loginForm) .ambient,
html.v27 body:has(#loginForm) .card-accent,
html.v27 body:has(#loginForm) .card::before,
html.v27 body:has(#loginForm) .submit::after,
html.v27 body:has(#loginForm) .divider { display: none !important; }

html.v27 body:has(#loginForm) .wrap { padding: 32px 16px 16px !important; }
html.v27 body:has(#loginForm) .shell { width: min(400px, 100%) !important; animation: none !important; }

/* marca */
html.v27 body:has(#loginForm) .brand { justify-content: flex-start !important; gap: 12px !important; margin: 0 0 20px !important; }
html.v27 body:has(#loginForm) .brand-badge {
  width: 40px !important; height: 40px !important; border-radius: 10px !important;
  background: var(--v-accent) !important; border: 0 !important; box-shadow: none !important;
}
html.v27 body:has(#loginForm) .brand-badge svg { color: #fff !important; filter: none !important; width: 20px !important; height: 20px !important; }
html.v27 body:has(#loginForm) .brand-title {
  font-family: var(--v-display) !important; font-size: 20px !important; font-weight: 700 !important;
  letter-spacing: .01em !important; text-transform: uppercase; color: var(--v-ink) !important;
}
html.v27 body:has(#loginForm) .brand-sub {
  font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--v-muted) !important; margin-top: 2px !important;
}

/* card */
html.v27 body:has(#loginForm) .card {
  background: var(--v-surface) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--v-line) !important; border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 40px -24px rgba(0, 0, 0, .35) !important;
}
html.v27 body:has(#loginForm) .card-h { padding: 28px 28px 0 !important; border: 0 !important; background: none !important; display: block !important; }
html.v27 body:has(#loginForm) .card-h h1 {
  font-family: var(--v-display) !important; font-size: 28px !important; font-weight: 700 !important;
  letter-spacing: 0 !important; color: var(--v-ink) !important; margin: 0 !important;
}
html.v27 body:has(#loginForm) .card-h p { color: var(--v-muted) !important; font-size: 14px !important; font-weight: 400 !important; margin-top: 6px !important; }
html.v27 body:has(#loginForm) .card-b { padding: 20px 28px 24px !important; }

/* campos */
html.v27 body:has(#loginForm) label {
  display: block !important; margin: 16px 0 6px !important;
  font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--v-ink-2) !important;
}
html.v27 body:has(#loginForm) label:first-child { margin-top: 0 !important; }
html.v27 body:has(#loginForm) input {
  height: 44px !important; padding: 0 14px 0 40px !important;
  background: var(--v-surface-2) !important; color: var(--v-ink) !important;
  border: 1px solid var(--v-line) !important; border-radius: 10px !important;
  box-shadow: none !important; font-weight: 500 !important; font-size: 14.5px !important;
}
html.v27 body:has(#loginForm) input::placeholder { color: var(--v-muted-2) !important; }
html.v27 body:has(#loginForm) input:hover { border-color: var(--v-muted-2) !important; }
html.v27 body:has(#loginForm) input:focus {
  background: var(--v-surface) !important; border-color: var(--v-accent) !important;
  box-shadow: 0 0 0 3px rgba(251, 89, 4, .15) !important;
}
html.v27 body:has(#loginForm) input:-webkit-autofill,
html.v27 body:has(#loginForm) input:-webkit-autofill:hover,
html.v27 body:has(#loginForm) input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--v-ink) !important;
  box-shadow: 0 0 0 1000px var(--v-surface-2) inset !important;
  border: 1px solid var(--v-line) !important;
}
html.v27 body:has(#loginForm) .field .ico { color: var(--v-muted-2) !important; width: 17px !important; height: 17px !important; left: 13px !important; }
html.v27 body:has(#loginForm) .field:focus-within .ico { color: var(--v-accent) !important; }
html.v27 body:has(#loginForm) .toggle-pass { color: var(--v-muted) !important; background: transparent !important; }
html.v27 body:has(#loginForm) .toggle-pass:hover { background: var(--v-sunken) !important; color: var(--v-ink) !important; }

html.v27 body:has(#loginForm) .row { display: flex !important; margin-top: 10px !important; }
html.v27 body:has(#loginForm) .hint, html.v27 body:has(#loginForm) .hint svg { color: var(--v-muted) !important; font-weight: 400 !important; }

/* botão: laranja sólido, sem brilho */
html.v27 body:has(#loginForm) .submit {
  height: 46px !important; margin-top: 20px !important; padding: 0 16px !important;
  background: var(--v-accent) !important; border: 0 !important; border-radius: 10px !important;
  box-shadow: none !important; color: #fff !important;
  font-family: var(--v-font) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: 0 !important;
}
html.v27 body:has(#loginForm) .submit:hover { background: #e85103 !important; transform: none !important; box-shadow: none !important; }
html.v27 body:has(#loginForm) .err { color: var(--v-bad) !important; font-weight: 600 !important; }
html.v27 body:has(#loginForm) .err::before { background: var(--v-bad) !important; }

/* rodapé do card */
html.v27 body:has(#loginForm) .foot {
  display: flex !important; margin-top: 18px !important; padding-top: 16px !important;
  border-top: 1px solid var(--v-line-2) !important;
  color: var(--v-muted) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
html.v27 body:has(#loginForm) .foot .dot { background: var(--v-muted-2) !important; }
html.v27 body:has(#loginForm) .foot .lock { color: var(--v-muted) !important; }

html.v27 body:has(#loginForm) input:focus-visible { outline: none !important; }
html.v27 body:has(#loginForm) .foot { flex-wrap: wrap !important; gap: 6px 8px !important; white-space: nowrap; }

@media (max-width: 480px) {
  html.v27 body:has(#loginForm) .card-h { padding: 22px 20px 0 !important; }
  html.v27 body:has(#loginForm) .foot { font-size: 11.5px !important; }
  html.v27 body:has(#loginForm) .card-b { padding: 16px 20px 20px !important; }
  html.v27 body:has(#loginForm) .card-h h1 { font-size: 24px !important; }
}