/* Exercícios e perfil: filtros, animação, pré-vídeo e sequência de 4 quadros, backup. */
/* ---------- exercícios / perfil ---------- */
.chips.filtro { margin: 0 0 12px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
button.chip { background: var(--card); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.alternar { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.alternar input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.arquivo { position: relative; overflow: hidden; }
.arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aviso .acoes { margin-top: 10px; }

/* ---------- animação dos exercícios ---------- */
.anim { margin: 6px 0 12px; background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px; cursor: pointer; }
.anim svg { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.anim figcaption { text-align: center; font-size: 11px; color: var(--sub); }
.anim .osso { stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.anim .osso.tronco { stroke-width: 10; }
.anim .osso.pe { stroke-width: 5; }
.anim .osso.atras { stroke: var(--sub); opacity: .7; }
.anim .cabeca { fill: var(--accent); }
.anim .chao { stroke: var(--borda); stroke-width: 2; }
.anim .aparelho { stroke: var(--sub); stroke-width: 4; stroke-linecap: round; opacity: .6; }
.anim .aparelho.grosso { stroke-width: 6; opacity: .9; }
.anim .aparelho-fill { fill: var(--sub); opacity: .6; }
.anim .cabo { stroke: var(--sub); stroke-width: 1.5; stroke-dasharray: 3 3; }
.anim .anilha { fill: var(--texto); opacity: .85; }
.anim .eixo { fill: var(--bg); }

/* pré-vídeo: controles e sequência de 4 quadros */
.anim { cursor: default; }
.anim .palco { cursor: pointer; }
.controles { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.controles button { background: var(--bg); color: var(--texto); border: 1px solid var(--borda); border-radius: 999px;
  min-width: 44px; height: 36px; font: inherit; font-weight: 700; cursor: pointer; }
.controles .fase { flex: 1; text-align: center; font-size: 13px; font-weight: 600; }
.sequencia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.quadro { position: relative; background: var(--bg); border: 2px solid var(--borda); border-radius: 10px; padding: 2px 2px 4px;
  cursor: pointer; color: var(--sub); font: inherit; display: flex; flex-direction: column; align-items: center; }
.quadro svg { width: 100%; max-width: none; }
.quadro .num { position: absolute; top: 3px; left: 5px; font-size: 11px; font-weight: 700; }
.quadro .nome { font-size: 10px; line-height: 1.2; text-align: center; }
.quadro.on { border-color: var(--accent); color: var(--texto); }
.quadro.on .num { color: var(--accent); }
.quadro .osso { stroke-width: 9; }

/* manequim neutro: pele cinza sombreada, contorno fino, musculatura em marca d'água e
   cor só onde o exercício atua (vídeo e mapa corporal) */
.anim .palco, .quadro svg, .mapa { background: #f3f3f1; border-radius: 12px; }
.anim .contorno .corpo, .mapa .contorno .corpo { fill: #4a4b48; stroke: #4a4b48; stroke-width: 1.5; stroke-linejoin: round; }
.anim .pele .corpo, .mapa .pele .corpo { fill: url(#fpPele); }
.anim .longe .pele .corpo { fill: #c9cac7; }
.anim .longe .contorno .corpo { fill: #6a6b68; stroke: #6a6b68; }
.anim .musc.n, .mapa .musc.n { fill: rgba(0, 0, 0, .035); stroke: rgba(60, 60, 60, .2); stroke-width: .5; }
.anim .musc.p, .mapa .musc.p { fill: url(#fpMuscP); stroke: rgba(142, 31, 21, .6); stroke-width: .5; }
.anim .musc.a, .mapa .musc.a { fill: url(#fpMuscA); stroke: rgba(184, 84, 51, .5); stroke-width: .5; }
.mapa .linha-musc { fill: none; stroke: rgba(0, 0, 0, .12); stroke-width: .6; }
.mapa .coracao { fill: #d9412c; }
.anim .chao { stroke: #cfcfcc; }
.anim .aparelho { stroke: #6d6e6b; opacity: 1; }
.anim .aparelho-fill { fill: #6d6e6b; opacity: 1; }
.anim .cabo { stroke: #555; }
.anim .anilha { fill: #161616; stroke: #555; stroke-width: 1.2; opacity: 1; }
.anim .eixo { fill: #888; }
.mapa .rotulo { fill: #6b6c69; }
.legenda-musc { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font-size: 12px; margin: 0 0 8px; }
.legenda-musc .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.legenda-musc .dot.p { background: var(--musc-p); }
.legenda-musc .dot.a { background: var(--musc-a); }
.anim .palco-video { width: 100%; display: block; border-radius: 12px; background: #f3f3f1; aspect-ratio: 16 / 10; object-fit: contain; cursor: pointer; }