/* ── PAINEL DO COACH EM DESKTOP ───────────────────────────────────────────
   Mockup aprovado: mockups/aprovados/painel-do-coach-desktop.html (dono,
   14/08/2026). SÓ LAYOUT — cor e efeito continuam vindo do aurum.css.

   Duas decisões estruturais moram aqui:

   1) TUDO é escopado em `body.is-coach`. A AGENDA (#agendaView) é a MESMA
      tela dos dois papéis — sem esse escopo, mexer no painel mudaria a
      agenda do atleta, que é celular. A classe é ligada em showScreen()
      (boot.js), que já sabe quem é treinador e roda em toda troca de tela,
      inclusive no logout.

   2) O ponto de corte é 860px — o MESMO do editor de prescrição
      (coach-editor.js:209). Ele é a única tela do painel que já era
      desktop; adotar outro número faria a barra lateral aparecer numa
      largura e as 3 colunas do editor em outra.

   Abaixo de 860px nada muda: o painel continua o celular de sempre. */

:root { --coach-side-w: 236px; }

/* ── A barra de abas ──────────────────────────────────────────────────────
   Estes valores estavam INLINE no #coachNav do index.html. Saíram de lá
   porque estilo inline vence media query: enquanto estivesse no HTML, a
   barra nunca viraria lateral. */
#coachNav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around;
  padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--au-bg) 34%);
  z-index: 220;
}
/* a identidade e o rodapé de Conta só existem na versão lateral: no celular
   quem os mostra é o cabeçalho da tela HOJE (coach-today.js). */
#coachNav .coach-side-id, #coachNav .coach-side-foot { display: none; }
/* [16/10 · régua AXE] a moldura só existe pro leitor de tela (a lista de
   abas não pode conter o botão Conta); pro layout ela não existe. */
#coachNav .coach-side-abas { display: contents; }

@media (min-width: 860px) {
  body.is-coach #coachNav {
    right: auto; top: 0; bottom: 0; width: var(--coach-side-w);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px;
    padding: 26px 18px calc(18px + env(safe-area-inset-bottom));
    background: none;
    border-right: 1px solid var(--au-line);
  }
  body.is-coach #coachNav .nav-btn {
    display: flex; align-items: center; gap: 10px;
    text-align: left; padding: 0 12px; min-height: 44px;
    border-radius: 10px;
  }
  body.is-coach #coachNav .nav-btn.active { background: rgba(255,255,255,.05); }
  /* o ponto de ouro marca a aba ativa sem precisar de fill de área (régua:
     ouro nunca em fill) */
  body.is-coach #coachNav .nav-btn::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--au-gold); flex: none; opacity: 0;
  }
  body.is-coach #coachNav .nav-btn.active::before { opacity: 1; }
  body.is-coach #coachNav .coach-side-count {
    margin-left: auto;
    font: 400 var(--au-fs-mono-xs) "Space Mono", monospace;
    letter-spacing: .12em; color: var(--au-faint);
  }
  body.is-coach #coachNav .coach-side-count.on { color: var(--au-gold); }

  body.is-coach #coachNav .coach-side-id {
    display: flex; align-items: center; gap: 11px; margin-bottom: 26px;
  }
  body.is-coach #coachNav .coach-side-seal {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    border: 1px solid var(--au-gold); color: var(--au-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--au-fs-m);
  }
  body.is-coach #coachNav .coach-side-name { font-size: var(--au-fs-l); color: var(--au-text); }
  body.is-coach #coachNav .coach-side-role {
    font: 400 var(--au-fs-mono-xs) "Space Mono", monospace;
    letter-spacing: .16em; text-transform: uppercase; color: var(--au-faint);
  }
  body.is-coach #coachNav .coach-side-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; min-height: 44px; padding: 0 12px;
    background: none; border: none; border-top: 1px solid var(--au-line-soft);
    font: 300 var(--au-fs-xs) Sora, sans-serif; color: var(--au-faint);
    cursor: pointer; width: 100%;
  }
  body.is-coach #coachNav .coach-side-foot:active { transform: scale(.97); }

  /* ── As telas do painel deixam de ser uma coluna de celular ──────────── */
  /* [dono 17/08] O #editorView ENTROU NESTA LISTA, e a falta dele era um
     vazamento de verdade: ele é a única tela do coach que traz o próprio
     `<style>` embutido (coach-editor.js, pra furar o container de ~460px do
     celular), e por isso nunca recebeu o recuo que reserva a barra lateral.
     Medido antes: barra fixa em 0→236, conteúdo do editor em 178→1102 — os
     primeiros **58px do editor ficavam ESCONDIDOS atrás da barra**, e como o
     `#edRoot` se centraliza (`margin:0 auto`) na janela INTEIRA em vez do
     espaço que sobra, tudo era empurrado pra esquerda e transbordava do
     outro lado. Quanto mais estreita a janela, pior: é o "vazamento" que o
     dono viu no print.
     Não precisou de `!important`: `body.is-coach #editorView` tem uma classe
     a mais que o `#editorView` do estilo embutido, e especificidade decide.
     E o padding só vale aqui dentro da media query — no celular o editor
     continua com o dele, que é o que faz a versão tela-por-tela. */
  body.is-coach #coachTodayView,
  body.is-coach #coachAthletesView,
  body.is-coach #libraryView,
  body.is-coach #agendaView,
  body.is-coach #coachChatView,
  body.is-coach #editorView {
    max-width: none; width: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 26px) 30px 36px
             calc(var(--coach-side-w) + 30px);
  }
  /* o cabeçalho de identidade da tela HOJE some: quem identifica passa a ser
     a barra lateral, e duas identidades na mesma tela é ruído.
     `!important` é necessário e não é preguiça: o elemento carrega
     `style="display:flex"` inline (coach-today.js), e estilo inline vence
     folha. Ou isto, ou tirar o display do template — que é justamente o que
     mantém o cabeçalho funcionando no celular. */
  body.is-coach .coach-today-head { display: none !important; }

  /* ── HOJE: trabalho à esquerda, contexto à direita ───────────────────── */
  body.is-coach .coach-today-cols {
    display: grid; grid-template-columns: minmax(0,1fr) 380px;
    gap: 22px; align-items: start;
  }
  body.is-coach .coach-today-side { display: flex; flex-direction: column; gap: 22px; }

  /* ── ALUNOS: mestre-detalhe (a mesma ideia do editor) ────────────────── */
  body.is-coach .coach-ath-split {
    display: grid; grid-template-columns: 330px minmax(0,1fr);
    gap: 0; align-items: start;
  }
  body.is-coach .coach-ath-list { border-right: 1px solid var(--au-line); padding-right: 20px; }
  body.is-coach .coach-ath-detail { padding-left: 24px; min-width: 0; }
  /* com os dois lados na tela, "voltar" não tem pra onde voltar */
  body.is-coach .coach-ath-back { display: none; }

  /* ── BIBLIOTECA: a lista à esquerda, o exercício aberto à direita ────
     [dono 06/09, "implemente A"] — o mesmo desenho da aba ALUNOS. No
     desktop os dois lados estão na tela, então a seta de voltar do painel
     não tem pra onde voltar (a mesma regra da `.coach-ath-back`). */
  /* [dono 21/09] AS DUAS COLUNAS ROLAM CADA UMA NO SEU LUGAR: "para editar
     um exercício, eu preciso dar o scroll em toda a biblioteca". Quem rolava
     era a PÁGINA, e o painel (preso no topo por sticky) é mais alto que a
     tela: o APAGAR nascia em 850–894 numa tela de 800, e o único jeito de
     chegar nele era rolar até a LISTA acabar. Agora a tela tem a altura da
     janela, o cabeçalho (abas, contador, "Novo exercício") fica parado, e a
     lista e o painel rolam sozinhos. Vale pras duas sub-abas — o remendo de
     17/09 que fazia isso só pra ficha da avaliação (`:has(.av-ficha)`)
     morreu aqui dentro. Como a tela é refeita por innerHTML a cada toque, a
     rolagem das duas é guardada e devolvida (libraryGuardarRolagem,
     coach-library.js) — senão todo toque devolveria a lista ao topo.
     No celular nada disto vale: lá o painel VIRA a tela e quem rola é a
     página. */
  body.is-coach #libraryView { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  /* [dono 06/10 · biblioteca v2] "olha o tanto de espaço em branco": a LISTA
     (um nome e uma seta) deixou de atravessar a tela — 520px no máximo — e
     quem cresce é o PAINEL, que ganha duas colunas (ported.css) */
  body.is-coach .library-desk {
    display: grid; grid-template-columns: minmax(340px, min(520px, 32vw)) minmax(0,1fr);
    grid-template-rows: minmax(0,1fr);
    gap: 28px; align-items: stretch; margin-top: 4px;
    flex: 1 1 auto; min-height: 0;
  }
  /* o respiro de 4px dos lados é o anel de foco das linhas, que a caixa de
     rolagem cortaria rente à borda */
  body.is-coach .library-lista,
  body.is-coach .library-painel-col {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 4px 24px;
  }
  body.is-coach .library-painel-voltar { display: none; }

  /* ── AGENDA: a semana inteira em sete colunas ────────────────────────── */
  body.is-coach .agenda-wrap { max-width: none; padding-bottom: 36px; }
  body.is-coach .ag-week-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 10px;
    align-items: start;
  }
  body.is-coach .ag-week-day {
    border: 1px solid var(--au-line); border-radius: 12px; padding: 12px 10px;
    display: flex; flex-direction: column; gap: 8px; min-height: 160px;
  }
  body.is-coach .ag-week-day.is-today { border-color: var(--au-gold); }
  body.is-coach .ag-week-head {
    font: 400 var(--au-fs-mono-xs) "Space Mono", monospace;
    letter-spacing: .14em; text-transform: uppercase; color: var(--au-faint);
  }
  body.is-coach .ag-week-day.is-today .ag-week-head { color: var(--au-gold); }
  body.is-coach .ag-week-slot {
    display: flex; flex-direction: column; gap: 2px; text-align: left;
    width: 100%; min-height: 44px; padding: 8px;
    border: 1px solid var(--au-line-soft); border-radius: 9px;
    background: none; cursor: pointer;
  }
  body.is-coach .ag-week-slot:active { transform: scale(.97); }
  body.is-coach .ag-week-slot.ocupada { border-color: rgba(201,162,74,.35); }
  body.is-coach .ag-week-slot.cancelada { opacity: .55; text-decoration: line-through; }
  /* [20/08] reserva que ainda espera o pagamento: cobre, a cor de atenção
     do app. Sem isto ela ficava idêntica a uma sessão paga na grade. */
  body.is-coach .ag-week-slot.esperando { border-color: rgba(217,154,108,.55); }
  body.is-coach .ag-week-slot.esperando .ag-week-quem { color: var(--au-orange); }
  body.is-coach .ag-week-slot.livre { border-style: dashed; }
  /* [dono 08/10] ocupado no calendário "Trabalho": riscado em luminância, sem
     toque (é um <div>), sem nome — o coach sabe o que é */
  body.is-coach .ag-week-slot.externo {
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 6px, rgba(255,255,255,.015) 6px 12px);
    cursor: default; color: var(--au-muted);
  }
  body.is-coach .ag-week-slot.externo:active { transform: none; }
  body.is-coach .ag-week-slot.externo .ag-week-hora { color: var(--au-muted); }
  body.is-coach .ag-week-hora {
    font: 400 var(--au-fs-xs) "Space Mono", monospace; color: var(--au-text-soft);
    font-variant-numeric: tabular-nums;
  }
  body.is-coach .ag-week-slot.livre .ag-week-hora { color: var(--au-faint); }
  body.is-coach .ag-week-quem {
    font: 300 var(--au-fs-xs) Sora, sans-serif; color: var(--au-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.is-coach .ag-week-slot.livre .ag-week-quem { color: var(--au-faint); }
  body.is-coach .ag-week-empty {
    font: 300 var(--au-fs-xs) Sora, sans-serif; color: var(--au-faint);
  }
  /* a fita de dias e a lista de UM dia são gesto de dedo: no desktop a grade
     as substitui, senão a mesma informação apareceria duas vezes na tela. */
  /* `!important` na fita: o container carrega `style="display:flex"` inline
     (agenda.js), e inline vence folha. */
  body.is-coach .ag-daystrip { display: none !important; }
  body.is-coach .ag-day-list { display: none; }
}

/* [fatia 2 do HUB · 20/08] AS DUAS COLUNAS DE DENTRO DE UMA PORTA. No
   desktop a semana fica ao lado da constância, e o corpo ao lado da lista de
   dor — que é o ponto do hub: ver as coisas juntas. No estreito elas
   empilham, porque duas colunas de 160px não são duas colunas, são duas
   tiras ilegíveis. */
.coach-hub-duas { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 16px; }
@media (min-width: 860px) {
  .coach-hub-duas { grid-template-columns: 1fr 1fr; gap: 26px; }
}
.coach-hub-corpo { margin-top: 2px; }

/* [fatia 1 do HUB · 20/08] A FAIXA DE NÚMEROS DA ABERTURA. Quatro colunas
   cabem no desktop do coach; num celular de 390px elas viram tiras de 78px e
   o rótulo ("TREINOS DA SEMANA") não tem onde caber. Duas por duas no
   estreito. Está aqui e não inline na tela porque media query não existe em
   atributo `style` — e porque o contrato visual manda o compartilhado morar
   no CSS. */
.coach-ab-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 860px) { .coach-ab-nums { grid-template-columns: repeat(4, 1fr); } }

/* [dono 2026-09-02] VISTO × NÃO VISTO na linha do tempo da abertura.
   Não visto: ponto ouro + texto claro. Visto: sem ponto, texto apagado e
   ícone a meia-luz. As duas caras moram AQUI (classe), e não no `style` da
   linha — é o mesmo sinal da caixa de mensagens, e um sinal só se lê num
   lugar só. */
.coach-ev {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 11px 2px; cursor: pointer; min-height: 44px;
}
.coach-ev-pt {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--au-gold); box-shadow: var(--au-glow-gold);
}
.coach-ev-ico { flex: none; display: flex; }
.coach-ev-txt {
  display: block; font: 400 var(--au-fs-m) 'Sora'; color: var(--au-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coach-ev--visto .coach-ev-pt { visibility: hidden; }   /* some, mas mantém o alinhamento */
.coach-ev--visto .coach-ev-txt { font-weight: 300; color: var(--au-muted); }
.coach-ev--visto .coach-ev-ico { opacity: .5; }

/* A linha aberta da lista de alunos (a semana ou um aluno): mesmo fundo da
   aba acesa da lateral. Só faz diferença no desktop, onde os dois lados
   convivem — no celular a lista some quando há aluno aberto. */
.coach-ath-row.on { background: rgba(255,255,255,.05); border-radius: 10px; }

/* Abaixo de 860px a grade da semana não existe — a agenda continua sendo a
   fita + a lista do dia, que é o que cabe no celular. */
@media (max-width: 859px) {
  .ag-week-grid { display: none; }
  /* No celular ALUNOS continua sendo duas telas: a lista OU a ficha. O DOM é
     o mesmo dos dois tamanhos; muda só quem aparece. */
  .coach-ath-split.tem-aberto .coach-ath-list { display: none; }
  /* [02/09] A linha "A semana dos seus alunos" é a volta do DESKTOP. Aqui
     a semana já está empilhada logo abaixo da lista, e a seta do hub
     volta — a linha só repetiria o que a tela já mostra. */
  .coach-ath-semana { display: none; }
  /* [dono 2026-08-20 · fatia 1 do HUB] SEM ALUNO ABERTO, O CELULAR MOSTRA OS
     DOIS, EMPILHADOS: a lista em cima (é a ferramenta de trabalho, e no
     celular ela não pode sair da primeira tela) e a abertura logo abaixo.
     A linha de baixo escondia o lado direito quando nada estava aberto —
     o que fazia sentido quando ele era a frase "escolha um aluno", e passou
     a esconder a tela inteira que o dono pediu.
     Empilhar em vez de criar uma variante de celular é decisão de regra 11:
     duas montagens do mesmo painel divergem no primeiro retoque. */
  .coach-ath-split:not(.tem-aberto) { display: flex; flex-direction: column; }
  .coach-ath-split:not(.tem-aberto) .coach-ath-detail { border-left: none; padding-left: 0; }
  .coach-ath-split:not(.tem-aberto) .coach-ath-list { margin-top: 22px; }
}

/* ══ [dono 2026-09-02 · "implemente A + 2b" · REFEITO em 04/09] ═══════════
   A PORTA CICLO EM DUAS SUB-ABAS (dono 04/09: "ela está muito densa, crie
   sub-abas para mostrar o ciclo de treinamento e para montar o treino").

   VISÃO GERAL (.cic-visao) = ler: gráfico + carga interna à esquerda,
   grade + volume à direita. TREINO (.cic-treino) = escrever: a faixa da
   semana e os painéis REAIS do editor, hospedados, com a largura inteira.
   Até 04/09 as duas coisas dividiam a mesma tela (`.cic-duas`, oito blocos
   de uma vez) e no celular a segunda coluna não existia — o CTA "Editar
   esta semana" levava pra outra tela. O CTA morreu: dentro da sub-aba o
   editor não disputa espaço com nada e cabe em qualquer largura. */

/* VISÃO GERAL: uma coluna por padrão (celular, hub estreito); duas quando
   o HUB tem largura. QUEM DECIDE É A LARGURA DO HUB, não a da janela — o
   fiscal pegou isto em 02/09: em 1280px com a lista aberta o hub tem 630px
   e as OITO barras do gráfico caíam pra 23px (ALVO<44). Duas colunas
   iguais só a partir de 784px (≥380px pra cada uma). */
.coach-hub-corpo { container-type: inline-size; container-name: hubcorpo; }
.cic-visao { display: flex; flex-direction: column; gap: 18px; }
.cic-visao .cic-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* [dono 07/10, "implemente A"] as DUAS colunas morreram: o OVERVIEW é uma
   coluna só, em qualquer largura — as pistas por modalidade precisam da
   largura inteira, e o dia a dia da semana mora no cartão dela. */

/* TREINO: o editor hospedado existe em QUALQUER largura. O CSS do editor
   (coach-editor-estilo.js) decide "3 colunas ou 1 por vez" pela largura da
   JANELA (1180px); hospedado, quem decide é a largura do HOSPEDEIRO
   (container query): apertado = um painel por vez com a seta de voltar (o
   mesmo comportamento que o editor já tem no celular); largo = os três
   lado a lado. O `!important` é obrigatório: a regra do editor esconde a
   seta com `!important` a partir de 1180px, e sem ele a volta sumiria
   justamente onde ela é o único caminho. */
.cic-editor { display: block; min-width: 0; container-type: inline-size; container-name: cicedit; }
.cic-editor #edRoot { max-width: none; }
.cic-editor #edRoot .ed-cols { grid-template-columns: 1fr; }
.cic-editor #edRoot .ed-pane { min-height: 0; }
.cic-editor #edRoot[data-pane] .ed-pane { display: none; }
.cic-editor #edRoot[data-pane="days"] .ed-pane-days,
.cic-editor #edRoot[data-pane="session"] .ed-pane-session,
.cic-editor #edRoot[data-pane="adjust"] .ed-pane-adjust { display: flex; }
.cic-editor #edRoot .ed-mob-back { display: inline-flex !important; }
@container cicedit (min-width: 820px) {
  .cic-editor #edRoot .ed-cols { grid-template-columns: 230px minmax(0, 1fr) 300px; }
  .cic-editor #edRoot[data-pane] .ed-pane { display: flex; }
  .cic-editor #edRoot .ed-pane { min-height: 520px; }
  .cic-editor #edRoot .ed-mob-back { display: none !important; }
}
/* [dono 07/10 · D] a fila das sub-abas + semana mora DENTRO do .cic-editor
   (coach-ciclo.js): o vão que o .cic dava entre ela e o editor vira margem.
   A coluna da semana na faixa dos dias (`.ed-semana`, coach-editor-paineis.js)
   nasce escondida; quem a liga é a regra de largura logo abaixo. */
.cic-editor > .cic-topo { margin-bottom: 18px; }
.cic-editor #edRoot .ed-semana { display: none; }
/* D · "deixa apenas escrito week 1 … introduzir os dias da semana na mesma
   caixa". Só com largura pra isso: 200 da coluna + 230 dos diários + 7 dias
   de ~100px. Abaixo (o hub com a lista de alunos aberta), a fila de cima
   continua como era. A MESMA regra esconde a fila e mostra a coluna. */
@container cicedit (min-width: 1150px) {
  .cic-editor > .cic-topo { display: none; }
  .cic-editor #edRoot[data-colb] .ed-semana {
    display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
    flex: 0 0 200px; min-width: 0; padding: 0 6px 0 2px; margin-right: 2px;
    border-right: 1px solid var(--au-line);
  }
  .cic-editor #edRoot[data-colb] .ed-semana .cic-abas { align-self: stretch; }
  .cic-editor #edRoot[data-colb] .ed-semana .cic-faixa-so {
    border: 0; background: none; padding: 0; gap: 4px; justify-content: space-between;
  }
  .cic-editor #edRoot[data-colb] .ed-semana .cic-faixa-so .cic-faixa-t { align-items: center; text-align: center; }
  .cic-editor #edRoot[data-colb] .ed-semana .ed-ghost { width: auto; align-self: stretch; }
  .cic-editor #edRoot[data-colb] .ed-dias-pe { display: none !important; }
}

/* com a largura inteira do hub em tela cheia (≥1100px) os painéis ganham
   folga — o de AJUSTE, onde vivem carga e reps, é o que mais ganha. */
@container cicedit (min-width: 1100px) {
  .cic-editor #edRoot .ed-cols { grid-template-columns: 300px minmax(0, 1fr) 380px; }
}

/* 2b · TELA CHEIA: a lateral vira um TRILHO de 56px (os quatro destinos
   como ícones, os contadores, a Conta no pé) e a lista de alunos some — o
   nome do aluno no cabeçalho do hub vira o seletor (coach-hub.js). Só
   existe no desktop: no celular a lateral já é a barra de baixo. */
#coachNav .coach-side-ico { display: none; }
.hub-cheia-btn, .hub-sel { display: none; }
@media (min-width: 860px) {
  body.is-coach .hub-cheia-btn { display: inline-flex; }
  /* [dono 16/10 · montador v5 "bancada"] MONTAR TREINO VESTE A TELA CHEIA
     sozinho: com a sub-aba TREINO aberta (.cic-editor na tela ALUNOS à
     vista) a lateral vira trilho e a lista de alunos cede o lugar ao
     seletor "‹ nome ▾ ›" — a tela é trabalho, não navegação. É CSS (:has)
     de propósito: uma classe posta por JS ficaria presa no body ao trocar
     de tela. O botão TELA CHEIA some aqui: ali ele não mudaria nada. */
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) .hub-cheia-btn { display: none; }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor),
  body.is-coach.coach-cheia { --coach-side-w: 56px; }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) #coachNav,
  body.is-coach.coach-cheia #coachNav { padding: 26px 6px calc(18px + env(safe-area-inset-bottom)); align-items: center; }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) #coachNav .coach-side-id,
  body.is-coach.coach-cheia #coachNav .coach-side-id { margin-bottom: 20px; }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) #coachNav .coach-side-id > div,
  body.is-coach.coach-cheia #coachNav .coach-side-id > div { display: none; }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) #coachNav .nav-btn,
  body.is-coach.coach-cheia #coachNav .nav-btn {
    width: 44px; height: 44px; padding: 0; justify-content: center; position: relative;
  }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) #coachNav .nav-btn::before,
  body.is-coach.coach-cheia #coachNav .nav-btn::before { display: none; }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) #coachNav .coach-side-label,
  body.is-coach.coach-cheia #coachNav .coach-side-label { display: none; }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) #coachNav .coach-side-ico,
  body.is-coach.coach-cheia #coachNav .coach-side-ico { display: block; width: 20px; height: 20px; }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) #coachNav .coach-side-count,
  body.is-coach.coach-cheia #coachNav .coach-side-count {
    position: absolute; top: 3px; right: 4px; margin: 0; font-size: 8px;
  }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) #coachNav .coach-side-foot,
  body.is-coach.coach-cheia #coachNav .coach-side-foot {
    justify-content: center; padding: 10px 0 0; width: 44px; min-height: 54px;
  }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) #coachNav .coach-side-foot > span,
  body.is-coach.coach-cheia #coachNav .coach-side-foot > span { display: none; }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) #coachNav .coach-side-foot .coach-side-ico,
  body.is-coach.coach-cheia #coachNav .coach-side-foot .coach-side-ico { display: block; width: 20px; height: 20px; }
  /* [dono 03/09 · "não existe um caminho direto para acessar os meus
     atletas"] A LISTA SÓ CEDE LUGAR COM ALUNO ABERTO (.tem-aberto): aí o
     seletor "‹ nome ▾ ›" do cabeçalho do hub a substitui. Sem aluno aberto
     não há cabeçalho de hub, logo não há seletor — e a regra antiga escondia
     a lista assim mesmo: a abertura ocupava a tela inteira e não havia porta
     nenhuma pros alunos (medido no print dele: trilho + abertura, zero nomes
     tocáveis). Esconder sem pôr nada no lugar é beco, não tela cheia. */
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) .coach-ath-split.tem-aberto,
  body.is-coach.coach-cheia .coach-ath-split.tem-aberto { grid-template-columns: minmax(0, 1fr); }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) .coach-ath-split.tem-aberto .coach-ath-list,
  body.is-coach.coach-cheia .coach-ath-split.tem-aberto .coach-ath-list { display: none; }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) .coach-ath-split.tem-aberto .coach-ath-detail,
  body.is-coach.coach-cheia .coach-ath-split.tem-aberto .coach-ath-detail { padding-left: 0; }
  /* o seletor de aluno no cabeçalho do hub: ‹ nome ▾ › */
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) .hub-sel,
  body.is-coach.coach-cheia .hub-sel { display: flex; align-items: center; gap: 2px; min-width: 0; }
  body.is-coach:has(#coachAthletesView:not(.hidden) .cic-editor) .hub-sel-nome-fixo,
  body.is-coach.coach-cheia .hub-sel-nome-fixo { display: none; }
}
.hub-sel-seta {
  flex: none; width: 44px; height: 44px; border: none; background: none; cursor: pointer;
  color: var(--au-text-soft); font-size: 20px; display: grid; place-items: center; border-radius: 10px;
}
.hub-sel-seta[disabled] { opacity: .3; cursor: default; }
.hub-sel-seta:active { transform: scale(.92); }
.hub-sel-nome {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0;
  padding: 0 10px 0 4px; border: none; background: none; cursor: pointer; border-radius: 10px;
  font: 200 var(--au-fs-t-s) 'Sora', sans-serif; color: var(--au-text); text-align: left;
}
.hub-sel-nome > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-sel-nome i { font-style: normal; color: var(--au-gold); font-size: 12px; flex: none; }
.hub-sel-nome:active { transform: scale(.97); }
.hub-sel-wrap { position: relative; min-width: 0; flex: 1; }
/* o popover: a MESMA lista, na mesma ordem, por cima do hub */
.hub-sel-pop {
  position: absolute; left: 0; top: 52px; z-index: 30; width: min(340px, 90vw);
  background: var(--au-surface); border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 8px 10px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9);
}
.hub-sel-pop .coach-ath-row { border-radius: 10px; padding: 8px 6px; }
.hub-sel-pop .coach-ath-row.on { background: rgba(255,255,255,.05); }
.hub-sel-pop-rod { font: 300 var(--au-fs-xs) 'Sora', sans-serif; color: var(--au-faint); margin-top: 6px; text-align: center; }


/* [dono 03/09] AS ABAS DA LISTA DE ALUNOS — PLANO ATIVO × SEM PLANO. Dois
   chips de 44px (regra 7); o aceso em ouro (é o "agora" da lista). Só
   luminância no resto, como manda a régua de cor. */
.coach-abas { display: flex; gap: 8px; margin-top: 10px; }
.coach-aba { flex: 1; min-height: 44px; padding: 0 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 100px; background: none; color: var(--au-muted); font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .12em; cursor: pointer; transition: transform var(--au-dur-press) var(--au-ease); }
.coach-aba.on { border-color: rgba(201,162,74,.55); color: var(--au-gold); }
.coach-aba:active { transform: scale(.97); }


/* ═══ A PORTA AVALIAÇÕES DO HUB DO ALUNO [dono 17/09/2026, etapa 3 do
   PLANO-AVALIACOES.md] ════════════════════════════════════════════════════
   Lista das avaliações registradas, escolher o teste e o formulário com o
   resultado ao vivo. Vale no celular e no desktop (fora de media query). Cor
   e escala só por token; campo de digitar a 17px (o iPhone não dá zoom);
   cobre só no que é atenção (classificação de risco, assimetria relevante,
   teste positivo, erro). */
.aval { padding: 6px 0 24px; }
.aval-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 10px 0 6px; }
.aval-registrar { width: auto; padding: 0 22px; }
.aval-salvo { font: 300 var(--au-fs-sm) 'Sora', sans-serif; color: var(--au-green); margin: 6px 0; }
.aval-nota { font: 300 var(--au-fs-sm)/1.5 'Sora', sans-serif; color: var(--au-muted); margin: 8px 0; }
.aval-regs { margin-top: 6px; }
.aval-reg { padding: 12px 2px; border-bottom: 1px solid var(--au-line-soft); }
.aval-reg-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.aval-reg-nome { min-width: 0; font: 300 var(--au-fs-m) 'Sora', sans-serif; color: var(--au-text); }
.aval-reg-data { flex: none; font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--au-faint); }
.aval-reg-res { margin-top: 3px; font: 300 var(--au-fs-sm)/1.45 'Sora', sans-serif; color: var(--au-muted); }
.aval .aval-alerta { color: var(--au-orange); }
.aval-titulo { margin: 6px 0 2px; font: 300 var(--au-fs-t) 'Sora', sans-serif; color: var(--au-text); }
.aval-meta { margin: 0 0 10px; font: 300 var(--au-fs-sm) 'Sora', sans-serif; color: var(--au-muted); }
.aval-grupo { margin-top: 16px; }
.aval-grupo-t { margin: 0 0 4px; font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--au-muted); }
.aval-teste { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; padding: 9px 2px; background: none; border: none; border-bottom: 1px solid var(--au-line-soft); color: var(--au-text); text-align: left; cursor: pointer; transition: transform var(--au-dur-press) var(--au-ease); }
.aval-teste:active { transform: scale(.99); }
.aval-teste-nome { font: 300 var(--au-fs-m) 'Sora', sans-serif; }
.aval-teste-sub { font: 300 var(--au-fs-xs) 'Sora', sans-serif; color: var(--au-muted); }
.aval-num { margin-right: 2px; font: 400 var(--au-fs-mono) 'Space Mono', monospace; color: var(--au-faint); }
.aval-contra { margin: 10px 0 6px; }
.aval-contra-t { margin: 0 0 6px; font: 300 var(--au-fs-sm) 'Sora', sans-serif; color: var(--au-text-soft); }
.aval .aval-marcar { margin-top: 0; border-top: none; }
.aval-campos { min-width: 0; margin: 0; padding: 0; border: none; transition: opacity var(--au-dur-press) var(--au-ease); }
.aval-campos[disabled] { opacity: .45; }
.aval-geral { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; margin-top: 8px; }
.aval-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 0; }
.aval-lbl { font: 300 var(--au-fs-sm) 'Sora', sans-serif; color: var(--au-text-soft); }
.aval-lbl em { font-style: normal; color: var(--au-faint); }
.aval-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--au-line); border-radius: 10px; background: var(--au-surface); color: var(--au-text); font: 300 var(--au-fs-xl) 'Sora', sans-serif; }
.aval-input:focus { outline: none; border-color: var(--au-text-soft); }
.aval-tentativas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aval-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.aval-opcao { transition: transform var(--au-dur-press) var(--au-ease); }
.aval-opcao:active { transform: scale(.97); }
.aval-erro { font: 300 var(--au-fs-xs) 'Sora', sans-serif; color: var(--au-orange); }
.aval-erro:empty { display: none; }
.aval-lados { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--au-line-soft); }
.aval-lado > .au-kicker-soft { display: block; margin: 6px 0 2px; }
.aval-resultado { margin: 16px 0 10px; padding: 14px 16px; border: 1px solid var(--au-line); border-radius: 12px; background: var(--au-surface); }
.aval-res-lado { margin-top: 8px; }
.aval-res-l { margin: 4px 0 0; font: 300 var(--au-fs-m)/1.45 'Sora', sans-serif; color: var(--au-text); }
.aval-ref { list-style: none; margin: 6px 0 0; padding: 0; }
.aval-ref li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--au-line-soft); font: 300 var(--au-fs-sm) 'Sora', sans-serif; color: var(--au-text-soft); }
.aval-ref li b { font-weight: 400; color: var(--au-text); }
.aval-aviso { margin: 10px 0 0; font: 300 var(--au-fs-m)/1.45 'Sora', sans-serif; color: var(--au-orange); }
.aval-erro-geral { display: block; margin: 0 0 8px; }
.aval-salvar { width: 100%; }
.aval-instrucao { margin: 4px 0 0; }
/* [etapa 4, 17/09] o histórico: a linha de um teste, a evolução e os cartões
   da linha do tempo. APAGAR é cobre (destrói); editar é o link de sempre. */
.aval-linha-teste .aval-reg-topo { width: 100%; }
.aval-linha-teste .aval-reg-res { margin-top: 2px; }
.aval-evolucao { margin: 16px 0 6px; padding: 14px 16px; border: 1px solid var(--au-line); border-radius: 12px; background: var(--au-surface); }
.aval-evo li { align-items: baseline; }
.aval-evo li span { flex: 1; min-width: 0; }
.aval-evo li em { flex: none; min-width: 52px; text-align: right; font-style: normal; font-weight: 300; color: var(--au-muted); }
.aval-cartoes { margin-top: 10px; }
.aval-cartao { padding: 14px 2px 6px; border-bottom: 1px solid var(--au-line-soft); }
.aval-valores { margin: 4px 0 0; font: 300 var(--au-fs-m)/1.45 'Sora', sans-serif; color: var(--au-text-soft); }
.aval-cartao-res { margin-top: 4px; }
.aval-cartao-acoes { display: flex; gap: 14px; }
.aval .aval-apagar { color: var(--au-orange); margin-left: auto; }
.aval-editando { margin: 0 0 8px; font: 300 var(--au-fs-sm) 'Sora', sans-serif; color: var(--au-muted); }

/* [dono 29/09] "Apagar aluno" no fim da porta FICHA (coach-hub-apagar.js).
   Separado da ficha por uma linha e espaço de sobra: é a única ação da porta
   que não tem volta, e não pode parecer mais um bloco de dados. */
.coach-hub-apagar{ margin-top:32px; padding-top:20px; border-top:1px solid var(--au-line) }
.coach-hub-apagar-nota{ margin:10px 2px 0; font:300 var(--au-fs-xs)/1.5 'Sora'; color:var(--au-faint); text-align:center }

/* OS TREINOS DIÁRIOS na VISÃO GERAL [dono 05/10/2026] — a constância dos
   últimos 7 dias (js/screens/coach-ciclo-diarios.js). Verde = concluído; a
   borda de ouro é o "agora" (hoje). */
.cic-diarios { border: 1px solid var(--au-line); border-radius: 14px; padding: 14px 16px; }
.cic-diario { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 14px; }
.cic-diario + .cic-diario { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--au-line); }
.cic-diario-esq { min-width: 0; }
.cic-diario-nome { font: 400 var(--au-fs-m) 'Sora', sans-serif; color: var(--au-text); overflow-wrap: anywhere; }
.cic-diario-dias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cic-diario-d { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; color: var(--au-muted); }
.cic-diario-d b { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--au-line); display: grid; place-items: center; font-size: 13px; font-weight: 400; color: var(--au-green); }
.cic-diario-d b.f { border-color: var(--au-green); }
.cic-diario-d b.hoje { border-color: var(--au-gold); }
.cic-diario-num { flex: none; text-align: right; }
.cic-diario-num .n { font: 200 2.125rem 'Sora', sans-serif; color: var(--au-text); }
.cic-diario-num .de { font: 300 var(--au-fs-l) 'Sora', sans-serif; color: var(--au-muted); }

/* ══ [dono 06/10/2026 · "implemente" o v4] A PÁGINA NÃO ROLA NO MONTADOR ══
   "Essa tela está muito desorganizada… limitar a rolagem da página" —
   mockups/montar-treino-v4-sem-rolagem.html. Medido antes (1440×800, tela
   cheia): 554px de cabeçalho antes do 1º exercício e uma página de 1552px;
   rolar pra ver a biblioteca levava o treino junto pra fora.
   Agora, com o CICLO › TREINO aberto no Mac, a tela tem a altura da JANELA
   e CADA CAIXA rola sozinha (treino, biblioteca, ajuste, carga). Quem diz
   "montador aberto" é o próprio DOM (`:has(.cic-editor)`), não uma classe
   que alguém precisaria lembrar de pôr e tirar. Abaixo de 860px de janela
   (o celular) nada muda: a página rola como sempre.
   E SÓ COM ALTURA (≥ 680px): medido em 1000 × 590, cabeçalho + faixa dos
   dias deixavam 42px pras caixas — travada, a tela ficava inútil. Abaixo
   disso a página volta a rolar (com o cabeçalho já enxuto). */
@media (min-width: 860px) and (min-height: 680px) {
  body.is-coach #coachAthletesView:has(.cic-treino .cic-editor) {
    height: 100dvh; box-sizing: border-box; overflow: hidden;
  }
  body.is-coach .coach-ath-split:has(.cic-treino .cic-editor) {
    flex: 1 1 auto; height: 100%; min-height: 0; align-items: stretch;
  }
  body.is-coach .coach-ath-split:has(.cic-treino .cic-editor) .coach-ath-list { overflow-y: auto; min-height: 0; }
  body.is-coach .coach-ath-detail:has(.cic-treino .cic-editor) { display: flex; flex-direction: column; min-height: 0; }
  body.is-coach .coach-ath-detail:has(.cic-treino .cic-editor) > * { flex: none; }
  body.is-coach .coach-ath-detail:has(.cic-treino .cic-editor) > .coach-hub-corpo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.is-coach .cic-treino:has(.cic-editor) { flex: 1 1 auto; min-height: 0; }
  body.is-coach .cic-treino > .cic-editor { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.is-coach .cic-treino > .cic-editor > #edRoot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.is-coach .cic-treino > .cic-editor > #edRoot > * { flex: none; }
  body.is-coach .cic-treino > .cic-editor > #edRoot > .ed-cols { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  /* cada caixa rola sozinha; a faixa dos dias (no largo) não */
  /* barra fina: a clássica (Mac com mouse) comia 15px de cada caixa e
     empurrava o "Weigh-in before" pra linha de baixo (medido) */
  body.is-coach .cic-treino > .cic-editor #edRoot .ed-pane { min-height: 0 !important; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
  body.is-coach .cic-treino > .cic-editor #edRoot .ed-pane-days { overflow: visible; }
  /* a biblioteca: busca e filtros parados, só a LISTA rola.
     [dono 06/10, "eu nem consigo acessar o nome dos exercícios"] A LISTA TEM
     PISO: nunca menos de ~5 linhas (300px). Se o topo e o rodapé não
     couberem junto, quem rola é a caixa inteira — em vez de a lista ser
     esmagada a ~20px, que foi o print dele. */
  body.is-coach .cic-treino > .cic-editor #edRoot .ed-pane-busca { overflow-y: auto; }
  body.is-coach .cic-treino > .cic-editor #edRoot .ed-pane-busca .edlib-list { max-height: none; min-height: 300px; flex: 1 1 auto; }
  /* …e o "Add N" fica PRESO no pé da caixa: com a caixa rolando, ele não pode
     ir junto pra baixo da dobra */
  body.is-coach .cic-treino > .cic-editor #edRoot .ed-pane-busca [data-edlib-pe-slot] { position: sticky; bottom: -16px; z-index: 2; background: #0b0a08; margin: 0 -15px -16px; padding: 10px 15px 16px; box-shadow: 0 -1px 0 rgba(255,255,255,.06); }
  /* o treino: o nome fica parado em cima enquanto a lista rola */
  body.is-coach .cic-treino > .cic-editor #edRoot .ed-pane-session > .ed-titrow {
    position: sticky; top: -16px; z-index: 2; background: inherit; margin: -16px -15px 0; padding: 16px 15px 6px;
  }
}

/* [dono 06/10 · montador v4] O CABEÇALHO DO HUB EM UMA LINHA: quem + as
   portas, quando o hub tem largura (o cabeçalho é o MESMO em todas as
   portas — decisão antiga, mantida). Abaixo disso, as duas filas de antes.
   Sem os ícones nessa linha: o rótulo já diz o que é cada porta. */
body.is-coach .coach-ath-detail { container-type: inline-size; container-name: hubdet; }
@container hubdet (min-width: 1150px) {
  .hub-topo { display: flex; align-items: center; gap: 6px 16px; border-bottom: 1px solid var(--au-line); }
  /* `!important`: o cabeçalho traz `display:flex` inline (coach-hub.js) */
  .hub-topo > .hub-cab { display: contents !important; }
  .hub-topo > .hub-cab > div { flex: 0 1 auto !important; }
  .hub-topo > .au-tabs-ico { order: 1; flex: 1 1 auto; min-width: 0; border-bottom: 0; }
  .hub-topo > .hub-cab > [data-hub-creditos], .hub-topo > .hub-cab > .hub-cheia-btn { order: 2; }
  .hub-topo .au-tab-ico { min-height: 52px; min-width: 0; padding: 0 12px; }
  .hub-topo .au-tab-ico svg { display: none; }
  .hub-topo .au-tab-ico .au-tab-pt { top: 10px; right: 4px; }
}

/* ── HISTÓRICO · as abas e as peças do gráfico por exercício ──────────────
   [dono 09/10] A aba BY EXERCISE (lista | detalhe) morreu; ficam as abas
   (WORKOUTS · EXTERNAL LOAD · INTERNAL LOAD) e o que a linha aberta da tabela
   da EXTERNAL LOAD usa (o gráfico `.hx-graf`, a legenda, a tabela semana a
   semana). coach-hub-carga-externa.js. Fora do `body.is-coach`: o hub também
   abre no celular do coach. Cores: só tokens. */
.hx-abas { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.hx-aba { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--au-line); background: none; color: var(--au-muted); font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.hx-aba.on { color: var(--au-text); border-color: var(--au-text-soft); }
.hx-aba:active { transform: scale(.97); }
.hx-nota, .hx-vazio { font: 300 var(--au-fs-xs)/1.55 'Sora', sans-serif; color: var(--au-faint); }
.hx-vazio { font-size: var(--au-fs-m); color: var(--au-muted); padding: 18px 2px; }
.hx-graf { display: block; width: 100%; height: auto; }
.hx-eixo { stroke: var(--au-line); }
.hx-b-feito { fill: var(--au-text); fill-opacity: .55; }
.hx-b-presc { fill: none; stroke: var(--au-text-soft); stroke-width: 1.2; }
.hx-b-parcial { fill: var(--au-orange); fill-opacity: .55; }
.hx-b-plano { fill: none; stroke: var(--au-gold); stroke-width: 1.2; stroke-dasharray: 4 4; }
.hx-t-v, .hx-t-s { font: 300 11px 'Sora', sans-serif; fill: var(--au-muted); text-anchor: middle; }
.hx-t-s.agora { fill: var(--au-gold); }
.hx-t-v.sel { fill: var(--au-text); }
.hx-t-d { font: 300 10px 'Sora', sans-serif; fill: var(--au-faint); text-anchor: middle; }
.hx-grade { stroke: var(--au-line); stroke-dasharray: 2 4; }
.hx-sel { stroke: var(--au-gold); stroke-width: 2; }
.hx-t-y { font: 400 10px 'Space Mono', monospace; fill: var(--au-faint); }
.hx-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 300 var(--au-fs-xs) 'Sora', sans-serif; color: var(--au-muted); margin-top: 4px; }
.hx-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.hx-i-feito { background: var(--au-text); opacity: .55; }
.hx-i-presc { border: 1px solid var(--au-text-soft); }
.hx-i-parcial { background: var(--au-orange); opacity: .55; }
.hx-tab-wrap { overflow-x: auto; margin-top: 14px; scrollbar-color: var(--au-line) transparent; }
.hx-tab { width: 100%; border-collapse: collapse; }
.hx-tab th { font: 400 9px 'Space Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--au-faint); text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--au-line); font-weight: 400; white-space: nowrap; }
.hx-tab td { font: 300 var(--au-fs-s) 'Sora', sans-serif; color: var(--au-text-soft); text-align: right; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.05); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hx-tab th:first-child, .hx-tab td:first-child { text-align: left; }
.hx-tab td small { color: var(--au-faint); font-size: .85em; }
.hx-tab tr.at td { color: var(--au-orange); }
.hx-tab tr.at td:first-child, .hx-tab tr.at td:nth-child(n+4) { color: var(--au-text-soft); }
.hx-tab tr.agora td { color: var(--au-muted); }
.hx-tab tr.agora td:first-child { color: var(--au-gold); }
.hx-nota { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .hx-aba:active { transform: none; } }

/* ── [dono 15/10, "implemente a v2"] HISTÓRICO › EXTERNAL LOAD
   (coach-hub-carga-externa.js). Fora do `body.is-coach`: o hub abre no
   celular do coach. Dois quadros: o TOTAL (barras em luminância) e os
   CARTÕES de intensidade (linha cheia = feito, tracejada = prescrito).
   Cobre = feito abaixo de 90% ou não feito; ouro = só a semana escolhida (o
   "agora" desta peça). O gráfico da linha aberta é o `.hx-graf` (acima). */
.cex { margin-top: 18px; display: grid; gap: 16px; container-type: inline-size; container-name: cex; position: relative;
  /* nada deste bloco serve de âncora pra o navegador "corrigir" a rolagem (08/10) */
  overflow-anchor: none; }
.cex-quadro { padding: 16px 18px 14px; border: 1px solid var(--au-line); border-radius: 16px; background: var(--au-surface); min-width: 0; }
.cex-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.cex-k { display: block; }
.cex-nota { margin: 2px 0 14px; font: 300 var(--au-fs-xs)/1.5 'Sora', sans-serif; color: var(--au-faint); }
/* 1 · o total */
.cex-total { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 16px 36px; align-items: end; margin-top: 14px; }
.cex-quem-l { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-height: 44px; }
.cex-todos { min-height: 44px; min-width: 44px; padding: 0 6px; background: none; border: 0; color: var(--au-text-soft); cursor: pointer;
  font: 400 var(--au-fs-mono-s, 10px) 'Space Mono', monospace; letter-spacing: .18em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.cex-n { font: 200 var(--au-fs-hero, 52px)/1 'Sora', sans-serif; letter-spacing: -.02em; color: var(--au-text); font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.cex-n small { margin-left: 6px; font-size: var(--au-fs-sm); font-weight: 300; color: var(--au-muted); letter-spacing: 0; }
.cex-frase { margin: 0; font: 300 var(--au-fs-sm)/1.5 'Sora', sans-serif; color: var(--au-muted); }
.cex-frase b { font-weight: 400; color: var(--au-text-soft); }
.cex-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cex-dois b { display: block; font: 300 var(--au-fs-l) 'Sora', sans-serif; color: var(--au-text); font-variant-numeric: tabular-nums; }
.cex-dois .at b { color: var(--au-orange); }
.cex-graf-t { min-width: 0; }
.cex-cols, .cex-eixo { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); gap: 8px; }
.cex-cols { height: 150px; padding-top: 22px; align-items: end; }
.cex-col { position: relative; height: 100%; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: none; border: 0; cursor: pointer; }
.cex-col:active { transform: scale(.97); }
.cex-p { position: absolute; bottom: 0; left: 14%; right: 14%; border: 1px solid var(--au-line); border-radius: 4px; }
.cex-p.at { border-color: var(--au-orange); }
.cex-f { position: relative; width: 60%; border-radius: 4px; background: var(--au-text-soft); opacity: .85; }
.cex-f.at { background: var(--au-orange); opacity: 1; }
.cex-col.sel .cex-f { background: var(--au-text); opacity: 1; }
.cex-col.sel .cex-f.at { background: var(--au-orange); }
.cex-col-v { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0;
  font: 400 var(--au-fs-mono-xs, 10px) 'Space Mono', monospace; color: var(--au-text); }
.cex-col.sel .cex-col-v { opacity: 1; }
.cex-eixo span { padding-top: 6px; border-top: 2px solid transparent; text-align: center; white-space: nowrap; overflow: hidden;
  font: 400 var(--au-fs-mono-xs, 10px) 'Space Mono', monospace; color: var(--au-faint); }
.cex-eixo span.sel { color: var(--au-gold); border-top-color: var(--au-gold); }
/* 2 · os cartões (a grade é `dense`: a linha aberta ocupa a fileira de baixo
   e os cartões seguintes voltam a preencher a de cima) */
.cex-todos-l { display: inline-flex; align-items: center; gap: 2px; }
.cex-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-flow: row dense; gap: 12px; }
.cex-card { min-width: 0; padding: 4px 14px 10px; border: 1px solid var(--au-line); border-radius: 14px; transition: opacity 160ms cubic-bezier(.22,1,.36,1); }
.cex-card.fora { opacity: .4; }
.cex-card.aberto { border-color: var(--au-text-soft); }
.cex-c-topo { display: flex; align-items: center; margin-left: -12px; }
.cex-marca { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; cursor: pointer; }
.cex-marca:active { transform: scale(.97); }
.cex-marca i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--au-muted); display: flex; align-items: center; justify-content: center;
  font: 400 12px/1 'Sora', sans-serif; font-style: normal; color: var(--au-bg); }
.cex-marca[aria-checked="true"] i, .cex-marca[aria-checked="mixed"] i { background: var(--au-text); border-color: var(--au-text); }
.cex-marca[aria-checked="true"] i::after { content: "✓"; }
.cex-marca[aria-checked="mixed"] i::after { content: "–"; }
.cex-nome-b { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: 300 var(--au-fs-m) 'Sora', sans-serif; color: var(--au-text); overflow-wrap: anywhere; }
.cex-nome-b i { font-style: normal; color: var(--au-faint); flex: none; }
.cex-c-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.cex-c-num b { font: 300 var(--au-fs-xl) 'Sora', sans-serif; color: var(--au-text); font-variant-numeric: tabular-nums; }
.cex-sub { margin-left: 3px; font: 300 var(--au-fs-xs) 'Sora', sans-serif; color: var(--au-faint); }
.cex-sub.at { margin-left: 0; color: var(--au-orange); font-size: var(--au-fs-sm); }
.cex-desde { font: 300 var(--au-fs-sm) 'Sora', sans-serif; color: var(--au-text-soft); }
.cex-desde.parado { color: var(--au-muted); }
.cex-lin { display: block; width: 100%; height: 60px; margin: 10px 0 8px; overflow: visible; }
.cex-l-p { fill: none; stroke: var(--au-faint); stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.cex-l-f { fill: none; stroke: var(--au-text); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cex-l-sel { stroke: var(--au-gold); stroke-width: 1; opacity: .8; vector-effect: non-scaling-stroke; }
/* o ponto de cobre: traço de comprimento zero com ponta redonda (o SVG
   estica com o cartão; um círculo viraria elipse) */
.cex-l-at { stroke: var(--au-orange); stroke-width: 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cex-c-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cex-done { font: 300 var(--au-fs-xs) 'Sora', sans-serif; color: var(--au-muted); white-space: nowrap; }
.cex-done.at { color: var(--au-orange); }
/* a linha aberta */
.cex-det { grid-column: 1 / -1; padding: 12px 16px 14px; border: 1px solid var(--au-line); border-radius: 14px; background: rgba(255,255,255,.02); min-width: 0; }
.cex-det-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cex-det-nome { font: 300 var(--au-fs-l) 'Sora', sans-serif; color: var(--au-text); }
.cex-grupo { display: flex; gap: 6px; flex-wrap: wrap; }
.cex-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--au-line); background: none;
  font: 300 var(--au-fs-xs) 'Sora', sans-serif; color: var(--au-muted); cursor: pointer; }
.cex-chip.on { color: var(--au-text); border-color: var(--au-text-soft); }
.cex-chip:active { transform: scale(.97); }
.cex-fora { margin: 12px 0 0; font: 300 var(--au-fs-xs)/1.5 'Sora', sans-serif; color: var(--au-muted); }
.cex-fora b { font-weight: 400; color: var(--au-text-soft); }
.cex-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font: 300 var(--au-fs-xs) 'Sora', sans-serif; color: var(--au-muted); }
.cex-leg i { display: inline-block; width: 16px; height: 0; vertical-align: middle; margin-right: 6px; }
.cex-i-f { border-top: 1.5px solid var(--au-text); }
.cex-i-p { border-top: 1.5px dashed var(--au-faint); }
.cex-i-sel { width: 2px !important; height: 12px !important; background: var(--au-gold); }
.cex-i-at { width: 8px !important; height: 8px !important; border-radius: 50%; background: var(--au-orange); }
@media (hover: hover) and (pointer: fine) { .cex-col:hover .cex-col-v { opacity: 1; color: var(--au-text-soft); } .cex-col.sel:hover .cex-col-v { color: var(--au-text); } }
/* apertado (hub no celular): o total empilha, as colunas apertam */
@container cex (max-width: 620px) {
  .cex-total { grid-template-columns: 1fr; }
  .cex-cols, .cex-eixo { grid-template-columns: repeat(var(--n6, 6), minmax(0, 1fr)); gap: 2px; }
  .cex-quadro { padding-left: 14px; padding-right: 14px; }
  .cex-col.longe, .cex-eixo span.longe { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cex-chip:active, .cex-marca:active, .cex-col:active { transform: none; } .cex-card { transition: none; } }

/* ── [dono 08/10] HISTÓRICO › LOAD — a carga interna (coach-hub-carga.js) ──
   Mockup `mockups/controle-de-carga.html`, tela 1. P&B; ouro só na semana
   aberta; cobre só na monotonia de 2 ou mais. Fora do media query: o hub é o
   mesmo no Mac e no celular, e os grids se dobram sozinhos (auto-fit). */
.hc { display: flex; flex-direction: column; gap: 16px; }
.hc-cartao { border: 1px solid var(--au-line); border-radius: 16px; padding: 18px 20px; background: var(--au-surface); min-width: 0; container-type: inline-size; container-name: hccard; }
.hc-sub { font: 300 var(--au-fs-sm)/1.5 'Sora', sans-serif; color: var(--au-muted); margin: 4px 0 12px; }
.hc-x { font: 300 var(--au-fs-xs)/1.45 'Sora', sans-serif; color: var(--au-muted); margin-top: 4px; }
.hc-vazio { font: 300 var(--au-fs-m)/1.6 'Sora', sans-serif; color: var(--au-muted); padding: 18px 2px; }
/* [dono 16/10] OS 4 NÚMEROS JUNTOS (mockup `carga-interna-quatro-faixas.html`):
   quatro faixas — LOAD · MONOTONY · STRAIN · ACUTE:CHRONIC — nas MESMAS 5
   colunas de semana; o número da semana aberta à esquerda de cada uma. A coluna
   aberta tem um fundo leve atrás das quatro (.hc-col, posição por --hc-sel). */
.hc-fx { position: relative; margin-top: 6px; --hc-rotw: 220px; }
.hc-col { position: absolute; top: 0; bottom: 0; left: calc(var(--hc-rotw) + (100% - var(--hc-rotw)) / 5 * var(--hc-sel)); width: calc((100% - var(--hc-rotw)) / 5); border-radius: 12px; background: rgba(255,255,255,.035); pointer-events: none; }
.hc-fx-linha { position: relative; display: grid; grid-template-columns: var(--hc-rotw) minmax(0, 1fr); align-items: end; border-top: 1px solid var(--au-line-soft); }
.hc-fx-cab { border-top: none; align-items: center; }
.hc-fx-rot { align-self: center; padding: 14px 16px 14px 0; min-width: 0; }
.hc-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; }
.hc-sem { position: relative; z-index: 1; min-height: 44px; padding: 0 2px; border: none; background: none; cursor: pointer; border-radius: 10px; font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .1em; color: var(--au-faint); text-transform: uppercase; white-space: nowrap; transition: transform var(--au-dur-press) var(--au-ease); }
.hc-sem:active { transform: scale(.97); }
.hc-sem.on { color: var(--au-gold); }
.hc-cel { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; padding: 22px 0 10px; }
.hc-v { font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; color: var(--au-muted); }
.hc-bar { display: block; width: 56%; max-width: 72px; border-radius: 6px 6px 2px 2px; background: rgba(255,255,255,.22); }
.hc-bar.zero { background: var(--au-line); }
.hc-cel.on .hc-bar { background: var(--au-text); }
.hc-cel.on .hc-v { color: var(--au-text); }
/* as faixas de linha: posição em % da altura, x = centro da coluna */
.hc-linha { position: relative; height: 76px; margin: 28px 0 12px; }
.hc-linha svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hc-linha path { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1.5; }
.hc-p { position: absolute; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px; border-radius: 50%; background: rgba(255,255,255,.4); }
.hc-p.on { width: 11px; height: 11px; margin: 0 0 -5.5px -5.5px; background: var(--au-text); }
.hc-p.alta { background: var(--au-orange); }
.hc-pv { position: absolute; transform: translate(-50%, -10px); font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; color: var(--au-muted); white-space: nowrap; }
.hc-pv.vazio { bottom: 0; transform: translate(-50%, 50%); color: var(--au-faint); }
.hc-pv.on { color: var(--au-text); }
.hc-pv.alta { color: var(--au-orange); }
.hc-banda { position: absolute; left: 0; right: 0; border-top: 1px solid var(--au-line); border-bottom: 1px solid var(--au-line); background: rgba(255,255,255,.04); }
.hc-ref { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--au-orange); opacity: .6; }
.hc-num { font: 300 var(--au-fs-t) 'Sora', sans-serif; color: var(--au-text); }
.hc-un { font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .12em; color: var(--au-faint); margin-left: 4px; }
.hc-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.hc-dias { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; padding-top: 18px; }
.hc-dia { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.hc-dv { font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; color: var(--au-muted); }
.hc-dbar { display: block; width: 62%; border-radius: 4px 4px 1px 1px; background: rgba(255,255,255,.55); }
.hc-dbar.zero { background: var(--au-line); }
.hc-dl { font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; color: var(--au-faint); height: 18px; line-height: 18px; }
.hc-media { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,.35); pointer-events: none; }
.hc-sess { margin-top: 14px; }
.hc-ses { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px; border-top: 1px solid var(--au-line-soft); padding: 6px 0; }
.hc-sd { font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .08em; color: var(--au-faint); }
.hc-sn { font: 300 var(--au-fs-m) 'Sora', sans-serif; color: var(--au-text); overflow-wrap: anywhere; }
.hc-sc { font: 300 var(--au-fs-xs) 'Sora', sans-serif; color: var(--au-muted); margin-top: 2px; }
.hc-sua { text-align: right; font: 300 var(--au-fs-m) 'Sora', sans-serif; color: var(--au-text); }
.hc-sua small { display: block; font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .1em; color: var(--au-faint); }
.hc-ses.nm .hc-sn, .hc-ses.nm .hc-sua { color: var(--au-faint); }
.hc-cmp { width: 100%; border-collapse: collapse; }
.hc-cmp th { font: 400 var(--au-fs-mono-xs) 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--au-faint); text-align: right; font-weight: 400; padding: 0 0 8px; }
.hc-cmp td { font: 300 var(--au-fs-sm) 'Sora', sans-serif; color: var(--au-text-soft); text-align: right; padding: 9px 0; border-top: 1px solid var(--au-line-soft); }
.hc-cmp th:first-child, .hc-cmp td:first-child { text-align: left; }
.hc-cmp td.sobe { color: var(--au-orange); }
.hc-leitura { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--au-line); border-radius: 12px; font: 300 var(--au-fs-sm)/1.5 'Sora', sans-serif; color: var(--au-text-soft); }
.hc-leitura b { font-weight: 400; color: var(--au-text); }
.hc-pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--au-orange); margin-right: 8px; vertical-align: 1px; }
/* estreito (o celular): "Now" no lugar de "This week", sem o espaçamento, cada número em cima da sua faixa */
.hc-curto { display: none; }
@container hccard (max-width: 520px) {
  .hc-largo { display: none; }
  .hc-curto { display: inline; }
  .hc-sem { letter-spacing: 0; }
  /* o número de cada faixa sobe pra cima dela, e as colunas ocupam a largura */
  .hc-fx { --hc-rotw: 0px; }
  .hc-fx-linha { grid-template-columns: minmax(0, 1fr); }
  .hc-fx-cab .hc-fx-rot { display: none; }
  .hc-fx-rot { padding: 14px 0 0; }
}
/* [08/10 · passo 2] a barrinha das 5 zonas de FC na linha da sessão (largura =
   minutos; a cor de cada zona é a .au-fcz1…5 do aurum.css) */
.hc-zbar { display: flex; gap: 1px; height: 6px; max-width: 220px; border-radius: 3px; overflow: hidden; margin-top: 6px; }
.hc-zbar i { display: block; height: 100%; }