/* 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: #B4ECFC !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: #00592D !important;
            color: #ffffff !important;
        }
        #adminTabContent .hover\:bg-blue-700:hover,
        #adminTabContent .hover\:bg-emerald-700:hover,
        #adminTabContent .hover\:bg-slate-200:hover {
            background-color: #2e8b57 !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: #B4ECFC !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: #80FFFF !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: #00592D !important;
            color: #ffffff !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: #2e8b57 !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: #B4ECFC !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: #80FFFF !important;
        }
        #coachDetailContent .bg-blue-600,
        #coachDetailContent .bg-amber-600,
        #coachDetailContent .bg-amber-100 {
            background-color: #00592D !important;
            color: #ffffff !important;
        }
        #coachDetailContent .hover\:bg-blue-700:hover,
        #coachDetailContent .hover\:bg-amber-700:hover,
        #coachDetailContent .hover\:bg-amber-200:hover {
            background-color: #2e8b57 !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: #f45900;
            position: relative;
        }
        .nav-btn.active::after {
            content: "";
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: -6px;
            height: 2px;
            border-radius: 2px;
            background: #f45900;
        }
        .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" (paleta-cores.html): fundo #33CCCC, texto #f45900.
           Usado no "Meus Dados" da Home quando há alguém logado. */
        .btn-verificado,
        .btn-verificado * {
            color: #f45900 !important;
        }
        .btn-verificado {
            background-color: #33CCCC !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; }
            .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: #172C46;
                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 #80FFFF;
                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 #80FFFF;
                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: #B4ECFC;
                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: #fffafa !important;
                padding-bottom: 0.5rem !important;
                margin-bottom: 0.25rem;
                border-bottom: 1px solid rgba(128, 255, 255, .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 rgba(128, 255, 255, .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));
            }
            /* 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 6 botões (Início/Atletas/Academias/Técnicos/
               Campeonatos/Calendário — ver o HTML), todos na mesma cor
               #dc2626 pedida pelo usuário, numa linha só. Não existe mais
               painel "Mais": cada botão cabe direto na barra. A aba aberta se
               distingue por um FUNDO mais claro e uma barrinha no topo — não
               por uma cor diferente, já que o pedido foi "todos na cor
               #dc2626". */
            #ttMobileNav {
                display: flex;
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 45;              /* acima do conteúdo, abaixo dos modais (z-50) */
                background: #ffffff;
                border-top: 1px solid #e2e8f0;
                padding-bottom: env(safe-area-inset-bottom, 0px);
                box-shadow: 0 -4px 16px -6px rgba(0, 0, 0, .15);
            }
            #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: #dc2626;
                background: transparent;
                border: 0;
                font-size: 0.4375rem;
                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: rgba(220, 38, 38, .14);
                font-weight: 900;
            }
            #ttMobileNav > button.tt-ativo::before {
                content: "";
                position: absolute;
                top: 0;
                width: 26px;
                height: 3px;
                border-radius: 0 0 3px 3px;
                background: #dc2626;
            }

            /* 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 #80FFFF;
    }
    .tt-camp-tab {
        background: none;
        border: none;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 600;
        color: #B4ECFC;
        cursor: pointer;
        padding: 4px 0 14px;
        position: relative;
    }
    .tt-camp-tab:hover { color: #fffafa; }
    .tt-camp-tab .tt-camp-tab-count { color: #B4ECFC; font-weight: 500; }
    .tt-camp-tab.tt-camp-tab-active { color: #fffafa; }
    .tt-camp-tab.tt-camp-tab-active::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 2px;
        background: #f45900;
        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: #f45900; }
    .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: #B4ECFC; }
    .tt-live-card-tourn { color: #fffafa; font-size: 15.5px; }
    .tt-live-card-acad { color: #B4ECFC; font-size: 12.5px; }
    .tt-live-card-cat {
        color: #B4ECFC; font-size: 11px; text-transform: uppercase;
        margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(128,255,255,.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: #B4ECFC; 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 rgba(128,255,255,.45); }
    .tt-live-card-badge.tt-live-card-badge-fim { color: #B4ECFC; }
    .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: #B4ECFC; }
    .tt-live-card-set { border: 1px solid rgba(128,255,255,.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: #B4ECFC;
        caret-color: #B4ECFC;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), inset 0 0 0 1000px #172C46 !important;
        transition: background-color 600000s 0s, color 600000s 0s;
    }
    input:autofill, textarea:autofill, select:autofill {
        -webkit-text-fill-color: #B4ECFC;
        caret-color: #B4ECFC;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), inset 0 0 0 1000px #172C46 !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 #172C46;
        }
    }
    .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: #B4ECFC; margin: 0 6px; }

    /* ---------- 1c. CARTÕES DE CAMPEONATO (planos, sem faixa/selo) ---------- */
    #tournamentsListContainer.grid { align-items: stretch; }
    .tt-camp-card {
        background: transparent;
        border: 1px solid #80FFFF;
        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: #f45900; box-shadow: none; }
    .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: #fffafa; 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: #B4ECFC; }

    .tt-camp-meta { font-size: 12.5px; color: #B4ECFC; }

    .tt-camp-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: auto;
        padding-top: 12px;
        border-top: 1px solid #80FFFF;
    }
    /* 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: #B4ECFC;
        background: transparent; border: 1.5px solid #80FFFF; 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: #f45900; color: #fffafa; background: rgba(244,89,0,.1); }
    .tt-camp-ghostbtn.tt-camp-ghostbtn-danger { color: #f87171; border-color: #f87171; }
    .tt-camp-ghostbtn.tt-camp-ghostbtn-danger:hover { background: rgba(248,113,113,.12); border-color: #dc2626; color: #fca5a5; }
    .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: #B4ECFC; 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: rgba(244,89,0,.15); color: #fffafa; }
    .tt-camp-cta {
        font-family: inherit; font-weight: 700; font-size: 13px; color: #f45900;
        background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    }
    .tt-camp-cta:hover { text-decoration: underline; }
    .tt-camp-cta:disabled { color: #475569; cursor: not-allowed; text-decoration: none; }

    /* ---------- 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: #fffafa !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 rgba(128, 255, 255, .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: #B4ECFC; }
    #tournamentDetailContent .tt-camp-info-val { font-size: 13.5px; color: #fffafa; overflow-wrap: anywhere; }
    #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 rgba(128, 255, 255, .45); border-radius: 999px; font-size: 12px; color: #fffafa;
    }
    #tournamentDetailContent .tt-camp-chip-num { background: #f45900; 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: #f45900; 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 rgba(128, 255, 255, .45); background: #0f2238;
    }
    #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: rgba(23, 44, 70, .9); border: 1px solid #80FFFF; color: #fffafa; font-size: 11px;
        transition: background .15s, border-color .15s;
    }
    #tournamentDetailContent .tt-camp-mapa-link:hover > span { background: #f45900; border-color: #f45900; }
    #tournamentDetailContent .tt-camp-mapa-link:focus-visible { outline: 2px solid #80FFFF; 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 #80FFFF;
        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 rgba(128, 255, 255, .35); border-bottom: none;
        border-radius: 12px 12px 0 0;
        background: rgba(255, 255, 255, .05);
        color: #B4ECFC; 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: rgba(128, 255, 255, .12); color: #fffafa; }
    #tournamentDetailContent .tt-fichario-aba.ativa {
        background: #172C46; color: #fffafa; border-color: #80FFFF;
        padding-top: .75rem; padding-bottom: .625rem;
    }
    #tournamentDetailContent .tt-fichario-aba.ativa > span { font-weight: 700 !important; }
    #tournamentDetailContent .tt-fichario-aba.ativa > i { color: #f45900; }
    #tournamentDetailContent .tt-fichario-painel {
        border: 2px solid #80FFFF; 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 rgba(128, 255, 255, .5); border-radius: 999px;
        background: transparent; color: #B4ECFC;
        font-size: .75rem; line-height: 1.2; white-space: nowrap;
        transition: background .15s, color .15s;
    }
    #tournamentDetailContent .tt-subaba:hover { background: rgba(128, 255, 255, .12); color: #fffafa; }
    #tournamentDetailContent .tt-subaba.ativa { background: #80FFFF; border-color: #80FFFF; color: #172C46; 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: #80FFFF !important;
    }
    #tournamentDetailContent .tournament-category-header {
        border-color: #80FFFF !important;
    }
    #tournamentDetailContent h3,
    #tournamentDetailContent h4,
    #tournamentDetailContent h5 {
        color: #fffafa !important;
    }
    #tournamentDetailContent .tournament-category-header h3 {
        color: #ffffff !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: #80FFFF !important;
    }
    #tournamentDetailContent td,
    #tournamentDetailContent th,
    #tournamentDetailContent p,
    #tournamentDetailContent span,
    #tournamentDetailContent label,
    #tournamentDetailContent div {
        color: #B4ECFC;
    }
    #tournamentDetailContent .text-slate-900,
    #tournamentDetailContent .text-slate-950,
    #tournamentDetailContent .text-slate-800,
    #tournamentDetailContent .text-slate-700 {
        color: #fffafa !important;
    }
    #tournamentDetailContent .text-slate-500,
    #tournamentDetailContent .text-slate-400 {
        color: #B4ECFC !important;
    }
    #tournamentDetailContent .text-blue-900 {
        color: #fffafa !important;
    }
    #tournamentDetailContent .text-blue-600,
    #tournamentDetailContent .text-blue-700 {
        color: #f45900 !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: rgba(128,255,255,.12) !important;
        color: #B4ECFC !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: #172C46 !important;
        color: #B4ECFC !important;
        border-color: #80FFFF !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: #f45900 !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 #80FFFF !important;
        color: #B4ECFC !important;
    }
    #tournamentDetailContent button.bg-slate-800:hover {
        border-color: #f45900 !important;
        color: #fffafa !important;
    }
    #tournamentDetailContent button.bg-blue-600,
    #tournamentDetailContent button.bg-indigo-600 {
        background: #00592D !important;
        color: #ffffff !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: #80FFFF !important;
    }
    #tournamentDetailContent .text-blue-900,
    #tournamentDetailContent .text-emerald-900,
    #tournamentDetailContent .text-emerald-800 {
        color: #fffafa !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: borda externa e borda do 1º lugar no dourado da paleta. */
    #tournamentDetailContent .printable-podium-page {
        border-color: #DAA520 !important;
    }
    #tournamentDetailContent .printable-podium-page .grid > div:first-child {
        border-color: #DAA520 !important;
    }
    /* 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: #f45900;
        box-shadow: 0 0 0 1px #f45900, 0 0 14px rgba(244,89,0,.7);
    }
    #tournamentDetailContent .bracket-player-row.bracket-path-row .bracket-player-name {
        color: #fffafa !important;
        text-shadow: 0 0 6px #f45900;
    }
    #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: #f45900 !important;
        font-size: 12px !important;
        text-transform: uppercase;
    }
    #tournamentDetailContent .bracket-match-box {
        position: relative;
        z-index: 1;
        overflow: hidden;
        background: #172C46;
        border: 1px solid rgba(128,255,255,.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 rgba(128,255,255,.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: #B4ECFC !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: #B4ECFC !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: #f45900 !important;
        font-weight: 700 !important;
        opacity: 1;
    }
    #tournamentDetailContent .bracket-player-score:not(:disabled) {
        border: 1px solid rgba(128,255,255,.6) !important;
        opacity: 1;
    }
    #tournamentDetailContent .bracket-match-meta {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        padding: 3px 10px 4px;
        border-top: 1px solid rgba(128,255,255,.28);
        font-size: 10px;
        color: #B4ECFC;
        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: rgba(128,255,255,.55);
        stroke-width: 1.5;
        stroke-linejoin: round;
    }
    #tournamentDetailContent .bracket-conn-svg path.lit {
        stroke: #f45900;
        stroke-width: 2.5;
        filter: drop-shadow(0 0 4px rgba(244,89,0,.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: #80FFFF !important;
        color: #B4ECFC !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 rgba(128,255,255,.6);
    }
    #tournamentDetailContent .slot-edit-name:hover {
        color: #fffafa;
        border-bottom-color: #f45900;
    }
    #tournamentDetailContent .slot-pen {
        color: #f45900;
        font-size: 10px;
        margin-left: 6px;
    }
    #tournamentDetailContent .group-slot-empty-btn {
        color: #B4ECFC;
        font-size: 11px;
        border: 1px dashed rgba(128,255,255,.6);
        border-radius: 8px;
        padding: 6px 12px;
        background: transparent;
        cursor: pointer;
    }
    #tournamentDetailContent .group-slot-empty-btn:hover {
        color: #fffafa;
        border-color: #f45900;
    }
    #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: #f45900;
        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: #172C46 !important;
        border: 1px solid #80FFFF;
    }

    /* 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: #172C46 !important;
        border-color: #80FFFF !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: rgba(128, 255, 255, .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: #fffafa !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: #B4ECFC !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: #f45900 !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: #80FFFF !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: #f45900 !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: rgba(244, 89, 0, .6) !important;
    }
    :is(div[id$="Modal"],#section-training, #partnerAdsListContainer) :is(.divide-y) > * {
        border-color: rgba(128, 255, 255, .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: rgba(128, 255, 255, .12) !important;
        color: #B4ECFC !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: rgba(244, 89, 0, .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: rgba(180, 236, 252, .12) !important;
        color: #B4ECFC !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: #00592D !important;
        color: #ffffff !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: #00592D !important;
        color: #ffffff !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 #80FFFF !important;
        color: #B4ECFC !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;
    }
    :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: rgba(239, 68, 68, .15) !important;
        border: 1px solid rgba(252, 165, 165, .6) !important;
        color: #fca5a5 !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: #00592D !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: #172C46 !important;
        color: #B4ECFC !important;
        border-color: #80FFFF !important;
    }
    :is(div[id$="Modal"], #section-training, #partnerAdsListContainer, #academyDetailContent, #coachDetailContent, #userProfileContent, .tt-painel-escuro) :is(input, textarea)::placeholder {
        color: rgba(180, 236, 252, .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: #172C46 !important;
        color: #B4ECFC !important;
        border-color: #80FFFF !important;
    }
}