/* manikin.css — estilos do manequim/hub transplantados do style.css do App 1
   (exceção documentada à regra 'só aurum.css': são os desenhos anatômicos
   e o painel do corpo, cores herdadas do design aprovado). */

/* manikin.css — estilos do manequim/hub transplantados do style.css do App 1
   (exceção documentada à regra 'só aurum.css': são os desenhos anatômicos
   e o painel do corpo, cores herdadas do design aprovado). */

/* ---- Task #204: tira de metas (substitui a barra de status recolhida/
   expandida + o carrossel Race/Capacidades — ver goalsStripHTML em
   app.js) ---- */


/* ---- Task #292: cabeçalho "bento" ----
   Os 5 anéis uniformes de 40px (Tasks #238/#244, .goals-strip-mini-ring*)
   e a pill dourada "Ver prova" SAÍRAM DE VEZ (regras deletadas, não só
   sobrescritas — grep confirmou que só goalsStripHTML usava as classes).
   No lugar: linha 1 com avatar 56px + anel de progresso rumo à prova
   (virou botão do menu de conta) e nome/countdown maiores; linhas 2-3
   viram um grid "bento" de 5 CARDS (2 grandes + 3 pequenos), cada um com
   fundo escuro tingido da própria cor, marca-d'água grande sangrando no
   canto e o dado em TEXTO grande — legível de verdade, em vez de arcos
   que ninguém decodificava. Fundos/cores vêm do mockup aprovado (tons
   escurecidos do azul-petróleo/dourado/coral/verde do tema — hex fixos
   de propósito: são misturas com os fundos, não têm variável própria). */

/* O anel SVG (trilha #2a3532 + arco --gold, ver goalsStripHTML) cobre o
   quadro de 56px inteiro; o miolo com a inicial fica por cima, menor,
   deixando o respiro do anel ao redor. */


/* "Ver prova" — Task #292: a pill com fundo/borda dourada virou link
   discreto (só texto + chevron). Task #301: a cor vira azul-petróleo
   (mesma variável dos ícones das colunas abaixo) — continua discreto,
   só a cor muda (o dourado fica reservado pro anel do avatar/contagem
   regressiva, nunca mais um link). */


/* Task #301 (pacote "cabeçalho sem cards"): os 5 cards bento tingidos
   (fundo próprio, marca-d'água grande, número/palavra em texto grande —
   Task #292) saem de vez — viram 5 COLUNAS simples, sem card/fundo/
   filete/divisória nenhuma entre elas. Cada botão é só um empilhador
   centralizado (ícone ou número no topo, rótulo embaixo — Peso ganha um
   andar extra com o valor em kg no meio, ver goalsStripHTML). */


/* Slot do ícone (ou vazio, no caso do Peso sem meta/direção) — altura
   fixa pra manter as 5 colunas no MESMO eixo vertical mesmo quando o
   ícone não existe (Peso sem direção). Ícone sempre azul-petróleo
   (--accent-cool), a identidade única que substituiu o tingimento por
   card/modalidade em todo o resto do pacote #300/#301. */


/* Lesões: só o número, sem ícone — coral porque é status/alerta, nunca
   decoração (#241). */


/* ---- Task #204: telas "empurradas" (Race detail / Capacidades) ----
   Task #242: unificação REAL do motor de "tela cheia". Antes estas telas
   (Race/Capacidades/Peso/Histórico-lista) eram um 3º mecanismo (Padrão
   C): troca de conteúdo em fluxo normal dentro de journeyViewEl, sem
   overlay/z-index próprio — só "pareciam" tela cheia. Agora `.pushed-
   screen` é um overlay fixo de verdade cobrindo a viewport inteira, MESMO
   z-index (210) e mesma sensação de "um nível mais fundo" da tela cheia
   do boneco/mobilidade (Padrão B: .body-focus-fullscreen/.mob-popup-
   overlay). Como `.pushed-screen` continua sendo descendente de
   journeyViewEl, TODA a delegação de clique existente (voltar, navegação
   de semana do histórico, radar de capacidades etc.) segue funcionando
   sem reescrever listener nenhum — a unificação é estrutural, não só
   cosmética. */
.pushed-screen{
  position: fixed;
  inset: 0;
  z-index: 210;
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* [fix dono 2026-08-11] era `padding: 0 16px 24px` — como é overlay
     FIXO, ignorava a área segura do pai e o "← CORPO" nascia embaixo do
     relógio/ilha do iPhone. Agora respeita o topo e o rodapé do aparelho
     (as telas que declaram padding inline mantêm o próprio lateral, mas
     o topo mínimo vem daqui). */
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
}
/* telas empurradas com padding próprio (peso/capacidades) não podem
   perder a área segura do topo */
.pushed-screen[style*="padding"]{ padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important; }

/* Pop-up "Foto do corpo" (ver openBodyPhotoModal/bodyPhotoModalHTML em
   app.js) — aberto pelo atalho da câmera ao lado do manequim, dentro
   da própria aba. Visual minimalista: abas em sublinhado (sem pílula
   de fundo), slots de foto com borda fina só (sem tracejado), campos
   de medida em underline (sem caixa preenchida) — pedido explícito de
   "deixar mais minimalista". */
/* Task #228: quando aberto a partir do atalho de câmera DENTRO da tela
   cheia de foco muscular (#btnBodyPhotoShortcutFullscreen,
   .body-focus-fullscreen, z-index 210 — ver Task #188), este pop-up
   usava o z-index genérico do .modal-backdrop/.modal (50/sem z-index
   próprio) e renderizava ATRÁS da tela cheia. Sobe só ESTE pop-up
   específico (classes próprias, backdrop e modal) pra acima de 210,
   sem tocar no z-index genérico de .modal-backdrop/.modal usado em
   todo o resto do app. */
.body-photo-modal-backdrop{ z-index: 315; }

/* Task #188: o lembrete flutuante de lesões (.injury-reminder, botão
   pill que ficava sobre o boneco de Foco muscular) saiu junto com esse
   boneco daqui — a prévia compacta dentro do pop-up Aesthetic
   (bodyFocusAestheticPreviewHTML) não o reintroduz, já que "Meu Corpo"
   agora É o próprio mapa de lesões (sempre visível, sem precisar de
   lembrete pra achar). Regra removida (nenhum uso restante no app.js). */

/* Mapa de lesões — 2ª página do card único (ver injuryMapHTML em
   app.js): esqueleto anatômico dentro da mesma silhueta/pose do boneco
   de foco (o contorno do corpo fica como "fantasma" atrás dos ossos),
   com bolinhas vermelhas nas articulações relatadas + lista das
   queixas. No pop-up de relatar (openInjuryModal), a mesma arte serve
   de "manequim em branco" (fantasma mais apagado). */
.injury-diagram{
  width: 100%;
  max-width: 150px;
  height: auto;
}

.injury-diagram-blank .injury-ghost path{ opacity: 0.06; }

.injury-modal .body-focus-diagram-row{ margin-bottom: 4px; }

/* Boneco anatômico de foco corporal v2 (ver bodyFocusDiagramInlineHTML,
   bodyFocusDiagramSVG em muscleDiagrams.js). v3: silhueta detalhada com
   grupos musculares sempre visíveis (tipo carta anatômica). Regiões
   clicáveis já ficam visíveis num tom neutro (baseline), tipo carta
   anatômica de verdade, e ganham petróleo (--navy-500) sólido quando
   marcadas.

   v4: mora dentro da 1a página do card único "journey-block-card",
   junto com os badges compactos de força/cardio/flex (não é mais um
   card próprio) — por isso ganha mais espaço e o ponto de referência
   de margem vira ".body-focus-inline".

   v5: sem giro — frente e costas aparecem lado a lado ao mesmo tempo
   (ver .body-focus-diagram-row), então cada desenho fica menor. */
.body-focus-inline{ margin-top: 8px; }

/* Task #188: a classe .body-focus-inline-big (usada pelo antigo pop-up
   openBodyFocusModal, 190px) foi removida — a tela cheia que a
   substituiu (ver .body-focus-fullscreen-diagrams abaixo) usa um
   tamanho ainda maior (100% da coluna disponível), sem precisar de um
   valor fixo em px. Nenhum uso restante no app.js. */

/* Página Lesões — o esqueleto tem que ter EXATAMENTE o mesmo tamanho do
   manequim de músculos da página ao lado ("é a mesma tela, do mesmo
   tamanho, com as mesmas proporções"): mesmos 190px de largura máxima,
   mesmo gap e mesmo tamanho de rótulo do .body-focus-inline-big acima.
   Escopado em .injury-map-row pra NÃO afetar o preview do pop-up de
   relatar lesão (que continua compacto de propósito). */
.injury-map-row{
  gap: 16px;
  margin: 14px 0 6px;
}

.injury-map-row .body-focus-diagram-col{ max-width: 190px; }

.injury-map-row .injury-diagram{ max-width: 190px; }

.injury-map-row .body-focus-diagram-label{ font-size: 11px; }

.body-focus-inline-preview .body-focus-diagram-row{
  gap: 16px;
  margin: 6px 0 2px;
}

.body-focus-inline-preview .body-focus-diagram-col{ max-width: 190px; }

.body-focus-inline-preview .body-focus-diagram{ max-width: 190px; }

.body-focus-inline-preview .body-focus-diagram-label{ font-size: 11px; }

#bodyFocusAestheticPreview .body-focus-diagram-row{ gap: 10px; margin: 6px 0 2px; }

#bodyFocusAestheticPreview .body-focus-diagram-col{ max-width: 96px; }

#bodyFocusAestheticPreview .body-focus-diagram{ max-width: 96px; }

#bodyFocusAestheticPreview .body-focus-diagram-label{ font-size: 10px; }

/* Task #188: tela cheia própria pra seleção de foco muscular — aberta a
   partir da prévia compacta acima (ver openBodyFocusFullscreen em
   app.js). Raiz PRÓPRIA (#bodyFocusFullscreenRoot, fora de qualquer
   modal), cobrindo a tela inteira, com z-index acima até do
   .click-shield (200) e do backdrop mais escuro usado no fluxo de
   treino/RPE (90) — precisa ficar por cima do pop-up da meta Aesthetic
   (que continua aberto por baixo, nunca fechado) sem qualquer chance de
   ficar escondida atrás dele. "Concluir" no topo só remove esta camada
   (ver closeBodyFocusFullscreen), revelando o pop-up de novo. */
.body-focus-fullscreen{
  position: fixed;
  inset: 0;
  z-index: 210;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Task #222: #flexibilityView aberta como pop-up (mini-ícone
   "Mobilidade" da tira de metas, ver openMobilityPopup em app.js) em
   vez de aba trocável na barra de cima — mesmo padrão/z-index de
   .body-focus-fullscreen (tela cheia própria, por cima de tudo).
   #flexibilityView é filha de <main>, que só dá padding a filhos em
   fluxo normal — position:fixed escapa desse fluxo, então o respiro
   das bordas vem de volta aqui dentro. */
.mob-popup-overlay{
  position: fixed;
  inset: 0;
  z-index: 210;
  background: var(--bg);
  overflow-y: auto;
  padding: 14px 16px 24px;
}

.body-focus-fullscreen-diagrams .body-focus-diagram-row{
  gap: 10px;
  margin: 8px -8px 14px;
  width: calc(100% + 16px);
}

.body-focus-fullscreen-diagrams .body-focus-diagram-col{ max-width: 100%; }

.body-focus-fullscreen-diagrams .body-focus-diagram{ max-width: 100%; }

.body-focus-fullscreen-diagrams .body-focus-diagram-label{ font-size: 13px; }

/* Task #188: a barrinha de ferramentas (lembrete de lesão + atalho de
   câmera, .body-focus-row-wrap) que ficava acima do boneco de Foco
   muscular saiu junto com ele desta aba — o atalho de câmera mudou-se
   pro cabeçalho do mapa de Lesões (ver injuryMapHTML/.injury-panel-head)
   e o lembrete de lesão não existe mais (ver comentário perto de
   .injury-diagram acima). Regra removida (nenhum uso restante). */
/* Rótulo (com ícone pequeno na frente) + valor, sem fundo/borda/box —
   continua minimalista ("esses dados da esquerda devem ser
   minimalistas"), só ganhou um ícone discreto pra não ficar "sem
   graça". */
/* v2: a coluna virou uma GRADE responsiva — desde que os manequins
   ganharam páginas próprias, esses dados moram sozinhos na página Home
   e a coluna estreita de 92px deixava a metade direita da tela vazia.
   Agora altura/peso/BMI/etc se espalham em colunas conforme o espaço,
   e o semáforo de condicionamento ocupa a largura toda embaixo. Segue
   sem caixa/fundo (pedido antigo: minimalista). */
.body-stats-col{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 0.5px solid var(--au-line);
}

.body-focus-diagram-row{
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 2px;
}

.body-focus-diagram-col{
  flex: 1 1 0;
  max-width: 150px;
  text-align: center;
}

.body-focus-diagram-wrap{
  display: flex;
  justify-content: center;
}

.body-focus-diagram-label{
  margin: 2px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--au-muted);
}

.body-focus-diagram{
  width: 100%;
  max-width: 150px;
  height: auto;
}

/* [APPLE VERSION · mAur baixo-relevo] silhueta escura quase-fundo;
   músculos são relevo de luminância por cima (zero matiz novo). */
.body-focus-body path,
.body-focus-body ellipse{
  fill: #2a2823;
  opacity: 1;
}

.body-focus-layer-front > path,
.body-focus-layer-back > path{
  fill: none;
  stroke: rgba(11,10,9,.75); /* mAur: risco é sombra, não corte */
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.75;
  pointer-events: none;
}

/* [dono 2026-09-21] área de toque de cada músculo (ver bodyFocusHitMarkup em
   muscleDiagrams.js): invisível, mas PINTADA — `transparent` é tinta, e é isso
   que a faz receber o toque. O traço largo fecha o vão entre os gomos. */
.body-focus-hit path,
.body-focus-hit rect{
  fill: #000;
  stroke: #000;
  stroke-width: 10;
  stroke-linejoin: round;
  /* TINTA DE VERDADE, grupo invisível. O Safari do iPhone NÃO conta como
     tocável o traço sem tinta — nem `transparent`, nem `none` com
     `pointer-events:all` (os dois passavam no Chrome). Medido no Safari do
     Mac (22/09), no meio do abdômen masculino: 0 de 288 pontos com as duas
     formas antigas; 288 de 288 assim. A vista escondida some por
     `display:none` no grupo, não por pointer-events — o `all` do filho
     venceria o `none` herdado. */
  pointer-events: all;
  cursor: pointer;
}
.body-focus-hits{ opacity: 0 }

.body-focus-area{
  fill: rgba(239,237,232,.10);
  stroke: rgba(11,10,9,.9);
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill var(--au-dur-press) var(--au-ease), stroke var(--au-dur-press) var(--au-ease);
}

@media (hover: hover) and (pointer: fine){
  .body-focus-area:hover{
    fill: rgba(239,237,232,.16);
  }
}

.body-focus-area:focus-visible{
  outline: none;
  stroke: rgba(239,237,232,.6);
}

.body-focus-area-selected{
  fill: var(--au-text);
  fill-opacity: .92;
  stroke: rgba(11,10,9,.9);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 5px rgba(239,237,232,.3));
}

/* [FE — Enriquecimento item 5/Corpo, fatia 1] FOCO ACESO: o grupo-alvo
   ACENDE em gelo com halo (resolve o "foco ilegivel / tudo cinza" do dono),
   o resto fica mais apagado. Camada 100% CSS sobre o manequim de musculos
   INTOCADO (js/muscleDiagrams.js e as classes .body-focus-area[-selected]);
   nenhuma arte reescrita. Vem DEPOIS das regras originais -> ganha por
   ordem de fonte (mesma especificidade). A barra de progresso "Semana X de
   N" fica pro BE: o app guarda o N (bodyFocusTimeframeWeeks) e a data-alvo,
   mas NAO uma data de inicio, entao o X (semana atual) nao tem ancora real
   — sem inventar um X que desliza. */
/* [APPLE VERSION] lesionado (mAur) — coral tingido, nunca a cor do foco;
   marcadores articulares do mapa unificado (2a) — antes SEM estilo no App2. */
.body-focus-area-injured{
  fill: rgba(224,70,58,.30);
  stroke: var(--au-red);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 5px rgba(224,137,90,.4));
}

.injury-marker{ fill: var(--au-red); }
.injury-marker-halo{ fill: none; stroke: var(--au-red); stroke-width: 1.6; opacity: .55; }
.injury-marker-locked{ opacity: .4; }

/* Seletor de prazo — só aparece depois de pelo menos 1 área marcada
   (ver bodyFocusTimeframePickerHTML em app.js). Pílulas pequenas, igual
   ao resto do sistema de badges do app; a selecionada vira sólida. */
.body-focus-timeframe{
  margin-top: 12px;
  text-align: center;
}

.body-focus-timeframe-pill.active{
  border-color: var(--au-gold);
  background: rgba(201,162,74,.12);
  color: var(--au-gold);
}

/* Handoff Corpo: manequim frente+costas encolhido pro tamanho de card
   (mesma técnica de sobrescrita por escopo de #bodyFocusAestheticPreview
   e .athlete-injury-diagrams — ~96px por coluna, entre os ~92px de
   Lesões e os ~150px default da tela cheia). */
.athlete-body-preview .body-focus-diagram-col{ max-width: 96px; }

.athlete-body-preview .body-focus-diagram-label{ font-size: 10px; }

/* Linha "meta: por volta de..." — dourado porque é meta/prazo, mesma
   convenção de "318 dias pra prova" e do bloco de meta de peso
   (.athlete-weight-meta-value). Só o resultado; trocar de prazo (as
   pílulas de semana) continua sendo ação exclusiva da tela cheia. */

/* Atalho "Registrar foto" — mesma cor/ação do botão de câmera de
   injuryMapHTML (.body-photo-shortcut, Task #116: dourado sólido pra
   incentivar o registro), só que em formato pílula com rótulo em texto
   (aqui dentro do card cabe o texto, ao contrário do ícone solto de
   injuryMapHTML). Elemento IRMÃO do manequim acima (não filho) — ver
   comentário em bodyPanelHTML sobre não conflitar com o toque de abrir
   tela cheia. */


/* Handoff Lesões (Diagrama 3): manequins (frente+costas, .body-focus-
   diagram-row/col reaproveitados tal-e-qual) à esquerda, lista à
   direita — mesmo espírito do .capacity-wrap (radar+lista) e do
   peso-chart-wrap, contido em ~560px pra não esticar no desktop. */

.athlete-injury-diagrams{ flex: 0 0 auto; margin: 0; }

.athlete-injury-diagrams.body-focus-diagram-row{ gap: 6px; justify-content: flex-start; }

/* ~90-100px por manequim, pedido explícito do handoff (menor que o par
   de ~150px do injuryMapHTML de tela cheia) — mesma técnica de
   sobrescrita por escopo já usada em #bodyFocusAestheticPreview. */
.athlete-injury-diagrams .body-focus-diagram-col{ max-width: 92px; }

.athlete-injury-diagrams .body-focus-diagram{ max-width: 92px; }

/* Manequins maiores e centrados nos dois paineis vitrine (a lista
   lateral de Lesoes saiu — o par ganha o palco). */
[data-athlete-panel="inj"] .athlete-injury-diagrams.body-focus-diagram-row{ justify-content: center; gap: 14px; }

[data-athlete-panel="inj"] .body-focus-diagram-col{ max-width: 112px; }

[data-athlete-panel="inj"] .injury-diagram{ max-width: 112px; }

[data-athlete-panel="body"] .athlete-body-preview .body-focus-diagram-row{ justify-content: center; gap: 14px; }

[data-athlete-panel="body"] .athlete-body-preview .body-focus-diagram-col{ max-width: 112px; }

[data-athlete-panel="body"] .athlete-body-preview .body-focus-diagram{ max-width: 112px; }

[data-athlete-panel="inj"] .body-focus-diagram-label { color: var(--au-muted); text-transform: uppercase; letter-spacing: 1.2px; font-size: 9px; }

/* [APPLE VERSION] seleção = mesmo mAur em todos os contextos (o "gelo"
   antigo deste escopo foi substituído por luminância). */
[data-athlete-panel="body"] .body-focus-area-selected,
.body-focus-fullscreen .body-focus-area-selected {
  fill: var(--au-text);
  fill-opacity: .92;
  stroke: rgba(11,10,9,.9);
  filter: drop-shadow(0 0 5px rgba(239,237,232,.3));
}

[data-athlete-panel="body"] .body-focus-diagram-label,
.body-focus-fullscreen .body-focus-diagram-label {
  color: var(--au-muted); text-transform: uppercase; letter-spacing: 1.2px; font-size: 9px;
}

/* =================================================================
   [ENRIQUECIMENTO item 2 — Capacidades fix] Painel aberto => o heroi
   do countdown COLAPSA numa barra fina (conserta todas as telas de
   painel: cap/peso/lesoes/mob/corpo cabem sem rolar um heroi inteiro).
   1 unica classe condicional no app.js; o resto e CSS. */
.noir-home .athlete-hub-panel-open .noir-hero-num,
.noir-home .athlete-hub-panel-open .hub-hero-num {
  font-size: 22px; letter-spacing: -0.5px; line-height: 1.1;
}

/* ═══ Manequim interativo do hub — selecionado/hover em OURO (Palette B) ═══
   O .body-focus-area-selected global acende em petróleo com glow azul (usado
   na tela cheia/preview); no hub queremos ouro. Escopado em .hub-focus-manikin
   pra não afetar os outros usos. */
.hub-focus-manikin .body-focus-area{
  transition: fill .12s ease, stroke .12s ease;
}

/* [APPLE VERSION] ouro jamais no manequim — hover em luminância. */
@media (hover: hover) and (pointer: fine){
  .hub-focus-manikin .body-focus-area:hover{
    fill: rgba(239,237,232,.16) !important;
    stroke: rgba(11,10,9,.9) !important;
  }
}

/* [APPLE VERSION] regras de seleção antigas do hub (ouro/petróleo)
   mortas — o valor final mAur está na última regra do bloco do hub. */

/* Sem retângulo de foco/realce de toque ao selecionar músculo no hub (o <g>
   tem tabindex/role=button → o navegador desenhava a caixa delimitadora). */
.hub-focus-manikin{ -webkit-tap-highlight-color: transparent; }

.hub-focus-manikin .body-focus-area:focus,
.hub-focus-manikin .body-focus-area:active{ outline: none; }
/* teclado PRECISA ver o foco — o :focus-visible so aparece na navegacao
   por teclado, nunca no toque. */
.hub-focus-manikin .body-focus-area:focus-visible{ outline: 2px solid var(--au-text); outline-offset: 2px; }

/* Amarelo (ouro) REFINADO no hub — contorno dourado + fill translúcido, em vez
   do bloco mostarda sólido que "amarelava" demais (opção B aprovada). */

/* [redesign] Músculo LESIONADO no modo Lesão — coral (distinto do ouro do foco). */
.hub-focus-manikin .body-focus-area-injured{
  fill: rgba(224,70,58,.30) !important;
  stroke: var(--au-red) !important;
  stroke-width: 1.4 !important;
  filter: drop-shadow(0 0 5px rgba(224,137,90,.4)) !important;
}

/* Amarelo VISÍVEL no hub — o corpo do manequim é cinza-claro, então ouro
   translúcido virava pálido/branco. Agora ouro CHEIO e mais vivo (dupla classe
   pra vencer as regras anteriores). */

/* ═══ Manequim único do hub — toggle músculo/lesão, L/R, severidade ═══ */
.hub-mode-seg{display:inline-flex;border:1px solid rgba(255,255,255,.14);border-radius:100px;padding:3px;background:rgba(255,255,255,.03)}

.hub-mode-seg button{font:400 .6875rem 'Space Mono',monospace;letter-spacing:.14em;padding:8px 18px;border-radius:100px;color:var(--au-muted);background:none;border:none;cursor:pointer}

.hub-mode-seg button.on-m{background:#efede8;color:#0b0a09}

.hub-mode-seg button.on-i{background:var(--au-red);color:#f5f3ee}

/* L / R discretos acima da cabeça */
.hub-lr{position:absolute;top:0;z-index:3;width:26px;height:26px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(11,10,9,.7);color:var(--au-muted);font:400 .8125rem 'Space Mono',monospace;cursor:pointer;line-height:1}

.hub-lr.on{border-color:var(--au-red);color:var(--au-red);background:rgba(224,70,58,.14)}

/* ── [dono 2026-08-10] Folha de lesão no padrão AURUM v2: segmentos em
   LUMINÂNCIA (a antiga borda coral/mostarda "não conversava com o app");
   cobre fica só no contexto (título/marcadores/remover). ── */
.hub-panel-lbl{font:400 .625rem 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--au-muted);margin:14px 0 6px;text-align:center}

.hub-seg-row{display:flex;gap:6px}

.hub-seg-pill{flex:1;text-align:center;border:1px solid rgba(255,255,255,.11);border-radius:100px;min-height:44px;padding:0;font:400 .9375rem 'Sora',system-ui,sans-serif;color:var(--au-text-soft);background:none;cursor:pointer;transition:transform 120ms cubic-bezier(.22,1,.36,1)}

.hub-seg-pill:active{transform:scale(.97)}

.hub-seg-pill.on{border-color:rgba(239,237,232,.4);color:var(--au-text);background:rgba(239,237,232,.05)}

.hub-seg-sev.on{border-color:rgba(239,237,232,.4);color:var(--au-text);background:rgba(239,237,232,.05)}

.hub-inj-notes{width:100%;box-sizing:border-box;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.14);border-radius:0;padding:10px 2px;color:var(--au-text);font:400 .9375rem 'Sora',system-ui,sans-serif;margin-top:2px;resize:none}

.hub-inj-notes::placeholder{color:var(--au-muted)}

.hub-inj-notes:focus{outline:none;border-bottom-color:rgba(239,237,232,.4)}

.hub-inj-remove{width:100%;background:none;border:none;color:var(--au-orange);font:400 .9375rem 'Sora',system-ui,sans-serif;padding:12px 0 2px;cursor:pointer;text-align:center;min-height:44px}

/* marcadores de lesão com 3 efeitos */
.hub-inj-dot{fill:var(--au-red)}

.hub-inj-glow{filter:drop-shadow(0 0 5px rgba(224,70,58,.85))}

.hub-inj-halo{fill:none;stroke:var(--au-red);stroke-width:1.6;opacity:.55}

/* [auditoria] .hub-inj-pulse removido: @keyframes hubInjPulse nunca
   existiu (animação morta) e um halo pulsando infinito sobre o mapa do
   corpo violaria a régua (nada anima sobre dado sendo lido). A gravidade
   da lesão já se lê pelo raio do ponto. */

/* ═══ Manequim do hub — ajustes: L/R estático, zoom, confirmar nota ═══ */
/* [APPLE VERSION · mAur] seleção final do hub = baixo-relevo em
   luminância (petróleo/ouro antigos mortos). */
.hub-focus-manikin .body-focus-area.body-focus-area-selected{
  fill: var(--au-text) !important;
  fill-opacity: .92 !important;
  stroke: rgba(11,10,9,.9) !important;
  stroke-width: 1.2 !important;
  filter: drop-shadow(0 0 5px rgba(239,237,232,.3)) !important;
}

/* L / R = sinalização estática discreta (orientação), não interativa. */
.hub-lr-sig{ position:absolute; top:0; z-index:4; font:400 .6875rem 'Space Mono',monospace; letter-spacing:.1em; color:var(--au-faint); pointer-events:none }

/* Zoom SÓ no manequim (scroll/pan interno, não afeta a página). */
/* A caixa saiu do estilo inline do body.js pra cá (o inline vence media query,
   e a largura precisa ceder em tela estreita — ver .hub-inj-stage--alvo). */
.hub-manikin-frame{ line-height:0; position:relative; width:100%; max-width:240px; margin:0 auto }

.hub-flip-btn{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.14); color:var(--au-text); font:400 .6875rem 'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase; padding:8px 12px; border-radius:100px; cursor:pointer }

/* ── [dono 2026-08-13 · mockup manequim-topo-colado] TOPO COLADO ──────────
   Voltar (só a seta, sem nome acoplado) à esquerda, girar à direita e a
   CABEÇA do manequim entre os dois: os três leem como uma coisa só. A faixa
   é absoluta por cima do manequim — o corpo sobe 14px e ocupa a largura
   toda; as laterais da cabeça são vazias, então os botões não cobrem nada
   tocável (e vêm por cima, z-index 3). O R/L sai do topo do quadro e desce
   pra linha dos ombros, senão bateria nos botões. */
/* ── [dono 2026-08-14 · opção A do mockup tres-ajustes] O FOCO MUSCULAR CABE
   EM UMA TELA SÓ ──────────────────────────────────────────────────────────
   O manequim tinha altura livre (a do aspecto do SVG) e empurrava o prazo e
   o "Enviar para o treinador" pra fora: em 390×667 o conteúdo dava 831px e
   o CTA ficava 128px atrás da barra de abas. Agora ele é o elástico da
   tela — encolhe até caber, e nada mais muda de tamanho.

   Vale SÓ no modo músculo (a tela de Lesões usa o mesmo bloco e tem lista
   embaixo, que legitimamente rola). */
/* Sem `min-height` própria DE PROPÓSITO: a `.screen` já é uma coluna flex de
   100dvh e o padding de baixo dela já reserva a barra a partir do token
   (`--au-h-nav` + 36). Repetir essa conta aqui foi o meu primeiro erro —
   sobravam exatamente 30px de rolagem, porque a subtração era feita duas
   vezes. Como `flex:1`, este bloco fica com o que sobra, seja qual for a
   altura da barra amanhã. */
.hub-fit{ flex:1; min-height:0; display:flex; flex-direction:column }
.hub-fit-manikin{ flex:1; min-height:0; justify-content:center }
/* O SVG precisa de altura ZERO de base pra poder encolher dentro do flex —
   sem isso ele impõe a altura intrínseca e o `flex:1` não tem efeito. O
   viewBox + preserveAspectRatio (padrão) mantêm a proporção. */
.hub-fit-manikin .hub-manikin-topbar{ flex:1; min-height:0; display:flex; flex-direction:column; width:100% }
.hub-fit-manikin .hub-manikin-frame{ flex:1; min-height:0; display:flex; justify-content:center }
/* Entre o frame e o diagrama existem MAIS DOIS invólucros —
   `.hub-focus-manikin` e `.hub-manikin-inner`. Eles esticam junto com o
   frame, mas o SVG NÃO encolhe por `height:100%`: altura que vem de
   *stretch* não conta como definida pra resolver porcentagem, e o desenho
   volta a impor os 474px intrínsecos (medido: CTA 108px atrás da barra).
   Tentar só `min-height:0` na cadeia fez o contrário — COLAPSOU PRA ZERO,
   e a tela ficou com o prazo e o CTA e nenhum corpo.

   O jeito que funciona nos dois sentidos é tirar o SVG do fluxo: a caixa
   manda na altura, e o `viewBox` + `preserveAspectRatio` (padrão
   xMidYMid meet) escalam e centralizam o desenho dentro dela. A proporção
   fica intacta e os pontos de junta continuam alinhados, porque eles vivem
   DENTRO do mesmo SVG (decisão do "fix v2"). */
.hub-fit-manikin .hub-focus-manikin{ flex:1; min-height:0; display:flex; justify-content:center; width:100% }
.hub-fit-manikin .hub-manikin-inner{ flex:1; min-height:0 }
.hub-fit-manikin .hub-manikin-inner .body-focus-diagram{
  position:absolute; inset:0; width:100%; height:100%; max-width:100%;
}

.hub-manikin-topbar{ position:relative }
/* [dono 2026-09-22 · opção C] A faixa absoluta por cima do manequim
   (`.hub-top-row`) MORREU: o girar e o histórico subiram pra LINHA DA SETA,
   e o corpo parou de descer pra não bater neles. */
.hub-back-row{ display:flex; align-items:center; justify-content:space-between }

/* A LINHA DO PÉ do Foco: o prazo e o envio lado a lado, sempre presentes (ver
   hubTargetMonthsRowHTML). O lugar do envio tem LARGURA FIXA — "Enviar",
   "Refazer" e "Salvo" trocam dentro dele sem empurrar os pills do prazo. */
.hub-foco-linha{ align-items:center }
.hub-foco-slot{ flex:0 0 104px; display:flex }
.hub-foco-enviar{ min-height:var(--au-h-tap); width:100%; padding:0 12px }
/* Apagado é "ainda não": sem o glow do CTA, que é a assinatura do fill vivo. */
.hub-foco-enviar:disabled{ box-shadow:none }
.hub-foco-ok{ color:var(--au-green) }
/* [18/08] A regra `.hub-manikin-topbar .hub-manikin-frame{ margin-top:-14px }`
   que vivia aqui era LETRA MORTA desde que nasceu: o frame trazia
   `style="margin:0 auto"` inline, e inline vence seletor. Ela só passou a
   valer quando a caixa saiu do inline (18/08) — e aí subia o corpo 14px em
   DUAS telas que ninguém pediu pra mexer. Apagada em vez de neutralizada:
   regra que nunca teve efeito não é decisão de desenho, é entulho. */
.hub-manikin-topbar .hub-lr-sig{ top:66px }
/* [dono 2026-09-03] `.hub-back-arrow` MORREU. Ela era a seta canônica com
   uma posição própria (dentro da faixa do manequim) — e essa posição é
   justamente o que o dono apontou: "o botão de voltar está numa posição
   completamente diferente das outras páginas". O voltar do Foco e das
   Lesões é o `.au-back` de todo mundo, numa linha própria no topo. */

@media (hover:hover) and (pointer:fine){ .hub-flip-btn:hover{ border-color:rgba(255,255,255,.28) } }

/* [dono 2026-08-12] Girar frente/costas ao LADO do manequim (não mais numa
   linha própria acima): ocupa a faixa vazia à direita do corpo, devolvendo
   ~60px de altura pra tela caber inteira. min-height 44 = regra 12. */
/* [merge 2026-08-13] .hub-flip-side MORREU: era a solução ANTERIOR pro mesmo
   problema (o girar comendo uma linha inteira acima do corpo). O topo colado
   resolveu melhor — a seta e o girar viram uma faixa só e a cabeça sobe pra
   ficar entre os dois. Sem chamador no JS. */

.hub-inj-sheet-backdrop{ position:fixed; inset:0; z-index:305; background:rgba(5,5,4,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:flex-end; justify-content:center; animation:auFadeIn 200ms linear both }

.hub-inj-sheet{ position:relative; width:100%; max-width:460px; background:var(--au-surface); border:1px solid rgba(255,255,255,.1); border-bottom:none; border-radius:20px 20px 0 0; padding:24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); max-height:82dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; animation:auSheetIn var(--au-dur-sheet) var(--au-ease-sheet) both }

/* [BUG do dono 2026-08-13] A folha só ANIMA quando abre de verdade. Todo
   toque num botão dela redesenha o hub e recria o nó — sem esta classe, a
   folha subia do rodapé de novo (e o fundo re-escurecia) a cada toque. */
.hub-inj-sheet-backdrop.hub-inj-sheet--static,
.hub-inj-sheet.hub-inj-sheet--static{ animation:none }

.hub-inj-sheet-x{ position:absolute; top:8px; right:10px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--au-muted); font-size:24px; line-height:1; cursor:pointer; padding:0; z-index:1 }

.hub-focus-manikin{ overflow:hidden }

.hub-focus-manikin.zoomed{ overflow:auto; max-height:340px; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y }

.hub-manikin-inner{ position:relative; width:100% }

.hub-focus-manikin.zoomed .hub-manikin-inner{ width:200% }

/* [dono 2026-08-10] Salvar = a pílula clara do app (o único fill sólido);
   estado "salvo ✓" em verde discreto (verde = concluído, régua). */
.hub-note-confirm{ width:100%; box-sizing:border-box; margin-top:14px; border:none; background:linear-gradient(180deg,var(--au-text),var(--au-cta-b)); color:var(--au-on-light); border-radius:100px; min-height:50px; padding:0; font:500 1.0625rem 'Sora',system-ui,sans-serif; cursor:pointer; transition:transform 120ms cubic-bezier(.22,1,.36,1) }

.hub-note-confirm:active{ transform:scale(.97) }

.hub-note-confirm.ok{ background:none; border:1px solid rgba(95,168,122,.5); color:var(--au-green) }

/* [redesign v2] Chips de JUNTA (modo lesão) — substituem as âncoras */
.hub-joint-chips-wrap{ margin-top:14px }

.hub-joint-chips-lbl{ font:400 .625rem 'Space Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--au-muted); margin:0 2px 7px }

.hub-joint-chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:3px }

.hub-joint-chips::-webkit-scrollbar{ display:none }

.hub-joint-chip{ flex:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); color:var(--au-muted); font:400 .875rem 'Sora'; padding:8px 13px; border-radius:100px; cursor:pointer; white-space:nowrap }

.hub-joint-chip.has{ border-color:rgba(224,137,90,.55); background:rgba(224,137,90,.14); color:var(--au-red) }

.hub-joint-chip.on{ box-shadow:0 0 0 1px rgba(224,137,90,.6) }

/* ═══ [dono 2026-08-18 · mockup manequim-lesao-dois-botoes, variante C] ═══
   TIPO DA LESÃO — dois botões ao lado direito do corpo, à altura em que o
   trapézio termina. Eles decidem O QUE é tocável no manequim (ver
   hubInjuryTarget no body.js).

   POSIÇÃO, e por que é aqui: eles são absolutos dentro do `.hub-inj-stage`
   (a coluna que segura manequim + dica), NUNCA dentro do `.hub-manikin-topbar`
   — aquele encolhe até os 240px do desenho, e `right:0` ali jogaria os botões
   POR CIMA do braço. Medido em 390px: o braço termina em x=287, o botão
   começa em 298 (11px de folga) e a tela acaba em 364.
   O `top` de 92px é o que deixa o par abaixo do "L" da vista (que termina em
   ~y=866 na medição) e alinhado com o fim do trapézio. */
.hub-inj-stage{ position:relative }

/* TELA ESTREITA: o corpo cede a coluna dos botões. Medido antes de escolher o
   corte — com o manequim de 240px centralizado, a folga entre a borda do braço
   e o botão é `largura_do_container/2 − 158`: em 390px sobram 11px, em 375px
   só 3,5px e em 320px o botão entrava 24px DENTRO do braço, roubando toque de
   uma região que a própria tela manda tocar. Acima de 383px nada muda — a tela
   aprovada continua igual. */
@media (max-width:383px){
  .hub-inj-stage--alvo .hub-manikin-frame{ max-width:calc(100% - 82px); margin:0 82px 0 0 }
}

.hub-inj-target{ position:absolute; right:0; top:92px; display:flex; flex-direction:column; gap:2px; z-index:4 }

/* [dono 2026-09-02] Cada tipo é um INTERRUPTOR (`.au-switch`, o mesmo da
   Conta) com o rótulo em cima: a linha inteira é o botão — 72×56, acima dos
   44 do contrato. Cobre só no ligado (um uso de cobre por vez); desligado é
   um trilho apagado, sem cor. Os dois podem estar desligados: a tela abre
   NEUTRA (decisão do dono, 18/08) e ligar um desliga o outro. */
.hub-inj-target-row{ flex-direction:column; gap:6px; width:72px; min-height:56px; color:var(--au-muted) }
.hub-inj-target-row.on{ color:var(--au-text) }
.hub-inj-target-lbl{ font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.06em }

/* [dono 2026-09-02] O ícone do histórico do foco, ao lado do girar: só
   existe com dois envios ou mais; aceso (ouro) enquanto a linha do tempo
   está aberta. */
.hub-hist-btn{ color:var(--au-muted) }
.hub-hist-btn[aria-pressed="true"]{ color:var(--au-gold) }
.hub-top-right{ display:flex; align-items:center; gap:2px }

/* [dono 2026-09-02] A FOLHA DAS LESÕES. A lista saiu de baixo do corpo (ela
   "ocupava um espaço grande na parte inferior") e vive atrás de um link
   discreto. Mesma família da folha do aluno (aluno-folha.js): sobe do
   rodapé, acima da barra de abas, fecha no X e no véu. */
#hubInjListSheet .hil-back{ position:fixed; inset:0; z-index:4600; background:rgba(5,5,4,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:flex-end; justify-content:center; animation:auFadeIn 200ms linear both }
#hubInjListSheet .hil-back.closing{ animation:auFadeOut 200ms linear both }
#hubInjListSheet .hil-sheet{ position:relative; width:100%; max-width:460px; box-sizing:border-box; background:var(--au-surface); border:1px solid var(--au-line); border-bottom:none; border-radius:20px 20px 0 0; padding:22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); max-height:84dvh; display:flex; flex-direction:column; font-family:'Sora',sans-serif; animation:hilUp 260ms cubic-bezier(.32,.72,0,1) both }
#hubInjListSheet .hil-back.closing .hil-sheet{ animation:hilDown 200ms cubic-bezier(.32,.72,0,1) both }
/* keyframes próprios: os da folha do COACH vivem no <style> que ela injeta, e o atleta nunca a abre */
@keyframes hilUp{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }
@keyframes hilDown{ from{ transform:translateY(0) } to{ transform:translateY(100%) } }
#hubInjListSheet .hil-x{ position:absolute; top:6px; right:8px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--au-muted); font-size:24px; line-height:1; cursor:pointer; padding:0 }
#hubInjListSheet .hil-list{ margin-top:10px; overflow-y:auto; -webkit-overflow-scrolling:touch }
@media (prefers-reduced-motion: reduce){ #hubInjListSheet .hil-sheet, #hubInjListSheet .hil-back{ animation-duration:1ms } }

/* [fix v2] O SVG do manequim precisa PREENCHER o container (width:100%) pra
   casar com o overlay dos marcadores (que já é 100%). Sem isso, o desenho
   ficava ~150px e o overlay ~210px → pontos de lesão desalinhados e figura
   descentralizada. */
.hub-manikin-inner .body-focus-diagram{ width:100%; max-width:100%; height:auto; display:block }

/* ═══════════════════════════════════════════════════════════════════════
   ACESSIBILIDADE — implementação GERAL (Apple HIG)
   ═══════════════════════════════════════════════════════════════════════ */

/* (1) ALVO DE TOQUE MÍNIMO 44×44pt — estratégia de ÁREA INVISÍVEL.
   Um ::after transparente amplia só a ÁREA TOCÁVEL; o tamanho VISUAL do
   controle não muda (a Apple permite alvo maior que o desenho). Assim os
   controles densos (player, body-hub, chips) continuam iguais aos olhos,
   mas ficam fáceis de acertar no dedo.
   GRUPO A = controles ISOLADOS → alvo 44×44 completo.
   GRUPO B = controles em FILEIRA (chips/abas/segmentos/notas) → só ALTURA
             44, pra não sobrepor o vizinho na horizontal.
   Fora daqui de propósito: .set-stepbox-* (overflow:hidden cortaria o
   ::after; vive no executador acordeão antigo, hoje pouco usado) e
   .week-encaixe-place-btn (já usa ::after próprio). */

/* position:relative só nos que NÃO são posicionados (hub-lr/hub-zoom-btn/
   já são absolute/relative — o ::after já os referencia). */
.home-history-btn, .hist-edit-btn, .mod-block-del, .hub-flip-btn,
.agenda-navbtn, .body-photo-shortcut, .injury-resolve-toggle, .delete-injury,
.receipt-ex-edit, .onb-reveal-edit, .warmup-ramp-step,
.editor-week-count-stepper .icon-btn,
#btnAccountSeePlans, #fsBlockNav, #fsSkipSetLink, #fsSkipExLink,
#fsOvUndo, #fsOvFinish, #fsOvCancel,
#btnOnboardingSkip, #btnOnboardingBack, #btnOnboardingRevealBack, #btnOnbDataSubBack,
button[onclick^="openBodyPhotoModal"], button[onclick^="openAccountModal"],
.injury-joint-pill, .injury-side-pill, .injury-finger-pill,
.injury-toe-pill, .injury-move-pill, .injury-severity-pill, .injury-since-pill,
.set-dot, .mobperc-sg, .attn-tab, .hub-joint-chip, .hub-seg-pill,
.mod-seg-btn, .hub-mode-seg button, .rpx-open-btn, .hub-inj-remove,
.onboarding-level-btn, .onboarding-chip,
[data-delta], [data-mobflex-mode], [data-mobperc-level],
[data-injury-filter], [data-body-hub]{
  position: relative;
}

/* GRUPO A — alvo 44×44 completo */
.home-history-btn::after, .hist-edit-btn::after, .mod-block-del::after,
.hub-flip-btn::after, .agenda-navbtn::after, .body-photo-shortcut::after,
.injury-resolve-toggle::after, .receipt-ex-edit::after,
.onb-reveal-edit::after, .warmup-ramp-step::after,
.editor-week-count-stepper .icon-btn::after,
.hub-lr::after, .hub-zoom-btn::after,
#btnAccountSeePlans::after, #fsBlockNav::after, #fsSkipSetLink::after,
#fsSkipExLink::after, #fsOvUndo::after, #fsOvFinish::after, #fsOvCancel::after,
#btnOnboardingSkip::after, #btnOnboardingBack::after,
#btnOnboardingRevealBack::after, #btnOnbDataSubBack::after,
button[onclick^="openBodyPhotoModal"]::after,
button[onclick^="openAccountModal"]::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
}

/* GRUPO B — só ALTURA 44 (fileiras: não amplia na horizontal p/ não
   sobrepor o chip/aba vizinho) */
.delete-injury::after,
.injury-joint-pill::after, .injury-side-pill::after, .injury-finger-pill::after,
.injury-toe-pill::after, .injury-move-pill::after, .injury-severity-pill::after,
.injury-since-pill::after,
.set-dot::after, .mobperc-sg::after, .attn-tab::after, .hub-joint-chip::after,
.hub-seg-pill::after, .mod-seg-btn::after, .hub-mode-seg button::after,
.rpx-open-btn::after, .hub-inj-remove::after, .onboarding-level-btn::after,
.onboarding-chip::after, [data-delta]::after, [data-mobflex-mode]::after,
[data-mobperc-level]::after, [data-injury-filter]::after, [data-body-hub]::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  min-height: 44px;
}

/* [varredura 2026-08-11] reduced-motion da folha de lesão: mantém o fade,
   corta o deslize (mesma régua das folhas irmãs em base.css). */
@media (prefers-reduced-motion: reduce) {
  .hub-inj-sheet-backdrop, .hub-inj-sheet { animation: auFadeIn 200ms linear both; }
}