/* Negrito removido e espaçamento entre letras aumentado no site inteiro,
           a pedido do usuário. Vai no topo do arquivo com !important porque a
           alternativa (trocar cada uma das ~800 classes font-bold/font-black/
           font-semibold/font-extrabold espalhadas pelo HTML e pelos .js, mais
           as regras font-weight/letter-spacing específicas mais abaixo neste
           mesmo arquivo) não é viável — uma regra genérica no topo sobrescreve
           tudo isso de uma vez, em vez de caçar cada ocorrência uma por uma.
           Excluído o <i> (ícones do Font Awesome): o FA6 usa o font-weight do
           próprio elemento para escolher o estilo do glifo (900 = sólido, 400
           = regular) — forçar 400 nele trocaria/quebraria os ícones sólidos
           (fas) usados no site inteiro. */
        *:not(i) {
            font-weight: 400 !important;
        }
        * {
            letter-spacing: 0.05em !important;
        }
        /* O botão nativo "Escolher arquivo" de um <input type="file"> é um
           pseudo-elemento (::file-selector-button), que o seletor universal "*"
           acima não alcança — por isso ficava em negrito e sem o espaçamento
           entre letras, diferente de todos os outros botões do site. */
        ::file-selector-button,
        ::-webkit-file-upload-button {
            font-weight: 400 !important;
            letter-spacing: 0.05em !important;
        }

        /* Listas do Painel do Administrador (Atletas, Clubes, Técnicos,
           Campeonatos, E-mails, Categorias) ficaram ilegíveis depois que o
           quadro do admin virou fundo escuro/transparente: o texto dessas
           listas é gerado dinamicamente em core.js usando tons escuros de
           slate (pensados para um cartão branco, como era antes), então
           ficava quase invisível sobre o fundo #172C46. A pedido do usuário,
           esse texto passa a usar #B4ECFC (a mesma cor "celeste" do resto do
           site) só dentro de #adminTabContent — não mexe nos botões/selos
           coloridos (Editar, Excluir, badges), que têm seu próprio fundo
           claro e continuam legíveis do jeito que estão.
           O :not(.bg-white, .bg-white *) evita pegar de arrasto os poucos
           painéis que ainda ficam com fundo branco de propósito dentro do
           admin (o menu "Ferramentas", os <select> de ordenar/filtrar, as
           listas de destinatários de e-mail enviado/falho) — nesses, o texto
           escuro original continua correto, porque o fundo deles é claro. */
        #adminTabContent .text-slate-200:not(.bg-white, .bg-white *),
        #adminTabContent .text-slate-300:not(.bg-white, .bg-white *),
        #adminTabContent .text-slate-400:not(.bg-white, .bg-white *),
        #adminTabContent .text-slate-500:not(.bg-white, .bg-white *),
        #adminTabContent .text-slate-600:not(.bg-white, .bg-white *),
        #adminTabContent .text-slate-700:not(.bg-white, .bg-white *),
        #adminTabContent .text-slate-800:not(.bg-white, .bg-white *),
        #adminTabContent .text-slate-900:not(.bg-white, .bg-white *),
        #adminTabContent .text-blue-900:not(.bg-white, .bg-white *),
        #adminTabContent .text-blue-700:not(.bg-blue-100, .bg-white, .bg-white *) {
            color: var(--tt-texto) !important;
        }

        /* Fundos claros das listas do Painel do Administrador (linhas de
           tabela, cabeçalhos de acordeão de Atletas/Clubes/Técnicos) também
           removidos, a pedido do usuário: nada de fundo claro nem de "piscar"
           branco/cinza-claro ao passar o mouse — mesmo padrão sem preenchimento
           da tela inicial (só borda). Os botões pequenos com fundo próprio
           (Editar, Excluir) NÃO são afetados aqui, porque usam classes sem o
           prefixo "hover:" (ex. bg-blue-100 puro) — só as classes hover:*
           listadas abaixo, que são as que mudavam a cor ao passar o mouse. */
        #adminTabContent .bg-slate-50,
        #adminTabContent .bg-blue-50,
        #adminTabContent .bg-red-50 {
            background-color: transparent !important;
        }
        #adminTabContent .hover\:bg-slate-50:hover,
        #adminTabContent .hover\:bg-blue-100:hover,
        #adminTabContent .hover\:bg-red-100:hover {
            background-color: transparent !important;
        }

        /* Botões das listas do Painel do Administrador (Editar, Consultar,
           Cadastrar, Ranking, Alterar Organizador, "Editar Nome/Data",
           "Ferramentas", "Senha") na cor #00592D com fonte branca, a pedido
           do usuário (era #3cb371, trocada globalmente pelo tom mais
           escuro) — exceto os botões de Excluir (bg-red-100/text-red-700),
           que ficam exatamente como estavam. Cada seletor abaixo é a classe
           de fundo original do botão (bg-blue-600 dos botões "Cadastrar"
           etc., bg-blue-100 dos botões "Editar/Consultar", bg-amber-100 do
           "Editar Nome/Data", bg-slate-100 do "Ferramentas", bg-slate-200 do
           "Senha" — combinada com .text-slate-800 para não pegar de arrasto
           os selos de status "Ativo/Desativado/Expirado" da seção de
           Parceiros, que também usam bg-slate-200 mas com text-slate-600):
           sobrescrever pela classe de fundo, e não por uma classe de texto
           solta, evita pegar de arrasto o texto do menu suspenso
           "Ferramentas" (que fica dentro de um painel branco flutuante e
           precisa continuar escuro para não sumir nesse fundo). */
        #adminTabContent .bg-blue-600,
        #adminTabContent .bg-emerald-600,
        #adminTabContent .bg-blue-100,
        #adminTabContent .bg-amber-100,
        #adminTabContent .bg-slate-100,
        #adminTabContent .bg-slate-200.text-slate-800 {
            background-color: var(--tt-botao) !important;
            color: var(--tt-botao-fonte) !important;
        }
        #adminTabContent .hover\:bg-blue-700:hover,
        #adminTabContent .hover\:bg-emerald-700:hover,
        #adminTabContent .hover\:bg-slate-200:hover {
            background-color: var(--tt-botao-hover) !important;
        }

        /* Garantia geral: em toda a seção do Administrador, onde ainda houver
           fundo branco (bg-white) — menu "Ferramentas", <select>/<input> de
           filtro, listas de destinatários de e-mail, o painel de gestão de
           clube expandido dentro da lista de Atletas — o texto usa preto,
           a pedido do usuário. Em vez de continuar caçando classe de texto
           por classe de texto (frágil: qualquer tom novo de cinza que
           apareça no futuro ficaria ilegível de novo), esta regra cobre
           QUALQUER texto dentro de um fundo branco, garantindo o contraste
           correto por construção. Os ícones (<i>) ficam de fora: mantêm sua
           cor própria (ex. os ícones coloridos do menu "Ferramentas"), mesmo
           padrão de exceção usado na regra de negrito no topo deste arquivo. */
        /* O painel de gestão de clube do "Painel de Gestão dos Clubes" fica de
           fora (.tt-painel-escuro): ele usa o tema escuro, como no "Meu Painel"
           do responsável, e os fundos brancos de dentro dele viram escuros. */
        #section-adminDashboard .bg-white:not(.tt-painel-escuro *),
        #section-adminDashboard .bg-white:not(.tt-painel-escuro *) *:not(i) {
            color: #000000 !important;
        }

        /* Tela de detalhe de um Clube (viewAcademyDetail, em academias.js —
           aberta pelo botão "Consultar & Inscrição em Treinos" na lista de
           Clubes) restilizada com o mesmo padrão do resto do site, a pedido
           do usuário: mesma estratégia usada em #adminTabContent acima,
           porque o conteúdo também é gerado dinamicamente em JS com uma
           mistura grande de tons de slate/blue pensados para cartão branco.
           Texto escuro → celeste, sem exceção de ".bg-white" aqui (diferente
           do Painel Admin): quase todo bg-white nesta tela é convertido para
           fundo transparente logo abaixo (cartões de treino, tabelas de
           atletas/técnicos), então o texto dentro deles também deve virar
           celeste, não preto. A única exceção real (o <select> de "Ordenar
           por", que continua de propósito com fundo branco) é resolvida
           depois com um seletor mais específico (select.bg-white), que some
           por cima desta regra. */
        #academyDetailContent .text-slate-400,
        #academyDetailContent .text-slate-500,
        #academyDetailContent .text-slate-600,
        #academyDetailContent .text-slate-800,
        #academyDetailContent .text-slate-900,
        #academyDetailContent .text-slate-950,
        #academyDetailContent .text-blue-900,
        #academyDetailContent .text-blue-700:not(.bg-blue-100),
        #academyDetailContent .text-pink-600 {
            color: var(--tt-texto) !important;
        }
        /* Fundos claros dos cartões/tabelas (grade de treinos, listas de
           atletas/técnicos vinculados, ranking por categoria) removidos —
           só ficam com borda ciano, sem preenchimento, igual à tela inicial.
           Exclui <select> (fica de propósito com fundo branco, ver acima). */
        #academyDetailContent div.bg-white,
        #academyDetailContent .bg-slate-50,
        #academyDetailContent .bg-blue-50 {
            background-color: transparent !important;
        }
        #academyDetailContent .border-slate-200,
        #academyDetailContent .border-blue-100,
        #academyDetailContent .border-blue-200 {
            border-color: var(--tt-quadros) !important;
        }
        /* Botões de ação (Editar Dados, Criar Campeonato, Grades de Treinos,
           Inscrever-se Antecipadamente, Cadastrar Atleta/Técnico, Imprimir/
           Propagar Ranking) na cor #00592D com fonte branca — mesmo padrão
           do resto do site. Exclui bg-red-100/bg-red-200 (Excluir, Cancelar
           Inscrição), que ficam como estavam. */
        #academyDetailContent .bg-blue-600,
        #academyDetailContent .bg-amber-600,
        #academyDetailContent .bg-slate-800,
        #academyDetailContent .bg-emerald-600,
        #academyDetailContent .bg-blue-100 {
            background-color: var(--tt-botao) !important;
            color: var(--tt-botao-fonte) !important;
        }
        #academyDetailContent .hover\:bg-blue-700:hover,
        #academyDetailContent .hover\:bg-amber-700:hover,
        #academyDetailContent .hover\:bg-slate-900:hover,
        #academyDetailContent .hover\:bg-emerald-700:hover {
            background-color: var(--tt-botao-hover) !important;
        }
        #academyDetailContent .hover\:bg-slate-50:hover {
            background-color: transparent !important;
        }

        /* Tela de detalhe de um Técnico/Instrutor (viewCoachDetail, em
           tecnicos.js — aberta pelo botão "Consultar Perfil" na lista de
           Técnicos), mesma estratégia das duas regras acima. Não há nenhum
           <select> nem outro campo de formulário genuíno nesta tela (só
           cartões/tabelas informativos), então todo bg-white vira transparente
           sem precisar de exceção. */
        #coachDetailContent .text-slate-400,
        #coachDetailContent .text-slate-500,
        #coachDetailContent .text-slate-600,
        #coachDetailContent .text-slate-700,
        #coachDetailContent .text-slate-900,
        #coachDetailContent .text-slate-950,
        #coachDetailContent .text-blue-900,
        #coachDetailContent .text-blue-700,
        #coachDetailContent .text-blue-600,
        #coachDetailContent .text-emerald-900,
        #coachDetailContent .text-pink-600 {
            color: var(--tt-texto) !important;
        }
        #coachDetailContent .bg-white,
        #coachDetailContent .bg-slate-50,
        #coachDetailContent .bg-blue-50,
        #coachDetailContent .bg-emerald-50 {
            background-color: transparent !important;
        }
        #coachDetailContent .border-slate-200,
        #coachDetailContent .border-blue-200,
        #coachDetailContent .border-emerald-200 {
            border-color: var(--tt-quadros) !important;
        }
        #coachDetailContent .bg-blue-600,
        #coachDetailContent .bg-amber-600,
        #coachDetailContent .bg-amber-100 {
            background-color: var(--tt-botao) !important;
            color: var(--tt-botao-fonte) !important;
        }
        #coachDetailContent .hover\:bg-blue-700:hover,
        #coachDetailContent .hover\:bg-amber-700:hover,
        #coachDetailContent .hover\:bg-amber-200:hover {
            background-color: var(--tt-botao-hover) !important;
        }
        #coachDetailContent .hover\:bg-blue-50:hover,
        #coachDetailContent .hover\:bg-white:hover {
            background-color: transparent !important;
        }
        /* Selo verde de valor da Aula Particular (R$ ...) — texto próprio, não
           deve virar celeste junto com o resto. */
        #coachDetailContent .text-emerald-800 {
            color: #34d399 !important;
        }

        /* Quadro "É técnico ou instrutor...? Cadastre-se gratuitamente!" eliminado
           da seção de Técnicos, a pedido do usuário. Mantido no DOM (só escondido
           via CSS, com !important) em vez de removido: várias funções de
           tecnicos.js (showCoachPresentation, showCoachRegisterForm,
           closeCoachDetail, viewCoachDetail) alternam a classe "hidden" deste
           elemento como parte da lógica de troca entre lista/apresentação/
           formulário/detalhe — remover o elemento quebraria essas chamadas
           (getElementById retornando null). Com a regra abaixo ele nunca aparece,
           não importa o que essas funções façam com a classe "hidden" dele. */
        #coachPresentationCard {
            display: none !important;
        }

        .tt-gradient { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #1e40af 100%); }
        .tt-modern-logo { background: linear-gradient(135deg, #2563eb 0%, #172554 100%); box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4); }

        /* Fundo do site inteiro: cor sólida só, sem foto por trás — a pedido do
           usuário, que removeu a imagem de fundo (antes era a arena de
           campeonato mundial, artes/cropped/arena-mundial.jpg, com um véu
           escuro por cima) e pediu a cor exata #172C46 para toda a página.
           Aplicado direto como classe Tailwind "bg-marinho" na tag <body>
           (index.html) em vez de uma regra CSS aqui: uma regra `body{}` neste
           arquivo perdia a disputa de especificidade para a classe utilitária
           bg-slate-50 que já vinha no HTML (CSS do Tailwind carrega depois
           deste arquivo), deixando o fundo claro por engano. */

        /* Aba ativa do menu principal (nav.tt-topnav): sublinhado azul, igual
           ao template de referência. sincronizaAbaAtivaDoMenu(), chamada no
           fim de showSection() em core.js, é quem liga/desliga esta classe
           entre os botões com [data-nav]. */
        .nav-btn.active {
            color: var(--tt-destaque);
            position: relative;
        }
        .nav-btn.active::after {
            content: "";
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: -6px;
            height: 2px;
            border-radius: 2px;
            background: var(--tt-destaque);
        }
        .dropdown-menu { display: none; }
        .dropdown-container:hover .dropdown-menu { display: block; }

        /* Faixas flutuantes de logotipos das Empresas Parceiras — ficam fixas dos
           dois lados da área de conteúdo em todas as abas do site (ver
           #partnerAdsFloatingStripWrapRight/Left logo no início do <body> em
           index.html); as publicidades ativas são distribuídas alternadamente
           entre os dois lados por renderPartnerAdsSection() em app.js. Cada
           ícone sobe e desce suavemente, com um pequeno atraso diferente por
           item (ver style="animation-delay" no app.js) para não ficarem todos
           sincronizados. */
        .partner-float-icon {
            animation: partnerFloatBob 3.2s ease-in-out infinite;
        }
        @keyframes partnerFloatBob {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* Em monitores de resolução menor / notebooks e tablets (entre o
           breakpoint mobile de 767px e 1400px), a área útil do site (ver
           max-w-6xl no <main> do index.html) já fica um pouco mais estreita,
           mas as faixas flutuantes de publicidade ainda precisam encolher um
           pouco para não encostar/sobrepor o conteúdo nessas telas
           intermediárias — por isso este bloco fica separado do bloco mobile
           abaixo (min-width evita que ele afete os celulares, que já têm sua
           própria regra, mais compacta ainda). */
        @media (min-width: 768px) and (max-width: 1400px) {
            #partnerAdsFloatingStripWrapRight,
            #partnerAdsFloatingStripWrapLeft {
                padding: 6px;
                max-height: 70vh;
            }
            #partnerAdsFloatingStripWrapRight {
                right: 2px;
            }
            #partnerAdsFloatingStripWrapLeft {
                left: 2px;
            }
            #partnerAdsFloatingStripRight img,
            #partnerAdsFloatingStripLeft img {
                width: 52px !important;
                height: 52px !important;
            }
            #partnerAdsFloatingStripRight span,
            #partnerAdsFloatingStripLeft span {
                display: none;
            }
        }

        /* Em telas pequenas, as faixas flutuantes ficam mais compactas (ícones
           menores e menos preenchimento) para incomodar menos o conteúdo
           principal, em vez de ficarem do mesmo tamanho usado no desktop. */
        @media (max-width: 767px) {
            #partnerAdsFloatingStripWrapRight,
            #partnerAdsFloatingStripWrapLeft {
                padding: 8px;
                max-height: 60vh;
            }
            #partnerAdsFloatingStripWrapRight {
                right: 4px;
            }
            #partnerAdsFloatingStripWrapLeft {
                left: 4px;
            }
            #partnerAdsFloatingStripRight img,
            #partnerAdsFloatingStripLeft img {
                width: 42px !important;
                height: 42px !important;
            }
            #partnerAdsFloatingStripRight span,
            #partnerAdsFloatingStripLeft span {
                display: none;
            }
        }

        /* Botão "Verificado" = "Botões de Destaque" da paleta parametrizável
           (tema.js): fundo e fonte vêm de --tt-botao-destaque e
           --tt-botao-destaque-fonte. Usado no "Meus Dados" da Home quando há
           alguém logado. */
        .btn-verificado,
        .btn-verificado * {
            color: var(--tt-botao-destaque-fonte) !important;
        }
        .btn-verificado {
            background-color: var(--tt-botao-destaque) !important;
        }
        .btn-verificado,
        .btn-verificado *:not(i) {
            font-weight: 700 !important;
        }
        .btn-verificado:hover {
            filter: brightness(.95);
        }

        /* =====================================================================
           IMPRESSÃO DO CAMPEONATO — FOLHA A4 PAISAGEM, SEM ESPAÇOS EM BRANCO
           =====================================================================
           Regras atendidas aqui (junto com computeGroupPrintPlan() e
           computeBracketPrintZoom() em app.js, que calculam o --print-zoom de
           cada bloco na hora de montar a tela):

           1. Cada GRUPO imprime todos os seus jogos em UMA única folha. O bloco
              é reduzido ou ampliado automaticamente (zoom: var(--print-zoom))
              para ocupar bem a folha, e nunca é partido no meio
              (break-inside: avoid).
           2. A CHAVE ELIMINATÓRIA nunca é cortada: começa sempre em folha nova
              e é escalada para caber inteira nela.
           3. O PÓDIO nunca é cortado: não tem quebra forçada antes dele, então
              entra no rodapé da mesma folha da chave olímpica quando há espaço;
              quando não há, o break-inside: avoid joga o pódio INTEIRO para o
              topo da folha seguinte.

           Obs.: o layout de impressão é compacto (fontes/margens menores e os
           jogos em 1 ou 2 colunas, conforme --print-match-cols) justamente para
           que um grupo inteiro caiba em uma folha. Se o navegador ignorar a
           propriedade zoom, o layout compacto sozinho já costuma caber — só
           deixa de aproveitar a folha inteira.
           ===================================================================== */
        @media print {
            /* =================================================================
               IMPRESSÃO CONTINUA EM PAPEL BRANCO
               =================================================================
               O tema escuro vale para TELA. No papel ele seria um desastre:
               gastaria tinta e sairia texto claro sobre fundo escuro. Como a
               troca de cores vem do tailwind.config (que não distingue tela de
               papel), a folha precisa ser forçada de volta ao claro aqui.
               Só as cores são revertidas — todo o restante do layout de
               impressão (folha A4 paisagem, grupos que não se partem, zoom por
               bloco) continua exatamente como estava. */
            html, body,
            body * {
                background-color: #ffffff !important;
                background-image: none !important;
                color: #0f172a !important;
                border-color: #cfd1d3 !important;
            }
            @page {
                size: A4 landscape;
                margin: 10mm;
            }
            /* Força a impressão de cores de fundo/gradientes mesmo quando a opção "Gráficos em segundo plano"
               do navegador está desligada (padrão) — sem isso, cartões e textos claros sobre fundo colorido saem em branco. */
            * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
            }

            /* Só a tela do campeonato vai para o papel. Antes isso era feito com
               visibility:hidden, que esconde mas CONTINUA OCUPANDO ESPAÇO — daí
               vinham páginas em branco no meio e no fim da impressão. Agora o
               resto da página é realmente removido do fluxo (display:none). */
            body > *,
            main > *,
            #section-tournaments > * { display: none !important; }
            body > main,
            main > #section-tournaments,
            #section-tournaments > #tournamentDetailView { display: block !important; }

            body { background: #ffffff !important; }
            main {
                max-width: none !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            #tournamentDetailView {
                position: static !important;
                width: 100% !important;
                background: #ffffff !important;
                padding: 0 !important;
                margin: 0 !important;
                box-shadow: none !important;
                border: none !important;
            }
            #tournamentDetailView > * + * { margin-top: 0 !important; }

            /* O folheto de Planos de Treinamento agora é impresso em uma janela própria, totalmente
               independente (ver printAcademyPlans() em app.js) — por isso não existe mais nenhuma regra
               aqui para ele: a janela de impressão não carrega este styles.css, então não há como ficar
               desatualizada em relação ao app.js. */

            button, nav, header, footer, .print-hidden { display: none !important; }

            /* ---------- CABEÇALHO DAS FOLHAS (logotipos) ---------- */
            /* Toda folha impressa começa identificada: logotipo da academia
               organizadora à esquerda, nome/edição/data do campeonato no meio e
               logotipo do site à direita. Em app.js, a faixa é inserida no início
               de cada bloco que COMEÇA uma folha (ver printSheetHeaderHtml); na
               1ª folha quem faz esse papel são os dois logotipos avulsos
               (.print-only-block) dentro do cabeçalho do campeonato. */
            .print-sheet-header {
                display: flex !important;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                margin: 0 0 8px !important;
                padding: 0 2px 5px !important;
                border-bottom: 1.5px solid #1e3a8a !important;
                break-after: avoid;
                page-break-after: avoid;
                break-inside: avoid;
            }
            .print-only-block { display: block !important; }
            /* Aba "Dados do Campeonato" impressa: a ficha em três colunas,
               rótulo pequeno em cima e o valor embaixo (nome e local dos
               jogos ocupam a linha inteira). */
            .print-only-block.tt-dados-grade, .tt-dados-grade {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px 16px;
                margin-top: 10px;
                font-size: 11px;
            }
            .tt-dados-grade .tt-camp-info { display: flex; flex-direction: column; gap: 1px; break-inside: avoid; }
            .tt-dados-grade .tt-dados-largo { grid-column: 1 / -1; }
            .tt-dados-grade .tt-camp-info-rot { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: #475569; }
            .tt-dados-grade .tt-camp-info-val { color: #0f172a; font-weight: 700 !important; }
            .print-sheet-logo {
                width: 34px !important;
                height: 34px !important;
                max-width: 34px !important;
                max-height: 34px !important;
                object-fit: contain;
                flex-shrink: 0;
                border-radius: 6px;
                background: #ffffff;
            }
            .print-sheet-logo-fallback {
                display: flex !important;
                align-items: center;
                justify-content: center;
                background: #dbf3f8 !important;
                color: #1e40af !important;
                font-weight: 900;
                font-size: 12px;
            }
            .print-sheet-titles {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                flex: 1 1 auto;
                min-width: 0;
            }
            .print-sheet-name {
                font-size: 13px;
                font-weight: 800;
                color: #0f172a;
                line-height: 1.15;
            }
            .print-sheet-sub {
                font-size: 9.5px;
                font-weight: 600;
                color: #5a6067;
                line-height: 1.15;
            }

            /* Cabeçalho do campeonato (nome, edição, data): compacto e colado no
               conteúdo, para não desperdiçar a primeira folha. */
            #tournamentDetailContent > div:first-child {
                padding-bottom: 6px !important;
                margin-bottom: 8px !important;
                break-after: avoid;
                page-break-after: avoid;
                /* Sempre em linha no papel (logotipo da academia | dados do
                   campeonato | logotipo do site). Sem isso o bloco fica empilhado
                   na impressão, porque as classes "md:" do Tailwind dependem da
                   largura de tela e não valem na folha. */
                flex-direction: row !important;
                align-items: center !important;
                gap: 12px !important;
            }
            #tournamentDetailContent > div:first-child h2 { font-size: 20px !important; }
            /* Quadro do topo e painel das abas: no papel saem sem moldura (só a
               linha embaixo do cabeçalho, como antes das abas existirem) — a
               aba impressa é só a que estiver aberta; as outras estão escondidas. */
            #tournamentDetailContent > div:first-child.tt-camp-topo {
                border-width: 0 0 1px 0 !important;
                border-radius: 0 !important;
                padding: 0 0 6px !important;
            }
            .tt-fichario-painel {
                border: none !important;
                border-radius: 0 !important;
                padding: 0 !important;
            }

            /* Cada CATEGORIA começa em uma folha nova (a primeira aproveita a
               folha do cabeçalho do campeonato). A moldura branca da categoria
               some no papel — era ela que deixava aquelas listras/bordas soltas
               no alto e no pé das folhas. */
            .tournament-category-card {
                background: transparent !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            /* A quebra é pedida só a partir da 2ª categoria: "break-before: avoid"
               não é obedecido pelos navegadores, então a 1ª categoria simplesmente
               não recebe a regra e continua na mesma folha do cabeçalho. */
            .tournament-category-card:not(.tournament-category-first) {
                break-before: page;
                page-break-before: always;
            }
            .tournament-category-card > * + * { margin-top: 0 !important; }

            .tournament-category-header {
                padding: 7px 12px !important;
                margin-bottom: 6px !important;
                border-radius: 10px !important;
                border-bottom: none !important;
                break-after: avoid;
                page-break-after: avoid;
                break-inside: avoid;
            }
            .tournament-category-header h3 {
                font-size: 15px !important;
                margin-top: 2px !important;
            }
            /* Pedido do usuário: juntar o selo "Categoria Independente" e o
               nome da categoria numa linha só na impressão (em vez de duas
               empilhadas), pra sobrar mais altura pra fase de grupos na
               mesma folha. Só vale pra impressão — na tela continua igual. */
            .tournament-category-header > div:first-child {
                display: flex !important;
                flex-wrap: wrap !important;
                align-items: baseline !important;
                gap: 6px !important;
            }
            .tournament-category-header h3 {
                margin-top: 0 !important;
            }
            .tournament-category-header h3::before {
                content: "\2013";
                margin-right: 6px;
            }

            /* ---------- FASE DE GRUPOS: um grupo por folha, inteiro ---------- */
            /* O zoom fica no MIOLO do grupo (.printable-group-body), não no bloco
               inteiro: assim o cabeçalho de folha com os logotipos sai sempre do
               mesmo tamanho, em todas as folhas, independentemente do quanto o
               grupo precisou encolher ou crescer. */
            .printable-group-body { zoom: var(--print-zoom, 1); }
            .printable-group-page {
                break-after: auto;
                page-break-after: auto;
                break-inside: avoid;
                page-break-inside: avoid;
                min-height: 0 !important;
                margin: 0 !important;
                padding: 8px 10px !important;
                border-radius: 12px !important;
            }
            /* O 1º grupo divide a folha com o cabeçalho da categoria; do 2º em
               diante, cada grupo começa em uma folha nova. */
            .printable-group-page:not(.printable-group-first) {
                break-before: page;
                page-break-before: always;
            }
            /* Regra do usuário: grupos de 4 integrantes (6 partidas) têm
               licença pra continuar na folha seguinte em vez de serem
               espremidos numa altura só — diferente dos grupos menores, que
               continuam sempre inteiros numa única folha (break-inside:
               avoid acima). Cada CARTÃO DE PARTIDA individual continua
               protegido contra ser cortado ao meio (ver
               .group-matches-print-grid > * mais abaixo), então a quebra só
               acontece ENTRE partidas, nunca no meio de uma. */
            .printable-group-page.printable-group-large {
                break-inside: auto;
                page-break-inside: auto;
            }
            .printable-group-page > * + * { margin-top: 0 !important; }
            .printable-group-body > * + * { margin-top: 6px !important; }
            .printable-group-page h4 { font-size: 12.5px !important; }
            .printable-group-page table th {
                font-size: 9px !important;
                padding-bottom: 3px !important;
            }
            .printable-group-page table td {
                font-size: 10.5px !important;
                padding: 3px 0 !important;
            }

            /* Os jogos do grupo em 1 ou 2 colunas (--print-match-cols), para
               aproveitar a largura da folha deitada em vez de empilhar tudo.
               Era "display: grid", trocado para "display: flex" porque a
               paginação de CSS Grid na impressão é instável no Chrome — ele
               às vezes empurra um cartão inteiro pra folha seguinte mesmo
               sobrando espaço de sinta na folha atual (foi exatamente o caso
               relatado: grupo de 3 partidas, a 3ª ia pra uma folha sozinha
               deixando a anterior com espaço vazio). Flexbox pagina de forma
               bem mais previsível. */
            .group-matches-print-grid {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 6px !important;
            }
            .group-matches-print-grid > * {
                margin-top: 0 !important;
                break-inside: avoid;
                page-break-inside: avoid;
                flex: 0 0 calc((100% - 6px * (var(--print-match-cols, 1) - 1)) / var(--print-match-cols, 1)) !important;
            }
            .group-match-card { padding: 5px 7px !important; }
            .group-match-card > * + * { margin-top: 4px !important; }
            .group-match-card .grid { gap: 4px !important; }
            .group-match-card .grid > div { padding: 3px !important; }
            .group-match-card .grid > div > span {
                font-size: 9px !important;
                margin-bottom: 1px !important;
            }
            .group-match-card input {
                width: 30px !important;
                padding: 1px 2px !important;
                font-size: 11px !important;
            }
            /* O formato do jogo já está escrito no cabeçalho do grupo — repetir
               em cada confronto só rouba espaço na folha. */
            .group-match-format-badge { display: none !important; }

            /* ---------- MAPA DE MESAS E GRADE DE HORÁRIOS: tabela, um jogo por linha ---------- */
            /* A tabela da grade tem 5 colunas e, no celular, vira "cartões"
               (tt-card-mobile, ver core.js). No papel ela sempre volta a ser
               uma tabela de verdade, com cabeçalho repetido em cada folha e
               nenhuma linha partida ao meio. Termina com quebra de folha para
               as categorias começarem em folha própria. */
            .tt-print-mesas {
                border: none !important;
                border-radius: 0 !important;
                padding: 0 !important;
                margin: 0 0 8px !important;
                break-after: page;
                page-break-after: always;
            }
            .tt-print-mesas > * + * { margin-top: 6px !important; }
            .tt-print-mesas h4 { font-size: 11px !important; margin: 6px 0 4px !important; }
            .tt-print-mesas .overflow-x-auto { overflow: visible !important; }
            .tt-print-mesas table,
            .tt-print-mesas table.tt-card-mobile {
                display: table !important;
                width: 100% !important;
                border-collapse: collapse !important;
            }
            .tt-print-mesas thead,
            .tt-print-mesas table.tt-card-mobile thead { display: table-header-group !important; }
            .tt-print-mesas tbody,
            .tt-print-mesas table.tt-card-mobile tbody { display: table-row-group !important; }
            .tt-print-mesas tr,
            .tt-print-mesas table.tt-card-mobile tr {
                display: table-row !important;
                width: auto !important;
                break-inside: avoid;
                page-break-inside: avoid;
            }
            .tt-print-mesas th,
            .tt-print-mesas td,
            .tt-print-mesas table.tt-card-mobile td {
                display: table-cell !important;
                width: auto !important;
                border: 1px solid #cfd1d3 !important;
                padding: 3px 6px !important;
                font-size: 10px !important;
                line-height: 1.25 !important;
                text-align: left !important;
                white-space: nowrap;
            }
            .tt-print-mesas td::before { content: none !important; display: none !important; }

            /* ---------- CHAVE OLÍMPICA: folha nova, nunca cortada ---------- */
            .printable-category-page {
                break-after: auto;
                page-break-after: auto;
                break-inside: avoid;
                page-break-inside: avoid;
                min-height: 0 !important;
                margin: 0 !important;
                padding-top: 0 !important;
                border-top: none !important;
            }
            /* Na categoria sem fase de grupos (eliminatória direta), a chave fica
               na mesma folha do cabeçalho da categoria — por isso a quebra
               forçada não vale para ela. */
            .printable-category-page:not(.printable-category-page-first) {
                break-before: page;
                page-break-before: always;
            }
            .printable-category-page h5 { font-size: 13px !important; }
            /* O título "Árvore Olímpica da Categoria..." às vezes ficava
               sozinho no topo de uma folha, com a chave inteira começando só
               na folha seguinte — o "break-inside: avoid" do
               .printable-category-page é só uma tentativa; se o navegador
               decide que não cabe tudo junto, ele pode cortar bem ali, entre
               o título e a árvore (que tem sua própria proteção separada,
               mais forte, em .bracket-tree-container). Aqui reforçamos que
               não pode haver quebra logo depois da linha do título, então o
               título viaja junto com a chave para a mesma folha. */
            .printable-category-page > div:has(> h5) {
                break-after: avoid;
                page-break-after: avoid;
                break-inside: avoid;
                page-break-inside: avoid;
            }
            .bracket-tree-container {
                zoom: var(--print-zoom, 1);
                transform: none !important;
                width: 100% !important;
                padding: 2px 0 !important;
                overflow: visible !important;
                break-inside: avoid;
                page-break-inside: avoid;
            }
            .bracket-round {
                width: 190px !important;
                min-width: 190px !important;
                max-width: 190px !important;
            }
            /* Espaçamento vertical enxuto entre os confrontos: é o que permite
               uma chave grande (32 atletas) caber inteira na folha sem precisar
               reduzir tanto — a distribuição das rodadas continua automática
               (justify-content: space-around em .bracket-round). */
            .bracket-round .space-y-4 > * + * { margin-top: 0 !important; }
            .bracket-match-box { margin: 2px 0 !important; }
            .bracket-player-row {
                padding: 2px 6px !important;
                font-size: 10px !important;
                line-height: 14px !important;
            }
            /* Com "#tournamentDetailContent" para vencer a regra de campos do
               celular (input { font-size: 16px !important; min-height: 44px }),
               que também pode valer no papel e deixava cada linha com ~48px. */
            #tournamentDetailContent .bracket-player-score {
                font-size: 9px !important;
                line-height: 12px !important;
                height: 14px !important;
                min-height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
            }
            #tournamentDetailContent .bracket-player-row { min-height: 0 !important; }
            .bracket-round > div:first-child {
                padding: 2px 6px !important;
                margin-bottom: 4px !important;
                font-size: 10px !important;
                line-height: 14px !important;
            }
            /* No papel a coluna da rodada é mais larga que na tela, então o nome
               do atleta pode usar todo o espaço disponível em vez de sair
               cortado com "..." no meio. */
            .bracket-player-name { max-width: none !important; }
            /* O clube embaixo do nome é só para a tela: na folha ele aumentaria
               cada confronto e obrigaria a reduzir a chave (que já está calibrada). */
            .bracket-player-club { display: none !important; }
            /* Linhas de ligação e data/mesa são só para a tela: na folha a chave
               precisa caber inteira, com as medidas já calibradas acima. */
            .bracket-conn-svg, .bracket-match-meta { display: none !important; }

            /* ---------- PÓDIO: no rodapé da chave, ou inteiro na folha seguinte ---------- */
            .printable-podium-page {
                break-before: auto !important;
                page-break-before: auto !important;
                break-after: auto !important;
                page-break-after: auto !important;
                break-inside: avoid !important;
                page-break-inside: avoid !important;
                min-height: 0 !important;
                display: block !important;
                margin: 8px 0 0 !important;
                padding: 10px 14px !important;
                border-radius: 14px !important;
            }
            /* Chave olímpica direta: o pódio vai sempre para a folha seguinte, para
               a chave ocupar a folha toda sem ser reduzida para dar espaço a ele. */
            .printable-podium-page.podium-new-page {
                break-before: page !important;
                page-break-before: always !important;
            }
            .printable-podium-page > * + * { margin-top: 6px !important; }
            .printable-podium-page h4 { font-size: 16px !important; }
            .printable-podium-page .grid {
                display: grid !important;
                grid-auto-flow: column !important;
                grid-auto-columns: minmax(0, 1fr) !important;
                grid-template-columns: none !important;
                gap: 8px !important;
                max-width: 100% !important;
                margin: 0 !important;
            }
            .printable-podium-page .grid > div { padding: 8px !important; }
            .printable-podium-page .grid > div > * + * { margin-top: 2px !important; }
            .printable-podium-page .grid h5 { font-size: 13px !important; }
        }

        /* Layout de Chave Olímpica em Árvore - campos compactados para caber na largura útil do site */
        .bracket-tree-container {
            display: flex;
            overflow-x: auto;
            padding: 20px 0;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
        }
        .bracket-round {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 155px;
            min-width: 155px;
            max-width: 155px;
            flex-shrink: 0;
        }
        .bracket-match-box {
            background: #ffffff;
            border: 1px solid #cfd1d3;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            margin: 8px 0;
            position: relative;
        }
        .bracket-player-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 6px;
            font-size: 10.5px;
            border-bottom: 1px solid #e6e7e8;
            gap: 4px;
        }
        .bracket-player-row:last-child {
            border-bottom: none;
        }
        .bracket-player-name {
            font-weight: 700;
            color: #2e353f;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100px;
            flex: 1 1 auto;
            min-width: 0;
        }
        .bracket-player-score {
            font-weight: 800;
            background: #cfd1d3;
            color: #2e353f;
            padding: 2px 0;
            border-radius: 3px;
            width: 28px;
            min-width: 28px;
            max-width: 28px;
            flex: 0 0 28px;
            text-align: center;
            -moz-appearance: textfield;
            appearance: textfield;
        }
        .bracket-player-score::-webkit-outer-spin-button,
        .bracket-player-score::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .bracket-player-score.winner {
            background: #1e40af;
            color: #ffffff;
        }
        .bracket-player-score.gold {
            background: #b91c1c;
            color: #ffffff;
        }

        /* Tela cheia inicial dos Parceiros, só em smartphones (ver
           isMobileDevice()/initMobileSplashScreen() em app.js) — diferente da
           antiga animação de abertura removida (ver comentário logo abaixo),
           esta é condicional ao tipo de dispositivo, não aparece em
           computador/tablet, e existe para dar mais visibilidade aos
           logotipos das empresas parceiras assim que o site abre no celular. */
        #mobileSplashScreen {
            transition: opacity 0.4s ease;
        }
        #mobileSplashScreen.fading-out {
            opacity: 0;
        }
        #mobileSplashProgressBar {
            transition: width 15s linear;
        }
        #mobileSplashLogosGrid img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: contain;
            background: #ffffff;
            border-radius: 14px;
            padding: 6px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

        /* A animação de abertura (splash screen) foi removida — o site agora
           carrega diretamente na página inicial, sem tela de transição. Isso
           é diferente da tela cheia dos Parceiros em celulares (acima), que é
           uma funcionalidade nova, condicional ao dispositivo. */

        /* As abas da seção Calendário (Locais/Estaduais/Nacionais/Internacionais)
           foram removidas a pedido do usuário — a seção agora mostra apenas os
           campeonatos Locais diretamente, sem seletor de abas. */

        /* Menu de abas: os espaçamentos foram reduzidos para caber inteiro na
           tela sem precisar de barra de rolagem horizontal. Em telas realmente
           estreitas (celulares pequenos) ainda pode ser necessário deslizar o
           menu com o dedo — o overflow-x-auto continua funcionando, apenas
           escondemos a barra de rolagem visual para não poluir o layout. */
        /* Cabeçalho de folha da impressão dos campeonatos (logotipo da academia +
           nome do campeonato + logotipo do site) e os dois logotipos avulsos do
           cabeçalho da 1ª folha: existem só no papel, nunca aparecem na tela.
           As regras de aparência deles estão no bloco @media print acima. */
        .print-sheet-header,
        .print-only-block {
            display: none;
        }

        .nav-scroll {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .nav-scroll::-webkit-scrollbar {
            display: none;
            height: 0;
        }
        /* =====================================================================
           EXPERIÊNCIA NO CELULAR — LAYOUT REFEITO PARA TELA DE SMARTPHONE
           =====================================================================
           Tudo daqui para baixo só vale em telas de até 767px de largura, ou
           seja: NADA disso altera o site no computador ou no tablet — lá o
           layout continua exatamente como sempre foi.

           O que este bloco resolve, na ordem em que aparece abaixo:

           1. Cabeçalho e menu — o menu de abas do topo (que no celular ficava
              cortado nas duas pontas, obrigando a arrastar de lado) dá lugar a
              uma barra fixa no rodapé, ao alcance do polegar (ver #ttMobileNav
              no index.html e initMobileUI() em core.js). Nenhuma aba se perde:
              as que não cabem na barra ficam no botão "Mais".
           2. Modais — passam a ocupar a tela inteira, como um aplicativo:
              título fixo no topo, conteúdo rolando no meio e o botão de salvar
              fixo embaixo, sempre visível. Antes viravam uma caixinha no meio
              da tela, com o botão "Salvar" escondido lá no fim da rolagem.
           3. Tabelas largas de gestão — cada linha vira um cartão, com o rótulo
              da coluna ("E-mail:", "Categoria:") na frente de cada dado. Acaba a
              rolagem lateral. As tabelas estreitas de classificação continuam
              como tabela, que é onde elas leem melhor (ver marcaTabelasDoCelular
              em core.js, que decide isso e escreve os rótulos em data-label).
           4. Toques e digitação — botões e campos passam a ter altura mínima de
              dedo (44px, recomendação da Apple/Google) e os campos usam fonte de
              16px, que é o que impede o iPhone de dar zoom sozinho ao tocar num
              campo (comportamento do Safari abaixo de 16px).
           ===================================================================== */

        /* =====================================================================
           TEMA CLARO — vale para TODAS as telas, no computador e no celular
           =====================================================================
           A migração para o template trocou o fundo escuro pelo claro direto
           no tailwind.config do index.html (que redefine o que cada nome de
           cor do Tailwind vale como FUNDO, TEXTO e BORDA) — então "bg-white",
           "text-black" e os campos de formulário voltam sozinhos ao
           comportamento padrão (fundo branco, texto preto), sem precisar de
           nenhuma regra forçada aqui como havia no tema escuro anterior.

           Só o toque de marca no foco dos campos continua explícito: o azul
           da marca em vez do azul padrão do navegador. */
        @media screen {
            html input:focus, html select:focus, html textarea:focus,
            html .focus\:bg-white:focus {
                border-color: #2563eb;
            }
        }

        /* A barra fixa do rodapé e o avisinho "Novamente para sair" existem SÓ
           no celular. Esta regra vem antes do bloco @media abaixo de
           propósito: media query não aumenta a especificidade, então quem vem
           por último vence — se este "display:none" ficasse depois, ele
           apagaria a barra no celular também. */
        #ttMobileNav,
        #ttAvisoSairToast {
            display: none;
        }
        @media print {
            #ttMobileNav,
            #ttAvisoSairToast {
                display: none !important;
            }
        }

        @media (max-width: 767px) {

            /* ---- 1. CABEÇALHO E MENU ------------------------------------- */

            /* Cabeçalho mais baixo: no celular ele consumia quase um terço da
               tela antes de qualquer conteúdo aparecer. */
            header .max-w-7xl {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
                gap: 0.5rem;
            }
            /* "header h1" sozinho (2 seletores de elemento) tem especificidade
               MENOR que as classes do Tailwind no próprio elemento (.text-2xl,
               .tracking-wide) — por isso essa regra nunca vencia antes, e o
               título ficava nos 24px do "text-2xl" de sempre, quebrando em duas
               linhas no celular. Repetir a classe ("h1.text-2xl") empata em
               número de seletores e ainda soma mais uma classe, o suficiente
               pra vencer. O tamanho usa clamp() (mínimo/típico/máximo) em vez
               de um valor fixo: já testei em várias larguras de tela (320 a
               430px, as mais comuns de celular) e um valor fixo só cabia numa
               linha numa faixa estreita de larguras — com clamp() o título
               cresce ou encolhe suave conforme a tela, sempre numa linha só. */
            header h1.text-2xl {
                font-size: clamp(0.875rem, 0.33rem + 2.73vw, 1.0625rem);
                line-height: 1.2;
                letter-spacing: 0;
                white-space: nowrap;
            }
            header .w-14 {
                width: 2.5rem;
                height: 2.5rem;
            }
            /* O subtítulo ("Plataforma para Atletas e Academias...") sai só no
               celular: é decorativo e roubava duas linhas do topo. */
            header h1 + p {
                display: none;
            }

            /* O menu de abas do topo é substituído pela barra fixa do rodapé.
               Continua existindo no HTML (e no computador), só não aparece aqui. */
            body.tt-mobile nav.tt-topnav {
                display: none;
            }

            /* Barra superior de utilidades: sempre um grupo só (#ttTopUtilityRight),
               jogado para a direita (justify-end), tanto no computador quanto no
               celular. Antes existia um segundo grupo à esquerda
               (#ttTopUtilityLeft, com o item "Visão Geral do Site"/"Sobre o Site")
               e por isso essa regra forçava "space-between" aqui embaixo de
               639px — como esse item virou o link do Manual do Usuário e foi
               para dentro do grupo da direita junto com os demais, não há mais
               dois grupos para separar. */
            .bg-slate-950.text-slate-300.text-xs .max-w-7xl {
                /* a classe do HTML é "flex-col sm:flex-row" (empilha abaixo de
                   640px) — mas nosso ponto de corte de celular vai até 767px,
                   então de 640 a 767px o Tailwind já vira linha sozinho e aqui
                   embaixo (até 639px) precisa ser forçado, senão os itens
                   ficam empilhados em vez de em linha. */
                flex-direction: row;
                justify-content: flex-end;
                gap: 0.5rem;
            }
            #ttTopUtilityRight {
                flex: 0 0 auto;
                gap: 0.625rem;
            }

            /* "Instalar App" some do topo no celular: o convite equivalente já
               aparece, maior, na tela inicial (#installAppCard) — precisa do
               !important porque updateInstallAppUI() liga/desliga a classe
               "hidden" deste mesmo botão por JavaScript. */
            #installAppHeaderBtn {
                display: none !important;
            }

            /* Ícones de Parcerias, Treinos e Entrar/conta, no topo do celular.
               A pedido do usuário, os três ganham um NOME embaixo do ícone,
               igual aos botões do rodapé (mesmo tamanho de letra, maiúsculas,
               negrito) — por isso as regras de ícone/rótulo abaixo são as
               mesmas dos botões de #ttMobileNav, só que numa "pílula" em vez de
               ocupar a barra inteira, já que aqui são só 3 itens com largura
               livre (não precisam dividir a tela em colunas iguais). */
            .tt-top-icon-btn,
            #authHeaderArea > div.cursor-pointer,
            #authHeaderArea > button.tt-authGuestBtn {
                width: auto;
                height: auto;
                min-width: 2.75rem;
                padding: 0.3125rem 0.5rem 0.25rem;
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                border-radius: 0.875rem;
                background: rgba(255, 255, 255, .06);
                box-shadow: none;
                flex-shrink: 0;
            }
            .tt-top-icon-btn > i,
            #authHeaderArea > div.cursor-pointer > i,
            #authHeaderArea > button.tt-authGuestBtn > i {
                font-size: .9375rem;
                line-height: 1;
                margin: 0 !important;
            }
            .tt-top-icon-btn > span,
            .tt-authLabelCel {
                font-size: .4375rem;
                font-weight: 700;
                letter-spacing: -0.01em;
                line-height: 1.1;
                text-transform: uppercase;
                white-space: nowrap;
            }

            /* Ícone "Entrar" / avatar do menu da pessoa logada, no topo direito.
               #authHeaderArea é remontado por checkAuthSession() em core.js a
               cada login/troca de sessão — por isso o CSS aqui mira nos
               elementos genéricos (o gatilho do menu, dentro do container), não
               num id fixo, e funciona para as 4 variações (visitante, atleta,
               técnico, administração) sem precisar duplicar HTML. O rótulo
               COMPLETO (tt-authLabel: "Admin Master", "Olá, Fulano"...) some no
               celular — quem aparece embaixo do ícone é a versão curta
               (tt-authLabelCel: "Admin", "Perfil", "Painel", "Entrar"), gerada
               por core.js junto com o rótulo completo. A setinha do dropdown
               (tt-authChevron) some nos dois casos: não sobra espaço pra ela
               nem faz falta, o toque no ícone já abre o menu. */
            #authHeaderArea .tt-authLabel,
            #authHeaderArea .tt-authChevron {
                display: none;
            }
            /* Visitante (ninguém logado): ícone "Entrar" na cor pedida pelo
               usuário — só nesse estado; administração/técnico/atleta mantêm a
               cor de cada papel (vermelho/verde-esmeralda/azul), igual ao
               computador, pelo mesmo motivo já registrado noutras partes do
               projeto: cor diferencia quem está logado. */
            #authHeaderArea > button.tt-authGuestBtn {
                color: #02F737 !important;
                background: rgba(2, 247, 55, .14);
            }
            #authHeaderArea .dropdown-menu {
                top: calc(100% + 0.5rem);
            }

            /* ---- 2. MODAIS EM TELA CHEIA --------------------------------- */

            /* Todos os modais do site seguem o mesmo formato no HTML:
               <div id="algumaCoisaModal" class="fixed inset-0 ... flex ... p-4">
                   <div class="bg-white rounded-3xl max-w-* w-full ...">
               Por isso dá para tratar os 31 de uma vez, pelo final do id. */
            div[id$="Modal"].fixed.inset-0 {
                padding: 0;
                align-items: stretch;
                justify-content: stretch;
            }
            div[id$="Modal"].fixed.inset-0 > div {
                width: 100%;
                max-width: none;
                height: 100%;
                max-height: none;
                border-radius: 0;
                display: flex;
                flex-direction: column;
                /* respeita a faixa preta do iPhone (área segura) */
                padding-bottom: env(safe-area-inset-bottom, 0px);
            }

            /* Modais "simples" (sem cabeçalho/corpo separados no HTML, como o de
               login): o próprio painel passa a rolar, senão o conteúdo mais alto
               que a tela ficaria inacessível agora que ele tem altura fixa. */
            div[id$="Modal"].fixed.inset-0 > div:not(:has(> .overflow-y-auto)) {
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            /* Modais estruturados (cabeçalho + corpo rolante): o corpo ocupa o
               espaço que sobra e rola sozinho, com o cabeçalho parado no topo. */
            div[id$="Modal"].fixed.inset-0 > div > .overflow-y-auto {
                flex: 1 1 auto;
                min-height: 0;
                -webkit-overflow-scrolling: touch;
            }

            /* O X de fechar vira um alvo de dedo de verdade (antes era um ícone
               de ~20px, difícil de acertar). */
            div[id$="Modal"] button > i.fa-times {
                font-size: 1.25rem;
            }
            div[id$="Modal"] button:has(> i.fa-times) {
                min-width: 44px;
                min-height: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            /* Botão de salvar/enviar fixo no rodapé do modal.
               O "respiro" (padding-bottom no form) é o que dá espaço para o
               position:sticky funcionar — um elemento só consegue grudar dentro
               da área do pai; a margem negativa de mesmo valor devolve esse
               espaço, para não sobrar um vão em branco no fim da rolagem. */
            /* 1,5rem foi medido no navegador: é a folga mínima que faz o botão
               ficar ancorado durante toda a rolagem e terminar exatamente no
               mesmo lugar no fim dela (com folga maior, sobrava uma faixa
               branca embaixo do botão ao chegar ao fim do formulário). */
            div[id$="Modal"] form {
                padding-bottom: 1.5rem;
                margin-bottom: -1.5rem;
            }
            /* O botão sozinho continua com a aparência dele (azul, arredondado):
               aqui ele só passa a flutuar acima do conteúdo que rola, com uma
               sombra forte para se destacar. Pintar um fundo neste seletor seria
               errado — apagaria a cor do próprio botão. */
            div[id$="Modal"] form > button[type="submit"]:last-child {
                position: sticky;
                bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
                z-index: 5;
                box-shadow: 0 8px 22px -6px rgba(28, 35, 46, .55);
            }
            /* Quando são dois botões dentro de uma div (ex.: "Criar Campeonato" +
               "Selecionar Atletas Depois"), quem gruda é a div — e aí sim vale
               pintar o fundo, porque ela não tem aparência própria. */
            div[id$="Modal"] form > div:last-child:has(> button[type="submit"]) {
                position: sticky;
                bottom: 0;
                z-index: 5;
                background: var(--tt-fundo);
                margin-left: -1.5rem;
                margin-right: -1.5rem;
                padding: 0.625rem 1.5rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
                border-top: 1px solid var(--tt-quadros);
                box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, .4);
            }

            /* ---- 3. TABELAS LARGAS VIRAM CARTÕES ------------------------- */

            /* A classe tt-card-mobile é colocada por core.js só nas tabelas
               largas de gestão (5+ colunas ou com coluna de ações). As tabelas
               estreitas de classificação/ranking não recebem a classe e
               continuam tabelas normais. */
            table.tt-card-mobile,
            table.tt-card-mobile tbody,
            table.tt-card-mobile tr,
            table.tt-card-mobile td {
                display: block;
                width: 100%;
            }
            table.tt-card-mobile thead {
                display: none;
            }
            /* Cartões no padrão escuro do site: sem fundo, borda ciano,
               rótulos em celeste e o título (1ª coluna) em neve. */
            table.tt-card-mobile tr {
                border: 1px solid var(--tt-quadros);
                border-radius: 0.875rem;
                background: transparent !important;
                box-shadow: none;
                margin-bottom: 0.625rem;
                padding: 0.75rem 0.875rem;
            }
            table.tt-card-mobile td {
                padding: 0.28rem 0 !important;
                border: 0 !important;
                display: flex;
                align-items: baseline;
                gap: 0.5rem;
                font-size: 0.8125rem;
                text-align: left !important;
            }
            table.tt-card-mobile td::before {
                content: attr(data-label);
                flex: 0 0 40%;
                max-width: 40%;
                font-size: 0.625rem;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: .04em;
                color: var(--tt-titulo-colunas);
                opacity: .75;
                line-height: 1.5;
            }
            /* A primeira coluna (o nome) vira o título do cartão: sem rótulo,
               fonte maior, ocupando a linha inteira. */
            table.tt-card-mobile td:first-child {
                display: block;
                font-size: 0.95rem;
                font-weight: 800;
                color: var(--tt-titulos) !important;
                padding-bottom: 0.5rem !important;
                margin-bottom: 0.25rem;
                border-bottom: 1px solid rgb(var(--tt-quadros-rgb) / .35) !important;
            }
            table.tt-card-mobile td:first-child::before {
                content: none;
            }
            /* A coluna de ações vira uma faixa de botões de largura cheia. */
            table.tt-card-mobile td.tt-card-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 0.4rem;
                padding-top: 0.625rem !important;
                margin-top: 0.375rem;
                border-top: 1px solid rgb(var(--tt-quadros-rgb) / .35) !important;
            }
            table.tt-card-mobile td.tt-card-actions::before {
                content: none;
            }
            table.tt-card-mobile td.tt-card-actions > * {
                flex: 1 1 auto;
                min-height: 40px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 0.8125rem !important;
                padding: 0.5rem 0.75rem !important;
            }
            /* Sem a moldura da tabela, a rolagem lateral deixa de existir. */
            .overflow-x-auto:has(> table.tt-card-mobile) {
                overflow-x: visible;
            }

            /* Abas internas dos painéis (Atletas / Academias / Técnicos /
               Campeonatos no Painel Admin): passam a deslizar de lado em vez de
               esticar a página inteira — era isto que fazia o celular "afastar
               o zoom" e encolher todo o site nas telas de administração. */
            .border-b.mb-6.flex.gap-6,
            .flex.gap-6.border-b,
            .flex.gap-4.border-b {
                overflow-x: auto;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
                gap: 1rem;
            }
            .border-b.mb-6.flex.gap-6::-webkit-scrollbar,
            .flex.gap-6.border-b::-webkit-scrollbar,
            .flex.gap-4.border-b::-webkit-scrollbar {
                display: none;
            }
            .border-b.mb-6.flex.gap-6 > button,
            .flex.gap-6.border-b > button,
            .flex.gap-4.border-b > button {
                flex: 0 0 auto;
                white-space: nowrap;
            }

            /* ---- 4. TOQUES E DIGITAÇÃO ----------------------------------- */

            /* 16px é o limite abaixo do qual o Safari do iPhone dá zoom sozinho
               quando a pessoa toca num campo — e depois deixa a página torta.
               Com 16px o zoom não acontece. */
            input:not([type="checkbox"]):not([type="radio"]),
            select,
            textarea {
                font-size: 16px !important;
                min-height: 44px;
            }
            textarea {
                min-height: 88px;
            }
            /* Caixas de marcar maiores, que é o controle mais difícil de acertar
               com o dedo (listas de inscrição em campeonato, por exemplo).
               Os :not(.sr-only) são essenciais: os interruptores do Painel Admin
               (Modo Manutenção, Publicidades Flutuantes...) são um checkbox
               INVISÍVEL de 1px com uma chave desenhada ao lado; aumentá-lo criaria
               uma área de toque de 20px fora do lugar da chave que se vê. */
            input[type="checkbox"]:not(.sr-only),
            input[type="radio"]:not(.sr-only) {
                width: 20px;
                height: 20px;
            }
            /* Qualquer botão do site passa a ter altura de alvo de dedo. */
            button,
            .nav-btn,
            a.inline-flex,
            a.flex {
                min-height: 40px;
            }
            /* ...menos os que são apenas um ícone dentro de texto/linha, que
               ficariam desalinhados se ganhassem altura. */
            button.absolute,
            td button,
            th button,
            label button,
            button.w-6,
            button.w-8 {
                min-height: 0;
            }

            /* Links do rodapé: eram linhas de texto de ~19px de altura, difíceis de
               acertar com o dedo. Ganham espaçamento vertical para virar alvos
               de toque de verdade, sem mudar a aparência. */
            footer ul.space-y-2 > li > a,
            footer ul > li > a {
                display: inline-block;
                padding: 0.4rem 0;
                min-height: 36px;
            }

            /* Conteúdo principal com menos margem lateral (mais área útil) e um
               respiro embaixo, para a barra fixa do rodapé não cobrir o fim da
               página. */
            main {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
                padding-top: 1rem;
                padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
            }
            /* O mesmo respiro no fim do rodapé: sem ele, a última linha (direitos
               autorais e "Última atualização do sistema") ficava por baixo da barra. */
            footer.py-10 {
                padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
            }
            /* Cartões: menos preenchimento, para o conteúdo ganhar largura. */
            main .p-8 { padding: 1rem; }
            main .p-6 { padding: 0.875rem; }
            main .px-8 { padding-left: 1rem; padding-right: 1rem; }

            /* Títulos grandes de seção encolhem para não quebrar em 3 linhas. */
            main h2.text-4xl, main .text-4xl { font-size: 1.5rem; line-height: 1.2; }
            main h2.text-3xl, main .text-3xl { font-size: 1.375rem; line-height: 1.2; }
            main h3.text-2xl, main .text-2xl { font-size: 1.175rem; line-height: 1.25; }

            /* Cronômetro dos treinos: o mostrador (3rem) mais os três botões de
               48px não cabiam em 390px e empurravam a página inteira para o
               lado. Aqui o mostrador encolhe e a linha se distribui na largura
               disponível, sem perder nenhum botão. */
            #timerDisplay {
                font-size: 2.25rem;
                padding-left: 0.875rem;
                padding-right: 0.875rem;
                letter-spacing: .06em;
            }
            .flex.items-center.space-x-6:has(> #timerDisplay) {
                width: 100%;
                justify-content: space-between;
                gap: 0.625rem;
            }
            .flex.items-center.space-x-6:has(> #timerDisplay) > :not([hidden]) ~ :not([hidden]) {
                margin-left: 0;
            }
            .flex.items-center.space-x-6:has(> #timerDisplay) .w-12 {
                width: 2.75rem;
                height: 2.75rem;
            }

            /* ---- 5. BARRA FIXA DE NAVEGAÇÃO NO RODAPÉ -------------------- */

            /* Lista fixa de 5 botões (Início/Clubes/Técnicos/Ligas/Eventos —
               ver o HTML), numa linha só. Pedido do usuário (23/10/2026): a
               barra deixa o vermelho (#dc2626) e passa a um padrão de AZUL com
               bom contraste — fundo azul-escuro #1e40af com ícones e textos
               brancos (contraste 8,7:1). A aba aberta se distingue por um
               fundo azul mais claro (#2563eb, branco sobre ele = 5,2:1) e uma
               barrinha azul-clara no topo. */
            #ttMobileNav {
                display: flex;
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 45;              /* acima do conteúdo, abaixo dos modais (z-50) */
                background: #1e40af;
                border-top: 1px solid #1e3a8a;
                padding-bottom: env(safe-area-inset-bottom, 0px);
                box-shadow: 0 -4px 16px -6px rgba(0, 0, 0, .35);
            }
            #ttMobileNav > button {
                flex: 1 1 0;
                min-width: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
                padding: 0.4375rem 0 0.5rem;
                min-height: 54px;
                color: #ffffff;
                background: transparent;
                border: 0;
                font-size: 0.5625rem;
                font-weight: 700;
                letter-spacing: -0.01em;
                line-height: 1.1;
                text-transform: uppercase;
                position: relative;
            }
            #ttMobileNav > button > i {
                font-size: 1rem;
                line-height: 1;
            }
            #ttMobileNav > button > span {
                width: 100%;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            #ttMobileNav > button.tt-ativo {
                background: #2563eb;
                font-weight: 900;
            }
            #ttMobileNav > button.tt-ativo::before {
                content: "";
                position: absolute;
                top: 0;
                width: 26px;
                height: 3px;
                border-radius: 0 0 3px 3px;
                background: #93c5fd;
            }
            #ttMobileNav > button:focus-visible {
                outline: 2px solid #ffffff;
                outline-offset: -4px;
            }

            /* O menu da pessoa logada (canto superior direito) abria só ao passar
               o mouse, gesto que não existe em tela de toque. No celular ele
               passa a abrir e fechar no toque (ver ativaMenuDeToqueDoCabecalho
               em core.js, que põe/tira a classe tt-aberto).
               O ":not(.tt-aberto)" abaixo é o que corrige o toque não abrir
               nada: sem ele, esta regra (3 seletores = especificidade 30)
               sempre ganhava de ".dropdown-menu.tt-aberto" (2 seletores =
               especificidade 20), inclusive depois do toque, porque celulares
               (principalmente iOS) deixam um ":hover" "grudado" no elemento
               tocado. Com o ":not()", as duas regras nunca se aplicam ao
               mesmo tempo no mesmo elemento — a classe tt-aberto sempre
               manda quando presente. */
            .dropdown-container:hover .dropdown-menu:not(.tt-aberto) {
                display: none;
            }
            .dropdown-menu.tt-aberto {
                display: block;
            }
            #authHeaderArea .dropdown-menu {
                right: 0;
                min-width: 13rem;
            }
            #authHeaderArea .dropdown-menu button {
                min-height: 44px;
                font-size: 0.875rem;
            }

            /* As faixas flutuantes de parceiros já são trocadas pela faixa
               horizontal no celular (renderPartnerAdsSection em core.js); aqui
               só garantimos que elas nunca cubram a barra do rodapé. */
            #partnerAdsFloatingStripWrapRight,
            #partnerAdsFloatingStripWrapLeft {
                display: none !important;
            }

            /* ---- 6. AVISO "NOVAMENTE PARA SAIR" (botão voltar na tela inicial) --- */
            /* Ver aoVoltarNoCelular()/mostraAvisoSair() em core.js: um
               avisinho passageiro (não bloqueia a tela, some sozinho), um
               pouco acima da barra do rodapé (z-45) e abaixo dos modais de
               verdade (z-50). Centralizado, largura do próprio texto. */
            #ttAvisoSairToast {
                display: block;
                position: fixed;
                left: 50%;
                bottom: calc(78px + env(safe-area-inset-bottom, 0px));
                transform: translateX(-50%);
                z-index: 46;
                background: rgba(17, 21, 28, .92);
                color: #f2f4f6;
                font-weight: 800;
                font-size: 0.8125rem;
                padding: 0.625rem 1.125rem;
                border-radius: 999px;
                box-shadow: 0 10px 25px -8px rgba(0, 0, 0, .55);
                white-space: nowrap;
                pointer-events: none;
            }
            #ttAvisoSairToast.hidden {
                display: none;
            }

            /* ---- 7. FASE DE GRUPOS (CAMPEONATOS) -------------------------- */
            /* Tela de campeonatos.js (viewTournamentDetail): a tabela de
               classificação do grupo (Atleta/Vitórias/Saldo Sets/Saldo Pontos)
               já lia bem — o problema relatado era nos CARTÕES DE PARTIDA logo
               abaixo ("Partidas do Grupo"). No layout de computador os nomes
               dos dois atletas ficam lado a lado com a etiqueta "Melhor de 5
               sets..." entre eles (nomes truncados em 180px cada, o suficiente
               em telas largas) e os 5 sets numa única linha de 5 colunas. No
               celular isso não cabe: os 180px por nome mais a etiqueta somam
               bem mais que a largura da tela, então os nomes apareciam cortados
               ("Pietro ...") — e as 5 colunas de set espremiam 2 campos de
               placar cada uma em poucos pixels. Corrigido empilhando nome/
               etiqueta/nome (cada nome ganha a largura toda do cartão, sem
               cortar) e trocando as 5 colunas fixas por "repeat(auto-fit,
               minmax(...))": cada coluna de set só entra se houver espaço de
               verdade para os dois campos de placar + o "x" sem espremer — em
               celulares bem estreitos (~320px) vira 1 coluna só, do 360px pra
               cima já cabem 2. Testei nas larguras mais comuns (320 a 430px):
               nunca estoura a largura do cartão nem encolhe os campos abaixo
               do tamanho tocável. */
            .printable-group-body > .flex.justify-between.items-center.border-b {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            .group-match-card > .flex.justify-between.items-center.font-bold {
                flex-direction: column;
                align-items: stretch;
                gap: 0.5rem;
                text-align: center;
            }
            .group-match-card > .flex.justify-between.items-center.font-bold > .truncate {
                max-width: none;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
            }
            .group-match-card .group-match-format-badge {
                align-self: center;
            }
            .group-match-card .grid.grid-cols-5 {
                grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
                gap: 0.5rem;
            }
        }

/* ============================================================================
   ALARME DO TEMPORIZADOR DE TREINOS
   ============================================================================
   Quando o tempo da rotina acaba, o core.js toca o alarme (som gerado pelo
   próprio navegador, sem arquivo de áudio) e põe a classe .tt-alarme-tocando
   no mostrador. Aqui o mostrador pisca em laranja — para quem está longe do
   telefone, com o som no mudo ou com deficiência auditiva, o fim do tempo
   também é VISÍVEL. O texto continua branco o tempo todo: branco sobre o
   laranja da paleta dá 3,4:1, acima do mínimo de 3:1 da WCAG para texto grande
   (o mostrador tem 36px no celular e 48px no computador).
   Fica em @media screen para não interferir na impressão das fichas. */
@media screen {
    @keyframes ttPiscaAlarme {
        0%, 100% { background-color: #dc2626; }
        50%      { background-color: #0f172a; }
    }

    #timerDisplay.tt-alarme-tocando {
        animation: ttPiscaAlarme .55s steps(1, end) infinite;
        border-color: #dc2626;
        color: #ffffff;
    }

    /* Quem pediu ao sistema para reduzir animações vê o mostrador aceso em
       laranja, sem piscar. */
    @media (prefers-reduced-motion: reduce) {
        #timerDisplay.tt-alarme-tocando {
            animation: none;
            background-color: #dc2626;
        }
    }
}

/* ============================================================================
   REDESIGN DA SEÇÃO CAMPEONATOS — VERSÃO ENXUTA
   ============================================================================
   Primeira versão deste bloco tinha selo colorido em cima de selo (status +
   edição + tipo + calendário local), barra de progresso em cada cartão e uma
   faixa "Ao Vivo" cheia de caixinhas — o usuário achou poluído. Esta versão
   troca isso por texto simples e pouquíssima cor: só o essencial pra decidir
   em qual campeonato entrar (nome, um status quando ele importa, e um
   caminho claro pra chave). O ciano é o único acento interativo; laranja
   aparece só quando algo está REALMENTE ao vivo agora.

   Igual antes, tudo em @media screen (nunca vale pra impressão), e a parte
   2 (categoria/grupos/chave/pódio) só acrescenta aparência às classes que a
   impressão também usa (tournament-category-card, bracket-round,
   printable-podium-page etc. — ver "@media print" no início deste arquivo),
   sem renomear nada.
   ============================================================================ */
@media screen {

    /* ---------- 1a. ABAS DE FILTRO ----------
       Convertidas para o padrão escuro do resto do site (bg-marinho,
       text-celeste, destaque text-laranjadestaque/border-laranjadestaque),
       a pedido do usuário — era a mesma paleta clara (slate/azul) usada na
       época em que esta tela tinha sido revertida para tema claro por causa
       de um bug de contraste (botões pareciam desabilitados). Aqui o cuidado
       foi o mesmo: manter o estado ATIVO/HABILITADO bem contrastado
       (celeste/branco vibrante) e só o estado :disabled de fato esmaecido
       (cinza escuro), para não repetir aquele problema. */
    #tournamentsFilterBar,
    #calendarFilterBar {
        display: flex;
        flex-wrap: wrap;
        gap: 22px;
        padding-bottom: 14px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--tt-quadros);
    }
    .tt-camp-tab {
        background: none;
        border: none;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--tt-resp1);
        cursor: pointer;
        padding: 4px 0 14px;
        position: relative;
    }
    .tt-camp-tab:hover { color: var(--tt-resp2); }
    .tt-camp-tab .tt-camp-tab-count { color: var(--tt-texto); font-weight: 500; }
    .tt-camp-tab.tt-camp-tab-active { color: var(--tt-titulos); }
    .tt-camp-tab.tt-camp-tab-active::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 2px;
        background: var(--tt-destaque);
        border-radius: 2px;
    }

    /* ---------- 1b. JOGOS AO VIVO (aba das barras de filtro + tela na seção Eventos) ---------- */
    .tt-camp-tab.tt-camp-tab-live,
    .tt-camp-tab.tt-camp-tab-live .tt-camp-tab-count { color: #ff4d4d; }
    .tt-camp-tab.tt-camp-tab-live { display: inline-flex; align-items: center; gap: 7px; }
    .tt-camp-tab.tt-camp-tab-live:hover { color: #ff8080; }
    .tt-camp-tab.tt-camp-tab-live.tt-camp-tab-active::after { background: #ff4d4d; }
    .tt-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
    .tt-live-card {
        border: 3px solid #ff0000;
        border-radius: 14px;
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
        transition: border-color .15s;
    }
    .tt-live-card:hover { border-color: var(--tt-destaque); }
    .tt-live-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .tt-live-card-badge { display: inline-flex; align-items: center; gap: 7px; color: #ff4d4d; font-size: 11px; text-transform: uppercase; }
    .tt-live-card-mesa { font-size: 11px; color: var(--tt-texto); }
    .tt-live-card-tourn { color: var(--tt-titulos); font-size: 15.5px; }
    .tt-live-card-acad { color: var(--tt-texto); font-size: 12.5px; }
    .tt-live-card-cat {
        color: var(--tt-texto); font-size: 11px; text-transform: uppercase;
        margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(var(--tt-quadros-rgb) / .3);
    }
    /* Placar: nome | sets vencidos | pontos do set em andamento */
    .tt-live-card-head,
    .tt-live-card-row { display: grid; grid-template-columns: 1fr 44px 64px; align-items: center; column-gap: 6px; }
    .tt-live-card-head { font-size: 10.5px; text-transform: uppercase; color: var(--tt-titulo-colunas); text-align: center; }
    .tt-live-card-head span:last-child { color: #ff4d4d; }
    .tt-live-card-row { padding: 4px 0; }
    .tt-live-card-row .tt-camp-pscore { text-align: center; }
    .tt-live-card-pts {
        text-align: center; font-size: 22px; color: #FF7B04; font-variant-numeric: tabular-nums;
        border: 1px solid #ff4d4d; border-radius: 8px; padding: 2px 0;
    }
    .tt-live-card-encerrada { border: 1px solid rgb(var(--tt-quadros-rgb) / .45); }
    .tt-live-card-badge.tt-live-card-badge-fim { color: var(--tt-texto); }
    .tt-live-card-venc { text-align: center; color: #DAA520; font-size: 18px; }
    .tt-live-card-sets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--tt-texto); }
    .tt-live-card-set { border: 1px solid rgb(var(--tt-quadros-rgb) / .4); border-radius: 6px; padding: 2px 7px; font-variant-numeric: tabular-nums; }

    /* Link do cabeçalho: vermelho e em negrito (o id vence a regra global
       que tira o negrito de tudo no topo deste arquivo). */
    #headerLiveLink { color: #ff4d4d; font-weight: 700 !important; }
    #headerLiveLink:not(.hidden) { display: inline-flex; }
    #headerLiveLink:hover { color: #ff8080; }

    /* Botão "Check-in" do cabeçalho (atleta logado com clube): vermelho em
       destaque, com o selo branco dos check-ins que restam na semana. O
       !important no .hidden é porque no celular .tt-top-icon-btn também
       define display e empataria com o .hidden do Tailwind. */
    #headerCheckinBtn {
        position: relative; align-items: center; gap: .45rem;
        padding: .375rem .75rem; border-radius: .625rem;
        background: #dc2626; color: #ffffff; font-size: .8125rem; line-height: 1.2; white-space: nowrap;
        box-shadow: 0 2px 10px rgba(220, 38, 38, .45); transition: background .15s;
    }
    #headerCheckinBtn.hidden { display: none !important; }
    #headerCheckinBtn:not(.hidden) { display: inline-flex; }
    #headerCheckinBtn:hover { background: #b91c1c; }
    #headerCheckinBtn > span, #headerCheckinBtn > b { font-weight: 800 !important; }
    #headerCheckinBtn .tt-checkin-count {
        background: #ffffff; color: #dc2626; border-radius: 999px;
        padding: 0 .4rem; min-width: 1.25rem; font-size: .6875rem; line-height: 1.25rem; text-align: center;
    }
    #headerCheckinBtn .tt-checkin-count:empty { display: none; }

    /* Preenchimento automático do navegador (e-mail/senha salvos, endereço
       etc.): os campos continuam com o fundo da paleta (#172C46) e o texto
       celeste, a pedido do usuário — antes o Chrome os pintava de azul-claro,
       fora da paleta, e o olho de mostrar a senha sumia nesse fundo.
       O navegador força a cor de fundo dele com prioridade máxima, então ela
       não pode ser trocada direto: fica coberta por uma sombra interna da cor
       do campo. As duas primeiras sombras repetem as do anel de foco do
       Tailwind (focus:ring), que esta regra substituiria. A transição longa
       segura a troca do fundo onde o navegador ainda a aplica por baixo, e o
       filter:none desfaz o tom amarelado do Firefox. Regras separadas de
       propósito: um navegador que não reconhece um dos dois nomes descartaria
       a regra inteira. */
    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
        -webkit-text-fill-color: var(--tt-texto);
        caret-color: var(--tt-texto);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), inset 0 0 0 1000px var(--tt-fundo) !important;
        transition: background-color 600000s 0s, color 600000s 0s;
    }
    input:autofill, textarea:autofill, select:autofill {
        -webkit-text-fill-color: var(--tt-texto);
        caret-color: var(--tt-texto);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), inset 0 0 0 1000px var(--tt-fundo) !important;
        filter: none;
    }

    /* Home: o espaçamento entre quadros do Tailwind (space-y-*) só ignora
       elementos com o atributo [hidden], não com a classe .hidden — então o
       quadro "Verificar Alunos" escondido (todo mundo menos o técnico) ainda
       empurrava o título da Home 1,25rem para baixo. */
    #section-home > #homeVerifyStudentsBanner.hidden + * { margin-top: 0; }
    /* No celular: ícone com o nome embaixo (o resto vem de .tt-top-icon-btn) e
       o selo vira uma "bolinha" no canto, como um aviso de notificação. */
    @media (max-width: 767px) {
        #headerCheckinBtn { padding: .3125rem .5rem .25rem; border-radius: .875rem; gap: 2px; font-size: inherit; background: #dc2626; color: #ffffff; }
        #headerCheckinBtn .tt-checkin-count {
            position: absolute; top: -6px; right: -6px;
            min-width: 1rem; padding: 0 .25rem; font-size: .5625rem; line-height: 1rem;
            box-shadow: 0 0 0 2px var(--tt-fundo);
        }
    }
    .tt-camp-live-dot {
        width: 7px; height: 7px; border-radius: 50%; background: #dc2626; flex: 0 0 auto;
        animation: ttCampPulse 1.8s ease-out infinite;
    }
    @keyframes ttCampPulse {
        0% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
        70% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
        100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
    }

    /* separador "·" reutilizado em vários lugares desta seção */
    .tt-camp-sep { color: var(--tt-texto); margin: 0 6px; }

    /* ---------- 1c. CARTÕES DE CAMPEONATO (planos, sem faixa/selo) ---------- */
    #tournamentsListContainer.grid { align-items: stretch; }
    .tt-camp-card {
        background: transparent;
        border: var(--tt-quadros-espessura) solid var(--tt-resp1);
        border-radius: 14px;
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        transition: border-color .15s, box-shadow .15s;
    }
    .tt-camp-card:hover { border-color: var(--tt-resp2); box-shadow: none; }
    /* Cartão de evento (tela Eventos) que é um link inteiro — mesmos efeitos
       dos cartões de liga e de clube (.tt-card-link). Sem login o cartão não
       abre nada (.tt-camp-card-off): sem mãozinha e sem destaque. */
    .tt-camp-card-link { cursor: pointer; }
    .tt-camp-card-link:active { transform: scale(.99); }
    .tt-camp-card-link:focus-visible { outline: 2px solid var(--tt-resp2); outline-offset: 2px; }
    .tt-camp-card-off:hover { border-color: var(--tt-resp1); }

    /* Cartões de liga e de clube: o cartão inteiro é o link para o painel */
    .tt-card-link {
        display: block;
        border: var(--tt-quadros-espessura) solid var(--tt-resp1);
        border-radius: 16px;
        padding: 24px;
        cursor: pointer;
        min-width: 0;
        overflow-wrap: anywhere;
        transition: border-color .15s, transform .15s;
        -webkit-tap-highlight-color: transparent;
    }
    .tt-card-link:hover { border-color: var(--tt-resp2); }
    .tt-card-link:active { transform: scale(.99); }
    .tt-card-link:focus-visible { outline: 2px solid var(--tt-resp2); outline-offset: 2px; }
    /* Quadros da página inicial (Clubes, Ligas Regionais, Técnicos / Atletas): o quadro
       inteiro é o link; as linhas da lista se distribuem pela altura do quadro, para os
       quadros com menos itens não ficarem com um vazio embaixo. */
    .tt-home-card { display: flex; flex-direction: column; }
    .tt-home-card-lista { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; margin: 0; padding: 0; list-style: none; }
    /* Cartão de clube sem acesso ao painel: sem mãozinha, sem destaque, sem efeito de toque */
    .tt-card-link-off { cursor: default; }
    .tt-card-link-off:hover { border-color: var(--tt-resp1); }
    .tt-card-link-off:active { transform: none; }
    /* Logotipo do site no alto das telas de login (entrar, recuperar senha e
       escolher o cadastro): fundo branco como o logotipo do cabeçalho. Classe
       própria porque, dentro das janelas, o tema escuro tira o fundo de
       qualquer .bg-white. Na janelinha do Módulo financeiro o logotipo do
       clube/da liga também traz .bg-white, e a regra que o deixa
       transparente tem um id no seletor — por isso o #financeiroChooserList
       aqui, para vencê-la. */
    .tt-logo-login, #financeiroChooserList img.tt-logo-login { background: #ffffff !important; }
    /* Linha de tabela que é um link inteiro (ex.: "Campeonatos Criados pelo
       Clube"): mãozinha e destaque ao passar o mouse, contorno ao navegar pelo
       teclado e um realce rápido no toque (no celular a linha vira cartão). O
       destaque vai nas células porque, nos cartões do celular, o fundo da
       linha é forçado a transparente. */
    tr.tt-linha-link { cursor: pointer; }
    tr.tt-linha-link > td { transition: background .15s; }
    tr.tt-linha-link:hover > td { background: rgba(128, 255, 255, .08); }
    tr.tt-linha-link:active > td { background: rgba(128, 255, 255, .16); }
    tr.tt-linha-link:focus-visible { outline: 2px solid #80FFFF; outline-offset: -2px; }
    .tt-linha-link-seta { font-size: 9px; margin-left: 8px; opacity: .55; vertical-align: middle; transition: opacity .15s, transform .15s; }
    tr.tt-linha-link:hover .tt-linha-link-seta { opacity: 1; transform: translateX(2px); }
    @media (max-width: 480px) { .tt-card-link { padding: 18px; } }
    .tt-camp-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .tt-camp-card h3 { font-size: 16.5px; font-weight: 700; color: var(--tt-titulos); letter-spacing: -.005em; margin: 0; }

    .tt-camp-status { flex: 0 0 auto; font-size: 11px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
    .tt-camp-status-live { color: #f87171; }
    .tt-camp-status-live i { width: 6px; height: 6px; border-radius: 50%; background: #f87171; display: inline-block; }
    .tt-camp-status-upcoming, .tt-camp-status-done { color: var(--tt-texto); }

    .tt-camp-meta { font-size: 12.5px; color: var(--tt-texto); }

    .tt-camp-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid var(--tt-quadros);
    }
    /* Botões de ação do cabeçalho do detalhe do campeonato (Imprimir,
       Organizador, Editar, Refazer, Atletas Inscritos, Excluir): contorno
       fino sem preenchimento, igual antes, só que recolorido para o tema
       escuro (texto/borda celeste-ciano bem visíveis) em vez do tema claro
       (texto/borda slate) — "Excluir" continua destacado em vermelho/laranja
       por ser ação destrutiva. O estado :disabled continua claramente mais
       apagado que o habilitado, de propósito, para não voltar a parecer que
       botões ativos estão desabilitados (o bug original desta tela). */
    .tt-camp-ghostbtn {
        font-family: inherit; font-weight: 700; font-size: 12.5px; color: var(--tt-texto);
        background: transparent; border: 1.5px solid var(--tt-quadros); border-radius: 9px; padding: 8px 14px;
        display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
        transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
    }
    .tt-camp-ghostbtn:hover { border-color: var(--tt-destaque); color: var(--tt-titulos); background: rgb(var(--tt-destaque-rgb) / .1); }
    /* Excluir = "Botões de Atenção" da paleta parametrizável (tema.js). */
    .tt-camp-ghostbtn.tt-camp-ghostbtn-danger { background: var(--tt-atencao); color: var(--tt-atencao-fonte); border-color: var(--tt-atencao); }
    .tt-camp-ghostbtn.tt-camp-ghostbtn-danger:hover { background: var(--tt-atencao-hover); border-color: var(--tt-atencao-hover); color: var(--tt-atencao-fonte); }
    .tt-camp-ghostbtn:disabled { color: #475569; border-color: #334155; background: transparent; cursor: not-allowed; box-shadow: none; }
    .tt-camp-ghostbtn:disabled:hover { background: transparent; border-color: #334155; color: #475569; }

    .tt-camp-iconbtns { display: flex; gap: 2px; }
    .tt-camp-iconbtns button {
        background: none; border: none; color: var(--tt-texto); width: 28px; height: 28px; border-radius: 7px;
        display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px;
    }
    .tt-camp-iconbtns button:hover { background: rgb(var(--tt-destaque-rgb) / .15); color: var(--tt-titulos); }

    /* ---------- 1d. "AO VIVO AGORA" dentro do detalhe do campeonato ---------- */
    .tt-camp-live-block-top {
        display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: #f87171;
        text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
    }
    /* Os quadros das partidas (aqui e na tela "Jogos ao Vivo" da seção
       Eventos) são o mesmo .tt-live-card (ver liveMatchCardHtml): borda
       vermelha de 3px, nomes em branco, placar em laranja #FF7B04. */
    .tt-camp-pname { font-size: 13.5px; font-weight: 600; color: #ffffff; }
    .tt-camp-pscore { font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 800; color: #FF7B04; }
    /* !important porque, dentro do detalhe do campeonato, a regra genérica
       "#tournamentDetailContent span/div" (cor celeste) tem prioridade maior. */
    .tt-live-card .tt-camp-pname { color: #ffffff !important; }
    .tt-live-card :is(.tt-camp-pscore, .tt-live-card-pts) { color: #FF7B04 !important; }
    /* Nome do campeonato: maior, em negrito (o !important vence a regra
       global que tira o negrito de tudo) e sempre em caixa alta, mesmo
       que tenha sido cadastrado em minúsculas. */
    .tt-live-card .tt-live-card-tourn { color: var(--tt-titulos) !important; font-size: 18px; font-weight: 700 !important; text-transform: uppercase; }
    .tt-live-card .tt-live-card-badge:not(.tt-live-card-badge-fim),
    .tt-live-card .tt-live-card-head span:last-child { color: #ff4d4d !important; }
    .tt-live-card.tt-live-card-semlink { cursor: default; }
    .tt-live-card.tt-live-card-semlink:not(.tt-live-card-encerrada):hover { border-color: #ff0000; }

    /* ---------- 2a. CATEGORIA / GRUPOS (dentro do detalhe do campeonato) ----------
       Sem overrides de cor aqui: o cartão (bg-white border-blue-100), o
       cabeçalho (bg-blue-900 text-white) e o nome do atleta na tabela
       (text-slate-800) já nascem certos no HTML claro (ver campeonatos.js) —
       os overrides antigos forçavam cores do tema escuro anterior por cima
       (incluindo texto quase branco em cima de linha destacada em verde claro
       — ilegível), por isso foram removidos. */
    #tournamentDetailContent .tournament-category-card {
        box-shadow: none;
    }
    #tournamentDetailContent .tournament-category-header {
        box-shadow: none;
    }
    #tournamentDetailContent .group-match-card input[type="number"] {
        border-radius: 8px !important;
    }

    /* ---------- 2b. CHAVE OLÍMPICA — linhas de conexão finas entre rodadas ---------- */
    /* O bracket-tree-container/bracket-round/bracket-match-box são gerados
       pelo mesmo código que a impressão usa (ver comentário grande no início
       deste bloco) — aqui só acrescentamos linhas discretas com
       ::before/::after, então nada muda na estrutura nem no HTML impresso. */
    #tournamentDetailContent .bracket-tree-container {
        gap: 36px;
        padding: 18px 4px 16px;
    }
    #tournamentDetailContent .bracket-round {
        position: relative;
    }
    #tournamentDetailContent .bracket-round:not(:first-child) {
        border-left: 1px solid #262f3a;
        padding-left: 18px;
    }
    #tournamentDetailContent .bracket-round:not(:last-child) .bracket-match-box {
        position: relative;
    }
    #tournamentDetailContent .bracket-round:not(:last-child) .bracket-match-box::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -18px;
        width: 18px;
        height: 1px;
        background: #262f3a;
    }
    /* .bracket-match-box/.bracket-player-row/.bracket-player-name têm cor e
       moldura fixas (fundo branco, borda cinza-claro, sombra e cantos
       arredondados) escritas direto no CSS lá no topo deste arquivo — nunca
       foram adaptadas ao tema escuro nem ao espírito "sem caixa" do resto
       desta seção. Recolorir só o fundo (o que a versão anterior desta
       correção fazia) ainda deixava cada partida parecendo um cartão
       isolado — por isso agora a moldura inteira sai: cada partida vira só
       duas linhas com uma divisória fina entre elas, igual ao resto da
       tela (padrão de lista, não de cartão). */
    #tournamentDetailContent .bracket-match-box {
        background: transparent;
        border: none;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: none;
        margin: 0 0 16px;
    }
    /* Pedido do usuário: fundo branco para um jogador e verde pastel para o
       outro (em vez de transparente), com o nome sempre em laranja — cor
       escura o bastante (mesmo tom "queimado" já usado em .gold/pontuação)
       para ler bem tanto no branco quanto no verde claro. */
    #tournamentDetailContent .bracket-player-row {
        border-bottom: none;
        padding: 7px 10px;
    }
    #tournamentDetailContent .bracket-player-row:first-child {
        background: #ffffff;
    }
    #tournamentDetailContent .bracket-player-row:last-child {
        background: #d9f2df;
    }
    #tournamentDetailContent .bracket-player-name {
        color: #b91c1c;
    }
    #tournamentDetailContent .bracket-player-row:has(.bracket-player-score.winner) .bracket-player-name,
    #tournamentDetailContent .bracket-player-row:has(.bracket-player-score.gold) .bracket-player-name {
        color: #7f1d1d;
        font-weight: 800;
    }
    /* Rótulo de cada rodada ("Oitavas", "Quartas"...): é o primeiro filho de
       .bracket-round, sempre nessa posição (ver o gerador em campeonatos.js).
       Era uma pilulazinha com fundo e borda próprios, de largura variável —
       várias dessas soltas lado a lado, em alturas diferentes, é o que ainda
       lembrava um design "quadriculado". Achatado para texto simples, como
       no restante da seção. */
    #tournamentDetailContent .bracket-round > div:first-child {
        background: transparent !important;
        border: none !important;
        color: #59636f !important;
        text-align: left !important;
        padding: 0 0 8px !important;
        margin-bottom: 10px !important;
        font-weight: 700 !important;
        letter-spacing: .04em;
    }

    /* ---------- 2c. PÓDIO ----------
       Sem override de cor aqui: o pódio já nasce claro no HTML (bg-gradient
       from-amber-50 to-orange-50 + cartões bg-white, ver campeonatos.js) e
       isso já é legível no tema claro do site. A versão antiga forçava fundo
       e cartões escuros para o tema escuro anterior, mas deixava o texto
       (text-slate-900 etc.) escuro por cima — no tema claro atual isso ficava
       ilegível (fundo escuro + fonte escura), por isso foi removida. */
}

/* ---------- 2d. CATEGORIA/GRUPOS/CHAVE/PÓDIO no padrão escuro da tela
   inicial (campos #191970→#172C46 pedido pelo usuário viraram #172C46,
   igual ao resto do site; fonte #B4ECFC; borda #80FFFF; botões #00592D) ----------
   TUDO dentro deste bloco está em "@media screen": este mesmo HTML (cartão
   de categoria, tabela de grupo, cartões de partida, chave olímpica, pódio)
   é reaproveitado literalmente para IMPRIMIR as súmulas em papel para os
   árbitros (classes "printable-*"/"print-only-*", ver comentários mais
   acima nesta seção). Se essas cores escuras valessem também para a
   impressão, o papel sairia com fundo escuro/fonte clara — ilegível e
   consumindo tinta à toa. Com "@media screen", elas só entram em vigor na
   tela; ao imprimir (Ctrl+P/"Imprimir"), essas regras somem e o HTML volta
   sozinho para as classes originais (bg-white, text-slate-900 etc., que
   continuam no HTML, só ficam encobertas na tela por estas regras), que já
   eram corretas para papel. Cores de significado (fundo verde de quem está
   à frente, dourado/prata/bronze do pódio, "1º/2º Colocado") foram mantidas
   ou só clareadas o mínimo para continuar legíveis no fundo escuro — a
   informação que elas comunicam não muda. */
@media screen {
    /* ---- Quadro do topo do campeonato (dados + botões) ----
       Borda branca mais grossa e letras em negrito, a pedido do usuário. O id
       no seletor vence a regra global do topo deste arquivo que tira o
       negrito de tudo. Os dados ficam em campos com rótulo em cima e valor
       embaixo, numa grade que se ajusta à largura; os botões ficam numa linha
       só, ao lado do nome (abaixo dele em telas médias). */
    #tournamentDetailContent .tt-camp-topo { border: 2px solid #ffffff; }
    #tournamentDetailContent .tt-camp-topo *:not(i) { font-weight: 700 !important; }
    #tournamentDetailContent .tt-camp-topo .tt-camp-topo-nome { font-weight: 800 !important; line-height: 1.2; overflow-wrap: anywhere; }
    #tournamentDetailContent .tt-camp-topo-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    #tournamentDetailContent .tt-camp-topo-botoes { display: flex; flex-wrap: nowrap; gap: 8px; flex-shrink: 0; }
    #tournamentDetailContent .tt-camp-topo-botoes > button { white-space: nowrap; }
    #tournamentDetailContent .tt-camp-info-grade {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px;
        margin-top: 14px; padding-top: 14px; border-top: 1px solid rgb(var(--tt-quadros-rgb) / .3);
    }
    #tournamentDetailContent .tt-camp-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    #tournamentDetailContent .tt-camp-info-rot { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tt-texto); }
    #tournamentDetailContent .tt-camp-info-val { font-size: 13.5px; color: var(--tt-titulos); overflow-wrap: anywhere; }
    /* Aba "Dados do Campeonato" (só leitura): os mesmos campos com rótulo do
       quadro do topo, sem a linha de cima dele; o nome e o local dos jogos
       ocupam a linha inteira. */
    #tournamentDetailContent .tt-dados-grade { margin-top: 0; padding-top: 0; border-top: none; gap: 16px 24px; }
    #tournamentDetailContent .tt-dados-largo { grid-column: 1 / -1; }
    #tournamentDetailContent .tt-dados-grade .tt-camp-info-val { font-weight: 700 !important; }
    /* Para quem edita, a ficha existe só no papel (na tela já há o formulário). */
    #tournamentDetailContent .tt-dados-grade.print-only-block { display: none; }
    /* Data e horários do formulário: o ícone do calendário/relógio segue o
       esquema claro/escuro do fundo da paleta (--tt-esquema, de tema.js). */
    #tournamentDataForm input:is([type="date"], [type="time"]) { color-scheme: var(--tt-esquema, dark); }
    #tournamentDetailContent .tt-camp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
    #tournamentDetailContent .tt-camp-chip {
        display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px;
        border: 1px solid rgb(var(--tt-quadros-rgb) / .45); border-radius: 999px; font-size: 12px; color: var(--tt-titulos);
    }
    #tournamentDetailContent .tt-camp-chip-num { background: var(--tt-destaque); color: #ffffff; border-radius: 999px; padding: 0 7px; font-size: 11px; line-height: 18px; }
    /* 2ª linha do quadro: "Inscritos por categoria" à esquerda (embaixo das
       duas primeiras colunas) e, à direita, o local dos jogos — endereço com
       "Como chegar" e um mapa pequeno ao lado, a pedido do usuário. */
    #tournamentDetailContent .tt-camp-linha2 {
        display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px 20px;
        margin-top: 12px; align-items: start;
    }
    #tournamentDetailContent .tt-camp-local { display: flex; gap: 12px; align-items: stretch; min-width: 0; }
    #tournamentDetailContent .tt-camp-local-texto { flex: 1 1 0; }
    #tournamentDetailContent .tt-camp-rota {
        display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 4px;
        color: var(--tt-destaque); font-size: 12.5px;
    }
    #tournamentDetailContent .tt-camp-rota:hover { text-decoration: underline; }
    /* O mapa é só uma "foto" do local: um link por cima dele abre o Google
       Maps numa nova aba (lá dá para ver o entorno e traçar a rota). Sem esse
       link, o clique ficaria preso dentro do mapa pequeno. */
    #tournamentDetailContent .tt-camp-mapa {
        position: relative; flex: 0 0 56%; height: 110px; border-radius: 10px; overflow: hidden;
        border: 1px solid rgb(var(--tt-quadros-rgb) / .45); background: var(--tt-fundo-escuro);
    }
    #tournamentDetailContent .tt-camp-mapa iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
    #tournamentDetailContent .tt-camp-mapa-link {
        position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 6px;
    }
    #tournamentDetailContent .tt-camp-mapa-link > span {
        display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
        background: rgb(var(--tt-fundo-rgb) / .9); border: 1px solid var(--tt-quadros); color: var(--tt-titulos); font-size: 11px;
        transition: background .15s, border-color .15s;
    }
    #tournamentDetailContent .tt-camp-mapa-link:hover > span { background: var(--tt-destaque); border-color: var(--tt-destaque); }
    #tournamentDetailContent .tt-camp-mapa-link:focus-visible { outline: 2px solid var(--tt-quadros); outline-offset: -2px; border-radius: 10px; }
    @media (max-width: 1023px) {
        #tournamentDetailContent .tt-camp-linha2 { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 1023px) {
        #tournamentDetailContent .tt-camp-topo-linha { flex-direction: column; }
    }
    /* No celular os cinco botões continuam numa linha: cada um vira ícone com
       o nome embaixo. A largura parte do tamanho do nome (flex-basis auto) e a
       sobra é dividida — com larguras iguais, "Organizador" não cabia. */
    @media (max-width: 767px) {
        #tournamentDetailContent .tt-camp-topo-botoes { width: 100%; gap: 5px; }
        #tournamentDetailContent .tt-camp-topo-botoes > button {
            flex: 1 1 auto; min-width: 0; flex-direction: column; justify-content: center; gap: 4px;
            padding: 7px 2px; font-size: 9px; letter-spacing: 0;
        }
        #tournamentDetailContent .tt-camp-topo-botoes > button > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
        #tournamentDetailContent .tt-camp-topo-botoes > button > i { font-size: 15px; }
        #tournamentDetailContent .tt-camp-info-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #tournamentDetailContent .tt-camp-local { flex-direction: column; }
        #tournamentDetailContent .tt-camp-mapa { flex-basis: auto; height: 150px; }
    }

    /* ---- Abas tipo fichário do detalhe do campeonato ----
       A linha ciano da base é uma sombra interna da barra (e não uma borda),
       porque a barra rola para o lado no celular e a rolagem cortaria uma aba
       que avançasse sobre a borda. A aba aberta tem fundo opaco da cor da
       página: cobre essa linha e fica "colada" ao painel, como num fichário;
       as fechadas são translúcidas e deixam a linha passar por baixo. */
    #tournamentDetailContent .tt-fichario-abas {
        display: flex; align-items: flex-end; gap: 4px;
        padding: 6px 6px 0;
        box-shadow: inset 0 -2px 0 var(--tt-quadros);
        overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    }
    #tournamentDetailContent .tt-fichario-abas::-webkit-scrollbar { display: none; }
    #tournamentDetailContent .tt-fichario-aba {
        flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
        padding: .5rem 1rem; min-height: 0;
        border: 2px solid rgb(var(--tt-quadros-rgb) / .35); border-bottom: none;
        border-radius: 12px 12px 0 0;
        background: rgba(255, 255, 255, .05);
        color: var(--tt-resp1); font-size: .8125rem; line-height: 1.2; white-space: nowrap;
        transition: background .15s, color .15s;
    }
    #tournamentDetailContent .tt-fichario-aba > span { color: inherit; }
    #tournamentDetailContent .tt-fichario-aba:hover { background: rgb(var(--tt-quadros-rgb) / .12); color: var(--tt-resp2); }
    #tournamentDetailContent .tt-fichario-aba.ativa {
        background: var(--tt-fundo); color: var(--tt-titulos); border-color: var(--tt-quadros);
        padding-top: .75rem; padding-bottom: .625rem;
    }
    #tournamentDetailContent .tt-fichario-aba.ativa > span { font-weight: 700 !important; }
    #tournamentDetailContent .tt-fichario-aba.ativa > i { color: var(--tt-graficos); }
    #tournamentDetailContent .tt-fichario-painel {
        border: 2px solid var(--tt-quadros); border-top: none;
        border-radius: 0 0 1.25rem 1.25rem;
        padding: 1.25rem;
    }
    /* Sub-abas por categoria (dentro de "Grupos e Categorias" e "Fases
       Eliminatórias", quando há mais de uma categoria): um nível abaixo das
       abas do fichário, por isso em formato de "pílula" — a aberta preenchida
       de ciano, as demais só contornadas. */
    #tournamentDetailContent .tt-subabas {
        display: flex; gap: .375rem; flex: 1 1 auto; min-width: 0;
        overflow-x: auto; scrollbar-width: none; padding: 2px;
    }
    #tournamentDetailContent .tt-subabas::-webkit-scrollbar { display: none; }
    #tournamentDetailContent .tt-subaba {
        flex: 0 0 auto; min-height: 0; padding: .375rem .875rem;
        border: 1px solid rgb(var(--tt-quadros-rgb) / .5); border-radius: 999px;
        background: transparent; color: var(--tt-texto);
        font-size: .75rem; line-height: 1.2; white-space: nowrap;
        transition: background .15s, color .15s;
    }
    #tournamentDetailContent .tt-subaba:hover { background: rgb(var(--tt-quadros-rgb) / .12); color: var(--tt-titulos); }
    #tournamentDetailContent .tt-subaba.ativa { background: var(--tt-quadros); border-color: var(--tt-quadros); color: var(--tt-fundo); font-weight: 700 !important; }
    @media (max-width: 767px) {
        #tournamentDetailContent .tt-subaba { min-height: 2.25rem; }
    }

    /* "Mesas e Horários" já está dentro da moldura do painel: sem a moldura
       própria, para não ficar uma caixa dentro da outra. */
    #tournamentDetailContent .tt-fichario-painel > .tt-print-mesas {
        border: none; border-radius: 0; padding: 0;
    }
    @media (max-width: 767px) {
        #tournamentDetailContent .tt-fichario-aba { padding: .45rem .7rem; font-size: .75rem; gap: .375rem; }
        #tournamentDetailContent .tt-fichario-aba.ativa { padding-top: .65rem; padding-bottom: .55rem; }
        #tournamentDetailContent .tt-fichario-painel { padding: .75rem; border-radius: 0 0 1rem 1rem; }
    }

    #tournamentDetailContent .tournament-category-card {
        background: transparent !important;
        border-color: var(--tt-quadros) !important;
    }
    /* O cabeçalho da categoria é um quadro dentro do cartão: a borda fica com
       a cor de Sub Quadros da paleta (regra geral .border-bordaciano
       .border-bordaciano), sem forçar outra cor aqui. */
    #tournamentDetailContent h3,
    #tournamentDetailContent h4,
    #tournamentDetailContent h5 {
        color: var(--tt-titulos) !important;
    }
    #tournamentDetailContent .bg-slate-50,
    #tournamentDetailContent .bg-white {
        background: transparent !important;
    }
    #tournamentDetailContent .border-slate-100,
    #tournamentDetailContent .border-slate-200,
    #tournamentDetailContent .border-slate-300,
    #tournamentDetailContent .border-blue-100 {
        border-color: var(--tt-quadros) !important;
    }
    #tournamentDetailContent td,
    #tournamentDetailContent th,
    #tournamentDetailContent p,
    #tournamentDetailContent span,
    #tournamentDetailContent label,
    #tournamentDetailContent div {
        color: var(--tt-texto);
    }
    #tournamentDetailContent .text-slate-900,
    #tournamentDetailContent .text-slate-950,
    #tournamentDetailContent .text-slate-800,
    #tournamentDetailContent .text-slate-700 {
        color: var(--tt-titulos) !important;
    }
    #tournamentDetailContent .text-slate-500,
    #tournamentDetailContent .text-slate-400 {
        color: var(--tt-texto) !important;
    }
    #tournamentDetailContent .text-blue-900 {
        color: var(--tt-titulos) !important;
    }
    #tournamentDetailContent .text-blue-600,
    #tournamentDetailContent .text-blue-700 {
        color: var(--tt-destaque) !important;
    }
    /* Linha da tabela em destaque (1º/2º colocado do grupo) — mesma ideia,
       só clareada para o fundo escuro. */
    #tournamentDetailContent tr.bg-emerald-50,
    #tournamentDetailContent .bg-emerald-50\/50 {
        background: rgba(16,185,129,.15) !important;
    }
    #tournamentDetailContent .border-emerald-100 {
        border-color: rgba(16,185,129,.4) !important;
    }
    /* Selos pequenos (badges) que ficaram sem contraste: a regra genérica de
       texto (span vira #B4ECFC/branco) trocava a cor da fonte mas deixava o
       fundo claro do Tailwind (bg-blue-100, bg-amber-200, bg-slate-300)
       intocado — texto claro sobre fundo claro. Aqui cada selo trata fundo e
       texto juntos, mantendo a cor de significado (info=ciano, 1º
       colocado=ouro, 2º colocado=prata). */
    #tournamentDetailContent .bg-blue-100 {
        background: rgb(var(--tt-quadros-rgb) / .12) !important;
        color: var(--tt-texto) !important;
    }
    #tournamentDetailContent .bg-amber-200 {
        background: rgba(218,165,32,.28) !important;
        color: #fde68a !important;
    }
    #tournamentDetailContent .bg-slate-300 {
        background: rgba(148,163,184,.3) !important;
        color: #f1f5f9 !important;
    }
    /* Campos de placar (Set 1..5 dos grupos, e da chave olímpica) — mesmo
       padrão de campo usado nas telas de cadastro/edição do site inteiro. */
    #tournamentDetailContent input[type="number"] {
        background: var(--tt-fundo) !important;
        color: var(--tt-texto) !important;
        border-color: var(--tt-quadros) !important;
    }
    #tournamentDetailContent input[type="number"]:disabled {
        opacity: .6;
    }
    /* Fase de grupos: borda dos campos de pontos (Set 1..5) em laranja da
       paleta e 1px mais grossa (2px em vez de 1px). Vale para todos os
       campeonatos, pois o HTML dos campos é gerado na hora de exibir. */
    #tournamentDetailContent input[type="number"][id^="s1_p"],
    #tournamentDetailContent input[type="number"][id^="s2_p"],
    #tournamentDetailContent input[type="number"][id^="s3_p"],
    #tournamentDetailContent input[type="number"][id^="s4_p"],
    #tournamentDetailContent input[type="number"][id^="s5_p"] {
        border-width: 2px !important;
        border-style: solid !important;
        border-color: var(--tt-destaque) !important;
    }
    /* Botões: "Imprimir" de cada categoria/chave vira o mesmo contorno fino
       usado no resto do campeonato; "Gerar Diagrama"/"Arbitrar" viram
       #00592D — mesmo verde de todos os outros botões do site. */
    #tournamentDetailContent button.bg-slate-800 {
        background: transparent !important;
        border: 1.5px solid var(--tt-quadros) !important;
        color: var(--tt-texto) !important;
    }
    #tournamentDetailContent button.bg-slate-800:hover {
        border-color: var(--tt-destaque) !important;
        color: var(--tt-titulos) !important;
    }
    #tournamentDetailContent button.bg-blue-600,
    #tournamentDetailContent button.bg-indigo-600 {
        background: var(--tt-botao) !important;
        color: var(--tt-botao-fonte) !important;
        border-color: transparent !important;
    }
    #tournamentDetailContent button.bg-blue-600:hover,
    #tournamentDetailContent button.bg-indigo-600:hover {
        filter: brightness(.95);
    }
    /* Blocos informativos (fase travada, grupo único etc.) — fundo claro
       vira transparente, borda vira ciano, mantendo a cor do texto/ícone
       como identificação da mensagem (aviso, sucesso, bloqueio). */
    #tournamentDetailContent .bg-blue-50,
    #tournamentDetailContent .bg-emerald-50,
    #tournamentDetailContent .bg-amber-50 {
        background: transparent !important;
    }
    #tournamentDetailContent .border-blue-200,
    #tournamentDetailContent .border-emerald-200,
    #tournamentDetailContent .border-amber-200 {
        border-color: var(--tt-quadros) !important;
    }
    #tournamentDetailContent .text-blue-900,
    #tournamentDetailContent .text-emerald-900,
    #tournamentDetailContent .text-emerald-800 {
        color: var(--tt-titulos) !important;
    }
    /* Pódio: mantém o "cartaz de comemoração" (borda dourada/prata/bronze),
       só troca o fundo claro por transparente. */
    #tournamentDetailContent .bg-gradient-to-r.from-amber-50 {
        background: rgba(218,165,32,.08) !important;
    }
    /* Chave olímpica: rótulo de rodada (Oitavas/Quartas/...) e nome de
       cada atleta — preservando o "vencedor em laranja" já usado, só
       clareado o bastante para ler bem no fundo escuro (era um tom bem
       escuro, pensado para papel branco). */
    /* Pódio no padrão da paleta (ver podioCategoriaHtml em campeonatos.js):
       quadro e sub quadros comuns, o selo "Pódio Final Oficial" na cor dos
       títulos de colunas e o quadro do campeão na cor de Destaque. */
    #tournamentDetailContent .tt-podio-selo {
        display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
        color: var(--tt-titulo-colunas);
    }
    /* Caminho do atleta iluminado ao passar o mouse (ou tocar) no nome dele:
       highlightBracketPath() em campeonatos.js marca com .bracket-path-box
       todas as partidas em que o atleta aparece na chave. */
    #tournamentDetailContent .bracket-match-box.bracket-path-box {
        border-color: var(--tt-destaque);
        box-shadow: 0 0 0 1px var(--tt-destaque), 0 0 14px rgb(var(--tt-destaque-rgb) / .7);
    }
    #tournamentDetailContent .bracket-player-row.bracket-path-row .bracket-player-name {
        color: var(--tt-titulos) !important;
        text-shadow: 0 0 6px var(--tt-destaque);
    }
    #tournamentDetailContent .bracket-player-name { cursor: pointer; }

    /* ---------- CHAVE OLÍMPICA NO PADRÃO "ÁRVORE DE CARTÕES" ----------
       Cada partida é um cartão de duas linhas; todas as fases têm a mesma
       altura e as partidas ficam distribuídas por igual, então cada partida
       fica centralizada entre as duas que a alimentam. As linhas em cotovelo
       entre as fases são desenhadas por drawBracketConnectors()
       (campeonatos.js) num SVG por trás dos cartões. Cores da paleta do site:
       fundo #172C46, bordas e linhas #80FFFF, texto #B4ECFC, destaque #f45900. */
    #tournamentDetailContent .bracket-tree-container {
        position: relative;
        align-items: stretch !important;
        gap: 48px;
        padding: 18px 8px 22px;
    }
    #tournamentDetailContent .bracket-round {
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;
        width: 215px;
        min-width: 215px;
        max-width: 215px;
        border-left: none !important;
        padding-left: 0 !important;
        position: relative;
        z-index: 1;
    }
    /* Grade com tantas linhas quanto partidas da 1ª fase (--rows); cada partida
       ocupa --span linhas (1 na 1ª fase, 2 na 2ª, 4 na 3ª...) e fica
       centralizada nelas — assim cada partida cai exatamente no meio das duas
       que a alimentam, mesmo com cartões de alturas diferentes. */
    #tournamentDetailContent .bracket-round > .space-y-4 {
        flex: 1 1 auto;
        display: grid;
        grid-template-rows: repeat(var(--rows, 1), 1fr);
        row-gap: 14px;
    }
    #tournamentDetailContent .bracket-round > .space-y-4 > * {
        margin: 0 !important;
        grid-row: span var(--span, 1);
        align-self: center;
    }
    #tournamentDetailContent .bracket-round > div:first-child {
        color: var(--tt-destaque) !important;
        font-size: 12px !important;
        text-transform: uppercase;
    }
    #tournamentDetailContent .bracket-match-box {
        position: relative;
        z-index: 1;
        overflow: hidden;
        background: var(--tt-fundo);
        border: 1px solid rgb(var(--tt-quadros-rgb) / .55);
        border-radius: 8px;
        box-shadow: none;
        margin: 0;
    }
    #tournamentDetailContent .bracket-match-box::after { display: none !important; }
    #tournamentDetailContent .bracket-player-row {
        background: transparent !important;
        border-bottom: none;
        padding: 7px 10px;
        font-size: 12px;
    }
    #tournamentDetailContent .bracket-player-row + .bracket-player-row {
        border-top: 1px solid rgb(var(--tt-quadros-rgb) / .28);
    }
    #tournamentDetailContent .bracket-player-name,
    #tournamentDetailContent .bracket-player-row:has(.bracket-player-score.winner) .bracket-player-name,
    #tournamentDetailContent .bracket-player-row:has(.bracket-player-score.gold) .bracket-player-name {
        color: var(--tt-texto) !important;
        font-weight: 400;
    }
    /* Nome do atleta + clube logo embaixo (em branco). O wrapper ocupa o lugar
       que o nome ocupava na linha, antes do lápis e do placar. */
    #tournamentDetailContent .bracket-player-info {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
        gap: 1px;
    }
    #tournamentDetailContent .bracket-player-info .bracket-player-name { flex: 0 0 auto; }
    #tournamentDetailContent .bracket-player-club {
        color: #ffffff !important;
        font-size: 10px;
        font-weight: 400;
        line-height: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }
    /* Placar: número simples (o vencedor em laranja e negrito, como no
       modelo); quando o campo está liberado para digitar, ganha uma borda. */
    #tournamentDetailContent .bracket-player-score {
        background: transparent !important;
        border: none !important;
        border-radius: 4px;
        color: var(--tt-texto) !important;
        opacity: .85;
        font-size: 13px !important;
        text-align: center;
    }
    #tournamentDetailContent .bracket-player-score:disabled { opacity: 1; }
    #tournamentDetailContent .bracket-player-score:disabled:not(.winner):not(.gold) { opacity: .75; }
    #tournamentDetailContent .bracket-player-score.winner,
    #tournamentDetailContent .bracket-player-score.gold {
        color: var(--tt-destaque) !important;
        font-weight: 700 !important;
        opacity: 1;
    }
    #tournamentDetailContent .bracket-player-score:not(:disabled) {
        border: 1px solid rgb(var(--tt-quadros-rgb) / .6) !important;
        opacity: 1;
    }
    #tournamentDetailContent .bracket-match-meta {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        padding: 3px 10px 4px;
        border-top: 1px solid rgb(var(--tt-quadros-rgb) / .28);
        font-size: 10px;
        color: var(--tt-texto);
        opacity: .85;
        font-variant-numeric: tabular-nums;
    }
    #tournamentDetailContent .bracket-conn-svg {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        overflow: visible;
        pointer-events: none;
    }
    #tournamentDetailContent .bracket-conn-svg path {
        fill: none;
        stroke: rgb(var(--tt-quadros-rgb) / .55);
        stroke-width: 1.5;
        stroke-linejoin: round;
    }
    #tournamentDetailContent .bracket-conn-svg path.lit {
        stroke: var(--tt-destaque);
        stroke-width: 2.5;
        filter: drop-shadow(0 0 4px rgb(var(--tt-destaque-rgb) / .85));
    }

    /* "Imprimir" de cada categoria/chave desabilitado (quem não é responsável
       nem administrador). */
    #tournamentDetailContent button.bg-slate-800:disabled {
        opacity: .45;
        cursor: not-allowed;
    }
    #tournamentDetailContent button.bg-slate-800:disabled:hover {
        border-color: var(--tt-quadros) !important;
        color: var(--tt-texto) !important;
    }

    /* Edição dos atletas (grupos e 1ª fase da chave direta): itens clicáveis. */
    #tournamentDetailContent .slot-edit-name {
        cursor: pointer;
        border-bottom: 1px dotted rgb(var(--tt-resp1-rgb) / .6);
    }
    #tournamentDetailContent .slot-edit-name:hover {
        color: var(--tt-resp2);
        border-bottom-color: var(--tt-resp2);
    }
    #tournamentDetailContent .slot-pen {
        color: var(--tt-graficos);
        font-size: 10px;
        margin-left: 6px;
    }
    #tournamentDetailContent .group-slot-empty-btn {
        color: var(--tt-texto);
        font-size: 11px;
        border: 1px dashed rgb(var(--tt-quadros-rgb) / .6);
        border-radius: 8px;
        padding: 6px 12px;
        background: transparent;
        cursor: pointer;
    }
    #tournamentDetailContent .group-slot-empty-btn:hover {
        color: var(--tt-titulos);
        border-color: var(--tt-destaque);
    }
    #tournamentDetailContent .bracket-slot-editable { cursor: pointer; }
    #tournamentDetailContent .bracket-slot-editable:hover { text-decoration: underline dotted; }
    #tournamentDetailContent .bracket-slot-pen {
        flex: 0 0 auto;
        background: transparent;
        border: none;
        color: var(--tt-graficos);
        font-size: 10px;
        padding: 0 2px;
        cursor: pointer;
        opacity: .85;
    }
    #tournamentDetailContent .bracket-slot-pen:hover { opacity: 1; }
    #tournamentDetailContent .bracket-slot-empty { font-style: italic; opacity: .7; }
}

/* =====================================================================
   TEMA ESCURO NAS TELAS QUE AINDA ESTAVAM NO PADRÃO CLARO
   =====================================================================
   Resultado do diagnóstico de todas as telas no celular: a seção Treinos,
   os modais que ainda tinham painel branco, a lista de Parcerias, os botões
   e textos coloridos dos detalhes de clube/técnico e do painel do atleta, e
   alguns avisos do Painel Admin. Em vez de reescrever cada tela (boa parte
   é montada por JavaScript), estas regras convertem as classes claras do
   Tailwind dentro desses escopos para a paleta escura: fundo #172C46,
   texto #B4ECFC, títulos #fffafa, bordas #80FFFF, botões #00592D com texto
   branco e destaque #f45900. Cores de significado (excluir em vermelho,
   status "ativo" em verde) continuam, só clareadas para o fundo escuro.
   Tudo em @media screen: a impressão continua usando as cores originais.
   ===================================================================== */
@media screen {
    /* Painel dos modais ainda brancos. O :is(..., #tt-painel) e o
       .bg-white repetido só aumentam a prioridade desta regra acima da de
       "fundos claros viram transparentes" logo abaixo (que também alcança o
       painel, por ele estar dentro do modal) — o painel precisa de fundo. */
    :is(div[id$="Modal"], #tt-painel) > .bg-white.bg-white {
        background-color: var(--tt-fundo) !important;
        border: 1px solid var(--tt-quadros);
    }

    /* Fundos claros viram transparentes (o fundo escuro aparece por trás). */
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #coachesListContainer, #academiesListContainer, #installAppBtn, #delegatedAdminsList, #backupFolderStatus, #accessLogSummaryContent) :is(.bg-white, .bg-white\/70, .bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100, .bg-blue-50, .bg-indigo-50, .bg-sky-50, .bg-emerald-50, .bg-green-50, .bg-amber-50, .bg-yellow-50, .bg-orange-50, .bg-purple-50, .bg-violet-50, .bg-red-50) {
        background-color: transparent !important;
    }
    /* Menus e painéis flutuantes precisam continuar opacos. */
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(.absolute, .fixed).bg-white {
        background-color: var(--tt-fundo) !important;
        border-color: var(--tt-quadros) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #coachesListContainer, #academiesListContainer) :is(.hover\:bg-white, .hover\:bg-slate-50, .hover\:bg-slate-100, .hover\:bg-slate-200, .hover\:bg-blue-50, .hover\:bg-blue-100, .hover\:bg-emerald-50, .hover\:bg-amber-50, .hover\:bg-violet-50, .hover\:bg-red-50):hover {
        background-color: rgb(var(--tt-quadros-rgb) / .08) !important;
    }

    /* Textos: escuros viram neve (títulos) ou celeste (texto normal);
       coloridos escuros viram tons claros da mesma cor. */
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #coachesListContainer, #academiesListContainer, #installAppBtn, #delegatedAdminsList, #backupFolderStatus, #accessLogSummaryContent) :is(.text-black, .text-slate-950, .text-slate-900, .text-slate-800, .text-gray-900, .text-gray-800) {
        color: var(--tt-titulos) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #coachesListContainer, #academiesListContainer, #installAppBtn, #delegatedAdminsList, #backupFolderStatus, #accessLogSummaryContent) :is(.text-slate-700, .text-slate-600, .text-slate-500, .text-slate-400, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400, .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900, .text-indigo-600, .text-indigo-700, .text-indigo-800, .text-indigo-900, .text-sky-600, .text-sky-700, .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900, .text-green-600, .text-green-700, .text-green-800) {
        color: var(--tt-texto) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #coachesListContainer, #academiesListContainer, #installAppBtn, #delegatedAdminsList, #backupFolderStatus, #accessLogSummaryContent) :is(.text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900, .text-orange-600, .text-orange-700, .text-yellow-600, .text-yellow-700) {
        color: var(--tt-destaque) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #coachesListContainer, #academiesListContainer, #installAppBtn, #delegatedAdminsList, #backupFolderStatus, #accessLogSummaryContent) :is(.text-red-500, .text-red-600, .text-red-700, .text-red-800) {
        color: #fca5a5 !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #coachesListContainer, #academiesListContainer, #installAppBtn, #delegatedAdminsList, #backupFolderStatus, #accessLogSummaryContent) :is(.text-purple-600, .text-purple-700, .text-purple-800, .text-violet-600, .text-violet-700) {
        color: #c4b5fd !important;
    }

    /* Bordas neutras/azuladas viram ciano; a de destaque (item ativo) vira
       laranja; vermelho e âmbar continuam, só suavizados. */
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #coachesListContainer, #academiesListContainer) :is(.border:not([class*=" border-"]), .border-2:not([class*=" border-"]), .border-b:not([class*=" border-"]), .border-t:not([class*=" border-"]), .border-slate-100, .border-slate-200, .border-slate-300, .border-gray-100, .border-gray-200, .border-gray-300, .border-blue-100, .border-blue-200, .border-blue-300, .border-indigo-100, .border-indigo-200, .border-sky-200, .border-emerald-100, .border-emerald-200, .border-green-200) {
        border-color: var(--tt-quadros) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(.border-blue-400, .border-blue-500, .border-blue-600, .border-indigo-500, .border-indigo-600) {
        border-color: var(--tt-destaque) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(.border-red-100, .border-red-200, .border-red-300) {
        border-color: rgba(252, 165, 165, .6) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(.border-amber-100, .border-amber-200, .border-amber-300, .border-orange-200) {
        border-color: rgb(var(--tt-destaque-rgb) / .6) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer) :is(.divide-y) > * {
        border-color: rgb(var(--tt-quadros-rgb) / .25) !important;
    }

    /* Selos (fundo claro + texto colorido): tom translúcido da mesma cor. */
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #coachesListContainer, #academiesListContainer) :is(.bg-blue-100, .bg-indigo-100, .bg-sky-100):not(button) {
        background-color: rgb(var(--tt-quadros-rgb) / .12) !important;
        color: var(--tt-texto) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(.bg-emerald-100, .bg-green-100):not(button) {
        background-color: rgba(16, 185, 129, .2) !important;
        color: #6ee7b7 !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(.bg-amber-100, .bg-amber-200, .bg-yellow-100, .bg-orange-100):not(button) {
        background-color: rgb(var(--tt-destaque-rgb) / .18) !important;
        color: #fdba74 !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(.bg-slate-200, .bg-gray-200):not(button) {
        background-color: rgb(var(--tt-texto-rgb) / .12) !important;
        color: var(--tt-texto) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(.bg-purple-100, .bg-violet-100):not(button) {
        background-color: rgba(167, 139, 250, .2) !important;
        color: #c4b5fd !important;
    }

    /* Botões. Ação principal (fundo colorido forte) e "Editar" (fundo claro
       colorido): #00592D com texto branco. Botões brancos/cinza claro e os
       links de contato: contorno ciano, sem preenchimento — em abas, isso
       mantém a diferença entre a aba ativa (verde) e as outras. Excluir
       continua vermelho, só escurecido. */
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #installAppBtn) :is(.bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-600, .bg-indigo-700, .bg-sky-600, .bg-emerald-500, .bg-emerald-600, .bg-green-600, .bg-purple-600, .bg-violet-600, .bg-amber-500, .bg-amber-600) {
        background-color: var(--tt-botao) !important;
        color: var(--tt-botao-fonte) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(button, a):is(.bg-blue-100, .bg-amber-100, .bg-emerald-100, .bg-indigo-100) {
        background-color: var(--tt-botao) !important;
        color: var(--tt-botao-fonte) !important;
        border-color: transparent !important;
    }
    #installAppBtn.bg-white,
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #installAppBtn) :is(button, a):is(.bg-white, .bg-white\/70, .bg-slate-100, .bg-slate-200, .bg-gray-100) {
        background-color: transparent !important;
        border: 1px solid var(--tt-quadros) !important;
        color: var(--tt-texto) !important;
    }
    /* Selos de fundo forte no detalhe do campeonato (ex.: "Ranking
       Propagado"): texto branco, em vez do celeste genérico da tela. */
    #tournamentDetailContent :is(.bg-amber-500, .bg-amber-600, .bg-red-500, .bg-red-600, .bg-emerald-600) {
        color: #ffffff !important;
    }
    /* Botões de excluir = "Botões de Atenção" (fundo) e "Fonte Botões de
       Atenção" (texto) da paleta parametrizável (tema.js). */
    :is(div[id$="Modal"], #section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro, #adminTabContent) :is(button, a):is(.bg-red-50, .bg-red-100) {
        background-color: var(--tt-atencao) !important;
        border: 1px solid transparent !important;
        color: var(--tt-atencao-fonte) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(.hover\:bg-blue-700, .hover\:bg-indigo-700, .hover\:bg-emerald-700, .hover\:bg-purple-700, .hover\:bg-amber-700, .hover\:bg-amber-200):hover {
        background-color: var(--tt-botao) !important;
        filter: brightness(1.15);
    }

    /* Campos de formulário de TODOS os modais (inclusive os que já tinham
       painel escuro mas campos no branco padrão do navegador) e das telas
       acima: fundo da página, texto celeste, borda ciano. */
    :is(div[id$="Modal"], #section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
        background-color: var(--tt-fundo) !important;
        color: var(--tt-texto) !important;
        border-color: var(--tt-quadros) !important;
    }
    :is(div[id$="Modal"], #section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(input, textarea)::placeholder {
        color: rgb(var(--tt-texto-rgb) / .5) !important;
    }
    /* Campos e caixas "Ordenar por" que ainda eram brancos em qualquer outra
       tela (Painel Admin, listas): mesmo padrão. O :is(#...) dá a
       especificidade necessária para vencer a regra antiga do admin que
       pintava de preto todo texto dentro de .bg-white. */
    :is(#section-adminDashboard, #adminTabContent, main) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):is(.bg-white, .bg-slate-50) {
        background-color: var(--tt-fundo) !important;
        color: var(--tt-texto) !important;
        border-color: var(--tt-quadros) !important;
    }
}

/* =====================================================================
   PALETA PARAMETRIZÁVEL — REGRAS POR CATEGORIA (tema.js / paleta.js)
   =====================================================================
   As cores, a fonte e a espessura das bordas do site vêm das variáveis
   --tt-* definidas em tema.js (editadas na aba "Paleta de Cores" do Painel
   Admin). O Tailwind (tailwind.config, no index.html) já aponta as cores da
   marca para essas variáveis; aqui ficam as regras que dependem do PAPEL do
   elemento, não só da cor da classe. Seletores com um pouco mais de
   especificidade que as utilitárias do Tailwind, para valerem sem !important.
   ===================================================================== */

/* Quadros Principais — espessura da borda (campos de formulário e botões
   ficam de fora). Divisórias (border-b/t/l/r) seguem a mesma espessura. */
.border.border-bordaciano:not(input):not(select):not(textarea):not(button) { border-width: var(--tt-quadros-espessura); }
.border-b.border-bordaciano:not(.border) { border-bottom-width: var(--tt-quadros-espessura); }
.border-t.border-bordaciano:not(.border) { border-top-width: var(--tt-quadros-espessura); }
.border-l.border-bordaciano:not(.border) { border-left-width: var(--tt-quadros-espessura); }
.border-r.border-bordaciano:not(.border) { border-right-width: var(--tt-quadros-espessura); }

/* Sub Quadros — um quadro dentro de outro quadro usa a cor própria. */
.border-bordaciano .border-bordaciano:not(input):not(select):not(textarea):not(button) { border-color: var(--tt-subquadros); }

/* Fonte dos Botões Padrão (= cor dos Títulos dos Quadros). */
body .bg-verdebotao,
body .bg-dourado { color: var(--tt-botao-fonte); }

/* Botões de Atenção (todos os de excluir) e a fonte deles. */
button:is(.bg-red-500, .bg-red-600, .bg-red-700),
a:is(.bg-red-500, .bg-red-600, .bg-red-700) { color: var(--tt-atencao-fonte); }
button:is(.bg-red-100, .bg-red-200) { background-color: var(--tt-atencao); color: var(--tt-atencao-fonte); }
button:is(.hover\:bg-red-100, .hover\:bg-red-200):hover { background-color: var(--tt-atencao-hover); }

/* Fonte do Rodapé. */
footer.text-celeste,
footer .text-celeste { color: var(--tt-rodape); }

/* Elementos Gráficos — ícones e desenhos em cor de destaque. */
i[class*="text-laranjadestaque"],
svg[class*="text-laranjadestaque"] { color: var(--tt-graficos); }

/* Pódio em degraus (podioCategoriaHtml em campeonatos.js): 2º | 1º | 3º.
   Degraus = "Elementos Gráficos"; números = "Textos destacados"; nomes dos
   atletas em cima de cada degrau = "Texto dos Quadros". */
.tt-podio-palco {
    display: flex; align-items: flex-end; justify-content: center;
    max-width: 560px; margin: 0 auto; padding-top: 8px;
}
.tt-podio-coluna { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.tt-podio-nomes {
    display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
    min-height: 2.6em; padding: 0 6px 8px; text-align: center;
}
.tt-podio-nome {
    color: var(--tt-texto); font-weight: 800; font-size: 15px; line-height: 1.2;
    overflow-wrap: anywhere;
}
.tt-podio-degrau,
#tournamentDetailContent .tt-podio-degrau {
    display: flex; justify-content: center; align-items: flex-start; padding-top: 10px;
    background: var(--tt-graficos);
    box-shadow: inset 0 8px 0 rgb(255 255 255 / .16), inset 0 -1px 0 rgb(0 0 0 / .2);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.tt-podio-pos2 .tt-podio-degrau { height: 96px; border-radius: 8px 0 0 0; box-shadow: inset 0 8px 0 rgb(255 255 255 / .16), inset -1px 0 0 rgb(0 0 0 / .18); }
.tt-podio-pos1 .tt-podio-degrau { height: 132px; border-radius: 8px 8px 0 0; }
.tt-podio-pos3 .tt-podio-degrau { height: 70px; border-radius: 0 8px 0 0; box-shadow: inset 0 8px 0 rgb(255 255 255 / .16), inset 1px 0 0 rgb(0 0 0 / .18); }
/* O seletor com o id vence a regra geral "#tournamentDetailContent span"
   (que pinta todo texto da tela do campeonato com "Texto dos Quadros"). */
.tt-podio-num,
#tournamentDetailContent .tt-podio-num { color: var(--tt-destaque); font-weight: 900; font-size: 40px; line-height: 1; }
.tt-podio-pos1 .tt-podio-num { font-size: 50px; }
@media (max-width: 480px) {
    .tt-podio-nome { font-size: 12px; }
    .tt-podio-pos2 .tt-podio-degrau { height: 76px; }
    .tt-podio-pos1 .tt-podio-degrau { height: 104px; }
    .tt-podio-pos3 .tt-podio-degrau { height: 56px; }
    .tt-podio-num { font-size: 30px; }
    .tt-podio-pos1 .tt-podio-num { font-size: 38px; }
}
@media print {
    .tt-podio-palco { max-width: 420px; padding-top: 2px; }
    .tt-podio-nome { color: #000 !important; font-size: 11px; }
    .tt-podio-nomes { padding-bottom: 4px; min-height: 0; }
    .tt-podio-pos2 .tt-podio-degrau { height: 46px; }
    .tt-podio-pos1 .tt-podio-degrau { height: 64px; }
    .tt-podio-pos3 .tt-podio-degrau { height: 34px; }
    .tt-podio-degrau { padding-top: 4px; }
    .tt-podio-num, .tt-podio-pos1 .tt-podio-num { font-size: 22px; }
}

/* Elementos Gráficos — ícones dos TÍTULOS (pedido do usuário): todo ícone
   dentro de um título (h1–h6) usa a cor "Elementos Gráficos" da paleta,
   inclusive os que não tinham cor própria (herdavam o branco do título, como
   o de "Clubes") e os que vinham com cor fixa antiga (text-blue-600 etc.).
   Vale também para os títulos montados pelo JavaScript. O !important vence
   as regras do tema escuro que forçam cor em .text-blue-600 e afins; só na
   tela, porque a impressão continua em preto sobre branco. */
@media screen {
    :is(h1, h2, h3, h4, h5, h6) i:is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands) { color: var(--tt-graficos) !important; }
}

/* Elementos Responsíveis — estado 2 (depois da ação do mouse). Os botões
   ficam de fora: têm as próprias cores. */
body .hover\:text-neve:not(button):hover { color: var(--tt-resp2); }

/* Título Colunas — fonte dos títulos das colunas de toda tabela do site. Só na
   tela (a impressão continua em preto sobre branco). O :not(#tt-tema) só
   aumenta a prioridade para vencer a regra "#tournamentDetailContent th". */
@media screen {
    html:not(#tt-tema) th,
    html:not(#tt-tema) [role="columnheader"] { color: var(--tt-titulo-colunas); }

    /* Linha de quem é responsável por algum clube (tabelas de atletas e de
       técnicos/instrutores): a linha toda na cor de "Textos destacados". A
       classe tt-linha-resp é posta na <tr> por core.js e academias.js; o
       duplo :not(#...) dá prioridade sobre as regras "!important" por cor de
       classe das listas do painel (ex.: #adminTabContent .text-slate-600). Botões,
       selos e ícones das células mantêm as próprias cores. */
    html:not(#tt-tema):not(#tt-tema-resp) tr.tt-linha-resp > td { color: var(--tt-destaque) !important; }
}

/* ---------------------------------------------------------------------
   Painel do Administrador e painel do Clube (detalhe do clube e cartão de
   gestão) em abas, como um fichário de pastas — mesmo desenho das abas do
   detalhe do campeonato (.tt-fichario-*). Ver ttBuildFolders em core.js.
   --------------------------------------------------------------------- */
/* No celular as tabelas largas viram cartões (tt-card-mobile): lá o texto
   volta a quebrar linha, em vez de seguir em linha única. */
@media (max-width: 767px) {
    table.tt-card-mobile { white-space: normal !important; }
}
/* Listas de atletas e técnicos do clube: um registro por linha, linhas compactas. */
:is(#academyDetailContent, #userProfileContent, #adminTabContent) :is([data-pasta-painel="atletas"], [data-pasta-painel="tecnicos"]) :is(td, th) {
    padding-top: .4rem; padding-bottom: .4rem;
}
:is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-abas {
    display: flex; align-items: flex-end; gap: 4px;
    padding: 6px 6px 0;
    box-shadow: inset 0 -2px 0 var(--tt-quadros);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
:is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-abas::-webkit-scrollbar { display: none; }
:is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-aba {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; min-height: 0; cursor: pointer;
    border: 2px solid rgb(var(--tt-quadros-rgb) / .35); border-bottom: none;
    border-radius: 12px 12px 0 0;
    background: rgb(255 255 255 / .05);
    color: var(--tt-resp1); font-size: .875rem; line-height: 1.2; white-space: nowrap;
    transition: background .15s, color .15s;
}
:is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-aba:hover { background: rgb(var(--tt-quadros-rgb) / .12); color: var(--tt-resp2); }
:is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-aba.ativa {
    background: var(--tt-fundo); color: var(--tt-titulos); border-color: var(--tt-quadros);
    padding-top: .75rem; padding-bottom: .625rem;
}
:is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-aba.ativa > span { font-weight: 700 !important; }
:is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-aba > i { color: var(--tt-graficos); }
:is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-painel {
    border: 2px solid var(--tt-quadros); border-top: none;
    border-radius: 0 0 1.25rem 1.25rem;
    padding: 1.25rem;
}
/* Telas largas: todas as abas ficam na MESMA linha. Quando não cabem, a fonte e
   o espaçamento encolhem juntos, só o necessário — quem calcula o fator é
   ttAjustarAbas() em core.js, que grava --tt-aba-escala (1 = tamanho normal,
   mínimo 0,7) em cada barra. Se mesmo no mínimo não couber, a barra rola para o
   lado. No celular (< 768px) a barra sempre rola para o lado, e a pasta aberta é
   trazida para o meio (ver ttSelectFolder em core.js). */
@media (min-width: 768px) {
    :is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-aba {
        font-size: calc(.875rem * var(--tt-aba-escala, 1));
        padding-left: calc(1rem * var(--tt-aba-escala, 1)); padding-right: calc(1rem * var(--tt-aba-escala, 1));
        gap: calc(.5rem * var(--tt-aba-escala, 1));
    }
    #tournamentDetailContent .tt-fichario-aba {
        font-size: calc(.8125rem * var(--tt-aba-escala, 1));
        padding-left: calc(1rem * var(--tt-aba-escala, 1)); padding-right: calc(1rem * var(--tt-aba-escala, 1));
        gap: calc(.5rem * var(--tt-aba-escala, 1));
    }
    /* Último recurso (tablet em pé): sem os ícones as abas ainda cabem numa linha. */
    .tt-fichario-abas[data-sem-icone] > .tt-fichario-aba > i { display: none; }
}
@media (max-width: 767px) {
    :is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-aba { padding: .45rem .7rem; font-size: .75rem; gap: .375rem; }
    :is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-aba.ativa { padding-top: .6rem; padding-bottom: .5rem; }
    :is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-painel { padding: .875rem; }
}

/* ---------------------------------------------------------------------
   Histórico de Logins (Painel do Administrador → "Histórico de Logins",
   montado por logins.js). Títulos das colunas são botões de ordenar: a
   coluna ordenada fica na cor de destaque, com a seta da ordem. Selo verde
   "Sucesso" / vermelho "Falha" (cores de significado, como nos demais
   status do site), e as linhas recusadas ganham um leve fundo de alerta.
   --------------------------------------------------------------------- */
@media screen {
    .tt-login-tabela { border-collapse: collapse; }
    .tt-login-tabela th { border-bottom: 1px solid rgb(var(--tt-quadros-rgb) / .5); white-space: nowrap; }
    .tt-login-tabela td { padding: .5rem .625rem; border-bottom: 1px solid rgb(var(--tt-quadros-rgb) / .15); color: var(--tt-texto); vertical-align: top; }
    .tt-login-tabela .tt-ordem-col {
        display: inline-flex; align-items: center; gap: .375rem; width: 100%;
        padding: .625rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em;
        color: var(--tt-titulo-colunas); background: transparent; cursor: pointer; white-space: nowrap;
    }
    .tt-login-tabela .tt-ordem-col > i { opacity: .45; font-size: .7rem; }
    .tt-login-tabela .tt-ordem-col:hover > i { opacity: .9; }
    .tt-login-tabela .tt-ordem-col.ativa { color: var(--tt-destaque); font-weight: 700 !important; }
    .tt-login-tabela .tt-ordem-col.ativa > i { opacity: 1; }
    .tt-login-tabela .tt-ordem-col:focus-visible { outline: 2px solid var(--tt-destaque); outline-offset: -2px; border-radius: .375rem; }
    .tt-login-tabela tbody tr:hover > td { background: rgb(var(--tt-quadros-rgb) / .06); }
    .tt-login-tabela tr.tt-login-falha > td { background: rgb(239 68 68 / .06); }
    .tt-login-selo {
        display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
        padding: .125rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 700 !important;
    }
    .tt-login-selo.ok { background: rgb(34 197 94 / .15); color: #4ade80; border: 1px solid rgb(74 222 128 / .45); }
    .tt-login-selo.falha { background: rgb(239 68 68 / .15); color: #f87171; border: 1px solid rgb(248 113 113 / .45); }
}

/* ---------------------------------------------------------------------
   Atualização forçada dos aparelhos (Configurações Gerais do Site; ver
   executarAtualizacaoForcada/avisarAtualizacaoDisponivel em core.js).
   .tt-aviso-atualizacao = aviso no alto da tela, com contagem e o botão
   "Atualizar agora", para quem já estava com o site aberto;
   .tt-aviso-atualizacao-cheio = tela inteira "Atualizando o site..."
   enquanto as cópias guardadas são apagadas e a página recarrega.
   --------------------------------------------------------------------- */
.tt-aviso-atualizacao {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9999;
    width: min(560px, calc(100vw - 32px));
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; border-radius: 14px;
    background: var(--tt-fundo); color: var(--tt-titulos);
    border: 2px solid var(--tt-destaque); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
    font-size: 13px; line-height: 1.35;
}
.tt-aviso-atualizacao > i { color: var(--tt-destaque); }
.tt-aviso-atualizacao > span { flex: 1 1 220px; min-width: 0; }
.tt-aviso-atualizacao > button {
    background: var(--tt-botao); color: #ffffff; border: none; border-radius: 9px;
    padding: 7px 14px; font-weight: 700 !important; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.tt-aviso-atualizacao > button:hover { background: var(--tt-botao-hover); }
.tt-aviso-atualizacao.tt-aviso-atualizacao-cheio {
    top: 0; left: 0; transform: none; width: 100vw; height: 100vh; height: 100dvh; border: none; border-radius: 0;
    justify-content: center; text-align: center; background: rgb(var(--tt-fundo-rgb) / .96);
}
.tt-aviso-atualizacao-cheio > div { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 15px; }
.tt-aviso-atualizacao-cheio > div > i { font-size: 32px; color: var(--tt-destaque); }

/* =====================================================================
   BASE VISUAL — ETAPA 1 DA PROPOSTA VISUAL (aprovada em 30/10/2026)
   =====================================================================
   Acabamento comum ao site inteiro, sem mudar estrutura nem regras:
   fundo com profundidade, quadros mais leves (transparência + sombra
   suave), cartões clicáveis que "levantam", botões com resposta ao toque,
   campos com foco mais visível, entrada suave das telas e janelas,
   títulos mais firmes. TODAS as cores vêm das variáveis da paleta
   (--tt-*, tema.js) — o editor de paleta continua mandando.
   Só na TELA: a impressão (chaves, pódios, relatórios) não muda.
   Quem desativou animações no aparelho não vê movimento nenhum. */
@media screen {
    /* Fundo: um brilho suave da cor dos quadros no canto superior. */
    body {
        background-image:
            radial-gradient(900px 520px at 0% -8%, rgb(var(--tt-quadros-rgb) / .09), transparent 62%),
            radial-gradient(700px 480px at 100% 0%, rgb(var(--tt-graficos-rgb) / .05), transparent 60%);
        background-attachment: fixed;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    ::selection { background: rgb(var(--tt-destaque-rgb) / .35); color: var(--tt-titulos); }

    /* Títulos mais firmes e sem palavra sozinha na última linha. */
    h1, h2, h3, h4 { letter-spacing: -0.012em; text-wrap: balance; }

    /* Quadros principais (bordas da paleta): leve transparência e sombra. */
    :where(.border-bordaciano.rounded-3xl, .border-bordaciano.rounded-2xl) {
        background-color: rgb(255 255 255 / .025);
    }
    :where(section > .border-bordaciano.rounded-3xl, section > .border-bordaciano.rounded-2xl,
           section > div > .border-bordaciano.rounded-3xl) {
        box-shadow: 0 18px 40px -28px rgb(0 0 0 / .65);
    }

    /* Cartões que são links inteiros (clubes, ligas, início, eventos):
       sobem um pouco e ganham sombra ao passar o mouse. */
    .tt-card-link, .tt-camp-card-link {
        border-radius: 20px;
        background-color: rgb(255 255 255 / .03);
        transition: border-color .2s, transform .2s ease, box-shadow .2s ease, background-color .2s;
    }
    @media (hover: hover) {
        .tt-card-link:not(.tt-card-link-off):hover,
        .tt-camp-card-link:hover {
            transform: translateY(-3px);
            background-color: rgb(255 255 255 / .05);
            box-shadow: 0 16px 34px -18px rgb(0 0 0 / .7), 0 0 0 1px rgb(var(--tt-resp2-rgb) / .25);
        }
    }

    /* Botões: cantos padronizados e resposta ao toque. */
    button, a[class*="bg-"], [role="button"] {
        transition: background-color .18s, color .18s, border-color .18s, transform .12s ease, box-shadow .18s, filter .18s;
    }
    button:not(:disabled):active, a[class*="bg-"]:active, [role="button"]:active { transform: scale(.97); }
    button.rounded-lg, a.rounded-lg { border-radius: 12px; }
    button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [role="link"]:focus-visible {
        outline: 2px solid var(--tt-resp2);
        outline-offset: 2px;
    }

    /* Campos de formulário: foco com brilho suave da cor dos quadros. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
        transition: border-color .18s, box-shadow .18s, background-color .18s;
    }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, select:focus, textarea:focus {
        border-color: var(--tt-quadros);
        box-shadow: 0 0 0 3px rgb(var(--tt-quadros-rgb) / .22);
    }

    /* Entrada suave de cada tela (seções) e das janelas (modais). */
    main > section[id^="section-"]:not(.hidden) { animation: ttEntraTela .32s ease both; }
    .fixed.inset-0[id$="Modal"]:not(.hidden) > div { animation: ttEntraJanela .26s cubic-bezier(.2, .9, .3, 1.1) both; }
    .fixed.inset-0[id$="Modal"]:not(.hidden) { animation: ttEntraFundo .2s ease both; }

    /* Barra de rolagem fina, nas cores da paleta. */
    * { scrollbar-width: thin; scrollbar-color: rgb(var(--tt-quadros-rgb) / .35) transparent; }
    ::-webkit-scrollbar { width: 9px; height: 9px; }
    ::-webkit-scrollbar-thumb { background: rgb(var(--tt-quadros-rgb) / .3); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
    ::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--tt-quadros-rgb) / .5); }
    ::-webkit-scrollbar-track { background: transparent; }
}
/* =====================================================================
   INÍCIO PERSONALIZADO — ETAPA 2 (inicio.js monta o #homePainel)
   ===================================================================== */
#homePainel:not(.hidden) { display: flex; flex-direction: column; gap: 14px; }
.tt-inicio-ola { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tt-inicio-ola span { display: block; color: var(--tt-texto); font-size: 14px; }
.tt-inicio-ola b { display: block; color: var(--tt-titulos); font-size: 22px; font-weight: 800; line-height: 1.15; }
.tt-inicio-avatar {
    width: 46px; height: 46px; border-radius: 16px; border: 0; flex-shrink: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--tt-graficos), rgb(var(--tt-graficos-rgb) / .55));
    color: #fff; font-weight: 800; font-size: 16px;
}
.tt-inicio-aovivo {
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    width: 100%; text-align: left; border: 0; border-radius: 22px; padding: 16px 18px; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, var(--tt-botao) 0%, #1e40af 100%);
    box-shadow: 0 18px 36px -22px rgb(0 0 0 / .8);
}
.tt-inicio-aovivo::after { content: ""; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .18), transparent 70%); pointer-events: none; }
.tt-inicio-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; background: rgb(0 0 0 / .25); padding: 4px 10px; border-radius: 99px; }
.tt-inicio-ponto { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; animation: ttPulsoVivo 1.6s infinite; }
@keyframes ttPulsoVivo { 0% { box-shadow: 0 0 0 0 rgb(255 77 77 / .7); } 70% { box-shadow: 0 0 0 9px rgb(255 77 77 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 77 77 / 0); } }
.tt-inicio-aovivo-nome { font-size: 19px; font-weight: 800; margin-top: 6px; line-height: 1.2; }
.tt-inicio-aovivo-sub { font-size: 12.5px; opacity: .88; }
.tt-inicio-placar { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 10px; background: rgb(0 0 0 / .22); border-radius: 14px; padding: 10px 12px; font-size: 13.5px; }
.tt-inicio-placar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; }
.tt-inicio-placar span:last-child { text-align: right; }
.tt-inicio-placar b { font-size: 22px; color: var(--tt-destaque); white-space: nowrap; }
.tt-inicio-mais { font-size: 11.5px; opacity: .85; margin-top: 4px; }

.tt-inicio-dupla { display: grid; gap: 14px; }
@media (min-width: 768px) { .tt-inicio-dupla:not(.tt-inicio-dupla-um) { grid-template-columns: 1fr 1fr; } }
.tt-inicio-quadro {
    border: var(--tt-quadros-espessura) solid var(--tt-quadros); border-radius: 22px; padding: 16px;
    background: rgb(255 255 255 / .03);
}
.tt-inicio-treinos { display: flex; align-items: center; gap: 16px; }
.tt-inicio-anel {
    --p: 0; width: 70px; height: 70px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
    background: conic-gradient(var(--tt-destaque) calc(var(--p) * 1%), rgb(255 255 255 / .1) 0);
}
.tt-inicio-anel span { width: 54px; height: 54px; border-radius: 50%; background: var(--tt-fundo); display: grid; place-items: center; color: var(--tt-titulos); font-weight: 800; font-size: 16px; }
.tt-inicio-treinos-txt { min-width: 0; }
.tt-inicio-treinos-txt b { display: block; color: var(--tt-titulos); font-size: 16px; }
.tt-inicio-treinos-txt small { display: block; color: var(--tt-texto); font-size: 13px; margin-top: 2px; line-height: 1.35; }
.tt-inicio-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: var(--tt-botao); color: var(--tt-botao-fonte); border: 0; border-radius: 12px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.tt-inicio-btn:hover { background: var(--tt-botao-hover); }

.tt-inicio-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; color: var(--tt-titulos); font-weight: 800; font-size: 16px; }
.tt-inicio-titulo button { background: none; border: 0; color: var(--tt-destaque); font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.tt-inicio-carrossel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.tt-inicio-evento {
    flex: 0 0 210px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    text-align: left; border: var(--tt-quadros-espessura) solid rgb(var(--tt-quadros-rgb) / .45); border-radius: 20px; padding: 14px;
    background: rgb(255 255 255 / .04); color: var(--tt-texto);
}
button.tt-inicio-evento { cursor: pointer; }
button.tt-inicio-evento:hover { border-color: var(--tt-resp2); }
.tt-inicio-data { background: var(--tt-graficos); color: #fff; font-weight: 800; font-size: 11.5px; border-radius: 10px; padding: 4px 9px; }
.tt-inicio-evento b { color: var(--tt-titulos); font-size: 14.5px; line-height: 1.25; }
.tt-inicio-evento small { font-size: 12px; line-height: 1.3; }

.tt-inicio-top3 { list-style: none; margin: 0; padding: 0; }
.tt-inicio-top3 li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgb(var(--tt-quadros-rgb) / .2); font-size: 14px; color: var(--tt-texto); }
.tt-inicio-top3 li:last-child { border-bottom: 0; }
.tt-inicio-top3-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tt-titulos); }
.tt-inicio-top3 b { color: var(--tt-destaque); font-weight: 800; }
.tt-inicio-pos { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 900; font-size: 12.5px; color: #1d2230; flex-shrink: 0; }
.tt-inicio-pos1 { background: #f5c542; } .tt-inicio-pos2 { background: #cfd8e3; } .tt-inicio-pos3 { background: #e0955a; }
@media (prefers-reduced-motion: reduce) { .tt-inicio-ponto { animation: none; } }
@media print { #homePainel { display: none !important; } }

/* =====================================================================
   CAMPEONATO — ETAPA 3 DA PROPOSTA VISUAL (só na tela)
   =====================================================================
   - abas de categoria em pílulas maiores, com o número de atletas;
   - painel entra suave ao trocar de aba/categoria e o pódio "sobe"
     (classe .tt-painel-entra, posta por animarEntradaPainelCampeonato);
   - tabela do grupo mais limpa: classificados marcados por uma faixa na cor
     de destaque, linhas finas, cabeçalho na cor "Título Colunas";
   - cartões de partida e quadros de grupo arredondados.
   Os quadros "ao vivo" mantêm a borda vermelha e o placar laranja pedidos
   antes; aqui só ganham cantos maiores e fundo suave. */
@media screen {
    #tournamentDetailContent .tt-subabas { gap: .5rem; padding: 4px 2px; }
    #tournamentDetailContent .tt-subaba { padding: .5rem 1rem; font-size: .8125rem; display: inline-flex; align-items: center; gap: .5rem; }
    #tournamentDetailContent .tt-subaba-num {
        display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px;
        font-size: .6875rem; font-weight: 800; background: rgb(var(--tt-quadros-rgb) / .18); color: var(--tt-texto);
    }
    #tournamentDetailContent .tt-subaba.ativa .tt-subaba-num { background: rgb(var(--tt-fundo-rgb) / .2); color: var(--tt-fundo); }

    .tt-painel-entra { animation: ttEntraTela .3s ease both; }
    .tt-painel-entra .tt-podio-degrau { transform-origin: bottom; animation: ttSobeDegrau .8s cubic-bezier(.2, .9, .3, 1.15) both; }
    .tt-painel-entra .tt-podio-pos2 .tt-podio-degrau { animation-delay: .2s; }
    .tt-painel-entra .tt-podio-pos1 .tt-podio-degrau { animation-delay: .4s; }
    .tt-painel-entra .tt-podio-nomes { animation: ttEntraTela .5s .7s ease both; }

    /* Grupos */
    #tournamentDetailContent .printable-group-page { border-radius: 20px; }
    #tournamentDetailContent .printable-group-page table thead th {
        color: var(--tt-titulo-colunas) !important; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    }
    #tournamentDetailContent .printable-group-page table tbody tr { border-color: rgb(var(--tt-quadros-rgb) / .15) !important; }
    #tournamentDetailContent .printable-group-page table tbody tr.bg-emerald-50 {
        background: rgb(var(--tt-destaque-rgb) / .08) !important;
        box-shadow: inset 3px 0 0 var(--tt-destaque);
    }
    #tournamentDetailContent .printable-group-page table td { padding-top: .6rem; padding-bottom: .6rem; }
    #tournamentDetailContent .printable-group-page table td:first-child { padding-left: .6rem; }
    #tournamentDetailContent .group-match-card { border-radius: 16px; }
    #tournamentDetailContent .tournament-category-card,
    #tournamentDetailContent .tournament-category-header { border-radius: 22px; }

    /* Partidas ao vivo: mesmas cores de antes, acabamento da proposta. */
    .tt-live-card {
        border-radius: 20px;
        background: linear-gradient(160deg, rgb(255 77 77 / .08), rgb(255 255 255 / .02) 55%);
        box-shadow: 0 16px 32px -24px rgb(0 0 0 / .8);
    }
}
@keyframes ttSobeDegrau { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* =====================================================================
   MEU PERFIL — ETAPA 4 (perfil.js monta o #perfilConteudo)
   ===================================================================== */
.tt-perfil { display: flex; flex-direction: column; gap: 16px; max-width: 920px; margin: 0 auto; }
.tt-perfil-topo { text-align: center; }
.tt-perfil-foto {
    width: 96px; height: 96px; border-radius: 30px; margin: 0 auto 12px; object-fit: cover;
    display: grid; place-items: center; color: #fff; font-size: 34px; font-weight: 900;
    background: linear-gradient(135deg, var(--tt-graficos), rgb(var(--tt-graficos-rgb) / .5));
    box-shadow: 0 14px 34px -14px rgb(var(--tt-graficos-rgb) / .9);
}
.tt-perfil-topo h2 { color: var(--tt-titulos); font-size: 24px; font-weight: 800; }
.tt-perfil-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.tt-perfil-chip { font-size: 12px; padding: 4px 11px; border-radius: 999px; color: var(--tt-texto); background: rgb(var(--tt-quadros-rgb) / .12); border: 1px solid rgb(var(--tt-quadros-rgb) / .3); }
.tt-perfil-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tt-perfil-numeros div { text-align: center; padding: 14px 6px; border-radius: 20px; background: rgb(255 255 255 / .04); border: 1px solid rgb(var(--tt-quadros-rgb) / .2); }
.tt-perfil-numeros b { display: block; font-size: 26px; font-weight: 900; color: var(--tt-destaque); line-height: 1.1; }
.tt-perfil-numeros span { font-size: 12px; color: var(--tt-texto); }
.tt-perfil-grade { display: grid; gap: 16px; }
@media (min-width: 768px) { .tt-perfil-grade { grid-template-columns: 3fr 2fr; } }
.tt-perfil-quadro { border: var(--tt-quadros-espessura) solid var(--tt-quadros); border-radius: 22px; padding: 16px 18px; background: rgb(255 255 255 / .03); }
.tt-perfil-quadro h3 { color: var(--tt-titulos); font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.tt-perfil-svg { width: 100%; height: auto; max-height: 160px; display: block; overflow: visible; }
.tt-perfil-area { fill: rgb(var(--tt-destaque-rgb) / .16); stroke: none; }
.tt-perfil-linha { fill: none; stroke: var(--tt-destaque); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ttDesenhaLinha 1.4s .2s ease forwards; }
.tt-perfil-ponto { fill: var(--tt-destaque); stroke: var(--tt-fundo); stroke-width: 2; }
@keyframes ttDesenhaLinha { to { stroke-dashoffset: 0; } }
.tt-perfil-eixo { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tt-texto); margin-top: 6px; }
.tt-perfil-eixo span:nth-child(2) { color: var(--tt-destaque); font-weight: 800; }
.tt-perfil-medalhas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tt-perfil-medalhas div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 16px; background: rgb(255 255 255 / .04); font-size: 12px; color: var(--tt-texto); text-align: center; }
.tt-perfil-medalhas i { font-size: 24px; margin-bottom: 4px; }
.tt-perfil-medalhas b { color: var(--tt-titulos); font-size: 20px; font-weight: 900; line-height: 1.1; }
.tt-perfil-ouro { color: #f5c542; } .tt-perfil-prata { color: #cfd8e3; } .tt-perfil-bronze { color: #e0955a; } .tt-perfil-fogo { color: var(--tt-graficos); }
.tt-perfil-jogos { list-style: none; margin: 0; padding: 0; }
.tt-perfil-jogos li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgb(var(--tt-quadros-rgb) / .2); }
.tt-perfil-jogos li:last-child { border-bottom: 0; }
.tt-perfil-res { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: 13px; flex-shrink: 0; }
.tt-perfil-v { background: rgb(var(--tt-destaque-rgb) / .2); color: var(--tt-destaque); }
.tt-perfil-d { background: rgb(var(--tt-atencao-rgb) / .2); color: #ff8a8a; }
.tt-perfil-jogo { min-width: 0; font-size: 14px; color: var(--tt-texto); }
.tt-perfil-jogo b { color: var(--tt-titulos); }
.tt-perfil-jogo small { display: block; font-size: 12px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-perfil-vazio { font-size: 13px; color: var(--tt-texto); opacity: .9; }
.tt-perfil-acoes { display: flex; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .tt-perfil-linha { animation: none; stroke-dashoffset: 0; } }

/* =====================================================================
   CLUBES, LIGAS E PAINÉIS — ETAPA 5 DA PROPOSTA VISUAL (só na tela)
   =====================================================================
   - cartões de clube e de liga: cabeçalho com logotipo, nome e cidade, e
     os números em "chips" (atletas, clubes, liga);
   - cabeçalho do clube com os mesmos chips;
   - abas tipo fichário dos painéis (clube, liga, meu painel, admin): a
     mesma pasta de antes, mais arredondada, com uma faixa na cor dos
     Elementos Gráficos no topo da pasta aberta;
   - tabelas dos painéis: cabeçalho na cor "Título Colunas", linhas finas
     e realce ao passar o mouse. */
.tt-ent-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tt-ent-cab h3 { line-height: 1.2; }
.tt-ent-sub { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tt-texto); margin-top: 2px; }
.tt-ent-sub i { color: var(--tt-graficos); }
.tt-ent-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tt-ent-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.2;
    padding: 4px 10px; border-radius: 999px; color: var(--tt-texto);
    background: rgb(var(--tt-quadros-rgb) / .1); border: 1px solid rgb(var(--tt-quadros-rgb) / .28);
}
.tt-ent-chip b { color: var(--tt-destaque); font-weight: 800; }
.tt-ent-chip i { color: var(--tt-graficos); }
.tt-ent-chip-destaque { background: rgb(var(--tt-graficos-rgb) / .16); border-color: rgb(var(--tt-graficos-rgb) / .45); color: var(--tt-titulos); font-weight: 700; }
#academyDetailContent .tt-ent-chip { margin-bottom: 4px; }

@media screen {
    :is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel, #tournamentDetailContent) .tt-fichario-aba {
        border-radius: 14px 14px 0 0; position: relative;
    }
    :is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel, #tournamentDetailContent) .tt-fichario-aba.ativa::before {
        content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 3px; border-radius: 0 0 3px 3px;
        background: var(--tt-graficos);
    }
    :is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .tt-fichario-painel {
        border-radius: 0 0 1.5rem 1.5rem; background: rgb(255 255 255 / .02);
    }
    :is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) table thead th {
        color: var(--tt-titulo-colunas) !important; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
    }
    :is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) table tbody tr {
        border-color: rgb(var(--tt-quadros-rgb) / .14) !important; transition: background-color .15s;
    }
    :is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) table tbody tr:hover {
        background-color: rgb(var(--tt-quadros-rgb) / .07);
    }
    :is(#section-adminDashboard, #academyDetailContent, #userProfileContent, #section-leaguePanel) .overflow-x-auto:has(> table) { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .tt-painel-entra, .tt-painel-entra .tt-podio-degrau, .tt-painel-entra .tt-podio-nomes { animation: none !important; }
}

@keyframes ttEntraTela { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ttEntraJanela { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ttEntraFundo { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    main > section[id^="section-"]:not(.hidden),
    .fixed.inset-0[id$="Modal"]:not(.hidden),
    .fixed.inset-0[id$="Modal"]:not(.hidden) > div { animation: none !important; }
    .tt-card-link, .tt-camp-card-link, button, a[class*="bg-"], [role="button"] { transition: none !important; }
    .tt-card-link:hover, .tt-camp-card-link:hover, button:active, a[class*="bg-"]:active { transform: none !important; }
}