/* =====================================================================
   COMPONENTES ESPORTIVOS
   ===================================================================== */

/* ─── cartão ───────────────────────────────────────────────────────── */
/* O cartão é a peça de vidro do site: fundo translúcido, desfoque por
   trás, borda clara e um fio de luz na aresta de cima. O `overflow` fica
   escondido para o desfoque não vazar pelos cantos arredondados. */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--r-3);
  overflow: hidden;
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  box-shadow: var(--vidro-topo), var(--sombra-1);
}
.cartao > header {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linha);
  font-weight: 700; font-size: var(--t-peq);
}
.cartao > header .cresce { flex: 1; }
.cartao-corpo { padding: var(--e-4); }

/* =====================================================================
   A LINHA DE PARTIDA  · a unidade atômica do site
   =====================================================================
   Um componente, cinco telas. Altura fixa, estado à esquerda, confronto ao
   centro, contexto à direita. A linha INTEIRA é clicável: alvo de toque
   grande é requisito, não capricho.

   Vencedor em negrito, perdedor em cor secundária. É como se lê um
   resultado sem ler: o olho pega quem ganhou antes de processar o número.
   ===================================================================== */
/* QUATRO COLUNAS, TRÊS DELAS DE LARGURA FIXA.
   A largura fixa não é capricho de alinhamento: com a categoria em `auto`,
   um nome longo ("Basquete masculino") roubava largura da coluna do meio e
   empurrava o placar para a esquerda, então o número mudava de lugar de
   linha para linha e a lista deixava de se ler na vertical. Agora o placar
   está sempre no mesmo x, como numa tabela de campeonato. */
.partida {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 26px 82px;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: var(--e-2) var(--e-3);
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--linha);
}
.partida > * { min-width: 0; }
.partida:last-child { border-bottom: 0; }
.partida:hover { background: var(--superficie-2); text-decoration: none; }

.partida .quando {
  font-size: var(--t-min); font-weight: 700; color: var(--texto-2);
  text-align: center; line-height: 1.2;
}
.partida .quando small { display: block; font-weight: 500; color: var(--texto-3);
                         font-size: var(--t-micro); white-space: nowrap; letter-spacing: -.02em; }

/* O estado ao vivo empilhado. A pílula horizontal não cabia em 54px e
   transbordava por cima do nome da turma. */
.partida .vivo {
  display: grid; justify-items: center; gap: 3px;
  padding: 6px 2px; border-radius: var(--r-2);
  background: var(--ao-vivo-fundo); color: var(--ao-vivo);
  box-shadow: 0 0 0 1px var(--ao-vivo-fundo), var(--brilho-ao-vivo);
  font-size: 9px; font-weight: 800; letter-spacing: .05em; line-height: 1;
}

.partida .duelo { display: grid; gap: 6px; min-width: 0; }
.partida .lado  { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.partida .lado .nome {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--texto-2);
}
.partida .lado.venceu .nome { color: var(--texto); font-weight: 700; }

.partida .placares { display: grid; gap: 6px; text-align: right; }
.partida .placares > span { display: block; line-height: 24px; }
.partida .placares b { font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.partida .placares .venceu b { color: var(--texto); }

/* ─── o brasão da turma ────────────────────────────────────────────────
   As turmas do CETEC são letras gregas mais a série, então o brasão é a
   letra: α³, β², ω¹. A cor da turma entra como FUNDO, e é seguro porque
   `sobreACor` escolhe a letra pelo brilho da própria cor. A faixa de 3px
   continua existindo para os lugares que ainda a usam. */
.brasao {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--linha-forte); color: var(--sobre-marca);
  font-size: 14px; font-weight: 700; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .18);
}
.brasao-peq { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
.brasao-gr  { width: 54px; height: 54px; border-radius: 16px; font-size: 28px; }
.brasao-vago { background: var(--linha); color: var(--texto-3); box-shadow: none; }

.faixa { width: 3px; height: 18px; border-radius: 2px; background: var(--linha-forte); flex: none; }

.partida .contexto {
  font-size: var(--t-micro); color: var(--texto-3); text-align: right;
  line-height: 1.25; overflow-wrap: anywhere;
}

/* Telefone estreito: a categoria some e vira o rótulo de baixo da coluna
   de tempo. Vale mais ter o nome da turma inteiro do que a modalidade,
   que a pessoa já sabe porque escolheu a aba. */
@media (max-width: 379px) {
  .partida { grid-template-columns: 50px minmax(0, 1fr) 24px; gap: 8px; }
  .partida .contexto { display: none; }
}

/* ─── selos de estado ──────────────────────────────────────────────── */
.selo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-redondo);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--empate-fundo); color: var(--empate);
}
.selo-ao-vivo   { background: var(--ao-vivo-fundo); color: var(--ao-vivo);
                  box-shadow: 0 0 0 1px var(--ao-vivo-fundo), var(--brilho-ao-vivo); }
.selo-encerrada { background: var(--empate-fundo);  color: var(--empate); }
.selo-cancelada { background: var(--alerta-fundo);  color: var(--alerta); }
.selo-marca     { background: var(--acento-fundo);  color: var(--acento); }
.selo-vitoria   { background: var(--vitoria-fundo); color: var(--vitoria); }

/* O único elemento do site com direito a chamar atenção sozinho. */
.pulso { width: 7px; height: 7px; border-radius: 50%; background: currentColor;
         box-shadow: 0 0 8px currentColor;
         animation: pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ─── forma recente ────────────────────────────────────────────────────
   Últimos cinco resultados como sequência de marcas. Alto valor
   informativo, custo quase zero: sai das partidas que já existem.
   Cor sozinha não informa, cada marca carrega a letra. */
.forma { display: inline-flex; gap: 3px; }
.forma i {
  width: 20px; height: 20px; border-radius: 6px; font-style: normal;
  font-size: var(--t-micro); font-weight: 800;
  display: grid; place-items: center;
}
.forma .v { background: var(--vitoria-fundo); color: var(--vitoria); }
.forma .e { background: var(--empate-fundo);  color: var(--empate); }
.forma .d { background: var(--derrota-fundo); color: var(--derrota); }

/* ─── classificação ────────────────────────────────────────────────── */
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
.tabela th, .tabela td { padding: 10px var(--e-2); text-align: right; white-space: nowrap; }
.tabela th {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-3); border-bottom: 1px solid var(--linha); font-weight: 700;
}
.tabela td { border-bottom: 1px solid var(--linha); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .esq { text-align: left; }
.tabela .equipe { display: flex; align-items: center; gap: var(--e-2); min-width: 0; color: var(--texto); }
.tabela .equipe:hover { text-decoration: none; color: var(--acento); }
/* O `abbr` do navegador vem com sublinhado pontilhado que, numa tabela de
   seis colunas, vira sujeira. O título continua lá para quem toca. */
.tabela abbr { text-decoration: none; border-bottom: 0; cursor: help; }
.tabela .equipe .nome { overflow: hidden; text-overflow: ellipsis; }
.tabela .pos { color: var(--texto-3); width: 26px; text-align: center; }
.tabela .destaque td { background: var(--acento-fundo); }
.tabela .pts { font-weight: 800; }
.tabela .classificado .pos { color: var(--vitoria); font-weight: 800; }
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── chaveamento ──────────────────────────────────────────────────────
   CSS Grid, sem biblioteca. Rola na horizontal no celular sem encolher o
   cartão: encolher é o que transforma um chaveamento em um borrão. */
.chave { display: flex; gap: var(--e-6); padding: var(--e-3) 0 var(--e-4);
         overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chave-coluna { display: flex; flex-direction: column; justify-content: space-around;
                gap: var(--e-4); min-width: 220px; }
.chave-coluna > .rotulo { text-align: center; }
.chave-jogo {
  position: relative; background: var(--superficie); border: 1px solid var(--vidro-borda);
  backdrop-filter: var(--vidro-desfoque); -webkit-backdrop-filter: var(--vidro-desfoque);
  border-radius: var(--r-2); padding: var(--e-2) var(--e-3); display: grid; gap: 4px;
  color: inherit; text-decoration: none;
}
.chave-jogo:hover { border-color: var(--acento-contorno); text-decoration: none; }
.chave-jogo .lado { display: flex; gap: var(--e-2); align-items: center; font-size: var(--t-peq); }
.chave-jogo .lado .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                          color: var(--texto-2); }
.chave-jogo .lado.venceu .nome { color: var(--texto); font-weight: 700; }
.chave-jogo .lado .placar { font-weight: 700; }
.chave-jogo .vago { color: var(--texto-3); font-style: italic; }
.chave-campeao { border-color: var(--acento);
                 box-shadow: 0 0 0 3px var(--acento-fundo), var(--brilho-forte); }

/* Os conectores. Pseudo-elemento, nada de svg gerado. */
.chave-coluna:not(:first-child) .chave-jogo::before {
  content: ""; position: absolute; left: calc(var(--e-6) * -1); top: 50%;
  width: var(--e-6); height: 1px; background: var(--linha-forte);
}

/* ─── enquete e rodada ─────────────────────────────────────────────── */
.opcoes { display: grid; gap: var(--e-2); }
.opcao {
  position: relative; display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--toque); padding: 0 var(--e-3); width: 100%;
  border: 1px solid var(--linha-forte); border-radius: var(--r-2);
  background: var(--superficie); color: var(--texto);
  backdrop-filter: var(--vidro-desfoque); -webkit-backdrop-filter: var(--vidro-desfoque);
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  overflow: hidden; transition: box-shadow .18s ease, border-color .18s ease;
}
.opcao .barra {
  position: absolute; inset: 0 auto 0 0; background: var(--acento-fundo);
  transition: width .35s ease; z-index: 0;
}
.opcao > * { position: relative; z-index: 1; }
.opcao .rotulo-opcao { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                       white-space: nowrap; text-transform: none; letter-spacing: 0;
                       font-size: var(--t-base); color: var(--texto); font-weight: 600; }
.opcao .pct { font-weight: 800; color: var(--texto-2); }
.opcao[aria-pressed="true"] { border-color: var(--acento); border-width: 2px;
                             box-shadow: var(--brilho); }
.opcao[aria-pressed="true"] .rotulo-opcao { color: var(--texto); font-weight: 800; }
.opcao[disabled] { cursor: default; background: var(--superficie-2); border-style: dashed; }
.opcao[disabled] .rotulo-opcao { color: var(--texto-2); }

/* ─── abas ─────────────────────────────────────────────────────────── */
.abas { display: flex; gap: var(--e-1); overflow-x: auto; -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--linha); margin-bottom: var(--e-4); }
.abas a, .abas button {
  flex: none; min-height: 44px; padding: 0 var(--e-3); border: 0; background: none;
  font: inherit; font-weight: 650; font-size: var(--t-peq); color: var(--texto-2);
  cursor: pointer; border-bottom: 2px solid transparent; text-decoration: none;
}
.abas [aria-selected="true"], .abas [aria-current="page"] {
  color: var(--texto); border-bottom-color: var(--acento);
  text-shadow: var(--brilho-texto);
}
.abas [aria-selected="true"]::after, .abas [aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--acento); box-shadow: var(--brilho); border-radius: 2px;
}
.abas a, .abas button { position: relative; }

/* ─── carregando e vazio ───────────────────────────────────────────── */
.esqueleto {
  background: linear-gradient(90deg, var(--superficie-2) 25%, var(--linha) 37%, var(--superficie-2) 63%);
  background-size: 400% 100%; animation: brilhar 1.3s ease infinite;
  border-radius: var(--r-1); height: 14px;
}
@keyframes brilhar { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.vazio { padding: var(--e-7) var(--e-4); text-align: center; color: var(--texto-2); }
.vazio h3 { margin-bottom: var(--e-2); color: var(--texto); }

/* Tela de erro em vez de página em branco. Sempre com um botão: erro sem
   saída é o mesmo que página quebrada. */
.erro-tela { padding: var(--e-7) var(--e-4); text-align: center; }
.erro-tela h2 { margin-bottom: var(--e-2); }
.erro-tela p  { color: var(--texto-2); margin-bottom: var(--e-4); }

/* ─── modal ────────────────────────────────────────────────────────── */
.veu {
  position: fixed; inset: 0; z-index: 60; background: var(--veu);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: end center; padding: var(--e-3);
}
.folha {
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--vidro-borda);
  backdrop-filter: var(--vidro-desfoque); -webkit-backdrop-filter: var(--vidro-desfoque);
  border-radius: var(--r-4) var(--r-4) var(--r-3) var(--r-3);
  padding: var(--e-5); margin-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: var(--sombra-3);
}
@media (min-width: 640px) { .veu { place-items: center; } .folha { border-radius: var(--r-4); } }

/* ─── tela larga: a adaptação, nunca o alvo ────────────────────────── */
@media (min-width: 900px) {
  body { padding-bottom: var(--e-6); }
  .rodape-nav {
    position: static; grid-auto-flow: unset; grid-auto-columns: unset;
    display: flex; gap: var(--e-2); border: 0; background: none; backdrop-filter: none;
  }
  .rodape-nav a { min-height: 40px; flex-direction: row; font-size: var(--t-peq); }
  .rodape-nav svg { display: none; }
  .topo-nav-larga { display: flex !important; }
}
.topo-nav-larga { display: none; }

/* =====================================================================
   O PLACAR  · o bloco que se lê de longe
   =====================================================================
   Não é a linha de partida: é a cabeça da página de uma partida só. Os
   dois nomes ladeando um bloco de dígitos grande, tabular e apertado. É
   o gesto que separa um site esportivo de uma lista de resultados.
   ===================================================================== */
.placar-cabeca {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--e-2); padding: var(--e-5) var(--e-3) var(--e-4);
}
.placar-cabeca .time {
  display: grid; justify-items: center; gap: var(--e-2); text-align: center; min-width: 0;
  text-decoration: none; color: inherit; border-radius: var(--r-2);
  padding: var(--e-2); margin: calc(var(--e-2) * -1);
}
a.placar-cabeca .time:hover, .placar-cabeca a.time:hover { background: var(--marca-suave); }
.placar-cabeca .time .nome {
  font-weight: 700; font-size: var(--t-peq); line-height: 1.2;
  color: var(--texto-2); overflow-wrap: anywhere;
}
.placar-cabeca .time.venceu .nome { color: var(--texto); }
/* A sigla embaixo do nome. O brasão diz que turma é num relance; a sigla
   é o que a pessoa digita na planilha, e vale tê-la à vista. */
.placar-cabeca .time .turma-oficial {
  font-size: var(--t-micro); color: var(--texto-3); letter-spacing: .06em; font-weight: 600;
}
.placar-cabeca .numeros {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-placar); font-weight: 800; letter-spacing: -.045em; line-height: 1;
}
.placar-cabeca .time .brasao { box-shadow: var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.22); }
.placar-cabeca .numeros .x { font-size: var(--t-gr); color: var(--texto-3); font-weight: 600; }
.placar-cabeca .numeros .perdeu { color: var(--texto-3); }
.placar-cabeca .aguardando { font-size: var(--t-gr); font-weight: 700; color: var(--texto-2); }
.placar-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-4);
  padding: 0 var(--e-3) var(--e-4); font-size: var(--t-min); color: var(--texto-2);
}
.placar-meta b { color: var(--texto); font-weight: 700; }

/* As parciais: sets do vôlei, quartos do basquete, tempos do futsal.
   Uma coluna por período, o mesmo componente para os cinco esportes,
   porque quem sabe quantos períodos existem é a categoria, não a tela. */
.parciais { width: 100%; border-collapse: collapse; font-size: var(--t-peq); }
.parciais th { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em;
               color: var(--texto-3); font-weight: 800; padding: 6px var(--e-2); }
.parciais td { padding: 8px var(--e-2); text-align: center; font-weight: 700;
               border-top: 1px solid var(--linha); }
.parciais td.esq { text-align: left; font-weight: 600; color: var(--texto-2); }
.parciais td.ganhou { color: var(--texto); }
.parciais td.perdeu { color: var(--texto-3); font-weight: 500; }
.parciais .total { background: var(--superficie-2); }

/* ─── barras de comparação ─────────────────────────────────────────────
   Duas equipes, um número cada, uma barra dividida. Serve para posse,
   aproveitamento, gols marcados, o que a modalidade tiver. */
.comparar { display: grid; gap: var(--e-3); }
.comparar .item { display: grid; gap: 5px; }
.comparar .topo-item { display: flex; align-items: baseline; font-size: var(--t-peq); }
.comparar .topo-item .rotulo-item { flex: 1; text-align: center; color: var(--texto-2);
                                    font-size: var(--t-micro); text-transform: uppercase;
                                    letter-spacing: .06em; font-weight: 800; }
.comparar .topo-item b { font-weight: 800; min-width: 34px; }
.comparar .topo-item b:last-child { text-align: right; }
.comparar .trilha { display: flex; height: 8px; border-radius: var(--r-redondo); overflow: hidden;
                    background: var(--linha); }
.comparar .trilha i { display: block; height: 100%; }
.comparar .trilha .a { background: var(--texto-2); }
.comparar .trilha .b { background: var(--acento); margin-left: auto; }

/* ─── grade de números ─────────────────────────────────────────────── */
.numeros-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
                 gap: 1px; background: var(--linha); }
.numeros-grade > div { background: var(--superficie-2); padding: var(--e-3); text-align: center; }
.numeros-grade b { display: block; font-size: var(--t-gr); font-weight: 800; letter-spacing: -.02em; }
.numeros-grade span { display: block; font-size: var(--t-micro); color: var(--texto-3);
                      text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-top: 2px; }

/* As peças da camada de fichas moravam aqui: os passos guiados de criar
   aposta, os botões de cota, o bilhete e a carteira com o saldo. Saíram
   com a camada, em 06/10/2026 (D-059). Nada no site usa mais nenhuma
   delas, e deixar CSS órfão é como deixar a porta de um quarto que não
   existe mais. */

/* ─── chips de filtro ──────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  min-height: 38px; padding: 0 var(--e-3); border-radius: var(--r-redondo);
  border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto-2);
  font: inherit; font-size: var(--t-peq); font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.chip[aria-pressed="true"], .chip[aria-current="page"] {
  background: var(--acento); color: var(--sobre-acento); border-color: var(--acento);
  box-shadow: var(--brilho);
}
.chip { backdrop-filter: var(--vidro-desfoque); -webkit-backdrop-filter: var(--vidro-desfoque); }

/* ── Perfil da turma ──────────────────────────────────────────────────
   Cabeçalho com brasão grande e a forma recente logo abaixo do nome: as
   três coisas que se olha primeiro num perfil de time. */
.perfil-turma { display: flex; align-items: center; gap: 14px; margin: 20px 0 16px; }
.perfil-turma h1 { margin: 0; line-height: 1.1; }
.linha-competicao {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--linha); color: inherit; text-decoration: none;
  min-height: 56px;
}
.linha-competicao:last-child { border-bottom: 0; }
.linha-competicao:hover { background: var(--marca-suave); }

/* ── A estrela de favoritar ───────────────────────────────────────────
   Alvo de 44px, o mínimo que um dedo acerta sem mirar. Vazada quando
   desligada, sólida quando ligada: a diferença precisa ser visível de
   relance, sem depender só de cor. */
.estrela {
  background: none; border: 0; padding: 10px; margin: -10px;
  min-height: 44px; min-width: 44px; cursor: pointer; color: var(--texto-3);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-2); flex: none;
}
.estrela:hover { color: var(--marca); background: var(--marca-suave); }
.estrela.ligada { color: var(--marca); }

/* A coluna de pênaltis na tabela de parciais. Ela é lida como parte do
   jogo, mas não entra no total, e precisa dizer isso sem legenda. */
.parciais .penaltis {
  background: var(--marca-suave); font-style: italic;
}

/* =====================================================================
   SÚMULA · a folha da partida
   =====================================================================
   Feita para virar papel. Na tela ela é um cartão; na impressão, some
   tudo que não é a folha — barra de navegação, botões, rodapé do site —
   e o que resta é preto sobre branco, porque impressora escolar não
   imprime fundo escuro e ninguém quer gastar o toner de um ginásio
   inteiro num retângulo azul-marinho.
   ===================================================================== */
.sumula-acoes { display: flex; gap: var(--e-2); margin: var(--e-4) 0 var(--e-3); flex-wrap: wrap; }
.sumula {
  background: var(--cromo-fundo); border: 1px solid var(--linha);
  border-radius: var(--r-3); padding: var(--e-5);
}
.sumula h1 { font-size: var(--t-gr); margin: 0; }
.sumula h2 {
  font-size: var(--t-med); margin: var(--e-5) 0 var(--e-2);
  padding-bottom: var(--e-1); border-bottom: 1px solid var(--linha);
}
.sumula-topo { display: flex; align-items: flex-start; gap: var(--e-3); }
.sumula-topo > div { flex: 1; min-width: 0; }
.sumula-num { font-family: var(--fonte-num); color: var(--texto-3); font-weight: 700; }
.sumula-dados { width: 100%; border-collapse: collapse; margin-top: var(--e-4); }
.sumula-dados th { width: 38%; text-align: left; font-weight: 700; }
.sumula-dados th, .sumula-dados td { padding: 6px 0; border-bottom: 1px solid var(--linha); }
.sumula-placar {
  display: flex; align-items: center; justify-content: center; gap: var(--e-3);
  margin: var(--e-5) 0; text-align: center; flex-wrap: wrap;
}
.sumula-placar > div { display: flex; align-items: center; gap: var(--e-2); }
.sumula-placar .num { font-size: 2.5rem; font-weight: 800; }
.sumula-x { color: var(--texto-3); }
.sumula-time { font-weight: 700; }
.sumula-tabela { width: 100%; border-collapse: collapse; }
.sumula-tabela th, .sumula-tabela td {
  padding: 6px 8px; border: 1px solid var(--linha); text-align: center;
}
.sumula-tabela .esq { text-align: left; }
.sumula-assinaturas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e-5); margin-top: calc(var(--e-6) * 1.5); text-align: center;
  font-size: var(--t-peq); color: var(--texto-2);
}
.sumula-assinaturas span {
  display: block; border-top: 1px solid var(--texto-3); margin-bottom: 6px;
}
.sumula-rodape {
  margin-top: var(--e-5); padding-top: var(--e-3); border-top: 1px solid var(--linha);
  font-size: var(--t-peq); color: var(--texto-3);
}

@media print {
  .topo, .rodape-nav, .sumula-acoes, .aviso, nav { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .sumula {
    background: #fff !important; color: #000 !important;
    border: 0; padding: 0; border-radius: 0;
  }
  .sumula h2, .sumula-dados th, .sumula-dados td,
  .sumula-tabela th, .sumula-tabela td, .sumula-rodape { border-color: #999 !important; }
  .sumula .discreto, .sumula-rodape, .sumula-assinaturas { color: #444 !important; }
  .sumula-assinaturas span { border-top-color: #000 !important; }
  @page { margin: 16mm; }
}

/* =====================================================================
   MAPA DE POSIÇÕES
   =====================================================================
   Meia quadra da própria turma. Colocar alguém é tocar no atleta e
   depois na quadra: arrastar exige precisão de pixel, briga com a
   rolagem no celular e falha calado quando o dedo escorrega.
   ===================================================================== */
.quadra-mapa {
  position: relative; aspect-ratio: 3 / 4; width: 100%; max-width: 420px;
  margin: 0 auto; border-radius: var(--r-2); overflow: hidden;
  background: var(--marca-suave); cursor: crosshair; touch-action: manipulation;
}
/* Vendo, não editando: sem cursor de mira e sem alvo de toque. */
.quadra-mapa-vendo { cursor: default; margin-bottom: var(--e-3); }
.quadra-mapa-vendo .peca-mapa { cursor: default; width: 34px; height: 34px; }
.quadra-mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.quadra-mapa .linha-quadra {
  fill: none; stroke: var(--texto-3); stroke-width: .6; vector-effect: non-scaling-stroke;
}
.quadra-mapa .rede { stroke-dasharray: 3 2; stroke-width: 1.4; }
.peca-mapa {
  position: absolute; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--fundo);
  background: var(--acento); color: var(--fundo);
  font: 700 var(--t-peq)/1 var(--fonte-num); cursor: grab;
  display: flex; align-items: center; justify-content: center;
}
.quadra-legenda {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  font-size: var(--t-peq); color: var(--texto-3); pointer-events: none;
}