/* session.css — registro de sesiones de fuerza (módulo de sesión). Prefijo de clases: .ses- */

/* ---------- Cabecera ---------- */
.ses-view .topbar h1 {
  font-size: calc(18px * var(--ts));
  line-height: 1.2;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ses-view .topbar-sub { font-size: calc(14px * var(--ts)); color: var(--text-2); }
.ses-clock { color: var(--accent); font-weight: 750; }

.ses-content { gap: 12px; }
.ses-list { display: flex; flex-direction: column; gap: 12px; }
.ses-section { margin-top: 8px; margin-bottom: -4px; color: var(--accent); }
.ses-past-banner .banner-text { font-size: calc(14px * var(--ts)); }

/* ---------- Superseries / circuitos ---------- */
.ses-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 10px;
  border-left: 3px solid var(--info);
  border-radius: 2px;
}
.ses-group-head { font-size: calc(13px * var(--ts)); font-weight: 650; color: var(--muted); padding: 0 2px; }
.ses-group-kind { color: var(--info); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Sesiones largas (ronda 8, H): lo terminado, plegado en una línea ----------
   Un ejercicio suelto o un grupo entero terminados se pliegan (views/session.js applyFolds); la línea entera es el
   botón de desplegar (44 px). El nombre puede ir en dos líneas: nunca «…». */
.ses-fold {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  -webkit-tap-highlight-color: transparent;
}
.ses-fold.is-pressed { background: var(--surface-2); }
/* Nombre y resumen en una línea si caben; si no, el resumen baja (nunca «…» ni el chevron solo en otra línea) */
.ses-fold-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.ses-fold-name { min-width: 0; overflow-wrap: anywhere; }
.ses-fold-meta { flex: none; font-size: calc(15px * var(--ts)); font-weight: 650; color: var(--muted); }
.ses-fold-chev { flex: none; display: inline-flex; color: var(--muted); }
.ses-fold .ses-done-mark { flex: none; }
.ses-card-folded { padding: calc(8px * var(--ts)) 12px; }
.ses-card-folded .ses-name { font-size: calc(17px * var(--ts)); font-weight: 720; }
/* Grupo: la cabecera (abierto) o la línea entera (plegado) es el botón; su texto fluye como una frase */
.ses-fold-group { font-size: calc(14px * var(--ts)); font-weight: 650; color: var(--muted); padding: 0 2px; }
.ses-fold-group .ses-fold-text { display: block; overflow-wrap: break-word; }
.ses-fold-group .ses-done-mark { display: inline-flex; vertical-align: -3px; }
.ses-group-head:has(.ses-fold) { padding: 0; }
.ses-group-folded { padding-left: 10px; }
/* En curso: «2/4» discreto en la cabecera (sin sumar altura) */
.ses-prog { flex: none; font-size: calc(14px * var(--ts)); font-weight: 700; color: var(--text-2); padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
/* Con texto grande, el resumen («3 series») baja a su propia línea */
html.text-large .ses-card-folded .ses-fold-meta { flex-basis: 100%; }

/* ---------- Tarjeta de ejercicio ---------- */
.ses-card { gap: 10px; padding: 12px 12px 12px 14px; scroll-margin-top: calc(var(--topbar-h, calc(var(--sat) + 68px)) + 8px); }
.ses-card-done { border-color: rgba(74, 222, 128, 0.35); }
.ses-card-head { display: flex; align-items: center; gap: 8px; margin-right: -6px; }
.ses-name { flex: 1; min-width: 0; font-size: calc(18px * var(--ts)); font-weight: 780; line-height: 1.25; overflow-wrap: anywhere; }
.ses-label {
  flex: none;
  min-width: 34px;
  padding: 3px 7px;
  border-radius: 8px;
  background: var(--info-soft);
  color: var(--info);
  font-weight: 800;
  font-size: calc(14px * var(--ts));
  text-align: center;
}
.ses-done-mark { flex: none; color: var(--ok); display: inline-flex; }
.ses-more { flex: none; color: var(--text-2); }

.ses-alts { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ses-alts-icon { flex: none; font-size: calc(18px * var(--ts)); color: var(--muted); }
.ses-alt-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; min-width: 0; padding: 2px 0; }
.ses-alt-chips::-webkit-scrollbar { display: none; }
.ses-alt-chips .chip { min-height: 44px; font-size: calc(15px * var(--ts)); }

.ses-target { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: calc(15px * var(--ts)); color: var(--text-2); }
.ses-target-txt { font-weight: 700; color: var(--text); }
.ses-tnote { color: var(--muted); }
.ses-enote { font-size: calc(15px * var(--ts)); color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 6px 10px; overflow-wrap: anywhere; }

/* ---------- Calentamiento sugerido ----------
   Plegado es un enlace discreto a la derecha de «+ Serie» (misma fila: no suma altura ni mueve «Registrar»;
   si no cabe, pasa a su propia línea, también al final de la tarjeta). Abierto, un panel debajo. */
.ses-warm-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0 -6px 0 auto;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: calc(14px * var(--ts));
  font-weight: 650;
  white-space: nowrap;
}
.ses-warm-toggle.is-pressed { background: var(--surface-2); }
.ses-warm-chev { display: inline-block; font-size: calc(13px * var(--ts)); transition: transform 0.2s ease; }
.ses-warm-toggle[aria-expanded="true"] { color: var(--text-2); }
.ses-warm-toggle[aria-expanded="true"] .ses-warm-chev { transform: rotate(90deg); }
.ses-warmup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 8px 12px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  background: var(--surface-2);
}
.ses-warm-for { margin: 0; font-size: calc(13px * var(--ts)); color: var(--muted); }
.ses-warm-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ses-warm-step { font-size: calc(16px * var(--ts)); font-weight: 650; color: var(--text); }
.ses-warm-pct { display: inline-block; min-width: 3.1em; color: var(--warn); font-weight: 750; }
.ses-warm-add { min-height: 44px; margin-top: 2px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .ses-warm-chev { transition: none; }
}

/* «Última vez»: lo que más se mira entre series (docs/PULIDO.md §10) → la etiqueta pequeña y las series grandes */
.ses-last { line-height: 1.3; color: var(--text-2); overflow-wrap: anywhere; }
.ses-last-label { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ses-last-date { font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
.ses-last-sets { font-size: calc(16px * var(--ts)); font-weight: 750; color: var(--text); }
.ses-last-sets .ses-warm { font-weight: 500; color: var(--text-2); }
/* Cada serie entera en su línea: el salto, solo en los « · » */
.ses-last-sets > span { white-space: nowrap; }
.ses-last-none { font-size: var(--fs-md); color: var(--muted); font-style: italic; }
/* Siguiente paso: discreto (no es una orden), junto al objetivo; «Sube a …» con el color de progreso */
.ses-next { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: var(--text-2); }
.ses-next .icon { flex: none; color: var(--muted); }
.ses-next[data-kind="up"] { color: var(--text); font-weight: 650; }
.ses-next[data-kind="up"] .icon { color: var(--ok); }
/* Ronda 8 (B4): «Estancado · revisar»: neutro (no es una alerta) y toda la línea es el enlace al progreso del
   ejercicio. Objetivo táctil de 44 px sin sumar altura: relleno vertical compensado con margen negativo */
.ses-next-btn { appearance: none; background: none; border: 0; padding: 14px 0; margin: -14px 0; font-family: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ses-next-btn > span { min-width: 0; }
.ses-next-act { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.ses-warm { color: var(--muted); font-weight: 500; }

/* ---------- Filas de series ---------- */
.ses-sets { display: flex; flex-direction: column; gap: 6px; }
.ses-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
}
.ses-row.is-pressed { background: var(--surface-3); }
.ses-row-num {
  flex: none;
  width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-3);
  font-weight: 800;
  font-size: calc(15px * var(--ts));
  color: var(--text-2);
}
.ses-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ses-row-val { font-size: calc(18px * var(--ts)); font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ses-row-note { font-size: calc(13px * var(--ts)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ses-row-rir { flex: none; font-size: calc(15px * var(--ts)); font-weight: 700; color: var(--text-2); }
.ses-row-type { flex: none; }
.ses-row-pr { flex: none; font-size: calc(14px * var(--ts)); }
.ses-row-check { flex: none; color: var(--ok); display: inline-flex; }
.ses-row-warm .ses-row-num { background: transparent; border: 1px solid var(--border-strong); color: var(--muted); }
.ses-row-warm .ses-row-val { color: var(--text-2); font-weight: 650; }
.ses-row-pending {
  background: transparent;
  border-style: dashed;
}
/* Pendiente: se atenúa con color (--st-pending, ≥ 4,5:1), no con opacity, que dejaba el número en ~4:1 (PULIDO §17) */
.ses-row-pending .ses-row-num { background: transparent; border: 1px dashed var(--border-strong); color: var(--st-pending); }
.ses-row-pending :is(.ses-row-val, .ses-row-rir) { font-weight: 600; color: var(--st-pending); }

/* ---------- Editor grande ---------- */
.ses-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 10px 8px;
  border-radius: 14px;
  border: 1px solid rgba(184, 243, 74, 0.45);
  background: var(--bg);
}
.ses-editor-edit { border-color: rgba(96, 165, 250, 0.55); }
.ses-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
/* «+ Calent.» junto a «Serie 1»: casi sin añadir altura (el botón, de 44 px, invade el relleno del editor). */
.ses-editor-head .ses-add-warm { min-height: 44px; margin: -12px -4px -10px 0; padding: 0 10px; gap: 4px; border-color: transparent; color: var(--warn); font-size: calc(15px * var(--ts)); }
.ses-editor-num { font-size: calc(13px * var(--ts)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.ses-editor-edit .ses-editor-num { color: var(--info); }
.ses-editor-warm { border-color: rgba(251, 191, 36, 0.5); }
.ses-editor-warm .ses-editor-num { color: var(--warn); }

.ses-field { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 8px; }
.ses-field-label {
  min-height: 52px;
  display: flex;
  align-items: center;
  font-size: calc(12px * var(--ts));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.15;
}
.ses-field:has(.stepper-md) .ses-field-label { min-height: 46px; }
.ses-field-ctl { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ses-editor .stepper-btn { width: 56px; }
.ses-editor .stepper-md .stepper-btn { width: 52px; min-height: 46px; }
.ses-editor .stepper-step { font-size: calc(15px * var(--ts)); }
.ses-editor .stepper-input { font-size: calc(26px * var(--ts)); }
.ses-editor .stepper-md .stepper-input { font-size: calc(20px * var(--ts)); }
.ses-editor .stepper-input::placeholder { color: var(--muted); font-size: calc(15px * var(--ts)); font-weight: 600; }
.ses-editor .stepper-suffix { font-size: calc(12px * var(--ts)); }
/* La cifra se centra en el hueco a la izquierda de «kg»: «42,5» la tocaba en 375 px (guarda de solapes) */
.ses-editor .stepper-field:has(.stepper-suffix) .stepper-input { padding: 0 22px 0 2px; }
.ses-hint { font-size: calc(13px * var(--ts)); color: var(--muted); padding-left: 2px; }

.ses-sub { display: flex; flex-direction: column; gap: 5px; }
.ses-sub-label { font-size: calc(12px * var(--ts)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
/* RIR (Fallo, 0–5): se toca en cada serie (docs/PULIDO.md §30). `.ses-editor .ses-rir .chip` (0,3,0) gana a las
   reglas generales de texto grande sin depender del orden de carga; sin partir ni guiones: «Fallo» en una línea. */
.ses-rir { flex-wrap: nowrap; gap: 5px; }
.ses-editor .ses-rir .chip { position: relative; flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0; font-size: calc(16px * var(--ts)); white-space: nowrap; hyphens: none; }
.ses-editor .ses-rir .chip:first-child { flex-grow: 1.6; }
/* Área táctil hasta el hueco de al lado: 7 fichas en una fila de ~293 px (375 px) no llegan a 44 px visibles. */
.ses-editor .ses-rir .chip::before { content: ''; position: absolute; inset: -3px; }
/* Texto grande: no caben en una fila. «Fallo» arriba a todo el ancho y 0–5 debajo (≥ 44 px cada una). */
html.text-large .ses-editor .ses-rir { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
html.text-large .ses-editor .ses-rir .chip:first-child { grid-column: 1 / -1; }

.ses-type .seg-btn { min-height: 44px; font-size: calc(15px * var(--ts)); padding: 0 2px; }
/* Tipo elegido bien visible bajo la luz del gimnasio (decide si cuenta para volumen, series y récords). */
.ses-type .seg-btn.active { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.ses-type[data-type="warmup"] .seg-btn.active { background: var(--warn); color: #0b0d10; }
.ses-type[data-type="failure"] .seg-btn.active,
.ses-type[data-type="drop"] .seg-btn.active { background: var(--info); color: #0b0d10; }

/* Lastre / asistencia (peso corporal): el signo se elige aquí, el campo es siempre positivo. */
.ses-sign .seg-btn { min-height: 44px; font-size: calc(15px * var(--ts)); }
.ses-sign .seg-btn.active { background: var(--info-soft); color: var(--info); font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--info); }

.ses-note-input { min-height: 44px; }
.ses-register { min-height: 56px; font-size: calc(19px * var(--ts)); border-radius: 14px; white-space: nowrap; }
.ses-editor-warm .ses-register { font-size: calc(17px * var(--ts)); }
.ses-editor-links { display: flex; align-items: center; gap: 8px; margin: -2px -2px 0; }
.ses-editor-links .btn { min-height: 44px; border-color: transparent; }

.ses-card-actions { gap: 8px; flex-wrap: wrap; }
.ses-card-actions .btn { flex: 1; }

/* ---------- Cardio dentro de la sesión ---------- */
.ses-acts { display: flex; flex-direction: column; gap: 6px; }
.ses-act {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
}
.ses-act-emoji { font-size: calc(22px * var(--ts)); flex: none; }
.ses-act-main { flex: 1; min-width: 0; font-weight: 700; font-size: calc(16px * var(--ts)); }
.ses-act-edit { flex: none; display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 700; font-size: calc(15px * var(--ts)); }
.ses-cardio-btn { min-height: 56px; }

.ses-orphans { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Pie ---------- */
.ses-footer { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.ses-add-ex { border-style: dashed; }
.ses-notes { min-height: 88px; }
.ses-finish { min-height: 56px; }
.ses-finish-hint { text-align: center; }

/* ---------- Hojas ---------- */
.ses-checks { display: flex; flex-direction: column; gap: 6px; }
.ses-check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  font-weight: 600;
  line-height: 1.3;
}
.ses-check-input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.ses-dur .input { font-size: calc(20px * var(--ts)); font-weight: 750; }
.ses-dur-error { margin-top: -6px; }

/* ---------- Avisos durante la sesión ----------
   Arriba (sobre la cabecera), como con una hoja abierta: abajo taparían «Registrar serie», que queda
   justo encima de la barra de pestañas, durante los 5 s del aviso de récord. */
body[data-route="/session/:id"] .toast { top: calc(var(--sat) + 10px); bottom: auto; transform: translateY(-20px); }
body[data-route="/session/:id"] .toast.show { transform: translateY(0); }

/* ---------- Resumen ---------- */
.ses-sum-hero h2 { font-size: calc(21px * var(--ts)); }
.ses-sum-hero .kpi-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tres cifras protagonistas y, debajo, una línea con el resto (docs/PULIDO.md §9) */
/* «1 h 10 min» en una línea: con dos casillas cabe (a 375 px se partía en tres líneas); con texto grande, las
   casillas van una por fila (app.css, .kpis-2) */
.ses-sum-kpis .kpi-value { font-size: calc(22px * var(--ts)); white-space: nowrap; }
.ses-sum-kpis .kpi-label, .ses-sum-kpis .kpi-sub { white-space: normal; overflow: visible; line-height: 1.25; }
.ses-sum-meta { font-size: calc(14px * var(--ts)); line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
/* Frente a la anterior (misma rutina): filas con separador, no tarjetas */
.ses-sum-cmp { gap: 6px; }
.ses-cmp-head { display: flex; flex-direction: column; gap: 2px; }
.ses-cmp-title { font-size: calc(18px * var(--ts)); font-weight: 750; }
.ses-cmp-sub { font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; }
.ses-cmp-list { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--border); }
.ses-cmp-row { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--border); }
.ses-cmp-icon { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--muted); }
/* Ronda 8 (A4): tono de util.deltaTone; más peso o reps en el mismo ejercicio sí es mejora; bajar es neutro
   (un día más ligero no es una alerta: el estancamiento lo detecta el analista) */
.ses-cmp-row[data-tone="good"] .ses-cmp-icon { background: var(--ok-soft); color: var(--ok); }
.ses-cmp-row[data-tone="warn"] .ses-cmp-icon { background: var(--warn-soft); color: var(--warn); }
.ses-cmp-name { flex: 1; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.ses-cmp-val { flex: none; font-weight: 750; }
.ses-cmp-row[data-dir="same"] .ses-cmp-val { color: var(--text-2); font-weight: 650; }
.ses-cmp-more { font-size: var(--fs-sm); color: var(--muted); }
.ses-cmp-totals { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); }
/* Récords (ronda 8, A6): tarjeta dorada solo si los hay, justo bajo la cabecera */
.ses-sum-prs { gap: 6px; border-color: rgba(251, 191, 36, 0.5); background: linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.04)), var(--surface); }
.ses-sum-prs-head { display: flex; align-items: center; gap: 10px; }
.ses-sum-prs-emoji { flex: none; font-size: calc(26px * var(--ts)); line-height: 1; }
.ses-sum-prs-title { min-width: 0; font-size: calc(18px * var(--ts)); font-weight: 750; color: var(--pr); }
.ses-sum-prs-list { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid rgba(251, 191, 36, 0.25); }
.ses-sum-pr { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-bottom: 1px solid rgba(251, 191, 36, 0.25); }
.ses-sum-pr:last-child { border-bottom: 0; padding-bottom: 0; }
.ses-sum-pr-name { font-size: var(--fs-md); font-weight: 650; color: var(--text-2); overflow-wrap: break-word; }
.ses-sum-pr-set { font-size: calc(17px * var(--ts)); font-weight: 750; color: var(--text); overflow-wrap: anywhere; }
.ses-sum-pr-kind { font-size: var(--fs-sm); line-height: 1.35; color: var(--muted); }
.ses-sum-emoji { font-size: calc(22px * var(--ts)); flex: none; }
.ses-kpi-total { border-color: rgba(184, 243, 74, 0.35); }
.ses-sum-muscles { gap: 8px; }
.ses-bar-row { display: grid; grid-template-columns: minmax(0, 8.5em) 1fr 2.6em; align-items: center; gap: 8px; min-height: 28px; }
.ses-bar-label { font-size: calc(15px * var(--ts)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ses-bar { height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.ses-bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.ses-bar-val { text-align: right; font-weight: 750; }
.ses-sum-notes p { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.ses-sum-actions { margin-top: 8px; }

/* ---------- Check-in (js/checkin.js; la tarjeta también puede ir fuera de la sesión, p. ej. en Hoy) ---------- */
.ci-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border); /* borde sin sumar altura: plegada mide 44 px */
}
.ci-card.ci-open { box-shadow: inset 0 0 0 1px rgba(184, 243, 74, 0.35); }
.ci-bar { display: flex; align-items: stretch; min-height: 44px; }
.ci-toggle {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--text);
  text-align: left;
}
.ci-toggle.is-pressed { background: var(--surface-2); }
.ci-title { flex: none; font-size: calc(15px * var(--ts)); font-weight: 750; }
.ci-state { flex: 1; min-width: 0; font-size: calc(14px * var(--ts)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-ok { display: none; flex: none; color: var(--ok); }
.ci-chev { flex: none; color: var(--muted); transition: transform 0.15s ease; }
.ci-open .ci-chev { transform: rotate(180deg); }
/* Plegada y contestada: el resumen ocupa la franja entera (tres columnas: pregunta arriba, valor debajo). */
.ci-has:not(.ci-open) .ci-title { display: none; }
.ci-has:not(.ci-open) .ci-ok { display: inline; }
/* Cuatro valores: columnas a la medida del texto (caben «AGUJETAS» y «Normales» a 375 px). */
.ci-has:not(.ci-open) .ci-state { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; gap: 6px; overflow: visible; }
.ci-mini { display: flex; flex-direction: column; min-width: 0; }
/* Sin recortar por arriba: la tilde de «ENERGÍA» y la virgulilla de «SUEÑO» sobresalen de una línea ajustada. La
   elipsis va en cada texto, y el de la pregunta tiene holgura arriba (padding) para los signos de las mayúsculas.
   Holgura lateral (sin mover nada) para las letras que sobresalen de su caja, como el pie de la «A» de «Alta». */
.ci-mini-k,
.ci-mini-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 2px; margin-inline: -2px; }
.ci-mini-k { padding-top: 3px; font-size: var(--fs-xs); font-weight: 800; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ci-mini-v { font-size: calc(14px * var(--ts)); font-weight: 750; line-height: 1.25; color: var(--text); }
.ci-skip,
.ci-done {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0 12px 12px 0;
  background: none;
  color: var(--text-2);
  font-size: calc(15px * var(--ts));
  font-weight: 700;
}
.ci-skip.is-pressed,
.ci-done.is-pressed { background: var(--surface-2); }
.ci-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 12px 12px; }
.ci-rows { display: flex; flex-direction: column; gap: 8px; }
.ci-row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); align-items: center; gap: 8px; }
/* Ronda 10 (UX-1): si la etiqueta y «Bajo / Normal / Alto» no caben en una fila (texto grande en 375 px, 150 % en
   cualquier iPhone), la etiqueta va encima y la escala sigue en una sola línea, nunca «Alto» solo debajo. El umbral va
   en em de la fila (crece con el texto): 5,4 em de etiqueta + hueco + los tres botones ≈ 15 em. Sin container
   queries (iOS < 16) se queda como antes. */
.ci-rows { container-type: inline-size; }
@container (max-width: 15em) {
  .ci-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ci-rows .ci-seg.seg { flex-wrap: nowrap; }
  .ci-rows .ci-seg .seg-btn { flex: 1 1 0; }
}
.ci-label { font-size: calc(15px * var(--ts)); font-weight: 700; color: var(--text-2); }
.ci-seg .seg-btn { min-height: 44px; font-size: calc(15px * var(--ts)); padding: 0 2px; }
/* Valor elegido bien visible bajo la luz del gimnasio. */
.ci-seg .seg-btn.active { background: var(--accent); color: var(--accent-ink); font-weight: 800; box-shadow: none; }
.ci-hint { font-size: calc(13px * var(--ts)); line-height: 1.35; color: var(--muted); }

/* Compacta (hoja «Terminar sesión»): las tres filas a la vista. */
.ci-compact { display: flex; flex-direction: column; gap: 8px; }
.ci-chead { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: -6px 0 -4px; }
.ci-chead-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.ci-copt { font-size: calc(13px * var(--ts)); color: var(--muted); }
.ci-compact .ci-skip,
.ci-compact .ci-done { border: 1px solid var(--border); border-radius: 10px; }
/* Dos seguidas (antes y después: hoja «Editar check-in» o «Terminar» de una sesión a posteriori), con separador. */
.ci-compact + .ci-compact { padding-top: 12px; border-top: 1px solid var(--border); }

/* Resumen de la sesión */
.ci-sum-wrap { display: flex; flex-direction: column; gap: 12px; }
.ci-sum { gap: 10px; }
/* Cada momento (antes / después) en un bloque con sus cuatro valores en 2 × 2 y su nombre delante (data-label):
   cuatro columnas no caben a 375 px. La fila de cabecera queda solo para lectores de pantalla. */
.ci-sum-grid { display: flex; flex-direction: column; gap: 10px; }
.ci-sum-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; align-items: baseline; }
.ci-sum-row:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ci-sum-row .ci-sum-when { grid-column: 1 / -1; }
.ci-sum-row .ci-sum-v { display: flex; flex-direction: column; white-space: normal; }
.ci-sum-v::before { content: attr(data-label); font-size: calc(12px * var(--ts)); font-weight: 650; line-height: 1.3; color: var(--muted); }
.ci-sum-k, .ci-sum-when { font-size: calc(12px * var(--ts)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ci-sum-when { padding-right: 4px; }
.ci-sum-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-sum-v { font-size: calc(15px * var(--ts)); font-weight: 750; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-sum-edit { min-height: 44px; margin-top: 2px; }

/* Arriba de la sesión: plegada es una franja de 44 px pegada a la cabecera, para que en un iPhone SE
   «Registrar serie 1» siga a la vista sin desplazar (criterio de 1–2 toques por serie). */
.ses-content > .ci-card { margin-bottom: -6px; }
.ses-content > .ci-card:first-child { margin-top: -8px; }

/* ---------- Check-in: agujetas o molestias por zona (ronda 6) ---------- */
.ci-zones { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.ci-zones-head { display: flex; align-items: baseline; gap: 8px; }
.ci-zones-title { font-size: calc(14px * var(--ts)); font-weight: 700; color: var(--text-2); }
.ci-zone-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-zone {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: calc(14px * var(--ts));
  font-weight: 700;
  text-align: left;
}
.ci-zone.ci-band-low { border-color: rgba(255, 200, 87, 0.45); }
.ci-zone.ci-band-mid { border-color: var(--warn); }
.ci-zone.ci-band-high { border-color: var(--danger); }
.ci-zone-add { align-self: flex-start; min-height: 44px; }
.ci-sum-zones { margin: 0; font-size: calc(14px * var(--ts)); line-height: 1.4; color: var(--text-2); }
.ci-sum-zones-when { font-size: calc(12px * var(--ts)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.ci-area-body { gap: 14px; }
.ci-area-kind .seg-btn { min-height: 44px; font-size: calc(15px * var(--ts)); }
.ci-area-level { gap: 6px; }
.ci-area-level .chip { flex: 1 0 calc(16.66% - 6px); min-width: 0; padding: 0; }
.ci-area-joints .chip, .ci-area-side .chip { padding: 0 12px; }
.ci-area-zone .bm-figure { max-width: 280px; }