/* ============================================================================
   TáOK — componentes e layout
   ============================================================================
   Tudo aqui é escrito em cima de var(--...). NENHUMA cor literal.

   Este arquivo NÃO é onde a marca mora — é tokens.css. Aqui ficam as formas:
   cabeçalho, cards, botões, tabelas, formulários. Trocar a paleta não deve
   exigir tocar neste arquivo.
   ============================================================================ */

/* ============================================================================
   1. BOOTSTRAP REMAPEADO PARA OS TOKENS
   ----------------------------------------------------------------------------
   O Bootstrap 5.3 expõe as próprias cores como custom properties. Remapear as
   dele para as nossas é o que impede o problema descrito em docs/07 §5.1:
   classes de cor fixa (btn-outline-light, text-dark, bg-white) que somem num
   dos temas.

   No TáOK isso seria mais grave que no Ativo86 porque o tema CLARO é o padrão —
   um botão invisível apareceria assim para todo mundo que chega ao site, não
   para a minoria que escolheu o tema.
   ============================================================================ */

:root {
    --bs-primary:        var(--primary);
    --bs-primary-rgb:    var(--primary-rgb);
    --bs-danger:         var(--danger);
    --bs-danger-rgb:     var(--danger-rgb);
    --bs-success:        var(--success);
    --bs-success-rgb:    var(--success-rgb);
    --bs-warning:        var(--warning);
    --bs-warning-rgb:    var(--warning-rgb);
    --bs-info:           var(--info);
    --bs-info-rgb:       var(--info-rgb);

    --bs-body-bg:        var(--bg-body);
    --bs-body-color:     var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-muted);
    --bs-border-color:   var(--border);
    --bs-body-font-family: var(--font-corpo);
    --bs-link-color:     var(--primary);
    --bs-link-hover-color: var(--primary-dark);
    --bs-emphasis-color: var(--text-primary);

    --bs-border-radius:    var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-xl);
}

/* ============================================================================
   2. ESTRUTURA
   ============================================================================ */

/* O cabeçalho é `position: sticky`, então TODO destino de rolagem precisa de
   folga em cima — senão ele para EMBAIXO da barra preta e some.
   Acontece em quatro situações que ninguém testa à mão:
     · link de âncora (#regulamento) leva ao título escondido;
     · Tab move o foco para um campo que fica coberto;
     · "localizar na página" do navegador acha e esconde o resultado;
     · `scrollIntoView()` do nosso próprio JS, na volta do formulário com erro.
   `scroll-padding` resolve os quatro de uma vez, e é o navegador que aplica.

   Embaixo, a folga é a da `.barra-inscricao` (a barra fixa de inscrição no
   celular), que cobriria o último elemento da página. */
html {
    scroll-padding-top: calc(var(--header-altura) + 16px);
    scroll-padding-bottom: 88px;
}

.pagina {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;   /* 100vh no iOS inclui a barra do navegador e corta o rodapé */
}
.pagina > main { flex: 1 0 auto; }

.container-taok {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 16px;
}
@media (min-width: 768px) { .container-taok { padding-inline: 24px; } }

.secao      { padding-block: 48px; }
.secao-alta { padding-block: 72px; }
@media (max-width: 768px) {
    .secao      { padding-block: 32px; }
    .secao-alta { padding-block: 44px; }
}

.secao-cabecalho {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.secao-cabecalho h2 { margin: 0; }
.secao-cabecalho .subtitulo { color: var(--text-secondary); margin: 4px 0 0; }

/* ============================================================================
   3. CABEÇALHO
   ----------------------------------------------------------------------------
   A barra é PRETA nos dois temas, e é decisão de marca, não descuido: é onde a
   logo amarela atinge 13,7:1 de contraste, o uso que a própria logo ensina
   (amarelo preenchido, contorno preto). Também resolve a troca de logo por
   tema — não existe.
   ============================================================================ */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--brand-ink);
    border-bottom: 3px solid var(--accent);
}

.cabecalho-barra {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--header-altura);
}

.cabecalho-marca { display: flex; align-items: center; flex: 0 0 auto; }
.cabecalho-marca:hover { text-decoration: none; }

.cabecalho-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
}

.nav-link-taok {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    font-size: 0.94rem;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-link-taok:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    text-decoration: none;
}
.nav-link-taok.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.14);
}

/* Alternador de tema e menu do usuário */
.botao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.botao-icone:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.cabecalho-toggle { display: none; }
@media (max-width: 991px) {
    .cabecalho-nav   { display: none; }
    .cabecalho-toggle { display: inline-flex; margin-inline-start: auto; }
}

/* Gaveta no celular */
.gaveta { background: var(--brand-ink); color: var(--text-inverso); }
.gaveta .nav-link-taok { width: 100%; padding: 12px 14px; }
.gaveta .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.gaveta .offcanvas-title { color: var(--accent); }
.gaveta .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.gaveta hr { border-color: rgba(255, 255, 255, 0.14); opacity: 1; }

/* Contorno sobre fundo escuro. Existe porque .btn-contorno usa --text-primary,
   que no tema CLARO é quase preto — e sobre a gaveta preta ficaria invisível.
   É exatamente a armadilha do btn-outline-light do Bootstrap (docs/07 §5.1),
   resolvida com um componente próprio em vez de estilo solto na view. */
.btn-contorno-claro {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: var(--text-inverso);
}
.btn-contorno-claro:hover, .btn-contorno-claro:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--text-inverso);
}

/* ============================================================================
   4. RODAPÉ
   ============================================================================ */

.rodape {
    background: var(--brand-ink);
    color: rgba(255, 255, 255, 0.72);
    padding-block: 44px 0;
    margin-top: 56px;
}
.rodape h5 {
    color: var(--accent);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-family: var(--font-corpo);
    font-weight: 700;
    margin-bottom: 14px;
}
.rodape a { color: rgba(255, 255, 255, 0.72); }
.rodape a:hover { color: var(--accent); text-decoration: none; }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: 8px; }
.rodape-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 32px;
    padding-block: 18px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}
.rodape-social {
    display: flex; gap: 10px; margin-top: 4px;
}
.rodape-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    font-size: 1.05rem;
}
.rodape-social a:hover {
    background: var(--accent); color: var(--on-accent);
    border-color: var(--accent);
}

/* ============================================================================
   5. BOTÕES
   ============================================================================ */

.btn {
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: 10px 20px;
    transition: all var(--transition-fast);
}
.btn:active { transform: translateY(1px); }

.btn-taok {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--on-primary);
}
.btn-taok:hover, .btn-taok:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--on-primary);
    box-shadow: var(--shadow-destaque);
}

/* Botão amarelo: SEMPRE com texto --on-accent (preto). O amarelo sobre branco
   dá 1,5:1 e com texto branco é ilegível — a regra vive no token, ver
   tokens.css §paleta. */
.btn-destaque {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}
.btn-destaque:hover, .btn-destaque:focus {
    background: var(--accent-light);
    border-color: var(--accent-light);
    color: var(--on-accent);
}

/* Substitui btn-outline-light e btn-outline-dark, que somem num dos temas. */
.btn-contorno {
    background: transparent;
    border: 1px solid var(--border-forte);
    color: var(--text-primary);
}
.btn-contorno:hover, .btn-contorno:focus {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.btn-suave {
    background: var(--bg-hover);
    border: 1px solid transparent;
    color: var(--text-primary);
}
.btn-suave:hover { background: var(--bg-deepest); color: var(--text-primary); }

.btn-perigo {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}
.btn-perigo:hover, .btn-perigo:focus {
    background: var(--danger); color: var(--text-inverso); border-color: var(--danger);
}

.btn-lg  { padding: 14px 30px; font-size: 1.05rem; border-radius: var(--radius-lg); }
.btn-sm  { padding: 6px 13px;  font-size: 0.86rem; }
.btn-bloco { display: block; width: 100%; }

.btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ============================================================================
   6. CARDS E SUPERFÍCIES
   ============================================================================ */

.cartao {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.cartao-corpo   { padding: 20px; }
.cartao-cabeca  {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-suave);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cartao-cabeca h3, .cartao-cabeca h4 { margin: 0; font-size: 1.05rem; }
.cartao-pe {
    padding: 14px 20px;
    border-top: 1px solid var(--border-suave);
    background: var(--bg-sunken);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.cartao-link {
    display: block;
    color: inherit;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal),
                border-color var(--transition-normal);
}
.cartao-link:hover {
    text-decoration: none;
    color: inherit;
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-forte);
}

/* ============================================================================
   7. CARD DE EVENTO — o componente mais visto do site
   ============================================================================ */

.evento-card { overflow: hidden; display: flex; flex-direction: column; height: 100%; }

.evento-capa {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--bg-deepest);
    overflow: hidden;
}
.evento-capa img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}
.cartao-link:hover .evento-capa img { transform: scale(1.04); }

/* Sem imagem: bloco da marca em vez de retângulo cinza. Um evento sem capa é
   comum no rascunho, e um vazio cinza faz a vitrine parecer quebrada. */
/* Evento sem foto de capa.
   Fundo NEUTRO e não um degradê da marca: vermelho→amarelo passa pelo laranja,
   que não está na paleta, e três cards assim lado a lado introduziriam uma
   quarta cor na vitrine. Este bloco é um estado de "sem imagem", não um
   elemento decorativo — quando a foto real existe, é ela que tem de dominar. */
.evento-capa-vazia {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-deepest);
    position: relative;
    overflow: hidden;
}
.evento-capa-vazia::after {
    content: '';
    position: absolute; right: -20%; top: -40%;
    width: 45%; height: 200%;
    background: var(--accent);
    opacity: .18;
    transform: rotate(16deg);
}
.evento-capa-vazia img {
    width: 38%; height: auto; object-fit: contain;
    opacity: 0.55; position: relative; z-index: 1;
}

.evento-data {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    text-align: center;
    line-height: 1.05;
    box-shadow: var(--shadow-md);
    min-width: 54px;
}
.evento-data .dia {
    display: block;
    font-family: var(--font-titulo);
    font-size: 1.35rem; font-weight: 700;
    color: var(--primary);
}
.evento-data .mes {
    display: block;
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.evento-corpo { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.evento-titulo {
    font-family: var(--font-titulo);
    font-size: 1.1rem; font-weight: 600;
    margin: 0; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.evento-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.86rem; color: var(--text-secondary);
}
.evento-rodape {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: auto; padding-top: 12px;
    border-top: 1px solid var(--border-suave);
}
.evento-preco { font-weight: 700; color: var(--text-primary); }
.evento-preco small { font-weight: 400; color: var(--text-muted); display: block; font-size: 0.72rem; }

/* ============================================================================
   8. SELOS E ETIQUETAS
   ============================================================================ */

.selo {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
}
.selo-aberto    { background: var(--success-bg); color: var(--success); }
.selo-analise   { background: var(--warning-bg); color: var(--warning); }
.selo-revisao   { background: var(--warning-bg); color: var(--warning); }
.selo-rascunho  { background: var(--neutro-bg);  color: var(--text-secondary); }
.selo-encerrado { background: var(--neutro-bg);  color: var(--text-secondary); }
.selo-cancelado { background: var(--danger-bg);  color: var(--danger); }
.selo-pendente  { background: var(--warning-bg); color: var(--warning); }
.selo-pago      { background: var(--success-bg); color: var(--success); }
.selo-info      { background: var(--info-bg);    color: var(--info); }

/* Etiqueta de destaque da marca: fundo amarelo, texto preto — o uso correto. */
.selo-destaque  { background: var(--accent); color: var(--on-accent); }
.selo-marca     { background: var(--primary); color: var(--on-primary); }

/* ============================================================================
   9. FORMULÁRIOS
   ============================================================================ */

.form-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.form-label .obrigatorio { color: var(--danger); margin-left: 2px; }

.form-control, .form-select {
    background: var(--bg-surface);
    border: 1px solid var(--border-forte);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 10px 13px;
    font-size: 0.95rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus, .form-select:focus {
    background: var(--bg-surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16);
    color: var(--text-primary);
}
.form-control::placeholder { color: var(--text-muted); opacity: 1; }
.form-control:disabled, .form-select:disabled {
    background: var(--bg-hover); color: var(--text-muted); cursor: not-allowed;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-text  { color: var(--text-muted); font-size: 0.82rem; }
.erro-campo { color: var(--danger); font-size: 0.82rem; margin-top: 4px; display: block; }

.form-check-input { border-color: var(--border-forte); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-label { color: var(--text-secondary); }

.input-group-text {
    background: var(--bg-hover);
    border-color: var(--border-forte);
    color: var(--text-secondary);
}

/* ============================================================================
   10. ALERTAS
   ============================================================================ */

.aviso {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    margin-bottom: 16px;
    font-size: 0.93rem;
}
.aviso i { font-size: 1.15rem; line-height: 1.35; flex: 0 0 auto; }
.aviso-success { background: var(--success-bg); border-color: rgba(var(--success-rgb), .3); color: var(--success); }
.aviso-error,
.aviso-danger  { background: var(--danger-bg);  border-color: rgba(var(--danger-rgb),  .3); color: var(--danger); }
.aviso-warning { background: var(--warning-bg); border-color: rgba(var(--warning-rgb), .3); color: var(--warning); }
.aviso-info    { background: var(--info-bg);    border-color: rgba(var(--info-rgb),    .3); color: var(--info); }

/* ============================================================================
   11. TABELAS
   ============================================================================ */

.tabela-envolucro { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.tabela th {
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--bg-sunken);
}
.tabela td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border-suave);
    color: var(--text-primary);
    vertical-align: middle;
}
.tabela tbody tr:hover { background: var(--bg-hover); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================================
   12. ESTADOS VAZIOS
   ----------------------------------------------------------------------------
   Tela vazia sem explicação parece erro. Estado vazio diz o que houve e qual é
   o próximo passo.
   ============================================================================ */

.vazio {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-secondary);
}
.vazio i { font-size: 2.6rem; color: var(--text-muted); display: block; margin-bottom: 14px; }
.vazio h3 { font-size: 1.15rem; margin-bottom: 6px; }
.vazio p  { max-width: 460px; margin-inline: auto; }

/* ============================================================================
   13. PAINEL (admin / organizador)
   ============================================================================ */

.painel { display: flex; min-height: calc(100vh - var(--header-altura)); }

.painel-lateral {
    flex: 0 0 250px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    padding: 20px 12px;
    overflow-y: auto;
}
.painel-conteudo { flex: 1 1 auto; min-width: 0; padding: 24px; }
@media (max-width: 991px) {
    .painel-lateral  { display: none; }
    .painel-conteudo { padding: 18px 16px; }
}

.painel-menu-titulo {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-muted);
    padding: 14px 12px 6px;
}
.painel-menu-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.93rem;
    transition: all var(--transition-fast);
}
.painel-menu-item i { font-size: 1.05rem; width: 20px; text-align: center; }
.painel-menu-item:hover {
    background: var(--bg-hover); color: var(--text-primary); text-decoration: none;
}
.painel-menu-item.active {
    background: rgba(var(--primary-rgb), 0.10);
    color: var(--primary);
    font-weight: 600;
}
[data-theme="dark"] .painel-menu-item.active { color: var(--primary-texto-escuro); }

/* Etapa ainda não entregue: aparece para mostrar o que vem, mas não é clicável
   nem muda no hover — parecer clicável e não ser é pior do que não aparecer. */
.painel-menu-item.pendente {
    color: var(--text-muted);
    cursor: default;
}
.painel-menu-item.pendente:hover { background: transparent; color: var(--text-muted); }
.painel-menu-item.pendente { align-items: flex-start; flex-wrap: wrap; }
.painel-menu-item.pendente .rotulo { flex: 1 1 auto; min-width: 0; }
.painel-menu-item.pendente .selo {
    font-size: 0.66rem; padding: 1px 6px; flex: none; align-self: center;
}

.painel-menu-item .contador {
    margin-left: auto;
    background: var(--primary); color: var(--on-primary);
    border-radius: var(--radius-pill);
    font-size: 0.7rem; font-weight: 700;
    padding: 1px 7px;
}

.painel-titulo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.painel-titulo h1 { font-size: 1.6rem; margin: 0; }

.gaveta-painel { background: var(--bg-surface); color: var(--text-primary); }
.gaveta-painel .offcanvas-header { border-bottom: 1px solid var(--border); }

/* Botão flutuante que abre o menu do painel no celular. Fica embaixo à
   esquerda, longe do polegar que rola a lista, e some quando a lateral
   reaparece. */
.botao-menu-painel {
    position: fixed;
    left: 16px; bottom: 16px;
    z-index: 1040;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-pill);
}

/* ============================================================================
   14. INDICADORES (KPI)
   ============================================================================ */

.kpi-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.kpi {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px;
}
.kpi-rotulo {
    font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted);
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 8px;
}
.kpi-valor {
    font-family: var(--font-titulo);
    font-size: 1.85rem; font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.kpi-nota { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }

/* ============================================================================
   15. HERO DA HOME
   ============================================================================ */

.hero {
    background: var(--brand-ink);
    color: #fff;
    padding-block: 64px 72px;
    position: relative;
    overflow: hidden;
}
/* Faixa amarela diagonal: o gesto gráfico da marca, sem imagem de fundo (que o
   cliente ainda não enviou — docs/10 §5). Some no mobile para não competir com
   o texto. */
.hero::after {
    content: '';
    position: absolute;
    right: -8%; top: -30%;
    width: 46%; height: 180%;
    background: var(--accent);
    opacity: 0.12;
    transform: rotate(14deg);
    pointer-events: none;
}
.hero h1 { color: #fff; margin-bottom: 14px; }
.hero .destaque { color: var(--accent); }
.hero p { color: rgba(255, 255, 255, 0.78); font-size: 1.08rem; max-width: 560px; }
@media (max-width: 768px) {
    .hero { padding-block: 40px 48px; }
    .hero::after { display: none; }
}

.busca-hero {
    display: flex; gap: 10px; flex-wrap: wrap;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: 10px;
    box-shadow: var(--shadow-lg);
    max-width: 720px;
    margin-top: 26px;
    position: relative; z-index: 1;
}
.busca-hero .form-control, .busca-hero .form-select {
    border: 0; background: transparent; flex: 1 1 180px; min-width: 0;
}
.busca-hero .form-control:focus, .busca-hero .form-select:focus { box-shadow: none; }
.busca-hero .btn { flex: 0 0 auto; }

/* ============================================================================
   16. ABAS DA PÁGINA DO EVENTO
   ============================================================================ */

/* As abas rolam quando não cabem, e o esmaecimento na borda direita é o que
   AVISA que rolam. Sem ele (com a barra de rolagem escondida), a última aba
   aparece cortada e parece defeito de layout — foi como "Regulamento" apareceu
   como "Regulamen" na primeira captura. */
.abas {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
/* A máscara some quando tudo cabe: aí não há o que sinalizar, e o esmaecimento
   apagaria a última aba sem motivo. */
@media (min-width: 1200px) {
    .abas { -webkit-mask-image: none; mask-image: none; }
}
.abas::-webkit-scrollbar { display: none; }
.aba {
    padding: 12px 14px;
    font-weight: 600; font-size: 0.94rem;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    background: none; border-inline: 0; border-top: 0;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.aba:hover { color: var(--text-primary); text-decoration: none; }
.aba.active { color: var(--primary); border-bottom-color: var(--primary); }
[data-theme="dark"] .aba.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Conteúdo vindo do organizador (regulamento, descrição): sanitizado no PHP,
   estilizado aqui. */
.conteudo-rico { color: var(--text-secondary); line-height: 1.7; }
.conteudo-rico h2, .conteudo-rico h3, .conteudo-rico h4 { margin-top: 1.4em; }
.conteudo-rico ul, .conteudo-rico ol { padding-left: 1.4em; }
.conteudo-rico li { margin-bottom: 0.4em; }
.conteudo-rico table {
    width: 100%; border-collapse: collapse; margin-bottom: 1em;
}
.conteudo-rico th, .conteudo-rico td {
    border: 1px solid var(--border); padding: 8px 10px; text-align: left;
}
.conteudo-rico blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 14px; margin-inline: 0; color: var(--text-muted);
}

/* ============================================================================
   17. LOTES E PREÇOS
   ============================================================================ */

.lote {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    background: var(--bg-surface);
}
.lote.vigente {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.10);
}
.lote.esgotado { opacity: 0.6; }
.lote-nome  { font-weight: 600; }
.lote-nota  { font-size: 0.82rem; color: var(--text-muted); }
.lote-preco { font-family: var(--font-titulo); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }

/* ============================================================================
   18. DIVERSOS
   ============================================================================ */

.migalhas {
    display: flex; flex-wrap: wrap; gap: 6px;
    font-size: 0.85rem; color: var(--text-muted);
    margin-bottom: 14px; list-style: none; padding: 0;
}
.migalhas li + li::before { content: '/'; margin-right: 6px; color: var(--text-muted); }
.migalhas a { color: var(--text-secondary); }

.paginacao { display: flex; gap: 6px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.paginacao a, .paginacao span {
    min-width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    padding-inline: 12px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--text-secondary); font-weight: 600; font-size: 0.9rem;
}
.paginacao a:hover { background: var(--bg-hover); text-decoration: none; color: var(--text-primary); }
.paginacao .atual { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.paginacao .desativado { opacity: 0.4; pointer-events: none; }

.grade-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 20px;
}

.dropdown-menu {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
}
.dropdown-item {
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 9px 12px;
    font-size: 0.92rem;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-hover); color: var(--text-primary); }
.dropdown-divider { border-color: var(--border-suave); }
.dropdown-header { color: var(--text-muted); font-size: 0.78rem; }

.modal-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
}
.modal-header, .modal-footer { border-color: var(--border-suave); }

/* Impressão: comprovante de inscrição e relatório saem sem cabeçalho, menu nem
   botão. Sem isto o atleta imprime a barra de navegação junto. */
@media print {
    .cabecalho, .rodape, .painel-lateral, .sem-impressao { display: none !important; }
    .painel-conteudo { padding: 0; }
    .cartao { border: 1px solid #999; box-shadow: none; }
    body { background: #fff; color: #000; }
}

/* Selo no canto da capa do evento (destaque, encerrado, cancelado). */
.evento-selo { position: absolute; top: 12px; right: 12px; }

/* ============================================================================
   19. HOME
   ============================================================================ */

.categoria-icone {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(var(--primary-rgb), 0.10);
    color: var(--primary);
    font-size: 1.3rem;
}
[data-theme="dark"] .categoria-icone { color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }

/* O passo teve DUAS versões antes desta, e as duas falharam pelo mesmo motivo:
   o número grande em marca-d'água atrás do ícone. À direita da coluna ele se
   soltava e parecia numerar a coluna seguinte; atrás do ícone virou uma mancha
   que, no tema escuro, lê como artefato de renderização.
   A terceira versão para de decorar e simplesmente ESCREVE "Passo 1". */
.passo { padding-top: 4px; }
.passo-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    background: rgba(var(--primary-rgb), 0.10);
    color: var(--primary);
    font-size: 1.35rem;
    margin-bottom: 12px;
}
[data-theme="dark"] .passo-icone {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.12);
}
.passo-rotulo {
    display: block;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.passo h3 { font-size: 1.05rem; margin-bottom: 6px; }
.passo p  { color: var(--text-secondary); font-size: 0.93rem; margin: 0; }

/* Faixa de chamada para organizadores. Fundo preto porque é o mesmo gesto do
   cabeçalho e do rodapé — a marca aparece nos três, e o miolo claro fica entre
   eles. */
.faixa-organizador {
    background: var(--brand-ink);
    color: var(--text-inverso);
    border-radius: var(--radius-xl);
    padding: 40px;
    display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
    border-top: 4px solid var(--accent);
}
.faixa-organizador > div:first-child { flex: 1 1 380px; }
.faixa-organizador h2 { color: var(--text-inverso); }
.faixa-organizador p  { color: rgba(255, 255, 255, 0.76); margin: 0; max-width: 560px; }

.faixa-numeros { display: flex; gap: 32px; flex-wrap: wrap; }
.faixa-numeros > div { text-align: center; }
.faixa-numeros strong {
    display: block;
    font-family: var(--font-titulo);
    font-size: 2.1rem; font-weight: 700; line-height: 1.1;
    color: var(--accent);
}
.faixa-numeros span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 768px) {
    .faixa-organizador { padding: 28px 20px; gap: 24px; }
    .faixa-numeros { gap: 20px; }
    .faixa-numeros strong { font-size: 1.6rem; }
}

/* ============================================================================
   20. FILTROS DA VITRINE
   ============================================================================ */

.barra-filtros {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
    margin-bottom: 24px;
}
.barra-filtros .campo { flex: 1 1 180px; min-width: 0; }
.barra-filtros .campo label {
    display: block; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); margin-bottom: 4px;
}

.fundo-sunken { background: var(--bg-sunken); }

/* ============================================================================
   21. PÁGINA DO EVENTO
   ============================================================================ */

.faixa-previa {
    background: var(--accent);
    color: var(--on-accent);
    padding: 10px 0;
    font-size: 0.9rem;
}

.evento-topo {
    background: var(--brand-ink);
    color: var(--text-inverso);
    padding-block: 36px 40px;
    position: relative;
}
/* Banner do organizador com véu escuro por cima.
   O véu não é enfeite: sem ele o título branco cai sobre uma foto qualquer e o
   contraste vira loteria — e é exatamente a foto que o organizador escolheu,
   não uma que a gente controle. */
.evento-topo.com-banner::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--banner);
    background-size: cover;
    background-position: center;
    opacity: 0.35;
}
.evento-topo.com-banner::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.85) 100%);
}
.evento-topo > * { position: relative; z-index: 1; }
.evento-topo h1 { color: var(--text-inverso); margin-bottom: 10px; }
.evento-chamada { color: rgba(255, 255, 255, 0.8); max-width: 640px; }

.evento-migalhas { color: rgba(255, 255, 255, 0.5); }
.evento-migalhas a { color: rgba(255, 255, 255, 0.72); }
.evento-migalhas li + li::before { color: rgba(255, 255, 255, 0.4); }

.evento-topo-meta {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin-top: 14px;
}
.evento-topo-meta i { color: var(--accent); margin-right: 6px; }
.evento-topo-org { color: var(--text-inverso); font-weight: 600; }
.evento-topo-org:hover { color: var(--accent); text-decoration: none; }

/* A lateral acompanha a rolagem: em página longa, o botão de inscrição não pode
   ficar 2000px acima quando a pessoa termina de ler o regulamento. */
@media (min-width: 992px) {
    .evento-lateral { position: sticky; top: calc(var(--header-altura) + 20px); }
}

.modalidade {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    height: 100%;
    background: var(--bg-sunken);
}
.modalidade p { font-size: 0.9rem; color: var(--text-secondary); }
.modalidade-regras { color: var(--text-muted); display: block; margin-top: 6px; }

.lista-dados { margin: 0; }
.lista-dados dt {
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted);
    margin-top: 14px;
}
.lista-dados dt:first-child { margin-top: 0; }
.lista-dados dd { margin: 3px 0 0; color: var(--text-primary); font-size: 0.94rem; }

.nota-pagamento { font-size: 0.8rem; color: var(--text-muted); }
.rotulo-menor {
    display: block; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted);
}
.logo-organizador {
    width: 46px; height: 46px; object-fit: contain;
    border-radius: var(--radius-md); background: var(--bg-sunken); padding: 4px;
    flex: 0 0 auto;
}

.patrocinadores {
    display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
}
.patrocinadores img { max-height: 48px; width: auto; opacity: .85; }
.patrocinadores img:hover { opacity: 1; }

/* Armadilha de robô no formulário de contato: fora da tela sem `display:none`,
   que alguns robôs detectam e pulam. */
.campo-armadilha {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

.logo-organizador-grande {
    width: 74px; height: 74px; object-fit: contain;
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: 8px;
}

/* ============================================================================
   22. AUTENTICAÇÃO
   ============================================================================ */

.caixa-auth       { max-width: 440px; margin-inline: auto; }
.caixa-auth-larga { max-width: 720px; }

.escolha-perfil { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .escolha-perfil { grid-template-columns: 1fr; } }

.perfil-opcao { cursor: pointer; margin: 0; }
.perfil-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.perfil-opcao > span {
    display: block;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    transition: all var(--transition-fast);
    height: 100%;
}
.perfil-opcao i { font-size: 1.4rem; color: var(--text-muted); display: block; margin-bottom: 6px; }
.perfil-opcao strong { display: block; font-size: 0.98rem; }
.perfil-opcao small  { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.35; display: block; }
.perfil-opcao input:checked + span {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.06);
}
.perfil-opcao input:checked + span i { color: var(--primary); }
/* :focus-visible no input, estilo no span — sem isto, quem navega por Tab não
   vê onde está, porque o input de verdade é invisível. */
.perfil-opcao input:focus-visible + span {
    outline: 3px solid rgba(var(--primary-rgb), 0.55);
    outline-offset: 2px;
}
[data-theme="dark"] .perfil-opcao input:checked + span i { color: var(--accent); }

/* Bloco clicável de contagem por situação (painel do admin). */
.bloco-status {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-width: 120px;
    color: inherit;
    transition: all var(--transition-fast);
}
.bloco-status:hover { background: var(--bg-hover); text-decoration: none; border-color: var(--border-forte); }
.bloco-status-valor {
    font-family: var(--font-titulo);
    font-size: 1.7rem; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
}

.miniatura-evento {
    width: 86px; height: 66px; object-fit: cover;
    border-radius: var(--radius-md); flex: 0 0 auto;
}

/* ============================================================================
   23. BARRA FIXA DE INSCRIÇÃO (celular)
   ============================================================================ */

.barra-inscricao { display: none; }

@media (max-width: 991px) {
    .barra-inscricao {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1035;
        padding: 10px 16px;
        /* env(safe-area-inset-bottom): sem isto a barra fica embaixo da faixa
           do gesto de início do iPhone, e o botão só responde na metade de cima. */
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.10);
    }
    .barra-inscricao small {
        display: block; font-size: 0.7rem; color: var(--text-muted);
        text-transform: uppercase; letter-spacing: .05em;
    }
    .barra-inscricao strong {
        font-family: var(--font-titulo);
        font-size: 1.2rem; line-height: 1.1;
    }
    .barra-inscricao .btn { flex: 0 1 auto; white-space: nowrap; }

    /* Espaço no fim da página para a barra não cobrir o rodapé. */
    .pagina:has(.barra-inscricao) .rodape { padding-bottom: 76px; }
}

/* ============================================================================
   24. EDITOR RICO
   ============================================================================ */

.editor-rico { margin-bottom: 1rem; }

.editor-barra {
    display: flex; flex-wrap: wrap; gap: 2px;
    padding: 6px;
    border: 1px solid var(--border-forte);
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--bg-sunken);
}
.editor-botao {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.editor-botao:hover { background: var(--bg-hover); color: var(--text-primary); }

.editor-area {
    border: 1px solid var(--border-forte);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 14px 16px;
    background: var(--bg-surface);
    color: var(--text-primary);
    overflow-y: auto;
    max-height: 460px;
}
.editor-area:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16);
}
/* Sem isto, o campo vazio não tem altura clicável e a pessoa não sabe onde
   começar a escrever. */
.editor-area:empty::before {
    content: 'Escreva aqui…';
    color: var(--text-muted);
}

/* ============================================================================
   25. SIMULADOR DO MODO DE TAXA
   ============================================================================ */

.escolha-taxa { display: grid; gap: 10px; }

.taxa-opcao { cursor: pointer; margin: 0; }
.taxa-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.taxa-opcao > span {
    display: block;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    transition: all var(--transition-fast);
}
.taxa-opcao strong { display: block; font-size: 0.96rem; }
.taxa-opcao > span > small {
    display: block; color: var(--text-secondary);
    font-size: 0.84rem; line-height: 1.4; margin-bottom: 10px;
}
.taxa-opcao input:checked + span {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.06);
}
.taxa-opcao input:focus-visible + span {
    outline: 3px solid rgba(var(--primary-rgb), 0.55);
    outline-offset: 2px;
}

.sim-conta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 12px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: 0.86rem;
}
.sim-conta dt { color: var(--text-secondary); font-weight: 400; }
.sim-conta dd {
    margin: 0; text-align: right; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* A taxa é a MESMA nos dois modos, e destacá-la na cor da marca é o que faz o
   organizador reparar nisso sem ler o texto. */
.sim-conta dt:last-of-type ~ dd:last-of-type,
.sim-conta dd:last-of-type { color: var(--primary); }
[data-theme="dark"] .sim-conta dd:last-of-type { color: var(--accent); }

/* ============================================================================
   26. LINHAS EDITÁVEIS (<details>)
   ----------------------------------------------------------------------------
   Formulário de edição aberto sob a linha, e não num modal: modal com
   formulário longo no celular vira uma caixa rolando dentro de outra, e o botão
   de salvar some da vista.

   <details> nativo e não JavaScript: funciona sem script, é acessível por
   teclado de graça e o navegador cuida do estado.
   ============================================================================ */

.linha-editavel {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    background: var(--bg-surface);
}
.linha-editavel > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-md);
}
.linha-editavel > summary::-webkit-details-marker { display: none; }
.linha-editavel > summary:hover { background: var(--bg-hover); }
.linha-editavel > summary small { color: var(--text-muted); margin-left: 8px; }
.linha-editavel > summary .selo { margin-left: 8px; }
.linha-editavel[open] > summary {
    border-bottom: 1px solid var(--border-suave);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.linha-editavel[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.linha-editavel .bi-chevron-down {
    transition: transform var(--transition-fast);
    color: var(--text-muted);
    flex: 0 0 auto;
}

.linha-editavel.vigente { border-color: var(--primary); }
.linha-editavel.inativa > summary { opacity: 0.6; }

.linha-nova { border-style: dashed; background: transparent; }
.linha-nova > summary { color: var(--primary); font-weight: 600; }
[data-theme="dark"] .linha-nova > summary { color: var(--accent); }

.form-linha { padding: 16px 14px 4px; }

.lista-simples { list-style: none; padding: 0; margin: 0 0 1rem; }
.lista-simples li {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-suave);
    font-size: 0.93rem;
}
.lista-simples li:last-child { border-bottom: 0; }

/* Prévia das imagens do evento na tela de análise. */
.previa-imagem { margin: 0; }
.previa-imagem img {
    max-width: 260px; border-radius: var(--radius-md);
    border: 1px solid var(--border); display: block;
}
.previa-imagem figcaption {
    font-size: 0.78rem; color: var(--text-muted); margin-top: 6px;
}

/* ============================================================================
   27. FORMULÁRIO DE INSCRIÇÃO
   ============================================================================ */

.escolha-modalidade { display: grid; gap: 10px; }

.modalidade-opcao { cursor: pointer; margin: 0; }
.modalidade-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.modalidade-opcao > span {
    display: block;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    transition: all var(--transition-fast);
}
.modalidade-opcao > span > small {
    display: block; color: var(--text-secondary);
    font-size: 0.86rem; margin-top: 4px;
}
.modalidade-notas { color: var(--text-muted) !important; font-size: 0.8rem !important; }
.modalidade-preco {
    font-family: var(--font-titulo); font-weight: 700;
    white-space: nowrap; font-size: 1.05rem;
}
.modalidade-opcao input:checked + span {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.06);
}
.modalidade-opcao input:focus-visible + span {
    outline: 3px solid rgba(var(--primary-rgb), 0.55);
    outline-offset: 2px;
}
/* Esgotada continua VISÍVEL, só desabilitada: sumir da lista faria o atleta
   achar que a prova mudou de programação. */
.modalidade-opcao.esgotada { cursor: not-allowed; }
.modalidade-opcao.esgotada > span { opacity: 0.55; }

.resumo-total {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; padding-top: 12px;
    border-top: 2px solid var(--border);
}
.resumo-total span { font-weight: 600; }
.resumo-total strong {
    font-family: var(--font-titulo);
    font-size: 1.6rem; line-height: 1;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .resumo-total strong { color: var(--accent); }

.texto-ok   { color: var(--success) !important; }
.texto-erro { color: var(--danger)  !important; }

/* As linhas opcionais do resumo (desconto, taxa) são <div> dentro de <dl>, o
   que é HTML válido desde o HTML5.2 e permite esconder o par dt+dd junto. */
[data-resumo] > div { display: contents; }
[data-resumo] > div[hidden] { display: none; }

/* ============================================================================
   28. COMPROVANTE E PAGAMENTO
   ============================================================================ */

.comprovante-topo {
    padding: 14px 20px 0;
    text-align: center;
}
.comprovante-qr {
    width: 240px; height: 240px;
    max-width: 100%;
    /* Fundo branco SEMPRE, inclusive no tema escuro: leitor de QR precisa de
       módulo escuro sobre fundo claro, e um QR invertido não é lido por boa
       parte dos aplicativos de banco. */
    background: #fff;
    padding: 10px;
    border-radius: var(--radius-md);
}
.comprovante-qr-vazio {
    width: 240px; height: 240px;
    max-width: 100%;
    margin-inline: auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-sunken);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 3rem;
}
.comprovante-protocolo small {
    display: block; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-muted);
}
.comprovante-protocolo strong {
    font-family: var(--font-titulo);
    font-size: 1.7rem; letter-spacing: 2px;
}

.pix-codigo {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    word-break: break-all;
    resize: none;
}

.passos-pix { padding-left: 1.2rem; margin: 0; }
.passos-pix li { margin-bottom: 8px; color: var(--text-secondary); }

/* Os campos do cartão são iframes do Mercado Pago: precisam de altura própria,
   porque um iframe vazio colapsa para zero. */
.campo-mp { height: 44px; padding: 0 12px; }
.campo-mp iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================================
   29. LOJA
   ============================================================================ */

.grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
}

.produto-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.produto-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* O esgotado continua na vitrine, esmaecido. Sumir com ele faria o visitante
   achar que o produto nunca existiu — e é o "avise-me" que traz de volta. */
.produto-card.esgotado { opacity: .62; }

.produto-capa {
    display: block; position: relative;
    aspect-ratio: 1 / 1;
    background: var(--bg-sunken);
    overflow: hidden;
}
.produto-capa img { width: 100%; height: 100%; object-fit: cover; }

.produto-sem-foto {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    color: var(--text-muted); font-size: 2rem;
}

.produto-selo { position: absolute; top: 10px; left: 10px; }

.produto-corpo { padding: 14px; }

.produto-nome { font-size: 0.98rem; line-height: 1.35; margin: 0 0 8px; }
.produto-nome a { color: var(--text-primary); text-decoration: none; }
.produto-nome a:hover { color: var(--primary); }

.produto-preco strong { font-size: 1.12rem; }
.produto-preco-de {
    display: block;
    color: var(--text-muted); font-size: 0.85rem;
}
.produto-restam { color: var(--warning); font-weight: 600; }

.produto-foto-grande {
    aspect-ratio: 1 / 1;
    background: var(--bg-sunken);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.produto-foto-grande img { width: 100%; height: 100%; object-fit: cover; }

.produto-preco-grande { margin: 12px 0 20px; }
.produto-preco-grande strong { font-size: 2rem; font-family: var(--font-titulo); }
.produto-preco-grande s { color: var(--text-muted); margin-right: 8px; }

.produto-compra { margin-bottom: 8px; }

.carrinho-miniatura {
    width: 46px; height: 46px; object-fit: cover;
    border-radius: var(--radius-sm); flex: none;
}

.resumo-pedido { position: sticky; top: calc(var(--header-altura) + 20px); }

.linha-resumo {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 5px 0;
    color: var(--text-secondary);
}
.linha-resumo.linha-total {
    border-top: 1px solid var(--border);
    margin-top: 6px; padding-top: 12px;
    color: var(--text-primary); font-size: 1.1rem;
}

/* A opção inteira é clicável, não só o círculo do radio: alvo de 20px é o que
   faz errar o toque no celular. */
.opcao-radio {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.opcao-radio:hover { border-color: var(--primary); }
.opcao-radio:has(input:checked) {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), .06);
}
.opcao-radio input { margin-top: 3px; flex: none; }
.opcao-radio span { display: block; }
.opcao-radio small { display: block; color: var(--text-muted); font-size: .86rem; }

.pix-qr { max-width: 240px; width: 100%; border-radius: var(--radius-md); }

.pix-copia { display: flex; gap: 8px; }
.pix-copia input {
    font-family: var(--font-mono); font-size: .75rem;
}

.linha-inativa { opacity: .55; }
.texto-perigo { color: var(--danger); font-weight: 600; }

@media (max-width: 575.98px) {
    .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .produto-preco-grande strong { font-size: 1.6rem; }
}

.produto-foto-admin {
    aspect-ratio: 1 / 1;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.produto-foto-admin img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================================
   30. CREDENCIAMENTO
   ----------------------------------------------------------------------------
   Tela de operação, usada de pé e com pressa: alvo grande, letra grande,
   resposta que se lê de relance.
   ============================================================================ */

.campo-leitura {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    letter-spacing: 1px;
    text-align: center;
    padding-block: 14px;
}

.resposta-checkin {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 18px;
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
}

.resposta-icone { font-size: 2.6rem; line-height: 1; flex: none; }

.resposta-texto strong { font-size: 1.25rem; display: block; line-height: 1.2; }
.resposta-texto > div   { font-size: 0.92rem; color: var(--text-secondary); }
.resposta-mensagem      { margin-top: 4px; font-weight: 600; }

/* Verde: liberado. */
.resposta-checkin.certo {
    background: var(--success-bg); border-color: var(--success);
}
.resposta-checkin.certo .resposta-icone,
.resposta-checkin.certo .resposta-mensagem { color: var(--success); }

/* Amarelo: JÁ PASSOU. Não é erro — e pintar de vermelho faria o operador achar
   que o sistema quebrou e parar a fila para chamar o suporte. */
.resposta-checkin.atencao {
    background: var(--warning-bg); border-color: var(--warning);
}
.resposta-checkin.atencao .resposta-icone,
.resposta-checkin.atencao .resposta-mensagem { color: var(--warning); }

/* Vermelho: não pode entrar. */
.resposta-checkin.errado {
    background: var(--danger-bg); border-color: var(--danger);
}
.resposta-checkin.errado .resposta-icone,
.resposta-checkin.errado .resposta-mensagem { color: var(--danger); }

.leitor-camera video {
    width: 100%;
    max-width: 420px;
    border-radius: var(--radius-md);
    background: var(--brand-ink);
}

@media (max-width: 575.98px) {
    .campo-leitura { font-size: 1.15rem; }
    .resposta-icone { font-size: 2rem; }
    .resposta-texto strong { font-size: 1.1rem; }
}

/* Coluna que só faz sentido no espaço do desktop.
   Numa tabela de inscritos com seis colunas em 390px, o NOME do atleta — que é
   o dado que se vem ler — fica espremido em três linhas. Some com o secundário
   e o principal volta a caber numa linha. */
@media (max-width: 767.98px) {
    .so-desktop { display: none !important; }
}

/* ============================================================================
   28. FINANCEIRO (E8 — repasse aos organizadores)
   ============================================================================ */

/* O saldo é o número pelo qual a tela existe: quem abre está procurando ele, e
   mais nada. Por isso ele ganha o topo inteiro, e não uma célula de KPI igual
   às outras — num painel de quatro caixas iguais o olho não sabe onde pousar. */
.destaque-saldo {
    display: flex; flex-wrap: wrap; gap: 20px;
    align-items: center; justify-content: space-between;
}
.destaque-saldo-acao { text-align: right; flex: 0 1 300px; }

.saldo-grande {
    font-family: var(--font-titulo);
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 700; line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    margin-bottom: 6px;
}

/* A linha de subtotal da decomposição do saldo. Sem o realce, "Seu líquido" e
   "Disponível agora" viram mais duas linhas no meio de sete e a conta deixa de
   ser legível de relance. */
.tabela tr.linha-forte td {
    background: var(--bg-sunken);
    border-top: 2px solid var(--border);
}

/* Caixa de seleção grande: o alvo de toque é o retângulo inteiro, não o
   quadradinho de 13px. A mesma escolha da seleção de modalidade. */
.opcao-caixa {
    display: flex; align-items: flex-start; gap: 10px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 12px; cursor: pointer; width: 100%;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.opcao-caixa:hover { border-color: var(--primary); background: var(--bg-hover); }
.opcao-caixa:has(input:checked) {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.06);
}
.opcao-caixa input { margin-top: 3px; flex: 0 0 auto; }

/* Os botões da barra de filtros não são um campo: sem isto eles esticam junto
   com os selects e o "Filtrar" fica com 300px de largura. */
.barra-filtros .campo-acoes {
    display: flex; gap: 8px; align-items: flex-end; flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .destaque-saldo-acao { text-align: left; flex: 1 1 100%; }
}

/* A chave PIX inteira, na tela de quem vai transferir. `break-all` porque uma
   chave aleatória tem 36 caracteres sem espaço: sem isto ela estoura a coluna
   ou some no recorte, e o admin acaba tendo que ler do banco de dados. */
.chave-conta {
    word-break: break-all;
    font-variant-numeric: tabular-nums;
    display: inline-block;
}

/* ============================================================================
   29. RELATÓRIOS (E9 — gráficos em SVG)
   ============================================================================ */

/* O SVG ocupa a largura do cartão e mantém a altura pela viewBox. `display:block`
   tira o espaço fantasma que o inline-block deixa embaixo. */
.grafico { width: 100%; height: auto; display: block; overflow: visible; }

/* Teto de altura para a curva: num monitor largo o SVG proporcional cresce
   junto com a largura, e o gráfico sozinho passava a ocupar a tela inteira. */
.grafico-linha { max-height: 300px; }

/* --- barras: HTML, não SVG ------------------------------------------------
   Barra horizontal é uma div com largura em %. Em SVG com
   `preserveAspectRatio="none"` — que é o que faz a barra esticar na largura do
   cartão — o texto estica junto e as linhas viram uma tira. Aqui o texto é
   texto: seleciona, é lido por leitor de tela, quebra linha e imprime. */
.g-barras { display: flex; flex-direction: column; gap: 13px; }
.g-barra-topo {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 4px;
}
.g-barra-rotulo {
    color: var(--text-secondary); font-size: 0.88rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-barra-valor { font-size: 0.9rem; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.g-barra-trilho {
    height: 9px; border-radius: var(--radius-pill);
    background: var(--bg-sunken); overflow: hidden;
}
.g-barra-preenchida { height: 100%; border-radius: var(--radius-pill); min-width: 3px; }
.g-barra-extra { display: block; margin-top: 3px; color: var(--text-muted); font-size: 0.78rem; }

/* Os textos dentro do SVG (linha e rosca). Em unidades da viewBox e não em px:
   o SVG escala junto com o cartão. */
.grafico .g-centro {
    font-size: 11px; font-weight: 700; text-anchor: middle;
    fill: var(--text-primary); font-family: var(--font-titulo);
}

.g-vazio { color: var(--text-muted); margin: 0; }

.rosca-com-legenda {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.rosca-desenho { flex: 0 0 150px; max-width: 150px; }

.g-legenda { list-style: none; margin: 0; padding: 0; flex: 1 1 180px; min-width: 0; }
.g-legenda li {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; font-size: 0.9rem;
    border-bottom: 1px solid var(--border-suave);
}
.g-legenda li:last-child { border-bottom: 0; }
.g-legenda-rotulo { flex: 1 1 auto; min-width: 0; color: var(--text-secondary);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-bolinha { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

/* Blocos de relatório lado a lado precisam da mesma altura, senão a linha fica
   com degrau e a leitura de comparação — que é o ponto — se perde.
   
   MAS SÓ DENTRO DE UMA COLUNA. Aplicado a todo `.bloco-relatorio`, o
   `height:100%` de um bloco solto (fora de `.row`) resolve contra o container
   da página e estica o cartão até o fim da tela — foi o que apareceu na captura
   do painel do admin, com dois terços da página em branco. */
[class*="col-"] > .bloco-relatorio { height: 100%; }
.bloco-relatorio { display: flex; flex-direction: column; }
.bloco-relatorio .tabela-envolucro { margin-top: auto; }

@media (max-width: 575.98px) {
    .rosca-desenho { flex: 1 1 100%; max-width: 190px; margin-inline: auto; }
}

/* Na impressão, o gráfico é o que sobrevive melhor — mas fundo de cartão e
   sombra gastam tinta sem informar. */
@media print {
    .bloco-relatorio { break-inside: avoid; }
    .barra-filtros, .painel-titulo .btn { display: none !important; }
}

/* O par de `.so-desktop`: aparece só onde a coluna que carregava o dado sumiu.
   Sem ele, esconder a coluna "Data" no celular esconderia a data — e ela é o
   que distingue duas edições do mesmo evento. */
.so-celular { display: none; }
@media (max-width: 767.98px) {
    .so-celular { display: inline; }
}

/* ============================================================================
   30. PAINEL ADMINISTRATIVO (E10)
   ============================================================================ */

/* Ações que tiram alguém do ar ou apagam dado ficam num cartão marcado. Não é
   decoração: é o que faz a pessoa parar antes de clicar no que não tem volta. */
.zona-perigosa { border-color: rgba(var(--danger-rgb), 0.35); }
.zona-perigosa > .cartao-cabeca {
    background: var(--danger-bg);
    border-bottom-color: rgba(var(--danger-rgb), 0.25);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.zona-perigosa > .cartao-cabeca h2 { color: var(--danger); }

/* O JSON cru do log. Rola sozinho: um `dados_depois` com trinta campos não pode
   esticar a página para o lado. */
.bloco-json {
    background: var(--bg-sunken);
    border: 1px solid var(--border-suave);
    border-radius: var(--radius-md);
    padding: 12px;
    font-size: 0.82rem;
    max-height: 320px;
    overflow: auto;
    margin-bottom: 14px;
    white-space: pre;
}

/* <details> usado como cartão: o marcador padrão do navegador desalinha o
   cabeçalho, e o cursor precisa dizer que dá para clicar. */
details.cartao > summary { list-style: none; }
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary::after {
    content: "\f282";
    font-family: bootstrap-icons;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}
details.cartao[open] > summary::after { transform: rotate(180deg); }