/* ===========================================================================
   TWSE — sistema de design.

   Três camadas, nesta ordem:
     1. fichas       cores, tipografia, espaçamento e profundidade
     2. estrutura    o esqueleto de cada área (barra lateral, capa, conteúdo)
     3. blocos       as peças que montam as telas, reaproveitadas em todas elas

   A regra que organiza a tela inteira: LISTA é para escolher para onde ir,
   BLOCO é para todo o resto. E bloco tem três pesos — destaque, normal e
   sutil — porque uma página com oito caixas idênticas não tem hierarquia:
   tudo grita junto e nada é encontrado.

   Sem fonte externa: o painel do jurado roda à beira da pista, em rede ruim, e
   uma fonte que não carrega é um layout que pula no meio da bateria.
   =========================================================================== */

/* --- 1. Fichas ----------------------------------------------------------- */

:root {
  /* Fundos, do mais ao fundo para o mais à frente. O cinza tem um viés leve
     para o verde-azulado da marca — cinza puro ao lado de um verde vivo lê
     como cinza sujo.

     O fundo era #eff4f3, a quatro pontos de luminosidade do branco do bloco:
     na prática a página inteira parecia uma folha só, e as caixas só apareciam
     pela borda — que também era clara demais para segurá-las sozinha. Aqui o
     degrau é o dobro, e é ele que faz o bloco ler como bloco. */
  --fundo:        #e5edeb;
  --superficie:   #ffffff;
  --elevado:      #ffffff;
  --recuo:        #f4f8f7;
  --realce:       #e6f5f1;

  /* Tinta, do mais forte ao mais fraco. */
  --tinta:        #142320;
  --tinta-media:  #4f6561;
  --tinta-fraca:  #83968f;

  --borda:        #e1ebe8;
  --borda-forte:  #c6d8d3;
  /* Contorno do bloco, separado do `--borda` de propósito: a borda comum
     divide coisas *dentro* do bloco (cabeçalho, linhas de lista, campos) e
     precisa ser leve; o contorno separa o bloco *do fundo* e precisa segurar.
     Uma cor só para os dois papéis deixava um dos dois errado. */
  --borda-bloco:  #d3e2dd;

  /* Marca e semântica. Cor de estado nunca é a cor da marca — nem no escuro. */
  --marca:        #0e9a82;
  --marca-tinta:  #076b58;
  --marca-fundo:  #d4f1e9;
  --vivo:         #f2610c;
  --vivo-tinta:   #c74b06;
  --vivo-fundo:   #ffe7d5;
  --ok:           #12a04b;
  --ok-fundo:     #d8f5e2;
  --atencao:      #cf8500;
  --atencao-fundo:#fdeecb;
  --erro:         #dc3a2b;
  --erro-fundo:   #fde2df;

  /* Acentos de apoio: dão vida ao painel sem competir com a marca.
     Cada um tem um papel fixo — roxo é gente, azul é agenda, rosa é pódio. */
  --roxo:         #6b4fd6;
  --roxo-fundo:   #e9e3ff;
  --azul:         #1c7cd4;
  --azul-fundo:   #daedfd;
  --rosa:         #d93a72;
  --rosa-fundo:   #fde1eb;

  /* Profundidade: usada por papel, não por enfeite. Bloco normal não tem
     sombra nenhuma — só o que precisa flutuar por cima de algo ganha uma. */
  --sombra-1: 0 1px 2px rgba(18, 38, 34, .05);
  --sombra-2: 0 6px 18px -6px rgba(18, 38, 34, .16);
  --sombra-3: 0 24px 48px -12px rgba(12, 28, 25, .28);

  /* Cantos: generosos. É a maior parte do "amigável" de uma interface. */
  --curva-g: 18px;
  --curva:   13px;
  --curva-p: 9px;
  --curva-pp: 6px;

  /* Escala de espaço. Tudo no layout sai daqui. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 28px; --e7: 40px; --e8: 60px;

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-dados: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --lateral: 246px;
}

/* O escuro é preto de verdade, com o conteúdo quase branco por cima.
   ---------------------------------------------------------------------------
   O fundo da página é `#000000`. Não é gosto: nas telas OLED — que é o que
   quase todo mundo tem no bolso — o preto puro é pixel desligado, e uma página
   de leitura assim gasta menos bateria e não brilha na cara de quem confere a
   grade às onze da noite. E, no escuro do ginásio, um fundo cinza-escuro fica
   parecendo cinza sujo; preto fica preto.

   O degrau que faz o bloco ler como bloco não vem mais da luminosidade do
   fundo, que agora é o piso e não tem para onde descer — vem da **superfície**
   subir um fio (`#0c0f0e`), e principalmente do contorno, que ficou mais
   presente. É a troca honesta: quem escolhe preto total abre mão do degrau
   suave e paga com borda.

   A tinta é quase branca (`#f6faf9`) e não branca pura: branco 100% sobre preto
   100% é o par de maior contraste possível e o que mais espalha o brilho da
   letra — o texto "vibra" e cansa em poucos minutos. Um fio de cinza no branco
   tira isso sem tirar leitura.

   Os acentos sobem de luminosidade e descem de saturação — a mesma cor que
   canta no branco vibra no preto —, e os fundos de estado voltaram a ser
   escuros: sobre preto, um selo claro seria uma lâmpada no meio da frase.

   As duas listas abaixo são a mesma paleta: uma para quem deixou o sistema
   decidir (`prefers-color-scheme`) e outra para quem escolheu o escuro no botão.
   Mexer numa sem mexer na outra é o erro clássico daqui — o tema do botão para
   de acompanhar o tema automático e ninguém percebe até alguém reclamar. Por
   isso `tools/verificar.php` compara as duas, token a token. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo:        #000000;
    --superficie:   #0c0f0e;
    --elevado:      #151918;
    --recuo:        #070908;
    --realce:       #0d2f28;
    --tinta:        #f6faf9;
    --tinta-media:  #c0ccc9;
    --tinta-fraca:  #909d99;
    --borda:        #242c2a;
    --borda-forte:  #3b4643;
    --borda-bloco:  #2b3532;
    --marca:        #34d9b6;
    --marca-tinta:  #6ee9cf;
    --marca-fundo:  #0d3a30;
    --vivo:         #ff9155;
    --vivo-tinta:   #ffab7c;
    --vivo-fundo:   #351f14;
    --ok:           #3fd977;
    --ok-fundo:     #0e3020;
    --atencao:      #f7c03c;
    --atencao-fundo:#2f2611;
    --erro:         #ff7a69;
    --erro-fundo:   #371b18;
    --roxo:         #ac99f7;
    --roxo-fundo:   #221d3f;
    --azul:         #5fb2f7;
    --azul-fundo:   #10263a;
    --rosa:         #f87fa8;
    --rosa-fundo:   #361b28;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .6);
    --sombra-2: 0 6px 18px -6px rgba(0, 0, 0, .8);
    --sombra-3: 0 24px 48px -12px rgba(0, 0, 0, .9);
  }
}

:root[data-tema="escuro"] {
  --fundo:        #000000;
  --superficie:   #0c0f0e;
  --elevado:      #151918;
  --recuo:        #070908;
  --realce:       #0d2f28;
  --tinta:        #f6faf9;
  --tinta-media:  #c0ccc9;
  --tinta-fraca:  #909d99;
  --borda:        #242c2a;
  --borda-forte:  #3b4643;
  --borda-bloco:  #2b3532;
  --marca:        #34d9b6;
  --marca-tinta:  #6ee9cf;
  --marca-fundo:  #0d3a30;
  --vivo:         #ff9155;
  --vivo-tinta:   #ffab7c;
  --vivo-fundo:   #351f14;
  --ok:           #3fd977;
  --ok-fundo:     #0e3020;
  --atencao:      #f7c03c;
  --atencao-fundo:#2f2611;
  --erro:         #ff7a69;
  --erro-fundo:   #371b18;
  --roxo:         #ac99f7;
  --roxo-fundo:   #221d3f;
  --azul:         #5fb2f7;
  --azul-fundo:   #10263a;
  --rosa:         #f87fa8;
  --rosa-fundo:   #361b28;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .6);
  --sombra-2: 0 6px 18px -6px rgba(0, 0, 0, .8);
  --sombra-3: 0 24px 48px -12px rgba(0, 0, 0, .9);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marca-tinta); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--curva-pp);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Escala tipográfica. O salto entre título de página e título de bloco é o que
   diz, sem borda nenhuma, onde uma coisa termina e outra começa. */
h1, h2, h3, h4 { margin: 0; line-height: 1.22; text-wrap: balance; letter-spacing: -.018em; }
h1 { font-size: 27px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 660; letter-spacing: -.011em; }
h3 { font-size: 14.5px; font-weight: 640; letter-spacing: -.006em; }
p  { margin: 0; }

/* Rótulo de campo, de coluna, de seção — sempre o mesmo tratamento. */
.rotulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.dado { font-family: var(--fonte-dados); font-variant-numeric: tabular-nums; font-size: .93em; }
.mini { font-size: 12.5px; color: var(--tinta-fraca); }
.medio { color: var(--tinta-media); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 2. Estrutura -------------------------------------------------------- */

.app { display: flex; min-height: 100vh; }

/* Barra lateral: o painel é operado, não lido, então a navegação fica fixa e
   fora do caminho do conteúdo — que é onde estão as planilhas largas. */
.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
}

.lateral-marca {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e5) var(--e4);
  text-decoration: none; color: inherit;
}
.sigla {
  width: 38px; height: 38px; flex: none;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--vivo), var(--marca) 75%);
  color: #fff;
  display: grid; place-content: center;
  font-size: 11px; font-weight: 800; line-height: .95; letter-spacing: .03em;
  text-align: center;
  box-shadow: var(--sombra-1);
}
.lateral-marca b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.025em; }
.lateral-marca small {
  display: block; font-size: 10.5px; color: var(--tinta-fraca);
  letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
}

.lateral nav { padding: var(--e2) var(--e3) var(--e4); flex: 1; overflow-y: auto; }
.lateral nav .rotulo { padding: var(--e4) var(--e2) var(--e2); display: block; }
.lateral nav .rotulo:first-child { padding-top: var(--e2); }

/* Item de menu: pílula inteira, não um link sublinhado. O estado atual ganha
   fundo da marca e um traço à esquerda — dois sinais, para quem enxerga pouca
   diferença de cor ainda achar onde está. */
.lateral nav a {
  position: relative;
  display: flex; align-items: center; gap: var(--e3);
  padding: 9px var(--e3);
  border-radius: var(--curva-p);
  color: var(--tinta-media);
  text-decoration: none;
  font-weight: 560; font-size: 14.5px;
  margin-bottom: 2px;
  transition: background .14s ease, color .14s ease;
}
.lateral nav a:hover { background: var(--recuo); color: var(--tinta); }
.lateral nav a[aria-current="page"] {
  background: var(--marca-fundo); color: var(--marca-tinta); font-weight: 660;
}
.lateral nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -6px;
  top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 3px; background: var(--marca);
}
.lateral nav a .icone {
  width: 26px; height: 26px; flex: none;
  display: grid; place-content: center;
  border-radius: var(--curva-pp);
  background: var(--recuo); color: var(--tinta-fraca);
  font-size: 13px;
  transition: background .14s ease, color .14s ease;
}
.lateral nav a:hover .icone { color: var(--tinta-media); }
.lateral nav a[aria-current="page"] .icone { background: var(--marca); color: #fff; }
.lateral nav a .conta {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--vivo); color: #fff;
  min-width: 20px; text-align: center;
  padding: 1px 6px; border-radius: 20px;
}

/* Rodapé da barra: quem está logado, num cartão próprio — some da lista de
   navegação e para de parecer mais um item de menu. */
.lateral-rodape { padding: var(--e3); }
.lateral-conta {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e2) var(--e2) var(--e2);
  background: var(--recuo);
  border: 1px solid var(--borda);
  border-radius: var(--curva);
  margin-bottom: var(--e2);
}
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--marca-fundo); color: var(--marca-tinta);
  display: grid; place-content: center; font-weight: 700; font-size: 12.5px;
}
.lateral-conta div { min-width: 0; }
.lateral-conta b { display: block; font-size: 13px; font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-conta .mini { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-rodape .acoes { padding: 0 var(--e1); }

.painel { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Barra superior das páginas públicas e do jurado. */
.topo {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 30;
}
.topo-interno {
  max-width: 1180px; margin: 0 auto;
  padding: var(--e3) var(--e5);
  display: flex; align-items: center; gap: var(--e5);
}
.topo nav { display: flex; align-items: center; gap: var(--e1); margin-left: auto; flex-wrap: wrap; }
.topo nav a {
  padding: 8px var(--e3); border-radius: var(--curva-p);
  color: var(--tinta-media); text-decoration: none; font-weight: 560; font-size: 14px;
  transition: background .14s ease, color .14s ease;
}
.topo nav a:hover { background: var(--recuo); color: var(--tinta); }
.topo nav a[aria-current="page"] { background: var(--marca-fundo); color: var(--marca-tinta); font-weight: 640; }

.conteudo { padding: var(--e6) var(--e6) var(--e8); max-width: 1420px; width: 100%; }
.conteudo.centrado { max-width: 1180px; margin: 0 auto; }
.conteudo.estreito { max-width: 520px; margin: 0 auto; padding-top: var(--e7); }

/* Capa da página: trilha, título, explicação e ações. Fica solta sobre o fundo
   — sem caixa —, então o primeiro retângulo que os olhos encontram já é
   conteúdo de verdade, não moldura. */
.pagina-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap;
  margin-bottom: var(--e6);
}
/* Cresce para ocupar a linha: sem isso a explicação da página quebrava em
   linhas curtas com meia tela vazia ao lado. */
.pagina-topo > div { flex: 1 1 420px; min-width: 0; }
.pagina-topo .rotulo { display: block; margin-bottom: var(--e1); }
.pagina-topo h1 + .acoes { margin-top: var(--e2); }
.pagina-topo p.medio { margin-top: var(--e2); max-width: 66ch; font-size: 14.5px; }
.pagina-topo > .acoes { padding-bottom: 2px; }

.trilha {
  display: flex; align-items: center; gap: var(--e2);
  font-size: 12.5px; color: var(--tinta-fraca);
  margin-bottom: var(--e3); flex-wrap: wrap;
}
.trilha a {
  color: var(--tinta-media); text-decoration: none; font-weight: 560;
  padding: 2px 7px; border-radius: 20px; background: var(--superficie);
  border: 1px solid var(--borda);
  transition: color .14s ease, border-color .14s ease;
}
.trilha a:hover { color: var(--marca-tinta); border-color: var(--marca); }
.trilha span { opacity: .55; }

/* --- 3. Blocos ----------------------------------------------------------- */

/* A grade que organiza os blocos. Cada bloco declara quantas colunas ocupa. */
.blocos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e5);
  align-items: start;
}
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* Um bloco alto pode ocupar duas linhas da grade, e é isso que deixa dois
   blocos pequenos empilharem ao lado dele em vez de caírem soltos embaixo. A
   grade preenche linha a linha: sem isto, a lista de atletas ficaria com um
   formulário à direita e o outro largado na linha de baixo, com sete colunas de
   vazio ao lado. */
.linhas-2 { grid-row: span 2; }

@media (max-width: 1080px) {
  .col-3, .col-4, .col-5 { grid-column: span 6; }
  .col-7, .col-8, .col-9 { grid-column: span 12; }
  /* Na largura em que o par se desfaz, mandar um bloco ocupar duas linhas
     deixaria um buraco do tamanho de uma linha embaixo dele. */
  .linhas-2 { grid-row: auto; }
}
@media (max-width: 720px) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
}

/* Separador de seção: transforma uma página de oito caixas iguais em duas ou
   três partes com nome. É a peça que faltava para páginas longas — categoria,
   evento — pararem de ser uma pilha. */
.secao {
  grid-column: span 12;
  display: flex; align-items: baseline; gap: var(--e3);
  margin: var(--e4) 0 calc(var(--e2) * -1);
}
.secao:first-child { margin-top: 0; }
.secao h2 { font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-fraca); flex: none; }
.secao p { font-size: 12.5px; color: var(--tinta-fraca); min-width: 0; }
.secao::after {
  content: ""; flex: 1; height: 1px; background: var(--borda); min-width: var(--e5);
}

/* O bloco. Peso normal: superfície limpa, contorno próprio e a menor sombra da
   escala — o bastante para descolar do fundo, longe de cartão flutuante.

   Antes não tinha sombra nenhuma, e o par "branco quase igual ao fundo + borda
   quase invisível" fazia a página ler como uma folha só. Os três pesos
   continuam a três distâncias diferentes do fundo, que é o que importa:

     sutil     quase encostado no fundo — sem contorno, sem sombra
     normal    um degrau à frente     — contorno + sombra-1
     destaque  claramente à frente    — borda firme + sombra-2 */
.bloco {
  background: var(--superficie);
  border: 1px solid var(--borda-bloco);
  border-radius: var(--curva-g);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

/* Destaque: o assunto principal da página. Ganha sombra e uma borda um tom
   mais firme, e só um por tela. */
.bloco.destaque {
  box-shadow: var(--sombra-2);
  border-color: var(--borda-forte);
}

/* Sutil: configuração, ajuda, ação rara. Some do primeiro olhar — sem contorno,
   sem sombra, fundo rebaixado — e volta quando é procurado. */
.bloco.sutil {
  background: var(--recuo);
  border-color: transparent;
  box-shadow: none;
}
.bloco.sutil > .bloco-topo { background: transparent; border-bottom-color: var(--borda); }
.bloco.sutil > .bloco-topo h2 { color: var(--tinta-media); }

.bloco-topo {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}
.bloco-topo > .titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bloco-topo h2 { min-width: 0; }
.bloco-topo .sub { font-size: 12.5px; color: var(--tinta-fraca); font-weight: 500; }
.bloco-topo .acoes { margin-left: auto; flex: none; }

/* Marcador do bloco: um quadradinho de cor com o símbolo do assunto. É o que
   permite distinguir seis blocos de relance sem ler título nenhum. */
.bloco-icone {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--curva-p);
  display: grid; place-content: center;
  font-size: 14px; line-height: 1;
  background: var(--tom-fundo, var(--marca-fundo));
  color: var(--tom, var(--marca-tinta));
}

.bloco-corpo { padding: var(--e5); }
.bloco-corpo.justo { padding: 0; }
/* Lista sozinha num bloco com respiro: encosta nas bordas, porque ela já tem
   o respiro dela. No bloco `justo` o padding já é zero — puxar de novo jogaria
   as linhas para fora e a borda ficaria cortada. */
.bloco-corpo:not(.justo) > .lista-nav:only-child { margin: calc(var(--e5) * -1); }

.bloco-rodape {
  padding: var(--e3) var(--e5);
  border-top: 1px solid var(--borda);
  background: var(--recuo);
  font-size: 12.5px; color: var(--tinta-fraca);
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
}

/* Bloco que abre e fecha. O estado fica no navegador de quem usa. */
.bloco.dobra > .bloco-topo { cursor: pointer; user-select: none; }
.bloco.dobra > .bloco-topo:hover { background: var(--recuo); }
.bloco.dobra.sutil > .bloco-topo:hover { background: var(--realce); }
.bloco.dobra > .bloco-topo::after {
  content: "⌄"; color: var(--tinta-fraca); font-size: 16px; line-height: 1;
  flex: none; width: 24px; height: 24px;
  display: grid; place-content: center;
  border-radius: 50%; background: var(--recuo);
  transition: transform .2s ease, background .14s ease;
  margin-left: var(--e1);
}
.bloco.dobra.sutil > .bloco-topo::after { background: var(--superficie); }
.bloco.dobra > .bloco-topo:hover::after { background: var(--realce); color: var(--marca-tinta); }
.bloco.dobra[data-fechado="1"] > .bloco-topo::after { transform: rotate(-90deg); }
.bloco.dobra[data-fechado="1"] > .bloco-topo { border-bottom-color: transparent; }
.bloco.dobra[data-fechado="1"] > .bloco-corpo,
.bloco.dobra[data-fechado="1"] > .bloco-rodape { display: none; }

/* Métrica: número grande só onde o número É a informação. */
.metrica { display: flex; flex-direction: column; gap: 2px; }
.metrica .rotulo { order: 2; }
.metrica .valor {
  order: 1;
  font-size: 32px; font-weight: 720; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1.05;
  color: var(--tom, var(--marca));
}
.metrica .nota { order: 3; font-size: 12px; color: var(--tinta-fraca); margin-top: var(--e1); }

/* A faixa de cor virou um selo de canto: mancha menos a peça e continua
   dando ao painel um ritmo de cor. */
.bloco.tom { position: relative; border-color: var(--borda); }
.bloco.tom::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 4px; height: 100%;
  background: var(--tom, var(--marca));
}
.bloco.tom .bloco-corpo { padding-left: calc(var(--e5) + 4px); }

.tom-marca   { --tom: var(--marca);   --tom-fundo: var(--marca-fundo); }
.tom-vivo    { --tom: var(--vivo);    --tom-fundo: var(--vivo-fundo); }
.tom-ok      { --tom: var(--ok);      --tom-fundo: var(--ok-fundo); }
.tom-atencao { --tom: var(--atencao); --tom-fundo: var(--atencao-fundo); }
.tom-erro    { --tom: var(--erro);    --tom-fundo: var(--erro-fundo); }
.tom-roxo    { --tom: var(--roxo);    --tom-fundo: var(--roxo-fundo); }
.tom-azul    { --tom: var(--azul);    --tom-fundo: var(--azul-fundo); }
.tom-rosa    { --tom: var(--rosa);    --tom-fundo: var(--rosa-fundo); }

/* --- Selos --------------------------------------------------------------- */

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 660; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 20px;
  background: var(--recuo); color: var(--tinta-media);
  border: 1px solid transparent;
  white-space: nowrap;
}
.selo.marca    { background: var(--marca-fundo);   color: var(--marca-tinta); }
.selo.ok       { background: var(--ok-fundo);      color: var(--ok); }
.selo.atencao  { background: var(--atencao-fundo); color: var(--atencao); }
.selo.erro     { background: var(--erro-fundo);    color: var(--erro); }
.selo.vivo     { background: var(--vivo-fundo);    color: var(--vivo-tinta); }
.selo.roxo     { background: var(--roxo-fundo);    color: var(--roxo); }
.selo.azul     { background: var(--azul-fundo);    color: var(--azul); }
.selo.rosa     { background: var(--rosa-fundo);    color: var(--rosa); }

/* O ponto pulsa só no "ao vivo" — é o único estado que muda sozinho na tela. */
.selo.vivo::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: pulso 1.8s ease-in-out infinite;
}
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --- Botões -------------------------------------------------------------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  font: inherit; font-weight: 640; font-size: 14px; line-height: 1.3;
  border: 1px solid var(--marca); border-radius: var(--curva-p);
  background: var(--marca); color: #fff;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter .12s ease, background .12s ease, transform .08s ease, box-shadow .12s ease;
}
.botao:hover { filter: brightness(1.07); box-shadow: var(--sombra-1); }
.botao:active { transform: translateY(1px); box-shadow: none; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.botao.suave {
  background: var(--superficie); color: var(--tinta); border-color: var(--borda-forte);
}
.botao.suave:hover { background: var(--recuo); filter: none; }
.botao.fantasma { background: transparent; border-color: transparent; color: var(--tinta-media); }
.botao.fantasma:hover { background: var(--recuo); color: var(--tinta); filter: none; box-shadow: none; }
.botao.risco { background: var(--erro); border-color: var(--erro); }
.botao.p { padding: 5px 11px; font-size: 12.5px; border-radius: var(--curva-pp); }
.botao.g { padding: 12px 22px; font-size: 15.5px; border-radius: var(--curva); }
.botao.cheio { width: 100%; }

.acoes { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }

/* --- Formulários --------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e5); }
.campo > label { font-size: 13px; font-weight: 640; color: var(--tinta); }
.campo .dica { font-size: 12.5px; color: var(--tinta-fraca); }
.campo .dica.ruim { color: var(--erro); font-weight: 560; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], input[type=search], select, textarea {
  width: 100%;
  padding: 10px 13px;
  font: inherit; font-size: 14.5px;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--curva-p);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--tinta-fraca); }
input:focus, select:focus, textarea:focus {
  border-color: var(--marca); outline: none;
  box-shadow: 0 0 0 3px var(--marca-fundo);
}
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--erro); }
input[aria-invalid=true]:focus,
select[aria-invalid=true]:focus { box-shadow: 0 0 0 3px var(--erro-fundo); }

/* O campo de estado divide a linha como qualquer outro, mas o `<select>` mede
   pelo texto da opção mais larga — "DF · Distrito Federal" estouraria a coluna
   e empurraria cidade e telefone para fora. `min-width: 0` devolve a decisão
   para a grade; a reticência resolve o resto na caixa fechada. */
.campo-uf { min-width: 0; }
.campo-uf select { text-overflow: ellipsis; }
textarea { min-height: 88px; resize: vertical; }
select { cursor: pointer; }
input[type=file] {
  font-size: 13px; color: var(--tinta-media);
  padding: var(--e2); width: 100%;
  border: 1px dashed var(--borda-forte); border-radius: var(--curva-p);
  background: var(--recuo);
}

.linha { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.linha.fim { align-items: end; }
.linha .campo { margin-bottom: 0; }

/* Escolha em pílula: alvo de clique inteiro, não só o quadradinho. */
.escolha {
  display: flex; align-items: flex-start; gap: var(--e2);
  padding: 9px var(--e3);
  border: 1px solid var(--borda); border-radius: var(--curva-p);
  background: var(--superficie);
  font-size: 14px; font-weight: 520; color: var(--tinta); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.escolha:hover { border-color: var(--borda-forte); background: var(--recuo); }
.escolha:has(input:checked) {
  border-color: var(--marca); background: var(--marca-fundo); color: var(--marca-tinta); font-weight: 600;
}
.escolha input { width: auto; margin: 3px 0 0; flex: none; accent-color: var(--marca); }

/* Cartão de escolha (planos, opções com peso). */
.opcao {
  display: block; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--curva);
  padding: var(--e5); background: var(--superficie);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.opcao:hover { border-color: var(--borda-forte); transform: translateY(-1px); }
.opcao:has(input:checked) { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); background: var(--realce); }
.opcao .preco { font-size: 24px; font-weight: 720; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* --- Avisos e recados ---------------------------------------------------- */

.recado {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--tinta-fraca);
  border-radius: var(--curva);
  background: var(--superficie);
  margin-bottom: var(--e4);
  font-size: 14px;
}
/* Recado dentro da grade ocupa a linha inteira: um aviso espremido em um doze
   avos da largura não é um aviso. */
.blocos > .recado { grid-column: span 12; }
.recado b { font-weight: 660; }
.recado.sucesso { border-color: var(--ok);      border-left-color: var(--ok);      background: var(--ok-fundo); }
.recado.erro    { border-color: var(--erro);    border-left-color: var(--erro);    background: var(--erro-fundo); }
.recado.atencao { border-color: var(--atencao); border-left-color: var(--atencao); background: var(--atencao-fundo); }
.recado .fecha { margin-left: auto; }

/* Recado flutuante das ações dinâmicas. */
#torradeira {
  position: fixed; right: var(--e5); bottom: var(--e5);
  display: flex; flex-direction: column; gap: var(--e2);
  z-index: 90; pointer-events: none;
}
.torrada {
  background: var(--elevado); color: var(--tinta);
  border: 1px solid var(--borda); border-left: 4px solid var(--marca);
  border-radius: var(--curva); box-shadow: var(--sombra-3);
  padding: 11px var(--e4); font-size: 14px; font-weight: 540;
  animation: sobe .2s ease;
}
.torrada.erro { border-left-color: var(--erro); }
.torrada.ok   { border-left-color: var(--ok); }
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } }

/* --- Estado vazio -------------------------------------------------------- */

.vazio { text-align: center; padding: var(--e7) var(--e5); }
.vazio .marca-agua {
  width: 52px; height: 52px; margin: 0 auto var(--e3);
  display: grid; place-content: center;
  border-radius: 50%; background: var(--recuo); color: var(--tinta-fraca);
  font-size: 22px;
}
.vazio b { display: block; font-size: 16px; font-weight: 660; margin-bottom: var(--e1); }
.vazio p { color: var(--tinta-fraca); font-size: 14px; max-width: 44ch; margin: 0 auto var(--e4); }

/* --- Modal ----------------------------------------------------------------
   `position: fixed` com `margin: auto` centra tanto no modo real (showModal)
   quanto no `<dialog open>` que o servidor manda quando não há JavaScript. */

.modal {
  position: fixed; inset: 0; margin: auto;
  width: min(var(--largura-modal, 720px), calc(100vw - 2 * var(--e4)));
  max-height: calc(100vh - 2 * var(--e5));
  padding: 0; border: 1px solid var(--borda);
  border-radius: var(--curva-g);
  background: var(--superficie); color: var(--tinta);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.modal[open] { display: flex; animation: entraModal .18s ease; }
.modal::backdrop { background: rgba(8, 22, 20, .5); backdrop-filter: blur(2px); }
@keyframes entraModal { from { opacity: 0; transform: translateY(10px) scale(.99); } }

.modal-topo {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borda);
  background: var(--recuo);
}
.modal-topo h2 { flex: 1; font-size: 16px; font-weight: 680; margin: 0; }

.modal-x {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-content: center;
  font-size: 20px; line-height: 1; text-decoration: none;
  color: var(--tinta-fraca); background: var(--superficie);
  border: 1px solid var(--borda);
  transition: background .12s ease, color .12s ease;
}
.modal-x:hover { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro); }

.modal-corpo { padding: var(--e5); overflow-y: auto; }

/* Formulário dentro do modal anda mais apertado: a janela tem altura limitada,
   e rolar um cadastro de 12 campos é pior do que lê-lo em duas colunas. */
.modal-corpo .campo { margin-bottom: var(--e4); }
.modal-corpo .linha { gap: var(--e3); }
.modal-corpo textarea { min-height: 62px; }
.modal-corpo .grupo { margin: var(--e4) 0 0; padding: var(--e4); }

.modal-rodape {
  display: flex; align-items: center; gap: var(--e2);
  padding-top: var(--e4); margin-top: var(--e4);
  border-top: 1px solid var(--borda);
}
.modal-rodape .dica { margin-left: auto; text-align: right; }

/* O que quase ninguém preenche fica atrás de um clique, para a janela caber
   sem rolagem no caso comum. */
.mini-acao {
  display: inline-block; margin-top: var(--e3);
  cursor: pointer; font-size: 13px; font-weight: 620;
  color: var(--marca-tinta);
}
.mini-acao:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .modal { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; border: none; }
}

/* Confirmação de ação destrutiva. Mesma janela dos outros modais, sem barra de
   título: a pergunta é o conteúdo inteiro, e um cabeçalho com "Confirmar" em
   cima da pergunta só repetiria a mesma frase duas vezes. */
.confirmacao .modal-corpo { padding: var(--e6) var(--e5) var(--e5); }
.confirma-topo { display: flex; align-items: flex-start; gap: var(--e4); }
.confirma-icone {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--erro-fundo); color: var(--erro);
  display: grid; place-content: center;
  font-size: 20px; font-weight: 800; line-height: 1;
}
.confirma-topo b { display: block; font-size: 16.5px; font-weight: 680; line-height: 1.3; text-wrap: balance; }
.confirma-topo p { margin-top: var(--e2); color: var(--tinta-media); font-size: 14px; }
.confirmacao .modal-rodape { justify-content: flex-end; }

/* --- Aviso de conexão -----------------------------------------------------
   Faixa no topo de tudo, porque "sem sinal" muda o que a pessoa deve esperar
   da tela inteira, não de um campo. */

.faixa-offline {
  position: sticky; top: 0; z-index: 60;
  padding: 10px var(--e4);
  font-size: 13.5px; font-weight: 640; text-align: center;
  background: var(--erro-fundo); color: var(--erro);
  border-bottom: 1px solid var(--erro);
}
.faixa-offline[data-tom="ok"] {
  background: var(--ok-fundo); color: var(--ok); border-bottom-color: var(--ok);
}

/* Nota digitada sem rede: nem gravada nem perdida — está na fila do aparelho. */
.volta input.aguardando {
  border-color: var(--atencao);
  background: var(--atencao-fundo);
}

/* --- Retrato do atleta ----------------------------------------------------
   Quadrado, do tamanho do marcador que ele substitui — a foto entra no lugar
   das iniciais, sem mexer no alinhamento da linha. */

.retrato {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--curva-p);
  object-fit: cover;
  background: var(--recuo);
  display: grid; place-content: center;
}
.retrato.sem-foto {
  background: var(--tom-fundo, var(--roxo-fundo));
  color: var(--tom, var(--roxo));
  font-weight: 700; font-size: 13px;
}
.retrato.g { width: 96px; height: 96px; border-radius: var(--curva); font-size: 28px; }

/* Logotipo não se recorta: o escudo da federação cortado no quadrado perde
   metade do nome. A imagem já vem gravada sobre branco, então o fundo claro
   vale nos dois temas. */
.retrato.logo { object-fit: contain; background: #fff; padding: 2px; }
.retrato.logo.sem-foto { background: var(--tom-fundo, var(--marca-fundo)); padding: 0; }

/* Na vitrine a marca é o que identifica a organização antes do nome ser lido,
   então ela vem grande — o retrato de 42px serve para lista de atleta, onde o
   nome é que manda. */
.retrato.vitrine {
  width: 72px; height: 72px; border-radius: var(--curva); font-size: 22px;
}
@media (max-width: 520px) {
  .retrato.vitrine { width: 56px; height: 56px; }
}

.ficha-foto {
  display: flex; align-items: flex-start; gap: var(--e4);
  padding-bottom: var(--e4); margin-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}
.ficha-foto .campo { flex: 1; margin-bottom: 0; }
.ficha-foto input[type="file"] { font-size: 13px; }

/* Ficha em leitura: retrato com as ações da foto embaixo, dados em duas
   colunas de rótulo e valor. */
.ficha-retrato { flex: none; display: flex; flex-direction: column; gap: var(--e2); align-items: center; }
.ficha-retrato .botao { width: 100%; }

.ficha-dados {
  flex: 1; min-width: 0; margin: 0;
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ficha-dados dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-fraca);
}
.ficha-dados dd { margin: 2px 0 0; font-size: 14px; font-weight: 540; }

.ficha-inscricao {
  display: flex; flex-direction: column; gap: var(--e1);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borda);
}
.ficha-inscricao:last-child { border-bottom: none; padding-bottom: 0; }
.ficha-inscricao-topo { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.ficha-inscricao-topo a { text-decoration: none; color: inherit; }
.ficha-inscricao-topo a:hover b { color: var(--marca-tinta); text-decoration: underline; }
.ficha-inscricao-topo b { font-size: 14.5px; font-weight: 640; }

/* O que a pessoa respondeu no formulário, além do que já é ficha. */
.ficha-respostas {
  margin: var(--e2) 0 0; padding: var(--e3);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--curva-p);
  display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.ficha-respostas dt { font-size: 11px; font-weight: 660; color: var(--tinta-fraca); }
.ficha-respostas dd { margin: 1px 0 0; font-size: 13.5px; }

/* --- Grupo de campos ------------------------------------------------------
   Separa um trecho do formulário que responde a outra pergunta — no cadastro
   de atleta, "quem é" e "onde vai competir" são decisões diferentes. */

.grupo {
  border: 1px solid var(--borda);
  border-radius: var(--curva);
  background: var(--recuo);
  padding: var(--e5);
  margin: var(--e5) 0;
}
.grupo > legend {
  padding: 0 var(--e2);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-media);
}
.grupo .campo:last-child { margin-bottom: 0; }
.grupo > .dica { display: block; }

/* --- Lista navegável ------------------------------------------------------
   Um nível de cada vez: evento › modalidade › categoria.

   Não é uma lista de links: cada item é uma peça inteira, com faixa de cor,
   marcador, números do nível de baixo e o alvo de clique do tamanho da linha.
   O que ela troca com o bloco é o propósito — bloco guarda conteúdo, lista
   leva para outro lugar. */

.lista-nav {
  list-style: none; margin: 0;
  padding: var(--e3);
  display: grid; gap: var(--e2);
}

/* Sem `--tom` aqui: `.lista-nav > li` tem especificidade maior que `.tom-roxo`
   e apagava a cor que o item pediu. O tom vem da classe; as regras abaixo
   trazem o padrão no próprio `var()`. */
.lista-nav > li {
  display: flex; align-items: stretch;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--curva);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lista-nav > li:hover {
  border-color: var(--tom, var(--marca));
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}
/* Linha sem destino: mantém a forma, larga a promessa de clique. */
.lista-nav > li:has(.parada):hover { border-color: var(--borda); box-shadow: none; transform: none; }
.lista-alvo.parada { cursor: default; }
.lista-alvo.parada:hover { background: none; }
.lista-nav > li:focus-within { border-color: var(--tom, var(--marca)); box-shadow: var(--sombra-2); }

.lista-alvo {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e4);
  text-decoration: none; color: inherit;
  border-left: 4px solid var(--tom, var(--marca));
}

/* Marcador do nível: quadrado de cor, não bolinha de lista. */
.lista-simbolo {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--curva-p);
  background: var(--tom-fundo, var(--marca-fundo)); color: var(--tom, var(--marca));
  display: grid; place-content: center;
  font-size: 17px; line-height: 1; font-weight: 620;
}

.lista-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lista-titulo {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  font-size: 15.5px; font-weight: 660; letter-spacing: -.012em; color: var(--tinta);
}
.lista-abaixo {
  font-size: 12.5px; color: var(--tinta-fraca);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Os números do nível de baixo: quantas modalidades, quantas categorias,
   quantos atletas. Ficam legíveis de relance, sem virar uma frase. */
.lista-numeros { flex: none; display: flex; gap: var(--e5); }
.lista-numero { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.lista-numero b {
  font-size: 17px; font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.lista-numero span {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 620;
  color: var(--tinta-fraca);
}
.lista-numero.apagado b { color: var(--tinta-fraca); font-weight: 500; }

.lista-meta {
  flex: none; font-size: 12.5px; color: var(--tinta-media);
  font-variant-numeric: tabular-nums; text-align: right;
}

.lista-seta {
  flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--recuo); color: var(--tinta-fraca);
  display: grid; place-content: center;
  font-size: 16px; line-height: 1;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.lista-nav > li:hover .lista-seta { background: var(--tom, var(--marca)); color: #fff; transform: translateX(2px); }

.lista-acoes {
  flex: none; display: flex; align-items: center; gap: var(--e2);
  padding: 0 var(--e3);
  border-left: 1px solid var(--borda);
  background: var(--recuo);
}
/* Campo que grava sozinho dentro da linha: menor que um campo de formulário,
   porque aqui ele é um detalhe da linha, não a pergunta principal da tela. */
.lista-acoes input, .lista-acoes select {
  margin: 0; padding: 6px var(--e2);
  font-size: 13px; height: auto; min-height: 0;
}
.lista-acoes input.peito {
  width: 64px; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 640;
}
.lista-acoes select { max-width: 150px; }
.lista-acoes form { margin: 0; }

@media (max-width: 760px) {
  .lista-alvo { flex-wrap: wrap; gap: var(--e3); padding: var(--e3); }
  .lista-corpo { flex: 1 1 60%; }
  .lista-numeros { gap: var(--e4); order: 3; flex-basis: 100%; justify-content: flex-start; }
  .lista-numero { align-items: flex-start; }
  .lista-abaixo { white-space: normal; }
}

/* ===========================================================================
   Construtor de formulário

   As perguntas são cartões numerados que viram formulário quando abertos —
   o mesmo cartão, dois estados, como no Google Forms. Não é uma lista de
   navegação (não leva a lugar nenhum) nem um bloco (são muitos, e iguais),
   então tem peça própria.
   =========================================================================== */

.perguntas { list-style: none; margin: 0; padding: var(--e3); display: grid; gap: var(--e2); }

.pergunta {
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda-forte);
  border-radius: var(--curva);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pergunta:hover { border-left-color: var(--marca); }
.pergunta.aberta {
  border-left-color: var(--marca);
  box-shadow: var(--sombra-2);
  flex-direction: column; gap: var(--e2);
}

/* Alça de arraste. `touch-action: none` é o que faz o dedo arrastar o cartão em
   vez de rolar a página — sem isso, no tablet, o gesto vira rolagem. */
.pegar {
  flex: none;
  width: 24px; height: 30px;
  display: grid; place-content: center;
  padding: 0; background: none;
  border: 1px solid transparent; border-radius: var(--curva-pp);
  color: var(--tinta-fraca); font-size: 15px; line-height: 1;
  cursor: grab; touch-action: none;
  transition: background .12s ease, color .12s ease;
}
.pegar:hover { background: var(--recuo); color: var(--tinta); }
.pegar:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.pegar:active { cursor: grabbing; }

.pergunta.arrastando {
  opacity: .65;
  box-shadow: var(--sombra-2);
  border-left-color: var(--marca);
}
.perguntas.arrastando-lista { cursor: grabbing; user-select: none; }

.pergunta-num {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--recuo); color: var(--tinta-fraca);
  display: grid; place-content: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pergunta.aberta .pergunta-num { background: var(--marca-fundo); color: var(--marca-tinta); }

.pergunta-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e1); }
.pergunta-rotulo { font-size: 15px; font-weight: 620; color: var(--tinta); }
.pergunta-rotulo em { color: var(--erro); font-style: normal; font-weight: 700; margin-left: 2px; }
.pergunta-ajuda { font-size: 12.5px; color: var(--tinta-fraca); }
.pergunta-marcas { display: flex; gap: var(--e1); flex-wrap: wrap; margin-top: var(--e1); }

.pergunta-acoes { flex: none; display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }
.pergunta-acoes form { margin: 0; }
.pergunta-editor { width: 100%; }
.pergunta-editor .campo { margin-bottom: var(--e3); }
.pergunta-editor .modal-rodape { margin-top: var(--e3); padding-top: var(--e3); }

/* Trecho do termo no cartão fechado: dá para reconhecer qual texto está ali
   sem precisar abrir a pergunta. */
.pergunta-trecho {
  font-size: 12.5px; line-height: 1.5; color: var(--tinta-media);
  background: var(--recuo); border-radius: var(--curva-pp);
  padding: var(--e2) var(--e3); margin-top: 2px;
}

/* O corpo do termo é texto de contrato: monoespaçado não, mas com medida de
   leitura e altura fixa — a caixa não pode empurrar o resto do editor. */
.termo-editor {
  min-height: 260px; line-height: 1.55;
  font-family: var(--fonte); font-size: 13.5px;
}

.modelos {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e3); margin-bottom: var(--e3);
  background: var(--recuo); border-radius: var(--curva-p);
}
.modelos .dica { flex-basis: 100%; margin: 0; }

@media (max-width: 760px) {
  .pergunta { flex-wrap: wrap; }
  .pergunta-acoes { flex-basis: 100%; justify-content: flex-end; }
}

/* Paleta de tipos: botão que diz o que a pergunta faz, não só o nome dela. */
.paleta { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
.paleta form { margin: 0; display: flex; }
.tipo {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e3) var(--e4);
  text-align: left; cursor: pointer;
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--curva);
  font: inherit; color: var(--tinta);
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.tipo:hover:not(:disabled) { border-color: var(--marca); transform: translateY(-1px); box-shadow: var(--sombra-1); }
.tipo:disabled { opacity: .45; cursor: not-allowed; }
.tipo b { font-size: 14px; font-weight: 620; }
.tipo span { font-size: 12px; color: var(--tinta-fraca); line-height: 1.35; }

/* Endereço público: o campo é para copiar, não para digitar. */
.compartilhar { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.compartilhar input {
  /* `flex-basis` e não `min-width`: o campo pede 240px e cede quando a tela não
     tem — com `min-width` ele empurrava o botão de copiar para fora da caixa no
     celular. */
  flex: 1 1 240px; min-width: 0;
  font-family: var(--fonte-dados); font-size: 13px;
  background: var(--recuo); color: var(--tinta-media);
}
.compartilhar input:focus { color: var(--tinta); }

/* Seção dentro do formulário público. */
.secao-form {
  margin: var(--e5) 0 var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}
.secao-form:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.secao-form h2 { font-size: 17px; }
.secao-form p { margin-top: var(--e1); color: var(--tinta-fraca); font-size: 13.5px; }

.opcoes-lista { display: grid; gap: var(--e1); }
.obrigatorio { color: var(--erro); font-style: normal; font-weight: 700; }

/* --- Termo de aceite ------------------------------------------------------
   O texto fica numa caixa com altura própria e rolagem: um regulamento inteiro
   solto na página empurra o botão de enviar para longe e faz a pessoa desistir
   de ler. Dentro da caixa, ele continua inteiro e selecionável — nada de
   "resumo" escondendo o que está sendo aceito. */

.termo {
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--e4);
  background: var(--recuo);
  border: 1px solid var(--borda-forte); border-radius: var(--curva-p);
  font-size: 13.5px; line-height: 1.65; color: var(--tinta-media);
  /* A borda de cima e a de baixo marcam que há mais texto do que cabe. */
  box-shadow: inset 0 -12px 12px -12px rgb(0 0 0 / .12);
}
.termo:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.termo p { margin: 0 0 var(--e3); max-width: 62ch; }
.termo p:last-child { margin-bottom: 0; }
.termo p:first-child {
  font-weight: 700; color: var(--tinta); letter-spacing: .02em; font-size: 13px;
}
.termo-rolagem { margin-top: var(--e1); }

.escolha.aceite { margin-top: var(--e2); padding: var(--e3) var(--e4); align-items: center; }
.escolha.aceite span { line-height: 1.4; }

/* No painel, o que a pessoa aceitou. Fechado por padrão: a ficha é para
   conferir a inscrição, e o texto inteiro só interessa quando alguém contesta. */
.aceites { display: grid; gap: var(--e2); margin-top: var(--e2); }
.aceite-item {
  border: 1px solid var(--borda); border-radius: var(--curva-p);
  background: var(--superficie); padding: var(--e2) var(--e3);
}
.aceite-item > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--tinta);
}
.aceite-item > summary::-webkit-details-marker { display: none; }
.aceite-item > summary::before {
  content: "✓"; color: var(--ok); font-weight: 700; flex: none;
}
.aceite-item[open] > summary { margin-bottom: var(--e2); }
.aceite-item .quando { font-weight: 400; font-size: 12px; color: var(--tinta-fraca); }
.aceite-texto {
  max-height: 300px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
  padding: var(--e3); background: var(--recuo); border-radius: var(--curva-pp);
  font-size: 12.5px; line-height: 1.6; color: var(--tinta-media);
}
.aceite-resumo {
  margin: var(--e2) 0 0;
  font-family: var(--fonte-dados); font-size: 10.5px; color: var(--tinta-fraca);
  word-break: break-all;
}

/* --- Escolher foto --------------------------------------------------------
   O input nativo sai de cena e o rótulo assume: assim o campo tem a mesma cara
   no Android, no iPhone, no Windows e no Linux. O input continua no fluxo do
   teclado, só que sem tamanho — some da tela, não da navegação. */

.campo-foto { display: grid; gap: var(--e2); }

/* `input.` e não só `.entrada-arquivo`: a regra geral de formulário é
   `input[type=file] { width: 100% }`, que tem especificidade maior que uma
   classe sozinha — o input "escondido" continuava com a largura inteira,
   absoluto fora da grade, e empurrava a página para o lado com uma barra de
   rolagem horizontal que ninguém sabia de onde vinha. */
input.entrada-arquivo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.alvo-foto {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4);
  background: var(--recuo);
  border: 1.5px dashed var(--borda-forte); border-radius: var(--curva);
  cursor: pointer; color: var(--tinta);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.alvo-foto:hover { border-color: var(--marca); background: var(--realce); }
input.entrada-arquivo:focus-visible + .alvo-foto {
  outline: 2px solid var(--marca); outline-offset: 2px; border-color: var(--marca);
}
input.entrada-arquivo[aria-invalid="true"] + .alvo-foto { border-color: var(--erro); }

.alvo-icone {
  flex: none; width: 46px; height: 46px; border-radius: var(--curva-p);
  display: grid; place-content: center;
  background: var(--marca-fundo); color: var(--marca-tinta);
}
.alvo-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alvo-texto b { font-size: 14.5px; font-weight: 620; }
.alvo-dica { font-size: 12.5px; color: var(--tinta-fraca); line-height: 1.4; }

/* Preenchido: o tracejado vira linha cheia — a diferença entre "falta escolher"
   e "já escolhi" se lê sem ler. */
.campo-foto.pronto .alvo-foto {
  border-style: solid; border-color: var(--marca); background: var(--realce);
}

/* A miniatura ocupa o lugar do ícone, no mesmo tamanho: o campo não muda de
   altura ao escolher a foto, e o que aparece ali é a resposta à única pergunta
   que importa — é esta a foto certa? */
.alvo-miniatura {
  flex: none; width: 46px; height: 46px;
  object-fit: cover; border-radius: var(--curva-p);
  background: var(--recuo);
  box-shadow: 0 0 0 1px var(--borda);
}
/* Logotipo não se recorta nem aqui. */
.campo-foto.logo .alvo-miniatura { object-fit: contain; background: #fff; }

/* Faixa de categoria: separa as listas dentro de um bloco de modalidade, na
   visão geral de atletas. Não é um bloco dentro do bloco — é uma etiqueta de
   gaveta, para o segundo nível do agrupamento não virar mais uma caixa. */
.faixa-categoria {
  display: flex; align-items: baseline; gap: var(--e3);
  padding: var(--e3) var(--e4) var(--e1);
  font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.faixa-categoria a { color: var(--tinta-media); text-decoration: none; }
.faixa-categoria a:hover { color: var(--marca-tinta); text-decoration: underline; }
.faixa-categoria span {
  font-weight: 600; letter-spacing: .04em;
  color: var(--tinta-fraca); text-transform: none;
}
.faixa-categoria::after {
  content: ""; flex: 1; height: 1px; background: var(--borda); min-width: var(--e4);
}
.faixa-categoria + .lista-nav { padding-top: var(--e2); }

/* ===========================================================================
   Planilha — o bloco de lista.

   Segue o modelo que quem organiza evento já conhece da planilha: numeração de
   linha à esquerda, cabeçalho que não sai da tela, coluna de identificação
   congelada, ordenação por clique, filtro por coluna e navegação por teclado.
   =========================================================================== */

.planilha-caixa { display: flex; flex-direction: column; min-width: 0; }

.planilha-barra {
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda);
  background: var(--recuo);
  flex-wrap: wrap;
}
.planilha-busca { position: relative; flex: 1; min-width: 160px; max-width: 320px; }
.planilha-busca input { padding-left: 32px; font-size: 13.5px; padding-top: 7px; padding-bottom: 7px; }
.planilha-busca::before {
  content: "⌕"; position: absolute; left: 11px; top: 50%; transform: translateY(-52%);
  color: var(--tinta-fraca); font-size: 16px; pointer-events: none; z-index: 1;
}
.planilha-contagem { font-size: 12.5px; color: var(--tinta-fraca); margin-left: auto; font-variant-numeric: tabular-nums; }

.planilha-rolagem {
  overflow: auto;
  max-height: var(--altura-planilha, none);
  scrollbar-width: thin;
}

table.planilha {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

table.planilha th, table.planilha td {
  padding: 0 var(--e4);
  height: 42px;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  vertical-align: middle;
  background: var(--superficie);
}

/* Cabeçalho preso ao topo: rolar 200 atletas sem perder o nome da coluna. */
table.planilha thead th {
  position: sticky; top: 0; z-index: 4;
  background: var(--recuo);
  border-bottom: 1px solid var(--borda-forte);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-fraca);
  white-space: nowrap;
  user-select: none;
  height: 38px;
}
table.planilha thead th.ordenavel { cursor: pointer; }
table.planilha thead th.ordenavel:hover { color: var(--tinta); background: var(--realce); }
table.planilha thead th .seta { opacity: 0; margin-left: 4px; font-size: 9px; }
table.planilha thead th[aria-sort] { color: var(--marca-tinta); }
table.planilha thead th[aria-sort] .seta { opacity: 1; }
table.planilha thead th[aria-sort="descending"] .seta { display: inline-block; transform: rotate(180deg); }

/* Coluna de numeração — a marca registrada da planilha. */
table.planilha .linha-num {
  width: 42px; min-width: 42px;
  padding: 0 var(--e3);
  text-align: right;
  color: var(--tinta-fraca);
  font-family: var(--fonte-dados); font-size: 11.5px;
  background: var(--recuo);
  border-right: 1px solid var(--borda);
  position: sticky; left: 0; z-index: 3;
  user-select: none;
}
table.planilha thead .linha-num { z-index: 5; }

/* Primeira coluna de dados congelada, para a identificação não sumir. */
table.planilha .fixa {
  position: sticky; left: 42px; z-index: 3;
  border-right: 1px solid var(--borda);
}
table.planilha thead .fixa { z-index: 5; }

table.planilha tbody tr:nth-child(even) td { background: var(--recuo); }
table.planilha tbody tr:nth-child(even) .linha-num { background: var(--recuo); }
table.planilha tbody tr:hover td,
table.planilha tbody tr:hover .linha-num { background: var(--realce); }
table.planilha tbody tr[data-oculta] { display: none; }
table.planilha tbody tr:last-child td { border-bottom: none; }

table.planilha td.num { text-align: right; font-family: var(--fonte-dados); font-variant-numeric: tabular-nums; }
table.planilha th.num { text-align: right; }
table.planilha td.centro, table.planilha th.centro { text-align: center; }
table.planilha td.acoes-celula { text-align: right; white-space: nowrap; }
table.planilha td.acoes-celula .acoes { justify-content: flex-end; flex-wrap: nowrap; }

table.planilha .principal { font-weight: 620; color: var(--tinta); }
table.planilha .abaixo { display: block; font-size: 11.5px; color: var(--tinta-fraca); line-height: 1.3; margin-top: -2px; }
table.planilha td.duplo { padding-top: 7px; padding-bottom: 7px; height: auto; }

/* Célula que se edita no lugar, como numa planilha. */
table.planilha td.editavel { padding: 0; }
table.planilha td.editavel input, table.planilha td.editavel select {
  border: 1px solid transparent; background: transparent;
  border-radius: 0; height: 42px; padding: 0 var(--e4);
  font-size: 14px;
}
table.planilha td.editavel input:hover, table.planilha td.editavel select:hover {
  border-color: var(--borda-forte); background: var(--superficie);
}
table.planilha td.editavel input:focus, table.planilha td.editavel select:focus {
  border-color: var(--marca); background: var(--superficie);
  box-shadow: inset 0 0 0 2px var(--marca-fundo);
}
table.planilha td.editavel .salvo { animation: piscaOk 1.1s ease; }
@keyframes piscaOk { 0%, 60% { background: var(--ok-fundo); } 100% { background: transparent; } }
table.planilha td.editavel .falhou { box-shadow: inset 0 0 0 2px var(--erro-fundo); border-color: var(--erro); }

table.planilha tfoot td {
  position: sticky; bottom: 0;
  background: var(--recuo);
  border-top: 1px solid var(--borda-forte);
  border-bottom: none;
  font-weight: 660; font-size: 13px;
}

/* Destaques de linha usados pelo ranking. */
table.planilha tr.parcial td { color: var(--tinta-fraca); }
table.planilha tr.fora td .principal { text-decoration: line-through; color: var(--tinta-fraca); }
table.planilha tr.podio-1 td { background: var(--marca-fundo); }
table.planilha tr.podio-1:nth-child(even) td { background: var(--marca-fundo); }

/* --- Pódio --------------------------------------------------------------- */

.podio { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.podio-lugar {
  border: 1px solid var(--borda); border-radius: var(--curva);
  padding: var(--e5); text-align: center; background: var(--superficie);
}
.podio-lugar.primeiro {
  border-color: var(--marca); background: var(--marca-fundo);
  box-shadow: var(--sombra-2);
}
.podio-lugar .posicao { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; color: var(--tinta-fraca); }
.podio-lugar.primeiro .posicao { color: var(--marca-tinta); }
.podio-lugar .nome { font-weight: 680; font-size: 16px; margin: var(--e2) 0 2px; text-wrap: balance; }
.podio-lugar .nota { font-size: 34px; font-weight: 740; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--marca-tinta); }

/* --- Painel do jurado ---------------------------------------------------- */

.folha { display: flex; flex-direction: column; gap: var(--e3); }

.atleta {
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--curva);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.atleta[data-completo="1"] { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok-fundo); }
.atleta-topo { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borda); }
.peito {
  min-width: 50px; height: 50px; padding: 0 8px; flex: none;
  border-radius: var(--curva-p);
  background: var(--marca-fundo); color: var(--marca-tinta);
  display: grid; place-content: center;
  font-weight: 760; font-size: 19px; font-variant-numeric: tabular-nums;
}
.atleta[data-completo="1"] .peito { background: var(--ok-fundo); color: var(--ok); }
.atleta-nome { font-weight: 660; font-size: 16.5px; line-height: 1.2; }
.atleta-abaixo { font-size: 12.5px; color: var(--tinta-fraca); }
.atleta-marca { margin-left: auto; }

.voltas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); padding: var(--e4); }
.volta { display: flex; flex-direction: column; gap: 5px; }
/* Alvo de toque grande: quem usa isso está no sol, com pressa, de pé. */
.volta input {
  font-size: 24px; font-weight: 720; text-align: center;
  padding: 12px 6px; border-width: 2px; border-radius: var(--curva);
  font-variant-numeric: tabular-nums;
}
.volta input.gravada { border-color: var(--ok); background: var(--ok-fundo); }
.volta input.falhou  { border-color: var(--erro); background: var(--erro-fundo); }

.barra-baixo {
  position: sticky; bottom: var(--e3); z-index: 20;
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
  padding: var(--e4);
  background: var(--elevado);
  border: 1px solid var(--borda-forte);
  border-radius: var(--curva-g);
  box-shadow: var(--sombra-3);
  margin-top: var(--e4);
}
.progresso { flex: 1; min-width: 180px; }
.progresso .texto { font-size: 13.5px; color: var(--tinta-media); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.barrinha { height: 8px; border-radius: 20px; background: var(--borda); overflow: hidden; }
.barrinha i { display: block; height: 100%; background: var(--marca); border-radius: 20px; transition: width .3s ease; }
.barrinha i.cheia { background: var(--ok); }

/* --- Lista arrastável ---------------------------------------------------- */

.ordenavel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ordenavel li {
  display: flex; align-items: center; gap: var(--e3);
  padding: 8px var(--e3);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--curva-p);
  font-size: 14px;
}
.ordenavel[data-ativa="1"] li { cursor: grab; }
.ordenavel li.arrastando { opacity: .35; }
.ordenavel li.alvo { border-color: var(--marca); border-style: dashed; background: var(--realce); }
.ordenavel .punho { color: var(--tinta-fraca); cursor: grab; line-height: 1; }
.ordenavel .pos {
  font-family: var(--fonte-dados); font-size: 11.5px; color: var(--tinta-fraca);
  min-width: 22px;
}
.ordenavel .nome { flex: 1; min-width: 0; font-weight: 560; }

/* --- Painel lateral em telas pequenas ------------------------------------ */

.abrir-lateral { display: none; }

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .lateral {
    position: fixed; inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--sombra-3);
  }
  .lateral[data-aberta="1"] { transform: none; }
  .abrir-lateral {
    display: inline-flex; position: sticky; top: 0; z-index: 25;
    align-items: center; gap: var(--e2);
    width: 100%; padding: var(--e3) var(--e4);
    background: var(--superficie); border-bottom: 1px solid var(--borda);
    font: inherit; font-weight: 620; cursor: pointer; color: var(--tinta);
    border-left: none; border-right: none; border-top: none;
  }
  .conteudo { padding: var(--e5) var(--e5) var(--e7); }
  .topo-interno { padding: var(--e3) var(--e4); gap: var(--e3); }
}

@media (max-width: 640px) {
  .conteudo { padding: var(--e4) var(--e4) var(--e7); }
  .conteudo.estreito { padding-top: var(--e5); }
  h1 { font-size: 22px; }
  .blocos { gap: var(--e4); }
  .bloco-corpo { padding: var(--e4); }
  .bloco-topo { padding: var(--e3) var(--e4); }
  .bloco-corpo:not(.justo) > .lista-nav:only-child { margin: calc(var(--e4) * -1); }
  .planilha-barra { padding: var(--e2); }
  .pagina-topo { margin-bottom: var(--e5); }
}

/* --- Abas ------------------------------------------------------------------
   Seções do mesmo assunto numa página só. A aba aberta é a única com fundo de
   superfície: ela parece a folha de cima da pilha, e as outras, as de baixo.

   Havia **duas** definições de `.abas` nesta folha, de épocas diferentes — uma
   em pílula e esta em pasta. As duas se somavam na cascata, e o que sobrava era
   o pior das duas: a moldura de uma com o recheio da outra e, principalmente, o
   `overflow-x: auto` da primeira, que punha uma barra de rolagem horizontal
   dentro do bloco toda vez que os rótulos passavam da largura — que é o que
   acontece com "Entrar / Criar organização" numa coluna estreita. Ficou uma. */

.abas {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin-bottom: var(--e5);
  padding-bottom: 0;
  max-width: 100%;
  border-bottom: 1px solid var(--borda);
}
.abas a {
  display: flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: var(--e3) var(--e5);
  /* Encolhe antes de empurrar: a aba cede largura até o texto quebrar, e é o
     texto que quebra — não a página que ganha rolagem lateral. */
  flex: 1 1 auto; min-width: 0;
  text-decoration: none; color: var(--tinta-media);
  font-size: 14px; font-weight: 600; text-align: center;
  border: 1px solid transparent; border-bottom: none;
  border-radius: var(--curva-p) var(--curva-p) 0 0;
  margin-bottom: -1px;
  transition: color .12s ease, background .12s ease;
}
.abas a span { font-size: 15px; opacity: .8; }
.abas a:hover { color: var(--tinta); background: var(--recuo); }
.abas a[aria-current="page"] {
  color: var(--marca-tinta); background: var(--superficie);
  border-color: var(--borda); border-bottom: 1px solid var(--superficie);
}
.abas a[aria-current="page"] span { opacity: 1; }

/* Quatro abas (a conta da instituição) não cabem lado a lado no celular: elas
   passam a ocupar meia largura cada, em duas fileiras, em vez de espremer
   quatro rótulos numa linha só. */
@media (max-width: 560px) {
  .abas a { flex: 1 1 44%; padding: var(--e3) var(--e2); font-size: 13.5px; }
}

/* --- Vitrine: busca e calendário -------------------------------------------
   Duas perguntas, dois lados: quem organiza à esquerda, quando tem prova à
   direita. */

.busca-vitrine {
  display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap;
  padding: var(--e4);
  border-bottom: 1px solid var(--borda);
}
.busca-vitrine input { flex: 1; min-width: 180px; }

.cal-topo {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e2) var(--e4);
  border-bottom: 1px solid var(--borda);
}
.cal-mes {
  font-size: 14px; font-weight: 660; text-transform: capitalize;
  min-width: 9.5em;
}
.cal-conta { margin-left: auto; font-size: 12px; color: var(--tinta-fraca); }

/* A dica do gesto só existe onde o gesto existe. No computador ela seria uma
   instrução para uma coisa que ninguém vai fazer, ocupando a linha da seta. */
.cal-dica { display: none; }
@media (hover: none) and (pointer: coarse) {
  .cal-dica {
    display: block; flex-basis: 100%;
    font-size: 11px; color: var(--tinta-fraca);
  }
}

/* --- Passar o mês arrastando ----------------------------------------------
   `pan-y` é a linha que faz o gesto conviver com a página: o navegador fica
   com a rolagem vertical (que é o que o dedo faz o tempo todo por cima do
   calendário) e entrega o movimento horizontal para o script. Com
   `touch-action: none` o calendário viraria um buraco onde a página não rola;
   sem nada, o horizontal também seria engolido pela rolagem. */
.calendario {
  padding: var(--e2) var(--e4) var(--e3);
  touch-action: pan-y;
  transition: transform .18s ease, opacity .18s ease;
}

/* Durante a arrastada o mês acompanha o dedo sem transição — animar aqui daria
   um atraso entre o dedo e a grade, que é exatamente o que faz um gesto
   parecer quebrado. */
.calendario.arrastando {
  transition: none; cursor: grabbing; user-select: none;
}
.calendario.arrastando .cal-evento { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .calendario { transition: none; }
}

.cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-semana { gap: 1px; margin-bottom: 2px; }
.cal-semana span {
  text-align: center; padding: 2px 0;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-fraca);
}

/* A grade é uma tabela sem <table>: as bordas encostam para o mês ler como um
   bloco só, e não como 35 cartõezinhos soltos. */
.cal-grade {
  gap: 0;
  border: 1px solid var(--borda); border-radius: var(--curva-p);
  overflow: hidden;
}
.cal-dia {
  /* Altura de dois compromissos, não de agenda de parede: a grade responde
     "que dia tem prova", e o nome inteiro de cada uma quem lê é a lista
     logo abaixo. */
  min-height: 58px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 3px 4px 4px;
  border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}
.cal-dia:nth-child(7n) { border-right: none; }
.cal-dia:nth-last-child(-n+7) { border-bottom: none; }

.cal-dia.fora { background: var(--recuo); }
.cal-dia.fora .cal-num { color: var(--tinta-fraca); opacity: .6; }
.cal-dia.tem { background: var(--realce); }

.cal-num {
  font-size: 11.5px; font-weight: 640; color: var(--tinta-media);
  font-variant-numeric: tabular-nums; padding-left: 2px; line-height: 1.2;
}
.cal-dia.hoje .cal-num {
  align-self: flex-start;
  background: var(--marca); color: #fff;
  border-radius: 999px; padding: 0 6px;
}

.cal-evento {
  display: block; text-decoration: none;
  font-size: 10.5px; font-weight: 600; line-height: 1.3;
  padding: 1px 4px; border-radius: var(--curva-pp);
  background: var(--marca-fundo); color: var(--marca-tinta);
  border-left: 3px solid var(--marca);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-evento:hover { filter: brightness(.97); text-decoration: underline; }
.cal-evento.vivo {
  background: var(--vivo-fundo); color: var(--vivo-tinta); border-left-color: var(--vivo);
}
.cal-evento.passado {
  background: var(--recuo); color: var(--tinta-fraca); border-left-color: var(--borda-forte);
}
.cal-mais { font-size: 10px; color: var(--tinta-fraca); padding-left: 4px; }

.cal-vazio {
  padding: var(--e5) var(--e4); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--e3);
  color: var(--tinta-fraca);
}
.cal-vazio p { margin: 0; font-size: 14px; }

/* A lista embaixo da grade é a mesma informação em outra ordem: a grade
   responde "que dia", a lista responde "quais são" — no celular, onde a grade
   fica apertada, é ela que carrega o texto. */
.cal-lista { list-style: none; margin: 0; padding: 0 var(--e4) var(--e4); }
.cal-lista li {
  display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap;
  padding: var(--e2) 0;
  border-top: 1px solid var(--borda);
  font-size: 13.5px;
}
.cal-data {
  font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--tinta-media); min-width: 5.5em; font-size: 12.5px;
}
.cal-lista a { font-weight: 600; color: var(--tinta); text-decoration: none; }
.cal-lista a:hover { color: var(--marca); text-decoration: underline; }
.cal-onde { font-size: 12px; color: var(--tinta-fraca); }

@media (max-width: 860px) {
  .cal-dia { min-height: 44px; }
  /* Numa tela estreita o nome do evento não cabe: o dia fica marcado por uma
     barra de cor, e o nome quem lê é a lista logo abaixo. */
  .cal-evento {
    height: 6px; padding: 0; border-left: none;
    text-indent: -9999px; overflow: hidden;
  }
  .cal-mais { display: none; }
}

/* --- Pagamento ------------------------------------------------------------

   O formulário do cartão é desenhado pelo SDK do Mercado Pago dentro de
   #mp-brick, num iframe. Não dá para estilizar o que está lá dentro, e não é
   para dar: é o isolamento do iframe que mantém o número do cartão fora do
   alcance de qualquer script nosso. O que fica por nossa conta é a moldura. */

#mp-brick { min-height: 320px; }

.pix-caixa {
  display: flex; gap: var(--e5); align-items: flex-start; flex-wrap: wrap;
}

.pix-qr {
  /* Nunca maior que a tela: num celular de 320px o quadrado fixo de 232px mais
     a margem da caixa já não cabia, e o QR — que é justamente o que se lê no
     celular — saía pela direita. */
  width: min(232px, 100%); aspect-ratio: 1; height: auto; flex: none;
  background: #fff; padding: var(--e3);
  border: 1px solid var(--borda); border-radius: var(--curva-p);
  /* O QR chega como PNG pequeno; ampliá-lo com suavização borra os módulos e
     há leitor de banco que desiste de ler. */
  image-rendering: pixelated;
}

.pix-lado { flex: 1 1 260px; min-width: 0; }

.pix-lado textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; word-break: break-all;
}

.resumo { margin: 0; }
.resumo dt {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-fraca); margin-top: var(--e3);
}
.resumo dd { margin: 2px 0 0; font-size: 15px; }

/* Imprimir é como sai o PDF: o navegador já sabe gerar um, e um PDF que é a
   página bem impressa vale mais do que um layout paralelo para manter. */
@media print {
  .lateral, .topo, .planilha-barra, .acoes, .barra-baixo, #torradeira,
  .lista-seta, .lista-acoes, .trilha, .modal, .recado, .abrir-lateral,
  .bloco-icone { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .conteudo { padding: 0; max-width: none; }
  .blocos { display: block; }

  .bloco {
    border: none; box-shadow: none; break-inside: avoid;
    margin-bottom: 8mm; page-break-inside: avoid; background: none;
  }
  .bloco-topo { border-bottom: 1pt solid #000; padding: 0 0 2mm; background: none; }
  .bloco-corpo { padding: 0; }
  .bloco-corpo > .lista-nav:only-child { margin: 0; }

  .secao { margin: 6mm 0 2mm; }
  .secao h2 { font-size: 9pt; }

  .pagina-topo { margin-bottom: 4mm; }
  .pagina-topo h1 { font-size: 18pt; }

  /* A lista vira folha: uma linha por atleta, sem cartão nem cor de fundo,
     porque tinta colorida em folha de resultado é desperdício. */
  .lista-nav { padding: 0; gap: 0; }
  .lista-nav > li {
    border: none; border-bottom: .5pt solid #999; border-radius: 0;
    /* Agora todo bloco tem sombra na tela, e sombra no papel só suja o toner. */
    background: none; box-shadow: none; break-inside: avoid;
  }
  .lista-alvo { border-left: none; padding: 1.6mm 0; gap: 4mm; }
  .lista-simbolo { background: none; color: #000; width: auto; min-width: 8mm; font-weight: 700; }
  .lista-titulo { font-size: 11pt; }
  .lista-abaixo { color: #444; font-size: 8.5pt; }
  .lista-numero b { font-size: 11pt; }
  .lista-numero span { color: #444; }

  .selo { border: .5pt solid #666; background: none !important; color: #000 !important; }

  table.planilha { font-size: 9pt; }
  table.planilha th { background: none; border-bottom: 1pt solid #000; }
  table.planilha td { border-bottom: .5pt solid #ccc; }

  a[href]::after { content: ''; }
}


/* ===========================================================================
   TORCIDA
   ---------------------------------------------------------------------------
   Curtir, comentar e compartilhar na vitrine. É a única parte do sistema feita
   para quem está na arquibancada, e não para quem opera a prova: os alvos são
   maiores, a leitura é de celular na mão e o coração precisa dizer sozinho, sem
   texto, se você já curtiu.
   =========================================================================== */

.torcida-numeros {
  display: flex; flex-wrap: wrap; gap: var(--e4);
  padding-bottom: var(--e3); margin-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
}

.torcida-numero { display: flex; align-items: baseline; gap: var(--e1); }
.torcida-numero .icone { color: var(--rosa); font-size: 15px; }
.torcida-numero b { font-size: 20px; font-variant-numeric: tabular-nums; }
.torcida-numero > span:last-child { color: var(--tinta-media); font-size: 12.5px; }

/* Zero em cinza: a página mostra que ninguém passou por ali sem gritar. */
.torcida-numero.apagado .icone,
.torcida-numero.apagado b { color: var(--tinta-fraca); }

/* O formulário é só o invólucro do botão — ele não pode ocupar linha nem
   empurrar o que está ao lado, principalmente dentro de uma linha de lista. */
.torcida-form { display: inline-flex; margin: 0; }
.torcida-form + .torcida-form { margin-left: var(--e2); }

/* O coração das listas: pequeno, com o número colado, e vermelho quando é seu.
   Sem a cor, o único jeito de saber se você já curtiu seria clicar. */
.botao.curtir { gap: var(--e1); font-variant-numeric: tabular-nums; }
.botao.curtir span[aria-hidden] { color: var(--tinta-fraca); transition: transform .15s ease; }
.botao.curtir.curtido { color: var(--rosa); border-color: var(--rosa); }
.botao.curtir.curtido span[aria-hidden] { color: var(--rosa); }
.botao.curtir:hover span[aria-hidden] { transform: scale(1.18); }
.botao.curtir[aria-pressed="true"] { background: var(--rosa-fundo); }

.torcida-convite {
  background: var(--recuo); border: 1px dashed var(--borda-forte);
  border-radius: var(--curva); padding: var(--e4);
}
.torcida-convite p { margin: 0 0 var(--e3); color: var(--tinta-media); }
.torcida-convite p.mini { margin: var(--e3) 0 0; }
.torcida-convite .acoes { flex-wrap: wrap; }

/* ---- Os três ícones da linha --------------------------------------------- */
/*
   Ícone e número, sem rótulo: numa lista de vinte etapas, três palavras por
   linha viram sessenta palavras que ninguém lê. O alvo continua grande o
   bastante para o dedo — 32px de altura —, que é o mínimo para não errar o
   coração e acabar abrindo o evento.
*/

.torcida-icones {
  display: inline-flex; align-items: center; gap: var(--e1); flex-wrap: wrap;
}

/*
   Os três ícones ficam EMBAIXO da linha, e não na coluna da direita.
   À direita eles disputavam espaço com os contadores do próprio evento
   (categorias, atletas) e, num item estreito, empurravam o nome para duas
   linhas. Embaixo, a linha lê-se de cima para baixo: o que é o evento, quando
   e onde, e só então o que se pode fazer com ele.
*/
.lista-nav > li:has(.torcida-icones) { flex-wrap: wrap; }
.lista-nav > li > .lista-acoes:has(.torcida-icones) {
  flex-basis: 100%; justify-content: flex-start;
  padding: var(--e2) var(--e4) var(--e3);
  border-left: none; border-top: 1px solid var(--borda);
  background: none;
}

/* Na agenda do calendário a linha já quebra sozinha: basta a torcida ocupar
   uma linha inteira para não ficar pendurada no fim do endereço. */
.cal-lista .torcida-icones { flex-basis: 100%; margin-top: 2px; }

/* Na página do evento eles vêm logo abaixo do título e da ficha, pelo mesmo
   motivo: primeiro o que é, depois o que fazer. */
.torcida-barra {
  margin: calc(var(--e4) * -1) 0 var(--e5);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}
.torcida-icones .botao,
.torcida-icones summary {
  gap: 4px; padding: 5px 8px; min-height: 32px;
  font-variant-numeric: tabular-nums;
}
.torcida-icones b { font-size: 13px; }

/* O menu de compartilhar é um <details>: abre no clique sem JavaScript e sem
   sair da página, que é o que uma gaveta de quatro links precisa fazer. */
.torcida-partilha { position: relative; display: inline-block; }
.torcida-partilha > summary { list-style: none; cursor: pointer; }
.torcida-partilha > summary::-webkit-details-marker { display: none; }
.torcida-partilha > summary::marker { content: ''; }

.torcida-redes {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  display: grid; gap: 2px; min-width: 176px; padding: var(--e2);
  background: var(--elevado); border: 1px solid var(--borda-forte);
  border-radius: var(--curva-p); box-shadow: var(--sombra-2);
}
.torcida-redes a,
.torcida-redes button {
  display: flex; align-items: center; gap: var(--e2); width: 100%;
  padding: 7px 8px; border: none; border-radius: var(--curva-pp);
  background: none; color: var(--tinta); cursor: pointer;
  font: inherit; font-size: 13px; text-align: left; text-decoration: none;
}
.torcida-redes a:hover,
.torcida-redes button:hover { background: var(--recuo); }

/* A gaveta precisa poder sair da linha.
   `overflow: hidden` é o que arredonda o canto do item da lista e do bloco —
   e era ele que cortava o menu de compartilhar: o menu abria dentro da linha,
   encostava na borda e ficava preso ali, mostrando meia opção. Enquanto a
   gaveta está aberta, os dois deixam passar. */
.lista-nav > li:has(.torcida-partilha[open]),
.bloco:has(.torcida-partilha[open]),
.cal-lista:has(.torcida-partilha[open]) { overflow: visible; }

/* ---- A janela da conversa ------------------------------------------------ */

.torcida-modal .modal-corpo { max-height: min(70vh, 640px); overflow-y: auto; }
.torcida-conversa > .torcida-form { display: block; margin-bottom: var(--e4); }
.torcida-conversa > .vazio { margin-top: var(--e4); }

.torcida-acoes-fala {
  display: flex; align-items: center; gap: var(--e2); margin-top: var(--e2);
  flex-wrap: wrap;
}

/* ---- Responder ----------------------------------------------------------- */
/*
   A caixa nasce fechada. Trinta falas com trinta caixas de texto abertas
   embaixo dariam uma página de formulários com comentários no meio — e no
   celular a conversa não caberia mais na tela.
*/

.torcida-responder > summary { list-style: none; cursor: pointer; }
.torcida-responder > summary::-webkit-details-marker { display: none; }
.torcida-responder > summary::marker { content: ''; }

/* Aberta, a caixa ocupa a linha inteira: um textarea espremido ao lado do
   coração não é onde alguém escreve duas frases. */
.torcida-responder[open] { flex-basis: 100%; }
.torcida-responder[open] > summary { margin-bottom: var(--e2); }
.torcida-responder form.torcida-form { display: block; margin: 0; }
.torcida-responder textarea { min-height: 62px; }

/* ---- A conversa ---------------------------------------------------------- */

.torcida-comentarios { list-style: none; margin: var(--e4) 0 0; padding: 0; }

.torcida-comentarios > li {
  display: flex; gap: var(--e3); padding: var(--e3) 0;
  border-top: 1px solid var(--borda);
}
.torcida-comentarios > li:first-child { border-top: none; }
.torcida-comentarios > li > div { flex: 1; min-width: 0; }

.torcida-comentarios .avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--marca-fundo); color: var(--marca-tinta);
  font-size: 12px; font-weight: 700;
}

/* O seu comentário fica marcado à esquerda: numa conversa de trinta linhas,
   achar o que você escreveu não pode depender de ler os nomes um a um. */
.torcida-comentarios > li.meu {
  border-left: 3px solid var(--marca); padding-left: var(--e3);
  background: var(--recuo); border-radius: var(--curva-p);
}

/* Lápide: o texto continua legível, mas nada nele convida a ler de novo. */
.torcida-comentarios > li.removido { opacity: .62; }
.torcida-comentarios > li.removido p { text-decoration: line-through; }

/* ---- O fio: as respostas embaixo da fala de origem ------------------------
   Um nível de recuo, e só um. A barra à esquerda é o que diz, sem palavra
   nenhuma, que aquelas linhas pertencem à de cima — e é ela que segura a
   leitura quando o fio tem oito respostas. */

/* O fio abre e fecha sem JavaScript: uma caixa de seleção escondida na fileira
   de ações, o rótulo por cima dela e a lista de respostas escondida enquanto a
   caixa está desmarcada. `:has()` é o que permite ao botão morar na fileira e à
   lista morar embaixo dela — com `<details>` as duas teriam de ser a mesma
   caixa, e o botão viraria uma linha própria.

   Onde `:has()` não existe, as respostas simplesmente aparecem abertas: a
   conversa fica mais longa, e nada quebra. */
.torcida-acoes-fala label[for^="fio-"] { color: var(--marca-tinta); }
.torcida-acoes-fala:has(.fio-chave:checked) label[for^="fio-"] {
  background: var(--marca-fundo); border-color: var(--marca);
}
.torcida-acoes-fala:has(.fio-chave:not(:checked)) + .torcida-respostas {
  display: none;
}
.fio-chave:focus-visible + label { outline: 2px solid var(--marca); outline-offset: 2px; }

.torcida-respostas {
  margin: var(--e2) 0 0; padding-left: var(--e4);
  border-left: 2px solid var(--borda);
}
.torcida-respostas > li { padding: var(--e2) 0; gap: var(--e2); }
.torcida-respostas > li:first-child { border-top: none; }
.torcida-respostas .avatar { width: 26px; height: 26px; font-size: 10px; }
.torcida-respostas p { font-size: 14px; }
/* Dentro do fio, o realce do "seu comentário" seria uma faixa dentro de outra:
   a barra do fio já está ali, e duas barras coladas não distinguem nada. */
.torcida-respostas > li.meu { background: none; border-left: none; padding-left: 0; }

/* No painel, a resposta órfã — aquela cuja pergunta ficou fora das 200 linhas
   da consulta — aparece solta no primeiro nível, e o recuo é o que diz que ela
   responde a alguma coisa. Dentro de um fio quem recua é a lista inteira. */
.torcida-comentarios > li.resposta { padding-left: var(--e5); }

/* --- A moderação rola dentro do bloco -------------------------------------
   Um evento com sessenta comentários empurrava para baixo tudo o que vem depois
   no painel — e ali embaixo estão modalidades, jurados e a ficha do evento, que
   é o que se opera no dia. Com altura fixa, a moderação ocupa o mesmo espaço
   com dois comentários ou com duzentos.

   `overscroll-behavior: contain` é o detalhe que faz a lista ser usável no
   celular: chegar ao fim dela para de rolar ali, em vez de continuar rolando a
   página por baixo e jogar a pessoa para fora do bloco. */
.torcida-rolagem {
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--e2);
}
.torcida-rolagem:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.torcida-rolagem > .torcida-comentarios { margin-top: 0; }

.torcida-autor {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2);
  margin-bottom: var(--e1);
}
.torcida-autor b { font-size: 14px; }
.torcida-autor a { color: inherit; text-decoration: none; }
.torcida-autor a:hover { text-decoration: underline; }

.torcida-comentarios p {
  margin: 0; color: var(--tinta); font-size: 14.5px; line-height: 1.55;
  overflow-wrap: anywhere;
}
.torcida-comentarios p.dica { color: var(--tinta-media); }
.torcida-comentarios form { margin-top: var(--e2); }

/* Só o botão mora aqui desde que a linha de assinatura saiu da caixa — e ele
   fica no fim, que é onde a mão vai depois de escrever. */
.torcida-enviar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--e3); flex-wrap: wrap;
}

@media (max-width: 720px) {
  .torcida-numeros { gap: var(--e3); }
  /* A gaveta encosta na borda direita da tela em vez de vazar para fora. */
  .torcida-redes { right: auto; left: 0; }
}

/* No celular a gaveta deixa de flutuar: ela abre **dentro** da fileira,
   ocupando a linha inteira embaixo dos três ícones.

   Menu flutuante depende de nenhum ancestral cortar o que sai da caixa, e numa
   lista de eventos há três deles em fila (o item, o bloco, a grade). Em linha,
   não há o que cortar — e o alvo de cada rede fica do tamanho de um dedo, que é
   o que importa na arquibancada. */
@media (max-width: 560px) {
  /* Aberta, a gaveta vira um item de largura inteira da própria fileira: o
     resumo continua onde estava e o menu desce embaixo dele, em duas colunas. */
  .torcida-partilha[open] { display: block; flex-basis: 100%; width: 100%; }
  .torcida-partilha[open] > summary { display: inline-flex; }
  .torcida-partilha[open] > .torcida-redes {
    position: static; width: 100%; min-width: 0;
    margin-top: var(--e2);
    grid-template-columns: 1fr 1fr;
    box-shadow: none;
  }
  .torcida-redes a,
  .torcida-redes button { padding: 10px 8px; }
}

@media print {
  /* Papel não curte nem compartilha. */
  .torcida-icones, .torcida-convite, .torcida-form, .torcida-acoes-fala { display: none; }
}


/* ===========================================================================
   MINHA CONTA — a capa da área de quem acompanha a vitrine
   ---------------------------------------------------------------------------
   No lugar do `pagina-topo` das outras telas. Aqui o título da página é a
   própria pessoa: o rosto, o nome que assina os comentários, o endereço por
   onde ela entra e desde quando está aqui. Um cabeçalho comum diria "Minha
   conta" em cima de um subtítulo — e deixaria de fora justamente o que a pessoa
   vem conferir.

   Os números moram na capa, e não numa fileira de cartões de métrica: eles são
   o resumo do que existe atrás da aba de atividade, e não quatro indicadores
   para analisar. Cartões grandes dariam a eles um peso que eles não têm.
   =========================================================================== */

.conta-capa {
  display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap;
  padding: var(--e5); margin-bottom: var(--e4);
  background: var(--elevado);
  border: 1px solid var(--borda-bloco); border-radius: var(--curva-g);
  box-shadow: var(--sombra-1);
}

.conta-rosto {
  width: 76px; height: 76px; font-size: 26px;
}

.conta-identidade { flex: 1 1 220px; min-width: 0; }
.conta-identidade h1 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.conta-identidade p { margin: var(--e1) 0 0; overflow-wrap: anywhere; }

/* Uma régua de números, e não quatro caixas: o valor em cima e o rótulo
   embaixo, alinhados pela base, é o suficiente para compará-los de relance. */
.conta-numeros {
  display: flex; gap: var(--e5); margin: 0; flex-wrap: wrap;
}
.conta-numeros > div { text-align: right; }
.conta-numeros dt {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-fraca);
}
.conta-numeros dd {
  margin: 0; font-size: 21px; font-weight: 680; font-variant-numeric: tabular-nums;
}

.conta-capa .acoes { flex: none; }
.conta-sub { margin: var(--e2) 0 var(--e4); }

@media (max-width: 760px) {
  /* No celular a capa vira uma coluna, e os números passam a dividir a linha
     em quatro — encostados à esquerda, porque alinhados à direita eles ficariam
     pendurados no vazio. */
  .conta-capa { gap: var(--e4); }
  .conta-numeros { width: 100%; justify-content: space-between; gap: var(--e3); }
  .conta-numeros > div { text-align: left; }
  .conta-numeros dd { font-size: 18px; }
  .conta-capa .acoes { width: 100%; }
}


/* ===========================================================================
   ROSTO — foto de perfil de jurado e torcedor
   ---------------------------------------------------------------------------
   Redonda em toda tela: é o formato que se lê como "pessoa", e separa do
   quadrado do atleta (ficha de inscrição) e do logotipo da organização (marca).

   A foto entra inteira no arquivo e nunca é cortada ao gravar. O que corta é
   isto aqui — `object-fit: cover` — e `object-position` vem do banco, escolhido
   por quem enviou. É por isso que dá para reenquadrar sem reenviar nada.
   =========================================================================== */

/* A moldura tem o tamanho e o recorte; a foto cresce por dentro dela. Sem isso,
   `transform: scale()` aumentaria o elemento inteiro — a foto aproximada sairia
   do círculo e passaria por cima do nome ao lado. */
.avatar.com-foto,
.avatar-grande.com-foto {
  display: block; overflow: hidden; padding: 0;
  background: var(--recuo);
}
.avatar.com-foto > img,
.avatar-grande.com-foto > img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}

/* Logotipo não se recorta: a marca da federação entra inteira no círculo, com
   fundo branco em volta — cortar metade do nome de uma entidade é pior do que
   deixar sobrar espaço. */
.avatar.logo.com-foto { background: #fff; box-shadow: 0 0 0 1px var(--borda); }
.avatar.logo.com-foto > img { object-fit: contain; }

.avatar-grande {
  width: 100%; height: 100%; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--marca-fundo); color: var(--marca-tinta);
  font-size: 34px; font-weight: 700; letter-spacing: .02em;
}

.perfil-foto {
  display: flex; gap: var(--e4); align-items: flex-start; flex-wrap: wrap;
  margin-bottom: var(--e4);
}

/* O círculo é o campo inteiro: mostra a foto, abre o seletor no toque e recebe
   o arraste do enquadramento. Um botão "escolher arquivo" ao lado seria um
   segundo lugar para fazer o que já se faz olhando para a foto. */
.perfil-circulo {
  position: relative; display: block;
  flex: none; width: 128px; height: 128px;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--borda-forte);
  background: var(--recuo);
  /* `grab` porque arrastar aqui é o gesto principal, e o cursor é a única
     pista disso em tela de computador. */
  cursor: grab; touch-action: none; user-select: none;
}
.perfil-circulo.arrastando { cursor: grabbing; border-color: var(--marca); }
.perfil-circulo img { pointer-events: none; }

/* A tampa: ícone de câmera e uma palavra. Sem foto ela cobre o círculo, porque
   é o convite — o campo vazio precisa dizer o que fazer. Com foto ela só
   aparece no toque, no passar do mouse e no foco do teclado: quem já enviou a
   foto quer ver a foto, e não uma etiqueta por cima dela. */
.perfil-capa {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 2px;
  background: rgba(15, 18, 22, .55); color: #fff;
  font-size: 11.5px; letter-spacing: .01em; text-align: center;
  opacity: 0; transition: opacity .14s ease;
  pointer-events: none;
}
.perfil-foto:not(.tem-foto) .perfil-capa {
  opacity: 1; background: none; color: var(--marca-tinta);
}

/* Sem foto, a tampa é o conteúdo do círculo — e as iniciais recuam para o papel
   de marca-d'água. Em tamanho cheio elas ficavam exatamente atrás de "Escolher
   foto", e as duas coisas se apagavam uma à outra. */
.perfil-foto:not(.tem-foto) .avatar-grande { opacity: .3; font-size: 46px; }
.perfil-circulo:hover .perfil-capa,
.perfil-circulo.arrastando .perfil-capa,
.entrada-arquivo:focus-visible + .perfil-circulo .perfil-capa { opacity: 1; }

.perfil-controles { flex: 1 1 200px; display: grid; gap: var(--e2); }
.perfil-controles .dica { margin: 0; }
.perfil-controles .acoes { flex-wrap: wrap; }

/* O zoom: dois botões e o número. Uma barra aqui voltaria a ser o controle que
   a pessoa procura em vez de usar os dedos — e estes dois são o caminho de quem
   navega por teclado e de quem está num computador sem tela sensível. */
.perfil-zoom {
  display: flex; align-items: center; gap: var(--e2);
  justify-self: start;
}
.perfil-zoom .botao {
  min-width: 34px; justify-content: center;
  font-size: 16px; line-height: 1;
}
.perfil-zoom .mini {
  min-width: 46px; text-align: center;
  color: var(--tinta-media); font-variant-numeric: tabular-nums;
}

/* O <input type="file"> continua existindo — é ele que envia o arquivo e recebe
   o foco do teclado —, mas quem aparece é o círculo. */
.perfil-foto .entrada-arquivo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.perfil-foto .entrada-arquivo:focus-visible + .perfil-circulo {
  outline: 2px solid var(--marca); outline-offset: 3px;
}

@media (max-width: 520px) {
  .perfil-circulo { width: 104px; height: 104px; }
}

/* ---- Histórico ----------------------------------------------------------- */

.historico-ano {
  margin: var(--e4) var(--e4) var(--e2);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-fraca);
  display: flex; align-items: baseline; gap: var(--e2);
}
.historico-ano:first-child { margin-top: var(--e2); }
.historico-ano .mini { text-transform: none; letter-spacing: 0; }

/* ---- A vitrine no celular ------------------------------------------------ */
/*
   Na largura em que o par se desfaz, o calendário vem primeiro. A lista de
   organizações cresce sozinha — uma federação nova por semana —, e embaixo dela
   o calendário do mês acabaria fora da tela em qualquer celular. Quem abre a
   vitrine no telefone quer saber se tem prova, não percorrer o cadastro.
*/
@media (max-width: 1080px) {
  #vitrine-calendario { order: -1; }
}


/* ===========================================================================
   O CAMPO QUE NÃO FAZ A TELA SALTAR
   ---------------------------------------------------------------------------
   O Safari do iPhone aproxima a página inteira quando o campo que recebe o foco
   tem fonte menor que 16px. Não é preferência de ninguém nem defeito nosso: é
   regra do sistema, feita para páginas que não foram pensadas para celular.

   Aqui ela estraga o que mais importa: na beira da pista, o operador toca no
   campo do peito, a tela salta, ele digita fora do enquadramento e precisa de
   um gesto a mais para voltar — em cada linha da planilha. O mesmo acontece na
   busca da vitrine e na caixa de comentário.

   A saída é dar 16px aos campos onde o dedo é o ponteiro. `!important` porque
   esta é uma regra do aparelho, e não do desenho: ela precisa vencer as fontes
   menores das telas densas (planilha, busca, folha de voltas), que existem por
   um motivo que só vale no computador.

   O que **não** se faz é `user-scalable=no` na viewport. Resolveria numa linha
   e cobraria de quem enxerga pouco a pinça da página inteira — desligar o zoom
   de todo mundo para o sistema economizar dois pixels de campo.
   =========================================================================== */

/* ===========================================================================
   O CELULAR ESTREITO
   ---------------------------------------------------------------------------
   Abaixo de 560px a tela deixa de ter largura para negociar: o que não couber
   quebra, e nada empurra a página para o lado. Barra de rolagem horizontal numa
   página de leitura é o sinal mais claro de layout que não coube — e no celular
   ela nem aparece, a pessoa só vê o texto cortado.

   Cada regra aqui desfaz uma promessa que só o desktop podia cumprir: rótulo de
   botão em linha única, faixa de ações à direita da linha, quatro abas lado a
   lado, e-mail que não quebra.
   =========================================================================== */

@media (max-width: 560px) {
  /* "Entre no painel da instituição" não cabe em linha única em tela nenhuma
     de celular. Quebrar é feio; vazar para fora da caixa é defeito. */
  .botao { white-space: normal; }

  /* A faixa de ações da linha desce para baixo do conteúdo, como já fazem os
     ícones da torcida. À direita, um seletor de categoria mais um campo de
     peito não cabiam ao lado do nome do atleta. */
  .lista-nav > li { flex-wrap: wrap; }
  .lista-nav > li > .lista-acoes {
    flex-basis: 100%; justify-content: flex-start;
    padding: var(--e2) var(--e3);
    border-left: none; border-top: 1px solid var(--borda);
    background: none;
  }
  .lista-acoes select, .lista-acoes input { max-width: 100%; }

  /* E-mail, apelido de evento e endereço não têm espaço em branco para quebrar:
     sem isto, uma palavra de 40 caracteres decide a largura da página. */
  .lista-abaixo, .torcida-autor .mini, .torcida-comentarios p,
  .resumo dd, .compartilhar input { overflow-wrap: anywhere; }
  .selo { white-space: normal; }

  /* A janela já se limita à tela; o que sobrava era o respiro de dentro comendo
     a largura útil da conversa. */
  .modal-corpo { padding: var(--e4); }
  .modal-topo { padding: var(--e3) var(--e4); }

  /* Ação principal de página ocupa a linha inteira, em vez de dividir 320px com
     as outras duas. */
  .pagina-topo > .acoes { width: 100%; }
  .pagina-topo > .acoes > .botao { flex: 1 1 auto; }
}

@media (hover: none) and (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }

  /* A planilha fica com a linha mais alta em troca disso, e é troca boa: a
     linha alta é mais fácil de acertar com o dedo do que a linha baixa com a
     tela dando zoom sozinha. */
  table.planilha td.editavel input,
  table.planilha td.editavel select { padding: 6px 8px; }
}