/* Hoja del informe de composición corporal.
   Usa los tokens oscuros del demo (--dark-*) con el rojo de marca, para que la
   pieza se lea como un boletín de resultados y siga siendo BodyRhythm. */

.bc-sheet{
  --s-bg:#0c0a09; --s-card:#1c1917; --s-ink:#f7f5f2; --s-ink-2:#a8a29e;
  --s-line:#292524; --s-accent:#e2352b; --s-accent-lt:#ff7a70;
  --s-good:#57d98a; --s-bad:#ff7a70; --s-fat:#e0a355;
  background:var(--s-bg); color:var(--s-ink);
  border-radius:var(--r-lg, 20px); padding:26px 20px 22px;
  font-family:var(--font-body, "Manrope", system-ui, sans-serif);
  overflow:hidden;
}
.bc-sheet .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Cabecera ---------- */
.bc-head{text-align:center; padding-bottom:20px; border-bottom:1px solid var(--s-line)}
.bc-brand{
  margin:0; font-family:var(--font-display, "Archivo", sans-serif); font-size:15px;
  font-weight:600; letter-spacing:.16em; color:var(--s-ink);
}
.bc-brand b{font-weight:900}
.bc-brand em{color:var(--s-accent); font-style:normal; font-weight:900}
.bc-tag{
  margin:5px 0 0; font-size:10.5px; font-weight:800; letter-spacing:.28em;
  text-transform:uppercase; color:var(--s-ink-2);
}
.bc-name{
  margin:16px 0 0; font-family:var(--font-display, "Archivo", sans-serif);
  font-size:clamp(26px, 7vw, 40px); font-weight:900; letter-spacing:-.01em;
  text-transform:uppercase; line-height:1.05;
}
.bc-sub{
  margin:7px 0 0; font-size:11.5px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--s-accent-lt);
}

/* ---------- Comparación visual ---------- */
.bc-compare{
  display:grid; grid-template-columns:1fr auto 1fr; gap:12px;
  align-items:end; padding:22px 0 18px; border-bottom:1px solid var(--s-line);
}
.bc-col{min-width:0}
.bc-date{
  margin:0 0 10px; text-align:center; font-family:var(--font-display, sans-serif);
  font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--s-ink-2);
}
.bc-date.now{color:var(--s-ink)}
.bc-bar{
  display:flex; flex-direction:column-reverse; height:132px; border-radius:10px;
  overflow:hidden; background:var(--s-card); border:1px solid var(--s-line);
}
.bc-bar .seg{flex:0 0 auto; display:flex; align-items:center; justify-content:center; min-height:0}
.bc-bar .seg i{
  font-style:normal; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;
  color:#0c0a09; opacity:.9;
}
.bc-bar .fat{background:var(--s-fat)}
.bc-bar .mus{background:var(--s-accent)}
.bc-bar .mus i{color:#fff; opacity:.9}
.bc-bar .rest{background:#3a3431}
.bc-arrow{
  width:26px; height:26px; margin-bottom:52px; background:var(--s-accent-lt);
  -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat;
  --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E");
}

/* ---------- Tabla de mediciones ---------- */
.bc-tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px}
.bc-table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; min-width:290px}
.bc-table thead th{
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--s-ink-2); text-align:right; padding:16px 6px 9px; white-space:nowrap;
}
.bc-table thead th:first-child{text-align:left}
.bc-table tbody th{
  text-align:left; font-size:13px; font-weight:600; color:var(--s-ink);
  padding:11px 6px; vertical-align:middle;
}
.bc-table tbody th .u{margin-left:5px; font-size:10.5px; font-weight:700; color:var(--s-ink-2); white-space:nowrap}
.bc-table tbody tr{border-top:1px solid var(--s-line)}
.bc-table td{padding:11px 6px; text-align:right; white-space:nowrap}
.bc-table td.v{font-family:var(--font-display, sans-serif); font-size:16px; font-weight:800}
.bc-table td.d{font-size:13.5px; font-weight:800; color:var(--s-ink-2); min-width:62px}
.bc-table td.d.good{color:var(--s-good)}
.bc-table td.d.bad{color:var(--s-bad)}
/* La flecha sigue el signo del número; el color dice si eso es una mejora */
.bc-table td.d.up::before, .bc-table td.d.down::before{
  content:""; display:inline-block; width:11px; height:11px; margin-right:5px;
  background:currentColor; vertical-align:baseline;
  -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat;
}
.bc-table td.d.up::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3 3 14h6v7h6v-7h6z'/%3E%3C/svg%3E")}
.bc-table td.d.down::before{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21 3 10h6V3h6v7h6z'/%3E%3C/svg%3E")}

.mi{
  display:inline-block; width:15px; height:15px; margin-right:8px; vertical-align:-3px;
  background:var(--s-accent-lt);
  -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat;
}
.mi-weight{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cpath d='M6.5 21h11l-1.5-9a4 4 0 0 0-4-3h0a4 4 0 0 0-4 3z'/%3E%3C/svg%3E")}
.mi-bmi{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E")}
.mi-bodyFat{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E")}
/* Barra con discos: se lee bien a 13 px, el icono de bíceps de lucide no */
.mi-muscle{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8v8'/%3E%3Cpath d='M8 5v14'/%3E%3Cpath d='M16 5v14'/%3E%3Cpath d='M20 8v8'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E")}
.mi-rm{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4'/%3E%3Cpath d='m6.8 8.8 2.9 2.9'/%3E%3Ccircle cx='12' cy='14' r='8'/%3E%3C/svg%3E")}
.mi-metaAge{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E")}
.mi-visceral{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E")}

/* ---------- Franja de progreso ---------- */
.bc-progress{
  margin-top:20px; padding:16px 14px; background:var(--s-card);
  border:1px solid var(--s-line); border-radius:14px;
}
.bc-plabel{
  margin:0 0 12px; font-size:10.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--s-ink-2);
}
.pchips{display:grid; grid-template-columns:repeat(auto-fit, minmax(74px, 1fr)); gap:10px}
.pchip{text-align:center; min-width:0}
.pchip b{
  display:block; font-family:var(--font-display, sans-serif); font-size:19px;
  font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  color:var(--s-ink-2); line-height:1.1;
}
.pchip.good b{color:var(--s-good)}
.pchip.bad b{color:var(--s-bad)}
.pchip span{
  display:block; margin-top:3px; font-size:9.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--s-ink-2);
  overflow-wrap:anywhere;
}

/* ---------- Lecturas y recomendaciones ---------- */
.bc-notes{display:grid; gap:14px; margin-top:18px}
.bc-note{
  background:var(--s-card); border:1px solid var(--s-line);
  border-radius:14px; padding:16px 15px;
}
.bc-note h4{
  margin:0 0 12px; font-family:var(--font-display, sans-serif); font-size:13px;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--s-ink);
}
.bc-note ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.bc-note li{
  position:relative; font-size:13px; line-height:1.5; font-weight:500;
  color:#ddd8d4; padding-left:24px;
}
.bc-note .ins li::before{
  content:""; position:absolute; left:0; top:3px; width:14px; height:14px;
  background:var(--s-good);
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat;
  --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.bc-note .rec li{padding-left:26px}
.ri{
  position:absolute; left:0; top:2px; width:16px; height:16px; background:var(--s-accent-lt);
  -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat;
}
.ri-protein{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22c4.97 0 9-4.03 9-9V7a5 5 0 0 0-9-3 5 5 0 0 0-9 3v6c0 4.97 4.03 9 9 9z'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E")}
.ri-deficit{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m19 15-5-5-4 4-3-3'/%3E%3C/svg%3E")}
.ri-strength{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6v12'/%3E%3Cpath d='M18 6v12'/%3E%3Cpath d='M3 9v6'/%3E%3Cpath d='M21 9v6'/%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
.ri-cardio{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-6 4 12 2-6h6'/%3E%3C/svg%3E")}
.ri-rest{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E")}

/* ---------- Cierre ---------- */
.bc-quote{
  margin:20px 0 0; text-align:center; font-family:var(--font-display, sans-serif);
  font-size:clamp(15px, 4vw, 19px); font-weight:800; letter-spacing:-.01em;
  text-transform:uppercase; line-height:1.3; color:var(--s-ink);
}
.bc-foot{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--s-line);
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;
  font-size:11px; font-weight:600; color:var(--s-ink-2); text-align:center;
}

/* ---------- Escritorio ---------- */
@media (min-width:720px){
  .bc-sheet{padding:34px 32px 28px}
  .bc-compare{gap:26px; padding:28px 0 24px}
  .bc-bar{height:170px}
  .bc-notes{grid-template-columns:1fr 1fr; gap:16px}
  .bc-table tbody th{font-size:13.5px}
  .bc-table td.v{font-size:19px}
  .bc-foot{justify-content:space-between}
}

/* ---------- Impresión: la hoja debe caber en una página ---------- */
@media print{
  .bc-sheet{
    background:#fff !important; color:#1c1917 !important;
    --s-bg:#fff; --s-card:#f7f5f2; --s-ink:#1c1917; --s-ink-2:#6b6258;
    --s-line:#e7e2db; --s-accent:#c22c23; --s-accent-lt:#c22c23;
    --s-good:#1e7d38; --s-bad:#b3251c;
    border:1px solid #e7e2db; padding:18px; break-inside:avoid-page;
  }
  .bc-sheet .bc-note, .bc-sheet .bc-progress{break-inside:avoid}
  .bc-bar .mus i{color:#fff}
}