/* Tela de analise da grade horaria dos jogos virtuais.
   Paleta propria (verde/vermelho saturados sobre carvao azulado), NAO a do
   app do futebol real em app.css: a leitura aqui e celula a celula num campo
   denso, e a paleta clara daquele app nao segura o contraste em 400
   celulas. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#0a0e16;
  --panel:#111827;
  --panel-2:#161f2f;
  --rule:#243044;
  --ink:#e7edf5;
  --ink-dim:#9fb0c4;
  --muted:#64748b;
  --green:#22c55e;
  --green-cell:#15803d;
  --green-deep:#14532d;
  --red:#ef4444;
  --red-cell:#b91c1c;
  --red-deep:#7f1d1d;
  --pend:#1e293b;
  --pend-ink:#93b4ff;
  --amber:#f59e0b;
  --ciano:#22d3ee;
  /* Quarta cor de realce (sequencia). Violeta porque as outras tres ja estao
     gastas: ambar=placar, ciano=gols, branco=time. */
  --seq:#c084fc;
  --body:"Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 14px/1.5 var(--body);
}

/* ---------- topo ---------- */
.nav{
  display:flex;align-items:center;gap:22px;
  padding:12px 22px;border-bottom:1px solid var(--rule);
  background:var(--panel);
}
.marca{ font-weight:600; letter-spacing:.02em; }
.nav .push{margin-left:auto}
.badge-fonte{
  font:500 12px/1 var(--body);color:var(--ink-dim);
  border:1px solid var(--rule);border-radius:999px;padding:7px 13px;
}

.head{padding:20px 22px 6px;display:flex;align-items:flex-start;gap:16px}
.head h1{margin:0;font-size:21px;font-weight:700}
.head p{margin:3px 0 0;color:var(--muted);font-size:13px}

/* ---------- filtros ---------- */
.filtros{
  margin:12px 22px;padding:16px 18px;
  background:var(--panel);border:1px solid var(--rule);border-radius:12px;
}
.linha{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.linha + .linha{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.grupo{display:flex;flex-direction:column;gap:7px;min-width:0}
.rot{font-size:12px;color:var(--muted);font-weight:500}
.pills{display:flex;gap:7px;flex-wrap:wrap}
.pill{
  background:var(--panel-2);border:1px solid var(--rule);color:var(--ink-dim);
  padding:7px 15px;border-radius:8px;cursor:pointer;font:500 13px var(--body);
}
.pill:hover:not(:disabled){border-color:#3a4a63;color:var(--ink)}
.pill.on{background:var(--green);border-color:var(--green);color:#04210f;font-weight:600}
.pill:disabled{opacity:.34;cursor:not-allowed}
/* Blocos por assunto na segunda linha de filtros. A regua vertical e um
   border-left no bloco seguinte, e nao um "|" de texto: separador que e
   caractere entra na selecao de texto e vira ruido ao copiar a tela. O
   primeiro bloco nao tem regua a esquerda -- o painel ja o delimita. */
.bloco{display:flex;gap:18px;align-items:flex-start}
.bloco + .bloco{border-left:1px solid var(--rule);padding-left:18px}
/* controles do mesmo assunto lado a lado dentro do bloco */
.controles{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* Cabe no bloco: o min-width dos selects de liga/mercado deixaria o de time
   mais largo que os dois controles ao lado dele. */
#f-time{min-width:150px}
/* Sequencia de vitorias do time selecionado. Verde por ser leitura de
   desempenho e nao controle -- nao pode parecer clicavel no meio de pills e
   caixas; a variante `zero` volta para o cinza de texto secundario, porque
   "sem vitoria" verde se leria como resultado bom. */
.streak{
  font:600 12px var(--mono);color:var(--green);white-space:nowrap;
  border:1px solid rgba(34,197,94,.35);border-radius:8px;padding:7px 10px;
  background:rgba(34,197,94,.1);
}
.streak.zero{
  color:var(--muted);border-color:var(--rule);background:var(--panel-2);
}
select{
  background:var(--panel-2);border:1px solid var(--rule);color:var(--ink);
  padding:8px 12px;border-radius:8px;font:400 13px var(--body);min-width:190px;
}
/* Cor de fundo do <option> vem do sistema no Windows; forcar aqui evita
   dropdown branco sobre tela escura. */
select option{background:var(--panel-2);color:var(--ink)}

/* ---------- painel de odds ---------- */
.dropwrap{position:relative}
.drop{
  position:absolute;z-index:20;top:calc(100% + 6px);left:0;
  background:var(--panel-2);border:1px solid var(--rule);border-radius:10px;
  padding:13px;width:330px;box-shadow:0 14px 34px rgba(0,0,0,.55);
}
.drop h4{margin:0 0 10px;font-size:12px;color:var(--muted);font-weight:500}
.drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.chk{
  display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:7px;
  background:var(--panel);border:1px solid var(--rule);cursor:pointer;
  font-size:12.5px;color:var(--ink-dim);
}
.chk.on{border-color:var(--amber);color:var(--amber)}
.chk input{accent-color:var(--amber);margin:0}

/* ---------- resumo ---------- */
.liga-nome{text-align:center;font-size:19px;font-weight:700;margin:20px 0 14px}
.resumo{display:flex;align-items:center;gap:14px;margin:0 22px}
.lado{
  min-width:104px;text-align:center;padding:9px 13px;border-radius:10px;
  border:1px solid var(--rule);
}
.lado b{display:block;font:700 20px var(--mono)}
.lado small{color:var(--muted);font-size:11.5px}
.lado.g{background:rgba(34,197,94,.11)}
.lado.g b{color:var(--green)}
.lado.r{background:rgba(239,68,68,.11)}
.lado.r b{color:var(--red)}
.barra{flex:1;display:flex;height:34px;border-radius:9px;overflow:hidden}
.barra i{
  display:flex;align-items:center;justify-content:center;
  font:600 12.5px var(--mono);font-style:normal;
}
.barra .bg{background:var(--green-cell);color:#eafff2}
.barra .br{background:var(--red-cell);color:#ffecec}
.contagem{text-align:center;color:var(--muted);font-size:12.5px;margin:9px 0 4px}

.paginacao{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:14px 22px 0;
}
.paginacao span{
  font:600 12.5px var(--mono);color:var(--ink-dim);min-width:126px;
  text-align:center;
}

/* ---------- grade ---------- */
.rolagem{overflow-x:auto;margin:12px 22px 40px;
  border:1px solid var(--rule);border-radius:12px}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px}
th,td{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:0;text-align:center}
th:last-child,td:last-child{border-right:0}
thead th{background:var(--panel);position:sticky;top:0;z-index:5;padding:6px 4px}
.colpct{font:700 13px var(--mono)}
.colpct.g{color:var(--green)}
.colpct.r{color:var(--red)}
.colhits{font:500 11px var(--mono);color:var(--muted)}
.minuto{font:600 12px var(--mono);color:var(--ink-dim);padding:5px 4px}
.canto{background:var(--panel-2);color:var(--muted);font:500 11px var(--body)}

tbody th{
  background:var(--panel);font:700 13px var(--mono);color:var(--ink-dim);
  padding:6px 9px;position:sticky;left:0;z-index:4;
}
/* marca da virada de dia; so aparece na primeira linha de cada data */
.dia{display:block;font:500 9px var(--mono);color:var(--accent,#f59e0b)}
/* `position:relative` existe pelo badge de sequencia, que e posicionado dentro
   da celula. Vale para TODA celula e nao so para a marcada: mudar o
   posicionamento de uma celula sim e outra nao e como se ganha um pulo de
   layout no meio da grade quando o time selecionado muda. */
.cel{min-width:64px;height:42px;line-height:1.25;cursor:default;
     position:relative}
.cel.g{background:var(--green-cell)}
.cel.r{background:var(--red-cell)}
.cel.p{background:var(--pend)}
/* 'f' = resultado perdido pela coleta. Hachura em vez de cor chapada: a
   celula nao pertence a nenhum dos tres estados do mercado (green/red/por vir)
   e nao pode ser lida como um deles. */
.cel.f{background:repeating-linear-gradient(135deg,var(--pend) 0 5px,
        rgba(245,158,11,.15) 5px 10px)}
.cel.x{background:transparent}
/* Primeira linha da celula: placar e, quando ligado, o total de gols ao lado.
   Flex e nao dois blocos empilhados porque o total ao lado do placar mantem a
   celula com a mesma altura -- empilhar cresceria a grade inteira em 20 linhas. */
.topo{display:flex;align-items:baseline;justify-content:center;gap:5px}
.placar{font:700 12.5px var(--mono);color:#fff;display:block}
.cel.p .placar{color:var(--pend-ink)}
.cel.f .placar{color:rgba(245,158,11,.8)}
.odds{font:400 9.5px var(--mono);color:rgba(255,255,255,.72);display:block}
/* Nomes dos times, ligados pelo checkbox. Uma linha por time, com reticencia:
   nome grande ("Athletico Paranaense") nao pode alargar a celula sozinho, ou
   uma coluna ficaria fora do passo das outras. O title da celula guarda o
   nome inteiro. */
.times{
  display:block;font:500 9px/1.3 var(--mono);color:rgba(255,255,255,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px;
}
.cel.p .times{color:rgba(147,180,255,.85)}
.cel.f .times{color:rgba(245,158,11,.75)}
/* Altura tambem: com dois nomes a mais, 42px espremeria as odds para fora. */
table.com-times .cel{min-width:92px;height:auto;padding-bottom:2px}
/* Total de gols do jogo, ao lado do placar (item de .topo, por isso sem
   display:block). Nao confundir com a coluna "Gols" da direita, que soma a
   HORA inteira. */
.gols{font:700 12px var(--mono);color:var(--amber)}
.cel.p .odds{color:rgba(147,180,255,.8)}
/* Badge da sequencia do time no mercado selecionado. Quarto criterio de
   realce, e por isso um ELEMENTO e nao mais uma propriedade de borda: outline,
   box-shadow inset e box-shadow externo ja pertencem aos outros tres, e a
   celula que bate em dois criterios tem de mostrar os dois. Numerado (1..N)
   porque os jogos da sequencia nem sempre sao vizinhos: em mercado de mando os
   jogos do time no outro mando ficam de fora e o badge e o que deixa a ordem
   de leitura visivel. */
.seq{
  position:absolute;top:0;left:0;min-width:12px;height:12px;padding:0 2px;
  font:700 8px/12px var(--mono);text-align:center;
  background:var(--seq);color:#2a0a45;border-radius:0 0 4px 0;
}
.cel.marcado{outline:2px solid var(--amber);outline-offset:-2px}
/* Realce por total de gols. box-shadow inset e NAO outline: o outline ja
   pertence ao "Marcar placar", um elemento so tem um, e a celula que bate nos
   dois criterios mostraria apenas o ultimo da cascata. Como sao propriedades
   diferentes, os dois compoem -- ambar por fora, ciano por dentro. */
.cel.marcado-gols{box-shadow:inset 0 0 0 2px var(--ciano)}
/* Terceiro destaque (jogos de um time). Anel branco POR FORA, e nao um
   border: a celula so tem borda a direita e embaixo, entao acrescentar as
   outras duas mudaria a largura e a grade inteira pularia ao selecionar. O
   z-index e o que impede a celula vizinha, desenhada depois, de comer o anel
   -- fica abaixo do cabecalho sticky (z 4/5) de proposito. */
.cel.marcado-time{box-shadow:0 0 0 2px #fff;position:relative;z-index:1}
/* Os dois criterios na mesma celula: box-shadow nao se acumula pela cascata
   (a regra mais recente substitui a outra inteira), entao a combinacao precisa
   ser declarada. Ciano por dentro, branco por fora. */
.cel.marcado-gols.marcado-time{
  box-shadow:inset 0 0 0 2px var(--ciano), 0 0 0 2px #fff;
  position:relative;z-index:1;
}
.rowpct{font:700 12px var(--mono);padding:5px 8px;background:var(--panel)}
.rowpct.g{color:var(--green)}
.rowpct.r{color:var(--red)}
.rowgols{font:600 12px var(--mono);color:var(--ink-dim);
  background:var(--panel);padding:5px 8px}

/* ---------- rodape estatistico ---------- */
.nota{
  margin:0 22px 40px;padding:15px 18px;border-radius:12px;
  background:var(--panel);border:1px solid var(--rule);
  border-left:3px solid var(--amber);color:var(--ink-dim);font-size:13px;
}
.nota h4{margin:0 0 7px;color:var(--amber);font-size:13px;font-weight:600}
.nota code{font-family:var(--mono);color:var(--ink);font-size:12px}
.nota b{color:var(--ink)}
.vazio{padding:44px;text-align:center;color:var(--muted)}