/* Confronto + TBV — segue a paleta do style.css do site */

/* Estas duas paginas sao TABELAS largas; o max-width de 760px do site (bom para a
   agenda) forcava quebra de texto e scrollbar com metade da tela vazia — feedback do
   dono em 30/08. Este arquivo so carrega em confronto.html e tbv.html, entao o override
   nao toca a agenda. No mobile o container ja e fluido. */
.container.wide { max-width: 1360px; }

/* celulas de tabela nunca quebram linha: e a quebra que estica o card na vertical.
   O overflow-x:auto do wrapper segue como valvula para telas estreitas. */
table.linhas th, table.linhas td { white-space: nowrap; }
table.linhas td:first-child { white-space: nowrap; }
table.tbv th, table.tbv td { white-space: nowrap; }

.nav-abas { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.aba { background: var(--card-bg); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.aba.on { background: rgba(16,185,129,.12); border-color: var(--green); color: var(--green); }
.aba.on.roxa { background: rgba(167,139,250,.12); border-color: var(--purple); color: var(--purple); }
.ferramentas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ferramentas input[type=search] { background: #0d0f14; border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 7px 10px; font-size: 12px; flex: 1; min-width: 160px; }
.ferramentas label { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.resumo-dia { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.6; }
.resumo-dia b { color: var(--text); }

.jogo { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.jogo-h { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; cursor: pointer; user-select: none; }
.jogo-h:hover { background: rgba(255,255,255,.02); }
.jogo-h .seta { color: var(--green); font-size: 10px; width: 10px; }
.jogo-h .hora { font-size: 11px; color: var(--text-muted); font-weight: 700; }
.jogo-h .nomes { font-size: 13px; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jogo-h .nomes .x { color: var(--text-muted); font-weight: 400; }
.jogo-h .lg { font-size: 10px; color: var(--text-muted); }
/* horario + data + liga no cabecalho do card (pedido do dono em 30/08: "organizacao por
   horario data e hora e ter a liga"). Larguras fixas para os cards alinharem em coluna. */
.jogo-h .quando { display: flex; flex-direction: column; line-height: 1.15; width: 42px; flex: 0 0 42px; }
.jogo-h .quando b { font-size: 12px; color: #fff; }
.jogo-h .quando .dia { font-size: 9px; color: var(--text-muted); }
.jogo-h .liga-chip { font-size: 9px; font-weight: 800; text-transform: uppercase; color: var(--cyan);
  background: rgba(6,182,212,.10); border: 1px solid rgba(6,182,212,.28); border-radius: 5px;
  padding: 1px 6px; white-space: nowrap; flex: 0 0 auto; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
/* pílula de placar — mesma linguagem visual da página local: borda discreta, mono,
   e a PORCENTAGEM colorida por faixa (>=60 verde, >=45 neutro, abaixo vermelho). */
.pill-placar { display: inline-flex; align-items: baseline; gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.pill-placar .g { color: var(--green); font-weight: 800; }
.pill-placar .r { color: var(--red); font-weight: 800; }
.pill-placar .sep { color: rgba(255,255,255,.2); }
/* o sufixo G/R fica menor e sem itálico — rótulo, não ênfase */
.pill-placar i { font-style: normal; font-size: 8.5px; opacity: .75; margin-left: 1px; }
.pill-placar .pc { font-weight: 700; margin-left: 1px; }
.pill-placar .pc.g { color: var(--green); }
.pill-placar .pc.neutro { color: rgba(255,255,255,.6); }
.pill-placar .pc.r { color: var(--red); }

/* placar do dia na barra de abas — ocupa o vazio entre as datas e Análise/Tips */
.placar-dia { margin-left: auto; display: flex; align-items: baseline; gap: 5px;
  font-size: 12.5px; font-variant-numeric: tabular-nums; padding-right: 4px; }
.placar-dia .g { color: var(--green); } .placar-dia .r { color: var(--red); }
.placar-dia .pc { color: var(--cyan); }
.placar-dia .sep { color: var(--border); }
.placar-dia .rot { font-size: 9px; text-transform: uppercase; color: var(--text-muted);
  letter-spacing: .04em; margin-left: 2px; }

.funil { font-size: 10.5px; color: var(--text-muted); background: #0d0f14; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; line-height: 1.6; }
.funil b { color: var(--text); }

/* linha executiva: uma so, com o que decide. O resto mora na gaveta. */
.linha-exec { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text); background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.linha-exec b { color: #fff; }
.linha-exec .g { color: var(--green); } .linha-exec .r { color: var(--red); }
.linha-exec .pc { color: var(--cyan); }
.linha-exec .sep { color: var(--border); }
.aviso-inline { color: var(--yellow); font-size: 11px; }
.guia-btn { margin-left: auto; background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); font-size: 10px; font-weight: 800; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px; cursor: pointer; }
.guia-btn:hover { color: var(--text); border-color: var(--cyan); }
.guia { background: #0d0f14; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; font-size: 11px; line-height: 1.65; color: var(--text-muted); }
.guia p { margin-bottom: 7px; }
.guia p:last-child { margin-bottom: 0; }
.guia b { color: var(--text); }
.guia .g { color: var(--green); }
.jogo-h .placar { font-size: 10px; font-weight: 800; white-space: nowrap; }
.jogo-h .placar .g { color: var(--green); } .jogo-h .placar .r { color: var(--red); }

.cel { border-top: 1px solid rgba(255,255,255,.05); padding: 8px 12px; }
.cel-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 11px; margin-bottom: 5px; }
.cel-h .fam { color: var(--cyan); font-weight: 800; }
.cel-h .per { color: var(--text-muted); }
.cel-h .met { color: var(--text-muted); }
.cel-h .met b { color: var(--text); font-weight: 700; }
.choque { font-size: 9.5px; font-weight: 800; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; }
.choque.over { background: rgba(16,185,129,.15); color: var(--green); }
.choque.under { background: rgba(239,68,68,.15); color: var(--red); }
.choque.neutro { background: rgba(255,255,255,.06); color: var(--text-muted); }
.tip-badge { margin-left: auto; display: flex; gap: 6px; align-items: baseline; font-size: 11px; flex-wrap: wrap; }
.tip-badge .rot { font-size: 9px; font-weight: 900; color: var(--purple); border: 1px solid rgba(167,139,250,.4); padding: 1px 5px; border-radius: 4px; }
.odd-real { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.45); color: var(--yellow);
  font-weight: 800; padding: 0 5px; border-radius: 5px; }
.res-g { color: var(--green); font-weight: 800; } .res-r { color: var(--red); font-weight: 800; }

table.linhas { width: 100%; border-collapse: collapse; font-size: 11px; }
table.linhas th { font-size: 9px; text-transform: uppercase; color: var(--text-muted); text-align: right; padding: 2px 4px; font-weight: 700; }
table.linhas th:first-child { text-align: left; }
table.linhas td { padding: 2px 4px; text-align: right; border-top: 1px solid rgba(255,255,255,.04); font-variant-numeric: tabular-nums; }
table.linhas td:first-child { text-align: left; font-weight: 700; }
.dim { color: var(--text-muted); }
.saiu { color: var(--text-muted); font-size: 10px; }

.tips-jogo { border-top: 1px solid rgba(255,255,255,.05); }
.tiprow { display: grid; grid-template-columns: 18px 1fr 44px 44px 52px 40px 70px; gap: 6px; padding: 4px 12px;
  font-size: 11px; align-items: baseline; font-variant-numeric: tabular-nums; }
.tiprow.cab { font-size: 9px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; padding-top: 8px; }
.tiprow .mercado { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiprow .mercado .mk { color: var(--cyan); }
.tiprow .num { text-align: right; }
.tiprow .rac { grid-column: 2 / -1; font-size: 10px; color: var(--text-muted); padding-bottom: 3px; }
.conf-alta { color: var(--green); font-weight: 700; font-size: 9.5px; text-transform: uppercase; }
.conf-media { color: var(--text-muted); font-size: 9.5px; text-transform: uppercase; }
.conf-baixa { color: var(--text-muted); opacity: .6; font-size: 9.5px; text-transform: uppercase; }
.sec-baseline { font-size: 9px; text-transform: uppercase; color: var(--text-muted); padding: 6px 12px 0; }
.aviso-box { background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.25); border-radius: 10px;
  padding: 8px 12px; font-size: 11px; color: #ffd9a0cc; line-height: 1.5; margin-bottom: 10px; }
.aviso-box b { color: var(--yellow); }
.regua-flag { font-size: 9px; color: var(--red); border: 1px solid rgba(239,68,68,.35); border-radius: 4px; padding: 0 4px; }

/* TBV */
.tbv-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tbv-filtros select { background: #0d0f14; border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 7px 8px; font-size: 12px; max-width: 100%; }
table.tbv { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
table.tbv th { font-size: 10px; text-transform: uppercase; color: var(--text-muted); padding: 7px 8px;
  text-align: right; background: var(--card-header); }
table.tbv th:nth-child(-n+2) { text-align: left; }
table.tbv td { padding: 5px 8px; text-align: right; border-top: 1px solid rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
table.tbv td:nth-child(-n+2) { text-align: left; }
.hit-alto { color: var(--green); font-weight: 800; }
.hit-medio { color: var(--yellow); font-weight: 700; }
.hit-baixo { color: var(--red); }
.n-pequeno { opacity: .45; }
@media (max-width: 640px) {
  .tiprow { grid-template-columns: 16px 1fr 40px 46px 36px 60px; }
  .tiprow .oj-col { display: none; }
}