/* =========================================================================
   EasyWods - tema do campeonato
   Paleta: preto / cinza / verde agua (tiffany escuro) / branco
   ========================================================================= */

:root {
    /* Fundo, texto e botao iguais ao tema padrao de AparenciaCampeonato (personalizavel por campeonato). */
    --aa-preto: #111518;
    --aa-grafite: #121618;
    --aa-cinza-900: #1a2023;
    --aa-cinza-800: #20282c;
    --aa-cinza-700: #2a3439;
    --aa-cinza-500: #3f4c52;
    --aa-cinza-300: #8d9a9f;
    --aa-cinza-200: #b9c3c6;
    --aa-branco: #e1f4ff;

    --aa-tiffany: #0f7a71;
    --aa-tiffany-escuro: #095c55;
    --aa-tiffany-claro: #17a99b;
    --aa-tiffany-suave: rgba(23, 169, 155, 0.14);

    --aa-erro: #c0392b;
    --aa-alerta: #b7791f;
    --aa-ouro: #d4af37;
    --aa-prata: #9fb0b5;
    --aa-bronze: #a97142;

    --aa-raio: 10px;
    --aa-borda: 1px solid var(--aa-cinza-700);
    --aa-sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--aa-preto);
    color: var(--aa-branco);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

h1, h2, h3, h4 {
    margin: 0 0 .5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a {
    color: var(--aa-tiffany-claro);
    text-decoration: none;
}

a:hover {
    color: var(--aa-branco);
    text-decoration: underline;
}

code, pre, .aa-mono {
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
}

/* Links de convite e tokens longos nao podem estourar a largura no celular. */
code.aa-mono {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ shell */

.aa-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.aa-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(180deg, var(--aa-grafite), var(--aa-preto));
    border-bottom: 2px solid var(--aa-tiffany-escuro);
}

.aa-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: .65rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.aa-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
}

.aa-brand:hover {
    text-decoration: none;
}

/* A logo original e preta sobre branco: invertida fica branca sobre o header escuro. */
.aa-brand__logo {
    height: 38px;
    filter: invert(1);
}

/* Logo enviada pelo campeonato: cores originais, sem a inversao da logo padrao. */
.aa-brand__logo--personalizada {
    filter: none;
    max-width: 160px;
    object-fit: contain;
}

.aa-brand__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.aa-brand__titulo {
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aa-branco);
    font-size: .95rem;
}

.aa-brand__sub {
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--aa-tiffany-claro);
}

.aa-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.aa-nav a,
.aa-nav button.aa-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: var(--aa-raio);
    color: var(--aa-cinza-200);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: none;
    border: none;
    cursor: pointer;
}

.aa-nav a:hover,
.aa-nav button.aa-link:hover {
    background: var(--aa-cinza-800);
    color: var(--aa-branco);
    text-decoration: none;
}

.aa-nav a.active {
    background: var(--aa-tiffany-suave);
    color: var(--aa-tiffany-claro);
}

/* Grupo recolhivel do menu (Competicao): dropdown no desktop, sanfona no mobile. */
.aa-nav__grupo {
    position: relative;
}

.aa-nav__grupo > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: var(--aa-raio);
    color: var(--aa-cinza-200);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.aa-nav__grupo > summary::-webkit-details-marker {
    display: none;
}

.aa-nav__grupo > summary::after {
    content: "";
    width: .45em;
    height: .45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}

.aa-nav__grupo[open] > summary::after {
    transform: translateY(1px) rotate(-135deg);
}

.aa-nav__grupo > summary:hover {
    background: var(--aa-cinza-800);
    color: var(--aa-branco);
}

.aa-nav__grupo > summary.active {
    background: var(--aa-tiffany-suave);
    color: var(--aa-tiffany-claro);
}

.aa-nav__submenu {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 12rem;
    padding: .4rem;
    background: var(--aa-preto);
    border: var(--aa-borda);
    border-radius: var(--aa-raio);
    box-shadow: var(--aa-sombra);
}

.aa-nav .aa-nav__submenu a {
    width: 100%;
}

/* Subgrupo recolhivel dentro de um menu (Configuracoes > Inscricoes): abre logo abaixo, no proprio menu. */
.aa-nav__subgrupo > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: var(--aa-raio);
    color: var(--aa-cinza-200);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.aa-nav__subgrupo > summary::-webkit-details-marker {
    display: none;
}

.aa-nav__subgrupo > summary::after {
    content: "";
    width: .45em;
    height: .45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}

.aa-nav__subgrupo[open] > summary::after {
    transform: translateY(1px) rotate(-135deg);
}

.aa-nav__subgrupo > summary:hover {
    background: var(--aa-cinza-800);
    color: var(--aa-branco);
}

.aa-nav__subgrupo > summary.active {
    color: var(--aa-tiffany-claro);
}

.aa-nav__subgrupo-itens {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: .15rem;
}

.aa-nav .aa-nav__submenu a.aa-nav__subitem {
    padding-left: 1.35rem;
}

.aa-main {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 3rem;
}

.aa-footer {
    border-top: 1px solid var(--aa-cinza-800);
    color: var(--aa-cinza-300);
    font-size: .78rem;
    padding: 1rem 1.25rem;
    text-align: center;
}

/* ------------------------------------------------------------- cabecalhos */

.aa-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--aa-cinza-800);
}

.aa-page-head p {
    margin: .15rem 0 0;
    color: var(--aa-cinza-300);
    font-size: .88rem;
}

.aa-acoes {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ cards */

.aa-card {
    background: var(--aa-cinza-900);
    border: var(--aa-borda);
    border-radius: var(--aa-raio);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.aa-card__titulo {
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--aa-tiffany-claro);
    margin-bottom: .9rem;
}

.aa-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* ----------------------------------------------------------------- botoes */

.aa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: var(--aa-raio);
    border: 1px solid transparent;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    text-decoration: none;
}

.aa-btn:hover {
    text-decoration: none;
}

/* --aa-botao-texto so existe com aparencia personalizada; sem ela, valem as cores originais. */
.aa-btn--primario {
    background: var(--aa-tiffany);
    color: var(--aa-botao-texto, var(--aa-branco));
}

.aa-btn--primario:hover {
    background: var(--aa-tiffany-claro);
    color: var(--aa-botao-texto, var(--aa-preto));
}

.aa-btn--secundario {
    background: var(--aa-cinza-800);
    border-color: var(--aa-cinza-700);
    color: var(--aa-branco);
}

.aa-btn--secundario:hover {
    border-color: var(--aa-tiffany);
    color: var(--aa-tiffany-claro);
}

.aa-btn--perigo {
    background: transparent;
    border-color: var(--aa-erro);
    color: #e8837a;
}

.aa-btn--perigo:hover {
    background: var(--aa-erro);
    color: var(--aa-branco);
}

.aa-btn--pequeno {
    padding: .3rem .6rem;
    font-size: .76rem;
}

.aa-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* --------------------------------------------------------------- formularios */

.aa-form {
    display: grid;
    gap: 1rem;
}

.aa-form__linha {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.aa-campo {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.aa-campo > label {
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aa-cinza-300);
    font-weight: 700;
}

.aa-campo input,
.aa-campo select,
.aa-campo textarea,
.form-control,
.form-select {
    background: var(--aa-grafite);
    border: 1px solid var(--aa-cinza-700);
    border-radius: var(--aa-raio);
    color: var(--aa-branco);
    padding: .5rem .7rem;
    font-size: .92rem;
    width: 100%;
}

.aa-campo input:focus,
.aa-campo select:focus,
.aa-campo textarea:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--aa-tiffany-claro);
    box-shadow: 0 0 0 3px var(--aa-tiffany-suave);
    background: var(--aa-grafite);
    color: var(--aa-branco);
}

.aa-campo textarea {
    min-height: 180px;
    font-family: "Cascadia Mono", Consolas, monospace;
    line-height: 1.5;
}

.aa-campo__ajuda {
    font-size: .74rem;
    color: var(--aa-cinza-300);
}

.validation-message,
.aa-erro-campo {
    color: #e8837a;
    font-size: .76rem;
}

.validation-errors {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    color: #e8837a;
    font-size: .82rem;
}

/* ---------------------------------------------------------------- alertas */

.aa-alerta {
    border-radius: var(--aa-raio);
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    font-size: .88rem;
    border-left: 4px solid;
}

.aa-alerta--erro {
    background: rgba(192, 57, 43, .12);
    border-color: var(--aa-erro);
    color: #f0a49c;
}

/* js/alertas.js rola ate o erro/sucesso e o foca: a margem mantem o alerta fora do cabecalho fixo e o foco
   programatico nao desenha contorno de campo (o destaque vem da propria faixa da mensagem). */
.aa-alerta--erro,
.aa-alerta--sucesso {
    scroll-margin-top: 6rem;
}

.aa-alerta--erro:focus,
.aa-alerta--sucesso:focus {
    outline: none;
}

.aa-alerta--erro:focus-visible {
    outline: 2px solid var(--aa-erro);
    outline-offset: 2px;
}

.aa-alerta--sucesso:focus-visible {
    outline: 2px solid var(--aa-tiffany-claro);
    outline-offset: 2px;
}

.aa-alerta--sucesso {
    background: var(--aa-tiffany-suave);
    border-color: var(--aa-tiffany-claro);
    color: var(--aa-tiffany-claro);
}

.aa-alerta--aviso {
    background: rgba(183, 121, 31, .14);
    border-color: var(--aa-alerta);
    color: #e3b464;
}

/* ---------------------------------------------------------------- tabelas */

.aa-tabela-wrap {
    overflow-x: auto;
    border: var(--aa-borda);
    border-radius: var(--aa-raio);
}

.aa-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.aa-tabela thead th {
    background: var(--aa-cinza-800);
    color: var(--aa-cinza-200);
    text-align: left;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .7rem .8rem;
    white-space: nowrap;
}

.aa-tabela tbody td {
    padding: .65rem .8rem;
    border-top: 1px solid var(--aa-cinza-800);
    vertical-align: middle;
}

.aa-tabela tbody tr:hover {
    background: rgba(255, 255, 255, .025);
}

.aa-tabela .aa-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* CPF de login na tela de acessos: valor + acao, ou campo de edicao inline. */
.aa-cpf-login {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.aa-cpf-login input {
    width: 150px;
    background: var(--aa-grafite);
    border: 1px solid var(--aa-cinza-700);
    border-radius: var(--aa-raio);
    color: var(--aa-branco);
    padding: .3rem .5rem;
}

.aa-vazio {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--aa-cinza-300);
}

/* ------------------------------------------------------------------ chips */

.aa-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid var(--aa-cinza-700);
    color: var(--aa-cinza-200);
    white-space: nowrap;
}

.aa-chip--tiffany {
    background: var(--aa-tiffany-suave);
    border-color: var(--aa-tiffany);
    color: var(--aa-tiffany-claro);
}

.aa-chip--cinza {
    background: var(--aa-cinza-800);
}

.aa-chip--alerta {
    background: rgba(183, 121, 31, .14);
    border-color: var(--aa-alerta);
    color: #e3b464;
}

.aa-chip--erro {
    background: rgba(192, 57, 43, .12);
    border-color: var(--aa-erro);
    color: #f0a49c;
}

/* ------------------------------------------------------------ leaderboard */

.aa-tabs {
    display: flex;
    gap: .4rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.aa-tab {
    padding: .5rem 1.1rem;
    border-radius: var(--aa-raio);
    border: 1px solid var(--aa-cinza-700);
    background: var(--aa-cinza-900);
    color: var(--aa-cinza-200);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
}

.aa-tab--ativa {
    background: var(--aa-tiffany);
    border-color: var(--aa-tiffany);
    color: var(--aa-botao-texto, var(--aa-branco));
}

/* Titulo do leaderboard com a logo do campeonato logo apos a palavra. */
.aa-lb__titulo {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.aa-lb__logo {
    height: 2.75rem;
    max-width: 180px;
    object-fit: contain;
}

.aa-lb__linha {
    cursor: pointer;
}

/* Equipe do atleta logado: branco/cinza suave, distinto do verde-agua usado nas acoes. */
.aa-lb__linha--minha > td {
    background: rgba(244, 247, 247, .10);
    box-shadow: inset 0 1px 0 rgba(244, 247, 247, .18), inset 0 -1px 0 rgba(244, 247, 247, .18);
}

.aa-lb__linha--minha > td:first-child {
    box-shadow: inset 4px 0 0 var(--aa-cinza-200), inset 0 1px 0 rgba(244, 247, 247, .18), inset 0 -1px 0 rgba(244, 247, 247, .18);
}

.aa-lb__linha--minha:hover > td {
    background: rgba(244, 247, 247, .16);
}

.aa-lb__linha--minha .aa-lb__equipe {
    color: var(--aa-branco);
}

.aa-lb__linha--minha .aa-lb__atletas {
    color: var(--aa-cinza-200);
}

.aa-alerta--minha-equipe {
    background: rgba(244, 247, 247, .08);
    border-color: var(--aa-cinza-200);
    color: var(--aa-cinza-200);
}

.aa-lb__pos {
    font-weight: 800;
    font-size: 1rem;
    width: 3.5rem;
    font-variant-numeric: tabular-nums;
}

.aa-lb__pos--1 { color: var(--aa-ouro); }
.aa-lb__pos--2 { color: var(--aa-prata); }
.aa-lb__pos--3 { color: var(--aa-bronze); }

.aa-lb__equipe {
    font-weight: 700;
    font-size: .95rem;
}

.aa-lb__atletas {
    color: var(--aa-cinza-300);
    font-size: .78rem;
}

.aa-lb__detalhe > td {
    background: var(--aa-grafite);
    padding: 0 !important;
}

.aa-lb__detalhe-conteudo {
    padding: 1rem 1.25rem 1.25rem 4.5rem;
}

.aa-lb__wod {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--aa-cinza-800);
}

.aa-lb__wod:last-child {
    border-bottom: none;
}

.aa-lb__wod-nome {
    font-weight: 700;
    min-width: 220px;
}

.aa-lb__wod-dado {
    color: var(--aa-cinza-200);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.aa-lb__wod-dado strong {
    color: var(--aa-tiffany-claro);
}

.aa-seta {
    display: inline-block;
    transition: transform .15s ease;
    color: var(--aa-cinza-300);
}

.aa-seta--aberta {
    transform: rotate(90deg);
    color: var(--aa-tiffany-claro);
}

/* -------------------------------------------------------------- descricao */

.aa-wod-descricao {
    white-space: pre-wrap;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .88rem;
    line-height: 1.6;
    background: var(--aa-grafite);
    border-left: 3px solid var(--aa-tiffany);
    border-radius: 0 var(--aa-raio) var(--aa-raio) 0;
    padding: .9rem 1rem;
    margin: 0;
}

/* ------------------------------------------------------------------ hero */

.aa-hero {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 2rem;
    align-items: center;
    background:
        radial-gradient(900px 300px at 15% 0%, rgba(14, 122, 112, .25), transparent 60%),
        var(--aa-cinza-900);
    border: var(--aa-borda);
    border-radius: var(--aa-raio);
    padding: 2.5rem;
    margin-bottom: 1.5rem;
}

.aa-hero h1 {
    font-size: 2.3rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.aa-hero p {
    color: var(--aa-cinza-200);
    max-width: 52ch;
}

/* Sem logo cadastrada: o texto ocupa toda a largura do destaque. */
.aa-hero--sem-logo {
    grid-template-columns: 1fr;
}

/* Logo enviada pelo campeonato: cores originais (a padrao antiga era invertida). */
.aa-hero__logo--cadastrada {
    filter: none;
    max-height: 220px;
    object-fit: contain;
}

.aa-hero__logo {
    width: 100%;
    max-width: 320px;
    justify-self: center;
    filter: invert(1);
}

@media (max-width: 860px) {
    .aa-hero {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

}

/* ------------------------------------------------------- menu hamburguer */

.aa-nav-toggle,
.aa-hamburger {
    display: none;
}

@media (max-width: 860px) {
    .aa-header__inner {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 1rem;
    }

    .aa-hamburger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 0 10px;
        margin-left: auto;
        border: var(--aa-borda);
        border-radius: var(--aa-raio);
        cursor: pointer;
        flex-shrink: 0;
    }

    .aa-hamburger:hover,
    .aa-hamburger:focus-visible {
        background: var(--aa-cinza-800);
        outline: none;
        border-color: var(--aa-tiffany-claro);
    }

    .aa-hamburger__barra {
        display: block;
        height: 2px;
        width: 100%;
        background: var(--aa-branco);
        border-radius: 2px;
        transition: transform .2s ease, opacity .2s ease;
    }

    /* Vira um "X" quando aberto. */
    .aa-nav-toggle:checked + .aa-hamburger .aa-hamburger__barra:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .aa-nav-toggle:checked + .aa-hamburger .aa-hamburger__barra:nth-child(2) {
        opacity: 0;
    }

    .aa-nav-toggle:checked + .aa-hamburger .aa-hamburger__barra:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .aa-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: .15rem;
        margin: 0;
        padding: .5rem 1rem 1rem;
        background: var(--aa-preto);
        border-bottom: 2px solid var(--aa-tiffany-escuro);
        box-shadow: var(--aa-sombra);
        max-height: calc(100vh - 64px);
        /* dvh: no celular, 100vh inclui a barra do navegador e o fim do menu ficava fora da tela. */
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
    }

    /* Com os grupos abertos o menu passa da altura e rola; sem isso o flex encolhe os itens com
       overflow (o link do campeonato) e corta o texto pela metade. */
    .aa-nav > * {
        flex-shrink: 0;
    }

    .aa-nav-toggle:checked ~ .aa-nav {
        display: flex;
    }

    .aa-nav a,
    .aa-nav button.aa-link {
        width: 100%;
        padding: .75rem .9rem;
        font-size: .95rem;
    }

    .aa-nav form {
        width: 100%;
    }

    .aa-nav__grupo > summary {
        display: flex;
        justify-content: space-between;
        padding: .75rem .9rem;
        font-size: .95rem;
    }

    .aa-nav__subgrupo > summary {
        padding: .75rem .9rem;
        font-size: .95rem;
    }

    .aa-nav__submenu {
        position: static;
        min-width: 0;
        padding: .15rem 0 .15rem 1rem;
        background: none;
        border: none;
        box-shadow: none;
    }
}

/* ------------------------------------------------------- campeonatos */

.aa-secao-titulo {
    font-size: .8rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--aa-tiffany-claro);
    margin: 0 0 .75rem;
}

/* Card clicavel/escolhivel de campeonato (home, leaderboard, escolha apos login). */
.aa-campeonato-opcao {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease;
}

a.aa-campeonato-opcao:hover {
    border-color: var(--aa-tiffany);
    color: inherit;
    text-decoration: none;
}

.aa-campeonato-opcao h2 {
    margin: 0;
}

.aa-campeonato-opcao--atual {
    border-color: var(--aa-tiffany-claro);
    box-shadow: inset 3px 0 0 var(--aa-tiffany-claro);
}

/* Campeonato da sessao no cabecalho: sempre visivel, clique para trocar. */
.aa-nav a.aa-nav__campeonato {
    border: 1px solid var(--aa-tiffany-escuro);
    color: var(--aa-tiffany-claro);
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* Menu mobile: o link ocupa a largura toda, entao o nome aparece inteiro e quebra linha se preciso. */
@media (max-width: 860px) {
    .aa-nav a.aa-nav__campeonato {
        max-width: none;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }
}

/* ------------------------------------------------------- aparencia */

.aa-aparencia__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px dashed var(--aa-cinza-700);
    border-radius: var(--aa-raio);
    background: var(--aa-grafite);
}

.aa-aparencia__logo img {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
}

.aa-campo-cor__controles {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.aa-campo-cor__controles input[type="color"] {
    width: 3rem;
    height: 2.4rem;
    padding: .15rem;
    flex: 0 0 auto;
    cursor: pointer;
}

.aa-campo-cor__controles input[type="text"] {
    font-family: "Cascadia Mono", Consolas, monospace;
    text-transform: lowercase;
}

/* Previa isolada: usa as cores do formulario, nao as do tema em vigor. */
.aa-previa {
    border-radius: var(--aa-raio);
    padding: 1rem;
    border: 1px solid rgba(127, 127, 127, .35);
}

.aa-previa__cabecalho {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .75rem;
    margin-bottom: .75rem;
    border-bottom: 2px solid var(--previa-botao);
}

.aa-previa__cabecalho img {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
}

.aa-previa__cabecalho strong {
    display: block;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.aa-previa__cabecalho small {
    display: block;
    color: var(--previa-botao);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .7rem;
}

.aa-previa__botao {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: var(--aa-raio);
    background: var(--previa-botao);
    color: var(--previa-botao-texto);
    font-weight: 700;
    font-size: .85rem;
}

/* ------------------------------------------------------- copiar link */

.aa-link-copia {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .35rem;
}

.aa-copiar {
    white-space: nowrap;
}

.aa-copiar__icone {
    width: .95rem;
    height: .95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aa-copiar--ok,
.aa-copiar--ok:hover {
    background: var(--aa-tiffany-suave);
    border-color: var(--aa-tiffany-claro);
    color: var(--aa-tiffany-claro);
}

/* ------------------------------------------------------- telas de conta (login) */

.aa-conta {
    max-width: 520px;
    margin: 0 auto;
}

.aa-conta__lembrar {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-transform: none;
    font-size: .9rem;
    cursor: pointer;
}

.aa-conta__lembrar input {
    width: auto;
}

/* ------------------------------------------------------- senha (olhinho) */

.aa-senha {
    position: relative;
}

.aa-senha input {
    padding-right: 2.9rem;
}

.aa-senha__olho {
    position: absolute;
    top: 50%;
    right: .45rem;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: none;
    border-radius: var(--aa-raio);
    background: transparent;
    color: var(--aa-cinza-300);
    cursor: pointer;
}

.aa-senha__olho:hover,
.aa-senha__olho:focus-visible {
    color: var(--aa-tiffany-claro);
    background: var(--aa-cinza-800);
    outline: none;
}

.aa-senha__icone {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aa-senha__icone--ocultar,
.aa-senha__olho[aria-pressed="true"] .aa-senha__icone--mostrar {
    display: none;
}

.aa-senha__olho[aria-pressed="true"] .aa-senha__icone--ocultar {
    display: block;
}

/* ------------------------------------------------------------------ modal */

/* Abaixo do overlay de loading (1000): a confirmacao continua bloqueada enquanto processa. */
.aa-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 12, 13, .75);
}

/* Caixa limitada a altura da tela: o conteudo rola por dentro, com o titulo e os botoes sempre visiveis. */
.aa-modal__caixa {
    width: 100%;
    max-width: 480px;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    gap: 1rem;
    padding: 0 1.5rem;
    background: var(--aa-cinza-900);
    border: var(--aa-borda);
    border-top: 3px solid var(--aa-erro);
    border-radius: var(--aa-raio);
    box-shadow: var(--aa-sombra);
}

.aa-modal__caixa h2 {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 1.25rem 0 .75rem;
    background: var(--aa-cinza-900);
    border-bottom: var(--aa-borda);
}

.aa-modal__caixa > .aa-acoes {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0;
    padding: .9rem 0 1.25rem;
    background: var(--aa-cinza-900);
    border-top: var(--aa-borda);
}

.aa-modal__caixa p,
.aa-modal__texto {
    margin: 0;
    color: var(--aa-cinza-200);
}

/* Pagina atras do modal nao rola junto. */
body:has(.aa-modal) {
    overflow: hidden;
}

/* Resumo em pares rotulo/valor dentro do modal (ex.: reembolso). */
.aa-modal__resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: .6rem;
    margin: 0;
    padding: .75rem;
    background: var(--aa-cinza-800);
    border-radius: var(--aa-raio);
}

.aa-modal__resumo div {
    display: grid;
    gap: .1rem;
}

.aa-modal__resumo dt {
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aa-cinza-300);
}

.aa-modal__resumo dd {
    margin: 0;
    font-weight: 700;
    color: var(--aa-branco);
}

.aa-modal__caixa .aa-alerta {
    margin: 0;
}

/* ---------------------------------------------------------------- perfis */

/* Figuras dos perfis (PerfilDescrito): a descricao fica recolhida e abre ao clicar na figura. */
.aa-perfis {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.aa-perfil__resumo {
    display: flex;
    align-items: center;
    gap: .75rem;
    list-style: none;
    cursor: pointer;
    border-radius: var(--aa-raio);
    color: var(--aa-tiffany-claro);
}

.aa-perfil__resumo::-webkit-details-marker {
    display: none;
}

.aa-perfil__resumo:focus-visible {
    outline: 2px solid var(--aa-tiffany-claro);
    outline-offset: 2px;
}

.aa-perfil__icone {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    transition: transform .15s ease;
}

.aa-perfil__resumo:hover .aa-perfil__icone {
    transform: scale(1.08);
}

.aa-perfil__nome {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Indicador de abrir/fechar ao lado do nome. */
.aa-perfil__nome::after {
    content: "+";
    margin-left: .4rem;
    color: var(--aa-cinza-300);
}

.aa-perfil[open] .aa-perfil__nome::after {
    content: "\2212";
}

.aa-perfil__descricao {
    margin-top: .6rem;
    font-size: .85rem;
    color: var(--aa-cinza-200);
}

.aa-perfil__descricao p:last-child {
    margin-bottom: 0;
}

/* Dentro da grade: cada perfil vira um bloco com a figura em cima; aberto, ocupa a linha toda. */
.aa-perfis .aa-perfil {
    position: relative;
    padding: .75rem .5rem;
    border: var(--aa-borda);
    border-radius: var(--aa-raio);
    background: var(--aa-cinza-800);
}

.aa-perfis .aa-perfil__resumo {
    flex-direction: column;
    gap: .4rem;
    text-align: center;
}

/* Nomes longos (ADMINISTRATIVO) cabem no bloco; o +/- vai para o canto e nao disputa a largura. */
.aa-perfis .aa-perfil__nome {
    max-width: 100%;
    font-size: .74rem;
    letter-spacing: .06em;
}

.aa-perfis .aa-perfil__nome::after {
    position: absolute;
    top: .35rem;
    right: .6rem;
    margin: 0;
}

.aa-perfis .aa-perfil[open] {
    grid-column: 1 / -1;
    border-color: var(--aa-tiffany-escuro);
}

.aa-perfis .aa-perfil[open] .aa-perfil__descricao {
    text-align: center;
}

/* Home: todos ja abertos, lado a lado (sem ocupar a linha inteira). */
.aa-perfis.aa-perfis--expandidos {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 1rem;
}

.aa-perfis--expandidos .aa-perfil[open] {
    grid-column: auto;
    border-color: var(--aa-cinza-700);
}

@media (max-width: 480px) {
    .aa-perfis {
        grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
        gap: .5rem;
    }

    .aa-perfis .aa-perfil {
        padding: .6rem .4rem;
    }

    .aa-perfil__icone {
        width: 40px;
        height: 40px;
    }

    .aa-perfis .aa-perfil__nome {
        font-size: .7rem;
        letter-spacing: .04em;
    }
}

/* ---------------------------------------------------------------- loading */

/* Overlay das acoes em andamento. Aparece na hora e o componente Carregando o mantem por um
   tempo minimo, para que operacoes rapidas tambem deem retorno visual. */
.aa-carregando {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 12, 13, .72);
    backdrop-filter: blur(2px);
    opacity: 0;
    animation: aa-carregando-entrada .15s ease forwards;
}

/* Overlay das paginas estaticas (CarregandoEnvio): oculto ate o envio do formulario. */
.aa-carregando[hidden] {
    display: none;
}

.aa-carregando__caixa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 2rem;
    background: var(--aa-cinza-900);
    border: var(--aa-borda);
    border-radius: var(--aa-raio);
    box-shadow: var(--aa-sombra);
}

.aa-carregando__texto {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aa-cinza-200);
}

.aa-kb {
    width: 72px;
    height: auto;
}

.aa-kb__vazio {
    fill: var(--aa-cinza-700);
}

/* O kettlebell "enche" de baixo para cima e reinicia. */
.aa-kb__nivel {
    fill: var(--aa-tiffany-claro);
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: aa-kb-encher 1.8s ease-in-out infinite;
}

@keyframes aa-carregando-entrada {
    to { opacity: 1; }
}

@keyframes aa-kb-encher {
    0%   { transform: scaleY(0); opacity: 1; }
    70%  { transform: scaleY(1); opacity: 1; }
    88%  { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .aa-kb__nivel {
        animation-duration: 4s;
    }
}

/* ------------------------------------------------------------ responsivo */

/* Tabelas de cadastro viram cards empilhados no celular. Cada <td> informa o
   rotulo da coluna em data-label; celulas sem rotulo (acoes) ocupam a linha toda. */
@media (max-width: 720px) {
    .aa-tabela--cards thead {
        display: none;
    }

    .aa-tabela--cards,
    .aa-tabela--cards tbody,
    .aa-tabela--cards tr,
    .aa-tabela--cards td {
        display: block;
        width: 100%;
    }

    .aa-tabela--cards tbody tr {
        padding: .7rem .9rem;
        border-top: 1px solid var(--aa-cinza-700);
    }

    .aa-tabela--cards tbody tr:first-child {
        border-top: none;
    }

    .aa-tabela--cards tbody td {
        border-top: none;
        padding: .3rem 0;
    }

    .aa-tabela--cards tbody td[data-label] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: .75rem;
        text-align: right;
    }

    .aa-tabela--cards tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        padding-top: .15rem;
        text-align: left;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--aa-cinza-300);
    }

    .aa-tabela--cards tbody td input,
    .aa-tabela--cards tbody td select {
        flex: 1;
        min-width: 0;
        text-align: left;
    }

    .aa-tabela--cards tbody td:not([data-label]) {
        padding-top: .6rem;
    }

    .aa-tabela--cards tbody td:not([data-label]) .aa-acoes .aa-btn {
        flex: 1 1 auto;
    }

    .aa-tabela--cards .aa-lb__detalhe {
        padding: 0;
    }

    .aa-tabela--cards .aa-lb__detalhe-conteudo {
        padding: 1rem !important;
    }

    .aa-ocultar-mobile {
        display: none;
    }
}

@media (max-width: 640px) {
    .aa-header__inner {
        padding: .6rem .85rem;
    }

    .aa-main {
        padding: 1.1rem .85rem 2rem;
    }

    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.15rem; }

    .aa-hero h1 {
        font-size: 1.6rem;
    }

    .aa-hero {
        padding: 1.25rem;
        gap: 1.25rem;
    }

    .aa-hero__logo {
        max-width: 200px;
    }

    .aa-card {
        padding: 1rem;
    }

    .aa-page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .aa-page-head > .aa-acoes .aa-btn,
    .aa-page-head > .aa-acoes select {
        flex: 1 1 auto;
    }

    /* Botoes de formulario confortaveis ao toque. */
    .aa-form > .aa-acoes .aa-btn,
    .aa-card > .aa-acoes .aa-btn {
        flex: 1 1 100%;
        padding: .7rem 1rem;
    }

    /* 16px evita o zoom automatico do iOS ao focar o campo. */
    .aa-campo input,
    .aa-campo select,
    .aa-campo textarea,
    .aa-tabela input,
    .aa-tabela select,
    .form-control,
    .form-select {
        font-size: 16px;
    }

    .aa-tab {
        flex: 1 1 auto;
        text-align: center;
    }

    .aa-lb__detalhe-conteudo {
        padding: .9rem 1rem;
    }

    .aa-lb__wod-nome {
        min-width: 0;
        flex-basis: 100%;
    }

    .aa-tabela tbody td,
    .aa-tabela thead th {
        padding-left: .6rem;
        padding-right: .6rem;
    }

    .aa-carregando__caixa {
        padding: 1.25rem 1.5rem;
    }
}

@media (max-width: 380px) {
    .aa-brand__sub {
        display: none;
    }

    .aa-brand__logo {
        height: 32px;
    }
}

/* -------------------------------------------------------------- impressao */

.aa-sumula {
    background: #ffffff;
    color: #000000;
    border-radius: var(--aa-raio);
    padding: 1.5rem;
}

.aa-sumula table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.aa-sumula th,
.aa-sumula td {
    border: 1px solid #999;
    padding: .4rem .5rem;
    text-align: left;
    vertical-align: top;
}

.aa-sumula th {
    background: #e9eded;
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .08em;
}

.aa-sumula__cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 2px solid #000;
    padding-bottom: .75rem;
    margin-bottom: 1rem;
}

.aa-sumula__logo {
    height: 46px;
}

.aa-sumula__descricao {
    white-space: pre-wrap;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .8rem;
    border: 1px solid #999;
    padding: .6rem;
    margin: 0 0 1rem;
}

/* Descricao do WOD com a marca d'agua da rede centralizada atras do texto. */
.aa-sumula__descricao-wrap {
    position: relative;
    margin: 0 0 1rem;
    overflow: hidden;
}

.aa-sumula__descricao-wrap .aa-sumula__descricao {
    position: relative;
    z-index: 1;
    margin: 0;
    min-height: 7rem;
    background: transparent;
}

.aa-sumula__marca-dagua {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    height: min(85%, 150px);
    transform: translate(-50%, -50%);
    opacity: .09;
    pointer-events: none;
}

.aa-sumula__logo {
    object-fit: contain;
    max-width: 180px;
}

.aa-assinatura {
    min-height: 2.2rem;
    border-bottom: 1px solid #000;
    min-width: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Assinatura coletada no celular do judge, sobre a linha do atleta. */
.aa-assinatura__imagem {
    max-height: 3rem;
    max-width: 100%;
}

.aa-assinatura__check {
    font-weight: 700;
    padding-bottom: .2rem;
}

.aa-assinatura__quando {
    font-size: .68rem;
    color: #444;
}

/* ---------------------------------------------- ciencia dos atletas (lancamento) */

.aa-ciencia {
    border: var(--aa-borda);
    border-radius: var(--aa-raio);
    padding: .75rem 1rem;
    margin: 0;
    display: grid;
    gap: .75rem;
}

.aa-ciencia legend {
    font-weight: 700;
    padding: 0 .35rem;
}

.aa-ciencia__atleta {
    display: grid;
    gap: .4rem;
}

.aa-ciencia__nome {
    font-weight: 600;
}

/* Fundo branco: a assinatura e tinta preta, legivel no tema escuro e igual a impressa. */
.aa-ciencia__pad {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 3 / 1;
    background: #ffffff;
    border: 1px dashed #999;
    border-radius: 6px;
    touch-action: none;
}

.aa-ciencia__assinatura {
    width: 100%;
    max-width: 240px;
    background: #ffffff;
    border-radius: 6px;
}

.aa-ciencia__confirmacao {
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .35rem 0;
    cursor: pointer;
}

/* Tamanho fixo e confortavel ao toque: no celular a regra dos cards (td input { flex: 1; min-width: 0 })
   espremia o checkbox ate sumir ao lado do texto. */
.aa-ciencia__confirmacao input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    accent-color: var(--aa-tiffany-claro);
    cursor: pointer;
}

/* Uma folha por equipe: na tela ficam empilhadas, na impressao cada uma ocupa uma pagina. */
.aa-sumula__folha + .aa-sumula__folha {
    margin-top: 1.5rem;
}

.aa-sumula__rotulo {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #444;
}

.aa-sumula__equipe {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    border: 2px solid #000;
    border-radius: 6px;
    padding: .6rem .8rem;
    margin-bottom: 1rem;
}

.aa-sumula__equipe-nome {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}

.aa-sumula__equipe-categoria {
    text-align: right;
}

.aa-sumula__secao {
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 1rem 0 .4rem;
}

.aa-sumula__placar td {
    height: 2.6rem;
    font-size: 1rem;
}

.aa-sumula__opcao {
    display: inline-block;
    margin-right: 1rem;
    white-space: nowrap;
}

.aa-sumula__observacoes {
    min-height: 4.5rem;
    border: 1px solid #999;
    padding: .4rem .5rem;
    margin-top: .25rem;
    white-space: pre-wrap;
}

.aa-sumula__assinaturas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
    font-size: .78rem;
    text-align: center;
}

/* Sumula no celular: genero e camiseta saem (carga e adaptacao ficam como colunas), o placar vira tempo | reps
   com o status embaixo e os atletas assinam um abaixo do outro. Na impressao o layout completo continua.
   Fica depois das regras base da sumula para vencer na cascata (mesma especificidade). */
@media screen and (max-width: 860px) {
    .aa-sumula {
        padding: 1rem;
    }

    .aa-sumula__cabecalho {
        flex-direction: column-reverse;
        gap: .75rem;
    }

    .aa-sumula__col-opcional {
        display: none;
    }

    .aa-sumula__atletas td {
        overflow-wrap: anywhere;
    }

    /* Placar: tempo | reps lado a lado e o status ocupando a linha de baixo inteira. */
    .aa-sumula__placar thead {
        display: none;
    }

    /* Em grade o border-collapse nao vale: a borda fica na linha e so os divisores ficam nas celulas. */
    .aa-sumula__placar tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid #999;
    }

    .aa-sumula__placar td {
        height: auto;
        min-height: 3.6rem;
        border: none;
    }

    .aa-sumula__placar td:first-child {
        border-right: 1px solid #999;
    }

    .aa-sumula__placar td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .25rem;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #444;
    }

    .aa-sumula__placar td.aa-sumula__status {
        grid-column: 1 / -1;
        border-top: 1px solid #999;
    }

    .aa-sumula__status .aa-sumula__opcao {
        margin-right: .75rem;
    }

    .aa-sumula__assinaturas {
        grid-template-columns: 1fr;
    }
}

@media print {
    .aa-header,
    .aa-footer,
    .aa-nao-imprime {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #000000;
    }

    .aa-main {
        padding: 0;
        max-width: none;
    }

    .aa-sumula {
        padding: 0;
    }

    .aa-sumula__quebra {
        break-after: page;
    }

    .aa-sumula__folha {
        break-after: page;
        break-inside: avoid;
    }

    .aa-sumula__folha:last-of-type {
        break-after: auto;
    }

    .aa-sumula__folha + .aa-sumula__folha {
        margin-top: 0;
    }
}

/* ------------------------------------------------------ erro do blazor */

#blazor-error-ui {
    color-scheme: dark;
    background: var(--aa-cinza-800);
    color: var(--aa-branco);
    border-top: 2px solid var(--aa-erro);
    bottom: 0;
    box-shadow: var(--aa-sombra);
    display: none;
    left: 0;
    padding: .8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: .75rem;
}

/* ------------------------------------------------------ inscricao e pagamento */

/* Abertura do valor: inscricao + taxas = total, sempre visivel antes de pagar. */
.aa-valores {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.aa-valores td {
    padding: .35rem 0;
    border-bottom: 1px dashed var(--aa-cinza-700);
}

.aa-valores td:last-child {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.aa-valores tr.aa-valores__total td {
    border-bottom: none;
    padding-top: .6rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--aa-tiffany-claro);
}

.aa-valores__taxa {
    color: var(--aa-cinza-200);
}

/* Cartoes de escolha do meio de pagamento (Pix x cartao), cada um com o proprio total. */
.aa-meio {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--aa-cinza-800);
    border: 2px solid var(--aa-cinza-700);
    border-radius: var(--aa-raio);
    padding: 1rem;
    color: var(--aa-branco);
    cursor: pointer;
    transition: border-color .15s ease;
}

.aa-meio:hover,
.aa-meio--ativo {
    border-color: var(--aa-tiffany-claro);
}

.aa-meio__nome {
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: .5rem;
}

.aa-meio:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.aa-pix {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
}

.aa-pix__qr {
    width: min(260px, 100%);
    height: auto;
    background: #fff;
    padding: .5rem;
    border-radius: var(--aa-raio);
}

.aa-pix__codigo {
    width: 100%;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .75rem;
    word-break: break-all;
    background: var(--aa-grafite);
    border: 1px solid var(--aa-cinza-700);
    border-radius: var(--aa-raio);
    padding: .6rem;
    color: var(--aa-cinza-200);
}

.aa-link-cadastro {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.aa-link-cadastro code {
    flex: 1 1 260px;
    word-break: break-all;
    color: var(--aa-tiffany-claro);
}

/* Formulario recolhivel do token digitado (Configuracoes > Inscricoes online). */
.aa-token-manual > summary {
    cursor: pointer;
    color: var(--aa-tiffany-claro);
    font-weight: 700;
    font-size: .88rem;
}

.aa-token-manual ul {
    padding-left: 1.1rem;
    display: grid;
    gap: .35rem;
}

/* ---------------------------------------------------------------- paginacao */
.aa-paginador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 1rem 0;
    font-size: .88rem;
    color: var(--aa-cinza-200);
}

.aa-paginador__paginas {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.aa-paginador__atual {
    padding: 0 .5rem;
    font-variant-numeric: tabular-nums;
}

.aa-paginador__resumo {
    font-variant-numeric: tabular-nums;
}

.aa-paginador__tamanho {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.aa-paginador__tamanho select {
    background: var(--aa-grafite);
    border: 1px solid var(--aa-cinza-700);
    border-radius: var(--aa-raio);
    color: var(--aa-branco);
    padding: .3rem .5rem;
}

/* ---------------------------------------------------------------- grade de WODs (expande/recolhe) */
.aa-wods__linha--aberta td {
    border-bottom-color: transparent;
}

.aa-wods__alternar,
.aa-wods__nome {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
}

.aa-wods__alternar {
    font-size: 1.1rem;
    line-height: 1;
    padding: .25rem .4rem;
    border-radius: var(--aa-raio);
}

.aa-wods__nome {
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.aa-wods__alternar:focus-visible,
.aa-wods__nome:focus-visible {
    outline: 2px solid var(--aa-tiffany-claro);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- lotes de inscricao */
.aa-lote__categoria {
    margin-bottom: .4rem;
}

.aa-lote__categoria label {
    font-size: .72rem;
}

/* ------------------------------------------------------- card recolhivel (<details>) */

.aa-recolhivel__resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.aa-recolhivel__resumo::-webkit-details-marker {
    display: none;
}

.aa-recolhivel__resumo .aa-card__titulo {
    margin-bottom: 0;
}

.aa-recolhivel__dica {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--aa-tiffany-claro);
    white-space: nowrap;
}

.aa-recolhivel__dica::before {
    content: "Clique para ver";
}

.aa-recolhivel__dica::after {
    content: "\25B8";
    font-size: 1rem;
    transition: transform .15s ease;
}

.aa-recolhivel[open] .aa-recolhivel__dica::before {
    content: "Clique para ocultar";
}

.aa-recolhivel[open] .aa-recolhivel__dica::after {
    transform: rotate(90deg);
}

.aa-recolhivel[open] > .aa-recolhivel__resumo {
    margin-bottom: 1rem;
}

.aa-recolhivel__resumo:focus-visible {
    outline: 2px solid var(--aa-tiffany-claro);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ------------------------------------------------------- reembolso: escolha do valor */

.aa-reembolso__opcoes {
    margin: 0 0 1rem;
    padding: 0;
    border: none;
    display: grid;
    gap: .45rem;
}

.aa-reembolso__opcoes legend {
    padding: 0;
    margin-bottom: .35rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ------------------------------------------------------- visualizar como (master) */

.aa-visualizacao {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .55rem 1.25rem;
    background: var(--aa-alerta);
    color: var(--aa-preto);
    font-size: .9rem;
}

.aa-visualizacao .aa-acoes {
    margin: 0;
}

.aa-visualizacao form {
    margin: 0;
}

/* Menu aberto (hamburguer no mobile ou grupo recolhivel): o cabecalho passa a frente do aviso
   "Voce esta vendo como", senao a tarja cobre as primeiras opcoes. */
.aa-header:has(.aa-nav-toggle:checked),
.aa-header:has(.aa-nav__grupo[open]) {
    z-index: 45;
}

/* ------------------------------------------------------- status cobrancas */

.aa-cobrancas__indicadores {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    margin-bottom: 1rem;
}

.aa-cobrancas__indicador {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-bottom: 0;
}

.aa-cobrancas__indicador strong {
    font-size: 1.35rem;
    color: var(--aa-branco);
}

.aa-cobrancas__indicador--destaque {
    border-color: var(--aa-tiffany);
    background: var(--aa-tiffany-suave);
}

.aa-cobrancas__indicador--destaque strong {
    color: var(--aa-tiffany-claro);
}

.aa-cobrancas__rosca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.aa-cobrancas__rosca svg {
    width: min(170px, 100%);
    flex: 0 0 auto;
}

.aa-cobrancas__rosca-total {
    font-size: .5rem;
    font-weight: 700;
    fill: var(--aa-branco);
}

.aa-cobrancas__legenda {
    display: grid;
    gap: .4rem;
    flex: 1 1 200px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aa-cobrancas__legenda li {
    display: grid;
    grid-template-columns: .8rem 1fr auto;
    column-gap: .5rem;
    align-items: center;
}

.aa-cobrancas__legenda li .aa-campo__ajuda {
    grid-column: 2 / 4;
}

.aa-cobrancas__cor {
    width: .8rem;
    height: .8rem;
    border-radius: 3px;
}

.aa-cobrancas__barras {
    display: grid;
    gap: .75rem;
    margin-bottom: .75rem;
}

.aa-cobrancas__barra-linha {
    display: grid;
    grid-template-columns: 6.5rem 1fr auto;
    gap: .6rem;
    align-items: center;
}

.aa-cobrancas__barra-trilho {
    height: .85rem;
    background: var(--aa-cinza-800);
    border-radius: 999px;
    overflow: hidden;
}

.aa-cobrancas__barra {
    height: 100%;
    border-radius: 999px;
}

.aa-cobrancas__serie {
    width: 100%;
    height: 160px;
    background: var(--aa-cinza-900);
    border-radius: var(--aa-raio);
}

.aa-cobrancas__eixo {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .35rem;
    font-size: .75rem;
    color: var(--aa-cinza-300);
}

@media (max-width: 480px) {
    .aa-cobrancas__barra-linha {
        grid-template-columns: 1fr auto;
    }

    .aa-cobrancas__barra-trilho {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}