/* ============ COMPONENTES ============ */

/* ---- card ---- */
.card{background:var(--sf);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4)}
.card-p0{padding:0;overflow:hidden}
.card.tap{cursor:pointer;transition:transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.card.tap:hover{border-color:var(--line2);transform:translateY(-2px)}
.card.tap:active{transform:translateY(0) scale(.995)}
.card-cab{padding:var(--s4);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--s3)}
.card-cab h3{flex:1;font-size:15.5px}

/* ---- botões ---- */
.btn{
  border:1px solid transparent;border-radius:var(--r-full);padding:11px 20px;
  font-size:14.5px;font-weight:600;cursor:pointer;letter-spacing:-.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;min-height:44px;
  transition:transform var(--t-fast) var(--ease),opacity var(--t) var(--ease),
             border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.btn:active{transform:scale(.965)}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn-1{background:var(--ac);color:var(--ac-ink)}
.btn-1:hover{opacity:.9}
.btn-2{background:var(--sf3);color:var(--ink);border-color:var(--line)}
.btn-2:hover{border-color:var(--line2)}
.btn-3{background:transparent;color:var(--ink2)}
.btn-3:hover{color:var(--ink);background:var(--sf3)}
.btn-d{background:var(--bad-soft);color:var(--bad);border-color:rgba(239,68,68,.26)}
.btn-d:hover{background:rgba(239,68,68,.2)}
.btn-ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(34,197,94,.26)}
.btn-sm{padding:7px 14px;font-size:13px;min-height:36px;gap:6px}
.btn-sm svg{width:15px;height:15px}
.btn-lg{padding:15px 28px;font-size:16px;min-height:52px}
.btn-full{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.load{pointer-events:none;color:transparent!important;position:relative}
.btn.load::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--ac-ink);border-top-color:transparent;animation:gira .6s linear infinite}
.btn-2.load::after,.btn-3.load::after{border-color:var(--ink);border-top-color:transparent}
@keyframes gira{to{transform:rotate(360deg)}}

.icb{width:40px;height:40px;padding:0;border-radius:var(--r-full);background:transparent;
  border:1px solid transparent;color:var(--ink3);display:grid;place-items:center;cursor:pointer;flex:none;
  transition:transform var(--t-fast) var(--ease),color var(--t) var(--ease),background var(--t) var(--ease)}
.icb:hover{color:var(--ink);background:var(--sf3)}
.icb:active{transform:scale(.9)}
.icb svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icb-b{background:var(--sf3);border-color:var(--line)}

/* ---- campos ---- */
.f{margin-bottom:var(--s4)}
.f>label{display:block;font-size:13.5px;font-weight:500;color:var(--ink2);margin-bottom:6px}
.f .req{color:var(--ac)}
.inp{
  width:100%;background:var(--sf3);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;font-size:15.5px;outline:none;min-height:46px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.inp::placeholder{color:var(--ink4)}
.inp:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
textarea.inp{min-height:92px;resize:vertical;line-height:1.6}
select.inp{appearance:none;cursor:pointer;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 13px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.f .dica{font-size:12.5px;color:var(--ink4);margin-top:5px}
.f.erro .inp{border-color:var(--bad)}
.f.erro .dica{color:var(--bad)}
.busca{position:relative}
.busca .inp{padding-left:42px}
.busca>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  stroke:var(--ink4);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}

/* stepper */
.step{display:flex;align-items:center;background:var(--sf3);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;width:max-content}
.step button{width:44px;height:46px;background:none;border:0;color:var(--ink2);font-size:20px;cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.step button:hover{background:var(--sf2);color:var(--ink)}
.step input{width:70px;height:46px;background:none;border:0;text-align:center;font-size:16px;font-weight:600;outline:none}
.step .un{padding-right:13px;font-size:12.5px;color:var(--ink4);font-weight:500}

/* toggle */
.tg{display:inline-flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
.tg input{position:absolute;opacity:0;pointer-events:none}
.tg i{width:44px;height:26px;border-radius:var(--r-full);background:var(--sf3);border:1px solid var(--line);
  position:relative;flex:none;transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.tg i::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--ink3);transition:transform var(--t) var(--ease),background var(--t) var(--ease)}
.tg input:checked+i{background:var(--ac);border-color:transparent}
.tg input:checked+i::after{transform:translateX(18px);background:var(--ac-ink)}
.tg span{font-size:14.5px;color:var(--ink2)}

/* segmentado */
.seg{display:inline-flex;background:var(--sf3);border:1px solid var(--line);border-radius:var(--r-full);padding:3px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:none;border:0;background:none;color:var(--ink3);font-size:13.5px;font-weight:500;
  padding:8px 16px;border-radius:var(--r-full);cursor:pointer;min-height:36px;white-space:nowrap;
  transition:color var(--t) var(--ease),background var(--t) var(--ease)}
.seg button.on{background:var(--ac);color:var(--ac-ink);font-weight:600}
.seg button:not(.on):hover{color:var(--ink)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line);background:var(--sf3);color:var(--ink2);border-radius:var(--r-full);
  padding:7px 14px;font-size:13px;cursor:pointer;transition:all var(--t) var(--ease)}
.chip:hover{border-color:var(--line2);color:var(--ink)}
.chip.on{background:var(--ac);color:var(--ac-ink);border-color:transparent;font-weight:600}

/* ---- avatar ---- */
.av{border-radius:50%;flex:none;display:grid;place-items:center;font-weight:600;color:#fff;
  overflow:hidden;position:relative;width:44px;height:44px;font-size:15px;letter-spacing:-.01em}
.av img{width:100%;height:100%;object-fit:cover}
.av::after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.av-sm{width:34px;height:34px;font-size:12.5px}
.av-lg{width:74px;height:74px;font-size:25px}
.av-xl{width:96px;height:96px;font-size:32px}

/* ---- etiquetas ---- */
.bd{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:var(--r-full);white-space:nowrap}
.bd-ok{background:var(--ok-soft);color:var(--ok)}
.bd-w{background:var(--warn-soft);color:var(--warn)}
.bd-b{background:var(--bad-soft);color:var(--bad)}
.bd-i{background:var(--info-soft);color:var(--info)}
.bd-n{background:var(--sf3);color:var(--ink3)}
.bd-ac{background:var(--ac-soft);color:var(--ac)}
html[data-tema="claro"] .bd-ac{color:color-mix(in srgb,var(--ac) 66%,#000)}
.dot{width:7px;height:7px;border-radius:50%;flex:none}

/* ---- métrica ---- */
.mt{background:var(--sf);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease)}
.mt.tap{cursor:pointer}
.mt.tap:hover{border-color:var(--line2);transform:translateY(-2px)}
.mt-l{font-size:12px;color:var(--ink3);font-weight:500;display:flex;align-items:center;gap:7px}
.mt-l svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.mt-v{font-size:32px;font-weight:700;letter-spacing:-.035em;margin-top:8px;line-height:1}
.mt-d{font-size:12.5px;margin-top:6px;color:var(--ink4)}
.mt-d.up{color:var(--ok)}.mt-d.dn{color:var(--bad)}

/* ---- lista ---- */
.lista{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:var(--s3);padding:12px var(--s4);border-bottom:1px solid var(--line);
  cursor:pointer;transition:background var(--t) var(--ease)}
.item:last-child{border-bottom:0}
.item:hover{background:var(--sf3)}
.item .tx{flex:1;min-width:0}
.item .n{font-size:15px;font-weight:600;letter-spacing:-.01em}
.item .s{font-size:12.5px;color:var(--ink3);margin-top:1px;display:flex;align-items:center;gap:6px}
.item .ch{color:var(--ink4);flex:none}
.item .ch svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- tabela ---- */
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink4);padding:0 14px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabela td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink2)}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr{cursor:pointer;transition:background var(--t) var(--ease)}
.tabela tbody tr:hover{background:var(--sf3)}
.tabela td.n{font-weight:600;color:var(--ink)}
.rolax{overflow-x:auto;margin:0 calc(-1 * var(--s4));padding:0 var(--s4)}

/* ---- abas ---- */
.abas{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
  margin:0 calc(-1 * var(--s4)) var(--s5);padding:0 var(--s4)}
.abas::-webkit-scrollbar{display:none}
.abas button{flex:none;border:0;background:none;color:var(--ink3);font-size:14px;font-weight:500;
  padding:12px 15px;cursor:pointer;position:relative;white-space:nowrap;transition:color var(--t) var(--ease)}
.abas button.on{color:var(--ink);font-weight:600}
.abas button.on::after{content:'';position:absolute;left:13px;right:13px;bottom:-1px;height:2px;
  background:var(--ac);border-radius:2px}
.abas button:hover{color:var(--ink)}

/* ---- estados ---- */
.vazio{text-align:center;padding:var(--s9) var(--s5)}
.vazio .ic{width:56px;height:56px;border-radius:var(--r-md);background:var(--sf3);margin:0 auto var(--s4);display:grid;place-items:center}
.vazio .ic svg{width:25px;height:25px;stroke:var(--ink4);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vazio h4{margin-bottom:6px}
.vazio p{font-size:14px;color:var(--ink3);max-width:340px;margin:0 auto var(--s5);line-height:1.55}
.sk{background:var(--sf3);border-radius:var(--r-sm);position:relative;overflow:hidden}
.sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 7%,transparent),transparent);
  animation:brilho 1.5s infinite}
@keyframes brilho{to{transform:translateX(100%)}}

/* ---- barra ---- */
.barra{height:7px;background:var(--sf3);border-radius:var(--r-full);overflow:hidden}
.barra i{display:block;height:100%;background:var(--ac);border-radius:var(--r-full);
  transform-origin:left;transition:transform 900ms var(--ease)}

/* ---- toast / painel / modal ---- */
.toast{position:fixed;left:50%;bottom:calc(var(--bnav-h) + 18px);z-index:104;
  background:var(--sf2);border:1px solid var(--line2);border-radius:var(--r-full);
  padding:12px 20px;font-size:14px;font-weight:500;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:9px;max-width:92vw;
  opacity:0;transform:translate(-50%,14px);pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
@media(min-width:1000px){ .toast{bottom:26px} }
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{width:17px;height:17px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;stroke:var(--ok)}
.toast.err svg{stroke:var(--bad)}

.scrim{position:fixed;inset:0;z-index:100;background:rgba(3,6,10,.62);opacity:0;pointer-events:none;
  transition:opacity var(--t) var(--ease);backdrop-filter:blur(3px)}
.scrim.on{opacity:1;pointer-events:auto}
.painel{position:fixed;left:0;right:0;bottom:0;z-index:102;background:var(--sf);
  border-top:1px solid var(--line2);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:10px var(--s5) calc(var(--s6) + env(safe-area-inset-bottom,0));
  transform:translateY(102%);transition:transform var(--t-slow) var(--ease);
  box-shadow:var(--shadow-lg);max-height:88svh;overflow-y:auto}
.painel.on{transform:translateY(0)}
@media(min-width:760px){
  .painel{left:50%;right:auto;bottom:auto;top:50%;width:min(520px,92vw);border-radius:var(--r-xl);
    border:1px solid var(--line2);opacity:0;transform:translate(-50%,-46%) scale(.97);
    transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);padding-bottom:var(--s6)}
  .painel.on{transform:translate(-50%,-50%) scale(1);opacity:1}
}
.pega{width:38px;height:4px;border-radius:4px;background:var(--line2);margin:0 auto var(--s4)}

/* ---- PWA Install Banner ---- */
.pwa-install-banner{position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:var(--sf);border-top:1px solid var(--line2);
  padding:var(--s4) var(--s5) calc(var(--s4) + env(safe-area-inset-bottom,0));
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  box-shadow:0 -4px 20px rgba(0,0,0,.12);
  transform:translateY(100%);transition:transform var(--t-slow) var(--ease);
}
.pwa-install-banner.on{transform:translateY(0)}
.pwa-install-banner .pwa-txt{flex:1;min-width:180px;font-size:14px;line-height:1.4}
.pwa-install-banner .pwa-txt b{display:block;font-size:15px;margin-bottom:2px}
.pwa-install-banner .pwa-actions{display:flex;gap:var(--s2);flex:none}
@media(min-width:760px){
  .pwa-install-banner{left:50%;right:auto;bottom:var(--s5);width:min(480px,92vw);
    border-radius:var(--r-xl);border:1px solid var(--line2);
    transform:translate(-50%,120%)}
  .pwa-install-banner.on{transform:translate(-50%,0)}
}

/* ---- PWA iOS Modal ---- */
.pwa-ios-modal{position:fixed;inset:0;z-index:115;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease)}
.pwa-ios-modal.on{opacity:1;pointer-events:auto}
.pwa-ios-modal .scrim{position:absolute;inset:0;background:rgba(3,6,10,.62);backdrop-filter:blur(3px)}
.pwa-ios-sheet{position:relative;z-index:1;background:var(--sf);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom,0));
  width:100%;max-width:480px;box-shadow:var(--shadow-lg);
  transform:translateY(100%);transition:transform var(--t-slow) var(--ease)}
.pwa-ios-modal.on .pwa-ios-sheet{transform:translateY(0)}
@media(min-width:760px){
  .pwa-ios-modal{align-items:center}
  .pwa-ios-sheet{border-radius:var(--r-xl);transform:translateY(20px) scale(.97);opacity:0;
    transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
  .pwa-ios-modal.on .pwa-ios-sheet{transform:translateY(0) scale(1);opacity:1}
}
.pwa-ios-sheet h3{font-size:17px;margin-bottom:var(--s3)}
.pwa-ios-steps{list-style:none;padding:0;margin:0 0 var(--s4) 0;font-size:14.5px;line-height:1.7}
.pwa-ios-steps li{padding-left:var(--s5);position:relative;margin-bottom:var(--s2)}
.pwa-ios-steps li::before{content:'';position:absolute;left:0;top:8px;width:18px;height:18px;
  border-radius:50%;background:var(--ac);opacity:.15}
.pwa-ios-steps li::after{content:attr(data-step);position:absolute;left:4px;top:6px;
  font-size:11px;font-weight:700;color:var(--ac)}
@media(min-width:760px){ .pega{display:none} }
.painel h3{margin-bottom:5px}
.painel .desc{font-size:14px;color:var(--ink3);margin-bottom:var(--s5)}

/* ---- animação de entrada ---- */
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sobe{animation:sobe var(--t-slow) var(--ease) both;animation-delay:var(--d,0s)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.fade{animation:fade var(--t) var(--ease) both}

/* ---- exercício ---- */
.ex{display:flex;gap:var(--s3);align-items:stretch}
.ex-v{width:66px;flex:none;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;position:relative;
  background:var(--sf3);display:grid;place-items:center}
.ex-v img{width:100%;height:100%;object-fit:cover}
.ex-v svg{width:22px;height:22px;stroke:var(--ink4);fill:none;stroke-width:1.6}
.ex-i{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px}
.ex-n{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.ex-m{font-size:12.5px;color:var(--ink3)}
.ex-p{font-size:12px;color:var(--ac);display:flex;align-items:center;gap:5px}
html[data-tema="claro"] .ex-p{color:color-mix(in srgb,var(--ac) 62%,#000)}
.ex-p svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ícone solto dentro de um item de lista (menus de painel) */
.item > svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none;color:var(--ink3)}

/* botão fechar do painel */
.painel-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--sf3);color:var(--ink3);display:grid;place-items:center;
  cursor:pointer;z-index:5;transition:all var(--t) var(--ease)}
.painel-x:hover{color:var(--ink);border-color:var(--line2)}
.painel-x:active{transform:scale(.9)}
.painel-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.painel h3{padding-right:40px}
/* painel só recebe clique quando aberto — reforço contra o fantasma */
.painel{pointer-events:none}
.painel.on{pointer-events:auto}
/* ícone do WhatsApp mantém o verde dentro de qualquer botão */
.btn svg path[fill="currentColor"]{fill:#25D366}
.icb svg path[fill="currentColor"]{fill:#25D366}

/* ---- avatar que alterna entre foto e boneco (5 em 5s) ---- */
.av-duo{position:relative}
.av-duo .av-fase{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  transition:opacity .6s ease, transform .6s ease}
.av-duo .av-fase img,.av-duo .av-fase svg{width:100%;height:100%;object-fit:cover;display:block}
.av-duo .av-f-svg{opacity:0;transform:scale(.92)}
html.av-flip .av-duo .av-f-foto{opacity:0;transform:scale(.92)}
html.av-flip .av-duo .av-f-svg{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){ .av-duo .av-fase{transition:none} }

/* ---- o boneco pisca sozinho, em ritmo natural ----
   A pálpebra fecha rápido (uns 80ms). O intervalo é curto o bastante
   para dar vida, sem ficar frenético. Cada avatar tem seu compasso
   (delay próprio), então eles não piscam todos juntos. */
.av-olhos{ transform-box:fill-box; transform-origin:center; animation:avPiscar 4s infinite; }
@keyframes avPiscar{
  0%, 88%, 100% { transform:scaleY(1); }
  90%           { transform:scaleY(.08); }
  92%           { transform:scaleY(1); }
  /* de vez em quando, uma piscada dupla — é o que dá naturalidade */
  94%           { transform:scaleY(.1); }
  95.6%         { transform:scaleY(1); }
}

/* ---- movimento leve de "vida" ----
   O rosto e o corpo (tudo menos o fundo) balançam de leve, dando a
   sensação de que o boneco está vivo. Amplitude minúscula (<1px, ~1°)
   para nunca ficar exagerado nem cortar na borda. Três estilos:
   feminino (balanço gracioso), masculino (respiração firme) e
   neutro (flutua). O delay próprio desencontra os avatares. */
.av-mov{ transform-box:fill-box; transform-origin:center; }
.av-mov-f{ animation:avSwayF 4.4s ease-in-out infinite; }
.av-mov-m{ animation:avBobM 3.6s ease-in-out infinite; }
.av-mov-n{ animation:avFloatN 4.8s ease-in-out infinite; }
@keyframes avSwayF{
  0%,100%{ transform:translateX(0) rotate(0deg); }
  25%    { transform:translateX(1px) rotate(2.2deg); }
  50%    { transform:translateX(0) rotate(0deg); }
  75%    { transform:translateX(-1px) rotate(-2.2deg); }
}
@keyframes avBobM{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-1.6px) scale(1.02); }
}
@keyframes avFloatN{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  33%    { transform:translateY(-1.4px) rotate(1.6deg); }
  66%    { transform:translateY(1px) rotate(-1.6deg); }
}
@media (prefers-reduced-motion:reduce){
  .av-olhos,.av-mov{ animation:none; }
}