/* Página da pulseira NFC — feature 51-pulseira-mapa-atleta (PUL-16).
 *
 * Estilo do renderer `js/bracelet/html.js`, usado pela página pública `relatorio.html?t=` e pela
 * pré-visualização da equipe. Layout segue `referencia-layout.png`: marca → cartão do atleta →
 * 3 indicadores → próximas 3 sessões → evolução → treino do dia → documentos → relatório completo.
 *
 * MOBILE-FIRST: quem encosta na pulseira usa um telefone, de pé no ginásio. As regras-base são as
 * do telefone e o `min-width` só ALARGA. Cores só por tokens `--dx-*` (`variables.css`) — nenhum
 * literal de cor aqui (há teste que amarra isso).
 *
 * TEMA (task pulseira-visual-diamond): fonte da marca em tudo, em branco; cada área um bloco em
 * alto relevo no verde esmeralda escuro; fundo vivo atrás. Tudo restrito a `.brc-*`: a tela do
 * staff, que desenha o mesmo relatório, não muda. O verde, o brilho e as sombras são os tokens
 * `--dx-em-*`; o desenho é `.tasks/pulseira-visual-diamond/`.
 *
 * IMPRESSÃO: o renderer abre o relatório no `beforeprint`; o bloco `@media print` no fim é a
 * segunda camada (vence o `hidden` do corpo colapsável se o evento não vier).
 */

/* === Fundo vivo ========================================================== */

/* Irmão de `.brc-root`, emitido pelo renderer: cobre a janela na página pública e a tela cheia na
   pré-visualização da equipe (lá o `transform` do overlay vira o bloco de referência do `fixed`).
   Não captura toque. As duas camadas só animam `transform` e `opacity`. */
.brc-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--dx-em-950);
    pointer-events: none;
}

.brc-bg-glow,
.brc-bg-pattern {
    position: absolute;
    top: -20%;
    right: -20%;
    bottom: -20%;
    left: -20%;
}

.brc-bg-glow {
    background: var(--dx-em-glow);
    animation: brc-breathe 14s ease-in-out infinite alternate;
}

.brc-bg-pattern {
    background-image: var(--dx-em-diamonds), var(--dx-em-mesh);
    background-repeat: no-repeat, repeat;
    background-position: 108% 12%, 0 0;
    background-size: 78% auto, 340px 340px;
    opacity: 0.55;
    animation: brc-drift 60s linear infinite alternate;
}

@keyframes brc-breathe {
    from { transform: translate3d(-3%, -2%, 0) scale(1); opacity: 0.75; }
    to { transform: translate3d(4%, 3%, 0) scale(1.12); opacity: 1; }
}

@keyframes brc-drift {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(-6%, -8%, 0) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .brc-bg-glow,
    .brc-bg-pattern {
        animation: none;
    }
}

/* Pré-visualização de `#bracelets`: o cabeçalho da tela cheia fica por cima do fundo, e a pulseira
   ocupa a largura toda, como na página pública (o respiro lateral da tela cheia deixava o documento
   32px mais estreito que o telefone, e o cabeçalho com as logos não cabia). O respiro de baixo, que
   reserva o menu inferior do app, fica. */
.brc-preview .fullscreen-header {
    position: relative;
    z-index: 2;
}

.brc-preview .fullscreen-body {
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
}

/* === Documento ========================================================== */

.brc-root {
    /* Os tokens de texto e de linha são remapeados NO ESCOPO: tudo o que está aqui dentro,
       inclusive o relatório embutido de `report.css`, lê `--dx-text`, `--dx-muted` e `--dx-border`
       e sai em branco, branco de apoio e fio esmeralda, sem lista de classes para esquecer. As
       cores de estado (`--dx-danger`, `--dx-warn`, `--dx-success`) não são tocadas. */
    --dx-text: var(--dx-em-ink);
    --dx-muted: var(--dx-em-soft);
    --dx-border: var(--dx-em-line);

    position: relative;
    z-index: 1;
    display: block;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 0 24px;
    color: var(--dx-text);
    letter-spacing: 0.02em;
}

/* Fonte da marca em TODO texto, com Montserrat para o que a Abnes não tem. O `*` é de propósito:
   botão e campo não herdam fonte, e `.rep-root` fixa a sua em `report.css`. */
.brc-root,
.brc-root * {
    font-family: var(--font-bracelet);
}

/* Página pública: o `<main class="rep-public">` de `relatorio.html` já tem 16px de respiro e cada
   cartão traz mais 16px de margem — somados, viravam 32px de borda em cada lado do telefone. Na
   base (telefone) o documento ocupa a largura toda e só a margem dos cartões sobra; a partir de
   592px (560 do documento + os 2 x 16 do host) ele volta a ficar centrado. A pré-visualização de
   `#bracelets` não está dentro de `.rep-public`. */
.rep-public > .brc-root {
    margin: -16px -16px 0;
}

@media (min-width: 592px) {
    .rep-public > .brc-root {
        margin: 0 auto;
    }
}

.brc-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--dx-em-edge);
    background: var(--dx-em-header-bg);
    box-shadow: var(--dx-em-header-shadow);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Marca + logo da Diamond + (separador + logo do clube parceiro). A altura das logos vai também
   no próprio elemento (`html.js`), para a folha antiga em cache não soltar o arquivo inteiro. */
.brc-brand-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.brc-logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 30px;
}

.brc-logo-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 26px;
    background: var(--dx-em-edge);
}

.brc-logo-club {
    display: block;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

/* Menu ☰ de seções (PUL-12). A lista cai por baixo do cabeçalho fixo. */
.brc-menu-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--dx-em-edge);
    border-radius: 14px;
    background: var(--dx-em-block-bg);
    box-shadow: var(--dx-em-block-shadow);
    color: var(--dx-text);
    cursor: pointer;
}

/* Fundo opaco por baixo do degradê: a lista abre por cima do conteúdo da página. */
.brc-nav {
    position: absolute;
    top: 100%;
    right: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid var(--dx-em-edge);
    border-radius: 20px;
    background: var(--dx-em-block-bg) var(--dx-em-900);
    box-shadow: var(--dx-em-block-shadow);
}

.brc-nav[hidden] {
    display: none;
}

.brc-nav-item {
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--dx-text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.brc-nav-item:hover,
.brc-nav-item:focus-visible {
    background: var(--dx-em-zebra);
    color: var(--dx-teal);
}

/* A seção de destino não fica escondida atrás do cabeçalho fixo. */
.brc-root > section {
    scroll-margin-top: 84px;
}

/* Seção escolhida no menu ☰: fica marcada até a próxima escolha, role a página ou não. */
.brc-root > [data-brc-target] {
    outline-style: solid;
    outline-width: 2px;
    outline-color: var(--dx-teal);
    outline-offset: 4px;
    border-radius: 20px;
}

/* A marca encolhe em telefone estreito para caber ao lado das logos e do ☰ (a 393px já está no
   tamanho do desenho). */
.brc-brand {
    margin: 0;
    color: var(--dx-teal);
    font-size: clamp(0.7rem, calc(9vw - 17.6px), 1.05rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brc-section-title {
    margin: 0 0 10px;
    color: var(--dx-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.brc-empty {
    margin: 0;
    color: var(--dx-muted);
    font-size: 0.9rem;
}

/* === Bloco em alto relevo ================================================ */

/* Cada área é um bloco que sai do fundo: degradê mais claro no topo, brilho interno em cima e
   sombra externa embaixo. O filete interno (`::before`) e o risco de luz do topo (`::after`)
   completam o relevo. */
.brc-athlete,
.brc-kpi,
.brc-upcoming,
.brc-evolution,
.brc-today,
.brc-documents,
.brc-library,
.brc-report {
    position: relative;
    border: 1px solid var(--dx-em-edge);
    border-radius: 20px;
    background: var(--dx-em-block-bg);
    box-shadow: var(--dx-em-block-shadow);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.brc-athlete::before,
.brc-kpi::before,
.brc-upcoming::before,
.brc-evolution::before,
.brc-today::before,
.brc-documents::before,
.brc-library::before,
.brc-report::before {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border: 1px solid var(--dx-em-inner);
    border-radius: 15px;
    pointer-events: none;
}

.brc-athlete::after,
.brc-kpi::after,
.brc-upcoming::after,
.brc-evolution::after,
.brc-today::after,
.brc-documents::after,
.brc-library::after,
.brc-report::after {
    content: '';
    position: absolute;
    top: 0;
    right: 18%;
    left: 18%;
    height: 2px;
    border-radius: 2px;
    background: var(--dx-em-streak);
    pointer-events: none;
}

/* Peça dentro de um bloco: cada sessão, cada documento, cada sessão do treino do dia. */
.brc-session,
.brc-doc,
.brc-today-session {
    position: relative;
    padding: 12px 14px;
    border: 1px solid var(--dx-em-edge-soft);
    border-radius: 14px;
    background: var(--dx-em-piece-bg);
    box-shadow: var(--dx-em-piece-shadow);
}

/* === Cartão do atleta ==================================================== */

.brc-athlete {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 16px 0;
    padding: 16px;
}

.brc-avatar {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border: 2px solid var(--dx-teal);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--dx-teal-dim);
}

.brc-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brc-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--dx-teal);
    font-size: 1.6rem;
    font-weight: 700;
}

.brc-athlete-info {
    min-width: 0;
}

.brc-athlete-name {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.brc-athlete-meta {
    margin: 4px 0 0;
    color: var(--dx-muted);
    font-size: 0.68rem;
}

.brc-diamond-id {
    display: flex;
    flex-direction: column;
    margin: 8px 0 0;
}

.brc-diamond-id-label {
    color: var(--dx-muted);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brc-diamond-id-value {
    color: var(--dx-text);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* === Indicadores ========================================================= */

.brc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
    margin: 12px 16px 0;
}

/* A fonte da marca é larga e o cartão é estreito (3 por linha): "Amanhã" no tamanho do desenho
   passaria 54px do cartão e faria a página rolar de lado. O cartão é um contêiner de consulta e a
   letra encolhe o que for preciso para o texto caber: o rótulo pela largura do cartão, o valor pela
   largura dividida pelo número de caracteres (`--brc-chars`, escrito pelo renderer). Em cartão
   largo o `min()` devolve o tamanho do desenho. O valor fica numa linha só e CENTRADO mesmo quando
   passa da área útil (o `flex` centra o que transborda; texto comum transbordaria só para a
   direita): "Hoje" no tamanho do desenho passa 3px e usa o respiro do cartão, 1,5px de cada lado.
   O divisor é a largura por caractere, em `em`: 1,26 até 4 caracteres, que mantém o desenho a
   393px, e 1,34 a partir de 5 ("Amanhã", uma data), que põe o texto inteiro dentro da área útil.
   Navegador sem `cqi` fica com o tamanho fixo e quebra a palavra em vez de vazar. */
.brc-kpi {
    container-type: inline-size;
    padding: 14px 6px 12px;
    text-align: center;
}

.brc-kpi-label {
    margin: 0;
    color: var(--dx-text);
    font-size: 0.5rem;
    font-size: min(0.5rem, 7.95cqi);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.brc-kpi-value {
    margin: 6px 0 0;
    color: var(--dx-text);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

@supports (width: 1cqi) {
    .brc-kpi-value {
        display: flex;
        justify-content: center;
        font-size: min(1.25rem, calc(100cqi / (var(--brc-chars, 4) * (1.26 + clamp(0, var(--brc-chars, 4) - 4, 1) * 0.08))));
        white-space: nowrap;
    }
}

.brc-kpi-sub {
    margin: 4px 0 0;
    color: var(--dx-muted);
    font-size: 0.55rem;
}

.brc-kpi-empty {
    margin: 8px 0 0;
    color: var(--dx-muted);
    font-size: 0.55rem;
    font-size: min(0.55rem, 8cqi);
    overflow-wrap: anywhere;
}

/* === Próximas sessões ==================================================== */

.brc-upcoming {
    margin: 12px 16px 0;
    padding: 14px 16px;
}

/* Cada sessão é um bloco próprio, com 10px entre uma e a seguinte (sem linha divisória). */
.brc-sessions,
.brc-docs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.brc-session {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brc-icon {
    flex: 0 0 auto;
    color: var(--dx-text);
}

.brc-session-info {
    min-width: 0;
}

.brc-session-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.brc-session-when,
.brc-session-where {
    margin: 2px 0 0;
    color: var(--dx-muted);
    font-size: 0.62rem;
}

/* === Evolução ============================================================ */

.brc-evolution,
.brc-today,
.brc-documents,
.brc-library,
.brc-report {
    margin: 12px 16px 0;
    padding: 14px 16px;
}

.brc-evo-chart {
    display: block;
    width: 100%;
    height: auto;
}

.brc-evo-line {
    stroke: var(--dx-text);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brc-evo-dot {
    fill: var(--dx-em-800);
    stroke: var(--dx-text);
    stroke-width: 2;
}

.brc-evo-delta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 6px 0 0;
}

.brc-evo-pct {
    color: var(--dx-text);
    font-size: 1.1rem;
    font-weight: 700;
}

.brc-evo-ref {
    color: var(--dx-muted);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* === Treino do dia ======================================================= */

.brc-today-session + .brc-today-session {
    margin-top: 10px;
}

.brc-today-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

.brc-today-title {
    font-size: 0.78rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.brc-today-time {
    flex: 0 0 auto;
    color: var(--dx-text);
    font-size: 0.85rem;
    font-weight: 600;
}

.brc-blocks {
    margin: 8px 0 0;
    padding: 0 0 0 18px;
}

.brc-block + .brc-block {
    margin-top: 8px;
}

.brc-block-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
}

.brc-block-body {
    margin: 2px 0 0;
    color: var(--dx-muted);
    font-size: 0.66rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* === Documentos ========================================================== */

.brc-doc-open {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
}

button.brc-doc-open {
    cursor: pointer;
}

button.brc-doc-open:disabled {
    opacity: 0.6;
    cursor: progress;
}

.brc-doc-title {
    color: var(--dx-text);
    font-size: 0.78rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.brc-doc-meta {
    margin-top: 2px;
    color: var(--dx-muted);
    font-size: 0.62rem;
}

.brc-doc-status {
    margin: 8px 0 0;
    color: var(--dx-danger);
    font-size: 0.72rem;
}

/* === Biblioteca (feature 56) ============================================ */

.brc-lib-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brc-lib-cover {
    flex: 0 0 auto;
    width: 40px;
    height: 56px;
    object-fit: cover;
    background: var(--dx-border);
}

.brc-lib-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* === Relatório completo ================================================== */

.brc-report .brc-section-title {
    margin: 0;
}

.brc-report-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.brc-report-toggle-icon {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--dx-teal);
    border-bottom: 2px solid var(--dx-teal);
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.brc-report-toggle[aria-expanded="true"] .brc-report-toggle-icon {
    transform: rotate(-135deg);
}

.brc-report-body {
    margin-top: 12px;
}

.brc-report .brc-empty {
    margin-top: 10px;
}

/* Uma moldura só: `.brc-report` já é um cartão (16px de margem + borda + 16px de respiro) e cada
   seção do relatório embutido era outro (`.rep-card`, com os mesmos 33px por lado). Somados, um
   terço de um telefone de 393px ia embora e a tabela de 3 colunas rolava de lado. Aqui dentro a
   seção perde a caixa e fica separada da anterior por uma linha; as tabelas seguem tabelas e
   rolam dentro de `.rep-table-wrap` quando não cabem. Vale só dentro de `.brc-report`: na tela do
   staff o relatório mantém os cartões. O seletor de duas classes também vence o
   `@media (min-width: 768px)` de `report.css`, que alarga margem e respiro do cartão. */
.brc-report .rep-card {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--dx-border);
    border-radius: 0;
    background: none;
}

.brc-report .rep-header + .rep-card,
.brc-report .rep-nav + .rep-card {
    margin-top: 12px;
}

.brc-report .rep-card-toggle {
    padding: 14px 0;
    font-size: 0.82rem;
}

.brc-report .rep-card-toggle::after {
    color: var(--dx-text);
}

.brc-report .rep-card-body {
    padding: 0 0 16px;
}

/* O relatório embutido no mesmo tema. As regras são de duas classes para vencer `report.css` e
   ficam restritas a `.brc-report`: a tela do staff segue com as dela. A fonte da marca é larga, daí
   a letra menor em títulos, pílulas e tabelas (os tamanhos são os do desenho). */
.brc-report .rep-header {
    border-bottom: 2px solid var(--dx-em-edge);
    background: var(--dx-em-report-head-bg);
}

.brc-report .rep-brand,
.brc-report .rep-subtitle {
    color: var(--dx-text);
}

.brc-report .rep-title {
    font-size: 0.8rem;
}

.brc-report .rep-nav-item,
.brc-report .rep-btn {
    border-color: var(--dx-em-edge);
    background: var(--dx-em-piece-bg);
    box-shadow: var(--dx-em-pill-shadow);
    color: var(--dx-text);
    font-size: 0.6rem;
}

.brc-report .rep-ig {
    border-color: var(--dx-em-edge);
    background: var(--dx-em-piece-bg);
    box-shadow: var(--dx-em-piece-shadow);
}

.brc-report .rep-ig-value {
    color: var(--dx-text);
}

.brc-report .rep-ig-value.rep-na {
    color: var(--dx-muted);
}

.brc-report .rep-table {
    font-size: 0.6rem;
}

.brc-report .rep-table th {
    background: var(--dx-em-th-bg);
    box-shadow: var(--dx-em-th-shadow);
    color: var(--dx-text);
}

.brc-report .rep-table td {
    border-bottom-color: var(--dx-em-line-soft);
}

.brc-report .rep-table tbody tr:nth-child(odd) {
    background: var(--dx-em-zebra);
}

/* === Rodapé ============================================================== */

.brc-footer {
    margin-top: 20px;
    padding: 12px 16px;
    color: var(--dx-muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-align: center;
}

/* === Telas maiores: só alarga ============================================ */

@media (min-width: 393px) {
    .brc-brand-wrap {
        gap: 12px;
    }
}

@media (min-width: 600px) {
    .brc-avatar {
        width: 96px;
        height: 96px;
    }

    .brc-athlete-name {
        font-size: 1.14rem;
    }
}

/* === Impressão =========================================================== */

@media print {
    /* O relatório fechado não pode faltar no papel: vence o `hidden` (display: none do UA). */
    .brc-report-body[hidden],
    .brc-report-body {
        display: block !important;
    }

    .brc-report-toggle-icon {
        display: none !important;
    }

    .brc-menu-btn,
    .brc-nav {
        display: none !important;
    }

    .brc-header {
        position: static;
    }

    .brc-root > [data-brc-target] {
        outline: none;
    }

    /* No papel nada anima e o fundo vivo não sai: a base verde vai no próprio documento, opaca,
       para todo bloco ter o escuro por trás em todas as páginas. Os blocos mantêm o verde e o
       relevo da tela. */
    .brc-bg {
        display: none;
    }

    .brc-bg-glow,
    .brc-bg-pattern {
        animation: none;
    }

    .brc-root {
        background: var(--dx-em-950) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        max-width: none;
    }

    .brc-athlete,
    .brc-kpi,
    .brc-upcoming,
    .brc-evolution,
    .brc-today,
    .brc-documents,
    .brc-library {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .brc-doc-status {
        display: none;
    }
}