/* ============================================================
   Utilidades com cara de app (07/10/2026)
   Camada única pras 6 páginas de /utilidades (índice, TDEE, pace,
   kit do corredor, planejamento de peso, custo-benefício). Entra
   DEPOIS do CSS de cada página. Só aparência: não muda HTML, texto,
   onclick, link, UTM, origem nem evento. Tirou o bloco, volta ao
   que era.
   ============================================================ */
:root{
  --ua-aqua:#C1DFE0;--ua-aqua-claro:#d3eaeb;--ua-tinta:#111820;
  --ua-campo:#162027;--ua-borda:rgba(193,223,224,.14);--ua-borda-forte:rgba(193,223,224,.32);
  --ua-anel:0 0 0 4px rgba(193,223,224,.14);
  --ua-mola:cubic-bezier(.2,.8,.2,1);
}

/* ---------- botão principal ---------- */
.btn:not(.secondary),.btn-calcular,.cta-primary,a.btn{
  border-radius:16px!important;min-height:54px;
  background:linear-gradient(180deg,var(--ua-aqua-claro) 0%,var(--ua-aqua) 100%)!important;color:var(--ua-tinta)!important;
  box-shadow:0 12px 30px -12px rgba(193,223,224,.55),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(17,24,32,.08)!important;
  transition:transform .15s var(--ua-mola),box-shadow .2s,filter .2s!important;opacity:1;
}
.btn:not(.secondary):hover,.btn-calcular:hover,.cta-primary:hover,a.btn:hover{filter:brightness(1.04);transform:translateY(-1px);opacity:1}
.btn:active,.btn-calcular:active,.cta-primary:active,a.btn:active{transform:scale(.98)!important}
.btn:disabled,.btn-calcular:disabled{filter:grayscale(.4);opacity:.4!important;transform:none!important;box-shadow:none!important}

/* ---------- botão secundário / voltar ---------- */
.btn.secondary,.cta-ghost{
  border-radius:16px!important;min-height:50px;
  background:linear-gradient(180deg,rgba(193,223,224,.07),rgba(193,223,224,.02))!important;
  border:1px solid rgba(193,223,224,.22)!important;color:#ECEEE8!important;
}
.calc-back,.disc-back{
  border-radius:12px!important;padding:8px 12px 8px 8px!important;background:rgba(193,223,224,.06)!important;
  border:1px solid rgba(193,223,224,.12)!important;transition:background .2s,color .2s!important;
}
.calc-back:hover,.disc-back:hover{background:rgba(193,223,224,.12)!important}
.restart{text-decoration:none!important;padding:10px 16px;border-radius:12px;border:1px solid rgba(193,223,224,.18)!important;color:#C1DFE0!important}

/* ---------- campos ---------- */
input[type="number"],input[type="text"],input[type="email"],input[type="tel"],select,.text-input{
  min-height:50px;border-radius:14px!important;
  background:var(--ua-campo)!important;border:1px solid var(--ua-borda)!important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25);font-weight:600;
  transition:border-color .2s,box-shadow .2s!important;
}
input[type="number"]{font-variant-numeric:tabular-nums}
input:focus,select:focus,.text-input:focus{border-color:var(--ua-aqua)!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.25),var(--ua-anel)!important;outline:none}
.igPrefix,.unitWrap{border-radius:14px!important;background:var(--ua-campo)!important;border-color:var(--ua-borda)!important}
.igPrefix input,.unitWrap input{box-shadow:none!important;border:0!important;background:transparent!important;min-height:0}
.igPrefix:focus-within,.unitWrap:focus-within{border-color:var(--ua-aqua)!important;box-shadow:var(--ua-anel)}
select{-webkit-appearance:none;appearance:none;padding-right:38px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C1DFE0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important}
/* setinhas do número somem: o campo fica limpo como num app */
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield}

/* ---------- opções em lista (TDEE, planejamento) ---------- */
.opt{
  position:relative;font-family:inherit!important;border-radius:16px!important;padding:16px 18px 16px 52px!important;
  background:rgba(22,32,39,.85)!important;border:1px solid var(--ua-borda)!important;
  transition:border-color .2s,background .2s,transform .12s var(--ua-mola)!important;
}
.opt::before{
  content:"";position:absolute;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;
  border:2px solid rgba(193,223,224,.3);transition:border-color .2s,background .2s,box-shadow .2s;
}
.opt.active{background:rgba(193,223,224,.10)!important;border-color:var(--ua-aqua)!important;border-width:1px!important}
.opt.active::before{border-color:var(--ua-aqua);background:var(--ua-aqua);box-shadow:inset 0 0 0 4px var(--ua-campo)}
.opt:active{transform:scale(.985)}

/* ---------- escolha em grupo (botões lado a lado) ---------- */
.seg{gap:0!important;padding:4px;border-radius:16px;background:var(--ua-campo);border:1px solid var(--ua-borda)}
.seg button{border:0!important;border-radius:12px!important;background:transparent!important;transition:background .2s,color .2s!important}
.seg button.active{background:var(--ua-aqua)!important;color:var(--ua-tinta)!important;box-shadow:0 4px 14px -4px rgba(193,223,224,.5)}
.tabs{border-radius:16px!important;padding:4px!important;background:var(--ua-campo)!important;border:1px solid var(--ua-borda)}
.tab-btn{border-radius:12px!important;min-height:42px}
.tab-btn.active{background:var(--ua-aqua)!important;color:var(--ua-tinta)!important;box-shadow:0 4px 14px -4px rgba(193,223,224,.5)!important}

/* ---------- chips (kit do corredor) ---------- */
.opt-btn{
  border-radius:999px!important;min-height:42px;padding:9px 16px!important;
  background:var(--ua-campo)!important;border:1px solid var(--ua-borda)!important;
  transition:background .2s,border-color .2s,color .2s,transform .12s var(--ua-mola)!important;
}
.opt-btn:active{transform:scale(.96)}
.opt-btn.selected{background:var(--ua-aqua)!important;border-color:var(--ua-aqua)!important;color:var(--ua-tinta)!important;box-shadow:0 6px 16px -6px rgba(193,223,224,.6)}

/* ---------- cartões ---------- */
.card,.calc-wrap{border-radius:24px!important;background:linear-gradient(170deg,#22343e 0%,#1c2a32 100%)!important;border-color:rgba(193,223,224,.10)!important}
.calc-card,.type-card{
  border-radius:20px!important;background:linear-gradient(170deg,#22343e 0%,#1c2a32 100%)!important;
  transition:border-color .2s,transform .15s var(--ua-mola)!important;
}
.calc-card:active,.type-card:active{transform:scale(.985)!important}
.card-icon{border-radius:14px!important;background:rgba(193,223,224,.10)!important;box-shadow:inset 0 0 0 1px rgba(193,223,224,.16)}
.opt-card,.result-card{border-radius:20px!important;border-color:var(--ua-borda)!important}
.result-card.is-winner{border-color:var(--ua-aqua)!important;box-shadow:0 0 0 1px var(--ua-aqua),0 14px 30px -16px rgba(193,223,224,.5)}

/* ---------- progresso do passo a passo (TDEE, planejamento) ---------- */
.progress{gap:5px!important}
.progress>*{height:5px!important;border-radius:99px!important;transition:background .35s var(--ua-mola),box-shadow .35s}

/* ---------- resultados: entram com uma subida curta, sem número contando ---------- */
@keyframes ua-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ua-entra{animation:ua-entra .4s var(--ua-mola) both}
.result-box,.result-hero,.result-card{border-radius:20px!important}
.result-box{background:linear-gradient(170deg,rgba(193,223,224,.16),rgba(193,223,224,.07))!important}
.step.active{animation:ua-entra .35s var(--ua-mola) both}

/* ---------- aviso curto (salvo / copiado) ---------- */
.ua-aviso{position:fixed;left:50%;bottom:24px;z-index:9999;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:8px;font:600 .84rem/1 'Sora',sans-serif;color:var(--ua-tinta);background:var(--ua-aqua);
  border-radius:12px;padding:12px 16px;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:opacity .25s,transform .25s var(--ua-mola)}
.ua-aviso.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  .ua-entra,.step.active{animation:none}
  .opt,.opt-btn,.calc-card,.type-card,.btn,.btn-calcular{transition:none!important}
}