:root {
  color-scheme: light;
  --verde: #305455;
  --verde-escuro: #203c3c;
  --amarelo: #dbda21;
  --tinta: #192e2e;
  --suave: #526766;
  --fundo: #f4f6f3;
  --linha: #dce4df;
  --cinza: #eff2f7;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
}
* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #2e7774;
  outline-offset: 3px;
}
.limite { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.topo { background: #fff; border-bottom: 1px solid var(--linha); }
.topo-interno { display: flex; justify-content: space-between; align-items: center; min-height: 72px; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; }
.marca img { flex: none; object-fit: contain; }
.marca strong, .marca small { display: block; }
.marca strong { font-size: 15px; line-height: 1.2; }
.marca small, .modo > span { font-size: 10px; font-weight: 800; letter-spacing: .15em; color: var(--suave); }
.marca small { margin-top: 3px; }
.modo { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.modo-botoes { display: flex; gap: 3px; padding: 3px; border: 1px solid #cbd7cf; border-radius: 10px; background: var(--fundo); }
.modo-botoes button { min-height: 36px; min-width: 50px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--verde-escuro); font-size: 13px; font-weight: 750; }
.modo-botoes button:hover { background: #e5eee8; }
.modo-botoes button[aria-pressed="true"] { background: var(--verde); color: #fff; }
.modo-botoes button:focus-visible { outline-offset: 1px; }
select {
  padding: 8px 10px;
  min-height: 38px;
  border: 1px solid #cbd7cf;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 650;
}
.sobretitulo { color: var(--verde); font-size: 11px; letter-spacing: .18em; font-weight: 800; }
.navegacao { background: #fff; border-bottom: 1px solid var(--linha); }
.nav-interno { display: flex; gap: 26px; }
.navegacao button { background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 17px 6px 14px; font-weight: 700; font-size: 14px; color: var(--suave); }
.navegacao button:hover { color: var(--verde-escuro); }
.navegacao button[aria-current="true"] { color: var(--verde-escuro); border-color: #a2a400; }
main { padding-top: 35px; min-height: 460px; }
.secao-topo { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 24px; }
.secao-topo h1 { font-size: clamp(30px, 4.2vw, 47px); line-height: 1.07; letter-spacing: -.06em; margin-top: 7px; }
.descricao { font-size: 14px; color: var(--suave); margin-top: 9px; line-height: 1.45; }
.filtro { display: flex; align-items: center; gap: 9px; color: var(--suave); font-size: 12px; font-weight: 700; white-space: nowrap; }
.filtro select { min-width: 125px; color: var(--tinta); }
.nome-federacao { display: inline-flex; align-items: center; gap: 5px; }
.bandeira { width: 17px; height: 11px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px #203c3c26; }
.painel { border: 1px solid var(--linha); border-radius: 13px; background: #fff; }
.listas-atletas { display: grid; gap: 8px; }
.selo-capitania { display: inline-block; padding: 1px 5px; border-radius: 4px; background: #deeee4; color: #235744; font-size: 10px; font-weight: 750; }
.capitania-equipe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; padding-block: 3px; color: #235744; font-size: 13px; font-weight: 700; }
.elenco > :is(summary, h2) { padding: 12px 16px; font-size: 15px; font-weight: 750; }
.elenco > summary { cursor: pointer; }
.elenco > summary .nome-federacao { margin-inline-start: 6px; }
.categorias-atletas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); gap: 1px; border-top: 1px solid var(--linha); border-radius: 0 0 12px 12px; overflow: hidden; background: var(--linha); }
.categorias-atletas > section { padding: 12px 16px; background: #fff; }
.categorias-atletas h3 { margin-bottom: 5px; font-size: 13px; color: var(--verde); }
.categorias-atletas ul { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.55; }
.painel-topo { min-height: 64px; padding: 12px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.painel-topo h3 { font-size: 16px; letter-spacing: -.02em; }
.tabela-scroll, .chave-scroll { overflow: auto; }
.tabela-scroll { border-radius: 0 0 12px 12px; }
.tabela-painel .tabela-scroll { border-radius: 12px; container-type: inline-size; }
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
th, td { padding: 10px 12px; text-align: center; border-bottom: 1px solid #edf0ed; }
thead th { padding-block: 11px; color: #fff; background: var(--verde); font-size: 11px; }
th[scope="row"] { text-align: left; }
.tabela-painel table { table-layout: fixed; }
.tabela-geral {
  --largura-minima: 900px;
  --largura-federacao: 186px;
  /* Posição, total e as categorias dividem o espaço restante. */
  --largura-posicao: calc((max(var(--largura-minima), 100cqw) - var(--largura-federacao)) / var(--colunas-numericas));
  min-width: var(--largura-minima);
  border-collapse: separate;
  border-spacing: 0;
}
.tabela-geral col:first-child { width: var(--largura-posicao); }
.tabela-geral .coluna-federacao { width: var(--largura-federacao); }
.tabela-geral tr > :nth-child(-n+3) { position: sticky; z-index: 1; }
.tabela-geral tr > :first-child { inset-inline-start: 0; }
.tabela-geral tr > :nth-child(2) { inset-inline-start: var(--largura-posicao); }
.tabela-geral tr > :nth-child(3) {
  inset-inline-start: calc(var(--largura-posicao) + var(--largura-federacao));
  box-shadow: 4px 0 6px -4px #203c3c66;
}
/* As células fixas precisam cobrir as categorias que passam por baixo. */
:where(.tabela-geral tbody) tr { background-color: #fff; }
.tabela-geral tbody tr > :nth-child(-n+2) { background-color: inherit; }
.tabela-painel th:nth-child(2) { text-align: left; }
.tabela-painel :is(th, td):not(:nth-child(2)) { padding-inline: 4px; }
.tabela-painel td.ordem { font-weight: 700; color: var(--suave); }
.tabela-painel td.total { font-weight: 800; background: #f2f2c5; }
.pontos-podio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 44px;
  padding: 3px 4px;
  border-radius: 5px;
  font-weight: 800;
}
.pontos-podio small { font-size: 9px; }
.pontos-podio[data-posicao="1"] { color: #513500; background: #f5dc87; }
.pontos-podio[data-posicao="2"] { color: #2e404e; background: #e0e8ee; }
.pontos-podio[data-posicao="3"] { color: #633b26; background: #efcfb9; }
tr:last-child > * { border-bottom: 0; }
tr:nth-child(even) { background: #f9faf9; }
.vazio { color: #657673; }
.botao { min-height: 36px; border-radius: 8px; padding: 7px 11px; border: 1px solid transparent; font-weight: 750; font-size: 13px; }
.secundario { border-color: #cbd7cf; background: #fff; color: var(--verde-escuro); }
.secundario:hover { background: #eef3ef; }
.principal { background: var(--amarelo); color: var(--tinta); }
.principal:hover { background: #e9e83e; }
.sem-dados { padding: 27px; }
.sem-dados p { margin: 8px 0 15px; color: var(--suave); }
.chave { margin-bottom: 18px; }
.chave-scroll { padding: 12px 16px; border-top: 1px solid var(--linha); background: #f8faf8; border-radius: 0 0 12px 12px; }
.chave-canvas { position: relative; }
.fase { position: absolute; top: 2px; width: 196px; padding: 7px 9px; border-radius: 6px; background: var(--amarelo); font-size: 11px; font-weight: 800; }
.ligacoes { position: absolute; inset: 0; pointer-events: none; fill: none; stroke: #76958e; stroke-width: 1.2; }
.jogo { position: absolute; width: 196px; padding: 0; text-align: left; border: 1px solid #ccd9d3; background: #fff; border-radius: 8px; overflow: hidden; }
.jogo:hover { border-color: #498078; box-shadow: 0 2px 8px #203c3c25; }
.jogo-topo { display: flex; justify-content: space-between; gap: 5px; font-size: 9px; letter-spacing: .04em; font-weight: 800; padding: 5px 7px; background: #edf2ee; color: var(--suave); }
.concluido .jogo-topo { background: #e2ebe4; color: var(--verde-escuro); }
[data-decisao="colocacao"] {
  --decisao-topo: #f3e7ad;
  --decisao-texto: #503b14;
  --decisao-borda: #ba9c49;
  --decisao-fundo: #fffaf0;
}
[data-decisao="titulo"] {
  --decisao-topo: var(--verde-escuro);
  --decisao-texto: #f1ef66;
  --decisao-borda: #7c7e23;
  --decisao-fundo: #fcfbe3;
}
.jogo[data-decisao] { border-color: var(--decisao-borda); background: var(--decisao-fundo); }
.jogo[data-decisao="titulo"] { box-shadow: 0 0 0 2px #dbda2170; }
.jogo[data-decisao]:hover { box-shadow: 0 0 0 2px var(--decisao-borda); }
.jogo[data-decisao] .jogo-topo { background: var(--decisao-topo); color: var(--decisao-texto); }
.lado { min-height: 26px; display: flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 6px; }
.lado > b { margin-left: auto; padding-inline: 4px; font-variant-numeric: tabular-nums; }
.lado-pr .nome-federacao { font-weight: 750; }
.lado + .lado { border-top: 1px solid #eef2ef; }
.lado.venceu { font-weight: 750; background: #f0f5e9; }
.origem { color: var(--suave); font-size: 12px; }
.origem[data-origem="I"] { color: #28613e; }
.origem[data-origem="J"] { color: #983b38; }
.lado .origem { font-size: 10px; }
.programacao-filtros { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 16px; }
.programacao { margin-bottom: 16px; }
.programacao .painel-topo { min-height: 52px; }
.programacao .painel-topo h2 { font-size: 16px; }
.programacao .painel-topo > span { color: var(--suave); font-size: 12px; }
.programacao-jogos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0 16px 16px;
}
.programacao .jogo { position: static; width: auto; }
.programacao .jogo-topo { font-size: 10px; }
.programacao .lado, .programacao .origem { font-size: 12px; }
.tabela-sorteio td, .tabela-sorteio th { text-align: left; }
.tabela-sorteio td select { width: 100%; min-width: 150px; }
.sorteio-campo { position: relative; display: block; }
.sorteio-campo .bandeira { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); pointer-events: none; }
.sorteio-campo .bandeira + select { padding-left: 32px; }
.rodape { border-top: 1px solid var(--linha); margin-top: 31px; padding-block: 18px 25px; color: var(--suave); font-size: 12px; }
.estado-online { padding-top: 14px; color: var(--suave); font-size: 12px; }
dialog { width: min(440px, calc(100% - 28px)); border: 1px solid #cbd7cf; padding: 20px; border-radius: 15px; color: var(--tinta); box-shadow: 0 12px 60px #13232350; }
dialog::backdrop { background: #10242499; }
.dialogo-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dialogo-topo[data-decisao] { background: var(--decisao-topo); padding: 6px 8px 6px 12px; border-radius: 8px; margin-bottom: 12px; }
.dialogo-topo[data-decisao] .sobretitulo { color: var(--decisao-texto); }
.dialogo-topo + .placar-dialogo { margin-top: 10px; }
.sumula { display: grid; gap: 8px; margin-block: 14px; font-size: 13px; }
.sumula h2 { font-size: 18px; }
.sumula article { padding: 9px 12px; border: 1px solid var(--linha); border-radius: 9px; background: var(--fundo); }
.sumula h3 { font-size: 14px; }
dialog .sumula p { margin-top: 4px; }
dialog .sumula .sumula-placar { color: var(--verde-escuro); font-weight: 700; }
.fechar { border: 0; border-radius: 7px; background: var(--cinza); font-size: 22px; line-height: 1; width: 32px; height: 32px; }
dialog h2 { font-size: 23px; letter-spacing: -.035em; margin: 6px 0 12px; }
.placar-dialogo { border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.placar-dialogo .lado { font-size: 14px; min-height: 36px; padding: 5px 9px; }
dialog p:not(.sobretitulo) { margin-top: 12px; font-size: 13px; color: var(--suave); }
.placares { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.remover { background: transparent; color: #a23026; }
.aviso:not(:empty) { position: fixed; right: 17px; bottom: 17px; z-index: 3; background: var(--verde-escuro); color: #fff; padding: 12px 15px; max-width: min(400px, calc(100% - 34px)); border-radius: 8px; font-size: 13px; }
@media (max-width: 780px) {
  .limite { width: calc(100% - 40px); }
  .tabela-geral {
    --largura-minima: 800px;
    --largura-posicao: 34px;
    --largura-federacao: 108px;
  }
  .tabela-geral col:nth-child(3) { width: 44px; }
  .tabela-geral tr > :nth-child(2) {
    padding-inline: 5px;
    white-space: normal;
    font-size: 12px;
  }
}
@media (max-width: 510px) {
  .limite { width: calc(100% - 28px); }
  .modo > span { display: none; }
  .modo-botoes button { min-width: 44px; padding-inline: 6px; }
  .marca strong { font-size: 12px; }
  .marca small { font-size: 8px; }
  .nav-interno { gap: 6px; flex-wrap: wrap; }
  .navegacao button { font-size: 12px; }
  main { padding-top: 23px; }
  .secao-topo { align-items: start; flex-direction: column; gap: 11px; }
  th, td { padding-inline: 9px; }
}