/* ============================================================================
   Views — estilos específicos de cada vista de alto nivel.
   Home, routine view, muscle map, heatmap, settings/editor, badges.
   ============================================================================ */

/* ----- HOME ----- */
.home-title{
  font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.4px;
  margin:8px 4px 12px;
  display:flex; justify-content:space-between; align-items:center;
}
.home-title a{ color:var(--accent-2); font-size:11px; cursor:pointer; text-decoration:none; }

/* Secciones del home (Fase H+):
   Hero "Hoy", grupo "Días de esta rutina", grupo "Otras rutinas". */
.home-section{ margin-bottom:22px; }
.home-section.home-hero{ margin-bottom:18px; }
.home-sec-title{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.3px;
  margin:0 4px 10px;
}
.home-sec-action{
  color:var(--accent-2); font-size:11px; font-weight:600;
  cursor:pointer; text-decoration:none;
}
.home-sec-action:hover{ text-decoration:underline; }

.home-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:560px){ .home-grid{ grid-template-columns:1fr 1fr; } }

/* ----- Banner "Hoy es {día}" (indicador inteligente, slim) ----- */
.home-today{
  width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg,rgba(255,122,47,.16),rgba(255,184,107,.05));
  border:1px solid var(--accent); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:16px; color:var(--text);
  transition:transform .1s cubic-bezier(.2,.8,.2,1);
}
.home-today:active{ transform:scale(.99); }
.home-today.is-empty{
  background:var(--panel); border-style:dashed; border-color:var(--line);
  cursor:default;
}
.home-today .ht-eyebrow{
  font-size:10px; color:var(--accent-2);
  text-transform:uppercase; letter-spacing:1.2px; font-weight:700;
  flex-shrink:0; min-width:96px;
}
.home-today.is-empty .ht-eyebrow{ color:var(--muted); }
.home-today .ht-line{ flex:1; min-width:0; }
.home-today .ht-name{ font-size:16px; font-weight:700; display:block; }
.home-today .ht-name.muted{ color:var(--muted); font-weight:600; }
.home-today .ht-sub{ font-size:11px; color:var(--muted); }
.home-today .ht-go{
  font-size:12px; font-weight:700; color:var(--accent-2); flex-shrink:0;
}

/* ----- NIVEL 1 · Tarjeta de Rutina (contenedor grande, premium) ----- */
.rutina-card{
  width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(150deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; color:var(--text);
  transition:border-color .15s, transform .1s cubic-bezier(.2,.8,.2,1);
}
.rutina-card:hover{ border-color:var(--accent); }
.rutina-card:active{ transform:scale(.99); }
.rutina-card.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,122,47,.12);
}
.rutina-card.add{
  background:transparent; border-style:dashed;
}
.rutina-card .rc-main{ flex:1; min-width:0; }
.rutina-card .rc-eyebrow{
  display:flex; align-items:center; gap:8px;
  font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.4px; font-weight:700;
  margin-bottom:5px;
}
.rutina-card .rc-badge{
  background:var(--accent); color:#1a0a00;
  border-radius:999px; padding:1px 8px;
  font-size:9px; font-weight:700; letter-spacing:.6px;
}
.rutina-card .rc-name{
  font-size:20px; font-weight:800; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rutina-card .rc-name.add{ color:var(--accent-2); font-size:17px; }
.rutina-card .rc-sub{ font-size:12px; color:var(--muted); margin-top:3px; }
.rutina-card .rc-stats{
  font-size:11px; color:var(--accent-2); margin-top:8px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.rutina-card .rc-arrow{
  flex-shrink:0; font-size:24px; color:var(--muted); line-height:1;
}

/* ----- NIVEL 2 · Cabecera del detalle de una Rutina ----- */
.rutina-detail-head{
  display:flex; align-items:center; gap:12px;
  margin:2px 0 16px;
}
.rutina-detail-head .rdh-back,
.rutina-detail-head .rdh-edit{
  flex-shrink:0; background:var(--panel-2); border:1px solid var(--line);
  color:var(--text); width:38px; height:38px; border-radius:11px;
  font-size:18px; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:transform .1s, border-color .15s;
}
.rutina-detail-head .rdh-back{ font-size:22px; }
.rutina-detail-head .rdh-back:active,
.rutina-detail-head .rdh-edit:active{ transform:scale(.92); }
.rutina-detail-head .rdh-edit:hover{ border-color:var(--accent); }
.rutina-detail-head .rdh-titles{ flex:1; min-width:0; }
.rutina-detail-head .rdh-eyebrow{
  font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.4px; font-weight:700;
}
.rutina-detail-head .rdh-name{
  font-size:21px; font-weight:800; line-height:1.15; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rutina-detail-head .rdh-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.empty.empty-soft{
  background:var(--panel); border:1px dashed var(--line);
  border-radius:var(--radius); padding:24px 18px;
  text-align:center; color:var(--muted); font-size:13px;
}
.route-btn{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; text-align:left; color:var(--text);
  cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:transform .08s, border-color .15s;
}
.route-btn:active{ transform:scale(.99); }
.route-btn:hover{ border-color:var(--accent); }
.route-btn.today{
  background:linear-gradient(135deg,rgba(255,122,47,.2),rgba(255,184,107,.05));
  border-color:var(--accent);
}
.route-btn.suggested::after{
  content:""; position:absolute; top:14px; right:14px;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px rgba(255,122,47,.2);
}
.route-btn .r-day{
  font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.2px; margin-bottom:5px;
}
.route-btn.today .r-day{ color:var(--accent-2); }
.route-btn .r-name{ font-size:17px; font-weight:700; margin-bottom:2px; }
.route-btn .r-group{ font-size:12px; color:var(--muted); }
.route-btn .r-meta{ text-align:right; font-size:11px; color:var(--muted); min-width:80px; }
.route-btn .r-meta b{ display:block; color:var(--text); font-size:13px; font-weight:600; margin-top:2px; }
.route-add{ border-style:dashed; color:var(--muted); justify-content:center; text-align:center; }
.route-add .r-name{ color:var(--accent-2); }

/* ----- ROUTINE VIEW ----- */
.route-head{ display:flex; align-items:center; gap:10px; margin:4px 0 12px; }
.route-back{
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  width:36px; height:36px; border-radius:10px; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.route-title{ flex:1; min-width:0; }
.route-title h2{ margin:0; font-size:16px; font-weight:700; }
.route-title .r-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.route-title .r-edit{
  color:var(--accent-2); cursor:pointer; text-decoration:none;
  font-weight:600; margin-left:2px;
}
.route-title .r-edit:hover{ text-decoration:underline; }
.date-input{
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  padding:8px 10px; border-radius:10px; font-size:13px;
}

/* ----- MUSCLE MAP ----- */
.muscle-wrap{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px; margin-bottom:14px;
  display:flex; gap:14px; align-items:center;
}
.muscle-svg{ flex:0 0 auto; }
.muscle-svg svg{ display:block; height:170px; width:auto; }
.muscle-svg .silhouette{ fill:#1e222b; stroke:#2a2f3a; stroke-width:.8; }
.muscle-svg .muscle{ fill:#2a2f3a; stroke:none; transition:fill .15s; }
.muscle-svg .muscle.on{ fill:var(--accent); }
.muscle-svg .muscle.on-2{ fill:var(--accent-2); }

/* ============================================================================
   Mapa de calor muscular (Análisis) — carga acumulada sobre el muñeco
   ========================================================================== */
.mh-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; margin-bottom:14px;
}
.mh-title{
  font-size:13px; font-weight:600; margin-bottom:12px;
  display:flex; justify-content:space-between; align-items:baseline;
}
.mh-title small{ color:var(--muted); font-weight:400; font-size:11px; }
.mh-body{ display:flex; gap:14px; align-items:center; }
.mh-svg{ flex:0 0 auto; }
.mh-svg svg{ display:block; height:190px; width:auto; }
.mh-svg .silhouette{ fill:#13161c; stroke:var(--line); stroke-width:.8; }
/* Sin carga: regiones tenues; el JS sube fill/opacity con la carga.
   Transición suave para un acabado premium. */
.mh-svg .muscle{
  stroke:none;
  transition:fill .5s cubic-bezier(.2,.8,.2,1), opacity .5s cubic-bezier(.2,.8,.2,1);
}
.mh-side{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.mh-legend{
  display:flex; align-items:center; gap:8px;
  font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px;
}
.mh-legend .mh-bar{
  flex:1; height:8px; border-radius:999px;
  background:linear-gradient(90deg,#242a36,#ff7a2f 55%,#ffd24a);
}
.mh-top{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.mh-top li{
  display:grid; grid-template-columns:1fr 56px auto; gap:8px; align-items:center;
  font-size:12px;
}
.mh-top .mt-name{ color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mh-top .mt-bar{
  height:6px; border-radius:999px; background:var(--neutral-bg); overflow:hidden;
}
.mh-top .mt-bar i{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.mh-top .mt-val{
  font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent-2);
  text-align:right; min-width:26px;
}
.mh-top .mh-empty{
  display:block; color:var(--muted); font-size:12px; text-align:center;
  padding:14px 4px;
}
@media(max-width:420px){
  .mh-body{ flex-direction:column; align-items:stretch; }
  .mh-svg{ align-self:center; }
}
.muscle-legend{ flex:1; min-width:0; font-size:11px; }
.muscle-legend h4{
  margin:0 0 6px; font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1px; font-weight:600;
}
.muscle-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.m-tag{
  background:var(--accent-bg); color:var(--accent-2);
  font-size:11px; font-weight:600; padding:3px 8px;
  border-radius:999px; letter-spacing:.2px;
}

/* ----- ANÁLISIS · título de sección + KPIs sutiles ----- */
.an-h4,
.hist-h4{
  margin:6px 4px 10px; font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.4px; font-weight:600;
  display:flex; align-items:baseline; gap:8px;
}
.hist-h4 small{
  text-transform:none; letter-spacing:0; font-weight:500;
  color:var(--muted); opacity:.7; font-size:11px;
}

/* Tab bar del Historial (segmented control estilo iOS) */
.hist-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:12px; padding:3px; margin:6px 0 14px;
}
.ht-tab{
  background:transparent; border:0; color:var(--muted);
  font-size:13px; font-weight:600; cursor:pointer;
  padding:9px 8px; border-radius:9px; line-height:1.1;
  transition:background .15s, color .15s, transform .1s;
}
.ht-tab:active{ transform:scale(.98); }
.ht-tab.on{
  background:var(--panel); color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.hist-pane.hidden{ display:none; }

/* ----- HISTORIAL · Bitácora (lista cronológica estilo Excel) ----- */
.bit-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:11px 13px; margin-bottom:10px;
}
.bit-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--line);
}
.bit-date{
  font-size:14px; font-weight:700; color:var(--accent-2);
  letter-spacing:.2px;
}
.bit-routine{
  font-size:11px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:50%;
}
.bit-rows{ display:flex; flex-direction:column; gap:6px; }
.bit-row{
  /* minmax(0, 1fr) en vez de 1fr: sin el min-content de 0, el grid se niega
     a encoger las columnas por debajo del ancho intrínseco del contenido y
     el ellipsis no se aplica correctamente dentro del grid track. */
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:8px; align-items:baseline;
  padding:6px 0; cursor:pointer;
  border-bottom:1px dashed transparent;
  transition:background .12s;
}
.bit-row:hover{ background:rgba(255,255,255,.02); }
.bit-row:not(:last-child){ border-bottom-color:rgba(255,255,255,.04); }
.bit-name{
  font-size:13px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0;  /* requerido para que ellipsis funcione dentro del grid */
}
.bit-target{
  font-size:10px; color:var(--muted);
  font-variant-numeric:tabular-nums;
  background:var(--neutral-bg);
  border-radius:6px; padding:2px 6px;
  align-self:center;
}
.bit-vals{
  font-size:12px; color:var(--accent-2);
  font-variant-numeric:tabular-nums;
  text-align:right;
  /* === Las repeticiones NUNCA se ocultan tras "..." ===
     Si el string de series es más ancho que su columna, hace wrap elegante
     a una 2.ª línea (alineada a la derecha igual). Apple HIG: la información
     crítica del workout debe ser visible sin tap extra.
     - overflow-wrap:break-word → corta en separadores naturales (espacio, /, ·)
     - hyphens:none → sin guiones forzados a media palabra (estamos con números)
     - line-height:1.5 → respiración cuando hay 2 líneas */
  white-space:normal;
  overflow-wrap:break-word;
  hyphens:none;
  line-height:1.5;
}
/* Variante UNILATERAL: dos líneas con etiqueta I / D pegada al dato.
   El nombre del ejercicio pasa a permitir wrap para no recortar con
   ellipsis cuando el split toma una segunda línea. */
.bit-temp-tag{
  display:inline-block; margin-left:6px;
  font-size:9px; font-weight:700; letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--accent-2); background:var(--accent-bg);
  border-radius:999px; padding:1px 6px; vertical-align:middle;
}
.bit-row.split .bit-name{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.25;
}
.bit-vals-split{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  line-height:1.4;
  text-align:right;
  white-space:normal;
  overflow-wrap:break-word;
}
.bit-vals-split .bv-side{
  display:flex; align-items:baseline; gap:6px;
  justify-content:flex-end;
  flex-wrap:wrap;
  max-width:100%;
}
.bit-vals-split .bv-tag{
  font-size:10px; font-weight:800; letter-spacing:.4px;
  color:var(--text);
  background:var(--neutral-bg);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 5px;
  flex:0 0 auto;
}
.bit-vals-split .bv-data{
  color:var(--accent-2);
  text-align:right;
}
.bit-more{
  width:100%; margin:8px 0 16px;
}

/* ----- HOME · Pendientes esta semana ----- */
.pend-list{ display:flex; flex-direction:column; gap:6px; }
.pend-row{
  width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(255,184,107,.06);
  border:1px solid rgba(255,184,107,.25);
  border-left:3px solid var(--accent-2);
  border-radius:var(--radius-sm); padding:11px 14px;
  color:var(--text);
  transition:border-color .15s, transform .1s;
}
.pend-row:hover{ border-color:var(--accent); }
.pend-row:active{ transform:scale(.99); }
.pend-main{ min-width:0; flex:1; }
.pend-name{
  font-weight:700; font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pend-sub{
  font-size:11px; color:var(--muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pend-arrow{ color:var(--accent-2); font-size:20px; flex-shrink:0; line-height:1; }
/* ============================================================================
   BENTO Dashboard de Progresión (mosaico asimétrico estilo Apple/Meta)
   - Hero: full width arriba (mayor +Δ 1RM con sparkline)
   - Volumen + Consistencia: dos tarjetas medianas en fila
   - Enfoque: full width abajo
   ============================================================================ */
.an-bento{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:6px 0 20px;
}

/* ============================================================================
   Weekly Overview · comparativa semana actual vs anterior
   ----------------------------------------------------------------------------
   Tarjeta premium arriba del Bento Bento. Tres métricas (Volumen, Series,
   Intensidad) con micro-badges de delta vs la semana anterior. Banner
   motivacional cuando el delta de volumen > 5%.
   ============================================================================ */
.an-weekly {
  margin: 8px 0 14px;
}
.an-weekly-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: linear-gradient(90deg,
    rgba(255,107,0,.16) 0%,
    rgba(255,164,92,.08) 100%);
  border: 1px solid rgba(255,107,0,.35);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.1px;
  animation: anw-banner-in .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes anw-banner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anw-banner-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.anw-banner-text { flex: 1; line-height: 1.3; }
.anw-banner-text b { color: var(--accent); font-weight: 800; }

.an-weekly-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 4px 8px;
}
.an-weekly-eyebrow {
  font-size: 10px; font-weight: 800;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: 1.6px;
}
.an-weekly-range {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}

.an-weekly-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.an-w-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 12px 11px;
  min-width: 0;
}
.an-w-label {
  font-size: 10px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-w-value {
  margin-top: 4px;
  font-size: 20px; font-weight: 800;
  color: var(--text);
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-w-value .anw-unit {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  margin-left: 2px;
  letter-spacing: 0;
}
.an-w-delta {
  margin-top: 7px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  background: var(--neutral-bg);
  color: var(--muted);
  border: 1px solid var(--line);
}
.an-w-delta.up {
  background: rgba(52,211,153,.12);
  color: var(--good);
  border-color: rgba(52,211,153,.28);
}
.an-w-delta.down {
  background: rgba(248,113,113,.10);
  color: #f87171;
  border-color: rgba(248,113,113,.25);
}
.an-w-delta.flat {
  /* neutral default state */
}
.an-w-delta-arrow { font-size: 9px; line-height: 1; }
.an-w-footer {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.2px;
}
.an-w-empty {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.1px;
}
@media (max-width: 380px) {
  .an-weekly-grid { gap: 6px; }
  .an-w-card { padding: 10px 8px 9px; }
  .an-w-value { font-size: 17px; }
}
.bento{
  position:relative; overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:16px; min-width:0;
  transition:border-color .15s, transform .12s;
}
.bento-hero, .bento-focus{ grid-column:1 / -1; }     /* full width */

.bento .bento-label{
  font-size:9px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.2px; font-weight:700;
}
.bento .bento-val{
  font-size:24px; font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums; line-height:1.05; margin-top:6px;
  letter-spacing:-.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bento .bento-unit{
  font-size:11px; font-weight:600; color:var(--muted);
  letter-spacing:.2px;
}
.bento .bento-sub{
  font-size:11px; color:var(--muted); margin-top:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bento-empty .bento-empty-msg{
  font-size:13px; color:var(--muted); margin-top:8px;
  line-height:1.4; white-space:normal;
}

/* ─ Hero ─ */
.bento-hero{
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,122,47,.10), transparent 60%),
    linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-color:rgba(255,122,47,.18);
  padding:18px;
}
.bento-hero .bento-val{ font-size:42px; }
.bento-hero .bento-unit{ font-size:14px; }
.bento-hero .bento-ex{
  font-size:15px; font-weight:600; color:var(--text);
  margin-top:6px; opacity:.88;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bento-pro{
  position:absolute; top:14px; right:14px;
  font-size:9px; font-weight:800; letter-spacing:.8px;
  text-transform:uppercase;
  background:linear-gradient(135deg, var(--good), #16a34a);
  color:#04210f; padding:4px 10px; border-radius:999px;
  box-shadow:0 2px 8px rgba(34,197,94,.25);
}
.bento-spark-wrap{ margin-top:14px; height:44px; }
.bento-spark{ display:block; width:100%; height:100%; }

/* ─ Volumen ─ */
.bento-vol .bento-val{ font-size:26px; }
.bento-trend{ font-weight:800; font-variant-numeric:tabular-nums; }
.bento-trend.up{ color:var(--good); }
.bento-trend.down{ color:var(--bad); }

/* ─ Consistencia ─ */
.bento-cons .bento-val{ font-size:30px; }
.bento-dots{
  display:flex; gap:5px; margin-top:10px;
  align-items:center;
}
.bento-dots span{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.07);
  transition:background .12s, transform .12s;
}
.bento-dots span.on{
  background:var(--accent);
  box-shadow:0 0 6px rgba(255,122,47,.55);
}

/* ─ Enfoque ─ */
.bento-focus{
  background:
    linear-gradient(135deg, rgba(255,184,107,.07), transparent 60%),
    var(--panel);
  border-color:rgba(255,184,107,.22);
}
.bento-focus-head{
  display:flex; align-items:baseline; justify-content:space-between;
}
.bento-focus-pct{
  font-size:13px; font-weight:800; color:var(--accent-2);
  font-variant-numeric:tabular-nums;
}
.bento-focus-name{
  font-size:28px; font-weight:800; color:var(--text);
  margin-top:4px; letter-spacing:-.4px;
}
.bento-coach{
  white-space:normal; line-height:1.4; margin-top:6px;
  color:var(--muted);
}

/* Móvil estrecho */
@media(max-width:380px){
  .bento{ border-radius:16px; padding:14px; }
  .bento-hero .bento-val{ font-size:36px; }
  .bento-focus-name{ font-size:24px; }
}

/* ----- HEATMAP de frecuencia (estilo widget iOS · Apple-like) ----- */
.heatmap{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; margin-bottom:14px;
}
.heatmap .hm-title{
  font-size:14px; font-weight:700; margin-bottom:12px;
  display:flex; justify-content:space-between; align-items:baseline;
  letter-spacing:.2px;
}
.heatmap .hm-title small{ color:var(--muted); font-weight:500; font-size:11px; }

/* Cuerpo: cabecera de meses arriba + fila (días-letra + grid) */
.heatmap .hm-body{ display:flex; flex-direction:column; gap:4px; }

.heatmap .hm-months{
  /* 1 col vacía a la izquierda (alineada con .hm-days) + 12 cols (1 por semana) */
  display:grid; grid-template-columns:14px repeat(12, 1fr); gap:3px;
  padding-left:4px; min-height:11px;
}
.heatmap .hm-months span{
  font-size:9px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.8px; font-weight:600;
}

.heatmap .hm-row{ display:grid; grid-template-columns:14px 1fr; gap:4px; }
.heatmap .hm-days{
  display:grid; grid-template-rows:repeat(7, 1fr); gap:3px;
}
.heatmap .hm-days span{
  font-size:9px; color:var(--muted); font-weight:600;
  letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center;
}

.heatmap .hm-grid{
  display:grid; grid-template-rows:repeat(7, 14px);
  grid-template-columns:repeat(12, 1fr);
  grid-auto-flow:column; gap:3px;
}
/* Días sin entrenar: gris muy sutil que se funde con el panel */
.heatmap .hm-cell{
  background:rgba(255,255,255,.035);
  border-radius:4px; cursor:pointer;
  transition:background .15s, transform .12s;
}
.heatmap .hm-cell:hover{ transform:scale(1.18); }
.heatmap .hm-cell.future{ opacity:.4; pointer-events:none; }
/* Gradiente naranja por nº de ejercicios distintos ese día (1 → 4+) */
.heatmap .hm-cell.l1{ background:rgba(255,122,47,.22); }
.heatmap .hm-cell.l2{ background:rgba(255,122,47,.45); }
.heatmap .hm-cell.l3{ background:rgba(255,122,47,.70); }
.heatmap .hm-cell.l4{
  background:rgba(255,122,47,.95);
  box-shadow:0 0 0 1px rgba(255,122,47,.4);
}

/* Leyenda minimalista alineada a la derecha */
.heatmap .hm-legend{
  display:flex; align-items:center; justify-content:flex-end;
  gap:4px; margin-top:12px;
  font-size:9px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1px; font-weight:500;
}
.heatmap .hm-legend i{
  width:11px; height:11px; border-radius:3px;
  background:rgba(255,255,255,.035);
}
.heatmap .hm-legend i.l1{ background:rgba(255,122,47,.22); }
.heatmap .hm-legend i.l2{ background:rgba(255,122,47,.45); }
.heatmap .hm-legend i.l3{ background:rgba(255,122,47,.70); }
.heatmap .hm-legend i.l4{ background:rgba(255,122,47,.95); }
.heatmap .hm-legend span:first-child{ margin-right:3px; }
.heatmap .hm-legend span:last-child{ margin-left:3px; }

/* ----- SETTINGS — menu rows ----- */
.menu-row{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:13px 14px;
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; margin-bottom:8px;
}
.menu-row:hover{ border-color:var(--accent); }
.menu-row .mr-title{ font-weight:600; font-size:14px; }
.menu-row .mr-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.menu-row .mr-arrow{ color:var(--muted); font-size:18px; }

/* Resumen colapsado de metadatos en el editor de Día (paso 1 plegado) */
.re-summary{
  width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:14px;
  color:var(--text); transition:border-color .15s;
}
.re-summary:hover{ border-color:var(--accent); }
.re-summary:active{ transform:scale(.99); }
.re-summary .rs-name{ font-weight:700; font-size:15px; }
.re-summary .rs-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.re-summary .rs-edit{
  flex-shrink:0; font-size:11px; font-weight:700; color:var(--accent-2);
}

/* ----- Day chips (multi-select) -----
   Grid 7-col para que los 7 días siempre quepan en una fila aunque la
   pantalla sea estrecha (iPhone SE). Cada chip ocupa lo mismo. */
.day-chips{
  display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px; width:100%;
}
.day-chip{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:8px 4px; font-size:12px; cursor:pointer;
  color:var(--muted); text-transform:uppercase; letter-spacing:.4px;
  font-weight:600; text-align:center;
  min-width:0;  /* permite que se compriman */
}
.day-chip.on{ background:var(--accent-bg); border-color:var(--accent); color:var(--accent-2); }

/* Variante mini: usada dentro del editor por-ejercicio. Mantiene flex+wrap
   porque la lista de días puede tener menos de 7 entradas allí. */
.day-chip.mini{ padding:3px 7px; font-size:10px; }
.ed-item .ed-days{
  display:flex; gap:4px; flex-wrap:wrap;
}

/* ----- Routine editor list ----- */
.ed-list{ display:flex; flex-direction:column; gap:6px; }
.ed-item{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px;
  display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center;
}
.ed-item .ed-handle{ display:flex; flex-direction:column; gap:4px; align-self:stretch; justify-content:center; }
.ed-item .ed-handle button{
  background:var(--neutral-bg); border:1px solid var(--line); color:var(--text);
  width:32px; height:28px; border-radius:6px; font-size:14px;
  cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, border-color .12s;
}
.ed-item .ed-handle button:hover{ background:var(--accent-bg); border-color:var(--accent); color:var(--accent-2); }
.ed-item .ed-handle button:active{ transform:scale(.92); }
.ed-item .ed-handle button:disabled{ opacity:.25; cursor:not-allowed; }
.ed-item .ed-handle button:disabled:hover{ background:var(--neutral-bg); border-color:var(--line); color:var(--text); }
.ed-item .ed-body{ min-width:0; }
.ed-item .ed-name{
  font-weight:600; font-size:14px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.ed-item .ed-group{
  font-size:10px; color:var(--accent-2);
  background:var(--accent-bg); border-radius:999px; padding:2px 8px;
  font-weight:600; letter-spacing:.2px;
}

/* Campos editables grandes (Series / Reps / Descanso) con label encima. */
.ed-item .ed-fields{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:6px; margin-top:8px;
}
.ed-item .ed-f{
  display:flex; flex-direction:column; gap:2px;
  background:var(--neutral-bg); border:1px solid var(--line);
  border-radius:8px; padding:5px 8px; min-width:0;
  transition:border-color .12s, background .12s;
}
.ed-item .ed-f:focus-within{
  border-color:var(--accent); background:var(--panel);
}
.ed-item .ed-lab{
  font-size:9px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.6px; font-weight:600;
}
.ed-item .ed-f input{
  background:transparent; border:0; outline:none;
  color:var(--text); font-size:14px; font-weight:700;
  padding:0; width:100%; min-width:0; text-align:left;
  font-variant-numeric:tabular-nums; -webkit-appearance:none;
}
.ed-item .ed-f input::placeholder{ color:var(--muted); font-weight:500; }
.ed-item .ed-days{ margin-top:6px; display:flex; gap:4px; flex-wrap:wrap; }
.ed-item .ed-actions{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  align-self:start;
}
.ed-item .ed-settings{
  background:transparent; border:1px solid var(--line);
  color:var(--accent-2); cursor:pointer;
  width:26px; height:26px; border-radius:8px; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, border-color .12s, color .12s, transform .1s;
}
.ed-item .ed-settings:hover{
  background:var(--accent-bg); border-color:var(--accent); color:var(--accent);
}
.ed-item .ed-settings:active{ transform:scale(.92); }
.ed-item .ed-del{
  background:transparent; border:0; color:var(--bad); cursor:pointer;
  font-size:18px; width:26px; height:26px; border-radius:6px;
}
.ed-item .ed-del:hover{ background:var(--bad-bg); }
/* Tags de overrides guardados en el ejercicio (Asistido / Unilateral / etc).
   Pequeños, naranja accent, alineados junto a .ed-group. */
.ed-item .ed-extag{
  display:inline-flex; align-items:center;
  font-size:9.5px; font-weight:700; letter-spacing:.3px;
  color:var(--accent-2);
  background:var(--accent-bg);
  border-radius:999px;
  padding:2px 7px;
  text-transform:uppercase;
}

/* ----- Bi-serie (superset) en el editor de Día -----
   Diseño: entre cada par de tarjetas consecutivas vive un CONECTOR
   horizontal con dos líneas y un botón central "🔗 Unir como bi-serie".
   Al activarse, el conector se vuelve naranja sólido y las dos tarjetas
   adyacentes se fusionan (sin esquinas redondeadas en el borde común).
*/
.ed-ss-badge{
  display:inline-flex; align-items:center;
  font-size:10px; font-weight:700; color:var(--accent-2);
  background:var(--accent-bg); border-radius:999px;
  padding:2px 8px; letter-spacing:.2px;
}
.ed-ss-connector{
  display:flex; align-items:center; gap:10px;
  /* Cancela el gap:6 del padre .ed-list por ambos lados para que el
     conector quede pegado a las tarjetas que une (parece una cuerda
     entre ellas, no un elemento flotante). */
  margin:-6px 0;
  padding:2px 0;
  min-height:34px;
}
.ed-ss-connector .ssc-line{
  flex:1 1 0; height:0;
  border-top:1px dashed var(--line);
  transition:border-color .15s;
}
.ed-ss-connector .ssc-btn{
  background:var(--neutral-bg); border:1px dashed var(--line);
  color:var(--muted); cursor:pointer;
  padding:7px 14px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.3px;
  white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s, transform .1s;
}
.ed-ss-connector .ssc-btn:hover{
  background:var(--accent-bg); border-color:var(--accent); color:var(--accent-2);
}
.ed-ss-connector .ssc-btn:active{ transform:scale(.96); }
.ed-ss-connector.linked .ssc-line{
  border-top:2px solid var(--accent);
}
.ed-ss-connector.linked .ssc-btn{
  background:var(--accent); border-color:var(--accent); border-style:solid;
  color:#1a0a00;
  box-shadow:0 0 0 1px rgba(255,107,0,.35);
}
.ed-ss-connector.linked .ssc-btn:hover{
  filter:brightness(1.05);
}

/* Pareja: el primer ítem pierde el borde inferior, el segundo el superior,
   y un acento naranja a la izquierda los une visualmente. El conector
   entre medias arrastra los gaps con margin negativo (arriba). */
.ed-item.is-ss-first{
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  border-bottom-color:transparent;
  box-shadow:inset 3px 0 0 var(--accent);
}
.ed-item.is-ss-second{
  border-top-left-radius:0; border-top-right-radius:0;
  border-top:1px dashed var(--accent);
  box-shadow:inset 3px 0 0 var(--accent);
}

/* ----- Library list rows ----- */
.lib-row{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:6px;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.lib-row .lr-name{ font-weight:600; font-size:14px; }
.lib-row .lr-group{ font-size:11px; color:var(--muted); }
.lib-row .lr-actions{ display:flex; gap:4px; }
.lib-row .lr-actions button{
  background:var(--neutral-bg); border:0; color:var(--text);
  width:30px; height:30px; border-radius:6px; cursor:pointer; font-size:13px;
}

/* ----- Picker (modal de selección) ----- */
.picker-search{ width:100%; margin-bottom:10px; }
.picker-row{
  padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--panel-2); border:1px solid var(--line);
  margin-bottom:6px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
}
.picker-row:hover{ border-color:var(--accent); }

/* Filtros del picker: dos filas de chips scrollables (grupo · equipamiento) */
.pick-filters{ display:flex; flex-direction:column; gap:4px; margin:10px 0 2px; }
.pick-flabel{
  font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.8px;
}
.pick-frow{
  display:flex; gap:6px; overflow-x:auto; padding:2px 0 6px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.pick-frow::-webkit-scrollbar{ display:none; }
.pick-frow .day-chip{
  flex:0 0 auto; padding:7px 12px; text-transform:none; letter-spacing:0;
}
.pick-empty{
  text-align:center; color:var(--muted);
  padding:24px 12px; font-size:13px;
}
.picker-row .lr-name .badge{
  background:var(--good-bg); color:var(--good);
  border:1px solid var(--good-border); margin-left:6px;
  vertical-align:middle;
}

/* ----- Stalled ----- */
.stalled-row{
  border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:6px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--warn-bg); border:1px solid var(--warn);
}
.stalled-row .sr-name{ font-weight:600; font-size:13px; }
.stalled-row .sr-info{ font-size:11px; color:var(--muted); }

/* ----- Segmented control (reservado para futuro) ----- */
.seg{
  display:flex; background:var(--panel-2); border:1px solid var(--line);
  border-radius:10px; padding:3px; margin-bottom:12px;
}
.seg button{
  flex:1; background:transparent; border:0; color:var(--muted);
  padding:8px 10px; border-radius:8px; font-size:12px;
  cursor:pointer; font-weight:600;
}
.seg button.on{ background:var(--panel); color:var(--text); }

.badge{
  background:var(--accent); color:#1a0a00;
  border-radius:999px; padding:2px 8px;
  font-size:11px; font-weight:700;
}

/* ============================================================================
   FASE E — Workout activo
   ========================================================================== */

/* Chip "entrenando" en el header */
.active-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,122,47,.18); color:var(--accent-2);
  border:1px solid var(--accent); border-radius:999px;
  padding:2px 9px 2px 7px; font-size:10px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase;
  cursor:pointer; margin-top:4px;
}
.active-chip .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1) }
  50%    { opacity:.35; transform:scale(.85) }
}

/* Botones de inicio/fin de workout en la cabecera de rutina */
.workout-actions{
  display:flex; gap:8px; margin-bottom:14px;
}
.workout-actions .btn{ padding:11px 14px; font-size:13px; }
.workout-actions .info{
  flex:1; min-width:0;
  background:rgba(255,122,47,.10); border:1px solid var(--accent);
  border-radius:var(--radius-sm); padding:9px 12px;
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--accent-2);
}
.workout-actions .info b{ color:var(--text); font-variant-numeric:tabular-nums; }
.workout-actions .info .dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  animation:pulse 1.4s ease-in-out infinite; flex-shrink:0;
}

/* Sliders de readiness (5 dots por fila) */
.readiness{
  display:flex; flex-direction:column; gap:12px; margin-top:6px;
}
.rd-row{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px;
}
.rd-label{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:8px;
}
.rd-name{ font-size:13px; font-weight:600; }
.rd-desc{ font-size:11px; color:var(--muted); }
.rd-dots{ display:flex; gap:8px; justify-content:space-between; }
.rd-dot{
  flex:1; height:32px; max-width:44px;
  background:var(--neutral-bg); border:1px solid var(--line);
  border-radius:8px; cursor:pointer; padding:0;
  transition:transform .08s, background .12s, border-color .12s;
}
.rd-dot.on{ background:var(--accent); border-color:var(--accent); }
.rd-dot:active{ transform:scale(.92); }

/* Resumen de workout */
.summary-hero{
  text-align:center; padding:4px 0 16px;
}
.summary-hero .duration{
  font-size:24px; font-weight:700; font-variant-numeric:tabular-nums;
  letter-spacing:.8px;
  color: var(--text-2);
}
.summary-hero .sub{
  font-size:12px; color:var(--muted); margin-top:4px;
  letter-spacing:.3px;
}

/* === SUMMARY CHEER · "¡BRUTAL!" hero === */
.summary-cheer{
  font-size: clamp(40px, 13vw, 70px);
  font-weight: 900;
  letter-spacing: -1.5px;
  color: var(--accent);
  text-transform: uppercase;
  text-align: center;
  line-height: 0.92;
  margin: 4px 0 10px;
  text-shadow:
    0 4px 28px rgba(255,107,0,.45),
    0 2px 0 rgba(0,0,0,.18);
  animation: cheer-pop .55s cubic-bezier(.18, 1.6, .4, 1) both;
  /* Wrap solo en límite de palabras para que "ENTRENAMIENTO COMPLETADO"
     se parta de forma natural si no cabe en una línea. */
  word-break: keep-all;
  hyphens: manual;
}
/* Variante para mensajes largos: ajusta el font-size hacia abajo para
   que "¡ENTRENAMIENTO COMPLETADO!" mantenga impacto sin desbordar
   en iPhone SE en portrait. */
.summary-cheer.long {
  font-size: clamp(26px, 8.5vw, 46px);
  letter-spacing: -0.6px;
}
@keyframes cheer-pop {
  from { opacity: 0; transform: scale(.7) translateY(8px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Honor reduced-motion: el cheer aparece sin overshoot. */
@media (prefers-reduced-motion: reduce) {
  .summary-cheer {
    animation: none;
    text-shadow: 0 2px 0 rgba(0,0,0,.18);
  }
}

.summary-stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
  margin-bottom:14px;
}
.summary-pr{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#1a0a00; border-radius:var(--radius-sm); padding:10px;
  text-align:center; font-weight:700; margin-bottom:14px;
}
.summary-pr small{ display:block; font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.7px; }

/* Tarjeta "sube peso" del modal post-workout */
.summary-bump{
  background:linear-gradient(135deg, var(--good-bg), rgba(34,197,94,.04));
  border:1px solid var(--good-border); border-left:4px solid var(--good);
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:14px;
}
.summary-bump .sb-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
}
.summary-bump .sb-eyebrow{
  font-size:10px; color:var(--good); font-weight:700;
  text-transform:uppercase; letter-spacing:.9px;
}
.summary-bump .sb-icon{ font-size:14px; }
.summary-bump .sb-title{
  font-size:13px; color:var(--text); font-weight:600; margin-bottom:8px;
}
.summary-bump .sb-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:5px;
}
.summary-bump .sb-list li{
  display:flex; justify-content:space-between; align-items:center; font-size:13px;
}
.summary-bump .sb-name{ font-weight:600; color:var(--text); }
.summary-bump .sb-kg{
  font-size:12px; font-weight:700; color:var(--good);
  font-variant-numeric:tabular-nums;
}

.summary-ex-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:13px;
}
.summary-ex-row:last-child{ border:0; }
.summary-ex-row .sx-name{ font-weight:600; }
.summary-ex-row .sx-detail{ color:var(--muted); font-size:11px; margin-top:2px; }
.summary-ex-row .sx-weight{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent-2); }

/* ============================================================================
   FASE F — Insights
   ========================================================================== */
.insights-block{
  display:flex; flex-direction:column; gap:8px; margin-bottom:14px;
}
.insight{
  background:var(--panel); border:1px solid var(--line);
  border-left-width:4px; border-radius:var(--radius-sm);
  padding:11px 13px; display:flex; gap:12px; align-items:flex-start;
  transition:border-color .15s;
}
.insight.clickable{ cursor:pointer; }
.insight.clickable:active{ transform:scale(.99); }
.insight-good{ border-left-color:var(--good); }
.insight-warn{ border-left-color:var(--warn); }
.insight-info{ border-left-color:var(--muted); }

.insight-icon{
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; flex-shrink:0; line-height:1;
}
.insight-good .insight-icon{ background:var(--good-bg); color:var(--good); }
.insight-warn .insight-icon{ background:var(--warn-bg); color:var(--warn); }
.insight-info .insight-icon{ background:var(--neutral-bg); color:var(--muted); }

.insight-body{ flex:1; min-width:0; }
.insight-title{ font-size:13px; font-weight:600; line-height:1.3; }
.insight-detail{ font-size:11px; color:var(--muted); margin-top:3px; line-height:1.4; }

.insights-empty{
  text-align:center; color:var(--muted); font-size:12px;
  padding:16px 12px; border:1px dashed var(--line); border-radius:var(--radius-sm);
}


/* ============================================================================
   CUERPO · Antropometría · Body Progress (Fase J·1)
   ----------------------------------------------------------------------------
   Diseño Apple Health-style: tipografía sofisticada, espacios generosos,
   secciones agrupadas con icono + título, inputs minimalistas tabulares.
   ============================================================================ */
.body-view {
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 4px 0 24px;
}

.body-head { padding: 0 4px; }
.body-h2 {
  font-size: clamp(24px, 6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.1;
}
.body-sub {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
  max-width: 540px;
  letter-spacing: 0.1px;
}

/* CTA "Registrar nueva medición" — botón hero full-width */
.body-cta {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  background: linear-gradient(135deg,
    rgba(255,107,0,.18) 0%,
    rgba(255,164,92,.10) 100%);
  border: 1px solid rgba(255,107,0,.40);
  border-radius: 18px;
  padding: 16px 18px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .12s, border-color .15s, box-shadow .18s;
  box-shadow: 0 6px 18px rgba(255,107,0,.12);
}
.body-cta:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(255,107,0,.22);
}
.body-cta:active { transform: scale(.985); }
.body-cta-plus {
  width: 38px; height: 38px;
  background: var(--accent);
  color: #1a0a00;
  border-radius: 50%;
  font-size: 22px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255,107,0,.35);
}
.body-cta-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.body-cta-text b {
  font-size: 15px; font-weight: 800;
  letter-spacing: -0.1px;
  color: var(--text);
}
.body-cta-text small {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.body-cta-chev {
  font-size: 22px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Histórico */
.body-history { display: flex; flex-direction: column; gap: 8px; }
.body-history-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 4px;
}
.bh-eyebrow {
  font-size: 11px; font-weight: 800;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: 1.8px;
}
.bh-count {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.body-history-list { display: flex; flex-direction: column; gap: 8px; }

.body-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.body-card:hover {
  border-color: rgba(255,107,0,.25);
  background: rgba(255,255,255,.02);
}
.bc-date {
  font-size: 13px; font-weight: 700;
  color: var(--accent-2);
  flex-shrink: 0;
  min-width: 88px;
  letter-spacing: 0.2px;
}
.bc-summary {
  flex: 1; min-width: 0;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.bc-chev {
  font-size: 18px;
  color: var(--muted);
  flex-shrink: 0;
}

/* Estado vacío */
.body-empty {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  color: var(--muted);
}
.be-icon { font-size: 38px; line-height: 1; margin-bottom: 10px; opacity: 0.5; }
.be-title { font-size: 15px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.be-sub {
  font-size: 12px; color: var(--muted);
  line-height: 1.55; letter-spacing: 0.1px;
  max-width: 380px; margin: 0 auto;
}

/* ============================================================================
   Modal de registro · Body Form
   ============================================================================ */
.body-modal { /* hook por si el modal necesita altura mayor */ }

.body-form {
  display: flex; flex-direction: column;
  gap: 18px;
  padding-bottom: 8px;
}
.bf-section {
  display: flex; flex-direction: column;
  gap: 8px;
}
.bf-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 2px;
}
.bf-section-icon {
  font-size: 14px;
  color: var(--accent);
  width: 18px; text-align: center;
}
.bf-section-title {
  font-size: 11px; font-weight: 800;
  color: var(--text-2);
  text-transform: uppercase; letter-spacing: 1.5px;
}

/* Fecha al principio del form */
.bf-date {
  width: 100%;
  background: var(--neutral-bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 15px; font-weight: 600;
  padding: 12px 14px;
  border-radius: 10px;
  font-family: inherit;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.bf-date:focus { border-color: var(--accent); }

/* Filas: list-style Apple — label izda, input dcha, unidad pequeña */
.bf-rows {
  background: var(--neutral-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.bf-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.bf-rows .bf-row:last-child { border-bottom: 0; }
.bf-label {
  flex: 1; min-width: 0;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf-input-wrap {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.bf-input {
  width: 76px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 15px; font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 4px 0;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}
.bf-input::placeholder {
  color: var(--muted);
  font-weight: 600;
  opacity: 0.7;
}
.bf-input::-webkit-outer-spin-button,
.bf-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.bf-input:focus { color: var(--accent); }
.bf-unit {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.2px;
  min-width: 26px;
  text-align: left;
}

/* Zonas personalizadas */
.bf-row-custom { gap: 8px; }
.bf-del {
  background: transparent;
  border: 0;
  color: var(--bad);
  font-size: 17px;
  cursor: pointer;
  padding: 0 4px;
  font-family: inherit;
}
.bf-del:hover { color: #ef4444; }

.bf-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 12px 14px;
  background: var(--neutral-bg);
  border: 1px dashed var(--line);
  border-radius: 10px;
  letter-spacing: 0.1px;
}
.bf-add-custom {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  color: var(--accent-2);
  font-size: 13px; font-weight: 700;
  padding: 11px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
  transition: background .15s, border-style .15s;
}
.bf-add-custom:hover {
  background: rgba(255,107,0,.06);
  border-style: solid;
}

/* Notas */
.bf-notes {
  width: 100%;
  background: var(--neutral-bg);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  min-height: 60px;
  transition: border-color .15s;
}
.bf-notes:focus { border-color: var(--accent); }
.bf-notes::placeholder { color: var(--muted); font-style: italic; }

/* Footer del modal */
.bf-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.bf-foot .btn { flex: 0 0 auto; }
.bf-foot .btn.danger { margin-right: auto; }

/* ============================================================================
   CUERPO · Fase J·2 · timeframe + chart + heatmap interactivo
   ============================================================================ */

/* Segmented control [1M | 3M | 6M | Todo] */
.body-timeframe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
}
.btf-chip {
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  padding: 9px 6px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.4px;
  transition: background .15s, color .15s;
}
.btf-chip:hover { color: var(--text); }
.btf-chip.on {
  background: var(--surface-3, #1f1f24);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* Tarjetas de bloque (chart, heatmap) — wrapper común */
.body-card-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 16px 14px;
}
.body-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}
.bbh-eyebrow {
  font-size: 10px; font-weight: 800;
  color: var(--accent);
  text-transform: uppercase; letter-spacing: 1.8px;
}
.bbh-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.body-block-empty {
  padding: 18px 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.1px;
  line-height: 1.55;
}

/* Chart card */
.body-chart-wrap {
  position: relative;
  height: 230px;
}
.body-chart-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* === Heatmap anatómico + tooltip === */
.body-heatmap-anchor {
  position: relative;
}
.body-heatmap-svg {
  margin: 4px auto 6px;
  max-width: 380px;
}
.body-heatmap-svg svg {
  width: 100%;
  height: auto;
  display: block;
}
/* Silueta base muted para que las zonas pintadas resalten */
.body-heatmap-svg .silhouette {
  fill: rgba(255,255,255,.03);
  stroke: rgba(255,255,255,.10);
  stroke-width: 0.6;
}
/* Hover/tap accent ring para feedback */
.body-heatmap-svg [data-region]:hover {
  filter: drop-shadow(0 0 4px rgba(255,107,0,.45));
}

/* Leyenda del heatmap */
.body-heatmap-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.bhl-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.2px;
}
.bhl-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.bhl-dot.good    { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,.4); }
.bhl-dot.bad     { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,.4); }
.bhl-dot.neutral { background: rgba(255,255,255,.20); }

/* === Tooltip flotante de zona === */
.body-tooltip {
  position: absolute;
  z-index: 30;
  min-width: 180px;
  max-width: 260px;
  background: rgba(15,17,21,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow:
    0 12px 30px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -100%) scale(.92);
  transform-origin: bottom center;
  transition: opacity .18s, transform .22s cubic-bezier(.2, 1.4, .4, 1);
  font-size: 12px;
}
.body-tooltip.on {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -100%) scale(1);
}
.body-tooltip.below {
  transform-origin: top center;
  transform: translate(-50%, 0%) scale(.92);
}
.body-tooltip.below.on {
  transform: translate(-50%, 0%) scale(1);
}
/* Flecha apuntando a la región */
.body-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px; height: 9px;
  background: rgba(15,17,21,.96);
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  transform: translateX(-50%) rotate(45deg);
}
.body-tooltip.below::after {
  bottom: auto;
  top: -5px;
  border-right: 0; border-bottom: 0;
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
}

.bt-head {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bt-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
}
.bt-name {
  flex: 1; min-width: 0;
  color: var(--text-2);
  font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bt-val {
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
}
.bt-delta {
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 5px;
  flex-shrink: 0;
}
.bt-delta.good {
  color: #34d399;
  background: rgba(52,211,153,.12);
}
.bt-delta.bad {
  color: #f87171;
  background: rgba(248,113,113,.10);
}
.bt-delta.flat {
  color: var(--muted);
  background: rgba(255,255,255,.06);
}
.bt-empty {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

@media (max-width: 380px) {
  .body-heatmap-svg { max-width: 320px; }
  .body-tooltip { min-width: 160px; max-width: 220px; }
}