@font-face { font-family: 'Darker Grotesque'; src: url('/fontes/darker-grotesque-var.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/fontes/hanken-grotesk-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* Direção A (UX/UI, 10/10): cores com função fixa.
   lima = sua ação e o que está feito · ciano = informação e histórico · rosa = só alerta e perigo
   roxo = a voz do treinador · ouro = só recorde. Fundo: navy oficial (#011F2C) escurecido, a pedido do Gustavo. */
:root {
  --bg: #00141C;
  --bg-2: #000C12;
  --s1: #04212E;
  --s2: #0A2C3C;
  --s3: #10394C;
  --linha: rgba(240, 240, 232, .08);
  --linha-2: rgba(240, 240, 232, .14);
  --txt: #F0F0E8;
  --txt-2: #9DB2BB;
  --txt-3: #86A0AB; /* antes #6B8692: 3,9:1 nos cartões; agora 6:1 (WCAG pede 4,5:1) */
  --rosa-texto: #F2679F; /* rosa oficial clareado só para TEXTO pequeno (o #E71A7C dá 3,4:1 nos cartões) */
  --roxo-texto: #A98BFF; /* roxo oficial clareado só para texto e ícone sobre o escuro */
  /* escala de letras (só estes tamanhos nas partes novas) */
  --t-1: 12px; --t-2: 13px; --t-3: 15px; --t-4: 17px;
  --d-1: 22px; --d-2: 28px; --d-3: 36px; --d-4: 48px;
  /* espaços (de 4 em 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px;
  /* cantos: campo, cartão, pílula */
  --r-campo: 12px; --r-cartao: 18px; --r-pilula: 999px;
  --toque: 44px; /* área mínima de toque (Apple 44, Google 48) */
  --lima: #D9E021;
  --ouro: #FFC83D; --ouro-claro: #FFE88A; --ouro-escuro: #C98A00; /* recordes: medalha de ouro */
  --lima-escuro: #1d2a06;
  --ciano: #26BFBF;
  --rosa: #E71A7C;
  --roxo: #6725F9;
  --oliva: #8CBB2F;
  --ok-fundo: rgba(140, 187, 47, .16);
  --raio: 18px;
  --raio-p: 12px;
  --display: 'Darker Grotesque', system-ui, sans-serif;
  --corpo: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
  --seguro-topo: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg-2); color: var(--txt); font-family: var(--corpo); font-size: 15px; line-height: 1.4; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }
/* iPhone amplia a tela ao tocar num campo com letra menor que 16px: todo campo de digitação tem no mínimo 16px */
input, textarea, select { font-size: 16px; }
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* faixa da cor do app atrás do relógio do iPhone: ao rolar, o conteúdo passa por baixo dela, e não do relógio */
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--seguro-topo); background: var(--bg); z-index: 30; pointer-events: none; }

/* moldura: no computador, parece um celular centralizado */
#app { max-width: 460px; margin: 0 auto; min-height: 100dvh; background: var(--bg); position: relative; overflow-x: hidden; overflow-x: clip; } /* clip (e não hidden): hidden transforma o #app em caixa de rolagem e as faixas fixas (exec-topo, q-progresso) param de grudar no topo */
@media (min-width: 600px) {
  body { padding: 24px 0; }
  #app { min-height: calc(100dvh - 48px); border-radius: 28px; box-shadow: 0 0 0 1px var(--linha-2), 0 30px 80px rgba(0,0,0,.5); overflow: hidden; overflow: clip; }
}

/* barra do protótipo */
.proto { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #000c12; font-size: 12px; color: var(--txt-2); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 30; }
.proto b { color: var(--lima); font-weight: 700; letter-spacing: .04em; }
.proto .seg { margin-left: auto; }

.tela { padding: calc(16px + var(--seguro-topo)) 16px calc(110px + var(--seguro-baixo)); }
/* a animação de entrada roda só ao CHEGAR numa tela (main.js liga body.entrando). Redesenhar a mesma tela (trocar gráfico,
   aba, filtro, período) não anima de novo: antes, cada troca fazia a tela inteira piscar (pedido do Gustavo, 11/10). */
body.entrando .tela:not(.parada) { animation: entra .28s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tela, .an { animation: none !important; } }
.tela.parada { animation: none; } /* redesenho da mesma tela (ex.: marcar série): sem piscar */
/* sem zoom ao tocar duas vezes (o zoom com dois dedos continua) */
html, body, body * { touch-action: manipulation; }

/* cabeçalho */
.topo { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.topo h1 { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: .95; margin: 0; letter-spacing: -.01em; }
.topo .sub { color: var(--txt-2); font-size: 13px; margin-top: 4px; }
.topo .acoes { margin-left: auto; display: flex; gap: 8px; }
.btn-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--s1); display: grid; place-items: center; border: 1px solid var(--linha); position: relative; }
.btn-ic .ponto { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 0 2px var(--s1); }
.voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--txt-2); font-size: 14px; margin-bottom: 10px; }

.titulo-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 10px; }
.titulo-sec h2 { font-family: var(--display); font-size: 22px; font-weight: 800; margin: 0; }
.titulo-sec a, .link { color: var(--ciano); font-size: 13px; font-weight: 600; text-decoration: none; }

/* cartões */
.card { background: var(--s1); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.card + .card { margin-top: 10px; }
.card.destaque { background: linear-gradient(145deg, #0d3c50 0%, #072A3B 60%); border-color: rgba(217, 224, 33, .25); position: relative; overflow: hidden; }
.card.destaque::after { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(217,224,33,.18), transparent 70%); pointer-events: none; }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lima); }
.etiqueta.ciano { color: var(--ciano); }
.etiqueta.rosa { color: var(--rosa); }
.card h3 { font-family: var(--display); font-size: 26px; font-weight: 800; margin: 6px 0 2px; line-height: 1; }
.card .desc { color: var(--txt-2); font-size: 13px; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 14px; font-weight: 700; font-size: 15px; background: var(--s2); border: 1px solid var(--linha-2); width: 100%; }
.btn.prim { background: var(--lima); color: var(--bg); border-color: transparent; box-shadow: 0 8px 24px rgba(217,224,33,.18); }
.btn.prim:active { transform: scale(.98); }
.btn.peq { height: 36px; font-size: 13px; padding: 0 14px; border-radius: 10px; width: auto; }
.btn.fantasma { background: transparent; }
.btn.perigo { color: var(--rosa-texto); background: transparent; border-color: rgba(231,26,124,.35); }
.linha-btns { display: flex; gap: 8px; margin-top: 14px; }

/* segmentado */
.seg { display: inline-flex; background: var(--s1); border: 1px solid var(--linha); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--txt-2); }
.seg button.on { background: var(--s3); color: var(--txt); }
.proto .seg button { padding: 4px 10px; font-size: 12px; }
.proto .seg button.on { background: var(--lima); color: var(--bg); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 7px 14px; border-radius: 99px; background: var(--s1); border: 1px solid var(--linha); font-size: 13px; font-weight: 600; color: var(--txt-2); }
.chip.on { background: var(--txt); color: var(--bg); border-color: transparent; }
.chip .n { opacity: .6; margin-left: 4px; }

/* semana */
.semana { display: flex; justify-content: space-between; gap: 6px; margin-top: 14px; }
.dia { flex: 1; text-align: center; font-size: 11px; color: var(--txt-3); font-weight: 600; }
.dia .b { width: 100%; aspect-ratio: 1; max-width: 38px; margin: 6px auto 0; border-radius: 50%; border: 1.5px dashed var(--linha-2); display: grid; place-items: center; }
.dia.feito .b { background: var(--lima); border: 0; color: var(--bg); }
.dia.hoje { color: var(--txt); }
.dia.hoje .b { border: 1.5px solid var(--lima); border-style: solid; }
.dia.perdeu .b { border-style: solid; border-color: rgba(231,26,124,.4); color: var(--rosa); }

/* números */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.kpis.dois { grid-template-columns: 1fr 1fr; }
.kpi { background: var(--s1); border: 1px solid var(--linha); border-radius: 14px; padding: 12px; }
.kpi .v { font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; }
.kpi .v small { font-size: 15px; color: var(--txt-2); font-weight: 700; margin-left: 2px; }
.kpi .l { font-size: 12px; color: var(--txt-2); margin-top: 4px; }
.kpi.lima .v { color: var(--lima); } .kpi.ciano .v { color: var(--ciano); } .kpi.rosa .v { color: var(--rosa); }

/* listas */
.lista { background: var(--s1); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; }
.item + .item { border-top: 1px solid var(--linha); }
.item .t { font-weight: 600; }
.item .s { font-size: 12px; color: var(--txt-2); margin-top: 1px; }
.item .dir { margin-left: auto; text-align: right; flex: none; color: var(--txt-3); display: flex; align-items: center; gap: 8px; }
.item .mid { min-width: 0; flex: 1; }
.item .mid .t, .item .mid .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; color: var(--bg); position: relative; }
.av .st { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--s1); }
.av.g { width: 64px; height: 64px; font-size: 22px; }

.ic-bolha { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.ic-bolha.lima { background: rgba(217,224,33,.12); color: var(--lima); }
.ic-bolha.ciano { background: rgba(38,191,191,.12); color: var(--ciano); }
.ic-bolha.rosa { background: rgba(231,26,124,.12); color: var(--rosa); }
.ic-bolha.roxo { background: rgba(103,37,249,.2); color: #a98bff; }

.mini-sem { display: flex; gap: 3px; }
.mini-sem i { width: 6px; height: 6px; border-radius: 50%; background: var(--linha-2); }
.mini-sem i.on { background: var(--lima); }

.selo { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--s2); color: var(--txt-2); white-space: nowrap; }
.selo.ok { background: rgba(140,187,47,.15); color: var(--oliva); }
.selo.alerta { background: rgba(231,26,124,.14); color: var(--rosa-texto); }
.selo.aviso { background: rgba(217,224,33,.12); color: var(--lima); }

/* exercício: animação com as 2 fotos */
.anim { display: block; position: relative; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--s3); flex: none; } /* fundo escuro enquanto a foto chega (antes: quadrado branco) */
.anim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anim img + img { animation: alterna 1.6s steps(1) infinite; }
@keyframes alterna { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.anim.g { width: 100%; height: auto; aspect-ratio: 4/3; border-radius: 16px; background: #fff; }
.anim.g img { object-fit: contain; }
.anim.g img + img { animation-duration: 1.8s; }
.anim.m { width: 64px; height: 64px; }

/* rotina */
.rot { margin-top: 10px; }
.rot .cab { display: flex; align-items: flex-start; gap: 8px; }
.rot .cab .mid { flex: 1; min-width: 0; }
.rot h3 { font-size: 22px; }
.rot .exs { color: var(--txt-2); font-size: 13px; margin: 6px 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pilhas { display: flex; margin: 10px 0 14px; }
.pilhas .anim { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--s1); margin-left: -8px; }
.pilhas .anim:first-child { margin-left: 0; }
.pilhas .mais { width: 38px; height: 38px; border-radius: 50%; margin-left: -8px; background: var(--s3); border: 2px solid var(--s1); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--txt-2); }

/* barra de navegação inferior */
.nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--seguro-baixo)); width: calc(min(460px, 100vw) - 32px); display: flex; justify-content: space-around; background: rgba(4, 33, 46, .84); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--linha-2); border-radius: 22px; padding: 6px; z-index: 20; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 5px; border-radius: 16px; font-size: 11px; font-weight: 600; color: var(--txt-3); }
.nav button { position: relative; z-index: 1; transition: transform .15s ease; }
.nav button:active { transform: scale(.92); }
.nav button.on { color: var(--lima); }
/* bolha de vidro atrás da aba ativa (posição e animação em main.js) */
.nav-bolha { position: absolute; left: 0; top: 6px; bottom: 6px; border-radius: 16px; pointer-events: none; transform-origin: center;
  background: linear-gradient(180deg, rgba(240,240,232,.10), rgba(217,224,33,.07));
  border: 1px solid rgba(240,240,232,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.25); }
.nav button svg.i { width: 22px; height: 22px; }

/* ===== treino em andamento ===== */
.exec-topo { position: sticky; top: 0; z-index: 15; background: rgba(0,20,28,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: calc(10px + var(--seguro-topo)) 16px 12px; border-bottom: 1px solid var(--linha); }
.exec-topo .l1 { display: flex; align-items: center; gap: 10px; }
.exec-topo .l1 .nm { font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exec-stats { display: flex; gap: 22px; margin-top: 10px; }
.exec-stats div { font-size: 11px; color: var(--txt-2); }
.exec-stats b { display: block; font-family: var(--display); font-size: 22px; color: var(--txt); line-height: 1; font-weight: 800; }
.exec-stats .lima b { color: var(--lima); }
/* bonequinho dos músculos do treino, à direita dos números (como no Hevy) */
#exec-mini { margin-left: auto; align-self: center; display: flex; }
.mapa-mini { display: flex; gap: 4px; margin: -4px 0; }
.mapa-mini svg { height: 50px; width: auto; display: block; }
.mapa-mini path.off { fill: var(--s3); }
.mapa-mini path.on { fill: var(--lima); }
.prog { height: 3px; background: var(--linha); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--lima); border-radius: 3px; transition: width .4s; }

.bloco { padding: 18px 16px 6px; border-bottom: 1px solid var(--linha); }
.bloco .cab { display: flex; align-items: center; gap: 12px; }
.bloco .cab .nm { font-weight: 700; color: var(--ciano); font-size: 16px; line-height: 1.2; text-align: left; }
.bloco .cab .pr { font-size: 12px; color: var(--txt-2); margin-top: 2px; }
.obs { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(103,37,249,.14); border: 1px solid rgba(103,37,249,.3); font-size: 13px; display: flex; gap: 8px; }
.obs svg.i { width: 16px; height: 16px; color: #a98bff; margin-top: 1px; }
.desc-ex { display: inline-flex; align-items: center; gap: 6px; color: var(--ciano); font-size: 13px; margin: 10px 0 4px; }
.desc-ex svg.i { width: 15px; height: 15px; }

.tabela { width: 100%; border-collapse: separate; border-spacing: 0 4px; margin-top: 6px; }
.tabela th { font-size: 11px; font-weight: 700; color: var(--txt-3); text-align: center; padding: 4px 2px; letter-spacing: .04em; }
.tabela td { text-align: center; padding: 3px 2px; }
.tabela tr td:first-child { border-radius: 10px 0 0 10px; }
.tabela tr td:last-child { border-radius: 0 10px 10px 0; }
.tabela tr.feita td { background: var(--ok-fundo); }
.tabela .ns { width: 30px; height: 30px; border-radius: 8px; background: var(--s2); font-weight: 800; font-size: 13px; }
.tabela .ns.A { color: var(--lima); } .tabela .ns.D { color: #a98bff; } .tabela .ns.F { color: var(--rosa); }
.tabela .ns.pr { color: #3a2a00; display: inline-grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ouro-claro), var(--ouro) 55%, var(--ouro-escuro)); box-shadow: 0 0 0 2px rgba(255,200,61,.25), 0 2px 10px rgba(255,200,61,.35); } .tabela .ns.pr svg.i { width: 16px; height: 16px; stroke-width: 2.4; }
/* janela "Tipo da série" (series.js) */
.ns-badge { width: 32px; height: 32px; border-radius: 9px; background: var(--s2); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; color: var(--txt); }
.ns-badge.A { color: var(--lima); } .ns-badge.D { color: #a98bff; } .ns-badge.F { color: var(--rosa); } .ns-badge.remover { color: var(--rosa); }
/* editor: séries prescritas uma a uma (como no Hevy) */
.plano { margin-top: 8px; }
.plano .tabela td { padding: 2px; }
.plano .tabela input { max-width: none; background: var(--s2); }
.plano .add-serie { margin: 6px 0 4px; height: 36px; }
.plano-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.plano-linha label { font-size: 10px; color: var(--txt-3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.plano-linha input { width: 100%; height: 36px; margin-top: 3px; border-radius: 10px; border: 1px solid var(--linha-2); background: var(--s2); text-align: center; font-weight: 700; }
.tabela .ant { font-size: 13px; color: var(--txt-3); white-space: nowrap; }
.tabela input { width: 100%; max-width: 72px; height: 36px; border-radius: 10px; border: 1px solid var(--linha-2); background: var(--s1); text-align: center; font-weight: 700; font-size: 16px; }
.tabela input:focus { outline: none; border-color: var(--ciano); }
.tabela input::placeholder { color: var(--txt-3); font-weight: 600; }
.tabela tr.feita input { background: transparent; border-color: transparent; }
.chk { width: 36px; height: 36px; border-radius: 10px; background: var(--s2); display: grid; place-items: center; color: var(--txt-3); }
.tabela tr.feita .chk { background: var(--oliva); color: var(--bg); }
.trofeu { color: var(--ouro); font-size: 13px; }
.add-serie { width: 100%; height: 40px; border-radius: 12px; background: var(--s1); font-weight: 600; font-size: 14px; margin: 8px 0 12px; color: var(--txt-2); display: flex; align-items: center; justify-content: center; gap: 6px; }

.descanso { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--seguro-baixo)); width: calc(min(460px, 100vw) - 24px); z-index: 25; background: var(--s2); border: 1px solid var(--linha-2); border-radius: 20px; padding: 10px 12px 12px; box-shadow: 0 16px 50px rgba(0,0,0,.55); }
.descanso .barra { height: 4px; border-radius: 4px; background: var(--linha); overflow: hidden; margin-bottom: 10px; }
.descanso .barra i { display: block; height: 100%; background: var(--ciano); transition: width 1s linear; }
.descanso .l { display: flex; align-items: center; gap: 10px; }
.descanso .t { font-family: var(--display); font-weight: 800; font-size: 36px; flex: 1; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
.descanso .lbl { font-size: 11px; color: var(--txt-2); text-align: center; margin-top: -2px; }

/* folha (bottom sheet) */
.fundo-folha { position: fixed; inset: 0; background: rgba(0,10,15,.6); z-index: 40; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.folha { width: 100%; max-width: 460px; max-height: 88dvh; overflow: auto; background: var(--s1); border-radius: 24px 24px 0 0; padding: 10px 16px calc(24px + var(--seguro-baixo)); animation: sobe .26s cubic-bezier(.2,.8,.2,1); }
/* janela de busca (Adicionar exercício): sempre alta, o campo de busca fica no alto, acima do teclado do iPhone */
.folha.alta { height: 88dvh; }
/* escolher vários exercícios (como no Hevy): linha marcada + botão fixo embaixo da janela */
.item.marcado { background: rgba(38,191,191,.12); }
.item.marcado .dir { color: var(--ciano); }
.rodape-escolha { position: sticky; bottom: 0; margin: 12px -16px calc(-24px - var(--seguro-baixo)); padding: 12px 16px calc(14px + var(--seguro-baixo)); background: linear-gradient(transparent, var(--s1) 30%); }
@keyframes sobe { from { transform: translateY(40px); opacity: .5; } }
.folha .alca { width: 40px; height: 4px; border-radius: 4px; background: var(--linha-2); margin: 0 auto 14px; }
.folha h3 { font-family: var(--display); font-size: 28px; font-weight: 800; margin: 14px 0 4px; line-height: 1; }
.passos { padding-left: 20px; margin: 10px 0 0; color: var(--txt-2); }
.passos li { margin: 6px 0; }
.passos li::marker { color: var(--lima); font-weight: 700; }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* gráficos */
.grafico { width: 100%; height: 160px; display: block; margin-top: 12px; }
.grafico text { fill: var(--txt-3); font-size: 10px; font-family: var(--corpo); }
.grafico.linha-evol { height: 180px; }
.grafico text.valor { fill: var(--txt); font-weight: 700; font-size: 10.5px; }

/* calendário */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.cal span { aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; font-size: 12px; color: var(--txt-3); background: var(--s2); }
.cal span.vazio { background: none; }
.cal span.on { background: var(--lima); color: var(--bg); font-weight: 800; }
.cal span.hoje { box-shadow: inset 0 0 0 1.5px var(--ciano); color: var(--txt); }
.cal .cab { background: none; aspect-ratio: auto; font-weight: 700; font-size: 10px; }

/* feedback */
.escala { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.escala button { padding: 12px 4px; border-radius: 14px; background: var(--s2); border: 1.5px solid transparent; font-size: 12px; font-weight: 600; color: var(--txt-2); }
.escala button b { display: block; font-size: 24px; margin-bottom: 4px; }
.escala button.on { border-color: var(--lima); color: var(--txt); background: rgba(217,224,33,.08); }
/* intensidade do treino: barras (no lugar dos emojis) */
.velocimetro { width: 40px; height: 26px; display: block; margin: 0 auto 6px; color: var(--txt); transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.velocimetro .agulha { transform-origin: 20px 22px; transform: rotate(var(--ang)); }
.escala button:not(.on) .velocimetro { opacity: .75; }
.escala button.on .velocimetro { transform: scale(1.15); opacity: 1; }
.escala button.on .velocimetro .agulha { animation: agulha .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes agulha { from { transform: rotate(-90deg); } }
.escala button[data-int="1"].on { border-color: var(--ciano); background: rgba(38,191,191,.1); } .escala button[data-int="2"].on { border-color: var(--oliva); background: rgba(140,187,47,.1); }
.escala button[data-int="4"].on { border-color: var(--rosa); background: rgba(231,26,124,.1); }
.selo-int { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--txt-2); }
.selo-int .velocimetro { width: 26px; height: 17px; margin: 0; }
/* resumo do treino: 4 números e o mapa de músculos */
.kpis.quatro { grid-template-columns: 1fr 1fr; }
.mapa-musc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.mapa-musc figure { margin: 0; text-align: center; }
.mapa-musc svg { width: 100%; max-height: 250px; display: block; }
.mapa-musc path.off { fill: var(--s3); }
.mapa-musc path.on { fill: var(--lima); }
.mapa-musc figcaption { font-size: 11px; color: var(--txt-3); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; }
.grupos-musc { flex-wrap: wrap; margin: 12px 0 0; padding: 0; overflow: visible; }
.grupos-musc .chip { cursor: default; }
textarea.campo, input.campo, select.campo { width: 100%; background: var(--s2); border: 1px solid var(--linha-2); border-radius: 14px; padding: 12px 14px; resize: vertical; min-height: 48px; }
textarea.campo { min-height: 96px; }
.campo:focus { outline: none; border-color: var(--ciano); }
.busca { position: relative; }
.busca svg.i { position: absolute; left: 14px; top: 14px; color: var(--txt-3); }
.busca input { padding-left: 44px; }

.celebra { text-align: center; padding: 26px 0 8px; }
.celebra .medalha { width: 92px; height: 92px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(217,224,33,.3), rgba(217,224,33,.05) 70%); color: var(--lima); animation: pulsa 1.8s ease-in-out infinite; }
.celebra .medalha svg.i { width: 44px; height: 44px; }
@keyframes pulsa { 50% { transform: scale(1.06); } }
.celebra h1 { font-family: var(--display); font-size: 38px; margin: 0; line-height: 1; }

.trava { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txt-2); background: rgba(38,191,191,.08); border: 1px solid rgba(38,191,191,.25); padding: 8px 10px; border-radius: 10px; margin-bottom: 10px; }
.trava svg.i { width: 15px; height: 15px; color: var(--ciano); }

.em-breve { opacity: .65; }
.aviso-atualizado { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 61; display: flex; align-items: center; gap: 12px; background: var(--txt); color: var(--bg); padding: 8px 8px 8px 16px; border-radius: 14px; font-weight: 700; font-size: 14px; max-width: calc(100vw - 32px); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); } /* P3 de publicação */
.aviso-atualizado span { white-space: nowrap; }
.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); background: var(--txt); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; z-index: 60; animation: entra .25s; max-width: calc(100vw - 32px); }

.feed .cab { display: flex; gap: 10px; align-items: center; }
.feed .nums { display: flex; gap: 18px; margin: 12px 0 4px; }
.feed .nums div { font-size: 11px; color: var(--txt-2); }
.feed .nums b { display: block; color: var(--txt); font-size: 15px; }
.feed .lin { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; color: var(--txt-2); }
.feed .lin .anim { width: 34px; height: 34px; border-radius: 50%; }

.arrasta { color: var(--txt-3); }
.presc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.presc label { font-size: 10px; color: var(--txt-3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.presc input { width: 100%; height: 36px; margin-top: 3px; border-radius: 10px; border: 1px solid var(--linha-2); background: var(--s2); text-align: center; font-weight: 700; }

.grade-ex { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.grade-ex button { text-align: left; background: var(--s1); border: 1px solid var(--linha); border-radius: 16px; padding: 8px; }
.grade-ex .anim { width: 100%; height: auto; aspect-ratio: 1; }
.grade-ex .t { font-weight: 600; font-size: 13px; margin: 8px 2px 2px; line-height: 1.2; }
.grade-ex .s { font-size: 11px; color: var(--txt-2); margin: 0 2px 2px; }

/* ===== app real: entrada, formulários, conta ===== */
.proto { display: none; }
.entrada { max-width: 420px; margin: 0 auto; padding: calc(32px + var(--seguro-topo)) 20px 48px; min-height: 100dvh; display: flex; flex-direction: column; gap: 14px; }
.entrada h1 { font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1; margin: 18px 0 0; }
.entrada form { display: grid; gap: 14px; margin-top: 6px; }
.marca { display: flex; align-items: baseline; gap: 8px; }
.marca-k { font-family: var(--display); font-weight: 900; font-size: 30px; color: var(--ciano); letter-spacing: .02em; }
.marca-t { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--lima); }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--txt-2); }
.campo.grande { font-size: 24px; letter-spacing: .2em; text-align: center; font-weight: 800; }
.dica { font-weight: 400; font-size: 12px; color: var(--txt-3); }
.pequeno { font-size: 12px; }
.erro { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(231,26,124,.12); border: 1px solid rgba(231,26,124,.35); color: var(--rosa-texto); font-size: 14px; }
.erro[hidden] { display: none; }
.aceites { display: grid; gap: 10px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--txt); font-size: 14px; background: var(--s1); border: 1px solid var(--linha); border-radius: 12px; padding: 12px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lima); flex: none; }
.check a, .entrada a:not(.btn) { color: var(--ciano); }
.qr { background: #fff; border-radius: 18px; padding: 10px; width: min(240px, 70vw); margin: 4px auto; }
.qr svg { display: block; width: 100%; height: auto; }
.chave { display: block; margin-top: 8px; font-size: 15px; letter-spacing: .08em; word-break: break-all; color: var(--txt); }
.codigos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.codigos code { background: var(--s1); border: 1px solid var(--linha-2); border-radius: 10px; padding: 10px; text-align: center; font-size: 16px; letter-spacing: .06em; color: var(--lima); }
.titulo-perfil { font-family: var(--display); font-size: 32px; margin: 10px 0 0; line-height: 1; }
.av.g { display: grid; }
a.item, a.btn { color: inherit; text-decoration: none; }
.link-convite { font-weight: 700; margin-top: 6px; word-break: break-all; font-size: 13px; }
.radio { flex: 1; display: block; }
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio span { display: block; text-align: center; padding: 8px; border-radius: 9px; font-weight: 600; color: var(--txt-2); }
.radio input:checked + span { background: var(--s3); color: var(--txt); }
.radio input:focus-visible + span { outline: 2px solid var(--ciano); }
.folha form { display: grid; gap: 12px; margin-top: 12px; }
button:disabled { opacity: .6; cursor: default; }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }
.legal h1 { font-family: var(--display); font-size: 34px; margin: 14px 0 4px; }
.legal h2 { font-family: var(--display); font-size: 22px; margin: 22px 0 6px; }
.legal p, .legal li { color: var(--txt); line-height: 1.55; }
.legal a { color: var(--ciano); }
.anim.sem-img, .grade-ex .anim.sem-img { display: grid; place-items: center; background: var(--s2); color: var(--txt-3); }
.anim.sem-img svg.i { width: 40%; height: 40%; }
.grade-ex .anim { background: #fff; }
.seletor { padding: 8px 12px; min-height: 0; height: 38px; flex: 1; }
.lima { color: var(--lima); }
select.campo { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--txt-2) 50%), linear-gradient(135deg, var(--txt-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.titulo-campo { font-family: var(--display); font-size: 26px; font-weight: 800; }
.obs-campo { margin-top: 8px; min-height: 40px; padding: 9px 12px; font-size: 16px; }
.presc label { display: block; font-size: 10px; color: var(--txt-3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.barra-treino { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + var(--seguro-baixo)); width: calc(min(460px, 100vw) - 32px); z-index: 19; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-color: rgba(217,224,33,.4); background: var(--s2); }

/* aviso de recorde (recorde.js): círculo com troféu que desce, solta faíscas e abre numa pílula */
.recorde-aviso { position: fixed; top: calc(10px + var(--seguro-topo)); left: 0; right: 0; z-index: 70; display: flex; justify-content: center; pointer-events: none; }
.ra-pilula { pointer-events: auto; position: relative; display: flex; align-items: center; height: 58px; max-width: 58px; border-radius: 29px; background: rgba(7,42,59,.96); border: 1px solid rgba(255,200,61,.5); box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 0 32px rgba(255,200,61,.28); overflow: visible; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: ra-desce .5s cubic-bezier(.3,1.5,.5,1) both, ra-abre .5s cubic-bezier(.4,1.2,.5,1) .75s both; }
.ra-medalha { position: relative; flex: none; width: 46px; height: 46px; margin: 0 5px; border-radius: 50%; display: grid; place-items: center; color: var(--bg); background: radial-gradient(circle at 35% 30%, var(--ouro-claro), var(--ouro) 55%, var(--ouro-escuro)); color: #3a2a00; animation: ra-pula .6s cubic-bezier(.3,1.8,.5,1) .15s both; }
.ra-medalha svg.i { width: 24px; height: 24px; stroke-width: 2.4; }
.ra-faiscas i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--ouro); opacity: 0; animation: ra-faisca .7s ease-out .3s both; }
.ra-faiscas i:nth-child(even) { background: var(--ciano); width: 4px; height: 4px; }
.ra-faiscas i:nth-child(1) { --a: 0deg; }
.ra-faiscas i:nth-child(2) { --a: 36deg; }
.ra-faiscas i:nth-child(3) { --a: 72deg; }
.ra-faiscas i:nth-child(4) { --a: 108deg; }
.ra-faiscas i:nth-child(5) { --a: 144deg; }
.ra-faiscas i:nth-child(6) { --a: 180deg; }
.ra-faiscas i:nth-child(7) { --a: 216deg; }
.ra-faiscas i:nth-child(8) { --a: 252deg; }
.ra-faiscas i:nth-child(9) { --a: 288deg; }
.ra-faiscas i:nth-child(10) { --a: 324deg; }
.ra-conteudo { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 18px; opacity: 0; white-space: nowrap; animation: ra-mostra .3s ease 1.05s both; }
.ra-foto .anim { width: 38px; height: 38px; border-radius: 50%; }
.ra-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ra-txt b { font-size: 14px; color: var(--txt); overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ra-txt small { font-size: 13px; font-weight: 700; color: var(--ouro); }
.ra-txt small.troca { animation: ra-troca .35s ease both; }
@keyframes ra-troca { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.recorde-aviso.sai .ra-pilula { overflow: hidden; max-width: var(--w, 380px); animation: ra-fecha .3s cubic-bezier(.5,0,.7,.4) both, ra-sobe .35s ease-in .28s both; }
.recorde-aviso.sai .ra-conteudo { animation: ra-esconde .15s ease both; }
.recorde-aviso.sai .ra-faiscas { display: none; }
@keyframes ra-desce { from { transform: translateY(-90px) scale(.6); opacity: 0; } }
@keyframes ra-pula { 0% { transform: scale(.3) rotate(-25deg); } 60% { transform: scale(1.18) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ra-abre { from { max-width: 58px; } to { max-width: 380px; } }
@keyframes ra-mostra { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes ra-fecha { from { max-width: var(--w, 380px); } to { max-width: 58px; } }
@keyframes ra-esconde { from { opacity: 1; } to { opacity: 0; } }
@keyframes ra-sobe { to { transform: translateY(-100px) scale(.8); opacity: 0; } }
@keyframes ra-faisca { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-38px) scale(.4); } }
@media (prefers-reduced-motion: reduce) { .ra-pilula, .ra-medalha, .ra-conteudo, .ra-faiscas i, .recorde-aviso.sai .ra-pilula, .recorde-aviso.sai .ra-conteudo { animation: none !important; } .ra-pilula { max-width: 380px; } .ra-conteudo { opacity: 1; } }

/* tela de conquistas ao salvar o treino (conquistas.js): cartões que deslizam, medalha de ouro, confete */
body.sem-rolagem { overflow: hidden; }
.conquistas { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% 0%, rgba(255,200,61,.14), transparent 60%), var(--bg); padding: calc(18px + var(--seguro-topo)) 0 calc(18px + var(--seguro-baixo)); overflow: hidden; animation: cq-entra .35s ease both; }
.conquistas.sai { animation: cq-sai .25s ease both; }
.cq-topo { text-align: center; padding: 8px 16px 14px; position: relative; z-index: 1; }
.cq-topo h2 { font-family: var(--display); font-size: 34px; line-height: 1.05; margin: 0; }
.cq-topo p { margin: 6px 0 0; color: var(--txt-2); font-size: 14px; }
.cq-trilho { flex: 1; min-height: 0; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 28px; scrollbar-width: none; position: relative; z-index: 1; overscroll-behavior-x: contain; }
.cq-trilho::-webkit-scrollbar { display: none; }
.cq-cartao { flex: 0 0 100%; max-width: 420px; scroll-snap-align: center; border-radius: 24px; padding: 24px 22px; background: linear-gradient(160deg, var(--s2), var(--s1, #0a2a3a)); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; justify-content: center; max-height: 470px; align-self: center; height: 100%; box-sizing: border-box; overflow: hidden; position: relative; }
.cq-cartao h3 { margin: 0 0 18px; font-size: 22px; font-family: var(--display); }
.cq-pr { background: radial-gradient(90% 70% at 50% 18%, rgba(255,200,61,.22), transparent 70%), linear-gradient(160deg, var(--s2), var(--s1, #0a2a3a)); border-color: rgba(255,200,61,.35); text-align: center; align-items: center; }
.cq-medalha { position: relative; width: 84px; height: 84px; margin-bottom: 18px; animation: cq-medalha .7s cubic-bezier(.3,1.7,.5,1) .15s both; }
.cq-medalha::before, .cq-medalha::after { content: ''; position: absolute; bottom: -14px; width: 22px; height: 38px; background: linear-gradient(var(--ouro-escuro), #9a6a00); z-index: -1; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.cq-medalha::before { left: 18px; transform: rotate(14deg); } .cq-medalha::after { right: 18px; transform: rotate(-14deg); }
.cq-medalha span { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 24px; letter-spacing: .02em; color: #3a2a00; background: radial-gradient(circle at 35% 30%, var(--ouro-claro), var(--ouro) 55%, var(--ouro-escuro)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.25), 0 6px 26px rgba(255,200,61,.45); }
.cq-valor { font-family: var(--display); font-size: 52px; line-height: 1; font-weight: 800; color: var(--txt); }
.cq-pr .cq-valor { color: var(--ouro); text-shadow: 0 0 30px rgba(255,200,61,.35); }
.cq-ex { display: flex; align-items: center; gap: 10px; margin-top: 16px; justify-content: center; }
.cq-ex b { font-size: 17px; }
.cq-foto .anim { width: 40px; height: 40px; border-radius: 50%; }
.cq-rotulo { margin-top: 10px; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ouro); }
.cq-det { margin-top: 4px; color: var(--txt-2); font-size: 14px; }
.cq-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
.cq-numeros b { display: flex; align-items: center; gap: 6px; font-size: 24px; font-family: var(--display); }
.cq-numeros span { color: var(--txt-2); font-size: 13px; }
.cq-ouro { color: var(--ouro); }
.cq-mini { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ouro-claro), var(--ouro) 55%, var(--ouro-escuro)); }
.cq-lista { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 8px; font-size: 15px; }
.cq-lista em { font-style: normal; font-weight: 800; color: var(--ciano); margin-right: 4px; }
.cq-mais { color: var(--txt-2); }
.cq-comp { text-align: center; align-items: center; }
.cq-pequeno { color: var(--txt-2); font-size: 16px; }
.cq-comp .cq-valor { margin: 8px 0 4px; color: var(--lima); }
.cq-emoji { font-size: 92px; line-height: 1.1; margin: 14px 0; animation: cq-flutua 3s ease-in-out infinite; }
.cq-pontos { display: flex; justify-content: center; gap: 6px; padding: 14px 0; min-height: 8px; position: relative; z-index: 1; }
.cq-pontos i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); transition: background .2s, transform .2s; }
.cq-pontos i.on { background: var(--ouro); transform: scale(1.25); }
.cq-ok { margin: 0 16px; width: auto; align-self: stretch; position: relative; z-index: 1; }
.cq-confete { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.cq-confete i { position: absolute; top: -12px; width: 7px; height: 12px; border-radius: 2px; opacity: 0; animation: cq-cai 2.4s cubic-bezier(.3,.6,.6,1) both; }
@keyframes cq-entra { from { opacity: 0; transform: scale(.97); } }
@keyframes cq-sai { to { opacity: 0; transform: scale(.98); } }
@keyframes cq-medalha { 0% { transform: scale(.2) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: none; } }
@keyframes cq-cai { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(95vh) rotate(calc(var(--g) * 3)); } }
@keyframes cq-flutua { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .conquistas, .conquistas.sai, .cq-medalha, .cq-emoji { animation: none !important; } .cq-confete { display: none; } }

/* fotos de evolução (fotos.js, etapa 2.1) */
.aviso-teste { display: flex; gap: 10px; align-items: flex-start; border-color: rgba(231,26,124,.4); background: rgba(231,26,124,.08); font-size: 14px; }
.aviso-teste svg.i { flex: none; color: var(--rosa); margin-top: 2px; }
.fs-sessao { display: block; width: 100%; text-align: left; margin-bottom: 10px; }
.fs-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.fs-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fs-trio img, .fs-vazia { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--s1); }
.fs-vazia { display: grid; place-items: center; color: var(--txt-3); font-size: 12px; border: 1px dashed var(--linha); }
.fs-nota { margin-top: 8px; }
.perigo-texto { color: var(--rosa-texto); }
.fs-dicas { margin: 0 0 12px; } .fs-dicas summary { display: flex; gap: 8px; align-items: center; cursor: pointer; color: var(--ciano); font-weight: 600; font-size: 14px; } .fs-dicas ul { padding-left: 18px; margin: 8px 0 0; }
.fs-poses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fs-pose { display: grid; gap: 6px; text-align: center; cursor: pointer; font-size: 13px; }
.fs-pose-img { aspect-ratio: 3 / 4; border-radius: 12px; border: 1px dashed var(--linha); background: var(--s1); display: grid; place-items: center; overflow: hidden; color: var(--txt-3); }
.fs-pose-img img { width: 100%; height: 100%; object-fit: cover; }
.fs-girando { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--linha); border-top-color: var(--ciano); animation: fs-gira .8s linear infinite; }
@keyframes fs-gira { to { transform: rotate(1turn); } }
.fs-grande { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px; background: var(--s1); display: block; }
.seg button:disabled { opacity: .35; }
.fs-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fs-lado figure { margin: 0; } .fs-lado img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--s1); display: block; }
.fs-lado figcaption { text-align: center; font-size: 12px; color: var(--txt-2); margin-top: 4px; }
.fs-desliza { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--s1); }
.fs-desliza img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fs-desliza .fs-depois { clip-path: inset(0 0 0 var(--corte)); }
.fs-linha { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.6); }
.fs-rot { position: absolute; top: 8px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,.55); }
.fs-rot.e { left: 8px; } .fs-rot.d { right: 8px; }
.fs-faixa { width: 100%; margin-top: 10px; accent-color: var(--lima); }
.fs-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fs-datas label { min-width: 0; } .fs-datas select { width: 100%; min-width: 0; font-size: 16px; text-overflow: ellipsis; }
.fs-datas select { -webkit-appearance: none; appearance: none; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--s1); color: var(--txt); font-family: inherit; }
.fs-chaves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fs-chave { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--s1); border: 1px solid var(--linha); font-size: 14px; cursor: pointer; }
.fs-chave input { width: 20px; height: 20px; accent-color: var(--lima); flex: none; }
.fs-estado { margin: 0 0 10px; color: var(--ciano); }
.fs-pose-img { position: relative; }
.fs-selo { position: absolute; left: 4px; bottom: 4px; font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.6); }

/* câmera guiada (camera.js, etapa 2.3) */
.fs-cam { width: 100%; }
.camera { position: fixed; inset: 0; z-index: 90; background: #000; overflow: hidden; }
.camera video, .camera .cm-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera.espelho video, .camera.espelho .cm-guia .cm-sombra { transform: scaleX(-1); }
.cm-guia { position: absolute; inset: 0; pointer-events: none; }
.cm-sombra { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.camera.sem-sombra .cm-sombra, .camera.conferindo .cm-guia, .camera.conferindo .cm-nivel { display: none; }
.cm-topo { position: absolute; top: calc(10px + var(--seguro-topo)); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; }
.cm-pose { font-family: var(--display); font-size: 28px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.cm-bt { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.45); display: grid; place-items: center; color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cm-nivel { position: absolute; top: calc(70px + var(--seguro-topo)); left: 50%; width: 96px; height: 96px; margin-left: -48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: rgba(0,0,0,.25); display: grid; place-items: center; }
.cm-nivel i { width: 22px; height: 22px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 10px rgba(0,0,0,.5); transition: transform .1s linear; }
.cm-nivel.ok { border-color: var(--lima); } .cm-nivel.ok i { background: var(--lima); }
.cm-conta { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 150px; font-weight: 800; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.7); pointer-events: none; }
.cm-baixo { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(18px + var(--seguro-baixo)); background: linear-gradient(transparent, rgba(0,0,0,.75) 40%); }
.cm-aviso { margin: 0 auto 10px; max-width: 420px; padding: 10px 12px; border-radius: 12px; background: var(--rosa); color: #fff; font-weight: 700; font-size: 14px; text-align: center; }
/* avisos (foto recusada, corpo incompleto) por cima da câmera e no alto, longe dos botões */
body:has(> .camera) .toast { z-index: 95; top: calc(70px + var(--seguro-topo)); bottom: auto; }
.cm-dica { text-align: center; color: #fff; margin-bottom: 12px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.cm-acoes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.cm-acoes[data-acoes=conferir] { grid-template-columns: 1fr 1fr; }
.cm-disparo { width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 5px solid rgba(255,255,255,.4); background-clip: padding-box; justify-self: center; }
.cm-disparo:disabled { opacity: .5; }
.cm-tempo { justify-self: center; padding: 8px 14px; border-radius: 20px; background: rgba(0,0,0,.45); color: #fff; font-weight: 700; }
.cm-acoes[hidden], .cm-nivel[hidden], .cm-conta[hidden], .camera [hidden] { display: none !important; }
.cm-nivel { left: auto; right: 14px; margin-left: 0; width: 72px; height: 72px; top: calc(66px + var(--seguro-topo)); }
.cm-nivel i { width: 18px; height: 18px; }

/* ---------- Questionários (etapa 3.2) ---------- */
.q-card { margin-top: 10px; }
.q-card.falta { border-color: var(--rosa); box-shadow: 0 0 0 1px var(--rosa) inset; }
.q-t { font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.q-obr { color: var(--rosa); }
.q-secao { font-family: var(--display); font-size: 24px; margin: 22px 0 4px; }
.q-ops { display: grid; gap: 8px; }
.q-ops.linha { grid-template-columns: 1fr 1fr; }
.q-op { display: flex; align-items: center; gap: 10px; background: var(--s2); border: 1px solid var(--linha-2); border-radius: 12px; padding: 11px 12px; cursor: pointer; }
.q-op input { width: 20px; height: 20px; accent-color: var(--lima); flex: none; margin: 0; }
.q-op:has(input:checked) { border-color: var(--lima); background: rgba(217,224,33,.08); }
.q-escala { display: flex; gap: 6px; }
.q-escala label { flex: 1; }
.q-escala input { position: absolute; opacity: 0; pointer-events: none; }
.q-escala span { display: grid; place-items: center; height: 46px; border-radius: 12px; background: var(--s2); border: 1px solid var(--linha-2); font-weight: 800; font-size: 18px; cursor: pointer; }
.q-escala input:checked + span { background: var(--lima); color: #0b1a24; border-color: var(--lima); }
.q-escala input:focus-visible + span { outline: 2px solid var(--ciano); }
.q-legendas { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--txt-2); margin-top: 6px; }
.q-legendas span:nth-child(2):not(:last-child) { text-align: center; }
.q-legendas span:last-child { text-align: right; }
.q-num { display: flex; align-items: center; gap: 8px; }
.q-num .campo { max-width: 140px; }
.q-resp { font-size: 16px; }
.q-antes { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--linha-2); font-size: 13px; color: var(--txt-2); }
.q-antes span:first-child { font-weight: 700; }
.q-antes.mudou { color: var(--lima); }
/* fotos 2.4: exemplos nas dicas e aviso de corpo incompleto */
.fs-exemplos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 4px; }
.fs-exemplos figure { margin: 0; } .fs-exemplos img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: var(--s2); display: block; }
.fs-exemplos figcaption { text-align: center; font-size: 12px; color: var(--txt-2); margin-top: 3px; }
.fs-selo.alerta { background: var(--rosa); color: #fff; }
/* etapa 4.2: barras horizontais (séries por grupo muscular) */
.barras-h { display: grid; gap: 7px; margin: 4px 0 8px; }
.bh { display: grid; grid-template-columns: 92px 1fr 34px; gap: 8px; align-items: center; font-size: 13px; }
.bh-nome { color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-barra { height: 10px; border-radius: 6px; background: rgba(240,240,232,.07); overflow: hidden; }
.bh-barra i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, rgba(38,191,191,.7), var(--lima)); }
.bh b { text-align: right; font-weight: 800; }
/* etapa 4.4: troféu dentro do selo (recordes no painel) */
.selo svg.i { width: 12px; height: 12px; vertical-align: -2px; }
.item .tag-row .selo { white-space: normal; }

/* ===== Direção A · Início do aluno (UX/UI 10/10) =====
   Uma ação principal (lima), seções separadas por espaço e não por caixas, números em Darker Grotesque. */
.inicio .ini-topo { margin: var(--e-1) 0 var(--e-5); }
.ini-data { font-size: var(--t-2); color: var(--txt-2); }
.ini-data::first-letter { text-transform: uppercase; }
.ini-topo h1 { font-family: var(--display); font-weight: 800; font-size: var(--d-3); line-height: 1; margin: var(--e-1) 0 0; letter-spacing: -.01em; }

.ini-hoje { background: var(--s1); border: 1px solid var(--linha-2); border-radius: 22px; padding: var(--e-5) var(--e-4) var(--e-4); }
.hoje-rot { font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lima); }
.hoje-rot span { color: var(--txt-2); letter-spacing: .04em; }
.hoje-nome { font-family: var(--display); font-weight: 800; font-size: var(--d-4); line-height: .9; margin: var(--e-2) 0 0; letter-spacing: -.015em; }
.hoje-meta { margin: var(--e-2) 0 0; color: var(--txt-2); font-size: var(--t-3); }
.hoje-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; width: 100%; margin: var(--e-4) 0; padding: var(--e-1) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); text-align: left; }
.hoje-lista .hx { min-width: 0; display: flex; align-items: center; gap: var(--e-3); min-height: var(--toque); padding: var(--e-1) 0; }
.hoje-lista .anim { width: 36px; height: 36px; border-radius: 10px; }
.hx-nome { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-ser { flex: none; color: var(--txt-2); font-size: var(--t-2); font-variant-numeric: tabular-nums; }
.hx-mais { display: block; padding: var(--e-1) 0 var(--e-2) 48px; color: var(--ciano); font-size: var(--t-2); font-weight: 600; }
.btn.grande { height: 56px; font-size: var(--t-4); border-radius: 16px; box-shadow: none; }
.hoje-meta + .btn.grande { margin-top: var(--e-5); }
.hoje-sec { margin-top: var(--e-2); background: transparent; }

.ini-sec { margin-top: var(--e-6); }
.ini-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--e-3); }
.ini-cab h2 { font-family: var(--display); font-weight: 800; font-size: var(--d-1); margin: 0; }
.ini-cab span { color: var(--txt-2); font-size: var(--t-2); }
.ini-cab a { color: var(--ciano); font-size: var(--t-2); font-weight: 600; text-decoration: none; min-height: var(--toque); display: inline-flex; align-items: center; margin: -12px 0; }
.inicio .semana { margin-top: 0; }

.numeros { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--e-5); border-top: 1px solid var(--linha); padding-top: var(--e-4); }
.numeros div { padding: 0 var(--e-3); }
.numeros div:first-child { padding-left: 0; }
.numeros div + div { border-left: 1px solid var(--linha); }
.numeros b { display: block; font-family: var(--display); font-weight: 800; font-size: var(--d-2); line-height: 1; font-variant-numeric: tabular-nums; }
.numeros b small { font-size: var(--t-3); color: var(--txt-2); margin-left: 2px; }
.numeros span { display: block; margin-top: var(--e-1); font-size: var(--t-1); color: var(--txt-2); line-height: 1.3; }

.inicio .item { min-height: 60px; }
.pend .pend-acao { color: var(--roxo-texto); font-weight: 700; font-size: var(--t-2); }
.inicio .item .dir { color: var(--txt-3); }
.feito-vol { color: var(--txt-2); font-size: var(--t-2); font-variant-numeric: tabular-nums; }
.selo.voz { background: rgba(103,37,249,.2); color: var(--roxo-texto); }

/* esqueleto de carregamento (main.js): aparece só se a tela demorar mais de 0,2 s (4G fraco na academia) */
.esqueleto i { display: block; border-radius: var(--r-cartao); background: var(--s1); animation: esq 1.2s ease-in-out infinite; }
.esqueleto i + i { margin-top: var(--e-3); }
.esqueleto .e-tit { width: 55%; height: 36px; border-radius: 10px; margin: var(--e-5) 0 var(--e-5); }
.esqueleto .e-gde { height: 260px; }
.esqueleto .e-med { height: 120px; }
@keyframes esq { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .esqueleto i { animation: none; } }

/* ===== Direção A · padrões gerais (UX/UI 10/10) ===== */
[hidden], .item[hidden] { display: none !important; }
/* toque: o desenho continua do mesmo tamanho, mas a área de toque chega a 44 px */
.chip, .seg button, .btn.peq { position: relative; }
.chip::after, .seg button::after, .btn.peq::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--toque); transform: translateY(-50%); }
.btn-ic { width: var(--toque); height: var(--toque); }
/* segmentado = trocar de visão; chip = filtrar */
.seg.cheio { display: flex; }
.seg.cheio button { flex: 1; }
.creditos { margin-top: var(--e-6); text-align: center; color: var(--txt-3); }

/* treino em andamento: alvos maiores para a mão suada */
.bloco .tabela input { height: var(--toque); border-radius: var(--r-campo); }
.bloco .tabela .chk { width: var(--toque); height: var(--toque); border-radius: var(--r-campo); }
.bloco .tabela .ns { width: 38px; height: 38px; border-radius: 10px; font-size: var(--t-3); }
.bloco .add-serie { height: var(--toque); }
.exec-topo .btn.peq { height: var(--toque); padding: 0 18px; font-size: var(--t-3); border-radius: var(--r-campo); }
.descanso .btn.peq { height: var(--toque); min-width: 56px; }
/* teclado aberto (16/10/2026): o teclado abre por cima do rodapé e escondia o descanso. treino.js sobe a faixa para logo
   acima do teclado (transform) e ela fica mais baixa, numa linha só, para sobrar espaço para a série que está sendo anotada */
.teclado .descanso { bottom: 8px; padding: 6px 10px 8px; border-radius: 16px; }
.teclado .descanso .barra { height: 3px; margin-bottom: 6px; }
.teclado .descanso .t { font-size: 26px; }
.teclado .descanso .lbl { display: none; }
.teclado .descanso .btn.peq { height: 40px; min-width: 48px; }

/* celular deitado (16/10/2026): o iPhone não deixa o app travar em pé (o "orientation: portrait" do manifesto só vale no
   Android). Deitado, a tela passa de 600 px e aparecia a "moldura de celular" no meio, com muita sobra dos lados. Agora o
   app ocupa a largura toda, sem moldura, e desvia do recorte da câmera nos lados. Celular deitado com 1000 px ou mais
   já usa o layout de computador (abaixo). */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) and (pointer: coarse) {
  body { padding: 0; }
  #app { max-width: none; min-height: 100dvh; border-radius: 0; box-shadow: none; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}

/* ===== Direção A · Painel do treinador ===== */
.pn-tit { display: flex; align-items: center; gap: var(--e-3); justify-content: space-between; }
.pn-tit h1 { font-family: var(--display); font-weight: 800; font-size: var(--d-3); line-height: 1; margin: var(--e-1) 0 0; letter-spacing: -.01em; }
.painel .ini-topo { margin: var(--e-1) 0 var(--e-5); }
.numeros.quatro { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.numeros .cq-ouro { color: var(--ouro); }
.pn-vazio { padding: var(--e-4) 0; text-align: center; }
.pn-treino { align-items: flex-start; }
.pn-treino .av { margin-top: 2px; }
.pn-treino .dir { align-self: center; }
.pn-nota { margin-top: var(--e-1); font-size: var(--t-2); color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-pr { display: inline-flex; align-items: center; gap: 3px; color: var(--ouro); font-weight: 800; font-size: var(--t-2); }
.pn-pr svg.i { width: 15px; height: 15px; }
.selo.pr { background: rgba(255,200,61,.14); color: var(--ouro); }
.pn-mais { display: flex; width: 100%; min-height: var(--toque); align-items: center; justify-content: center; margin-top: var(--e-2); color: var(--ciano); font-weight: 600; font-size: var(--t-2); }

/* questionário: quanto falta (fica no alto ao rolar) */
.q-progresso { position: sticky; top: var(--seguro-topo); z-index: 10; display: flex; align-items: center; gap: var(--e-3); margin: var(--e-3) -16px 0; padding: var(--e-3) 16px; background: rgba(0,20,28,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.q-prog-txt { flex: none; font-size: var(--t-2); font-weight: 600; color: var(--txt-2); font-variant-numeric: tabular-nums; }
.q-prog-barra { flex: 1; height: 6px; border-radius: 6px; background: var(--linha); overflow: hidden; }
.q-prog-barra i { display: block; height: 100%; background: var(--lima); border-radius: 6px; transition: width .3s; }

/* ===== Direção A · computador (≥ 1000 px): menu na lateral, conteúdo centralizado, janelas no meio =====
   Entre 600 e 999 px continua a "moldura de celular" de antes. */
.nav-marca { display: none; }
@media (min-width: 1000px) {
  body { padding: 0; background: var(--bg); }
  #app { max-width: none; margin: 0; min-height: 100dvh; border-radius: 0; box-shadow: none; overflow: visible; }
  #app:has(> .nav) { padding-left: 248px; }
  .tela { max-width: 760px; margin: 0 auto; padding: 40px 32px 64px; }
  .nav { left: 0; top: 0; bottom: 0; transform: none; width: 248px; flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 28px 14px; border-radius: 0; border: 0; border-right: 1px solid var(--linha); background: var(--bg-2); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-marca { display: flex; align-items: center; gap: 10px; padding: 0 10px 24px; }
  .nav-marca img { width: 36px; height: 36px; border-radius: 10px; }
  .nav-marca span { font-family: var(--display); font-weight: 900; font-size: 24px; color: var(--ciano); letter-spacing: .01em; }
  .nav-marca b { color: var(--lima); font-weight: 800; }
  .nav button { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px; min-height: var(--toque); border-radius: 12px; font-size: var(--t-3); color: var(--txt-2); }
  .nav button:hover { background: rgba(240,240,232,.05); color: var(--txt); }
  .nav button.on { background: rgba(217,224,33,.1); color: var(--lima); }
  .nav button:active { transform: none; }
  .nav-bolha { display: none; }
  .barra-treino { left: calc(50% + 124px); width: min(560px, calc(100vw - 300px)); bottom: 24px; }
  .descanso { width: min(560px, calc(100vw - 48px)); bottom: 24px; }
  .toast { bottom: 40px; }
  /* janelas (folhas) no meio da tela, e não presas ao rodapé */
  .fundo-folha { align-items: center; }
  .folha { max-width: 560px; max-height: 84dvh; border-radius: 24px; padding: 10px 24px 24px; }
  .folha.alta { height: 84dvh; }
  .folha .alca { display: none; }
  .rodape-escolha { margin: 12px -24px -24px; padding: 12px 24px 16px; }
  /* painel do treinador em duas colunas: treinos à esquerda; atenção e recordes à direita */
  .tela.painel { max-width: 1120px; display: grid; grid-template-rows: auto auto auto 1fr; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .painel > .ini-topo, .painel > .numeros { grid-column: 1 / -1; }
  .painel > section:nth-of-type(1) { grid-column: 2; grid-row: 3; }
  .painel > section:nth-of-type(2) { grid-column: 1; grid-row: 3 / span 2; }
  .painel > section:nth-of-type(3) { grid-column: 2; grid-row: 4; }
  .painel .numeros div { padding: 0 var(--e-5); }
  .painel .numeros div:first-child { padding-left: 0; }
  .painel .numeros b { font-size: var(--d-3); }
  .item:hover, .card[data-treino-aluno]:hover { background: rgba(240,240,232,.03); }
  .tela .chips { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .grade-ex { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Direção A · passo 3 (11/10): ficha, página do exercício, editor ===== */
.numeros.sem-linha { margin-top: var(--e-2); border-top: 0; padding-top: 0; }
.numeros .num-alerta { color: var(--rosa-texto); }
.obs-rotulo { margin-top: var(--e-3); }
.obs-rotulo .obs-campo { margin-top: 0; }
.arrasta { width: 36px; height: 34px; display: grid; place-items: center; border-radius: 8px; }
.arrasta:active { background: var(--s2); }
.ini-cab { flex-wrap: wrap; column-gap: var(--e-3); row-gap: 2px; }

/* ===== utilidades (11/10): substituem os estilos escritos direto nas telas. Ganham das outras regras, como o estilo solto ganhava ===== */
.mt-0 { margin-top: 0 !important; } .m-0 { margin: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: var(--e-2) !important; } .mt-3 { margin-top: var(--e-3) !important; } .mt-4 { margin-top: var(--e-4) !important; } .mb-3 { margin-bottom: var(--e-3) !important; }
.pilha { display: grid !important; gap: 10px; margin-top: 14px; }
.duas-col { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.linha-flex { display: flex !important; gap: var(--e-3); align-items: center; }
.grade-centro { display: inline-grid !important; place-items: center; }
.negrito { font-weight: 700 !important; } .centro { text-align: center !important; }
.flex1 { flex: 1 !important; } .min0 { min-width: 0 !important; }
[hidden].pilha, [hidden].duas-col, [hidden].linha-flex, [hidden].grade-centro { display: none !important; } /* escondido sempre ganha */

/* ===== Direção A · telas finais (11/10) ===== */
.trn { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); }
.trn + .trn { margin-top: var(--e-2); }
.trn-info { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; min-height: var(--toque); }
.trn-nome { font-family: var(--display); font-weight: 800; font-size: var(--d-1); line-height: 1.05; }
.trn-meta { color: var(--txt-2); font-size: var(--t-2); }
.trn-exs { color: var(--txt-3); font-size: var(--t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn-play { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--lima); border: 1.5px solid rgba(217,224,33,.5); background: rgba(217,224,33,.08); }
.trn-play svg.i { width: 20px; height: 20px; margin-left: 2px; }
.trn-play:disabled { opacity: .35; }
.trn-play:active { transform: scale(.94); }
.numeros b.b-txt { font-size: var(--d-1); line-height: 1.1; }
.celebra + .numeros { margin-top: var(--e-2); }
/* camaleão (manual da marca: só como detalhe pontual, nunca cobrindo a tela) */
.vazio-cam { padding: var(--e-5) var(--e-4); }
.vazio-cam .camaleao { display: block; width: 120px; height: auto; margin: 0 auto var(--e-3); }
.com-cam { position: relative; overflow: hidden; }
.com-cam .cam-canto { position: absolute; right: -18px; top: -14px; width: 120px; height: auto; opacity: .9; transform: rotate(8deg); pointer-events: none; }
.com-cam .hoje-rot, .com-cam .hoje-nome { position: relative; max-width: calc(100% - 70px); }
.marca { align-items: center; }
.marca-ic { width: 44px; height: 44px; border-radius: 12px; margin-right: 4px; }
.com-cam .hoje-nome { font-size: var(--d-3); }

/* ===== utilidades geradas (11/10): uma classe por regra, no lugar dos estilos que eram escritos direto nas telas ===== */
.u-ai-baseline { align-items: baseline !important; }
.u-ai-center { align-items: center !important; }
.u-bc-rgba-38-191-191-35 { border-color: rgba(38,191,191,.35) !important; }
.u-bg-var-s2 { background: var(--s2) !important; }
.u-c-var-ciano { color: var(--ciano) !important; }
.u-c-var-txt { color: var(--txt) !important; }
.u-d-block { display: block !important; }
.u-d-flex { display: flex !important; }
.u-d-grid { display: grid !important; }
.u-f-1 { flex: 1 !important; }
.u-fd-column { flex-direction: column !important; }
.u-ff-var-display { font-family: var(--display) !important; }
.u-fs-11px { font-size: 11px !important; }
.u-fs-18px { font-size: 18px !important; }
.u-fs-22px { font-size: 22px !important; }
.u-fs-26px { font-size: 26px !important; }
.u-fs-28px { font-size: 28px !important; }
.u-fs-30px { font-size: 30px !important; }
.u-fw-wrap { flex-wrap: wrap !important; }
.u-fwt-600 { font-weight: 600 !important; }
.u-fwt-700 { font-weight: 700 !important; }
.u-fwt-800 { font-weight: 800 !important; }
.u-gap-10px { gap: 10px !important; }
.u-gap-12px { gap: 12px !important; }
.u-gap-14px { gap: 14px !important; }
.u-gap-6px { gap: 6px !important; }
.u-gap-8px { gap: 8px !important; }
.u-gtc-1fr-1fr { grid-template-columns: 1fr 1fr !important; }
.u-gtc-1fr-1fr-1fr { grid-template-columns: 1fr 1fr 1fr !important; }
.u-h-1px { height: 1px !important; }
.u-h-32px { height: 32px !important; }
.u-h-8px { height: 8px !important; }
.u-jc-space-between { justify-content: space-between !important; }
.u-lh-1 { line-height: 1 !important; }
.u-lh-1-05 { line-height: 1.05 !important; }
.u-m-0 { margin: 0 !important; }
.u-m-0-0-10px { margin: 0 0 10px !important; }
.u-m-0-0-14px { margin: 0 0 14px !important; }
.u-m-0-0-8px { margin: 0 0 8px !important; }
.u-m-10px-0 { margin: 10px 0 !important; }
.u-m-10px-0-0 { margin: 10px 0 0 !important; }
.u-m-12px-0 { margin: 12px 0 !important; }
.u-m-2px-0-8px { margin: 2px 0 8px !important; }
.u-m-4px-0 { margin: 4px 0 !important; }
.u-m-4px-0-10px { margin: -4px 0 10px !important; }
.u-m-6px-0-0 { margin: 6px 0 0 !important; }
.u-m-6px-0-8px { margin: 6px 0 8px !important; }
.u-m-8px-0 { margin: 8px 0 !important; }
.u-m-8px-0-0 { margin: 8px 0 0 !important; }
.u-m-8px-0-10px { margin: 8px 0 10px !important; }
.u-mb-10px { margin-bottom: 10px !important; }
.u-mb-12px { margin-bottom: 12px !important; }
.u-mb-14px { margin-bottom: 14px !important; }
.u-mb-6px { margin-bottom: 6px !important; }
.u-minh-110px { min-height: 110px !important; }
.u-minh-140px { min-height: 140px !important; }
.u-minh-70px { min-height: 70px !important; }
.u-minh-90px { min-height: 90px !important; }
.u-minw-0 { min-width: 0 !important; }
.u-ml-2px { margin-left: 2px !important; }
.u-mt-10px { margin-top: 10px !important; }
.u-mt-12px { margin-top: 12px !important; }
.u-mt-14px { margin-top: 14px !important; }
.u-mt-16px { margin-top: 16px !important; }
.u-mt-18px { margin-top: 18px !important; }
.u-mt-22px { margin-top: 22px !important; }
.u-mt-30px { margin-top: 30px !important; }
.u-mt-4px { margin-top: 4px !important; }
.u-mt-6px { margin-top: -6px !important; }
.u-mt-8px { margin-top: 8px !important; }
.u-mt-var-e-2 { margin-top: var(--e-2) !important; }
.u-mt-var-e-5 { margin-top: var(--e-5) !important; }
.u-p-12px-0-6px { padding: 12px 0 6px !important; }
.u-p-12px-14px-4px { padding: 12px 14px 4px !important; }
.u-p-14px { padding: 14px !important; }
.u-p-16px { padding: 16px !important; }
.u-p-20px { padding: 20px !important; }
.u-p-20px-0 { padding: 20px 0 !important; }
.u-p-20px-16px-0 { padding: 20px 16px 0 !important; }
.u-p-6px-14px { padding: 6px 14px !important; }
.u-pe-none { pointer-events: none !important; }
.u-pl-18px { padding-left: 18px !important; }
.u-ta-center { text-align: center !important; }
.u-ta-left { text-align: left !important; }
.u-w-100pc { width: 100% !important; }
.u-w-32px { width: 32px !important; }
.u-wb-break-word { word-break: break-word !important; }
.u-ws-normal { white-space: normal !important; }
.u-ws-pre-wrap { white-space: pre-wrap !important; }
[hidden][class*="u-d-"] { display: none !important; } /* escondido sempre ganha */
/* classes nomeadas da limpeza final (11/10) */
.u-f-1 { flex: 1 !important; } .u-px-4px { padding-inline: 4px !important; } .u-minh-96px { min-height: 96px !important; } .u-ta-left { text-align: left !important; }
.rotulo-ult { fill: var(--txt-2) !important; font-weight: 700; }
.card-botao { display: block !important; width: 100%; text-align: left; margin-top: 10px; }
.btn-linha { display: flex !important; gap: 12px; align-items: center; width: 100%; text-align: left; }
.nome-ex { font-weight: 700; color: var(--ciano); text-align: left; }
.tela.exec-tela { padding: 0 0 calc(140px + var(--seguro-baixo)) !important; }
[hidden].card-botao, [hidden].btn-linha { display: none !important; }

/* Administração (11/10/2026): barras de uso e números por treinador */
.adm-linha { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); font-size: var(--t-3); }
.adm-linha > span { color: var(--txt-2); }
.adm-barra { height: 6px; border-radius: var(--r-pilula); background: var(--s3); overflow: hidden; margin-top: var(--e-2); }
.adm-barra i { display: block; height: 100%; border-radius: inherit; }
.adm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--e-3); }
.adm-grade div { display: flex; flex-direction: column; }
.adm-grade b { font-family: var(--display); font-size: var(--d-1); line-height: 1; }
.adm-grade span { font-size: var(--t-1); color: var(--txt-3); }
.adm-treinador { margin-bottom: var(--e-3); }
.aviso-saida { margin: var(--e-3) var(--e-4) 0; }
.adm-avisos { list-style: none; padding: 0; margin: var(--e-2) 0 0; display: grid; gap: var(--e-2); font-size: var(--t-3); }
.adm-avisos li { display: flex; gap: var(--e-2); align-items: flex-start; }
.adm-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; }
.adm-botoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.adm-botoes .btn { flex: 1 1 140px; min-height: var(--toque); font-size: var(--t-2); }
.adm-mais summary { cursor: pointer; color: var(--ciano); font-size: var(--t-2); font-weight: 700; min-height: var(--toque); display: flex; align-items: center; }

/* Instalar o app (12/10/2026): passo a passo do iPhone desenhado a partir das telas reais (iOS com o botão ⋯) */
.instalar .grande { min-height: 56px; font-size: var(--t-4); }
.instalar-convite { display: flex; align-items: center; gap: var(--e-3); width: 100%; }
.ios-passos { list-style: none; padding: 0; margin: var(--e-4) 0 0; display: grid; gap: var(--e-4); }
.ios-passos > li { display: flex; gap: var(--e-3); align-items: flex-start; }
.ios-passos p { margin: 0 0 var(--e-2); }
.ios-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--lima); color: var(--lima-escuro); font-weight: 800; display: grid; place-items: center; font-size: var(--t-3); }
.ios-num svg { width: 18px; height: 18px; }
/* "tela de iPhone": cinza escuro do sistema, cantos grandes, letra do sistema */
.ios-tela { background: #1c1c1e; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; padding: 12px; color: #fff; font: 15px/1.25 -apple-system, system-ui, sans-serif; overflow: hidden; }
.ios-tela .apagada { opacity: .38; }
.ios-barra { display: flex; align-items: center; gap: 8px; }
.ios-bt { width: 40px; height: 40px; border-radius: 50%; background: #2c2c2e; display: grid; place-items: center; flex: none; }
.ios-url { flex: 1; min-width: 0; height: 40px; border-radius: 20px; background: #2c2c2e; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #d1d1d6; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 10px; }
.ios-menu { background: #2c2c2e; border-radius: 16px; padding: 4px 0; }
.ios-linha { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.ios-folha .ios-topo, .ios-final .ios-topo { display: flex; align-items: center; gap: 10px; }
.ios-topo b { display: block; font-size: 14px; }
.ios-topo span { font-size: 12px; color: #98989f; }
.ios-app { border-radius: 10px; flex: none; }
.ios-app.mini { width: 24px; height: 24px; border-radius: 6px; vertical-align: middle; }
.ios-redondos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 12px; text-align: center; font-size: 11px; }
.ios-redondos div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ios-redondos span { width: 46px; height: 46px; border-radius: 50%; background: #3a3a3c; display: grid; place-items: center; }
.ios-final-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 15px; }
.ios-azul { color: #0a84ff; }
/* destaque: onde tocar (lima = sua ação) */
.ios-alvo { position: relative; display: inline-flex; border-radius: 14px; outline: 2.5px solid var(--lima); outline-offset: 2px; animation: ios-pulso 1.6s ease-in-out infinite; }
.ios-menu .ios-alvo, .ios-redondos .ios-alvo { display: flex; }
.ios-final-topo .ios-alvo { padding: 2px 8px; }
@keyframes ios-pulso { 50% { outline-color: rgba(217,224,33,.35); } }
@media (prefers-reduced-motion: reduce) { .ios-alvo { animation: none; } }

/* Cartão "Instale o app" no topo do Início/Painel (12/10/2026) */
.cartao-instalar { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-3) var(--e-4) 0; border-color: rgba(217,224,33,.35); }
.cartao-instalar b { display: block; }
.cartao-instalar .desc { font-size: var(--t-2); }
.cartao-instalar-bts { display: flex; flex-direction: column; align-items: stretch; gap: 2px; flex: none; }
.cartao-instalar-bts .btn { min-height: 40px; padding: 0 16px; }
.btn-texto { background: none; border: 0; color: var(--txt-3); font: inherit; font-size: var(--t-1); min-height: 32px; cursor: pointer; }

/* ===== 13/10: questionário automático no convite, padrão do treino, reordenar, setas das categorias no computador ===== */
.rotulo-seg { display: block; font-size: 13px; font-weight: 600; color: var(--txt-2); margin-bottom: 6px; }
.dica-seg { margin: 6px 0 0; }
.padrao-caixa .plano-linha { margin-top: 8px; }
.titulo-sec.com-btn { align-items: center; }
.reord .anim { width: 40px; height: 40px; border-radius: 10px; }
.card.mexeu { animation: mexeu .9s ease-out; }
@keyframes mexeu { 0% { box-shadow: 0 0 0 2px var(--lima); } 100% { box-shadow: 0 0 0 2px transparent; } }
.arrasta { color: var(--txt-2); }
.reord { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.reord li { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 4px 4px 0; border-radius: 12px; background: var(--s2); border: 1px solid var(--linha); }
.reord li.arrastando { border-color: var(--lima); background: var(--s3); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.reord-alca { align-self: stretch; display: grid; place-items: center; width: 44px; color: var(--txt-2); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.reord li.arrastando .reord-alca { cursor: grabbing; }
.reord-n { width: 18px; text-align: center; font-weight: 700; color: var(--txt-3); font-size: 13px; }
.reord-nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reord .btn-ic:disabled { opacity: .3; }
@media (prefers-reduced-motion: reduce) { .card.mexeu { animation: none; } }
.chips-caixa { position: relative; }
.chips-caixa .chips { margin: 0; padding-left: 0; padding-right: 0; }
.chips-seta { position: absolute; top: 0; bottom: 4px; width: 44px; display: grid; place-items: center; color: var(--txt); z-index: 1; cursor: pointer; }
.chips-seta svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--s3); border: 1px solid var(--linha-2); box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.chips-seta:hover svg { background: var(--s2); border-color: var(--ciano); }
.chips-seta.esq { left: -2px; background: linear-gradient(90deg, var(--s1) 55%, transparent); }
.chips-seta.dir { right: -2px; background: linear-gradient(270deg, var(--s1) 55%, transparent); }
.tela .chips-seta.esq { background: linear-gradient(90deg, var(--bg) 55%, transparent); }
.tela .chips-seta.dir { background: linear-gradient(270deg, var(--bg) 55%, transparent); }
.chips-seta[hidden] { display: none; }

/* ===== 13/10: importar treino da IA ===== */
.imp-texto { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.4; min-height: 180px; }
.imp-resumo { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--txt-2); }
.imp-resumo b { color: var(--txt); font-size: 18px; }
.imp-resumo .alerta, .imp-resumo .alerta b { color: var(--rosa-texto); }
.pilha-imp { display: grid; gap: 8px; }
.imp-linha { padding: 12px 14px; border-radius: 14px; background: var(--s1); border: 1px solid var(--linha); border-left: 4px solid var(--linha-2); }
.imp-linha.ok { border-left-color: var(--oliva); }
.imp-linha.par { border-left-color: var(--lima); }
.imp-linha.novo { border-left-color: var(--ciano); }
.imp-linha.falta, .imp-linha.erro-l { border-left-color: var(--rosa); }
.imp-linha.ign { opacity: .6; }
.imp-nome { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.imp-linha.ok .imp-nome svg { color: var(--oliva); }
.imp-linha.erro-l .imp-nome svg { color: var(--rosa); }
.imp-novo { margin-top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-video { margin-top: 12px; }

/* ===== Avaliações físicas (14/10/2026) ===== */
.ficha-abas { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ficha-abas::-webkit-scrollbar { display: none; }
.ficha-abas button { flex: 1 0 auto; white-space: nowrap; }
.selo.roxo { background: rgba(103,37,249,.2); color: var(--roxo-texto); }
.av-num { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--txt); line-height: 1; }
.av-num small { font-size: 13px; color: var(--txt-2); margin-left: 2px; font-family: var(--corpo); font-weight: 600; }
.av-refs { padding-left: 20px; margin: 0; }
.av-laudo-img { width: 100%; border-radius: 12px; display: block; max-height: 70vh; object-fit: contain; background: #fff; }
.av-chips { flex-wrap: wrap; margin: 8px 0; padding: 0; overflow: visible; }

/* ----- Avaliações · usados pela lista e pelo lançamento ----- */
.c-ok { color: var(--oliva) !important; } .c-ciano { color: var(--ciano) !important; }
.c-atencao { color: #F2A0C4 !important; } .c-alto { color: var(--rosa-texto) !important; }
.av-topo { display: flex; align-items: flex-start; gap: var(--e-3); justify-content: space-between; margin: var(--e-1) 0 var(--e-4); }
.av-topo h1 { font-family: var(--display); font-weight: 800; font-size: var(--d-3); line-height: 1; margin: var(--e-1) 0 0; letter-spacing: -.01em; }
.av-voz { margin-top: var(--e-2); color: var(--roxo-texto); font-size: var(--t-2); font-weight: 700; }
.av-aviso { display: flex; gap: var(--e-2); align-items: flex-start; margin: 0 0 var(--e-3); color: var(--rosa-texto); font-size: var(--t-2); }
.av-aviso svg.i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.av-add { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--toque); margin-top: var(--e-2); color: var(--ciano); font-weight: 600; font-size: var(--t-3); cursor: pointer; }
.av-laudo-img { width: 100%; border-radius: 12px; display: block; max-height: 70vh; object-fit: contain; background: #fff; }
/* ----- Avaliações · resultado (versão 1, cartões; escolhida em 14/10) ----- */
.av-principal .av-grande { font-family: var(--display); font-size: var(--d-4); font-weight: 800; line-height: 1; margin: 8px 0 6px; display: flex; align-items: center; gap: 10px; }
.av-principal .av-grande small { font-size: 24px; color: var(--txt-2); margin-left: -6px; }
.av-regua { width: 100%; height: auto; display: block; margin-top: 10px; overflow: visible; }
.av-regua text { font-size: 10px; fill: var(--txt-3); font-family: var(--corpo); }
.f-baixo { fill: rgba(38,191,191,.55); background: rgba(38,191,191,.55); }
.f-saudavel { fill: var(--oliva); background: var(--oliva); }
.f-elevado { fill: rgba(231,26,124,.45); background: rgba(231,26,124,.45); }
.f-muito { fill: var(--rosa); background: var(--rosa); }
.f-provavel { fill: rgba(240,240,232,.16); stroke: rgba(240,240,232,.5); stroke-dasharray: 3 2; }
.f-marca { stroke: var(--txt); stroke-width: 2; }
.f-ponto { fill: var(--txt); stroke: var(--bg); stroke-width: 2; }
.av-legenda { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--txt-2); margin: 6px 0 8px; }
.av-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.av-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.av-legenda i.ant { background: rgba(240,240,232,.22); } .av-legenda i.at { background: var(--ciano); }
.av-rosca { display: flex; align-items: center; gap: 14px; }
.av-rosca svg { flex: none; }
.av-rosca circle { fill: none; stroke-width: 14; }
.av-rosca .r-magra { stroke: var(--ciano); } .av-rosca .r-gorda { stroke: var(--txt-2); stroke-linecap: butt; }
.av-rosca .r-num { font-family: var(--display); font-size: 22px; font-weight: 800; fill: var(--txt); }
.av-rosca .r-uni { font-size: 11px; fill: var(--txt-3); }
.av-massa { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.av-massa + .av-massa { margin-top: 8px; }
.av-massa i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.av-massa i.r-magra { background: var(--ciano); } .av-massa i.r-gorda { background: var(--txt-2); }
.av-massa span { color: var(--txt-2); flex: 1; } .av-massa b { font-size: 16px; }
.av-frase { font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1.1; margin: 10px 0 8px; color: var(--lima); }
.av-desde { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.av-desde div { background: var(--s2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.av-desde span { font-size: 12px; color: var(--txt-2); }
.av-desde b { font-size: 18px; }
.av-desde em, .av-barra em, .av-tabela em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--txt-3); }
em.bom { color: var(--oliva); } em.ruim { color: var(--rosa-texto); }
.av-barras { margin-top: 10px; display: grid; gap: 8px; }
.av-barra { display: grid; grid-template-columns: 92px 1fr 40px 40px; gap: 8px; align-items: center; font-size: 13px; }
.av-barra .n { color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-barra .b { position: relative; height: 16px; }
.av-barra .b i { position: absolute; left: 0; border-radius: 4px; }
.av-barra .b i.ant { top: 0; height: 16px; background: rgba(240,240,232,.14); }
.av-barra .b i.at { top: 4px; height: 8px; background: var(--ciano); }
.av-barra b { text-align: right; }
.av-tabela { display: grid; margin-top: 8px; }
.av-tabela div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linha); font-size: 14px; }
.av-tabela div:first-child { border-top: 0; }
.av-tabela span { color: var(--txt-2); }
.av-tabela small { color: var(--txt-3); font-weight: 600; }
.av-ind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.av-ind-i { background: var(--s1); border: 1px solid var(--linha); border-radius: 14px; padding: 12px; display: grid; gap: 3px; }
.av-ind-i .l { font-size: 12px; color: var(--txt-2); }
.av-ind-i b { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; }
.av-ind-i .st { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.av-ind-i .st i { width: 8px; height: 8px; border-radius: 50%; background: var(--txt-3); }
.av-ind-i .r { font-size: 11px; color: var(--txt-3); }
.av-ind-i.ok .st { color: var(--oliva); } .av-ind-i.ok .st i { background: var(--oliva); }
.av-ind-i.atencao .st { color: #F2A0C4; } .av-ind-i.atencao .st i { background: rgba(231,26,124,.55); }
.av-ind-i.alto .st { color: var(--rosa-texto); } .av-ind-i.alto .st i { background: var(--rosa); }
.av-ind-i.ciano .st { color: var(--ciano); } .av-ind-i.ciano .st i { background: var(--ciano); }
.selo.atencao { background: rgba(231,26,124,.12); color: #F2A0C4; }
.selo.alto { background: rgba(231,26,124,.2); color: var(--rosa-texto); }
.selo.ciano { background: rgba(38,191,191,.14); color: var(--ciano); }
.av-laudos { display: grid; gap: 8px; margin-top: 8px; }
.av-laudo { display: flex; align-items: center; gap: 10px; }
.av-calculo .desc b { color: var(--txt); }

/* ----- Avaliações · lançamento (Direção A, 14/10): sem caixas, dados numa faixa, modo guiado, barra fixa ----- */
.tela.av-lanc { padding-bottom: 0; }
.av-dados { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3) var(--e-3); }
.av-campo { display: grid; gap: 6px; align-content: start; font-size: var(--t-2); font-weight: 600; color: var(--txt-2); }
.av-campo small { font-weight: 500; color: var(--txt-3); }
.av-fixo { min-height: 48px; display: flex; align-items: center; font-family: var(--display); font-size: var(--d-1); font-weight: 800; color: var(--txt); }
.av-sexo { margin-top: var(--e-4); display: grid; gap: 6px; font-size: var(--t-2); font-weight: 600; color: var(--txt-2); }
.av-sub { margin: var(--e-2) 0 0; font-size: var(--t-2); color: var(--txt-3); line-height: 1.45; }
.av-modo button { padding: 6px 10px; }
.av-lanc .ini-cab { align-items: center; }
.av-obs { margin-top: var(--e-6); }
.av-guia { margin-top: var(--e-4); border-top: 1px solid var(--linha); color: var(--txt-2); font-size: var(--t-2); line-height: 1.5; }
.av-guia summary { display: flex; gap: var(--e-2); align-items: center; min-height: var(--toque); cursor: pointer; color: var(--ciano); font-weight: 600; font-size: var(--t-3); }
.av-guia summary small { color: var(--txt-3); font-weight: 500; font-size: var(--t-1); }
.av-guia ul, .av-guia ol { padding-left: 18px; margin: 0 0 var(--e-3); } .av-guia li + li { margin-top: var(--e-2); }
.av-guia b { color: var(--txt); }
.av-form > .av-guia:first-child { margin-top: 0; border-top: 0; margin-bottom: var(--e-3); }
.av-per { margin-top: var(--e-6); }
.av-dica { margin: var(--e-3) 0 0; font-size: var(--t-2); color: var(--txt-2); line-height: 1.45; min-height: 38px; }
.av-dica b { color: var(--txt); }
/* desenho do corpo com os pontos */
.av-corpo { display: flex; justify-content: center; gap: var(--e-5); margin: var(--e-4) 0 var(--e-2); }
.av-corpo figure { margin: 0; text-align: center; }
.av-corpo svg { width: 96px; height: auto; display: block; }
.av-corpo path { fill: var(--s3); }
.av-corpo .av-marca circle { fill: var(--txt-3); stroke: var(--bg); stroke-width: .5; transition: r .15s; }
.av-corpo .av-marca text { font-size: 2.6px; font-weight: 800; fill: var(--bg); font-family: var(--corpo); pointer-events: none; }
.av-corpo .av-marca.ok circle { fill: var(--ciano); }
.av-corpo .av-marca.on circle { fill: var(--lima); r: 2.6; }
.av-corpo figcaption { font-size: 11px; color: var(--txt-3); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; }
.av-corpo.uma { margin: 0; flex: none; } .av-corpo.uma svg { width: 84px; }
/* modo lista */
.av-lista-dobras { border-top: 1px solid var(--linha); padding-top: var(--e-3); }
.av-dobras-cab, .av-dobra { display: grid; grid-template-columns: minmax(0, 1.75fr) repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; }
.av-dobras-cab { font-size: 11px; font-weight: 700; color: var(--txt-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; text-align: center; }
.av-dobra + .av-dobra { margin-top: 6px; }
.av-dobra input.campo { padding: 10px 4px; text-align: center; min-height: 44px; border-radius: 12px; }
.av-dobra-nome { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; }
.av-dobra-nome i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--s3); color: var(--txt-2); font-size: 11px; font-weight: 800; display: grid; place-items: center; flex: none; }
.av-dobra:focus-within .av-dobra-nome i { background: var(--lima); color: var(--bg); }
.av-dobra-aviso { grid-column: 1 / -1; margin: 4px 0 0; font-size: var(--t-1); color: var(--rosa-texto); }
/* modo guiado: um ponto por vez */
.av-guiado { margin-top: var(--e-4); scroll-margin-top: 16px; }
.av-passos { display: flex; gap: 6px; margin-bottom: var(--e-4); }
.av-passo { flex: 1; height: 34px; border-radius: 10px; background: var(--s1); border: 1px solid var(--linha); color: var(--txt-3); font-weight: 800; font-size: var(--t-2); position: relative; }
.av-passo::after { content: ''; position: absolute; inset: -5px 0; }
.av-passo.ok { background: rgba(38,191,191,.14); color: var(--ciano); border-color: transparent; }
.av-passo.on { background: var(--lima); color: var(--bg); border-color: transparent; }
.av-g-topo { display: flex; gap: var(--e-4); align-items: flex-start; }
.av-g-num { font-size: var(--t-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.av-g-nome { font-family: var(--display); font-weight: 800; font-size: var(--d-3); line-height: .95; margin: var(--e-1) 0 var(--e-2); }
.av-g-como { margin: 0; font-size: var(--t-2); color: var(--txt-2); line-height: 1.45; }
.av-g-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin-top: var(--e-4); }
.av-g-campos label { display: grid; gap: 4px; font-size: var(--t-1); color: var(--txt-3); font-weight: 700; text-align: center; }
.av-g-campos label small { font-weight: 500; }
.av-g-campos input.campo { min-height: 64px; text-align: center; font-family: var(--display); font-size: 30px; font-weight: 800; padding: 6px; }
.av-guiado .av-dobra-aviso { margin-top: var(--e-2); }
.av-g-media { margin: var(--e-2) 0 0; font-size: var(--t-2); color: var(--txt-2); }
.av-g-media b { color: var(--ciano); }
.av-g-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--e-2); margin-top: var(--e-4); }
.av-g-nav .btn:disabled { opacity: .45; }
/* barra fixa: prévia + salvar (o menu fica escondido nesta tela) */
.av-barra-fixa { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; gap: var(--e-3); margin: var(--e-5) -16px 0; padding: var(--e-3) 16px calc(var(--e-3) + var(--seguro-baixo)); background: rgba(0,20,28,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linha); }
.av-barra-fixa .av-previa { flex: 1; min-width: 0; display: grid; gap: 2px; color: var(--txt-2); font-size: var(--t-2); }
.av-barra-fixa .av-num { font-size: 30px; }
.av-barra-fixa .btn { width: auto; flex: none; padding: 0 22px; }
.av-form .erro { margin-top: var(--e-4); }
.av-links { display: inline-flex; gap: var(--e-4); } .titulo-sec a svg.i { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- Dieta: área CLARA (decisão do Gustavo, 14/10: o "negativo" do treino; protótipo em prototipo-dieta/dieta.css) ----------
   Os mesmos componentes, com outras cores. Contraste medido: todos os textos ≥ 4,5:1 sobre #F0F0E8 e #FAFAF5. O menu continua escuro. */
.claro {
  --bg: #F0F0E8; --bg-2: #E6E6DB; --s1: #FAFAF5; --s2: #EDEDE3; --s3: #DCDCCF;
  --linha: rgba(1, 31, 44, .09); --linha-2: rgba(1, 31, 44, .17);
  --txt: #011F2C; --txt-2: #3B5865; --txt-3: #4F6A76;
  --rosa-texto: #C0105E; --roxo-texto: #5420D9; --oliva: #4B7612;
  --cor-p-t: #087070; --cor-c-t: #5C6200; --cor-g-t: #A34E14;
  --cor-p: #0B8A8A; --cor-c: #97A000; --cor-g: #D46E22; /* barras e gráfico (não são texto) */
  color-scheme: light; background: var(--bg); color: var(--txt);
}
.tela.claro { min-height: 100dvh; }
.claro .btn.prim { background: #011F2C; color: #D9E021; box-shadow: none; }
.claro .chip.on { background: #011F2C; color: #F0F0E8; }
.claro .seg button.on { background: #fff; color: var(--txt); box-shadow: 0 1px 3px rgba(1, 31, 44, .12); }
.claro .lima { color: #5C6200; }
.claro .selo.ok { background: rgba(75, 118, 18, .14); color: #3E6310; }
.claro .erro { background: rgba(192, 16, 94, .08); border-color: rgba(192, 16, 94, .3); }
.cor-p { color: var(--cor-p-t, #26BFBF); } .cor-c { color: var(--cor-c-t, #D9E021); } .cor-g { color: var(--cor-g-t, #F2A65A); }
/* lista e ficha de alimentos (D2) */
.alim .mid .t, .alim .mid .s { white-space: normal; }
.alim .selo { align-self: flex-start; }
.credito-al { margin-top: 14px; text-align: center; }
.ver-por { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; margin-top: 12px; }
.mini-n { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 6px; }
.mini-n div { background: var(--s2); border-radius: 12px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.mini-n b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mini-n span { font-size: 11px; color: var(--txt-2); font-weight: 600; }
.tab-nutri { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.tab-nutri th { text-align: left; font-weight: 500; color: var(--txt-2); padding: 7px 0; border-bottom: 1px solid var(--linha); }
.tab-nutri td { text-align: right; font-weight: 700; padding: 7px 0; border-bottom: 1px solid var(--linha); white-space: nowrap; font-variant-numeric: tabular-nums; }
.folha h4 { font-size: 15px; font-weight: 800; margin: 14px 0 8px; }
.nova-med { margin-top: 10px; display: grid; gap: 10px; }
.form-rotulo { display: grid; gap: 12px; }
.grade-rotulo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aviso-rotulo { margin: 0; background: rgba(133, 92, 0, .1); color: #6B4A00; border-radius: 12px; padding: 10px 12px; }
.folha.claro { background: var(--s1); }

/* ---------- Dieta D3 (15/10): planos e editor do plano (protótipo aprovado em prototipo-dieta/; editor como era antes da passada de UX/UI).
   Prefixo d- para não colidir com o treino. Sempre dentro de .claro. ---------- */
.d-area { border-radius: var(--raio); padding: 16px; }
.d-h { font-family: var(--display); font-size: 24px; font-weight: 800; margin: 0; line-height: 1; }
.d-h3 { font-family: var(--display); font-size: 20px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; line-height: 1.05; }
.d-entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.d-grade2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.d-grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.d-form { display: grid; gap: 12px; }
.d-link { color: var(--cor-p-t, #087070); font-size: 13px; font-weight: 700; text-align: left; padding: 6px 0; }
.d-planos { display: grid; gap: 10px; }
.d-plano { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 14px; align-items: center; padding: 14px 16px; text-align: left; width: 100%; }
.d-plano .t { font-weight: 700; font-size: 16px; }
.d-kcal-lista { font-weight: 800; white-space: nowrap; }
.d-mini-dias { display: flex; gap: 3px; }
.d-mini-dias span { width: 24px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--s2); color: var(--txt-3); }
.d-mini-dias span.on { background: #011F2C; color: #D9E021; }
@media (max-width: 640px) { .d-plano { grid-template-columns: minmax(0, 1fr) auto; } .d-plano .d-mini-dias { grid-column: 1; } }
/* editor */
.d-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.d-topo .voltar { margin: 0; }
.d-titulo { font-family: var(--display); font-size: 28px; font-weight: 800; margin: 0 auto 0 0; line-height: 1; }
.d-status svg.i { width: 12px; height: 12px; }
.d-erro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.d-ed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.d-col, .d-lado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.d-tipo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.d-dias { display: flex; flex-wrap: wrap; gap: 6px; }
.d-dia { min-width: 44px; min-height: 36px; padding: 7px 8px; border-radius: 99px; font-size: 13px; font-weight: 700; text-align: center; background: var(--s2); color: var(--txt-3); border: 1.5px solid transparent; }
.d-dia.on { background: #011F2C; color: #D9E021; }
.d-dia.outro { background: transparent; border-color: rgba(8, 112, 112, .6); color: var(--cor-p-t); }
.d-dias-g .d-dia { min-width: 52px; min-height: 44px; }
.d-legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--txt-3); margin-top: 10px; }
.d-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; background: var(--s3); }
.d-legenda i.este { background: #011F2C; } .d-legenda i.outro { background: transparent; border: 1.5px solid var(--cor-p-t); }
.d-livre { min-height: 320px; font-size: 15px; line-height: 1.5; }
.d-ref { padding: 0; overflow: hidden; }
.d-ref-cab { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.d-hora { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--cor-p-t); }
.d-nome { font-weight: 800; font-size: 16px; }
.d-acoes { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.d-ic { width: 36px; height: 36px; background: transparent; border: 0; color: var(--txt-2); }
.d-ic:hover { background: var(--s2); color: var(--txt); }
.d-ic svg.i { width: 18px; height: 18px; }
.d-tab-rola { overflow-x: auto; position: relative; }
.d-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.d-tab th { text-align: right; font-size: 11px; font-weight: 700; color: var(--txt-3); padding: 8px 10px; letter-spacing: .03em; text-transform: uppercase; }
.d-tab th:first-child, .d-tab td:first-child { text-align: left; padding-left: 16px; }
.d-tab td { text-align: right; padding: 9px 10px; border-top: 1px solid var(--linha); vertical-align: top; }
.d-tab td.al { width: 46%; }
.d-tab td:last-child, .d-tab th:last-child { padding-right: 8px; width: 44px; }
.d-tab .al .t { font-weight: 600; }
.d-tab .s, .d-tab .al .s { font-size: 12px; color: var(--txt-3); margin-top: 2px; }
.d-subs { font-size: 12px; color: var(--txt-2); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.d-subs .selo { white-space: normal; text-align: left; }
.d-total td { font-weight: 800; color: var(--txt); background: rgba(1, 31, 44, .035); }
.d-tab .p { color: var(--cor-p-t); } .d-tab .c { color: var(--cor-c-t); } .d-tab .g { color: var(--cor-g-t); }
.d-ref-pe { padding: 10px 16px 14px; display: grid; gap: 10px; border-top: 1px solid var(--linha); }
.d-ref-pe .linha-flex { flex-wrap: wrap; }
.d-obs { font-size: 13px; color: var(--roxo-texto); background: rgba(103, 37, 249, .08); border-radius: 10px; padding: 8px 10px; }
.d-subst { border: 1px dashed var(--linha-2); border-radius: 12px; padding: 10px 12px; }
.d-subst .t { font-weight: 700; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.d-subst .d-tab-rola { margin: 8px -12px 0; }
.d-alerta { color: var(--rosa-texto); }
.d-alerta svg.i { width: 14px; height: 14px; vertical-align: -2px; }
.claro .selo.ciano { background: rgba(8, 112, 112, .1); color: #075F5F; }
.claro .selo.aviso { background: rgba(92, 98, 0, .12); color: #4A4F00; }
.claro .selo.alerta { background: rgba(192, 16, 94, .1); color: var(--rosa-texto); }
/* resumo, avisos, ficha alimentar */
.d-resumo { display: flex; align-items: center; gap: 16px; }
.d-donut { width: 104px; height: 104px; flex: none; }
.d-kcal { font-family: var(--display); font-weight: 800; font-size: 38px; line-height: .9; }
.d-macros { display: grid; gap: 8px; margin-top: 14px; }
.d-macro { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.d-macro .sig { font-weight: 800; font-size: 12px; }
.d-barra { height: 6px; border-radius: 6px; background: var(--s3); overflow: hidden; margin-top: 4px; }
.d-barra i { display: block; height: 100%; border-radius: 6px; }
.d-meta { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 99px; white-space: nowrap; }
.d-meta.ok { background: rgba(8, 112, 112, .1); color: #075F5F; }
.d-meta.longe { background: rgba(192, 16, 94, .1); color: var(--rosa-texto); }
.d-ficha dl { margin: 0; display: grid; gap: 9px; }
.d-ficha dt { font-size: 11px; color: var(--txt-3); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.d-ficha dd { margin: 1px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
.d-ficha dd.alergia { color: var(--rosa-texto); font-weight: 700; }
.d-ficha p.alergia { color: var(--rosa-texto); font-weight: 700; } /* DM18: sem anamnese, os avisos de alergia ficam desligados */
.d-aviso { border-color: rgba(192, 16, 94, .3); background: linear-gradient(180deg, rgba(192, 16, 94, .06), var(--s1)); }
.d-aviso .t { color: var(--rosa-texto); font-weight: 800; display: flex; gap: 8px; align-items: center; }
.d-aviso ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--txt-2); }
.d-aviso li + li { margin-top: 4px; }
.d-cfg { display: grid; gap: 10px; font-size: 13.5px; }
.d-cfg label { color: var(--txt); font-weight: 500; font-size: 13.5px; display: flex; }
.d-chave { width: 22px; height: 22px; accent-color: #011F2C; }
.d-hora-nome { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
/* janela de alimento */
.folha.larga { max-width: 980px; }
.d-jan-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.d-jan-cab h3 { margin-right: auto; }
.d-jan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 10px; }
.d-result { max-height: 46dvh; overflow: auto; }
.d-result .item.marcado { background: rgba(8, 112, 112, .1); }
.d-sel-card { background: var(--s2); box-shadow: none; }
.d-sel-card .t { font-weight: 800; }
.d-sub-card { box-shadow: none; border-style: dashed; }
.d-vazio { text-align: center; padding: 32px 16px; color: var(--txt-3); background: var(--s2); box-shadow: none; }
.d-x { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: -6px; color: var(--txt-3); }
.d-x svg.i { width: 14px; height: 14px; }
.d-jan-pe { position: sticky; bottom: -24px; background: var(--s1); padding: 12px 0 4px; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.d-jan-pe .btn { width: auto; flex: 1 1 140px; margin: 0; }
.d-sel-card .d-grade2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (min-width: 1000px) {
  .tela.tela-larga { max-width: 1240px; }
  .d-ed { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
  .d-lado { position: sticky; top: 24px; }
  .d-tipo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .d-jan { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .folha.larga .d-result { max-height: 58dvh; }
}
/* gasto energético (D4) */
.d-grade-ge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .d-grade-ge { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.d-area .lista .item .mid .t, .d-area .lista .item .mid .s { white-space: normal; }
.d-formula.marcado .dir { color: var(--txt); }
.d-grade-at { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: end; }
.d-area .seg button { padding-left: 4px; padding-right: 4px; }
.d-formula.marcado { background: rgba(8, 112, 112, .1); box-shadow: inset 3px 0 0 #087070; }
.d-res-ge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.d-res-ge > div { background: var(--s2); border-radius: 12px; padding: 10px; display: grid; gap: 2px; text-align: center; }
.d-res-ge b { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; }
.d-res-ge .meta-final { background: #011F2C; color: #F0F0E8; }
.d-res-ge .meta-final .desc { color: #D9E021; }
.d-refs summary { cursor: pointer; font-weight: 700; }
.d-refs ol { margin: 10px 0 0; padding-left: 18px; font-size: 12px; color: var(--txt-2); display: grid; gap: 6px; }
/* equivalentes e ordenar por nutriente (D5) */
.d-eq { box-shadow: none; background: var(--s1); }
.d-eq .seg { flex-wrap: wrap; }
.d-eq-grupo { color: var(--txt-2); font-size: 13px; font-weight: 600; gap: 6px; }
.d-eq .item .mid .t, .d-eq .item .mid .s { white-space: normal; }
.d-ordem { color: var(--txt-2); font-weight: 600; }
.d-ordem select { min-width: 0; flex: 1; }
/* ---------- Dieta D6 (15/10): lado do aluno (passada de UX/UI aprovada em 14/10) e lista de compras ---------- */
.card.claro { background: var(--s1); border-color: transparent; }
.d-carrossel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
.d-carrossel::-webkit-scrollbar { display: none; }
.d-ref-hoje { flex: 0 0 82%; max-width: 320px; scroll-snap-align: start; display: flex; flex-direction: column; }
.d-ref-hoje .hora { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--cor-p-t); line-height: 1; }
.d-ref-hoje .nome { font-weight: 800; margin-top: 2px; }
.d-ref-hoje ul { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--txt-2); display: grid; gap: 4px; }
.d-ref-hoje li::before { content: '•'; color: #5C6200; margin-right: 6px; }
.d-ref-hoje li b { color: var(--txt); }
.d-ref-hoje.agora { box-shadow: 0 0 0 2px var(--lima); }
.d-agora { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #011F2C; color: #D9E021; padding: 3px 8px; border-radius: 99px; }
.d-hoje-livre b { display: block; }
.d-cel-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 2px 0 14px; }
.d-cel-topo h1 { font-family: var(--display); font-size: 36px; margin: 0; line-height: 1; }
.d-topo-acoes { display: flex; gap: 6px; }
.d-btn-rot { display: grid; justify-items: center; gap: 2px; min-width: 60px; min-height: 52px; padding: 6px 8px; border-radius: 14px; background: var(--s1); border: 1px solid var(--linha); font-size: 11px; font-weight: 700; color: var(--txt-2); }
.d-btn-rot svg.i { width: 20px; height: 20px; color: var(--txt); }
.d-dias-cel { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.d-dias-cel button { display: grid; justify-items: center; min-height: 52px; padding: 6px 0; border-radius: 12px; background: var(--s1); border: 1px solid var(--linha); font-size: 11px; font-weight: 700; color: var(--txt-3); position: relative; }
.d-dias-cel button b { font-family: var(--display); font-size: 20px; line-height: 1; color: var(--txt); }
.d-dias-cel button.on { background: #011F2C; border-color: transparent; color: #D9E021; }
.d-dias-cel button.on b { color: #F0F0E8; }
.d-dias-cel button.hoje::after { content: ''; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--cor-p-t); }
.d-dias-cel button.hoje.on::after { background: #D9E021; }
.d-plano-nome { margin: 2px 0 10px; }
.d-linha-tempo { display: grid; gap: 8px; }
.d-ref-al { background: var(--s1); border: 1px solid var(--linha); border-radius: 18px; overflow: hidden; }
.d-ref-al.agora { border-color: #011F2C; box-shadow: 0 0 0 1px #011F2C; }
.d-ref-al .cab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; text-align: left; }
.d-ref-al .hora { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--cor-p-t); min-width: 60px; }
.d-ref-al .tit { flex: 1; display: grid; min-width: 0; }
.d-ref-al .tit b { font-size: 16px; }
.d-ref-al .chev { color: var(--txt-3); }
.d-ref-al .corpo { padding: 0 14px 14px; display: grid; gap: 10px; }
.d-opcoes { margin-top: 2px; }
.d-itens-al { list-style: none; margin: 0; padding: 0; }
.d-itens-al li { padding: 10px 0; border-top: 1px solid var(--linha); font-size: 16px; line-height: 1.4; }
.d-itens-al li:first-child { border-top: 0; }
.d-itens-al .gr, .d-ref-hoje .gr { color: var(--txt-3); font-size: 13px; white-space: nowrap; }
.d-itens-al .ou { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 13.5px; color: var(--txt-2); }
.d-itens-al .ou svg.i { width: 15px; height: 15px; color: var(--cor-p-t); margin-top: 2px; flex: none; }
.d-itens-al .ou b { font-weight: 700; color: var(--txt); }
.d-obs-al { font-size: 14px; color: var(--txt); border-left: 3px solid #6725F9; padding: 4px 0 4px 12px; }
.d-obs-al .rot { display: block; color: var(--roxo-texto); margin-bottom: 2px; }
.d-vazio-al { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 32px 16px; color: var(--txt-2); }
.d-vazio-al svg.i { width: 32px; height: 32px; color: var(--txt-3); }
.d-livre-al { white-space: normal; font-size: 15px; line-height: 1.55; }
.d-progresso-compras .d-barra { height: 8px; margin-top: 10px; }
.d-progresso-compras svg.i { width: 13px; height: 13px; vertical-align: -2px; }
.d-compras-grupo { padding: 10px 14px 12px; }
.d-compras-grupo + .d-compras-grupo { border-top: 1px solid var(--linha); }
.d-compras-grupo h4 { margin: 0 0 6px; font-size: 11px; color: var(--txt-3); text-transform: uppercase; letter-spacing: .05em; }
.d-compra { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; width: 100%; text-align: left; min-height: 48px; }
.d-compra .q { margin-left: auto; color: var(--txt-2); font-variant-numeric: tabular-nums; text-align: right; }
.d-compra .caixa { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--linha-2); display: grid; place-items: center; flex: none; }
.d-compra .caixa svg.i { width: 15px; height: 15px; stroke-width: 3; }
.d-compra.feito .caixa { background: #011F2C; border-color: #011F2C; color: #D9E021; }
.d-compra.feito .n { text-decoration: line-through; color: var(--txt-3); }
.d-compra-ed { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.d-compra-ed .selo { grid-column: 1 / -1; justify-self: start; }
.d-grupo-nome { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; min-height: 36px; padding: 6px 10px; max-width: 260px; }
.d-previa-aluno { margin-top: 10px; max-width: 460px; }
.d-mt6 { margin-top: 6px; }
.d-compra .q { white-space: nowrap; }

/* ---------- Dieta D7 (15/10): diário e adesão (protótipo aprovado em prototipo-dieta/). Sempre dentro de .claro. ---------- */
.d-sit { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.d-sit svg.i { width: 14px; height: 14px; }
.d-sit.plano { color: var(--oliva); } .d-sit.substituicao { color: var(--cor-p-t); } .d-sit.diferente { color: var(--roxo-texto); } .d-sit.nao { color: var(--rosa-texto); } .d-sit.extra { color: var(--cor-g-t); }
.d-cel-sit { height: 30px; min-width: 30px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--s2); color: var(--txt-3); flex: none; }
.d-cel-sit svg.i { width: 15px; height: 15px; }
.d-cel-sit.plano { background: rgba(140, 187, 47, .2); color: var(--oliva); }
.d-cel-sit.substituicao { background: rgba(38, 191, 191, .18); color: var(--cor-p-t); }
.d-cel-sit.diferente { background: rgba(169, 139, 255, .18); color: var(--roxo-texto); }
.d-cel-sit.nao { background: rgba(231, 26, 124, .16); color: var(--rosa-texto); }
.d-cel-sit.extra { background: rgba(212, 110, 34, .16); color: var(--cor-g-t); }
.d-cel-sit.vazio { background: transparent; border: 1px dashed var(--linha-2); }
.d-ref-hoje .d-reg-btn { margin-top: auto; padding-top: 12px; }
.d-ref-hoje .d-reg-btn .btn { width: 100%; }
.d-ref-hoje .d-reg-feito { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; width: 100%; text-align: left; }
.d-ref-hoje .d-reg-feito .desc { font-size: 12px; }
.d-ref-al.feita .hora { color: var(--txt-3); }
.d-ref-al .d-reg-btn .btn { width: 100%; min-height: 48px; }
.d-atalho-semana { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; margin-bottom: 12px; min-height: 60px; }
.d-atalho-semana .pct { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--cor-c-t); min-width: 58px; }
.d-atalho-semana .mid { flex: 1; display: grid; min-width: 0; }
.d-atalho-semana > svg.i { color: var(--txt-3); }
.d-semana .pct { font-family: var(--display); font-weight: 800; font-size: 46px; line-height: .9; color: var(--cor-c-t); margin-top: 2px; }
.d-semana .num-lado { max-width: 170px; text-align: right; }
.d-semana .frase { margin-top: 12px; font-weight: 700; }
.d-semana .privado { font-size: 12px; color: var(--txt-3); display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; }
.d-semana .privado svg.i { width: 14px; height: 14px; margin-top: 2px; flex: none; }
.d-dias-adesao { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.d-dias-adesao > div { display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--txt-3); }
.d-dias-adesao .barra { width: 100%; height: 44px; border-radius: 10px; background: var(--s2); display: flex; align-items: flex-end; overflow: hidden; }
.d-dias-adesao .barra i { display: block; width: 100%; background: #011F2C; border-radius: 10px 10px 0 0; }
.d-dias-adesao .sem .barra { background: transparent; border: 1.5px dashed var(--linha-2); }
.d-dias-adesao .hoje b { color: var(--cor-p-t); }
.d-dia-diario { margin-top: 18px; }
.d-dia-diario h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--txt-2); }
.d-reg { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; width: 100%; text-align: left; min-height: 56px; }
.d-reg + .d-reg { border-top: 1px solid var(--linha); }
.d-reg .mid { flex: 1; min-width: 0; display: grid; gap: 3px; }
.d-reg .t { font-weight: 700; }
.d-reg .t .hora { font-variant-numeric: tabular-nums; color: var(--txt-2); margin-right: 4px; }
.d-reg .s { font-size: 13.5px; color: var(--txt-2); overflow-wrap: anywhere; }
.d-reg .nota { font-size: 14px; color: var(--txt); overflow-wrap: anywhere; }
.d-reg .resposta { font-size: 13.5px; color: var(--roxo-texto); border-left: 3px solid #6725F9; padding: 2px 0 2px 10px; margin-top: 4px; overflow-wrap: anywhere; }
.d-reg .acoes-reg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.d-reg.pendente .t { color: var(--txt-2); }
.d-sit-opc { display: grid; gap: 8px; margin-top: 12px; }
.d-sit-opc button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border-radius: 14px; background: var(--s2); border: 1.5px solid transparent; text-align: left; font-weight: 700; transition: transform .12s ease, border-color .15s ease; }
.d-sit-opc button:active { transform: scale(.97); }
.d-sit-opc button.on { border-color: #011F2C; background: rgba(217, 224, 33, .24); }
.d-sit-opc .bola { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.d-sit-opc .marcado { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #011F2C; color: #D9E021; margin-left: auto; }
.d-sit-opc .marcado svg.i { width: 15px; height: 15px; stroke-width: 3; }
.d-form-reg { display: grid; gap: 12px; margin-top: 12px; }
.d-form-reg textarea { min-height: 84px; resize: vertical; }
@keyframes d-pop { 0% { transform: scale(.96); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
.d-acabou { animation: d-pop .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .d-acabou { animation: none; } .d-sit-opc button { transition: none; } }
.roxo-ic { color: var(--roxo-texto); display: grid; place-items: center; flex: none; }
.d-diario-pro { display: grid; gap: 12px; align-items: start; }
.d-col-diario { display: grid; gap: 12px; min-width: 0; }
.d-col-diario .dica { margin: 0; }
.d-h3 { font-family: var(--display); font-size: 20px; font-weight: 800; margin: 0 0 10px; line-height: 1.1; }
.d-card-lista { padding: 0; overflow: hidden; }
.d-card-lista .d-pad { padding: 14px 14px 0; }
.d-card-lista p.d-pad { padding-bottom: 14px; margin: 0; }
.d-semana-grade { display: grid; grid-template-columns: minmax(64px, 28%) repeat(7, minmax(0, 1fr)); gap: 3px; font-size: 12px; align-items: center; }
.d-semana-grade .cab { color: var(--txt-3); font-weight: 700; text-align: center; font-size: 10.5px; letter-spacing: -.02em; white-space: nowrap; }
.d-semana-grade .cab.hoje { color: var(--cor-p-t); }
.d-semana-grade .rn { color: var(--txt-2); font-weight: 600; overflow-wrap: anywhere; line-height: 1.25; }
.d-semana-grade .d-cel-sit { min-width: 0; width: 100%; }
.d-cel-sit.fora { background: transparent; }
@media (min-width: 600px) { .d-semana-grade { gap: 6px; } .d-semana-grade .cab { font-size: 12px; } }
.d-subabas button { font-size: 13px; line-height: 1.15; padding-left: 4px; padding-right: 4px; }
.d-alerta-diario { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.d-alerta-diario .mid { flex: 1; min-width: 0; display: grid; gap: 2px; }
.d-alerta-diario b { display: inline-flex; align-items: center; gap: 6px; }
.d-alerta-diario b svg.i { width: 16px; height: 16px; color: var(--cor-p-t); }
.d-alerta-diario.silenciado b svg.i { color: var(--txt-3); }
.d-alerta-diario .btn { flex: none; }

/* ---------- Dieta D8 (15/10): modelos e IA de fora. Sempre dentro de .claro. ---------- */
.d-planos-topo { flex-wrap: wrap; gap: 8px; }
.d-onde { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; margin: 0; }
.d-onde label { gap: 10px; min-height: 40px; }
.d-onde input { width: 20px; height: 20px; flex: none; accent-color: #011F2C; }
.d-itens-modelo { margin: 6px 0 4px; padding-left: 18px; font-size: 14px; display: grid; gap: 3px; }
.d-titulo-ia { font-family: var(--display); font-size: 32px; margin: 4px 0 6px; line-height: 1.05; }
.d-ia-grade { display: grid; gap: 12px; align-items: start; }
@media (min-width: 900px) { .d-ia-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.d-grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.d-pedido { white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.5 ui-monospace, Menlo, monospace; background: var(--s2); border-radius: 12px; padding: 12px; max-height: 340px; overflow: auto; margin: 0 0 12px; }
.d-cola { min-height: 240px; font: 13px/1.5 ui-monospace, Menlo, monospace; }
.d-ia-ref { margin-top: 12px; padding: 12px; }
.d-ia-ref-cab { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px; margin-bottom: 6px; }
.d-ia-ref-cab .campo { font-weight: 700; }
.d-ia-linha { border-top: 1px solid var(--linha); padding: 10px 0 10px 10px; border-left: 3px solid transparent; }
.d-ia-linha.atencao { border-left-color: var(--rosa-texto); background: rgba(192, 16, 94, .04); }
.d-ia-orig { font-size: 13px; color: var(--txt-2); overflow-wrap: anywhere; }
.d-ia-escolha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.d-ia-escolha .btn.peq { width: auto; }
.d-ia-al { max-width: 100%; justify-content: flex-start; text-align: left; height: auto !important; min-height: 36px; padding-top: 6px !important; padding-bottom: 6px !important; white-space: normal; }
.d-ia-escolha .seletor { width: auto; max-width: 240px; height: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }
.d-ia-escolha .d-ia-qtd { width: 84px; flex: none; height: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; text-align: right; }
.d-ia-prob { font-size: 13px; color: var(--rosa-texto); margin-top: 6px; display: flex; gap: 6px; align-items: flex-start; }
.d-ia-prob svg.i { width: 14px; height: 14px; margin-top: 2px; flex: none; }
.d-ia-pe { margin-top: 12px; display: grid; gap: 10px; }
.d-ia-res { max-height: 56dvh; overflow: auto; }
.d-planos-topo .linha-flex, .d-ed .d-entre .linha-flex { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.d-planos-topo .linha-flex .btn.peq, .d-ed .d-entre .linha-flex .btn.peq { width: auto; }
/* linhas de lista montadas com <span> (dentro de botão): mesmo visual das montadas com <div> */
.item span.mid, .item span.mid > span.t, .item span.mid > span.s { display: block; }
.d-onde label { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.d-onde label > span { flex: 1; min-width: 0; }