/* ported.css — [auditoria] estilos do style.css do App 1 para classes que
   os transplantes usam (agenda, conta, etc.) e estavam SEM CSS (visual
   silenciosamente quebrado). Migração pra tokens AURUM é pendência. */

/* ═══ PONTE DE TOKENS (auditoria apple-design 2026-08-11) ═══════════════
   Este arquivo referencia 48 variáveis do App 1 que NUNCA existiram no
   App2. O modo de falha do CSS aqui não é "cor errada": em
   `border:1px solid var(--border)` o shorthand inteiro fica inválido e o
   elemento perde a borda; em `transition:X var(--dur-fast) var(--ease-snap)`
   a declaração morre e NÃO HÁ transição. Vítimas reais que isso consertou:
   o switch da Conta (sem trilho nem borda), os campos do modal da agenda
   (invisíveis), o "×" de remover faixa (sem cor de perigo), o estado
   selecionado das pílulas de lesão (não pintava nada) e o zoom da mão
   (traço preto sobre preto).
   A ponte aponta cada nome legado para o token AURUM equivalente. Ela é
   temporária: à medida que as telas migrarem para var(--au-*), estas
   linhas saem junto. ══════════════════════════════════════════════════ */
:root{
  --border:var(--au-line);
  --line:var(--au-line);
  --line-strong:rgba(255,255,255,.14);
  --text:var(--au-text);
  --text-soft:var(--au-text-soft);
  --text-inverse:var(--au-on-light);
  --muted:var(--au-muted);
  --t1:var(--au-text);
  --t2:var(--au-text-soft);
  --t3:var(--au-muted);
  --surface-2:var(--au-surface-2);
  --surface-on:var(--au-surface-2);
  --card:var(--au-surface);
  --danger:var(--au-orange);
  --danger-soft:rgba(217,154,108,.12);
  --warn:var(--au-orange);
  --warn-bd:rgba(217,154,108,.45);
  --warn-bg:rgba(217,154,108,.10);
  --success:var(--au-green);
  --gold:var(--au-gold);
  --gold-soft:rgba(201,162,74,.18);
  --gold-warm:var(--au-gold-hi);
  --injury:var(--au-orange);
  --injury-soft:rgba(217,154,108,.12);
  --injury-glow:var(--au-glow-copper);
  --data:var(--au-text);
  --data-stroke:var(--au-text-soft);
  --data-glow:var(--au-glow-gold-soft);
  --action:var(--au-text);
  --action-fg:var(--au-on-light);
  --action-glow:var(--au-btn-shadow);
  --accent-cool:var(--au-text-soft);
  --glow-accent-soft:var(--au-glow-gold-soft);
  --navy-100:var(--au-muted);
  --navy-400:var(--au-muted);
  --navy-500:var(--au-faint);
  --navy-600:var(--au-surface-2);
  --navy-700:var(--au-surface);
  --navy-800:var(--au-surface);
  --navy-950:var(--au-bg);
  --bg-gradient:var(--au-bg);
  --radius:16px;
  --radius-sm:13px;
  --shadow-sm:0 6px 18px -12px rgba(0,0,0,.7);
  --shadow-md:0 14px 34px -18px rgba(0,0,0,.8);
  --dur-fast:var(--au-dur-press);
  --dur-base:var(--au-dur);
  --dur-slow:var(--au-dur-sheet);
  --ease-snap:var(--au-ease);
  --ease-entrance:var(--au-ease-sheet);
}

/* @keyframes que o arquivo referenciava e nunca existiram: o spinner do
   botão de login era um anel PARADO e o menu de idioma não aparecia. */
@keyframes btnSpinnerRotate{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
@keyframes menuPop{ from{ opacity:0 } to{ opacity:1 } }

/* [apple-design §10] hover só onde existe ponteiro fino — em toque o
   estado "levantado" grudava no botão depois do dedo sair. E o press
   substitui o translateY: quem toca vê o botão ceder, não subir. */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover:not(:disabled),
  .btn-start-workout:hover:not(:disabled),
  .btn-free-workout:hover:not(:disabled){
    box-shadow: var(--glow-accent-soft);
  }
}

.session-card,
.program-card,
.coaching-goal-banner,
.body-scan-photo-slot{
  transition: transform var(--dur-base) var(--ease-snap), box-shadow var(--dur-base) var(--ease-snap), border-color var(--dur-base) var(--ease-snap);
}

@media (hover:hover) and (pointer:fine){
  .session-card:hover,
  .program-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}

.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: 0;
}

/* Popup em si: sobrescreve o layout de linha único de .tabs (herdado
   pra manter os seletores ".tabs .tab-btn" de sempre funcionando) por
   uma lista vertical — cartão flutuante clássico (mesmo padrão visual
   de .lang-menu), posicionado via JS (position:fixed + top/left
   calculados a partir do botão, ver openNavMenuPopup em app.js, pra
   continuar ancorado nele mesmo depois de reposicionado). */
.nav-menu-popup{
  position: fixed;
  flex-direction: column;
  overflow: visible;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  min-width: 180px;
  box-shadow: var(--shadow-md);
  z-index: 40;
  gap: 2px;
}

.login-view{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(78% 46% at 50% 20%, #171614, #060606 66%);
}

.login-card .btn-primary{ margin-top: 4px; width: 100%; }

.login-error{
  margin: 0;
  font-size: 12.5px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 8px;
  padding: 8px 10px;
}

.btn-link{
  display: block;
  margin: 16px auto 0;
  background: none;
  border: none;
  color: var(--navy-600);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* Seletor de idioma: um botão que mostra o idioma atual e abre um
   menu dropdown com as opções (em vez do antigo botão de "trocar pra
   X" que virava a página inteira). */
.lang-switcher{
  position: relative;
  margin-left: auto;
}

.btn-lang-toggle{
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-inverse);
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
}

.lang-menu{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  min-width: 150px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lang-menu:not(.hidden){ animation: menuPop var(--dur-slow) var(--ease-entrance) both; }

.lang-option{
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}

@media (hover:hover) and (pointer:fine){ .lang-option:hover{ background: var(--surface-2); } }

.lang-switcher-login{
  position: absolute;
  top: 16px;
  right: 16px;
  margin-left: 0;
}

.lang-switcher-login .lang-menu{
  color: var(--text);
}

/* ============================================================
   [FE — Menus Noir] Migração deliberada das superfícies OPACAS legadas
   (menu de navegação #navMenuPopup e menu de idioma) pro Noir Depth.
   FATIA A deixou o --surface global OPACO (#151d1b) DE PROPÓSITO pra
   essas telas ocluírem o que passa atrás — mas o skin continuava legado
   (surface petróleo claro, borda #263330, texto #e8ece9, ativo em OURO
   antigo). Aqui elas viram CARDS OPACOS Noir (não vidro: seguem sólidas
   pra ocluir), com hairlines claros e o "atual/ativo" na linguagem
   GELADA (--data) — nunca dourado, que no Noir é semântica de AQUECIMENTO
   (ver [SENIOR] d6c1abf/7a7080d). Escopado nos dois menus; nada global. */
.nav-menu-popup,
.lang-menu{
  background: #0f1614;                 /* superfície Noir OPACA (oclui) */
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.8),
              0 0 0 1px rgba(0, 0, 0, 0.35),
              0 0 24px -14px var(--data-glow);
}

/* opções do menu de idioma */
.lang-option{ color: var(--t1); }

@media (hover:hover) and (pointer:fine){ .lang-option:hover{ background: var(--surface-on); } }

.onboarding-actions .btn-link{ margin: 0; flex: 1; text-align: center; }

.onboarding-actions .btn-primary{ flex: 0 0 auto; min-width: 110px; }

/* Faixa horizontal dos dias da semana (Editor): cada dia vira uma
   coluna de largura fixa, deslizando para o lado em vez de empilhar
   os 7 dias verticalmente. (Na Jornada do atleta isso foi retirado —
   lá agora é só a lista direta dos treinos, ver .week-sessions-list.) */
.days-grid{
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

/* Jornada (atleta): os treinos da semana em grid de 2 colunas (sem
   agrupar por dia — cada card já mostra um selo com o dia). Cards da
   mesma linha ficam com a mesma altura, e o botão "Iniciar treino"
   sempre gruda no rodapé do card, mesmo se o conteúdo acima variar. */
.week-sessions-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.week-sessions-list .session-card{
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.week-sessions-list .btn-start-workout{ margin-top: auto; }

.week-sessions-list{ grid-template-columns: 1fr; }

.session-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy-700);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}

.session-card:last-child{ margin-bottom: 0; }

.session-head{
  display: flex;
  align-items: center;
  gap: 9px;
}

.session-icon{
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: 9px;
}

.session-title{ font-weight: 700; font-size: 14px; flex: 1; color: var(--text); }

.session-meta-line{
  margin: 4px 0 6px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.session-meta-line .icon{ flex-shrink: 0; }

.session-actions{ display: flex; gap: 4px; }

.history-row{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-top: 0.5px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.history-row:first-child{ border-top: none; }

@media (hover:hover) and (pointer:fine){ .history-row:hover{ background: rgba(255, 255, 255, 0.04); } }

.session-detail{
  margin: 6px 0 4px;
  font-size: 13.5px;
  color: var(--text);
}

.session-meta{ display: flex; gap: 6px; flex-wrap: wrap; }

.session-notes{
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* Task #174: removida daqui a família .goal-body-progress-bar/-fill/
   -labels/-mid (+ .journey-race-strip .goal-body-progress-labels) — o
   comentário que ficava aqui já citava journeyGoalProgressBodyHTML como
   dona dessas classes, mas essa função hoje só renderiza
   .goal-progress-section > journeyPerformanceGoalSectionHTML (ver
   app.js) — a barra "de corpo" antiga não existe mais nessa função,
   nenhuma referência restante em app.js/onboarding.js. */

/* Gráfico de volume da fase atual (Opção D) — 2 barrinhas por
   modalidade de endurance (atual/dourado x meta/contorno), ver
   journeyPhaseVolumeChartHTML em app.js. Substitui a antiga barra
   segmentada por fase (progress-track-segmented), que ficou redundante
   assim que esse gráfico passou a existir. */


/* Tracinho dourado na frente dos títulos de seção da tela Race — dá
   ritmo visual sem pesar (mesma família dos títulos: PHASE VOLUME,
   UPCOMING PHASES). */


/* v3: UMA barra horizontal de progresso por modalidade (pedido: "ao ir
   completando treinos, a barra vai enchendo") — o trilho inteiro É a
   meta e o preenchimento dourado é o volume já feito, então "atual x
   meta" fica visível na forma (quanto falta encher) E no número
   "atual / meta km" à direita. Meta batida = barra cheia + tudo
   dourado. v4: SEM destaque de cor/contorno em nenhuma modalidade
   (pedido explícito: "não quero nenhuma marcação em amarelo") — todas
   as linhas têm exatamente o mesmo fundo neutro. */
/* Redesign aprovado: as modalidades eram 3 cartões separados empilhados
   (cada um com seu próprio fundo/borda) — bastante peso visual pra uma
   lista de 2-3 linhas. Agora .volume-hbar-list é o bloco único (borda +
   raio), e cada .volume-hbar é só uma linha dentro dele, separada por
   um filete inferior (exceto a última). */


/* Rodapé por modalidade: sessões planejadas (esq.) + tendência de
   carga vs semana anterior (dir.). */


/* Task #241: era um coral solto (#e07a5f) — consolidado em --danger,
   o vermelho único do app (queda de volume lê como sinal negativo). */


/* As estrelinhas de afinidade (.goal-aptitude-*/


/* Barra em 0% não mostra nem o min-width de arredondamento — vazio de
   verdade até o primeiro treino concluído. */


/* Sem meta definida: trilho hachurado (não tem 100% pra calcular). */


/* Resumo semanal minimalista (Programs > Coach 1:1) — ver
   programsWeekSummaryHTML em app.js. Sem card/borda ao redor (pedido:
   "me mostre isso minimalista"), só o rótulo pequeno da fase/semana e
   um chip por modalidade (Opção B "chips numa linha só", aprovada) —
   sem barra de progresso (pedido: "tire essas barras, ocupa muito
   espaco"), os chips ficam lado a lado e quebram linha quando não
   cabem mais. Chip fica verde quando bate 100%. */


/* Chips de fases futuras trancadas (Opção A), logo abaixo do gráfico
   de volume — ver journeyLockedPhasesChipsHTML em app.js. Compactas,
   não-clicáveis, opacidade reduzida pra ficar claro que ainda não deu
   pra chegar lá. */


/* Meta de volume por fase (Editor) — 3 campos numéricos curtos, um por
   modalidade de endurance, junto do stepper "Semanas nesta fase" (ver
   renderEditorView em app.js). */
.editor-volume-targets-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label-standalone{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.editor-volume-targets-row{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.editor-volume-target-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
}

.editor-volume-target-item input{
  width: 72px;
  padding: 8px;
  text-align: center;
  font-size: 13px;
}

.hist-edit-actions .btn-primary{ flex: 1; }

/* ---------- Task #239: página Race redesenhada (abas Semana/Fases) ----------
   A antiga estrada segmentada de 4 fases (.phase-timeline*, sempre
   visível no topo) saiu — a informação de fase/progresso agora mora
   inteira dentro da aba "Fases" (lista vertical + barra fina de
   progresso, ver .race-phases-* abaixo), nunca mais competindo por
   espaço com o volume semanal. */
/* Pill de duas opções ("Semana"/"Fases") — container arredondado com
   fundo, o botão ativo ganha um fundo próprio destacado. Não existia
   um componente idêntico a este no app (mais perto: o underline-tabs
   de Programs e os botões-pílula soltos .goal-aesthetic-mode-btn) —
   ver comentário em raceTabPillsHTML (app.js) sobre a decisão. */
.race-tab-pills{
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 0.5px solid var(--border);
  margin-bottom: 10px;
}

.program-week-block .btn-add-session{
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Fica dentro do card navy da faixa de objetivos — por isso os tons
   claros/translúcidos em vez de branco sólido. Scroll horizontal com
   encaixe TRAVADO (mandatory + scroll-snap-stop:always, igual ao resto
   do app — ver .week-scroll-page): "proximity" deixava o dedo mais leve
   parar ENTRE cards, ficando esquisito ("meio de página"); mandatory
   sempre completa a virada até o próximo card por inteiro. */


.week-detail-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.week-detail-head h2{
  font-size: 16px;
  margin: 0;
  color: var(--text);
}

.subscription-past-due-notice .btn-link{ color: var(--danger); font-weight: 700; }

.btn-danger-text{ color: var(--danger); }

@media (hover:hover) and (pointer:fine){ .btn-danger-text:hover{ background: var(--danger-soft); border-color: var(--danger); } }

/* [FE 30/07] .btn-secondary (definida mais ABAIXO no arquivo) empatava a
   especificidade e vencia pela ordem — o "Remover video" saia branco.
   Dupla classe desempata de vez. */
.btn-secondary.btn-danger-text{ color: var(--danger); }

/* [SEM ZOOM · dono 2026-08-18] o cartão encolhia pra scale(.92) enquanto
   sumia. Ficou só o fade — a transição de transform saiu junto, porque
   transição de propriedade que ninguém mais muda é peso morto que engana
   quem lê. */
.session-card.card-removing{
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-snap);
  pointer-events: none;
}

.my-workout-card .session-icon{ width: 26px; height: 26px; }

.my-workout-card .session-title{ font-size: 13px; }

/* Modal de treino (estilo "iniciar treino") */

.workout-modal{ max-width: 520px; }

/* Task #224: cabeçalho vira uma barra FIXA de verdade — ícone, título/
   subtítulo, badge do cronômetro e o botão de fechar/minimizar (ver
   dismissBtnHTML, agora um filho deste container em vez de flutuar
   sozinho por cima de tudo) moram todos dentro do MESMO bloco sticky,
   com fundo opaco (--surface, igual o resto do modal) e uma sombra/
   filete sutil embaixo — em vez de só o "X" ficar grudado no topo
   (Task #168) enquanto o resto do cabeçalho rolava por baixo dele.
   `margin` negativo (mesmo valor do padding do .modal, 22px) sangra o
   cabeçalho até as bordas do modal; `padding` interno reconstrói o
   respiro pro conteúdo. `top: 0` gruda exatamente na borda superior da
   área de rolagem (o próprio .modal, que é quem tem overflow-y:auto)
   assim que a lista de exercícios começa a passar por baixo dele. */
.workout-head{
  position: sticky;
  top: 0;
  z-index: 6;
  margin: -22px -22px 10px;
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.5);
}

/* Task #294: dentro da barra sticky (que continua colada/opaca/sombreada
   como o #224 deixou) vive agora um CARD bento de modalidade — fundo
   tintado pela disciplina (inline via MODALITY_TINT_BG), raio 16 e o
   watermark do ícone da disciplina vazando no canto superior direito
   (mesma família visual dos cards da Home, #292/#293). A borda-filete
   lateral colorida do cabeçalho antigo saiu: a identidade agora é o
   próprio tint + chip. */
.workout-head-card{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  padding: 12px 14px;
}

.workout-head-watermark{
  position: absolute;
  top: -34px;
  right: -26px;
  opacity: 0.08;
  line-height: 0;
  pointer-events: none;
}

.workout-head-card > *:not(.workout-head-watermark){
  position: relative;
  z-index: 1;
}

/* O botão de fechar/minimizar (.modal-close-x) agora é só mais um
   filho do card do cabeçalho — desliga o posicionamento antigo de
   "canto de modal flutuante" (position:sticky + float:right, Task #168,
   ainda usado por TODOS os outros modais do app) e vira um filho comum
   da linha flex, empurrado pro canto direito com margin-left:auto.
   Mesmo quadrado padrão de 34px do #168, mesmo id/handler. */
.workout-head .modal-close-x{
  position: static;
  float: none;
  margin: 0 0 0 auto;
  flex-shrink: 0;
}

.workout-head-info{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.workout-head h3{ margin: 0; font-size: 18px; font-weight: 500; color: #fff; }

.workout-sub{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.message-text{ color: var(--text); flex: 1; }

.message-edit-btn{ margin-left: auto; flex-shrink: 0; color: var(--navy-400); }

.message-row-editing{ align-items: flex-start; flex-direction: column; }

.message-edit-actions{ display: flex; gap: 4px; flex-shrink: 0; }

.message-edit-save{ color: var(--success); }

.message-edit-cancel{ color: var(--navy-400); }

.messages-empty{ font-size: 12.5px; margin-bottom: 8px; }

/* Task #233 — recibo de treino concluído (redesign completo):
   quadro de stats em destaque (volume/duração/esforço), nota sempre em
   itálico (com placeholder quando vazia) e ações com hierarquia real
   ("Reabrir" = link discreto, "Cancelar treino" = botão contornado
   tintado --danger). O ícone circular tintado do cabeçalho
   (.workout-icon-receipt) saiu no #294 — a identidade da modalidade no
   cabeçalho agora é o card tintado + chip + watermark. */

.workout-receipt-detail{ margin-bottom: 4px; }

/* Corrige o bug real de sobreposição do rótulo "WORKOUT" atrás de uma
   linha divisória: o wrapper próprio (sem margin negativo, sem borda
   colada) garante respiro de verdade acima/abaixo do eyebrow — e a cor
   escopada só a este contexto (var(--muted), não a var(--t2)
   normal de .workout-section-title) tira o azul solto daqui sem afetar
   as outras telas que reaproveitam essa mesma classe (Programas,
   Biblioteca de exercícios, Capacidades etc). */
.workout-receipt-detail .workout-section-title{ color: var(--muted); }

/* Nota do treino: itálico discreto SEMPRE (texto real ou placeholder
   vazio, Task #233 cobre o estado vazio que antes nem existia — sem
   nota, o parágrafo simplesmente não aparecia). */
.workout-receipt-notes{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-soft, var(--muted));
}

.workout-receipt-notes-empty{ color: var(--muted); opacity: 0.75; }

.workout-receipt-actions{ justify-content: space-between; }

.badge.exercises{ background: var(--navy-100); color: var(--navy-700); }

/* Editor de exercícios estruturados (dentro do modal de sessão) */

.exercises-editor-section{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-2);
}

.exercises-editor-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.exercises-editor-header h4{ margin: 0; font-size: 13px; color: var(--text); }

.exercises-editor-hint{ color: var(--muted); font-weight: 400; font-size: 11px; }

.exercises-editor-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exercises-editor-actions .btn-add-exercise-bottom,
.exercises-editor-actions .btn-create-superset{
  flex: 1;
  width: auto;
}

.exercises-editor-actions .btn-create-exercise-toggle{
  flex: 1 1 100%;
  width: auto;
}

.btn-create-exercise-toggle{
  border-style: dashed;
  border-color: var(--data);
  background: var(--surface);
  color: var(--navy-100);
  font-weight: 700;
  padding: 10px;
}

/* Formulário inline de cadastro de exercício na biblioteca — só
   aparece no Editor de treino do treinador (openSessionModal), nunca
   no treino livre do atleta. Fica dentro do próprio modal (não é um
   modal novo) pra não perder o rascunho da sessão em andamento. */
.create-exercise-inline{
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.create-exercise-inline label{
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.create-exercise-inline label input{
  margin-top: 4px;
}

.create-exercise-inline-actions{
  margin-top: 4px;
}

.create-exercise-feedback{
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--success);
}

.create-exercise-feedback-error{
  color: var(--danger);
}

/* Aba Biblioteca (só treinador) — [dono 06/09/2026, "implemente A"] a lista
   virou linha (miniatura · nome · resumo) e a classificação foi pro PAINEL
   (coach-library-painel.js). As regras das pílulas por linha, do botão
   CLASSIFICAR e do cartão morreram aqui; o que sobrou é o que a lista
   nova ainda usa. O visual AURUM está no bloco `#libraryView` lá embaixo. */
.library-search-field{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  margin-bottom: 12px;
}
.library-search-field input{
  flex: 1;
  border: none;
  background: none;
  color: inherit;
  font-size: 13.5px;
  padding: 0;
}
.library-search-field input:focus{
  outline: none;
  color: var(--text);
}
.library-search-field .icon{ flex-shrink: 0; }
.library-groups{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.library-group-count{
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  margin-left: 4px;
}
.library-empty-state{
  color: var(--muted);
  font-size: 13px;
  padding: 8px 2px;
}
.library-edit-form{
  width: 100%;
  padding: 10px 0;
}
.library-edit-form label{
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.library-edit-form label input{
  margin-top: 4px;
}
.library-edit-actions{
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.btn-add-exercise-bottom{
  width: 100%;
  border-style: dashed;
  border-color: var(--navy-600);
  background: var(--surface);
  color: var(--data);
  font-weight: 700;
  padding: 10px;
}

.btn-create-superset{
  border-style: dashed;
  border-color: var(--gold);
  background: var(--surface);
  color: #8a6d13;
  font-weight: 700;
  padding: 10px;
}

.video-available-tag{ font-size: 13px; }

/* Modal de vídeo do exercício */

.video-modal{ max-width: 460px; }

.video-embed-wrap{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--navy-950);
}

.video-embed-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Vídeo próprio (enviado pelo treinador via upload) — mesmo enquadre
   16:9 do embed do YouTube, mas com o elemento <video> nativo. */
/* [FE 30/07 — bug do "pulo" reproduzido pelo dono] A moldura do video
   PROPRIO ja nasce vertical (3:4) no render — antes nascia 16:9 e so
   corrigia no loadedmetadata (fitWrap), e esse intervalo era o pulo
   horizontal->vertical. Escopado SO ao video proprio: o iframe do
   YouTube segue 16:9 na classe base. O fitWrap continua valendo (video
   mais largo reabre a moldura pro aspecto real, via style inline). A
   capa (poster) desenha dentro da moldura vertical desde o 1o quadro. */
.video-embed-wrap.video-embed-wrap-custom{
  padding-top: 0;
  aspect-ratio: 0.75;
}

/* [dono 2026-09-08, "o video em si nunca carrega"] O PLAYER DO APP PRECISA
   TER A ALTURA DA MOLDURA. Desde 07/09 o modal usa `auVideoHTML` e o vídeo
   passou a viver dentro de `.au-video`, que é `position:relative` — então o
   `position:absolute; inset:0` da regra abaixo passou a se ancorar NELE, e
   não na moldura. `.au-video` só tem filhos absolutos e `line-height:0`, ou
   seja colapsa: medido `314x0` com o vídeo carregado (readyState 4, 1080px,
   zero erro). Era um retângulo preto com o vídeo inteiro dentro dele. */
.video-embed-wrap .au-video{ position:absolute; inset:0; height:100%; }

.video-embed-wrap video.custom-exercise-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--navy-950);
  object-fit: contain;
}

.exercise-video-manage{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* [dono 07/09] a capa atual, no modo CAPA do modal do vídeo */
.lib-capa-atual{ display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
.lib-capa-atual img{ width:56px; height:56px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.1); display:block; }
.lib-capa-atual span{ font:400 var(--au-fs-mono) 'Space Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--au-muted); }

/* ── [dono 2026-09-07] A BARRA QUE VARRE OS QUADROS ────────────────────
   "Me possibilite selecionar qualquer frame do video para usar como capa."
   O `range` é nativo de propósito: arrastar, focar e andar por teclado já
   vêm de graça (regra 7). O que o CSS faz é vesti-lo com a linha do app —
   trilho de 3px, polegar de 22 no ouro, e o alvo de 44 na altura. */
.lib-capa-scrub{ display:flex; align-items:center; gap:10px; margin:8px 0 2px; }
.lib-capa-scrub input[type="range"]{
  flex:1; min-width:0; height:44px; margin:0; background:none; -webkit-appearance:none; appearance:none; cursor:pointer;
}
.lib-capa-scrub input[type="range"]::-webkit-slider-runnable-track{
  height:3px; border-radius:2px; background:rgba(255,255,255,.14);
}
.lib-capa-scrub input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:-9.5px;
  border-radius:50%; background:var(--au-gold); border:none; cursor:grab;
}
.lib-capa-scrub input[type="range"]::-moz-range-track{ height:3px; border-radius:2px; background:rgba(255,255,255,.14); }
.lib-capa-scrub input[type="range"]::-moz-range-thumb{ width:22px; height:22px; border:none; border-radius:50%; background:var(--au-gold); }
.lib-capa-scrub input[type="range"]:focus-visible{ outline:1px solid var(--au-gold); outline-offset:4px; }
.lib-capa-passo{
  width:44px; height:44px; flex:none; border:1px solid rgba(255,255,255,.14); border-radius:12px;
  background:none; color:var(--au-text-soft); font:400 18px 'Sora',sans-serif; cursor:pointer;
  display:grid; place-items:center; transition:transform 120ms cubic-bezier(.22,1,.36,1);
}
.lib-capa-passo:active{ transform:scale(.97); }
.lib-capa-tempo{
  flex:none; min-width:74px; text-align:right;
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.08em; color:var(--au-muted);
  font-variant-numeric:tabular-nums;
}

.exercise-video-manage .modal-hint{
  flex-basis: 100%;
  margin: 2px 0 0;
}

.video-caption{
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

.video-search-link{
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.video-thumb-link{
  position: relative;
  display: block;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--navy-950);
}

.video-thumb{ width: 100%; display: block; opacity: 0.85; }

.video-thumb-play{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(10, 31, 68, 0.85);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

/* ---------- Ilustração de músculo trabalhado (diagrama corporal) ----------
   Ilustração própria e simples (formas geométricas), não é foto/animação
   de terceiros. Fica no mesmo modal do vídeo, acima dele, quando o
   exercício tem essa informação cadastrada (ver js/muscleDiagrams.js). */
.muscle-diagram-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 0 4px;
  display: flex;
  justify-content: center;
}

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

.muscle-diagram-legend{
  margin: 8px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.muscle-diagram-legend p{
  margin: 0;
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.legend-dot-primary{ background: #e0895a; }

.legend-dot-secondary{ background: #ecb8a3; }

.editor-status{
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

.editor-settings-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.editor-settings-actions button{ font-size: 12.5px; padding: 9px 12px; }

/* Campo único "Semanas nesta fase" — substitui o antigo botão de "+1
   semana por clique". Editar o número (digitando, Enter/blur, ou pelos
   botões −/+) sincroniza o total de semanas da fase direto; encolher
   confirma antes se alguma semana removida tiver treino salvo (ver
   applyPhaseWeekCountChange em app.js). */
.editor-week-count-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.check-label-inline{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  font-size: 13px !important;
  color: var(--text) !important;
}

.check-label-inline input{ width: auto; accent-color: var(--navy-800); }

.modal-hint{
  font-size: 13px;
  color: var(--navy-700);
  background: var(--navy-100);
  border-radius: 8px;
  padding: 8px 10px;
  margin: -4px 0 8px;
}

.badge.pending{ background: var(--gold-soft); color: #8a6d13; }

.check-label{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  font-size: 13px !important;
  color: var(--text) !important;
}

.check-label input{ width: auto; accent-color: var(--navy-800); }

/* Editor */

.editor-settings{
  display: grid;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.field-hint{
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.editor-settings label{
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.editor-settings input,
.editor-settings select{
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
}

.btn-add-session{
  border: 1px solid var(--navy-600);
  background: none;
  color: var(--data);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

/* [loop visual · grupo FONTES, 2026-08-13] O `font-size` FALTAVA aqui, e
   `<button>` não herda tamanho: o aurum.css dá `font-family:inherit` a
   button/input/select/textarea, mas o piso de 17px contra o zoom do iOS é
   só de `input, select, textarea` — o button ficou de fora. Resultado
   medido: "Salvar" caía no default do navegador, 13.3333px, **menor que o
   "Cancelar" de 14px que fica colado nele** — o botão principal menor que
   o secundário. Ninguém desenha isso; é ausência de declaração.
   Alinhado ao PAR VISUAL (.btn-secondary, base.css:154, .875rem): o que
   divide a linha tem que ter o mesmo tamanho. Só o tamanho entra — peso e
   família seguem como estavam, pra a mudança ser a mínima que resolve. */
.btn-primary{
  background: #eef1f0;
  border: none;
  color: #0b0b0b;
  font-weight: 700;
  font-size: var(--au-fs-s);
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-snap);
}

@media (hover:hover) and (pointer:fine){ .btn-primary:hover{ background: #dcdad3; } }

.btn-primary:disabled{ cursor: default; opacity: 0.85; }

/* Confirmar uma ação destrutiva (ver openAppConfirmModal, Task #85) —
   mesmo formato do botão primário, só troca a cor pra deixar claro que
   essa confirmação não tem volta. */


/* Anel de loading do botão de login (ver setLoginButtonLoading em
   auth.js) — substitui o antigo piscar de texto "Entrando"/"Entrar", que
   parecia um bug (voltava a mostrar "Entrar" um instante antes da tela
   trocar de verdade). Usa currentColor pra herdar a cor do texto do
   botão (--text-inverse), então funciona em qualquer botão primário, não
   só no de login. */
.btn-spinner-ring{
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(238, 243, 241, 0.3);
  border-top-color: currentColor;
  animation: btnSpinnerRotate 0.7s linear infinite;
}

/* Modal de confirmação genérico do app (ver openAppConfirmModal, Task
   #85) — texto simples acima dos dois botões. Fiel ao mockup aprovado
   "B2 · Modal de confirmação custom": os dois botões são outline/
   transparentes lado a lado (nenhum preenchido) — "Voltar" em tom
   neutro, a ação perigosa (ex: "Cancelar treino") com borda e texto
   --danger, nunca fundo sólido vermelho gritando. */
.app-confirm-modal h3{ margin: 0 0 8px; }
/* o anel da folha OCUPADA ("marcando com seu crédito…") */
.app-confirm-modal .app-confirm-anel{ display:block; margin: 4px auto 14px; }
.app-confirm-modal .app-confirm-anel + .app-confirm-message{ text-align:center; margin-bottom: 4px; }

.app-confirm-message{ color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 18px; white-space: pre-line; }

.app-confirm-btn{
  flex: 1;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 10px;
  border-radius: 20px;
  cursor: pointer;
  min-height: 44px;
}
/* a confirmação destrutiva era IDÊNTICA ao "Voltar" — a classe existia no
   JS e não tinha regra nenhuma no CSS. */
.app-confirm-btn-danger{ color: var(--au-orange); border-color: rgba(217,154,108,.45); }

@media (hover:hover) and (pointer:fine){ .app-confirm-btn:hover{ border-color: var(--muted); } }

/* Task #131: modal obrigatório de RPE (esforço) ao finalizar o treino
   — raiz própria no body (#rpeModalRoot em app.js), empilhada por cima
   de tudo (z-index maior que o backdrop do modal de treino, ver
   .modal-backdrop-workout acima) e SEM X/click-fora pra fechar. */
.rpe-modal-backdrop{
  z-index: 90;
  align-items: center;
  background: rgba(3, 6, 5, 0.86);
}

/* Fundo bem mais escuro (+ blur, onde suportado) só nos modais de
   treino — a home atrás vira sombra e não compete com a execução. */
.modal-backdrop-workout{
  /* [fix recibo vazando] era rgba(3,6,5,.86): sem o blur (que não pega em
     todo navegador) a Home ficava LEGÍVEL por trás do recibo, parecendo
     quebrado. Recibo/player são tela cheia → fundo SÓLIDO. */
  background: #050504;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Task #177: classe usada por 3 modais "empilhados por cima de outro"
   com raiz própria (openExerciseEvolutionModal/openAppConfirmModal/
   openExerciseVideoModal, ver evolutionModalRoot/appConfirmModalRoot/
   videoModalRoot em app.js) — referenciada no HTML deles desde antes,
   mas sem regra nenhuma aqui (ficava com o fundo padrão translúcido
   fraco de .modal-backdrop, sem se destacar por estar em cima de outro
   modal). Reaproveita o MESMO visual de .modal-backdrop-workout (mais
   escuro + blur), já que a necessidade é a mesma: o que fica embaixo
   (inclusive outro modal) precisa recuar visualmente. */
.video-backdrop{
  background: rgba(3, 6, 5, 0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.messages-body.hidden{ display: none; }

.messages-body{ margin-top: 4px; }

/* Modal "Editar goals" — só o campo da meta da competição (a página de
   lesões/observações saiu daqui, ver coachingGoalsFormHTML em app.js).
   .goal-modal-field-title/.goal-modal-yesno* continuam em uso — foram
   reaproveitadas pelo pop-up de edição de condicionamento (ver
   fitnessEditModalHTML). */
.goal-modal-field-title{
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* Sub-escolha dentro de "Estética" (Recomposição/Perder peso/Ganhar
   peso) — visual mais discreto que o goal-modal-yesno-btn (usado nos
   toggles binários grandes), porque é uma escolha secundária dentro de
   uma categoria já selecionada. Mesma família visual dos chips de
   categoria acima, só que sem ícone. */
.goal-aesthetic-mode-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}

.goal-aesthetic-mode-btn{
  border: 1px solid var(--border);
  background: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}

@media (hover:hover) and (pointer:fine){
  .goal-aesthetic-mode-btn:hover{
    border-color: var(--data);
    color: var(--text);
  }
}

.goal-aesthetic-mode-btn.active{
  border-color: var(--gold);
  color: var(--gold);
}

.flex-test-anim{ width: 86px; height: auto; }

.flex-test-head{ fill: var(--text-inverse); opacity: 0.85; }

.flex-test-floor{ stroke: var(--border); }

/* Task #105: idioma (PT/EN) migrou do antigo .lang-switcher solto no
   topbar pra dentro do modal de conta — 2 botões diretos (só 2 opções,
   dropdown seria excesso), o ativo marcado por contraste. */
.account-lang-toggle{
  display: flex;
  gap: 4px;
}

/* [02/09/2026] Aqui morava o `.switch-toggle` (checkbox escondido + trilho)
   da Conta. Morreu: o app tem UM interruptor, o `.au-switch` do aurum.css. */

/* [auditoria] O par workoutSlideIn/animation:none foi removido: o
   @keyframes nunca existiu. O recibo agora usa a folha padrão do app
   (auSheetIn em base.css), entrando e saindo pelo mesmo caminho. */

.onboarding-hint{
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--muted);
  text-align: left;
}

/* [goal-telas · regra 12] Os ossos usavam var(--text-inverse)/--navy-*
   (variáveis do App 1 que NÃO existem no App2) — o traço resolvia pra
   invisível e o esqueleto sumia no fundo escuro. Tokens AURUM. */
.skel-bone path{
  stroke: var(--au-text-soft);
  fill: none;
  stroke-linecap: round;
  opacity: 0.92;
}

.skel-bone-fill,
.skel-bone-fill path,
.skel-bone-fill rect,
.skel-bone-fill ellipse{
  fill: var(--au-text-soft);
  opacity: 0.92;
}

.skel-socket circle,
.skel-socket path{
  fill: var(--au-surface-2);
  opacity: 0.9;
}

.skel-joint circle{ fill: var(--au-muted); opacity: 0.8; }

/* Lista das queixas — clean: só texto em vermelho, sem caixa com
   preenchimento. */
/* Lista de lesões — cartões compactos centralizados no mesmo eixo dos
   manequins (nada de linha esticada de ponta a ponta da tela). */
.injury-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px auto 0;
  width: 100%;
  max-width: 400px;
}

.injury-row{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid rgba(168, 41, 31, 0.35);
}

.injury-row-dot{
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--injury);
  box-shadow: var(--injury-glow);
}

.injury-row-body{
  flex: 1;
  min-width: 0;
}

.injury-row-title{
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--injury);
}

.injury-row-notes{
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

.injury-row .icon-btn{ color: var(--muted); flex-shrink: 0; }

/* Task #159: pop-up "N injuries" — lista compacta SEM caixa por linha
   (diferente de .injury-row/.injury-list acima, que é a fila PENDENTE
   dentro do modal de relatar — Task #154, não mudou), divisórias finas
   de 0.5px entre as linhas, nome + "· lado" na mesma linha (lado em
   cinza), descrição menor logo abaixo, ponto guardando a cor de
   "ativo" e lixeira discreta/apagada à direita. */

.injury-compact-list{
  display: flex;
  flex-direction: column;
  margin: 4px 0 2px;
  max-height: 50vh;
  overflow-y: auto;
}

/* Dentro do pop-up (fundo de modal, não o card navy) os ossos usam a
   cor de texto do modal pra manter contraste. */
.injury-modal .skel-bone path{ stroke: var(--au-text); }

.injury-modal .skel-bone-fill,
.injury-modal .skel-bone-fill path,
.injury-modal .skel-bone-fill rect,
.injury-modal .skel-bone-fill ellipse{
  fill: var(--au-text);
}

.injury-modal .skel-socket circle,
.injury-modal .skel-socket path{
  fill: var(--au-surface);
}

.injury-modal .skel-joint circle{ fill: var(--au-muted); }

/* Zoom da mão pra escolher o dedo (pop-up de lesão) — dedos clicáveis,
   o selecionado acende em vermelho. */
.injury-hand-wrap{
  display: flex;
  justify-content: center;
  margin: 4px 0 8px;
}

.injury-hand-zoom{
  width: 100%;
  max-width: 170px;
  height: auto;
}

.injury-hand-zoom .skel-bone path{ stroke: var(--text); opacity: 0.7; }

.injury-hand-zoom .skel-joint circle{ fill: var(--muted); }

.injury-hand-zoom .skel-bone-fill{ fill: var(--text); opacity: 0.6; }

.injury-finger-pill{
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-snap), background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}

.injury-finger-pill.active{
  border-color: var(--injury);
  background: var(--injury-soft);
  color: var(--injury);
  font-weight: 700;
}

/* Pop-up de relatar lesão — pílulas de articulação/lado. */
.injury-modal-label{
  margin: 10px 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.injury-joint-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.injury-joint-pill,
.injury-side-pill{
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-snap), background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}

.injury-joint-pill.active,
.injury-side-pill.active{
  border-color: var(--injury);
  background: var(--injury-soft);
  color: var(--injury);
  font-weight: 700;
}

/* Fila de lesões desta sessão de relato (antes de Concluir) — mesma
   estética clean da lista do mapa. */
.injury-pending-list{ margin: 2px 0 6px; }

.injury-pending-list:empty{ display: none; }

/* Task #242: tela cheia genérica pra telas que ERAM modal (Padrão A) mas
   são de PROFUNDIDADE, não de tarefa rápida — hoje: lista de Lesões e
   detalhe do Histórico. Mesmo motor real das outras telas cheias (fixed,
   inset:0, cobrindo a viewport, fecha com seta-voltar no cabeçalho), só
   que hospedada em modalRoot (fecha limpo por closeModal, que zera
   modalRoot). z-index 214 pra empilhar por cima da tela cheia da lista
   (pushed-screen, 210) quando um detalhe abre por cima dela, e abaixo do
   modal de foto (215). */
.modal-fullscreen{
  position: fixed;
  inset: 0;
  z-index: 310;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* [P6] Detalhe de lesão (tela do COACH) no vocabulário AURUM. As classes
   .injury-detail-* eram emitidas pelo JS e NÃO tinham regra nenhuma: a tela
   renderizava com <p> pelado, parecendo outro aplicativo. O fluxo do ATLETA
   é o manequim (body.js) — esta tela é a leitura do coach. */
.injury-detail-status{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.injury-detail-side{ font: 400 8.5px "Space Mono", monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--au-muted); }
.injury-status-chip{
  font: 400 8px "Space Mono", monospace; letter-spacing: .2em; text-transform: uppercase;
  color: var(--au-muted); border: 1px solid var(--au-line); border-radius: 100px; padding: 6px 11px;
}
.injury-detail-sec{ padding: 16px 0; border-bottom: 1px solid var(--au-line-soft); }
.injury-detail-sec:last-of-type{ border-bottom: none; }
.injury-detail-sec-label{
  font: 400 8px "Space Mono", monospace; letter-spacing: .28em; text-transform: uppercase;
  color: var(--au-gold-kicker); margin: 0 0 8px;
}
.injury-detail-note{ font: 300 14px/1.6 "Sora", sans-serif; color: var(--au-text-soft); margin: 0; }
.injury-detail-moves{ display: flex; flex-wrap: wrap; gap: 8px; }
.injury-move-chip{
  font: 300 12.5px "Sora", sans-serif; color: var(--au-text-soft);
  border: 1px solid rgba(217, 154, 108, .35); border-radius: 100px; padding: 8px 14px;
  min-height: 36px; display: inline-flex; align-items: center;
}
.injury-detail-affects-none{ font: 300 13px "Sora", sans-serif; color: var(--au-muted); margin: 0; }
.injury-sev{ display: inline-flex; align-items: center; gap: 6px; font: 400 8px "Space Mono", monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--au-muted); }
.injury-sev-dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Cabecalho/corpo da tela cheia (lista e detalhe de lesao) — as classes
   eram emitidas pelo JS e nao existiam no CSS. */
.modal-fullscreen-head{
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 22px 10px;
  border-bottom: 1px solid var(--au-line);
}
.modal-fullscreen-back{ float: none; flex: none; color: var(--au-muted); }
.modal-fullscreen-title{
  flex: 1; min-width: 0;
  font: 200 24px/1.15 'Sora', sans-serif; letter-spacing: -.01em;
  color: var(--au-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-fullscreen-body{ padding: 18px 22px calc(28px + env(safe-area-inset-bottom, 0px)); }

/* [FE 30/07] Estado de carregamento do video proprio: faixa que cobre o
   retangulo preto ate o 1o quadro chegar (some com .video-ready). */
.video-loading-hint{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--muted); font-size: 12.5px;
  pointer-events: none;
}

.video-embed-wrap.video-ready .video-loading-hint{ display: none; }

/* [SENIOR — FATIA A: virada da base p/ Noir Depth — reconciliacao segura, aprovada pelo dono]
   O antigo SHIM re-pinava --bg E --surface nos valores legados. Virada:
   --bg global agora HERDA o preto Noir (#060606) do :root acima (12 usos CSS
   + 2 strokes de grafico — so escurece, seguro). --surface fica OPACO de
   proposito: as telas Noir ja redefinem --surface localmente (vidro
   translucido, escopado), entao o --surface global so alimenta telas LEGADAS
   (modais .modal, .nav-menu-popup, .lang-menu, .workout-head sticky), que
   PRECISAM ser opacas p/ ocluir o que passa atras. NAO tornar translucido
   global. [FE — virada do shim] valor agora e' o opaco Noir-neutro
   (#141210), sem o verde legado; segue OPACO de proposito. */
/* [auditoria apple-design] O :root daqui re-pinava --surface pro preto
   legado (#141210) DEPOIS do aurum.css — duas fontes de verdade para a
   superfície do app, e a legada vencia. A superfície agora é uma só. */

[data-athlete-panel="inj"] .skel-bone path { stroke: var(--t2); opacity: 0.8; }

[data-athlete-panel="inj"] .skel-bone-fill,
[data-athlete-panel="inj"] .skel-bone-fill path,
[data-athlete-panel="inj"] .skel-bone-fill rect,
[data-athlete-panel="inj"] .skel-bone-fill ellipse { fill: var(--t2); opacity: 0.8; }

[data-athlete-panel="inj"] .skel-joint circle { fill: var(--t3); }

/* lista/tela cheia de lesoes: hairlines + severidade --warn */
.injury-list-fullscreen { background: var(--bg-gradient); }

.injury-list-fullscreen .injury-row { border-color: var(--line); }

.injury-list-fullscreen .injury-row-title { color: var(--warn); }

/* ============================================================
   [FE — Lesoes Noir / FATIA D] Lista cheia + detalhe de lesao no estilo
   Noir Depth, batendo com ironcoach_lesoes.html. ESCOPADO nas telas
   .injury-list-fullscreen (lista) e .injury-detail-fullscreen (detalhe) —
   NADA vaza pro resto do app. O manequim/diagrama fica INTOCADO
   (estilizado no bloco inj acima: so ossos/marcadores). O token global
   --injury NAO e redefinido: onde ele COLORIA um elemento de lista/
   detalhe, o USO foi trocado por --warn/--t2 aqui, escopado. Severidade
   preservada (hex legado apenas tokenizado). */
/* --- LISTA --- */
/* filtro ativo: vidro gelado no lugar do inset coral (--injury) legado */
.injury-list-fullscreen .injury-fchip-on{
  color: var(--t1);
  background: rgba(238,241,240,.1);
  border-color: var(--line-strong);
  box-shadow: none;
}

/* linhas limpas em hairline (proto .lrow) */
.injury-list-fullscreen .injury-compact-row{ border-bottom-color: var(--line); }

.injury-list-fullscreen .injury-compact-title{ color: var(--t1); }

.injury-list-fullscreen .injury-compact-side{ color: var(--t2); }

.injury-list-fullscreen .injury-compact-notes{ color: var(--t2); }

/* badge de status (proto .lstatus): contorno --line-strong + texto --t2,
   trocando o coral --injury do estado "ativo" */
:is(.injury-list-fullscreen, .injury-detail-fullscreen) .injury-status-chip.injury-status-active{
  color: var(--t2);
  background: transparent;
  border: 1px solid var(--line-strong);
}

/* ponto de status "ativo" na familia --warn (mesma dos marcadores do
   manequim), no lugar do --injury coral; a severidade continua no seu
   proprio .injury-sev-dot (currentColor da gravidade). */
:is(.injury-list-fullscreen, .injury-detail-fullscreen) .injury-compact-dot.injury-status-active{
  background: var(--warn);
  box-shadow: none;
}

#flexibilityView .mob-popup-card,
#flexibilityView .session-card {
  background: var(--card); border-color: var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ============================================================
   [ONDA 4 — Noir Depth] EXECUTOR DE TREINO (o player) — SKIN CSS-only
   escopada em .modal-backdrop-workout/.workout-modal. O executor e
   INTOCAVEL (regra do quadro): zero mudanca de HTML/JS — so a roupa.
   Mapa: fundo com profundidade, cabecalho/cards em --card com blur,
   cronometro tabular gelado, serie ATIVA em gelo (era dourado) e feita
   em --data, descanso com glow, CTAs em bloco claro com halo, perigo/
   cancelar em --warn. */
.modal-backdrop-workout {
  --bg: #060606;
  --surface: rgba(255,255,255,.035);
}

.modal-backdrop-workout .workout-modal {
  background: var(--bg-gradient);
  border: 1px solid var(--line);
  color: var(--t1);
}

.modal-backdrop-workout .workout-head-card {
  background: var(--card); border-color: var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.modal-backdrop-workout .workout-head-watermark { color: rgba(238,241,240,.05); }

.modal-backdrop-workout .workout-sub,
.modal-backdrop-workout .workout-footer-meta,
.modal-backdrop-workout .session-notes { color: var(--t2); }

.modal-backdrop-workout .workout-section-title {
  font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; color: var(--t3);
}

.modal-backdrop-workout .workout-timer-badge {
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--data); font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.modal-backdrop-workout .workout-exercise,
.modal-backdrop-workout .workout-superset-block {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.modal-backdrop-workout .exercise-name-btn { color: var(--t1); }

.modal-backdrop-workout .superset-tag,
.modal-backdrop-workout .workout-superset-count { color: var(--t3); }

/* series: feita = gelo cheio; ATIVA = contorno claro (dourado sai) */
.modal-backdrop-workout .set-dot { border-color: var(--line-strong); color: var(--t3); background: none; }

.modal-backdrop-workout .set-dot-done { background: var(--data); border-color: var(--data); color: #0a0a09; }

.modal-backdrop-workout .set-dot-active { background: var(--action); border-color: var(--action); color: var(--action-fg); box-shadow: 0 0 14px -6px var(--data-glow); }

.modal-backdrop-workout .set-focus-band-box { background: var(--surface); border-color: var(--line-strong); }

.modal-backdrop-workout .set-focus-input,
.modal-backdrop-workout .band-intensity-select { background: var(--surface); border-color: var(--line-strong); color: var(--t1); }

/* barra de descanso: trilho hairline, preenchimento gelado com glow */
.modal-backdrop-workout .workout-rest-bar { background: var(--surface); border-color: var(--line); }

.modal-backdrop-workout .workout-rest-bar-fill { background: rgba(238,241,240,.18); }

.modal-backdrop-workout .workout-rest-bar-label,
.modal-backdrop-workout .workout-rest-bar-hint { color: var(--t2); }

.modal-backdrop-workout .workout-rest-bar-clock { color: var(--data); font-variant-numeric: tabular-nums; filter: drop-shadow(0 0 4px var(--data-glow)); }

/* CTAs */
.modal-backdrop-workout .btn-primary,
.modal-backdrop-workout .btn-primary-lg {
  background: var(--action); color: var(--action-fg);
  box-shadow: var(--action-glow); border: none; font-weight: 650;
}

.modal-backdrop-workout .btn-primary svg, .modal-backdrop-workout .btn-primary-lg svg { stroke: var(--action-fg); }

.modal-backdrop-workout .btn-secondary { background: none; border: 1px solid var(--line-strong); color: var(--t1); }

.modal-backdrop-workout .workout-receipt-danger-btn,
.modal-backdrop-workout .workout-cancel-active-btn { color: var(--warn); border-color: var(--warn-bd); background: var(--warn-bg); }

.modal-backdrop-workout .modal-close-x { background: none; border: 1px solid var(--line-strong); color: var(--t2); }

.modal-backdrop-workout .workout-total-row { border-color: var(--line); color: var(--t2); }

.modal-backdrop-workout .workout-total-volume { color: var(--t1); font-variant-numeric: tabular-nums; }

.modal-backdrop-workout .empty-day { color: var(--t3); font-style: normal; }

/* — leaks achados no print real (inline styles e presentation attrs
   legados vencem regra normal; !important só onde o inline existe) — */
.modal-backdrop-workout .workout-head-card { background: var(--card) !important; }

.modal-backdrop-workout .workout-head-watermark { color: rgba(238,241,240,.05) !important; }

.modal-backdrop-workout .workout-timer-badge .icon { stroke: var(--data); }

.modal-backdrop-workout .workout-head-badge svg circle:first-of-type { stroke: var(--line-strong); }

.modal-backdrop-workout .workout-head-badge svg circle:last-of-type {
  stroke: var(--data-stroke);
  filter: drop-shadow(0 0 3px var(--data-glow));
}

.modal-backdrop-workout .workout-head-badge-icon { color: var(--t2); }

.modal-backdrop-workout .workout-head-badge-done { background: var(--data); }

.modal-backdrop-workout .workout-head-badge-done .workout-head-badge-icon,
.modal-backdrop-workout .workout-head-badge-done .icon { color: #0a0a09; }

.modal-backdrop-workout .set-stepbox { background: var(--surface); border-color: var(--line); }

.modal-backdrop-workout .set-stepbox-value { color: var(--t1); font-variant-numeric: tabular-nums; }

.modal-backdrop-workout .set-stepbox-unit { color: var(--t3); }

.modal-backdrop-workout .set-stepbox-active { border-color: var(--action); }

.modal-backdrop-workout .set-stepbox-rest { background: none; border-color: transparent; }

.modal-backdrop-workout .set-stepbox-rest.set-stepbox-active { border-color: var(--action); }

.modal-backdrop-workout .set-stepbox-rest .set-stepbox-value { color: var(--t2); }

.modal-backdrop-workout .set-focus-check {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--t2);
}

.modal-backdrop-workout .set-focus-check-done {
  background: var(--data);
  border-color: var(--data);
  color: #0a0a09;
}

.modal-backdrop-workout .exercise-rest-label-text { color: var(--t3); }

.modal-backdrop-workout .exercise-rest-track { background: var(--line); }

.modal-backdrop-workout .superset-turn-locked-hint { color: var(--t3); }

.modal-backdrop-workout .home-status-badge-pending.workout-block-collapsed-check {
  border-color: var(--line-strong);
  color: var(--t3);
  background: none;
}

.modal-backdrop-workout .home-status-badge-done.workout-block-collapsed-check {
  background: var(--data);
  border-color: var(--data);
  color: #0a0a09;
}

.modal-backdrop-workout .superset-sub-label { color: var(--t3); }

.modal-backdrop-workout .workout-exercise-in-superset { border-left-color: var(--line-strong); }

.modal-backdrop-workout .workout-exercise-in-superset.workout-exercise-turn { border-left-color: var(--data-stroke); }

.modal-backdrop-workout .workout-exercise-in-superset.workout-exercise-waiting { border-left-color: var(--line); }

.modal-backdrop-workout .workout-exercise-turn .superset-sub-label { color: var(--t1); }

.modal-backdrop-workout .superset-no-rest-hint { color: var(--t3); }

.modal-backdrop-workout .set-dot-locked { color: var(--t3); opacity: 0.55; }

.modal-backdrop-workout .set-dot-locked.set-dot-done { background: var(--data); border-color: var(--data); color: #0a0a09; opacity: 0.75; }

/* [FE — Executor Noir / FATIA B] Entrada de serie — visual ESTATICO.
   Migra as caixas de valor (kg/reps/elastico) do fundo chapado #141210
   pro TILE DE VIDRO Noir (rgba .04 + hairline --line), sobe o dado-heroi
   (o numero que o atleta INSERE) pra escala heroica BRANCA, poe rotulos/
   unidades em versalete --t3 e devolve o DOURADO ao foco/aquecimento (o
   skin escopado anterior tinha virado --action, que e branco #f2f0ec).
   So aparencia: zero HTML/JS; nao encosta nas micro-interacoes verdes
   (setCheckConfirm / selos set-seal-record|zone / set-focus-celebrate /
   setFocusPromote) nem nos guardas prefers-reduced-motion. Ordem-de-fonte
   e escopo .modal-backdrop-workout garantem a especificidade sobre o
   legado global (#141210 / #84a0b2) sem renomear nada. */
.modal-backdrop-workout .set-stepbox,
.modal-backdrop-workout .set-focus-band-box {
  background: rgba(255,255,255,.04);
  border-color: var(--line);
}

.modal-backdrop-workout .set-stepbox-active {
  /* [SENIOR — audit FATIA B] foco = GLOW gelado (nao dourado). O agente
     tinha posto --gold aqui, mas no Noir o dourado e' semantica de
     AQUECIMENTO; foco do stepbox usa a linguagem gelada ("card ativo com
     glow"). Mantem a borda clara do reskin anterior + halo --data-glow. */
  border-color: var(--action);
  box-shadow: 0 0 16px -8px var(--data-glow);
}

.modal-backdrop-workout .set-stepbox-rest {
  background: none;
  border-color: transparent;
}

.modal-backdrop-workout .set-stepbox-value {
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.modal-backdrop-workout .set-stepbox-unit,
.modal-backdrop-workout .set-focus-band-box .band-box-unit {
  color: var(--t3);
}

.modal-backdrop-workout .set-focus-band-box .band-intensity-select {
  color: var(--t1);
}

.modal-backdrop-workout .superset-turn-locked-hint,
.modal-backdrop-workout .superset-no-rest-hint {
  color: var(--t3);
}

/* [SENIOR — FATIA B / aquecimento dourado — aprovado pelo dono] No executor,
   o AQUECIMENTO volta ao DOURADO do proto Noir (revendo a Task #300, que o
   tinha trocado por azul-petroleo, SO no contexto Noir/executor). Icone e
   chip em --gold-warm; linhas em vidro. Escopo .modal-backdrop-workout: o
   selo circular da home e o resto do app NAO mudam. So aparencia. */
.modal-backdrop-workout .workout-warmup-row {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
}

.modal-backdrop-workout .workout-warmup-row-done {
  background: rgba(255,255,255,.02);
}

.modal-backdrop-workout .workout-warmup-block-head .workout-warmup-icon {
  color: var(--gold-warm);
}

.modal-backdrop-workout .workout-warmup-chip {
  background: rgba(224,180,106,.12);
  color: var(--gold-warm);
}

.modal-backdrop-workout .workout-warmup-summary {
  color: var(--t2);
}

/* [SENIOR — BUILD 2] entrada de serie em colunas rotuladas: Carga (heroi) + Repeticoes; + "ultima vez" */
.modal-backdrop-workout .set-focus-lasttime{ text-align:center; font-size:11px; color:var(--t2); margin:2px 0 12px; }

.modal-backdrop-workout .set-focus-lasttime::first-letter{ color:var(--data); }

.modal-backdrop-workout .set-focus-row{ align-items:flex-end; gap:12px; }

.modal-backdrop-workout .set-focus-col{ display:flex; flex-direction:column; align-items:center; gap:7px; }

.modal-backdrop-workout .set-focus-col-load{ flex:1; }

.modal-backdrop-workout .set-focus-field-label{ font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:var(--t3); }

.modal-backdrop-workout .set-focus-col-load .set-stepbox{ width:100%; }

.modal-backdrop-workout .set-focus-col-load .set-stepbox-value{ font-size:30px; font-weight:300; letter-spacing:-1px; }

.modal-backdrop-workout .set-focus-col-rep .set-stepbox-value{ font-size:20px; }

#editorView .editor-settings {
  background: var(--card); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

#editorView label, #editorView .field-label-standalone { color: var(--t2); }

#editorView .field-hint { color: var(--t3); }

#editorView .editor-status { color: var(--t2); }

#editorView .week-detail-head h2 {
  font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; color: var(--t3);
}

#editorView .btn-add-session {
  background: var(--action); color: var(--action-fg);
  box-shadow: var(--action-glow); border: none; font-weight: 650;
}

#editorView .btn-add-session svg { stroke: var(--action-fg); }

#editorView .session-card {
  background: var(--card); border: 1px solid var(--line) !important;
  border-left-width: 1px !important; border-radius: 16px; box-shadow: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

#editorView .session-icon { background: var(--surface); color: var(--t2) !important; }

#editorView .session-title { color: var(--t1); }

#editorView .session-meta-line, #editorView .session-meta { color: var(--t2); }

#editorView .session-detail, #editorView .session-notes { color: var(--t2); }

#editorView .badge.pending { color: var(--t3); }

#editorView .icon-btn.delete-session { color: var(--warn); }

.modal-backdrop:has(#sessionForm) .btn-primary {
  background: var(--action); color: var(--action-fg);
  box-shadow: var(--action-glow); border: none; font-weight: 650;
}

.modal-backdrop:has(#sessionForm) .video-available-tag { color: var(--data); }

.modal-backdrop:has(#sessionForm) .modal-hint { color: var(--t3); }

.modal-backdrop:has(#sessionForm) .goal-modal-field-title,
.modal-backdrop:has(#sessionForm) .mod-lbl { color: var(--t2); }

.modal-backdrop:has(#sessionForm) .goal-aesthetic-mode-btn,
.modal-backdrop:has(#sessionForm) .mod-seg-btn {
  background: none; border: 1px solid var(--line-strong); color: var(--t2);
}

.modal-backdrop:has(#sessionForm) .goal-aesthetic-mode-btn.active,
.modal-backdrop:has(#sessionForm) .mod-seg-btn.active {
  background: var(--action); border-color: var(--action); color: var(--action-fg);
}

#programsView .journey-intro { color: var(--t2); }

#programsView .btn-primary, #programsView .btn-subscribe-tier {
  background: var(--action); color: var(--action-fg);
  box-shadow: var(--action-glow); border: none; font-weight: 650;
}

#programsView .btn-secondary, #programsView .btn-add-session,
#programsView .btn-free-workout, #programsView .btn-add-free-workout {
  background: none; border: 1px solid var(--line-strong); color: var(--t1);
}

#programsView .btn-link, #programsView .btn-back-link { color: var(--t2); }

#programsView .week-detail-head h2 {
  font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; color: var(--t3);
}

#programsView .session-card {
  background: var(--card); border: 1px solid var(--line) !important;
  border-left-width: 1px !important; border-radius: 16px; box-shadow: none;
}

#programsView .session-icon { background: var(--surface); color: var(--t2) !important; }

#programsView .session-title { color: var(--t1); }

#programsView .session-meta-line, #programsView .session-meta,
#programsView .session-detail, #programsView .session-notes { color: var(--t2); }

/* [auditoria apple-design] O bloco .onb-scanner (5 animações de 3s em
   ease-in-out, apoiadas em @keyframes que nunca existiram, e reescritas
   duas linhas abaixo com animation:none) foi removido junto com o
   runOnboardingScanner do onboarding.js — fora do fluxo desde o AURUM. */

/* ═══ Fix: modal de confirmação (openAppConfirmModal) sempre no topo ═══
   Usa .modal-backdrop (z 200), mas é aberto POR CIMA de telas cheias
   (.modal-fullscreen z 214, ex.: lista de lesões → confirmar excluir) e do
   player em tela cheia (z 4300, ex.: cancelar treino). Sem isto a caixa de
   confirmar (com o botão Excluir) aparecia ATRÁS da tela. Escopado só na
   root própria do confirm — não afeta outros .modal-backdrop. */
#appConfirmModalRoot .modal-backdrop{ z-index: 8000; }

.injury-modal-eyebrow{
  font: 400 9px 'Space Mono', monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #c9a24a;
}

.injury-modal-hero{
  font: 200 30px/1.02 'Sora', system-ui, sans-serif;
  letter-spacing: -.03em;
  color: #f2f0ec;
  margin: 8px 0 6px;
}

.injury-modal .injury-modal-label{
  font: 400 8.5px 'Space Mono', monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #858279;
  margin: 20px 0 10px;
}

.injury-modal .injury-notes-textarea{
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 13px 14px;
  color: #f2f0ec;
  font: 400 13px 'Sora', system-ui, sans-serif;
  resize: vertical;
  color-scheme: dark;
}

.injury-modal .injury-notes-textarea::placeholder{ color: #858279; }

.injury-modal .injury-notes-textarea:focus{ outline: none; border-color: rgba(201,162,74,.5); }

.injury-modal .injury-joint-pills{ gap: 7px; }

.injury-modal .injury-joint-pill,
.injury-modal .injury-side-pill{
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.14);
  background: none;
  color: #9a978f;
  font: 400 12.5px 'Sora', system-ui, sans-serif;
}

.injury-modal .injury-joint-pill.active,
.injury-modal .injury-side-pill.active{
  border-color: #c9a24a;
  background: none;
  color: #c9a24a;
  font-weight: 400;
}

/* "Severe" ativo acende em coral (alerta), não ouro. */
.injury-modal .injury-severity-pill[data-severity="severe"].active{
  border-color: #e0895a;
  color: #e0895a;
}

/* Pills de dedo/artelho (classe própria) — mesma estética editorial. */
.injury-modal .injury-finger-pill{
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.14);
  background: none;
  color: #9a978f;
  font: 400 12.5px 'Sora', system-ui, sans-serif;
}

.injury-modal .injury-finger-pill.active{
  border-color: #c9a24a;
  color: #c9a24a;
  background: none;
  font-weight: 400;
}

/* Botão primário → pílula branca Palette B. */
.btn-primary,
.btn-primary-lg{
  border-radius: 100px !important;
  font-weight: 500 !important;
  padding: 13px 24px;
}

/* "Excluir/destrutivo" continua coral, mesmo virando pílula. */
.btn-secondary.btn-danger-text{ color: #e0895a !important; border-color: rgba(224,137,90,.45) !important; }

/* Rótulos de seção genéricos comuns nos modais → mono maiúsculo (só onde é
   um <p>/<h4> de rótulo, nunca dentro de inputs). */
.modal .injury-modal-label,
.modal .mod-lbl,
.modal .goal-modal-field-title{
  font: 400 8.5px 'Space Mono', monospace !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: #858279 !important;
}

/* Linha de contexto do cabeçalho do treino → mono discreta. */
.modal-backdrop-workout .workout-sub{
  font-family: 'Space Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .12em;
  color: #858279;
}

/* ── Treino ATIVO — correções pós-base (X ainda em caixa + chip Z2 cortado) ── */
/* O X do modal de treino tinha borda própria (.modal-backdrop-workout
   .modal-close-x, ~L9847) que venceu a base → volta a ser X fantasma. */
.modal-backdrop-workout .modal-close-x{
  background: none !important;
  border: none !important;
  color: #9a978f !important;
}

@media (hover:hover) and (pointer:fine){ .modal-backdrop-workout .modal-close-x:hover{ color: var(--au-text) !important; } }

/* O chip de zona ficava colado/cortado pela borda do cabeçalho fixo — dá
   respiro pra ele assentar limpo abaixo do header. */
.modal-backdrop-workout .badge.zone{
  margin-top: 12px;
  align-self: flex-start;
  line-height: 1.4;
}

.modal-hint, .field-hint, .onboarding-hint, .goal-multi-hint{
  background: none !important;
  border: none !important;
  font-family: 'Sora', system-ui, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  color: #858279 !important;
  padding: 0 !important;
  margin-top: 6px !important;
}

.app-confirm-btn{ border-radius: 100px !important; }

/* ═══ TÍTULO DAS FOLHAS ═══
   [loop visual · opção A aprovada pelo dono 2026-08-13 ·
    mockups/implementada/titulo-das-folhas.html]

   O `<h3>` das folhas saía em 19,89px com peso 700 — e nenhum dos dois
   números foi escolhido: são o DEFAULT DO NAVEGADOR (h3 = 1.17em, bold).
   A escala do contrato tem --au-fs-t-s = 20px, e o vocabulário de peso do
   app vai de 100 a 500 (.au-title usa 200, .au-btn usa 500); o 700 não
   existia em nenhum outro lugar.

   O tamanho muda 0,11px — invisível. O que muda de verdade é o peso: sai o
   negrito do navegador. A folha já tem o kicker mono acima fazendo o papel
   decorativo, então o título não precisa de peso extra. Space Mono ficou
   fora de propósito: a régua reserva o mono pra kicker e rótulo-carimbo, e
   título de folha é texto.

   O SELETOR É FILHO DIRETO (`>`) de propósito, e é ele que separa as três
   gramáticas de título que convivem no app:
     · pega os 4 do grupo 1 — Conta (editar dados e trocar e-mail), a folha
       CANÔNICA (.modal.app-confirm-modal) e o vídeo da biblioteca
       (.modal.video-modal) — todos filhos diretos de `.modal`;
     · NÃO pega o `.modal-title` da agenda (Space Mono caixa alta), excluído
       pelo `:not`;
     · NÃO pega o do recibo, que é aninhado (.modal > … > .workout-head >
       h3) e já tem gramática própria em `.workout-head h3` (18px/500).
   Sem o `>`, esta regra teria a mesma especificidade da `.workout-head h3`
   e, por vir depois no arquivo, atropelaria o cabeçalho do treino. */
.modal > h3:not(.modal-title){
  font: 400 var(--au-fs-t-s) 'Sora', sans-serif;
}

/* ═══ CAMPOS DE FORMULÁRIO DENTRO DE FOLHA ═══
   [loop visual · opção A aprovada pelo dono 2026-08-13 ·
    mockups/campos-da-conta-sem-estilo.html]

   NÃO EXISTIA CSS NENHUM pra `label`/`input` dentro de `.modal`: o markup
   veio do App 1 e o estilo não veio junto — a mesma família já registrada
   no CLAUDE.md ("416 blocos portados… que renderizavam SEM estilo"), e
   estas duas telas ficaram de fora. Os campos saíam com a PELE NATIVA do
   navegador (fundo branco, texto preto, borda `2px inset`) dentro de um app
   preto, e um deles é o campo de SENHA. Como o markup é
   `<label>texto <input></label>` sem layout, o rótulo ainda corria na mesma
   linha do campo e quebrava ao meio ("Data de / nascimento").

   A pele daqui NÃO é desenho novo: é a MESMA que o app já usa no campo de
   peso (Meu Corpo) e na caixa de mensagem do chat — `rgba(255,255,255,.05)`
   + borda `.14`. Foi por isso que a opção A foi a recomendada: não abre uma
   segunda gramática de campo.

   ESCOPO: `.modal form` — e só. Os únicos formulários dentro de `.modal`
   são os dois da Conta (editar dados e trocar e-mail). O modal da agenda
   tem um `<select>`, mas NÃO tem `<form>`, então fica intocado (conferido
   antes de escolher o seletor).

   `color-scheme: dark` é o que faz o navegador desenhar o seletor de data e
   a seta do `<select>` em claro — sem ele o controle nativo vem escuro
   sobre escuro e some. */
.modal form label{
  display: block;
  margin-bottom: 14px;
  font: 400 var(--au-fs-mono-s) 'Space Mono', monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--au-muted);
}
.modal form input,
.modal form select{
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--au-text);
  /* 17px: o piso que o aurum.css já impõe a campo pra o iPhone não dar
     zoom automático ao focar. Aqui é explícito pra não depender da ordem. */
  font: 400 var(--au-fs-xl) 'Sora', sans-serif;
  color-scheme: dark;
}
.modal form input::placeholder{ color: var(--au-faint); }
.modal form input:disabled{ color: var(--au-muted); }
.modal form input:focus-visible,
.modal form select:focus-visible{
  outline: none;
  border-color: rgba(255, 255, 255, .34);
}

/* ═══ Eyebrow mono acima do título dos modais + h4 de seção mono ═══ */
/* [loop visual · grupo FONTES, 2026-08-13] Era 9px — ABAIXO do piso mono da
   escala (--au-fs-mono-s = 10px, o menor tamanho que o contrato admite).
   Subiu pro piso, que é o vizinho imediato: 1px, a menor mudança que põe o
   carimbo dentro da régua. Aparece em Conta → Editar dados e em Trocar
   e-mail. */
.modal-eyebrow{
  font: 400 var(--au-fs-mono-s) 'Space Mono', monospace;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #c9a24a;
  margin: 0 0 3px;
}

.modal h4 .exercises-editor-hint{
  font-family: 'Sora', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 11px !important;
}

/* ═══ Treino ATIVO — acabamento final (eyebrow + lista WORKOUT + recados) ═══ */
/* Eyebrow mono acima do título do cabeçalho (disciplina · em andamento). */
.workout-head-eyebrow{
  font: 400 8.5px 'Space Mono', monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #c9a24a;
  margin-bottom: 4px;
}

/* Lista "WORKOUT" do endurance: disc bullet antigo → dot ouro editorial. */
.modal-backdrop-workout .workout-blocks{
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
}

.modal-backdrop-workout .workout-blocks li{
  font: 400 14px/1.6 'Sora', system-ui, sans-serif;
  color: #f2f0ec;
  padding-left: 15px;
  position: relative;
  margin-bottom: 4px;
}

.modal-backdrop-workout .workout-blocks li::marker{ content: ""; }

.modal-backdrop-workout .workout-blocks li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c9a24a;
}

/* "Leave a note" — bolhas surface-2/autor-bold → editorial sóbrio. */
.modal-backdrop-workout .message-row{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.modal-backdrop-workout .message-author{
  font-family: 'Space Mono', monospace !important;
  font-size: 8.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: #858279 !important;
}

/* Rótulo solto do editor (trainer) → mono. */
.field-label-standalone{
  font-family: 'Space Mono', monospace !important;
  font-size: 8.5px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: #858279 !important;
  font-weight: 400 !important;
}

/* Botões de programa/sessão → pílula. */
.btn-free-workout, .btn-add-free-workout, .btn-add-session, .program-week-block .btn-add-session{
  border-radius: 100px !important;
}

/* Nota: token morto --navy-400 nos ícones de editar recado → cinza real. */
.message-edit-btn, .message-edit-cancel{ color: #858279 !important; }

/* ═══ Treino ATIVO — cabeçalho FLUSH (igual ao recibo), tira a "caixa" ═══
   O aspecto de card bento (fundo var(--card) + borda + blur + raio + watermark)
   era o último resíduo estrutural. Agora eyebrow+hero assentam flush na barra
   sticky discreta — mesma linguagem do recibo de sessão. Ring de progresso e
   timer/X permanecem (funcionais). */
.modal-backdrop-workout .workout-head{
  background: #171614 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}

.modal-backdrop-workout .workout-head-card{
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2px 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal-backdrop-workout .workout-head-watermark{ display: none !important; }

/* =======================================================================
   AGENDA (js/agenda.js) — sessões presenciais coach ↔ aluno
   ===================================================================== */
.agenda-wrap {
  padding: 20px 26px calc(var(--au-h-nav) + 28px + env(safe-area-inset-bottom, 0px));
  max-width: 460px;
  margin: 0 auto;
  color: var(--text);
}

/* --- modal de disponibilidade / novo agendamento --- */
.modal-wide { max-width: 560px; width: 92vw; }

.modal-title {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); margin: 0 0 14px;
}

.agenda-help { color: var(--muted); font-size: 13px; margin: 0 0 16px; }

.agenda-field { display: block; margin-bottom: 14px; }

.agenda-field > span {
  display: block; margin-bottom: 6px; color: var(--muted);
  font-size: 12px; letter-spacing: .06em;
}

.agenda-field input, .agenda-field select, .agenda-field textarea {
  width: 100%; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 15px;
}

.agenda-field-inline { display: flex; align-items: center; gap: 12px; }

.agenda-field-inline > span { margin: 0; flex: 1 1 auto; }

.agenda-field-inline input { width: 100px; }

.agenda-avdays {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 6px 12px; margin-bottom: 16px;
}

.agenda-avday { padding: 10px 0; border-bottom: 1px solid var(--border); }

.agenda-avday:last-child { border-bottom: none; }

.agenda-avday-head {
  display: flex; align-items: center; justify-content: space-between;
}

.agenda-avday-head strong {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft);
}

.agenda-ranges { margin-top: 8px; }

.agenda-range-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}

.agenda-range-row input[type="time"] {
  flex: 1 1 auto; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

.agenda-range-dash { color: var(--muted); }

.agenda-rmrange { color: var(--danger); font-size: 18px; line-height: 1; }

/* Estado vazio (coach ainda não configurou). */
.agenda-empty-hero {
  text-align: center; padding: 40px 20px;
  border: 1px dashed var(--border); border-radius: 14px;
}

.agenda-empty-hero p { color: var(--muted); margin: 0 0 16px; }

/* Horário fixo mostrado no modal de novo agendamento (prefill). */
.agenda-slotpick {
  margin: 0; padding: 10px 12px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Modal de disponibilidade — copiar dias úteis + folgas por chip. */
.agenda-avdays-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 4px 0 8px;
}

.agenda-blackout-add { display: flex; gap: 8px; align-items: center; }

.agenda-blackout-add input[type="date"] {
  flex: 1 1 auto; padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 15px;
}

.agenda-blackout-add .btn-secondary { flex: 0 0 auto; white-space: nowrap; }

.agenda-blackout-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.agenda-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-soft); font-size: 13px; text-transform: capitalize;
}

.agenda-chip-x {
  background: none; border: none; color: var(--danger);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
}

/* ===== [goal-telas · mockup C3] BIBLIOTECA — casca AURUM ==============
   O bloco portado acima usa variáveis do App 1 (--border/--surface/--text)
   que não existem no App2 — os inputs caíam no default branco do navegador.
   Esta seção re-veste TUDO da aba com tokens AURUM, sem tocar na estrutura
   nem nos listeners (mesmas classes/ids). Alvos ≥44px (regra 12). */
#libraryView{ padding:16px 22px calc(96px + env(safe-area-inset-bottom)); box-sizing:border-box; }
#libraryView .library-chip{ border:1px solid rgba(255,255,255,.14); color:var(--au-text-soft); border-radius:100px; padding:8px 14px; font:400 11px 'Sora',sans-serif; }
#libraryView .library-chip-gold{ border-color:rgba(201,162,74,.5); color:var(--au-gold); }
#libraryView .library-hint{ font:300 11px/1.6 'Sora',sans-serif; color:var(--au-muted); margin-top:8px; }
#libraryView .library-new-chip{ display:block; width:100%; margin-top:12px; border:1px solid rgba(201,162,74,.5); background:none; color:var(--au-gold); border-radius:100px; padding:12px; min-height:44px; font:400 12.5px 'Sora',sans-serif; cursor:pointer; }
#libraryView label{ display:block; font:400 8px 'Space Mono',monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--au-gold-dim); }
#libraryView input[type="text"], #libraryView input[type="number"]{ width:100%; box-sizing:border-box; margin-top:6px; background:var(--au-surface-2); border:1px solid var(--au-line); border-radius:10px; color:var(--au-text); font:300 var(--au-fs-xl) 'Sora',sans-serif; padding:11px 12px; min-height:44px; outline:none; }
#libraryView input[type="text"]:focus, #libraryView input[type="number"]:focus{ border-color:rgba(201,162,74,.45); }
#libraryView .library-search-field{ border:1px solid rgba(255,255,255,.12); border-radius:100px; background:var(--au-surface); color:var(--au-faint); padding:4px 16px; min-height:44px; margin:0 0 4px; display:flex; align-items:center; gap:8px; }
#libraryView .library-search-field input[type="text"]{ background:none; border:none; margin:0; min-height:0; padding:8px 0; color:var(--au-text); font:300 var(--au-fs-xl) 'Sora',sans-serif; border-radius:0; }
#libraryView .goal-modal-field-title{ display:block; font:400 8px 'Space Mono',monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--au-gold-dim); margin:12px 0 6px; }
#libraryView .goal-aesthetic-mode-row{ display:flex; flex-wrap:wrap; gap:6px; }
#libraryView .goal-aesthetic-mode-btn{ border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); color:var(--au-text-soft); border-radius:100px; padding:10px 14px; min-height:44px; font:300 11.5px 'Sora',sans-serif; cursor:pointer; }
#libraryView .goal-aesthetic-mode-btn.active{ border-color:rgba(201,162,74,.55); color:var(--au-gold); background:rgba(201,162,74,.08); }
#libraryView .btn-secondary{ border:1px solid rgba(201,162,74,.5); background:rgba(201,162,74,.08); color:var(--au-gold); border-radius:100px; padding:12px 18px; min-height:44px; font:400 12.5px 'Sora',sans-serif; cursor:pointer; }
#libraryView .create-exercise-inline-actions{ margin-top:12px; }
#libraryView .create-exercise-feedback{ font:300 11.5px 'Sora',sans-serif; color:var(--au-green); margin:8px 0 0; }
#libraryView .create-exercise-feedback-error{ color:var(--au-orange); }
/* ── O ENVIO DO VÍDEO, POR EXERCÍCIO [dono 2026-09-06] ──────────────────
   Era UMA barra pra o app inteiro, dentro do formulário "Novo exercício";
   dois envios colidiam nela. Agora o componente (`.lib-up`) nasce na linha
   do exercício E no modal dele — por isso o seletor é GLOBAL, não
   `#libraryView`. Fonte única: `libUploadEstadoHTML` (coach-library-video.js).

   3px em OURO como a barra de descanso do executor — mesmo significado
   ("isto está correndo agora"); só `transform` anima, em LINEAR (ease numa
   barra de progresso mente sobre a velocidade). Verde só no salvo, cobre só
   no erro (régua AURUM: verde = concluído, cobre = atenção). No erro a fita
   some — barra parada em 43% ao lado de "não enviou" faria a pessoa
   esperar. "Finalizando" pulsa em OPACIDADE (a fita está cheia e ainda não
   acabou — parada, leria como travada, o defeito original). */
.lib-up-host{ flex-basis:100%; min-width:0; }
.lib-up-host:empty{ display:none; }
.lib-up{ margin:6px 0 2px; }
.lib-up-linha{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:20px; }
.lib-up-k{ font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--au-gold-kicker); }
.lib-up--salvo .lib-up-k{ color:var(--au-green); }
.lib-up--erro .lib-up-k{ color:var(--au-orange); }
.lib-up-tr{ height:3px; border-radius:2px; background:var(--au-line); overflow:hidden; margin-top:6px; }
.lib-up-tr i{
  display:block; height:100%; background:var(--au-gold);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 180ms linear;
}
.lib-up--salvo .lib-up-tr i{ background:var(--au-green); }
.lib-up--erro .lib-up-tr{ display:none; }
.lib-up--finalizando .lib-up-tr i{ animation:libUpPulso 1.1s ease-in-out infinite; }
@keyframes libUpPulso{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.lib-up-acoes{ display:flex; align-items:center; gap:2px; flex:none; }
/* o botão do modal travado enquanto envia — a foto mostrou "Enviando…"
   com a mesma cara do botão vivo */
.exercise-video-manage .btn-secondary:disabled{ opacity:.45; cursor:default; }
.lib-up-acao{
  font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--au-text-soft); background:none; border:none; min-height:44px; padding:0 8px; cursor:pointer;
  transition:transform 120ms cubic-bezier(.22,1,.36,1);
}
.lib-up-acao:active{ transform:scale(.97); }
.lib-up-x{ min-width:44px; font-size:18px; letter-spacing:0; color:var(--au-faint); }
@media (prefers-reduced-motion: reduce){
  /* a barra CONTINUA (ela é o dado); o que sai é o deslizar entre um
     valor e o outro, e o pulso */
  .lib-up-tr i{ transition:none; animation:none; }
}

/* ═══ BIBLIOTECA = LISTA + PAINEL [dono 06/09/2026, "implemente A"] ═══════
   Mockup: mockups/biblioteca-organizacao.html (A). Cor e escala só por
   token; um exercício aberto é o "agora" (borda ouro na linha). */
#libraryView .library-topo{ display:flex; align-items:center; gap:14px; margin-top:4px; flex-wrap:wrap; }
#libraryView .library-topo .library-hint{ margin:0; flex:1 1 200px; }
#libraryView .library-topo .library-new-chip{ width:auto; margin:0; padding:0 18px; }
#libraryView .library-filtros{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
#libraryView .library-filtro{ cursor:pointer; min-height:var(--au-h-tap); background:none; }
#libraryView .library-filtro.on{ border-color:var(--au-text); color:var(--au-text); }
#libraryView .library-filtros-trabalho .library-filtro.on{ border-color:rgba(201,162,74,.55); color:var(--au-gold); }
/* a linha: miniatura · nome + resumo · seta. É UM botão (nunca botão dentro
   de botão). */
#libraryView .library-linha{ display:flex; align-items:center; gap:14px; width:100%; min-height:88px; padding:8px 10px; margin:0; border:1px solid transparent; border-bottom-color:var(--au-line-soft); border-radius:10px; background:none; color:var(--au-text); text-align:left; cursor:pointer; font-family:'Sora',sans-serif; transition:transform var(--au-dur-press) var(--au-ease); }
#libraryView .library-linha:active{ transform:scale(.99); }
#libraryView .library-linha.on{ background:var(--au-surface); border-color:rgba(201,162,74,.45); }
#libraryView .library-linha-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
#libraryView .library-linha-nome{ font:300 var(--au-fs-xl) 'Sora',sans-serif; color:var(--au-text); }
#libraryView .library-linha-sub{ font:300 var(--au-fs-sm) 'Sora',sans-serif; color:var(--au-muted); }
#libraryView .library-sub-falta{ color:var(--au-orange); }
#libraryView .library-linha-seta{ color:var(--au-faint); font:300 18px 'Sora',sans-serif; }
/* a miniatura é o vídeo parado no primeiro frame; o toque é da linha */
#libraryView .library-thumb{ display:flex; align-items:center; justify-content:center; width:56px; height:76px; border-radius:8px; border:1px solid var(--au-line); background:var(--au-surface-2); overflow:hidden; flex-shrink:0; pointer-events:none; color:var(--au-faint); font:300 22px 'Sora',sans-serif; }
#libraryView .library-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
#libraryView .library-thumb-sem{ background:none; border-style:dashed; border-color:var(--au-faint); }
#libraryView .library-thumb-grande{ width:100%; height:auto; aspect-ratio:9/16; max-height:340px; border-radius:10px; font-size:34px; }
/* o painel */
#libraryView .library-painel{ border:1px solid var(--au-line); border-radius:14px; background:var(--au-surface); padding:16px 18px 20px; }
#libraryView .library-painel-vazio{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:40px; }
#libraryView .library-painel-vazio .library-thumb-grande{ max-width:120px; max-height:160px; }
#libraryView .library-painel-vazio p{ font:300 var(--au-fs-sm) 'Sora',sans-serif; color:var(--au-muted); max-width:260px; margin:14px 0 0; }
#libraryView .library-painel-video{ position:relative; display:block; width:100%; padding:0; margin:0; border:none; background:none; cursor:pointer; border-radius:10px; }
#libraryView .library-painel-video .library-thumb-grande{ margin:0 auto; }
#libraryView .library-painel-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:100px; background:rgba(0,0,0,.55); color:var(--au-text); display:flex; align-items:center; justify-content:center; pointer-events:none; }
#libraryView .library-painel-video-sem{ display:flex; flex-direction:column; align-items:center; gap:10px; }
#libraryView .library-painel-video-sem .library-thumb-grande{ max-height:220px; }
#libraryView .library-painel-video-txt{ font:300 var(--au-fs-sm) 'Sora',sans-serif; color:var(--au-text-soft); }
#libraryView .library-painel-video[disabled]{ opacity:.5; cursor:default; }
#libraryView .library-painel-links{ display:flex; gap:14px; flex-wrap:wrap; }
#libraryView .library-painel-nome{ font:300 var(--au-fs-t-m) 'Sora',sans-serif; margin:12px 0 2px; color:var(--au-text); }
#libraryView .library-painel-meta{ font:300 var(--au-fs-sm) 'Sora',sans-serif; color:var(--au-muted); margin:0 0 12px; }
#libraryView .library-ajuste{ display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:10px; min-height:52px; border-top:1px solid var(--au-line-soft); padding:6px 0; }
#libraryView .library-ajuste-rotulo{ font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--au-muted); }
#libraryView .library-seg{ display:flex; flex-wrap:wrap; gap:6px; }
#libraryView .library-seg-btn{ padding:0 12px; min-height:var(--au-h-tap); font:300 var(--au-fs-sm) 'Sora',sans-serif; }
#libraryView .library-seg-btn.sugerido{ border-style:dashed; color:var(--au-gold-dim); }
#libraryView .library-painel-rodape{ display:flex; gap:14px; align-items:center; margin-top:10px; border-top:1px solid var(--au-line-soft); padding-top:4px; }
#libraryView .library-painel-apagar{ color:var(--au-orange); margin-left:auto; }
#libraryView .library-painel .au-kicker{ display:block; margin-bottom:12px; }
#libraryView .library-painel-voltar{ margin-bottom:6px; }
#libraryView .library-edit-form{ padding:6px 0 10px; }
/* no celular: o painel só existe aberto, e vira a tela inteira */
@media (max-width: 859px){
  #libraryView .library-painel-col{ display:none; }
  #libraryView .library-desk.painel-aberto .library-lista{ display:none; }
  #libraryView .library-desk.painel-aberto .library-painel-col{ display:block; }
  #libraryView .library-desk.painel-aberto .library-painel{ border:none; background:none; padding:0; }
}
#libraryView .library-groups{ margin-top:18px; gap:14px; }
#libraryView .workout-section-title{ font:400 9px 'Space Mono',monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--au-muted); margin:0 0 2px; }
#libraryView .library-group-count{ color:var(--au-faint); font-size:9px; }
#libraryView .library-edit-form label:not(:first-child){ margin-top:10px; }
#libraryView .library-edit-actions{ display:flex; gap:8px; margin-top:12px; }
#libraryView .library-empty-state{ font:300 12.5px 'Sora',sans-serif; color:var(--au-muted); margin-top:14px; }

/* ═══ AVALIAÇÕES FUNCIONAIS NA BIBLIOTECA [dono 17/09/2026, etapa 2 do
   PLANO-AVALIACOES.md] ═══════════════════════════════════════════════════
   As sub-abas EXERCÍCIOS · AVALIAÇÕES e a ficha de cada teste. A lista e o
   painel reusam as classes da biblioteca de exercícios; aqui só o que a
   ficha tem de próprio. Cor e escala só por token; cobre só no que é
   atenção (sem vídeo, a confirmar, o aviso de encaminhamento). */
#libraryView .library-abas{ margin:6px 0 14px; }
#libraryView .av-num{ font:400 var(--au-fs-mono) 'Space Mono',monospace; color:var(--au-faint); margin-right:2px; }
#libraryView .av-ficha > .au-kicker{ display:block; margin:4px 0 0; }
#libraryView .av-midia{ display:flex; flex-direction:column; gap:10px; margin:14px 0 8px; }
#libraryView .av-midia-kicker{ margin-top:12px; }
#libraryView .av-midia-vazia{ font:300 var(--au-fs-sm) 'Sora',sans-serif; color:var(--au-muted); padding:12px 0; }
#libraryView .av-thumb-video{ width:100%; height:auto; aspect-ratio:9/16; max-height:220px; border-radius:10px; font-size:34px; }
#libraryView .av-player .au-video{ border-radius:10px; }
#libraryView .av-player .au-video video{ max-height:420px; object-fit:contain; }
#libraryView .av-imagem{ display:block; width:100%; max-height:320px; object-fit:contain; border-radius:10px; border:1px solid var(--au-line); background:var(--au-surface-2); }
#libraryView .av-imagem-sem{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:88px; margin:0; border:1px dashed var(--au-faint); border-radius:10px; background:none; color:var(--au-text-soft); font:300 var(--au-fs-sm) 'Sora',sans-serif; cursor:pointer; transition:transform var(--au-dur-press) var(--au-ease); }
#libraryView .av-imagem-sem:active{ transform:scale(.97); }
#libraryView .av-imagem-sem span{ font:300 var(--au-fs-t-s) 'Sora',sans-serif; color:var(--au-faint); }
#libraryView .av-imagem-sem[disabled]{ opacity:.5; cursor:default; }
#libraryView .av-imagem-status{ font:300 var(--au-fs-sm) 'Sora',sans-serif; color:var(--au-muted); margin:0; }
#libraryView .av-imagem-status.av-imagem-status-erro{ color:var(--au-orange); }
/* o slide da ficha: a animação na frente, o print real a um deslize (17/09) */
#libraryView .av-slide{ display:flex; flex-direction:column; gap:6px; width:100%; max-width:460px; }
#libraryView .av-slide-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#libraryView .av-slide-ir{ padding-right:0; color:var(--au-text-soft); }
#libraryView .av-slide-trilho{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; border:1px solid var(--au-line); border-radius:14px; background:var(--au-surface); }
#libraryView .av-slide-trilho::-webkit-scrollbar{ display:none; }
/* o 4:5 é TETO, não piso: um print alto (2 ou 3 empilhados) esticava a página, o trilho e a animação junto. Quem segura é o botão do print em flex-basis 0 com a imagem a 100%; min-height/overflow aqui são o cinto */
#libraryView .av-slide-pag{ flex:0 0 100%; min-width:0; aspect-ratio:4/5; min-height:0; overflow:hidden; scroll-snap-align:start; scroll-snap-stop:always; position:relative; }
#libraryView .av-slide-pag-print{ display:flex; flex-direction:column; justify-content:center; gap:8px; padding:12px; box-sizing:border-box; }
#libraryView .av-slide-pag-print .av-imagem{ flex:1 1 auto; min-height:0; max-height:none; border:none; background:none; }
#libraryView .av-slide-pag-print .av-imagem-sem{ flex:1 1 auto; }
#libraryView .av-slide-pontos{ display:flex; justify-content:center; gap:6px; padding-top:4px; }
#libraryView .av-slide-pontos i{ width:6px; height:6px; border-radius:50%; background:var(--au-faint); opacity:.5; transition:opacity var(--au-dur) var(--au-ease); }
#libraryView .av-slide-pontos i.on{ background:var(--au-text-soft); opacity:1; }
#libraryView .av-anima{ position:absolute; inset:0; }
#libraryView .av-anima-svg{ display:block; width:100%; height:100%; }
#libraryView .av-anima-pausa{ position:absolute; right:8px; bottom:8px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--au-line); border-radius:50%; background:color-mix(in srgb, var(--au-bg) 70%, transparent); cursor:pointer; transition:transform var(--au-dur-press) var(--au-ease); }
#libraryView .av-anima-pausa:active{ transform:scale(.92); }
#libraryView .av-anima-pausa svg{ width:14px; height:14px; fill:none; stroke:var(--au-text-soft); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#libraryView .av-anima-pausa[aria-pressed="true"] svg{ fill:var(--au-text-soft); }
#libraryView .av-imagem-ver{ flex:1 1 0; min-height:0; display:flex; width:100%; margin:0; padding:0; border:none; background:none; cursor:zoom-in; transition:transform var(--au-dur-press) var(--au-ease); }
#libraryView .av-imagem-ver:active{ transform:scale(.98); }
#libraryView .av-imagem-ver .av-imagem{ width:100%; height:100%; min-height:0; object-fit:contain; }
.av-print-camada{ position:fixed; inset:0; z-index:4020; display:flex; flex-direction:column; background:var(--au-bg); animation:avPrintEntra var(--au-dur) var(--au-ease) both; }
@keyframes avPrintEntra{ from{ opacity:0 } to{ opacity:1 } }
.av-print-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px 20px; }
.av-print-topo .au-kicker-soft{ min-width:0; }
.av-print-fechar{ flex:0 0 44px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--au-line); border-radius:50%; background:none; cursor:pointer; transition:transform var(--au-dur-press) var(--au-ease); }
.av-print-fechar:active{ transform:scale(.92); }
.av-print-fechar svg{ width:14px; height:14px; fill:none; stroke:var(--au-text-soft); stroke-width:2; stroke-linecap:round; }
.av-print-rolo{ flex:1 1 auto; overflow:auto; overscroll-behavior:contain; padding:0 16px calc(env(safe-area-inset-bottom, 0px) + 20px); }
.av-print-rolo img{ display:block; width:100%; max-width:1100px; height:auto; margin:0 auto; border-radius:10px; }
#libraryView .av-sec{ border-top:1px solid var(--au-line-soft); padding:12px 0 8px; }
#libraryView .av-sec-rot{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
#libraryView .av-sec-txt p{ font:300 var(--au-fs-m) 'Sora',sans-serif; color:var(--au-text-soft); line-height:1.5; margin:0 0 6px; }
#libraryView .av-sec-txt p.av-nota{ font-size:var(--au-fs-sm); color:var(--au-muted); }
#libraryView .av-sec-txt p.av-aviso{ color:var(--au-orange); }
#libraryView .av-sec-txt p.av-ref-da-razao{ font-size:var(--au-fs-sm); color:var(--au-muted); margin-top:8px; }
#libraryView .av-selo{ display:inline-flex; align-items:center; min-height:22px; padding:0 8px; margin-left:6px; border:1px solid rgba(217,154,108,.5); border-radius:100px; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--au-orange); vertical-align:middle; white-space:nowrap; }
#libraryView .av-faixas{ margin:2px 0 0; }
#libraryView .av-faixas div{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:12px; padding:7px 0; border-bottom:1px solid var(--au-line-soft); }
#libraryView .av-faixas dt{ font:300 var(--au-fs-sm) 'Sora',sans-serif; color:var(--au-muted); }
#libraryView .av-faixas dd{ margin:0; font:300 var(--au-fs-sm) 'Sora',sans-serif; color:var(--au-text); }
#libraryView .av-tabela-rolo{ overflow-x:auto; margin:10px 0 6px; }
#libraryView .av-tabela{ border-collapse:collapse; width:100%; font:300 var(--au-fs-xs) 'Sora',sans-serif; color:var(--au-text-soft); }
#libraryView .av-tabela caption{ text-align:left; padding:0 0 6px; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--au-muted); }
#libraryView .av-tabela th, #libraryView .av-tabela td{ padding:6px 4px; border-bottom:1px solid var(--au-line-soft); text-align:center; white-space:nowrap; font-weight:300; }
#libraryView .av-tabela thead th{ font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.08em; color:var(--au-muted); }
#libraryView .av-tabela .av-tabela-rot{ text-align:left; color:var(--au-text); }
#libraryView .av-lista, #libraryView .av-registro, #libraryView .av-contra{ list-style:none; padding:0; margin:6px 0; }
#libraryView .av-lista li, #libraryView .av-registro li, #libraryView .av-contra li{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; padding:6px 0; border-bottom:1px solid var(--au-line-soft); font:300 var(--au-fs-sm) 'Sora',sans-serif; color:var(--au-text-soft); }
#libraryView .av-lista li span{ flex:1; }
#libraryView .av-lista li b{ font-weight:400; color:var(--au-text); }
#libraryView .av-registro em{ font-style:normal; color:var(--au-faint); }
#libraryView .av-sensesp{ display:flex; flex-wrap:wrap; gap:24px; margin-bottom:6px; }
#libraryView .av-sensesp span{ display:block; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--au-muted); }
#libraryView .av-sensesp b{ font:300 var(--au-fs-t) 'Sora',sans-serif; color:var(--au-text); }
#libraryView .av-midia-falhou{ color:var(--au-orange); }
/* [25/09] OS ÂNGULOS DO EXERCÍCIO (coach-library-angulos.js) — a fileira
   embaixo do vídeo do painel. Quadros de 66×88 (retrato, como os vídeos). */
#libraryView .library-angulos{ margin-top:14px; }
#libraryView .library-angulos .au-kicker{ margin-bottom:8px; }
#libraryView .library-ang-fileira{ display:flex; gap:10px; flex-wrap:wrap; }
#libraryView .library-ang{ width:66px; flex:none; border:0; background:none; padding:0; cursor:pointer; color:var(--au-muted); text-align:center; transition:transform 120ms cubic-bezier(.22,1,.36,1); }
#libraryView .library-ang:active{ transform:scale(.97); }
#libraryView .library-ang[disabled]{ opacity:.5; cursor:default; }
#libraryView .library-ang-t{ display:block; width:66px; height:88px; border-radius:10px; overflow:hidden; background:var(--au-surface-2); border:1px solid rgba(255,255,255,.12); box-sizing:border-box; }
#libraryView .library-ang-t video{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
#libraryView .library-ang.on{ color:var(--au-text); }
#libraryView .library-ang.on .library-ang-t{ border:1.5px solid var(--au-text-soft); }
#libraryView .library-ang-novo .library-ang-t{ border:1px dashed rgba(255,255,255,.28); display:grid; place-items:center; font:200 24px 'Sora',sans-serif; color:var(--au-muted); background:none; }
#libraryView .library-ang-l{ display:block; margin-top:6px; font:400 var(--au-fs-mono-xs) 'Space Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
#libraryView .library-ang-rotulos{ margin-top:12px; }