/* ── 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; }

@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 #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; }
  body.is-coach .library-desk {
    display: grid; grid-template-columns: minmax(0,1fr) 440px;
    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; }
  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; }
@container hubcorpo (min-width: 784px) {
  body.is-coach .cic-visao {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 36px; align-items: start;
  }
}

/* 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; }
}
/* 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; }
  body.is-coach.coach-cheia { --coach-side-w: 56px; }
  body.is-coach.coach-cheia #coachNav { padding: 26px 6px calc(18px + env(safe-area-inset-bottom)); align-items: center; }
  body.is-coach.coach-cheia #coachNav .coach-side-id { margin-bottom: 20px; }
  body.is-coach.coach-cheia #coachNav .coach-side-id > div { display: none; }
  body.is-coach.coach-cheia #coachNav .nav-btn {
    width: 44px; height: 44px; padding: 0; justify-content: center; position: relative;
  }
  body.is-coach.coach-cheia #coachNav .nav-btn::before { display: none; }
  body.is-coach.coach-cheia #coachNav .coach-side-label { display: none; }
  body.is-coach.coach-cheia #coachNav .coach-side-ico { display: block; width: 20px; height: 20px; }
  body.is-coach.coach-cheia #coachNav .coach-side-count {
    position: absolute; top: 3px; right: 4px; margin: 0; font-size: 8px;
  }
  body.is-coach.coach-cheia #coachNav .coach-side-foot {
    justify-content: center; padding: 10px 0 0; width: 44px; min-height: 54px;
  }
  body.is-coach.coach-cheia #coachNav .coach-side-foot > span { display: none; }
  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.coach-cheia .coach-ath-split.tem-aberto { grid-template-columns: minmax(0, 1fr); }
  body.is-coach.coach-cheia .coach-ath-split.tem-aberto .coach-ath-list { display: none; }
  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.coach-cheia .hub-sel { display: flex; align-items: center; gap: 2px; min-width: 0; }
  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); }