/* ==========================================================================
   StatGol: painel do scanner
   Ideia central: cada linha lê como um placar de transmissão. Casa em cima,
   visitante embaixo, em todas as colunas — e o gráfico de pressão fica
   entre as duas linhas, com a casa crescendo para cima e o visitante para
   baixo. Todo o resto é silencioso.
   ========================================================================== */

/* Fontes servidas pelo próprio app (licença OFL em fontes/LICENSE-OFL.txt):
   nada é carregado de terceiros. */
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fontes/barlow-semi-condensed-latin-400-normal.21681f1fee25.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fontes/barlow-semi-condensed-latin-500-normal.69988ca9d262.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fontes/barlow-semi-condensed-latin-600-normal.64a19a7cafc2.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fontes/barlow-condensed-latin-600-normal.ba4513495282.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fontes/barlow-condensed-latin-700-normal.e1180918b873.woff2") format("woff2"); }

:root {
  /* Tema escuro é o padrão do StatGol; o claro entra com data-tema="claro" */
  --cal: #13201b;        /* fundo */
  --papel: #1a2a24;      /* superfície */
  --grafite: #e6eee9;    /* texto principal */
  --neblina: #8fa398;    /* texto secundário */
  --linha: #2b3b34;      /* divisórias */
  --faixa: #22342d;      /* destaque / cabeçalho */
  --gramado: #3fbf7f;    /* casa, subida */
  --cartao: #f0645a;     /* visitante, cartão vermelho, erro */
  --apito: #f5c542;      /* minuto ao vivo, atenção */
  --apito-fundo: #3a3313;
  --destaque: #6fb4ff;   /* regra do usuário atendida */
  --destaque-fundo: #16283c;

  --fonte: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --fonte-placar: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

  color-scheme: dark;
}

:root[data-tema="claro"] {
  --cal: #f2f4ef; --papel: #ffffff; --grafite: #1b2420; --neblina: #66736b;
  --linha: #d5dbd2; --faixa: #e9ede6; --gramado: #1e7b4f; --cartao: #c8372d;
  --apito: #b98a00; --apito-fundo: #fff4cc;
  --destaque: #1f6fb5; --destaque-fundo: #e2eefb;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--cal);
  color: var(--grafite);
  font: 400 15px/1.35 var(--fonte);
  font-variant-numeric: tabular-nums;
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--gramado); outline-offset: 2px; }

/* --- Topo ---------------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}

.marca {
  margin: 0;
  font: 700 22px/1 var(--fonte-placar);
  letter-spacing: 0.01em;
}

.status { display: flex; align-items: center; gap: 8px; color: var(--neblina); font-size: 14px; }
.status-ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--neblina);
}
.status[data-estado="ok"] .status-ponto { background: var(--gramado); }
.status[data-estado="alerta"] .status-ponto { background: var(--apito); }
.status[data-estado="erro"] .status-ponto { background: var(--cartao); }

.controles { margin-left: auto; display: flex; gap: 10px; align-items: center; }

input[type="search"], select {
  font: inherit; color: inherit;
  background: var(--cal);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 6px 10px;
}
input[type="search"] { width: 220px; }

.botao-tema {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  color: var(--grafite); background: transparent;
  border: 1px solid var(--linha); border-radius: 6px; cursor: pointer;
}
.botao-tema svg { width: 18px; height: 18px; fill: currentColor; }
.botao-som {
  width: 34px; height: 34px; padding: 0; font-size: 16px; line-height: 1; cursor: pointer;
  background: transparent; border: 1px solid var(--linha); border-radius: 6px;
}
.botao-som[aria-pressed="true"] { border-color: var(--gramado); }

/* conta */
.conta { display: flex; align-items: center; text-decoration: none; color: var(--grafite); }
.conta-plano { padding: 5px 10px; border-radius: 12px; background: var(--faixa); font-size: 14px; white-space: nowrap; }
.conta-plano[data-plano="pro"] { background: var(--gramado); color: #fff; }
.sair { margin: 0; }
.entrar { color: var(--grafite); }
.botao-pequeno {
  padding: 6px 12px; border-radius: 6px; text-decoration: none;
  color: #fff; background: var(--gramado); border: 1px solid var(--gramado); font-weight: 600; font-size: 15px;
}
.sair .botao-link { color: var(--neblina); }
.upsell {
  width: fit-content; max-width: 100%; margin: 12px 0 0; padding: 12px 16px;
  background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--gramado); border-radius: 0 8px 8px 0;
}
.upsell a { color: var(--gramado); font-weight: 600; }

/* tamanho da lista */
.escala { display: flex; align-items: stretch; border: 1px solid var(--linha); border-radius: 6px; overflow: hidden; }
.escala button {
  font: 500 14px/1 var(--fonte); color: var(--grafite); background: var(--cal);
  border: 0; padding: 7px 10px; cursor: pointer; min-width: 38px;
}
.escala button + button { border-left: 1px solid var(--linha); }
.escala button:hover { background: var(--faixa); }
#escala-atual { font-variant-numeric: tabular-nums; min-width: 52px; }

/* menus (Filtros, Colunas) */
.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--linha); border-radius: 6px;
  background: var(--cal);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: "▾"; font-size: 11px; color: var(--neblina); }
.menu[open] > summary { border-color: var(--grafite); }
.contador {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--gramado); color: #fff; font-size: 12px; font-weight: 600;
}
.menu-painel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  width: 300px; max-height: min(70vh, 640px); overflow-y: auto; padding: 14px 16px;
  display: grid; gap: 10px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
}
.opcao { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.opcao input { margin-top: 3px; accent-color: var(--gramado); }
.faixa { display: flex; gap: 12px; margin: 0; padding: 0; border: 0; flex-wrap: wrap; }
.faixa legend { padding: 0; margin-bottom: 6px; color: var(--neblina); font-size: 13px; }
.faixa .nota { flex-basis: 100%; }
.faixa select { padding: 4px 8px; }
.faixa input { width: 64px; font: inherit; color: inherit; background: var(--cal); border: 1px solid var(--linha); border-radius: 6px; padding: 4px 8px; }
.botao {
  font: inherit; color: var(--grafite); cursor: pointer;
  padding: 5px 12px; background: var(--papel);
  border: 1px solid var(--linha); border-radius: 6px;
}
.botao:hover { border-color: var(--neblina); }
.botao-link { justify-self: start; font: inherit; color: var(--neblina); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.menu-painel .nota { margin: 0; font-size: 13px; color: var(--neblina); }
#lista-grupos { width: 480px; }
.grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.grupo { margin: 0; padding: 0; border: 0; display: grid; gap: 4px; align-content: start; }
.grupo legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.menu-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--linha); }
.menu-rodape .botao-link { justify-self: auto; white-space: nowrap; }

/* --- Barra de filtros ---------------------------------------------------- */
.alternar-barra {
  font: 500 15px/1 var(--fonte); color: var(--grafite); cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: var(--cal); border: 1px solid var(--linha); border-radius: 6px;
}
.alternar-barra[aria-expanded="true"] { border-color: var(--grafite); }

.barra-filtros {
  /* fica logo abaixo do topo e acompanha a rolagem */
  position: sticky; top: var(--altura-topo, 56px); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin: 12px 20px 0; padding: 10px 14px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 8px;
}
.grupo-filtro { display: flex; align-items: center; gap: 6px; }
.grupo-filtro + .grupo-filtro { border-left: 1px solid var(--linha); padding-left: 18px; }
.rotulo-filtro { color: var(--neblina); font-size: 13px; white-space: nowrap; }
.rotulo-filtro[title] { text-decoration: underline dotted var(--linha); text-underline-offset: 3px; }
.grupo-filtro .ate { color: var(--neblina); font-size: 13px; }
.barra-filtros input[type="number"] {
  width: 64px; font: inherit; font-size: 14px; color: inherit; padding: 4px 6px;
  background: var(--cal); border: 1px solid var(--linha); border-radius: 6px;
}
.barra-filtros select { font-size: 14px; padding: 4px 6px; }
.barra-filtros .caixas { flex-wrap: wrap; gap: 6px 14px; }
.barra-filtros .opcao { font-size: 14px; white-space: nowrap; }
.barra-filtros .opcao input { margin: 0 4px 0 0; }
.acoes-filtro { margin-left: auto; gap: 14px; }
.acoes-filtro .ocultos { display: flex; align-items: center; gap: 8px; color: var(--neblina); font-size: 13px; }

/* --- Avisos -------------------------------------------------------------- */
.aviso {
  margin: 12px 20px 0;
  padding: 10px 14px;
  border-left: 4px solid var(--apito);
  background: var(--apito-fundo);
  border-radius: 0 6px 6px 0;
  max-width: 80ch;
}
.aviso[data-tipo="erro"] { border-left-color: var(--cartao); }
.mensagens { list-style: none; margin: 0; padding: 0; }
.mensagens .aviso { border-left-color: var(--gramado); background: var(--papel); }
.aviso strong { font-weight: 600; }

/* --- Tabela -------------------------------------------------------------- */
.area { padding: 12px 20px 40px; }

.rolagem {
  width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 8px;
}

.tabela { border-collapse: collapse; width: 100%; }

.tabela > thead > tr > th {
  /* gruda no topo da própria caixa, que já começa abaixo da barra */
  position: sticky; top: 0; z-index: 2;
  padding: 8px 10px;
  background: var(--faixa);
  color: var(--neblina);
  font-weight: 500; font-size: 13px; line-height: 1.2;
  text-align: right; vertical-align: bottom;
  white-space: nowrap;
  border-bottom: 1px solid var(--linha);
}
.tabela > thead > tr > th small { display: block; font-size: 11px; font-weight: 400; }
.tabela > thead > tr > th.c-times, .tabela > thead > tr > th.c-grafico { text-align: left; }
.tabela > thead > tr > th[title] { text-decoration: underline dotted var(--linha); text-underline-offset: 3px; }
.tabela > thead > tr > th.ordenavel { cursor: pointer; user-select: none; }
.tabela > thead > tr > th.ordenavel:hover { color: var(--grafite); }
.tabela > thead > tr > th[aria-sort="descending"]::after { content: " ↓"; color: var(--grafite); }
.tabela > thead > tr > th[aria-sort="ascending"]::after { content: " ↑"; color: var(--grafite); }

.tabela > tbody > tr > td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;           /* alinha as linhas casa/visitante entre colunas */
  text-align: right;
  white-space: nowrap;
}

/* casa em cima, visitante embaixo, em todas as colunas empilhadas */
.par { display: grid; grid-template-rows: 19px 19px; row-gap: 3px; line-height: 19px; }
.par > span { white-space: nowrap; }
.nota-celula { display: block; margin-top: 3px; font-size: 12px; line-height: 1.2; color: var(--neblina); }
.maior { font-weight: 600; }
.sem-dado { color: var(--neblina); }

.tabela > tbody > tr.fixado > td { background: var(--faixa); }

/* fixar e anotar, na própria linha */
.c-pino { width: 30px; text-align: center !important; padding-left: 2px !important; padding-right: 2px !important; }
.pino, .lapis {
  display: block; width: 26px; height: 22px; margin: 0 auto; padding: 0;
  background: none; border: 0; border-radius: 4px; cursor: pointer;
  color: var(--neblina); opacity: .45; font-size: 15px; line-height: 22px;
}
.pino { font-size: 17px; }
.pino:hover, .lapis:hover { opacity: .95; }
.pino[aria-pressed="true"] { color: var(--apito); opacity: 1; }
.lapis.tem { color: var(--apito); opacity: .95; }
.lapis[aria-pressed="true"] { color: var(--grafite); opacity: 1; background: var(--faixa); }

/* nota rápida: uma faixa logo abaixo da linha do jogo */
tr.linha-nota > td { padding: 0 10px 10px 34px !important; border-bottom: 1px solid var(--linha); }
.cartao > .linha-nota { margin-top: 8px; }
.nota-rapida { display: block; width: 100%; max-width: 560px; min-height: 36px; }

/* agrupamento por liga */
tr.grupo-liga > th { padding: 0; text-align: left; background: var(--faixa); border-bottom: 1px solid var(--linha); }
li.grupo-liga { padding: 0; background: var(--faixa); border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.alternar-grupo {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 10px; background: none; border: 0; cursor: pointer;
  color: var(--grafite); font: 600 14px/1.3 var(--fonte); text-align: left;
}
.alternar-grupo:hover { background: var(--linha); }
.alternar-grupo .seta { width: 10px; color: var(--neblina); }
.alternar-grupo .nome-grupo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alternar-grupo .qtd-grupo { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--neblina); white-space: nowrap; }

/* minuto e período */
.c-min { width: 76px; white-space: nowrap; }
.minuto { display: inline-block; font: 700 20px/19px var(--fonte-placar); color: var(--apito); }
.periodo { display: block; margin-top: 4px; font-size: 12px; line-height: 1.1; color: var(--neblina); }
.minuto.defasado { color: var(--cartao); text-decoration: underline dotted; }
.estimado { margin-left: 3px; font-size: 12px; color: var(--neblina); }
.bandeira { margin-right: 5px; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .15); }

/* times e liga */
.c-times { text-align: left !important; min-width: 220px; }
.liga { display: block; margin-top: 3px; font-size: 12px; color: var(--neblina); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.time { font-weight: 600; }
.posicao { display: inline-block; min-width: 22px; margin-right: 4px; font-size: 12px; color: var(--neblina); text-align: right; }
.expandir { font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.expandir:hover .time { text-decoration: underline; text-decoration-color: var(--linha); }
.vermelho {
  display: inline-block; vertical-align: -1px;
  width: 9px; height: 12px; margin-left: 6px;
  background: var(--cartao); border-radius: 1.5px;
}
.vermelho + .vermelho { margin-left: 2px; }

/* placar */
.c-placar { width: 52px; }
.placar { font: 700 22px/19px var(--fonte-placar); }
.placar .perde { color: var(--neblina); }

/* número que subiu desde a leitura anterior */
@keyframes mudou { from { background: var(--faixa); } to { background: transparent; } }
td.mudou, .medida.mudou { animation: mudou 4s ease-out; }
@media (prefers-reduced-motion: reduce) {
  td.mudou, .medida.mudou { animation: none; box-shadow: inset 0 -2px 0 var(--gramado); }
}

/* nota do usuário */
.tem-nota { margin-left: 6px; color: var(--apito); }
.minha-liga { margin-left: 5px; color: var(--gramado); font-size: 12px; }
.detalhe-nota { margin-top: 14px; display: grid; gap: 6px; max-width: 520px; }
.detalhe-nota label { color: var(--neblina); font-size: 13px; }
.nota-jogo {
  font: inherit; color: inherit; padding: 8px 10px; resize: vertical;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 6px;
}

/* Gol recém-marcado: único movimento da página. O fundo segura a cor por
   uns 11 s e depois apaga devagar; nos primeiros segundos ele pulsa, para
   achar o jogo pelo canto do olho. O número nunca some — piscar o placar
   atrapalharia justamente na hora de ler. */
@keyframes gol {
  0%   { background: var(--apito-fundo); }
  45%  { background: var(--apito-fundo); }
  100% { background: transparent; }
}
@keyframes pulso-gol {
  0%, 100% { background: var(--apito-fundo); }
  50%      { background: transparent; }
}
td.gol-novo, .cartao-topo.gol-novo { animation: gol 25s ease-out, pulso-gol 1.1s ease-in-out 4; }
@media (prefers-reduced-motion: reduce) {
  td.gol-novo, .cartao-topo.gol-novo { animation: none; box-shadow: inset 3px 0 0 var(--apito); }
}

/* gráficos: pressão e linha do tempo (casa para cima, visitante para baixo) */
.c-grafico { min-width: 210px; text-align: left !important; padding-left: 4px !important; }
.grafico { display: block; width: 100%; min-width: 150px; height: 41px; overflow: visible; }
.grafico .casa { fill: var(--gramado); }
.grafico .fora { fill: var(--cartao); }
.grafico .eixo { stroke: var(--linha); stroke-width: 1; }
.grafico .intervalo { stroke: var(--neblina); stroke-width: 1; stroke-dasharray: 2 2; opacity: .7; }
.grafico .decorrido { fill: var(--neblina); opacity: .45; }
.grafico .gol-linha { stroke: var(--grafite); stroke-width: 1; opacity: .5; }
.grafico .gol-casa, .grafico .gol-fora { fill: var(--papel); stroke: var(--grafite); stroke-width: 1.6; }
.grafico .gol-casa { fill: var(--gramado); }
.grafico .gol-fora { fill: var(--cartao); }
/* gol anulado: xis, nunca círculo — ver marcaAnulada em painel.js */
.grafico .anulado { stroke: var(--neblina); stroke-width: 1.8; stroke-linecap: round; }
.grafico .haste-anulada { stroke: var(--neblina); stroke-width: 1; opacity: .6; stroke-dasharray: 1.5 1.5; }
.grafico .cartao-amarelo { fill: #e8b00f; }
.grafico .cartao-vermelho { fill: var(--cartao); }
.grafico .escanteio { stroke: var(--neblina); stroke-width: 1.4; }
.grafico .outro { fill: var(--neblina); }

/* números */
.c-num { min-width: 64px; }
.c-num-largo { min-width: 120px; }

/* aceleração */
.c-acel { min-width: 84px; }
.acel.sobe { color: var(--gramado); font-weight: 600; }
.acel.cai { color: var(--neblina); }

/* odds */
.c-odds, .c-odds-curta { font-size: 14px; line-height: 19px; }
.c-odds { min-width: 140px; }
.c-odds-curta { min-width: 84px; }
.odds-principal { display: block; }

/* forma */
.c-forma { min-width: 128px; }
.forma { display: inline-flex; gap: 2px; vertical-align: middle; }
.forma span {
  display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 3px; font: 700 12px/1 var(--fonte-placar); color: #fff;
}
.forma .v { background: var(--gramado); }
.forma .e { background: var(--neblina); }
.forma .d { background: var(--cartao); }

/* detalhe expandido */
.tabela > tbody > tr.detalhe > td { background: var(--cal); padding: 14px 16px 16px 50px; text-align: left; white-space: normal; }
.detalhe-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 36px; max-width: 1400px; }
.detalhe-largo { grid-column: 1 / -1; }
.detalhe h3 { margin: 0 0 8px; font: 600 16px/1.2 var(--fonte); }
.detalhe h3 small { font-weight: 400; color: var(--neblina); }
.forma-detalhe { margin-bottom: 8px; }
.forma-detalhe .forma span { width: 22px; height: 22px; font-size: 13px; }
.detalhe dl { display: grid; grid-template-columns: auto auto; gap: 3px 16px; margin: 0; justify-content: start; }
.detalhe dt { color: var(--neblina); white-space: nowrap; }
.detalhe dd { margin: 0; text-align: right; white-space: nowrap; }
.detalhe .nota { margin: 10px 0 0; font-size: 13px; color: var(--neblina); max-width: 70ch; }
.eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.eventos li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ev-min { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--neblina); }
.ev-tipo { width: 9px; height: 12px; border-radius: 1.5px; background: var(--neblina); }
.ev-gol { width: 10px; height: 10px; border-radius: 50%; background: var(--grafite); }
/* o mesmo xis na lista de eventos: um símbolo, um significado, nos três lugares */
.ev-gol_anulado { width: 10px; height: 10px; position: relative; background: none; border: 0; }
.ev-gol_anulado::before, .ev-gol_anulado::after {
  content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 2px;
  background: var(--neblina); border-radius: 1px;
}
.ev-gol_anulado::before { transform: rotate(45deg); }
.ev-gol_anulado::after { transform: rotate(-45deg); }
.ev-penalti_convertido, .ev-penalti_perdido { width: 10px; height: 10px; border-radius: 50%; background: var(--apito); }
.ev-amarelo { background: #e8b00f; }
.ev-vermelho { background: var(--cartao); }
.odds-tabela { border-collapse: collapse; font-size: 14px; }
.odds-tabela th, .odds-tabela td { padding: 4px 18px 4px 0; text-align: left; white-space: nowrap; border: 0; }
.odds-tabela thead th { color: var(--neblina); font-weight: 500; font-size: 13px; }
.odds-tabela tbody th { color: var(--neblina); font-weight: 400; }
/* Os números por tempo são curtos e comparáveis entre si: alinhados à
   direita e com largura de dígito fixa, a coluna lê de cima a baixo. */
.tempos-tabela td { text-align: right; padding-right: 22px; font-variant-numeric: tabular-nums; }
.tempos-tabela thead th:not(:first-child) { text-align: right; padding-right: 22px; }
.detalhe-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linha); }

.vazio { padding: 48px 20px; text-align: center; color: var(--neblina); font-size: 17px; }
.vazio code { font-size: 15px; color: var(--grafite); }


/* --- Cartões (celular) --------------------------------------------------- */
.cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cartao {
  background: var(--papel); border: 1px solid var(--linha); border-radius: 10px;
  padding: 10px 12px 12px; font-variant-numeric: tabular-nums;
}
.cartao.fixado { border-left: 3px solid var(--apito); }
.cartao-topo {
  display: grid; grid-template-columns: 54px 1fr auto auto; gap: 10px; align-items: start;
}
.cartao-topo .minuto { font: 700 22px/19px var(--fonte-placar); }
.minuto-cartao { display: grid; justify-items: start; gap: 2px; }
.cartao-times { display: grid; gap: 3px; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.cartao-times span { line-height: 19px; }
.cartao-times .time { font-weight: 600; font-size: 16px; }
.cartao-topo .placar { font: 700 22px/19px var(--fonte-placar); text-align: right; }
.botoes-cartao { display: flex; gap: 2px; justify-self: end; }
.botoes-cartao .pino, .botoes-cartao .lapis { height: 26px; line-height: 26px; }
.cartao-liga {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 6px; font-size: 13px; color: var(--neblina);
}
.cartao-liga .periodo { margin: 0; white-space: nowrap; }
.cartao-pressao { margin: 8px 0; }
.cartao-pressao .grafico { width: 100%; height: 48px; }
.cartao-medidas {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  padding-top: 8px; border-top: 1px solid var(--linha);
}
.medida { text-align: center; min-width: 0; }
.medida .rotulo { display: block; margin-bottom: 4px; font-size: 11px; line-height: 1.2; color: var(--neblina); }
.medida .par { justify-items: center; }
.cartao-detalhe { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); }
.cartao-detalhe .detalhe-grade { grid-template-columns: 1fr; gap: 16px; max-width: 100%; }
.cartao-detalhe dl { grid-template-columns: 1fr auto; justify-content: stretch; }
/* no cartão, texto longo quebra em vez de empurrar o conteúdo para fora */
.cartao-detalhe dt, .cartao-detalhe dd, .cartao-detalhe .eventos li { white-space: normal; }
.cartao-detalhe .odds-tabela { display: block; overflow-x: auto; }
.cartao, .cartao-topo, .cartao-medidas, .cartao-detalhe { min-width: 0; }
.cartao-detalhe .detalhe-grade > div, .cartao-detalhe dl { min-width: 0; max-width: 100%; }
.cartao { overflow: hidden; }

/* No computador, a página não rola: só a lista rola por dentro. Assim o topo,
   a barra de filtros e o cabeçalho da tabela ficam sempre à vista. */
@media (min-width: 761px) {
  html, body { height: 100%; }
  body { display: flex; flex-direction: column; overflow: hidden; }
  .topo, .barra-filtros { position: static; flex: none; }
  .area { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 12px; }
  .rolagem { flex: 1; min-height: 0; }
}

/* --- Celular ------------------------------------------------------------- */
@media (max-width: 760px) {
  .topo { padding: 10px 12px; gap: 10px; }
  .marca { font-size: 19px; }
  .controles { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .busca { flex: 1 1 100%; display: flex; }
  input[type="search"] { flex: 1; width: auto; }
  .menu-painel, #lista-grupos { right: auto; left: 0; width: min(480px, calc(100vw - 24px)); }
  .grupos { grid-template-columns: 1fr; }
  .area { padding: 10px 12px 30px; }
  .barra-filtros { margin: 10px 12px 0; gap: 10px; }
  .grupo-filtro + .grupo-filtro { border-left: 0; padding-left: 0; }
  .acoes-filtro { margin-left: 0; }
  .rolagem { display: none; }              /* no celular, a lista vira cartões */
  .barra-filtros { position: static; }
  .aviso { margin: 10px 0 0; }
  .upsell { margin-top: 10px; }
  .status { order: 3; }
}
.marca a { color: inherit; text-decoration: none; }

/* Destaque por condição do usuário. A cor é só um chamariz para a célula que
   atingiu o número que ELE pediu: não é veredito nosso sobre o jogo. */
td.destacado, .medida.destacado {
  background: var(--destaque-fundo);
  box-shadow: inset 0 -2px 0 var(--destaque);
}
.cartao.destacado { border-left: 3px solid var(--destaque); }
.cartao.fixado.destacado { border-left-color: var(--apito); }

/* editor de regras, no menu Destaques */
.menu-largo { width: 440px; }
.regra { margin: 0; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 8px; display: grid; gap: 8px; }
.regra legend { padding: 0 4px; width: calc(100% - 8px); }
.regra legend .opcao { align-items: center; }
.regra legend .opcao { gap: 6px; }
.regra-nome {
  font: inherit; font-weight: 600; color: inherit; background: none;
  border: 0; border-bottom: 1px dashed var(--linha); padding: 1px 2px;
  flex: 1; min-width: 0;
}
.regra-nome:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--gramado); }
.condicao { display: grid; grid-template-columns: 1fr auto 62px auto; gap: 6px; align-items: center; }
.condicao select, .condicao input {
  font: inherit; color: inherit; background: var(--cal);
  border: 1px solid var(--linha); border-radius: 6px; padding: 3px 6px; min-width: 0;
}
.remover-cond { text-decoration: none; font-size: 18px; line-height: 1; padding: 0 4px; }
.regra-acoes { display: flex; gap: 14px; }
.sugestoes { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--linha); }
.sugestoes h3 { margin: 0; font-size: 13px; color: var(--neblina); font-weight: 600; }
.usar-sugestao { text-align: left; text-decoration: none; color: inherit; }
.usar-sugestao:hover { text-decoration: underline; }
.usar-sugestao small { display: block; color: var(--neblina); font-size: 12px; }
#lista-destaques .menu-rodape { flex-direction: column; align-items: flex-start; gap: 6px; }

@media (max-width: 760px) {
  .menu-largo { width: min(92vw, 440px); }
}

/* Seletor de idioma no topo do painel, do mesmo tamanho dos outros botões. */
.idiomas { display: inline-flex; gap: 4px; margin: 0; }
.idioma {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  min-width: 32px; height: 34px; padding: 0 6px; cursor: pointer;
  color: var(--neblina); background: transparent;
  border: 1px solid var(--linha); border-radius: 6px;
}
.idioma:hover { color: var(--grafite); border-color: var(--neblina); }
.idioma.atual { color: var(--grafite); border-color: var(--gramado); cursor: default; }

/* Detalhe técnico do aviso. Só chega ao navegador de quem é equipe — o
   servidor filtra em _fonte_publica —, então aqui é só o tom mais baixo. */
.aviso .so-equipe { color: var(--neblina); font-size: 13px; }

/* --- pergunta de divulgação ------------------------------------------- */
/* Aparece uma vez por pessoa, acima do topo, e some assim que responder ou
   dispensar. Fica no fluxo (não sobreposta) de propósito: barra flutuante
   sobre a tabela ao vivo atrapalha justamente quem está usando o produto. */
.pergunta-origem {
  padding: 14px 18px; margin: 0; border-bottom: 1px solid var(--linha);
  background: var(--faixa); display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px 18px; font-size: 14px;
}
.pergunta-origem-texto { margin: 0; font-weight: 600; }
.pergunta-origem-opcoes { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pergunta-origem-opcoes label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pergunta-origem-texto-livre {
  flex: 1 1 200px; min-width: 160px; padding: 6px 10px;
  border: 1px solid var(--linha); border-radius: 6px;
  background: var(--papel); color: inherit; font: inherit; font-size: 14px;
}
.pergunta-origem-acoes { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.pergunta-origem-dispensa {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--neblina); font: inherit; font-size: 14px; text-decoration: underline;
}
@media (max-width: 720px) {
  .pergunta-origem-acoes { margin-left: 0; }
}

/* o caminho do painel até o manual; discreto, mas presente */
.topo .ajuda { color: var(--neblina); text-decoration: none; font-size: 14px; white-space: nowrap; }
.topo .ajuda:hover, .topo .ajuda:focus-visible { color: inherit; text-decoration: underline; }