/* ==========================================================================
   BRfut - camada de aparência fiel ao Brasfoot original
   --------------------------------------------------------------------------
   As cores aqui NÃO foram escolhidas a olho: foram amostradas pixel a pixel
   de uma captura do Brasfoot rodando (a cor dominante de cada região).

     barra superior ............ #000000   (97% da área)
     verde da barra lateral .... #00b754   (100%)
     área central .............. #ffffff   (100%)
     cabeçalho da tabela ....... #eeeeee   (100%)
     linha selecionada ......... #ffff00   com texto preto
     barra de energia .......... #00b754

   Este arquivo é carregado por último e só sobrescreve o que precisa mudar,
   para não brigar com o resto do CSS nem apagar trabalho de ninguém.
   ========================================================================== */

/* ==================================================================== */
/* ESCALA DE ESPACAMENTO                                                 */
/*                                                                       */
/* Derivada da MEDICAO do que o projeto ja usava, nao de uma escala      */
/* moderna imposta. Contagem em 242 declaracoes de padding/margin/gap:   */
/*                                                                       */
/*     2px  32x     6px  48x    10px  42x    14px  18x                   */
/*     4px  45x     8px  45x    12px  30x    16px   7x                   */
/*                                                                       */
/* Os valores 1, 3, 5 e 7px eram ruido (47 declaracoes) e foram          */
/* normalizados para o degrau vizinho ja em uso.                         */
/*                                                                       */
/* A densidade NAO muda: a escala comeca em 2px justamente porque o      */
/* Brasfoot e compacto. Isto e catalogo do que existe, nao permissao     */
/* para "dar respiro" — linha de elenco continua em 22px.                */
/* ==================================================================== */
:root {
  --space-0: 1px;    /* celula de tabela densa — a compactacao do Brasfoot */
  --space-1: 2px;    /* colado: badge, marcador */
  --space-2: 4px;    /* interno de controle */
  --space-3: 6px;    /* padrao entre itens irmaos */
  --space-4: 8px;    /* entre blocos de um painel */
  --space-5: 12px;   /* entre secoes */
  --space-6: 16px;   /* margem de janela */
}


:root {
  /* verde exato do jogo original (o anterior, #00a651, era mais escuro) */
  --bf-green-light: #00b754;
  --bf-green: #00b754;
  --surface-game: #00b754;
  --brand-primary: #00b754;

  --bf-table-header: #eeeeee;
  --bf-row-selected: #ffff00;
  --bf-grid-line: #d8d8d8;
}

/* --------------------------------------------------------------------------
   Barra superior: preta e chapada, como no original
   -------------------------------------------------------------------------- */
.game-top-toolbar {
  background: #000000;
  border-bottom: 1px solid #000000;
  box-shadow: none;
  height: 62px;
  padding: 0 10px;
}

/* Ícone em cima, rótulo embaixo - é assim no Brasfoot */
.toolbar-btn {
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  font-weight: normal;
  padding: 4px 10px;
  border-radius: 0;
  line-height: 1.15;
  min-width: 58px;
  justify-content: center;
}

.toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: transparent;
  color: #ffffff;
}

.toolbar-icons-list {
  gap: 2px;
}

/* --------------------------------------------------------------------------
   Área central: branca. Antes ficava verde, e o verde só existe na lateral.
   -------------------------------------------------------------------------- */
.central-squad-table-wrap {
  background: #ffffff;
  border: 1px solid #9a9a9a;
  border-radius: 0;
}

.squad-classic-table {
  font-size: 11.5px;
  color: #000000;
}

.squad-classic-table thead th {
  background: var(--bf-table-header);
  color: #000000;
  font-weight: normal;
  text-align: center;
  padding: 1px 5px;
  border-bottom: 1px solid #9a9a9a;
  border-right: 1px solid var(--bf-grid-line);
}

.squad-classic-table tbody tr {
  border-bottom: none;
}

.squad-classic-table tbody td {
  padding: 1px 5px;
  border-right: 1px solid #f2f2f2;
  border-bottom: none;
}

.squad-classic-table tbody tr:hover {
  background-color: #eef6ff;
}

/* Linha selecionada: amarela com texto preto (no original é #ffff00).
   Antes era azul com texto branco, que não existe no Brasfoot. */
.squad-classic-table tbody tr.selected,
.squad-classic-table tbody tr.selected:hover {
  background-color: var(--bf-row-selected) !important;
  color: #000000 !important;
}

.squad-classic-table tbody tr.selected td {
  color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Energia: barra verde preenchida ocupando a célula, com o valor por cima.
   No original não é um "badge" pequeno - é uma barra.
   -------------------------------------------------------------------------- */
.energy-badge-green,
.energy-bar {
  display: block;
  position: relative;
  width: 100%;
  min-width: 52px;
  height: 13px;
  line-height: 13px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  background: #00b754;
  border: 1px solid #0a7a3c;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* preenchimento parcial quando a energia cai */
.energy-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: #00b754;
  z-index: 0;
}

.energy-bar > span {
  position: relative;
  z-index: 1;
}

.energy-bar.is-low > i { background: #d68910; }
.energy-bar.is-critical > i { background: #c0392b; }
.energy-bar.is-low,
.energy-bar.is-critical { background: #6b6b6b; border-color: #4a4a4a; }

/* --------------------------------------------------------------------------
   Barra lateral verde
   -------------------------------------------------------------------------- */
.main-game-layout {
  background-color: #00b754;
}

/* cabeçalho preto do card do atleta, como no original */
.player-details-card {
  border-radius: 0;
}

/* barra "Próximo Jogo" preta com texto claro */
.sidebar-next-match-header,
.next-match-bar {
  background: #000000;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Nota média: verde quando boa, vermelha quando ruim - igual ao original
   -------------------------------------------------------------------------- */
.score-badge-sofa { font-weight: bold; }
.score-great { color: #0a7a1e; }
.score-good  { color: #0a7a1e; }
.score-avg   { color: #000000; }
.score-bad   { color: #bb311f; }

/* ==========================================================================
   Modais de ação do atleta e menu de contexto
   --------------------------------------------------------------------------
   Cores amostradas dos prints de referência em docs/prints_comparativos/:

     moldura externa (vender/contrato) .. #2a401d
     painel interno ..................... #547f3b
     modal "Aposentar jogador" .......... #004469  (é azul, não verde)
     menu de clique direito ............. #eeeeee

   Os modais foram montados com estilo inline, por isso as regras abaixo
   precisam de !important para prevalecer.
   ========================================================================== */

#modal-vender-jogador .bf-modal-window,
#modal-novo-contrato .bf-modal-window {
  background: #2a401d !important;
  border: 1px solid #16240f !important;
  border-radius: 0 !important;
  padding: 14px !important;
}

#modal-vender-jogador .bf-modal-header,
#modal-novo-contrato .bf-modal-header {
  background: #547f3b !important;
  border-bottom: none !important;
  padding: 10px 12px 2px !important;
}

#modal-vender-jogador .bf-modal-content,
#modal-novo-contrato .bf-modal-content {
  background: #547f3b !important;
}

/* título em amarelo e centralizado, como no original */
#modal-vender-jogador .bf-modal-header h3,
#modal-novo-contrato .bf-modal-header h3 {
  color: #ffd600 !important;
  text-align: center;
}

#modal-aposentar-jogador .bf-modal-window {
  background: #004469 !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
}

#modal-aposentar-jogador .bf-modal-header,
#modal-aposentar-jogador .bf-modal-content {
  background: #004469 !important;
  border-bottom: none !important;
}

/* Botões cinza clássicos dos modais */
#modal-vender-jogador .bf-btn,
#modal-novo-contrato .bf-btn,
#modal-aposentar-jogador .bf-btn {
  background: linear-gradient(180deg, #fdfdfd 0%, #d4d4d4 100%) !important;
  color: #000000 !important;
  border: 1px solid #808080 !important;
  border-radius: 2px !important;
  font-weight: normal !important;
}

/* Menu do clique direito sobre o elenco */
#context-menu-player {
  background: #eeeeee !important;
  border: 1px solid #9a9a9a !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35) !important;
  padding: 2px 0 !important;
  font-size: 12px !important;
  color: #000000 !important;
  min-width: 190px;
}

#context-menu-player .ctx-item,
#context-menu-player > div {
  padding: 4px 14px !important;
  color: #000000;
  cursor: pointer;
  white-space: nowrap;
}

#context-menu-player .ctx-item:hover,
#context-menu-player > div:hover {
  background: #b8d0ea !important;
}

/* item indisponível fica cinza e não reage, como no jogo original */
#context-menu-player .ctx-item.disabled,
#context-menu-player > div.disabled {
  color: #9a9a9a !important;
  cursor: default;
  pointer-events: none;
}

#context-menu-player .ctx-sep {
  height: 1px;
  margin: 2px 0;
  background: #c4c4c4;
  padding: 0 !important;
}


/* Selo da janela de transferências (topo das telas de mercado) */
.transfer-window-badge {
  font-weight: bold;
  letter-spacing: .3px;
}
.transfer-window-badge.is-open {
  background: #0a7a3c;
  color: #ffffff;
  border: 1px solid #065c2d;
}
.transfer-window-badge.is-closed {
  background: #8c1f1f;
  color: #ffffff;
}


/* Barra superior dos modais de mercado, com o estado da janela */
.market-window-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, .28);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.market-window-hint {
  font-size: 11px;
  color: #d8d8d8;
}

/* ==========================================================================
   Telas "Configurar Ligas" e "Configurar Estaduais"
   --------------------------------------------------------------------------
   Layout espelhado do Brasfoot: uma linha numerada por divisão, campos lado a
   lado e rodapé explicando de onde vêm os valores padrão.
   ========================================================================== */
.cfg-liga-wrap,
.cfg-est-wrap {
  max-height: 400px;
  overflow-y: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cfg-liga-linha {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 6px 8px;
}

.cfg-liga-num {
  flex: 0 0 20px;
  font-weight: bold;
  color: #ffd600;
  text-align: center;
  padding-top: 4px;
}

.cfg-liga-campos {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  font-size: 11px;
}

.cfg-liga-campos label {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}

.cfg-liga-campos label.cfg-liga-check {
  justify-content: flex-start;
}

.cfg-liga-campos input[type="text"],
.cfg-liga-campos input:not([type]),
.cfg-liga-campos input[type="number"],
.cfg-liga-campos select {
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  font-size: 11px;
  background: #ffffff;
  color: #000000;
  border: 1px solid #808080;
}

.cfg-liga-campos input[type="checkbox"] {
  flex: 0 0 auto;
}

.cfg-liga-info {
  flex: 0 0 96px;
  font-size: 10px;
  color: #cfcfcf;
  text-align: right;
  padding-top: 4px;
}

.cfg-liga-rodape {
  margin-top: 8px;
  font-size: 11px;
  color: #cccccc;
}

/* Estaduais: um bloco por divisão, como as caixas coloridas do original */
.cfg-est-bloco {
  background: rgba(0, 0, 0, .28);
  border-left: 3px solid #ffd600;
  padding: 6px 10px;
}

.cfg-est-titulo {
  font-weight: bold;
  color: #ffd600;
  font-size: 12px;
  margin-bottom: 4px;
}

.cfg-est-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.cfg-est-linha label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cfg-est-linha select {
  padding: 2px 4px;
  font-size: 11px;
  background: #ffffff;
  color: #000000;
  border: 1px solid #808080;
}

/* ------------------------------------------------------------------ */
/* Janela de Opcoes — layout de duas colunas do Brasfoot original.     */
/* Rotulos e listas vieram de a/fB.class no executavel.                */
/* ------------------------------------------------------------------ */
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.opt-col { display: flex; flex-direction: column; gap: 6px; }

.opt-linha {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; font-size: 11px;
}
.opt-select {
  width: 168px; padding: 2px 4px; font-size: 11px; font-family: inherit;
  border: 1px solid #a0a0a0; background: #fff;
}
.opt-chk {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; cursor: pointer; line-height: 1.5;
}
.opt-sep { border-top: 1px solid #cfcfcf; margin: 8px 0 4px; }
.opt-titulo { font-size: 11px; font-weight: bold; margin-bottom: 6px; }

.opt-cores { display: flex; gap: 4px; }
.opt-cores i {
  width: 17px; height: 15px; display: block; cursor: pointer;
  border: 1px solid #808080;
}
.opt-cores i.sel { outline: 2px solid #00b754; outline-offset: 1px; }

.opt-caixa {
  border: 1px solid #a0a0a0; background: #fff; overflow-y: auto;
  font-size: 11px;
}
.opt-lista { height: 118px; }
.opt-item { padding: 2px 6px; cursor: pointer; }
.opt-item:hover { background: #e8e8e8; }
/* selecao amarela com texto preto, como no jogo */
.opt-item.sel { background: #ffff00; color: #000; }

.opt-transfer {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px;
  align-items: center;
}
.opt-transfer-cab {
  font-size: 10px; font-weight: bold; background: #eeeeee;
  border: 1px solid #a0a0a0; border-bottom: none; padding: 2px 6px;
}
.opt-transfer-btns { display: flex; flex-direction: column; gap: 6px; }
.opt-transfer-btns .bf-btn { padding: 2px 8px; font-size: 11px; }



/* O "Tema de cores das janelas" pinta o cabecalho dos modais; a "Cor nos
   placares humanos" pinta o placar do time do jogador. Ambos sao trocados
   por bindOpcoes() gravando estas duas variaveis no <html>. */
:root { --bf-tema: #1a5276; --bf-cor-placar: #111111; }
html.bf-tema-escolhido .bf-modal-header { background: var(--bf-tema); }
html.bf-tema-escolhido .bf-modal-header h3 { color: #fff; }
.placar-humano, .match-score.humano { color: var(--bf-cor-placar); font-weight: bold; }

/* Tela "Adicionar tecnico humano" (a/bV.class) */
.ac-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ac-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ac-rot { font-size: 12px; color: #fff; }
.ac-campo {
  width: 250px; padding: 4px 6px; font-size: 12px; font-family: inherit;
  background: #082238; color: var(--brand-accent); border: 1px solid #1a5276;
}
.ac-chk { font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.ac-sel { width: 250px; display: flex; align-items: center; gap: 8px; }
.ac-sel img { width: 22px; height: 22px; object-fit: contain; }
.ac-sel strong { color: var(--brand-accent); font-size: 13px; }
.ac-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }

/* Tela "marcar amistoso" (a/h.class) */
.am-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.am-rot { font-size: 11px; font-weight: bold; margin-bottom: 4px; }
.am-campo {
  width: 100%; padding: 4px 6px; font-size: 11px; font-family: inherit;
  border: 1px solid #a0a0a0; background: #fff;
}
.am-arvore {
  height: 170px; overflow-y: auto; border: 1px solid #a0a0a0;
  background: #fff; font-size: 11px;
}
.am-ramo > summary { padding: 4px 6px; cursor: pointer; background: #eeeeee; font-weight: bold; }
.am-time { padding: 2px 6px 2px 20px; cursor: pointer; }
.am-time:hover { background: #e8e8e8; }
.am-time.sel { background: #ffff00; color: #000; }
.am-escolhido {
  border: 1px solid #a0a0a0; background: #fff; padding: 4px 6px;
  font-size: 11px; min-height: 18px;
}
#am-propor { margin-top: 12px; width: 100%; }
.am-lista { margin-top: 4px; max-height: 90px; overflow-y: auto; }
.am-item { font-size: 11px; padding: 2px 0; }


/* "Calendario - <clube>" (a/L.class + colunas de b/i.class) */
.cal-topo { margin-bottom: 6px; }
.cal-campo {
  width: 220px; padding: 4px 6px; font-size: 11px; font-family: inherit;
  border: 1px solid #a0a0a0; background: #fff;
}
.cal-wrap { max-height: 340px; overflow-y: auto; border: 1px solid #a0a0a0; }
.cal-tabela { width: 100%; border-collapse: collapse; font-size: 11px; background: #fff; color: #000; }
.cal-tabela th {
  background: #eeeeee; text-align: left; padding: 4px 6px;
  border-bottom: 1px solid #a0a0a0; position: sticky; top: 0;
}
.cal-tabela td { padding: 2px 6px; border-bottom: 1px solid #f0f0f0; }
.cal-casa { text-align: right; }
.cal-fora { text-align: left; }
.cal-placar { text-align: center; width: 46px; color: #555; }
.cal-num { text-align: right; white-space: nowrap; }
/* proxima partida destacada em amarelo, como na lista do jogo */
.cal-tabela tr.cal-proxima td { background: #ffff00; color: #000; font-weight: bold; }
.cal-vazio { padding: 10px; color: #888; font-size: 11px; }

/* ------------------------------------------------------------------ */
/* Cores do clube na tela principal.                                    */
/* No Brasfoot a moldura e a lateral usam a cor do time — Flamengo      */
/* deixa a tela vermelha, Palmeiras verde. As variaveis sao calculadas  */
/* em web/js/ui/cores_clube.js, que escolhe texto preto ou branco pela  */
/* luminancia, para nunca sair claro sobre claro.                       */
/* ------------------------------------------------------------------ */
html.tem-cor-clube .main-game-layout { background-color: var(--clube-cor); }

/* barra lateral do clube */
html.tem-cor-clube .sidebar-left-card { color: var(--clube-texto); }
html.tem-cor-clube .sidebar-team-info { background: var(--clube-veu); }
html.tem-cor-clube .sidebar-team-text h3 { color: var(--clube-texto); }
html.tem-cor-clube .sidebar-team-text p { color: var(--clube-texto-fraco); }
html.tem-cor-clube .sidebar-balance-row,
html.tem-cor-clube .sidebar-confidence-box,
html.tem-cor-clube .sidebar-next-match,
html.tem-cor-clube .sidebar-mini-icons { color: var(--clube-texto); }
html.tem-cor-clube .sidebar-confidence-box small,
html.tem-cor-clube .sidebar-next-match small,
html.tem-cor-clube .sidebar-left-card small { color: var(--clube-texto-fraco); }

/* o conteudo branco fica emoldurado pela cor do time, como no jogo */
html.tem-cor-clube .central-squad-table-wrap {
  border: 3px solid var(--clube-cor-borda);
}

/* caixas escuras da lateral herdam o veu, nao um azul fixo */
html.tem-cor-clube .sidebar-confidence-box,
html.tem-cor-clube .sidebar-next-match { background: var(--clube-veu); }
html.tem-cor-clube .sidebar-left-card .valor-destaque,
html.tem-cor-clube .sidebar-left-card [style*="ffd600"] { color: var(--clube-destaque) !important; }

/* Ordenacao da lista de jogadores: cabecalho clicavel com seta,
   como o filtro crescente/decrescente do Brasfoot. */
.squad-classic-table thead th.ord-clicavel { cursor: pointer; user-select: none; }
.squad-classic-table thead th.ord-clicavel:hover { background: #dcdcdc; }
.squad-classic-table thead th.ord-ativa::after { content: " \25B2"; font-size: 9px; }
.squad-classic-table thead th.ord-ativa.ord-desc::after { content: " \25BC"; }

/* "Financas - <ano>" (a/cW.class) */
.fin-quadro { background: #fff; color: #000; border: 1px solid #a0a0a0; padding: 10px 14px; }
.fin-titulo { text-align: center; font-weight: bold; font-size: 12px; margin-bottom: 4px; }
.fin-linha { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; }
.fin-linha.fin-forte { font-weight: bold; }
.fin-resumo { font-size: 11px; margin: 10px 2px; line-height: 1.7; }
.fin-emprestimo {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  padding: 10px 12px; font-size: 11px; line-height: 1.7;
}
.fin-emprestimo-tit { font-weight: bold; margin-bottom: 4px; }
.fin-botoes { display: flex; gap: 10px; margin-top: 8px; }
.fin-botoes .bf-btn { flex: 1; }
.fin-vazio, .cf-vazio { padding: 12px; font-size: 11px; color: #888; text-align: center; }

/* Confronto do proximo jogo */
.cf-topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.cf-lado { text-align: center; }
.cf-lado img { width: 52px; height: 52px; object-fit: contain; margin: 4px 0; }
.cf-nome { font-weight: bold; font-size: 12px; }
.cf-rot { font-size: 11px; font-weight: bold; }
.cf-val { font-size: 11px; }
.cf-meio { font-size: 12px; white-space: nowrap; }
.cf-wrap { max-height: 190px; overflow-y: auto; border: 1px solid #a0a0a0; margin-top: 4px; }
.cf-tabela { width: 100%; border-collapse: collapse; font-size: 11px; background: #fff; color: #000; }
.cf-tabela th { background: #eeeeee; text-align: left; padding: 4px 6px; border-bottom: 1px solid #a0a0a0; }
.cf-tabela td { padding: 2px 6px; border-bottom: 1px solid #f0f0f0; }

/* Central de Mensagens */
.msg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; }
.msg-wrap { height: 210px; overflow-y: auto; border: 1px solid #a0a0a0; background: #fff; }
.msg-tabela { width: 100%; border-collapse: collapse; font-size: 11px; color: #000; }
.msg-tabela th { background: #eeeeee; text-align: left; padding: 4px 6px; border-bottom: 1px solid #a0a0a0; }
.msg-tabela td { padding: 2px 6px; }
.msg-item { cursor: pointer; }
.msg-item:hover { background: #e8e8e8; }
.msg-item.sel { background: #ffff00; color: #000; }
.msg-corpo {
  height: 210px; overflow-y: auto; border: 1px solid #a0a0a0;
  background: #eeeeee; color: #000; padding: 8px; font-size: 11px; line-height: 1.5;
}
.sb-msg-badge { cursor: pointer; font-size: 11px; }


/* ================================================================== */
/* Correcoes de contraste.                                            */
/* Medidas com luminancia relativa (WCAG 2.1) abrindo cada modal e    */
/* comparando cada texto com o fundo real herdado. Alvo: 4.5.         */
/* ================================================================== */

/* 1. .navy-table declarava color:#000 sem fundo, entao o texto preto caia
      sobre o azul-escuro do modal. O cabecalho ja era claro (#e6e6e6):
      faltava o corpo. 30+ celulas ilegiveis em Juniores, Procura e Tecnicos. */
.navy-table { background: #ffffff; }
.navy-table tbody { background: #ffffff; }
.navy-table td { color: #000000; }
.navy-table tr.selected td { color: #000000; }

/* 2. Botao verde: branco sobre #2ecc71 dava 2.45. Escurecido para ~5.0. */
.bf-btn-green {
  background: linear-gradient(180deg, #229954 0%, #1a7040 100%);
  border-color: #14532d;
}
.bf-btn-green:hover {
  background: linear-gradient(180deg, #27ae60 0%, #1e8449 100%);
}

/* 3. Acentos que so funcionam em fundo escuro, quando caem em tabela clara.
      O amarelo da marca sobre branco da 1.41 — vira ambar escuro. */
.navy-table td [style*="ffd600"],
.navy-table td[style*="ffd600"],
.squad-classic-table td[style*="ffd600"] { color: #7a5c00 !important; }
.navy-table td [style*="27ae60"], .navy-table td[style*="27ae60"],
.navy-table td [style*="2ecc71"], .navy-table td[style*="2ecc71"] { color: #157347 !important; }
.navy-table td [style*="aaaaaa"], .navy-table td[style*="#aaa"] { color: #5a5a5a !important; }

/* 4. Barras claras da prancheta herdavam texto branco do modal. */
#modal-escalar [style*="#f0f0f0"],
#modal-escalar [style*="#e0e0e0"],
#modal-escalar [style*="#c0c0c0"] { color: #1a1a1a; }
#modal-escalar [style*="#f0f0f0"] strong,
#modal-escalar [style*="#e0e0e0"] strong { color: #000000; }

/* 5. Listas da janela de Opcoes: caixa branca herdando texto branco. */
.opt-caixa, .opt-item, .opt-escolhido { color: #000000; }
.opt-transfer-cab { color: #1a1a1a; }
.opt-select, .am-campo, .cal-campo { color: #000000; }
.am-arvore, .am-time, .am-escolhido, .am-ramo > summary { color: #000000; }
.msg-tabela td, .msg-tabela th, .msg-corpo { color: #000000; }
.cf-tabela td, .cf-tabela th { color: #000000; }
.cal-tabela td, .cal-tabela th { color: #000000; }
.fin-quadro, .fin-quadro * { color: #000000; }

/* 6. Linha selecionada amarela: texto preto sempre, nunca amarelo sobre amarelo. */
.navy-table tr.selected td,
.navy-table tr.selected td * { color: #000000 !important; }

/* 7. Ultimo caso: cinza #aaa sobre branco na lista de ligas do multiplayer. */
#modal-multiplayer [style*="#aaa"], #modal-multiplayer [style*="#aaaaaa"] { color: #5a5a5a !important; }

/* ------------------------------------------------------------------ */
/* Galeria de times: arvore de dois niveis + painel do jogador.         */
/* ------------------------------------------------------------------ */
.times-tree-panel { background: #ffffff; color: #000; font-size: 11px; overflow-y: auto; }
.tv-no { }
.tv-titulo {
  cursor: pointer; padding: 2px 6px; font-weight: bold; user-select: none;
  white-space: nowrap;
}
.tv-titulo:hover { background: #e8e8e8; }
.tv-time { cursor: pointer; padding: 1px 5px 1px 18px; white-space: nowrap; }
.tv-time:hover { background: #e8e8e8; }
.tv-time.sel { background: #ffff00; color: #000; }

.tv-flag { text-align: center; color: #157347; font-weight: bold; }

/* painel do jogador (abas Info / Carreira) */
.tv-painel {
  background: #ffffff; color: #000; border: 1px solid #a0a0a0;
  margin-top: 6px; font-size: 11px;
}
.tv-p-cab { background: #eeeeee; padding: 4px 6px; font-weight: bold; border-bottom: 1px solid #a0a0a0; }
.tv-abas { display: flex; gap: 2px; padding: 4px 6px 0; }
.tv-aba {
  font-family: inherit; font-size: 11px; padding: 2px 12px; cursor: pointer;
  border: 1px solid #a0a0a0; border-bottom: none; background: #dcdcdc; color: #000;
}
.tv-aba.sel { background: #ffffff; font-weight: bold; }
.tv-p-corpo { border-top: 1px solid #a0a0a0; padding: 6px 8px; min-height: 74px; }
.tv-p-linha { display: flex; gap: 16px; padding: 2px 0; }
.tv-p-car { margin-top: 4px; font-style: italic; }

/* Menu de contexto do jogador (itens de a/eg.class) */
.jog-menu {
  position: fixed; display: none; z-index: 9999;
  background: #eeeeee; color: #000; border: 1px solid #808080;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.4); font-size: 11px; min-width: 176px;
}
.jog-menu.aberto { display: block; }
.jog-menu-item { padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.jog-menu-item:hover { background: #ffff00; }

/* ------------------------------------------------------------------ */
/* Lateral do clube: como o fundo agora e a cor do time, nenhum texto   */
/* pode ter cor fixa. Tudo herda --clube-texto, que ja e calculado por  */
/* contraste. Elementos com fundo proprio (badges, barras, botoes,      */
/* tabelas) sao poupados, senao perderiam o proprio estilo.             */
/* ------------------------------------------------------------------ */
html.tem-cor-clube .sidebar-left-card :not(.bf-btn):not(.bf-btn *):not(.player-details-card):not(.player-details-card *):not(.energy-bar):not(.sb-msg-badge) {
  color: var(--clube-texto);
}
/* acentos (amarelo da marca) viram o destaque calculado do clube */
/* o amarelo fixo vira o destaque do clube — menos dentro da ficha, que tem
   veu escuro proprio e e tratada logo abaixo */
html.tem-cor-clube .sidebar-left-card > [style*="ffd600"],
html.tem-cor-clube .sidebar-left-card > * > [style*="ffd600"],
html.tem-cor-clube .sidebar-left-card .valor-destaque {
  color: var(--clube-destaque) !important;
}
/* caixas internas ganham o veu para se separarem do fundo do clube */
html.tem-cor-clube #card-selected-player,
html.tem-cor-clube .sidebar-next-match,
html.tem-cor-clube .sidebar-confidence-box {
  background: var(--clube-veu);
  border: 1px solid var(--clube-cor-borda);
}
/* o selo de patrocinio tem fundo proprio e precisa de contraste garantido */
html.tem-cor-clube #sb-sponsor-badge {
  background: rgba(0,0,0,0.55); color: #fff !important;
  padding: 2px 6px; border-radius: 3px;
}
html.tem-cor-clube .sb-msg-badge { color: var(--clube-texto) !important; }

/* A ficha do jogador tem veu escuro proprio, entao NAO pode herdar a cor de
   texto do clube — com Flamengo o preto caia sobre vermelho escuro (2.3).
   Ela fica com texto claro, independente da cor do time. */
html.tem-cor-clube .player-details-card,
html.tem-cor-clube .sidebar-left-card .player-details-card *,
html.tem-cor-clube .sidebar-left-card .player-details-card [style*="ffd600"] {
  color: #f2f2f2 !important;
}
html.tem-cor-clube .player-details-card th {
  color: #ffffff !important;
}
/* numeros de destaque: verde claro, que contrasta com o veu escuro */
html.tem-cor-clube .player-details-card [id^="det-stat-"] { color: #7ee2a8 !important; }
html.tem-cor-clube .player-details-card #det-player-name { color: var(--clube-destaque) !important; }

/* barra de energia: branco sobre #00b754 dava 2.66 */
.energy-bar, .energy-badge-green { background: #157347 !important; color: #ffffff; }
/* nota do jogador: verde sobre verde */
.score-badge-sofa { color: #ffffff !important; }
.score-badge-sofa.score-good { background: #157347 !important; }
.score-badge-sofa.score-great { background: #0b5c36 !important; }
.score-badge-sofa.score-avg { background: #8a6d00 !important; }
.score-badge-sofa.score-bad { background: #9c2a1e !important; }

/* Nome do jogador na ficha: fica no cabecalho escuro do card, entao usa o
   destaque claro e nao o do clube (com Flamengo dava preto sobre preto). */
html.tem-cor-clube #det-player-name,
html.tem-cor-clube .player-details-card #det-player-name { color: #ffd600 !important; }

/* Item de menu cuja acao ainda nao tem contrato no engine: visivel (como no
   original) mas claramente indisponivel. */
.jog-menu-item.sem-engine { color: #7a7a7a; font-style: italic; }
.jog-menu-item.sem-engine:hover { background: #e0e0e0; }

/* ==================================================================== */
/* CAMADA RESPONSIVA ESTRUTURAL                                          */
/*                                                                       */
/* Medido antes de escrever: em 1920/1366/1024 a interface tem ZERO      */
/* problemas. Abaixo de 1024 ela quebra por duas causas-raiz:            */
/*                                                                       */
/*   1. .game-body-grid fica "240px 1fr" em qualquer largura. Em 320px   */
/*      isso vira "240px 42px": a lateral mantem os 240 e a area da      */
/*      tabela colapsa para 42px. Sozinho respondia por ~350 das 514     */
/*      ocorrencias medidas.                                             */
/*   2. 9 modais sem max-height e 1 sem max-width estouram a viewport.   */
/*                                                                       */
/* A densidade NAO muda: linha de 22px e fonte de 11,5px sao a           */
/* identidade do Brasfoot e continuam iguais em todas as larguras. O que */
/* muda e o ARRANJO — empilhar em vez de espremer.                       */
/*                                                                       */
/* Dois pontos de quebra estruturais, so:                                */
/*   <= 1023px  tablet e abaixo: empilha, alvos de toque maiores         */
/*   <= 767px   celular: lateral recolhivel                              */
/* ==================================================================== */

/* --- Modais: nenhum pode passar da viewport ------------------------- */
/* Uma regra para todas as janelas, em vez de acertar 28 modais um a um. */
.bf-modal-window,
.bf-dialog-box,
.tabelas-window-container,
.estadio-window-container,
.juniores-window-container,
.times-window-container,
.procura-window-container,
.postmatch-modal-container,
.bf-match-fullscreen,
.menu-box-classic,
.navy-panel-box {
  max-width: min(100%, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

/* o corpo rola por dentro; cabecalho e rodape ficam sempre alcancaveis */
.bf-modal-content,
.tabelas-body-grid,
.times-window-grid,
.postmatch-modal-container > *:not(.bf-modal-header):not(.bf-modal-footer) {
  overflow-y: auto;
  min-height: 0;
}
.bf-modal-header,
.bf-modal-footer,
.market-window-topbar,
.procura-filters-panel { flex: 0 0 auto; }

/* --- Tablet e abaixo ------------------------------------------------ */
@media (max-width: 1023px) {
  /* a lateral vira faixa no topo; a tabela ganha a largura inteira */
  .game-body-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .sidebar-left-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    align-items: start;
  }
  /* a ficha do jogador ocupa a linha toda: e a caixa mais alta */
  .player-details-card { grid-column: 1 / -1; }

  /* tabelas densas rolam na horizontal em vez de cortar coluna.
     Nenhuma informacao e escondida — a densidade e preservada. */
  .central-squad-table-wrap,
  .navy-table-wrap,
  .cal-wrap,
  .cf-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .squad-classic-table,
  .navy-table,
  .cal-tabela,
  .cf-tabela { min-width: max-content; }

  /* grids de duas colunas nao cabem: empilham */
  .times-window-grid,
  .tabelas-body-grid,
  .opt-grid,
  .am-grid,
  .msg-grid,
  .navy-grid-2col { grid-template-columns: 1fr; }

  /* a arvore da galeria vira uma faixa de altura limitada */
  .times-tree-panel { max-height: 190px; }

  /* alvo de toque: so aqui, nunca no desktop */
  .bf-btn,
  .bf-modal-close-btn,
  .tabelas-tab-btn,
  .bf-player-action-btn,
  .bf-btn-link,
  .toolbar-btn,
  .bf-dropdown-item,
  .jog-menu-item,
  .tv-time,
  .opt-item { min-height: 32px; }
  /* o X e quadrado: cresce nos dois lados para virar alvo de dedo */
  .bf-modal-close-btn { min-width: 32px; }
  .bf-btn { padding-top: 8px; padding-bottom: 8px; }
  .tv-time, .opt-item, .bf-dropdown-item, .jog-menu-item {
    display: flex; align-items: center;
  }
  /* caixas de marcacao tambem precisam de area */
  input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; }
}

/* --- Celular -------------------------------------------------------- */
@media (max-width: 767px) {
  /* a lateral e informacao de apoio: recolhe e o jogador abre quando quer */
  .sidebar-left-card { grid-template-columns: 1fr 1fr; }
  .sidebar-left-card > .player-details-card { grid-column: 1 / -1; }

  /* a barra de ferramentas rola em vez de espremer os icones */
  .toolbar-icons-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .toolbar-menu-wrapper { flex: 0 0 auto; }

  /* modais ocupam quase tudo: espremer margem so tira espaco util */
  .bf-modal-window,
  .bf-dialog-box,
  .tabelas-window-container,
  .times-window-container,
  .procura-window-container,
  .juniores-window-container,
  .estadio-window-container,
  .postmatch-modal-container { max-width: 98vw; max-height: 94vh; }

  /* rodape de modal com muitos botoes quebra em vez de estourar */
  .bf-modal-footer { flex-wrap: wrap; gap: 6px; }
  .bf-modal-footer > * { flex: 1 1 auto; }
}

/* --- Barras de cabecalho que nao cabem em tela estreita -------------- */
/* Medido: em 390px as abas de Tabelas (nacional/internacional/selecoes/  */
/* estadual/regional) e a grade de filtros da Procura empurravam ate 499px, */
/* levando junto o botao de fechar para fora da tela.                     */
@media (max-width: 1023px) {
  .tabelas-top-tabs {
    flex-wrap: wrap;
    gap: 6px;
    row-gap: 6px;
  }
  .tabelas-top-tabs > div { flex-wrap: wrap; }
  .tabelas-tab-btn { flex: 0 0 auto; }

  .procura-filters-grid { grid-template-columns: 1fr 1fr; }
  .procura-filters-panel > div { flex-wrap: wrap; gap: 8px; }

  /* o X nunca pode sair da tela */
  .bf-modal-close-btn { flex: 0 0 auto; margin-left: auto; }
}

@media (max-width: 767px) {
  .procura-filters-grid { grid-template-columns: 1fr; }
  .tabelas-top-tabs { flex-direction: column; align-items: stretch; }

  /* linhas de formulario empilham rotulo e campo */
  .ac-linha, .opt-linha {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .ac-campo, .opt-select { width: 100%; }
  .ac-sel { width: 100%; }
}

/* --- Rolagem da pagina em tela estreita ------------------------------ */
/* style.css:45 fixa body { overflow:hidden; height:100vh }, o que faz    */
/* sentido no desktop (a interface cabe inteira). Empilhada no celular,   */
/* porem, a tela passa de 1000px e os ultimos ~500px ficavam             */
/* INALCANCAVEIS — nao havia como rolar ate os botoes de baixo.          */
@media (max-width: 1023px) {
  html, body { overflow-y: auto; height: auto; min-height: 100vh; }
  .main-game-layout { min-height: auto; }
  .game-screen.active { overflow-y: visible; }
}

/* --- Lateral em telas muito estreitas -------------------------------- */
/* Em 320px duas colunas de 150px + gap ja nao cabem, e nomes longos de   */
/* patrocinador ("Boi Vermelho Energy") empurravam o conteudo para fora.  */
@media (max-width: 400px) {
  .sidebar-left-card { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  /* nome longo encolhe em vez de empurrar a linha inteira */
  #sb-sponsor-badge, #sb-team-name, #sb-next-opp-name, .sidebar-team-text p {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar-balance-row, .sidebar-confidence-box > div, .sidebar-team-info {
    min-width: 0;
    flex-wrap: wrap;
  }
  .sidebar-left-card > * { min-width: 0; }
}

/* --- Tela de partida ao vivo em tela estreita ------------------------ */
/* Medido em 320px: .live-match-header tem 509px de conteudo numa caixa   */
/* de 300px. E uma linha horizontal (escudo | placar | escudo | tabela de */
/* estatisticas) que nao quebrava — causa unica das 25 ocorrencias.       */
@media (max-width: 767px) {
  /* toda linha flex dentro da partida ao vivo pode quebrar e encolher.
     Sem o min-width:0 o conteudo interno impede o flex de reduzir, e a
     linha estoura mesmo com flex-wrap ligado. */
  .bf-match-fullscreen [class*="live-"],
  #modal-intervalo-tatica [class*="tactics-"] { min-width: 0; }
  .live-match-header,
  .live-match-topbar,
  .live-match-scoreboard-row,
  .live-round-matches-board,
  .live-events-row,
  .tactics-bottom-actionbar,
  .tactics-dropdown-group,
  .tactics-right-sidebar {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  /* a tabela de estatisticas desce para a linha inteira, abaixo do placar */
  .live-header-stats-table {
    flex: 1 0 100%;
    width: 100%;
    order: 10;
  }
  .live-header-stats-table td { padding: 2px 4px; }
  .stat-label { text-align: center; }

  /* escudo e nome do time nao podem empurrar a linha */
  .live-team-badge-wrap { min-width: 0; flex: 1 1 auto; }
  .live-team-bar {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .live-team-shield-img { max-width: 100%; height: auto; }

  /* o placar continua sendo o elemento dominante */
  .live-scoreboard, .live-score-box { flex: 0 0 auto; }

  /* controles de velocidade quebram em vez de estourar */
  .live-speed-controls, .bf-match-fullscreen .bf-modal-footer {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* --- Prancheta do intervalo em tela estreita -------------------------- */
/* .tactics-interval-grid e um grid de 3 colunas (banco 180 | campo 24 |  */
/* lateral 260) = 494px dentro de 300px. Empilha; a barra de acoes e o    */
/* grupo de seletores quebram em vez de estourar.                         */
@media (max-width: 767px) {
  .tactics-interval-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
  }
  .tactics-bench-panel,
  .tactics-pitch-box,
  .tactics-right-sidebar { width: auto; max-width: 100%; }
  .tactics-pitch-box { min-height: 180px; }
  .tactics-bottom-actionbar { flex-wrap: wrap; row-gap: 6px; }
  .tactics-dropdown-group { flex-wrap: wrap; width: 100%; }
  .tactics-dropdown-group > * { flex: 1 1 130px; min-width: 0; }
  #btn-tactics-resume { flex: 1 1 100%; }
}

/* Naming rights — tela so de leitura ate existir contrato no engine. */
.nr-aviso {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 10px 12px; font-size: 11px; line-height: 1.55;
}
.nr-atual {
  background: #ffffff; color: #000; border: 1px solid #a0a0a0;
  padding: 10px 12px; margin-top: 10px;
}
.nr-rot { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.nr-nome { font-size: 14px; font-weight: bold; margin-top: 2px; }
.nr-cap { font-size: 11px; color: #444; margin-top: 2px; }

/* Naming rights — tela so de leitura ate existir contrato no engine.
   A versao anterior gravava por cima de team.stadium, destruindo o nome
   factual. Ver docs/gameplay/NAMING_RIGHTS_SPEC.md, bloco A. */

/* ==================================================================== */
/* ESTADOS VAZIOS                                                        */
/* Tabela sem linhas mostrava uma caixa branca em branco, sem explicar   */
/* nada. Resolvido em CSS puro (tbody:empty), o que cobre TODA tabela do */
/* jogo — inclusive as que ainda nem existem — sem tocar em JS.          */
/* ==================================================================== */
.navy-table tbody:empty::before,
.squad-classic-table tbody:empty::before,
.cal-tabela tbody:empty::before,
.cf-tabela tbody:empty::before,
.msg-tabela tbody:empty::before,
.bf-classic-table tbody:empty::before {
  content: "Nenhum registro para mostrar.";
  display: block;
  padding: 14px 12px;
  color: #666666;
  font-size: 11px;
  text-align: center;
  font-style: italic;
}
/* mensagens especificas onde a razao do vazio e conhecida */
#tbody-proc-results:empty::before { content: "Nenhum jogador encontrado com estes filtros."; }
#tbody-times-browser-squad:empty::before { content: "Este clube não tem elenco cadastrado."; }
#tbody-modal-standings:empty::before { content: "A competição ainda não começou."; }
#tbody-squad-classic:empty::before { content: "Nenhum jogador no elenco."; }
#opt-so-resultados:empty::before {
  content: "Arraste competições para cá com o botão >>.";
  display: block; padding: 10px; color: #666; font-size: 11px;
  text-align: center; font-style: italic;
}
#naming-rights-offers-container:empty::before { content: "Sem propostas no momento."; }

/* Lista (nao-tabela) vazia */
.am-arvore:empty::before, .times-tree-panel:empty::before, .opt-caixa:empty::before {
  content: "Nada a mostrar.";
  display: block; padding: 12px; color: #666; font-size: 11px;
  text-align: center; font-style: italic;
}

/* --- Monitor baixo (1280x720, 1366x768) ------------------------------ */
/* Medido em 1280x720: screen-main-game ocupa 727px numa viewport de 720, */
/* e o desktop mantem body{overflow:hidden}. Os 7px que sobram levam      */
/* junto os controles do rodape, que ficam inalcancaveis.                 */
/* Consulta por ALTURA, nao por largura: o problema e vertical e atinge   */
/* laptops comuns, nao telas estreitas.                                   */
@media (max-height: 800px) {
  html, body { overflow-y: auto; height: auto; min-height: 100vh; }
  .main-game-layout { min-height: 100vh; }
}

/* Bola de Ouro: colunas que dependem de dado que ainda nao existe. */
.bdo-nome { font-weight: bold; }
.bdo-indisponivel { color: #8a8a8a; text-align: center; }

/* Naming rights: mesa de propostas.
   A tela era so de leitura enquanto o contrato nao existia no engine. O
   modulo `naming_rights.js` ja guardava o contrato em `careerNamingRights`
   e preservava o nome factual da praca, entao a negociacao voltou. */
.nr-oferta {
  background: #ffffff; color: #000; border: 1px solid #a0a0a0;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.nr-oferta-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.nr-marca { font-size: 13px; font-weight: bold; }
.nr-compat { font-size: 10px; color: #fff; background: #1a7040; padding: 1px 6px; white-space: nowrap; }
.nr-compat.baixa { background: #a33; }
.nr-comercial { font-size: 12px; color: #222; }
.nr-termos { font-size: 11px; color: #444; display: flex; gap: 14px; flex-wrap: wrap; }
.nr-acoes { display: flex; gap: 6px; margin-top: 2px; }
.nr-acoes button { font-size: 11px; padding: 3px 10px; cursor: pointer; }
.nr-vigente {
  background: #14532d; color: #fff; border: 1px solid #27ae60;
  padding: 10px 12px; margin-bottom: 4px;
}
.nr-vigente .nr-rot { color: #9fdcb8; }
.nr-vigente .nr-cap { color: #cfe9d9; }
.nr-factual { font-size: 11px; color: #444; margin-top: 6px; font-style: italic; }

/* Estado do carregamento do banco, no menu inicial.
   A interface passou a ser ligada antes do download (ver `init()` em app.js):
   sem esta faixa, a tela ficaria pronta e os itens de menu recusariam o
   clique sem explicar por que. */
.estado-banco {
  margin: 10px auto 0; max-width: 420px;
  padding: 8px 12px; font-size: 12px; line-height: 1.5;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; text-align: center;
}
.estado-banco.carregando {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  color: #e8eef2;
}
.estado-banco.erro {
  background: #5a1d1d; border: 1px solid #a33; color: #ffe9e9;
}
.estado-banco.erro button {
  font-size: 11px; padding: 3px 10px; cursor: pointer;
  background: #d9534f; color: #fff; border: 1px solid #a33;
}

/* ==================================================================== */
/* PATROCINADORES                                                       */
/* Os logos sao SVG gerados em `ui/logo_patrocinio.js` — sem arquivo    */
/* externo, entao passam na CSP e escalam em qualquer tamanho.          */
/* ==================================================================== */
.patro-card {
  background: #082238; border: 2px solid #1a5276; border-radius: 5px;
  padding: 10px 12px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: border-color .15s, background .15s;
  flex-wrap: wrap;
}
.patro-card:hover, .patro-card:focus-within {
  border-color: var(--brand-accent, #00a651); background: #0b2c48;
}
.patro-marca { flex: 0 0 auto; line-height: 0; }
.patro-marca svg { display: block; max-width: 100%; height: auto; }
.patro-info { flex: 1 1 190px; min-width: 0; }
.patro-slogan {
  font-size: 11px; color: #cfe0ee; font-style: italic;
  margin-bottom: 3px; line-height: 1.35;
}
.patro-valores { font-size: 11.5px; color: #eef5fa; line-height: 1.45; }
.patro-valores strong { color: #ffffff; }
.patro-bonus { display: block; color: #9fd8b4; }
.patro-assinar { flex: 0 0 auto; padding: 6px 14px; font-weight: bold; }

/* Selo do patrocinio na barra lateral: simbolo + nome alinhados. */
#sb-sponsor-badge { display: inline-flex; align-items: center; gap: 5px; }
#sb-sponsor-badge svg { flex: 0 0 auto; }

/* O cartao de proposta de naming rights passa a abrir com o logo. */
.nr-marca { line-height: 0; }
.nr-marca svg { display: block; max-width: 100%; height: auto; }

@media (max-width: 767px) {
  .patro-card { gap: 9px; }
  .patro-assinar { width: 100%; }
}

/* O logo nunca deve estourar o contêiner que o recebe. */
.logo-patro { display: block; max-width: 100%; height: auto; }

/* Finanças: previsão separada do realizado.
   As linhas de Receitas/Despesas mostram o que ja passou pelo ledger. A folha
   e o patrocinio sao compromissos conhecidos, nao caixa — apareciam somados
   como se ja tivessem sido pagos e recebidos, dando um "Saldo" na rodada 1. */
.fin-previsto {
  margin-top: 10px; padding: 8px 10px;
  background: rgba(255,255,255,0.06);
  border-left: 3px solid rgba(255,255,255,0.28);
}
.fin-previsto .fin-titulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  opacity: .8; margin-bottom: 4px;
}

/* Foco visivel nos itens de menu, que sao <div role="button">.
   Sem contorno, quem navega por teclado nao enxerga onde esta. */
.menu-item-btn:focus-visible,
.menu-nostalgia-banner:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #ffd400;
  outline-offset: 2px;
}

/* Cor de texto padrao da lateral, valendo tambem sem tema de clube.
   16 declaracoes `color:` inline moravam no HTML da lateral e venciam
   qualquer regra de folha de estilo — inline so perde para `!important`. Com
   elas, o tema do clube nunca conseguia garantir contraste: o branco fixo
   ficava sobre o vermelho do Flamengo dando 3,64:1. As neutras sairam do
   HTML; esta regra assume o lugar delas. */
.sidebar-left-card { color: #f2f5f7; }
.sidebar-left-card small { color: #cfd8de; }

/* O selo do patrocinio desenha `<simbolo><span>Nome</span>`. Sem isto o span
   ficava branco dentro de um pai que o tema pintou de preto — o nome sumia
   contra a cor do clube. */
#sb-sponsor-badge span { color: inherit; }

/* Logo do patrocinador dentro da caixa de dialogo. */
.bf-dialog-marca {
  display: none; justify-content: center; margin: 0 0 10px;
}
.bf-dialog-marca svg { display: block; max-width: 100%; height: auto; }

/* Arte da marca no lugar do nome escrito. O elemento mantem `data-brand-name`:
   se o arquivo do logo faltar, o texto volta sozinho (ver applyBrandToDOM). */
.brand-logo-img {
  display: block;
  max-width: min(260px, 62vw);
  max-height: 96px;
  height: auto;
  margin: 0 auto 2px;
}
@media (max-width: 767px) {
  .brand-logo-img { max-height: 74px; }
}

/* Arte pronta do patrocinador, com o SVG desenhado como reserva no mesmo
   lugar (ver logo_patrocinio.js). O `hidden` do SVG so cai se a imagem
   falhar, entao os dois nunca aparecem juntos. */
.logo-patro-caixa { display: inline-block; line-height: 0; }
.logo-patro-arte {
  display: block;
  height: var(--logo-altura, 44px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.logo-patro-caixa svg[hidden] { display: none; }

/* A arte tem proporcoes variadas (o UniMedao e largo e baixo, o Xopi e quase
   quadrado). Limitar so a altura deixava marca larga estourando a coluna. */
.patro-marca .logo-patro-caixa,
.nr-marca .logo-patro-caixa { max-width: 100%; }
.patro-marca .logo-patro-arte { max-width: 210px; }
.nr-marca .logo-patro-arte { max-width: 190px; }
.bf-dialog-marca .logo-patro-arte { max-width: 240px; }

/* Barra de progresso do carregamento do banco.
   O download tem alguns MB; sem barra a tela ficava parada e o jogador nao
   sabia se estava carregando ou travado. */
.estado-banco { flex-direction: column; gap: 6px; }
.estado-banco-rotulo { font-size: 11.5px; line-height: 1.4; }
.estado-banco-trilho {
  width: 100%; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.16); overflow: hidden;
}
.estado-banco-barra {
  height: 100%; width: 0;
  background: var(--brand-accent, #00a651);
  transition: width .18s linear;
}
/* Sem `Content-Length` ou durante a leitura nao ha porcentagem: a barra
   percorre o trilho para mostrar que o trabalho continua. */
.estado-banco-barra.indeterminada {
  width: 35%;
  animation: banco-indo 1.1s ease-in-out infinite;
}
@keyframes banco-indo {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .estado-banco-barra.indeterminada { animation: none; width: 100%; opacity: .5; }
}

/* Sumula do pos-jogo sem nenhum evento. */
.pos-sem-evento { font-size: 11px; opacity: .7; font-style: italic; padding: 4px 0; }

/* ==================================================================== */
/* LEILAO DE JOGADORES                                                  */
/* Layout seguindo a tela `a/dz` do executavel original.                */
/* ==================================================================== */
.leilao-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.leilao-escudo { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.leilao-chamada { font-size: 13px; font-weight: bold; color: #ffd600; }
.leilao-ficha {
  background: #ffffff; color: #111; border: 1px solid #a0a0a0;
  padding: 8px 10px; margin-bottom: 8px;
}
.leilao-nome { font-size: 14px; font-weight: bold; margin-bottom: 4px; }
.leilao-dados {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px 12px; font-size: 11.5px;
}
.leilao-lance {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 10px;
}
.leilao-minimo { font-size: 12.5px; font-weight: bold; color: #ffd600; }
.leilao-caixa { font-size: 11.5px; opacity: .85; margin-bottom: 6px; }
.leilao-rotulo { display: block; font-size: 11.5px; margin-bottom: 4px; }
.leilao-linha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.leilao-input {
  flex: 1 1 120px; min-width: 100px; padding: 4px 6px;
  font-size: 12px; border: 1px solid #777;
}
.leilao-erro { font-size: 11.5px; color: #ff8a80; margin-top: 5px; min-height: 14px; }
.leilao-proximo { font-size: 11.5px; opacity: .8; margin-top: 8px; }
@media (max-width: 767px) {
  .leilao-linha .bf-btn { flex: 1 1 auto; }
}

/* Lista de jogos da rodada: abas de divisao e jogo em foco.
   Antes so a Serie A aparecia e nenhum jogo respondia ao clique. */
.live-div-barra { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.live-div-aba {
  font-size: 10.5px; padding: 2px 9px; cursor: pointer;
  background: rgba(255,255,255,0.10); color: inherit;
  border: 1px solid rgba(255,255,255,0.22);
}
.live-div-aba.ativa {
  background: var(--brand-accent, #00a651); color: #06210f; font-weight: bold;
  border-color: var(--brand-accent, #00a651);
}
.live-match-row-item { cursor: pointer; }
.live-match-row-item.em-foco { outline: 2px solid #ffd600; outline-offset: -2px; }
.live-match-row-item:focus-visible { outline: 3px solid #ffd600; outline-offset: 1px; }

/* Escalacao de outro clube (so leitura). */
.rival-cabecalho { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rival-escudo { width: 40px; height: 40px; object-fit: contain; }
.rival-nome { font-size: 14px; font-weight: bold; }
.rival-sub { font-size: 11px; opacity: .75; }
.rival-tabela { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rival-tabela th {
  text-align: left; padding: 3px 6px; background: rgba(255,255,255,0.10);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em;
}
.rival-tabela td { padding: 2px 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.rival-tabela td:first-child { font-weight: bold; width: 26px; }
.live-row-team { cursor: pointer; }

/* Prancheta em modo leitura: escalacao de outro clube. Os controles do
   tecnico nao valem para time que nao e o dele. */
#modal-escalar.so-leitura #esc-sel-auto-type,
#modal-escalar.so-leitura #esc-sel-style,
#modal-escalar.so-leitura #esc-sel-tackle,
#modal-escalar.so-leitura #esc-sel-focus,
#modal-escalar.so-leitura #btn-esc-tactics-saved,
#modal-escalar.so-leitura #chk-escalacao-padrao { pointer-events: none; opacity: .45; }
#modal-escalar.so-leitura #esc-modal-bench-shirts > div,
#modal-escalar.so-leitura #esc-modal-available-shirts > div,
#modal-escalar.so-leitura [id^="esc-pitch-row-"] > div { cursor: default; }