/* BodyAI dentro do Alovance — usa as variáveis e componentes de css/vitta.css
   (--p azul #244B68, --a verde-água #70A9A1, --bg #F5F7F8, preto para texto). */

.bai { --bai-band1: #eef2f4; --bai-band2: #dbe7ea; --bai-band3: #c2dbd7; --bai-band4: #93c0b9; --bai-band5: #5f9a92; }

/* ---------- Cabeçalho da categoria ---------- */
.bai-hero {
  position: relative; overflow: hidden; border-radius: 24px; padding: 28px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--p), var(--pd)); color: #fff; box-shadow: var(--sh);
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.bai-hero::before, .bai-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.bai-hero::before { width: 280px; height: 280px; right: -80px; top: -120px; background: rgba(112, 169, 161, .22); }
.bai-hero::after { width: 140px; height: 140px; right: 120px; bottom: -80px; background: rgba(255, 255, 255, .06); }
.bai-hero > * { position: relative; z-index: 1; }
.bai-hero h1 { color: #fff; font-size: 1.75rem; margin: 6px 0 6px; }
.bai-hero p { margin: 0; color: #cfe0e6; max-width: 560px; }
.bai-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--a); }
.bai-hero .chip { margin: 14px 6px 0 0; }
.bai-hero-mark { width: 92px; height: 92px; border-radius: 26px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .16); }
.bai-hero-mark svg.i { width: 46px; height: 46px; color: var(--a); }

/* ---------- Etapas ---------- */
.bai-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.bai-step { background: #fff; border: 1px solid var(--l); border-radius: 16px; padding: 14px; }
.bai-step b { display: block; color: var(--p); font-size: .92rem; }
.bai-step small { display: block; margin-top: 2px; font-size: .8rem; }
.bai-step i { font-style: normal; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--al); color: var(--p); font-size: .78rem; font-weight: 800; margin-bottom: 8px; }

/* ---------- Formulário ---------- */
.bai-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.bai-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--p); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.bai-head h2 { margin: 3px 0 2px; }
.bai-head small { display: block; }
.bai-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bai-fields label { margin-bottom: 0; }
.bai-ferr { color: #9b1c1c; font-size: .78rem; font-weight: 500; min-height: 1.15em; margin-top: 4px; }
.bai input[aria-invalid="true"], .bai select[aria-invalid="true"] { border-color: #c4705f; }
.bai-bmi { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bg); font-size: .88rem; color: var(--m); }
.bai-bmi b { color: var(--p); font-size: 1.05rem; }
.bai-prefill { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #2a665e; background: var(--al); border-radius: 20px; padding: 3px 10px; }

.bai-tips { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 18px; }
.bai-tips li { position: relative; padding-left: 16px; font-size: .86rem; color: var(--m); }
.bai-tips li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--a); }

.bai-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bai-slot { display: flex; flex-direction: column; gap: 8px; }
.bai-slot-title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--p); font-size: .92rem; }
.bai-drop {
  position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; cursor: pointer;
  border: 2px dashed #c9d2d7; border-radius: 18px; background: var(--bg); color: var(--m); font-weight: 500; transition: border-color .2s, background .2s;
}
.bai-drop:hover, .bai-drop.over { border-color: var(--a); background: var(--al); }
.bai-drop.has { border-style: solid; border-color: var(--l); cursor: default; background: #0d1a24; }
.bai-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.bai-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bai-empty { text-align: center; padding: 16px; font-size: .84rem; pointer-events: none; }
.bai-empty svg { width: 50px; height: 66px; margin: 0 auto 10px; display: block; color: var(--p); opacity: .45; }
.bai-empty b { display: block; color: var(--p); margin-bottom: 2px; }
.bai-slot .row .btn { flex: 1; justify-content: center; }
.bai-perr { color: #9b1c1c; font-size: .8rem; min-height: 1.2em; margin: 0; }

.bai-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.bai-list li { position: relative; padding-left: 18px; font-size: .93rem; }
.bai-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--a); }
.bai-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-weight: 500; color: #000; cursor: pointer; }
.bai-consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--p); }

.bai-submit { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 4px 0 24px; }
.bai-submit .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.bai-note { display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; margin-bottom: 16px; font-size: .9rem; background: #e5ebf0; color: var(--p); border: 1px solid #cfd9e1; }
.bai-note.warn { background: #fbefd9; color: #7f520c; border-color: #f0dbb2; }
.bai-note.err { background: #f6e0da; color: #85301f; border-color: #edc6bb; }
.bai-note b { flex: none; }

/* ---------- Processamento ---------- */
.bai-proc { text-align: center; padding: 48px 20px; }
.bai-spin { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; border: 4px solid var(--al); border-top-color: var(--p); border-right-color: var(--a); animation: bai-spin 1s linear infinite; }
@keyframes bai-spin { to { transform: rotate(360deg); } }
.bai-proc h2 { font-size: 1.25rem; }
.bai-elapsed { font-variant-numeric: tabular-nums; color: var(--m); font-size: .85rem; margin-top: 8px; }

/* ---------- Relatório ---------- */
.bai-rhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.bai-rhead h1 { margin: 0; }
.bai-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.bai-metric { margin: 0; display: flex; flex-direction: column; }
.bai-metric.feature { background: linear-gradient(160deg, var(--p), var(--pd)); color: #fff; border-color: transparent; }
.bai-metric.feature small, .bai-metric.feature .bai-mdesc { color: #cfe0e6; }
.bai-mlabel { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--m); }
.bai-metric.feature .bai-mlabel { color: var(--a); }
.bai-mval { font-size: 3rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin: 8px 0 2px; color: var(--p); }
.bai-metric.feature .bai-mval { color: #fff; }
.bai-mval span { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--m); margin-left: 3px; }
.bai-metric.feature .bai-mval span { color: #cfe0e6; }
.bai-mval.na { font-size: 1.4rem; letter-spacing: -.01em; padding: 14px 0 8px; }
.bai-mdesc { font-size: .84rem; color: var(--m); margin: 10px 0 0; }
.bai-mfoot { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }

/* Pílulas de nível (escala neutra: não é "bom" ou "ruim" para a pessoa) */
.bai-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 3px 11px; font-size: .76rem; font-weight: 700; background: var(--bg); color: var(--p); border: 1px solid var(--l); white-space: nowrap; }
.bai-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.bai-pill.l1 { color: #5b6a74; } .bai-pill.l2 { color: #3d6c86; } .bai-pill.l3 { color: #244B68; } .bai-pill.l4 { color: #2f7f75; background: #e8f3f1; border-color: #cfe5e1; } .bai-pill.l5 { color: #1b574f; background: #dcefeb; border-color: #bfdcd6; }
.bai-pill.l0 { color: #8a979f; }
.bai-pill.f1 { color: #2f7f75; } .bai-pill.f2 { color: #7f520c; } .bai-pill.f3 { color: #85301f; }
.bai-metric.feature .bai-pill { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .2); }

/* Escala segmentada 0–100 */
.bai-scale { position: relative; margin: 14px 0 4px; }
.bai-seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; height: 12px; }
.bai-seg i { border-radius: 4px; background: var(--bai-band1); }
.bai-seg i:nth-child(2) { background: var(--bai-band2); } .bai-seg i:nth-child(3) { background: var(--bai-band3); }
.bai-seg i:nth-child(4) { background: var(--bai-band4); } .bai-seg i:nth-child(5) { background: var(--bai-band5); }
.bai-band { position: absolute; top: -4px; height: 20px; border: 2px solid var(--p); border-radius: 8px; background: rgba(36, 75, 104, .08); }
.bai-mark { position: absolute; top: -7px; width: 4px; height: 26px; border-radius: 3px; background: var(--p); transform: translateX(-50%); box-shadow: 0 0 0 2px #fff; }
.bai-ticks { display: flex; justify-content: space-between; font-size: .7rem; color: var(--m); margin-top: 6px; font-variant-numeric: tabular-nums; }
.bai-metric.feature .bai-ticks { color: #a9c3cd; }

/* Barra de intervalo do percentual de gordura */
.bai-range { position: relative; height: 12px; border-radius: 10px; background: rgba(255, 255, 255, .14); margin: 14px 0 4px; }
.bai-range b { position: absolute; top: 0; bottom: 0; border-radius: 10px; background: var(--a); }
.bai-range em { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--a); transform: translate(-50%, -50%); }

/* Confiança */
.bai-conf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bai-conf div { background: var(--bg); border-radius: 14px; padding: 12px; }
.bai-conf small { display: block; }
.bai-conf b { color: var(--p); }

/* Blocos de detalhe */
.bai-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.bai-sub { background: var(--bg); border-radius: 14px; padding: 14px 16px; }
.bai-sub h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--m); margin: 0 0 6px; }
.bai-sub p { margin: 0; font-size: .92rem; }
.bai-age { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px dashed #c9d2d7; font-size: .9rem; }
.bai-age b { color: var(--p); }

/* Regiões */
.bai-regions { display: grid; gap: 0; }
.bai-region { display: grid; grid-template-columns: 170px 1fr 1fr; gap: 6px 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--l); }
.bai-region:first-of-type { border-top: 0; }
.bai-region .nm b { display: block; color: #000; }
.bai-region .obs { grid-column: 2 / -1; font-size: .86rem; color: var(--m); margin: 0; }
.bai-mini { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: .78rem; color: var(--m); }
.bai-mini .bar { margin: 0; height: 8px; }
.bai-mini .bar i { background: var(--c, var(--a)); }
.bai-mini.vol .bar i { --c: var(--p); }
.bai-mini b { color: #000; font-variant-numeric: tabular-nums; min-width: 2.2em; text-align: right; }
.bai-mini .na { grid-column: 2 / -1; font-style: italic; }
.bai-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .78rem; color: var(--m); margin-bottom: 6px; }
.bai-legend span::before { content: ""; display: inline-block; width: 12px; height: 8px; border-radius: 4px; margin-right: 6px; background: var(--a); vertical-align: middle; }
.bai-legend span.vol::before { background: var(--p); }

/* Gordura por região */
.bai-fat { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.bai-fat > div { background: var(--bg); border-radius: 14px; padding: 12px 14px; }
.bai-fat .row { margin-bottom: 4px; }
.bai-fat p { margin: 0; font-size: .86rem; color: var(--m); }

/* Pontos fortes x oportunidades */
.bai-so { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.bai-so .card { margin: 0; }
.bai-so .str { border-top: 4px solid var(--a); }
.bai-so .opp { border-top: 4px solid var(--p); }

/* Faixas da escala */
.bai-bands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.bai-bands div { border-radius: 12px; padding: 10px; font-size: .8rem; background: var(--bai-band1); }
.bai-bands div:nth-child(2) { background: var(--bai-band2); } .bai-bands div:nth-child(3) { background: var(--bai-band3); }
.bai-bands div:nth-child(4) { background: var(--bai-band4); } .bai-bands div:nth-child(5) { background: var(--bai-band5); color: #fff; }
.bai-bands b { display: block; font-size: .85rem; }

.bai-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0 8px; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .bai-steps { grid-template-columns: repeat(2, 1fr); }
  .bai-fields { grid-template-columns: repeat(2, 1fr); }
  .bai-metrics { grid-template-columns: 1fr; }
  .bai-conf { grid-template-columns: repeat(2, 1fr); }
  .bai-region { grid-template-columns: 1fr 1fr; }
  .bai-region .nm { grid-column: 1 / -1; }
  .bai-region .obs { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bai-hero { grid-template-columns: 1fr; padding: 22px; }
  .bai-hero-mark { display: none; }
  .bai-tips, .bai-split, .bai-so { grid-template-columns: 1fr; }
  .bai-photos { grid-template-columns: 1fr; }
  .bai-drop { aspect-ratio: 4 / 5; }
  .bai-bands { grid-template-columns: 1fr; }
  .bai-region { grid-template-columns: 1fr; }
  .bai-submit .btn { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  .bai-fields, .bai-conf { grid-template-columns: 1fr; }
}

/* Histórico de relatórios */
.bai-hlist { display: grid; gap: 8px; }
.bai-hitem { display: flex; gap: 8px; align-items: stretch; }
.bai-hopen { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; text-align: left; background: #fff; border: 1px solid var(--l); border-radius: 14px; padding: 10px 14px; font: inherit; color: #000; cursor: pointer; transition: border-color .15s, background .15s; }
.bai-hopen:hover { border-color: var(--a); background: var(--al); }
.bai-hdate { display: flex; flex-direction: column; }
.bai-hdate b { color: var(--p); }
.bai-hdate i { font-style: normal; font-size: .72rem; font-weight: 700; color: #2a665e; }
.bai-hvals { display: flex; gap: 16px; flex-wrap: wrap; }
.bai-hvals > span { display: flex; flex-direction: column; min-width: 58px; }
.bai-hvals small { font-size: .72rem; }
.bai-hvals b { color: var(--p); }
.bai-hitem .ib { align-self: center; }
.bai-rhead .row { flex-wrap: wrap; }