/* =============================================
   Gym gd3dhosting — tokens de tema (claro/oscuro) + layout + animaciones
   ============================================= */

:root {
  --bg:            #f5f6f8;
  --bg-elevated:   #ffffff;
  --bg-inset:      #ececf0;
  --border:        #e1e3e8;
  --text:          #16181d;
  --text-muted:    #62666f;
  --text-faint:    #9297a1;
  --accent:        #ff5a3c;
  --accent-ink:    #ffffff;
  --accent-soft:   #ffe7e0;
  --ok:            #1f9d55;
  --warn:          #c98a12;
  --danger:        #d94343;
  --imputado:      #b9bec8;
  --planilla:      var(--accent);
  --shadow:        0 1px 2px rgba(16,18,22,.04), 0 8px 24px -12px rgba(16,18,22,.12);
  --radius-sm:     7px;
  --radius-md:     10px;
  --radius-lg:     12px;
  --ease:          cubic-bezier(.22,.9,.3,1);
  --dur-fast:      140ms;
  --dur-med:       260ms;
  --dur-slow:      480ms;
  /* Tipografía del rediseño (oct 2026): Barlow para texto, Barlow
     Condensed para títulos y números grandes. */
  --f-body:        "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-cond:        "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  /* Respaldo de colores por grupo/gráficos (theme.js los pisa según paleta). */
  --c1: #ff5a3c; --c2: #1f9d55; --c3: #1f66d6; --z-low: #1f66d6;
  --g-pecho: #d63a28; --g-espalda: #1f66d6; --g-piernas: #0f9a62; --g-gluteos: #c0187a;
  --g-hombros: #c27a00; --g-biceps: #7448d8; --g-triceps: #0b8f9b; --g-cuerpo-completo: #677180;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #101114;
    --bg-elevated:   #1a1c21;
    --bg-inset:      #202329;
    --border:        #2a2d34;
    --text:          #f2f3f5;
    --text-muted:    #a4a8b2;
    --text-faint:    #686d78;
    --accent:        #ff6b4d;
    --accent-ink:    #16181d;
    --accent-soft:   #3a2119;
    --ok:            #3ecb78;
    --warn:          #e0a934;
    --danger:        #ef5a5a;
    --imputado:      #4a4e58;
    --shadow:        0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:            #101114;
  --bg-elevated:   #1a1c21;
  --bg-inset:      #202329;
  --border:        #2a2d34;
  --text:          #f2f3f5;
  --text-muted:    #a4a8b2;
  --text-faint:    #686d78;
  --accent:        #ff6b4d;
  --accent-ink:    #16181d;
  --accent-soft:   #3a2119;
  --ok:            #3ecb78;
  --warn:          #e0a934;
  --danger:        #ef5a5a;
  --imputado:      #4a4e58;
  --shadow:        0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--f-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
  overscroll-behavior-y: none;
}

button, input, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0 0 4px; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }

/* ---- Shell ---- */

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* En celular, .app-main no existe como caja propia: topbar y #view quedan
   como si fueran hijos directos de #app (mismo flex-column de siempre). En
   escritorio (más abajo) sí se vuelve una columna real, al lado del sidebar. */
.app-main { display: contents; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  /* La barra de notificaciones va ARRIBA (antes el inset se sumaba abajo por
     error y en la app Android el header quedaba debajo de la barra). Capacitor
     inyecta --safe-area-inset-top; en navegador cae a env(). */
  padding: calc(14px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { font: 700 26px/1.05 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; flex: 1; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .back-btn { font-size: 20px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--bg-inset);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast);
}
.icon-btn:active { transform: scale(.88); }
.icon-btn:hover { background: var(--border); }

main#view {
  flex: 1;
  padding: 12px 16px 96px;
  position: relative;
}

.navbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
}
.navbar-inner {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 560px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border: none;
  background: none;
  color: var(--text-faint);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.nav-item svg { width: 21px; height: 21px; }
.nav-item.active { color: var(--accent); }
.nav-item:active { transform: scale(.92); }

/* ---- Cards / listas ---- */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow);
}

.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.kpis {
  display: grid;
  grid-template-columns: repeat(var(--kpis-cols, 3), 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.kpi {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  text-align: center;
}
.kpi .num { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.bloque-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  margin: 18px 2px 8px;
}
.bloque-header:first-child { margin-top: 4px; }

/* Encabezado "vivo" de bloque: nombre+cantidad a la izquierda, sparkline
   de volumen a la derecha — reemplaza al .bloque-header suelto de antes
   (que ahora vive adentro, con margin:0). */
.bloque-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 2px 10px;
}
.bloque-card:first-child { margin-top: 4px; }
.bloque-sub { font-size: 11.5px; color: var(--text-faint); font-weight: 600; margin-top: 3px; }
.bloque-spark { width: 120px; height: 40px; flex-shrink: 0; }

/* Sub-división de mes/año dentro de un bloque — más chica y con un
   borde a la izquierda para distinguirla visualmente del título del
   bloque (mayúsculas, más grande, sin borde). */
.mes-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  opacity: .8;
  margin: 10px 2px 6px;
  padding-left: 9px;
  border-left: 2px solid var(--border);
  text-transform: capitalize;
}

.sesion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast);
}
.sesion-item:active { transform: scale(.98); }
.sesion-item + .sesion-item { margin-top: 8px; }
.sesion-fecha-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  flex-shrink: 0;
}
.sesion-fecha-badge .dia { font-size: 16px; font-weight: 800; line-height: 1; }
.sesion-fecha-badge .mes { font-size: 9.5px; text-transform: uppercase; color: var(--text-muted); }
.sesion-info { flex: 1; min-width: 0; }
/* Una sola línea siempre, sin importar qué tan largo sea el texto —
   sin esto, una ficha con un esquema de series más largo que las demás
   envolvía a 2 líneas y quedaba más alta que el resto de su fila (el
   grid por default estira todas las fichas de la fila a la más alta). */
.sesion-info .etiqueta { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sesion-info .meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sesion-chevron { color: var(--text-faint); flex-shrink: 0; }

.imputado-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--imputado);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.badge-real { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.badge-imputado { background: var(--bg-inset); color: var(--text-muted); }
.badge-pendiente { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }

/* ---- Formularios / edición inline ---- */

.field-value {
  border: none;
  background: none;
  border-bottom: 1.5px dashed transparent;
  padding: 2px 1px;
  cursor: text;
  font-variant-numeric: tabular-nums;
  border-radius: 4px;
  transition: background var(--dur-fast);
}
.field-value.imputado { color: var(--text-muted); border-bottom-color: var(--imputado); }
.field-value:hover { background: var(--bg-inset); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast), opacity var(--dur-fast);
}
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }
/* Mismo look sólido que btn-primary (login/alta), en otro color — para
   diferenciar "acción principal" (Crear cuenta) de "ya tengo cuenta". */
.btn-secondary { background: var(--ok); color: var(--accent-ink); }
.btn-secondary:hover { filter: brightness(1.06); }
.btn-ghost { background: var(--bg-inset); color: var(--text); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

input[type="text"], input[type="number"], input[type="password"], input[type="date"], select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  transition: border-color var(--dur-fast);
}
input:focus, select:focus { outline: none; border-color: var(--accent); }

/* Campo de contraseña con botón de mostrar/ocultar (login). */
.password-field { position: relative; }
.password-field input[type="password"], .password-field input[type="text"] { padding-right: 44px; }
.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.password-toggle:active { transform: translateY(-50%) scale(.88); }
.password-toggle svg { width: 20px; height: 20px; }

/* Por si algún campo queda con validación nativa del navegador (ej. type="email"
   en un form sin submit todavía): que no dibuje su propio borde/resplandor,
   el estado de error lo maneja siempre .auth-error / los toasts de la app. */
input:invalid { box-shadow: none; }

/* Edición inline (detalle de sesión y "Nueva sesión"): tienen que venir
   DESPUÉS de la regla genérica de arriba porque empatan en especificidad
   (elemento input + una clase, igual que "input[type=...]") y sin este
   orden esa regla genérica ganaba igual — el padding grande pensado para
   campos de ancho completo dejaba casi sin lugar el texto en estos campos
   chicos, y "banda roja"/"banda negra" ni entraban. */
.field-value input {
  width: auto;
  min-width: 56px;
  max-width: 140px;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
}
input.input-inline {
  width: auto;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
input.input-inline.reps { min-width: 50px; max-width: 60px; text-align: center; }
input.input-inline.peso-num { min-width: 64px; max-width: 84px; text-align: center; }
input.input-inline.peso-banda { min-width: 108px; max-width: 150px; }

/* Las flechitas nativas de los inputs numéricos ocupan ~18px pegadas al
   texto: en estos campos angostos tapaban el número (un "10" se leía como
   "1" seguido de la flecha). */
.input-inline[type="number"]::-webkit-outer-spin-button,
.input-inline[type="number"]::-webkit-inner-spin-button,
.field-value input[type="number"]::-webkit-outer-spin-button,
.field-value input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-inline[type="number"],
.field-value input[type="number"] {
  -moz-appearance: textfield;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--bg-inset);
  border: 1.5px solid transparent;
  transition: border-color var(--dur-fast);
}
.search-box:focus-within { border-color: var(--accent); }
.search-box input { border: none; background: none; padding: 0; }
.search-box svg { color: var(--text-faint); flex-shrink: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--bg-inset);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.chip.active { background: var(--accent); color: var(--accent-ink); }
.chip:active { transform: scale(.94); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.switch {
  position: relative;
  width: 46px; height: 27px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--bg-inset);
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.switch::after {
  content: "";
  position: absolute;
  top: 2.5px; left: 2.5px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-elevated);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform var(--dur-med) var(--ease);
}
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(19px); }

/* ---- Ejercicio list / detalle ---- */

.ejercicio-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.ejercicio-list-item:active { transform: scale(.98); }
.ejercicio-list-item + .ejercicio-list-item { margin-top: 8px; }
.ejercicio-list-item .nombre { font-weight: 700; font-size: 14px; }
.ejercicio-list-item .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.grupo-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.pr-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.pr-card {
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
}
.pr-card .num { font-size: 22px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.pr-card .label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

table.historia { width: 100%; border-collapse: collapse; font-size: 13px; }
table.historia th, table.historia td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
table.historia th { color: var(--text-faint); font-weight: 600; font-size: 11px; text-transform: uppercase; }

/* ---- Duda de lectura ---- */

.duda-card {
  border: 1.5px dashed var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--bg-elevated));
  border-radius: var(--radius-md);
  padding: 12px;
}
.duda-card .detalle { font-size: 13px; margin-bottom: 8px; }

/* ---- Toast / sync pendiente ---- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ---- Skeletons ---- */

.skel { position: relative; overflow: hidden; background: var(--bg-inset); border-radius: var(--radius-sm); }
.skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 8%, transparent), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skel-line { height: 14px; margin: 6px 0; }
.skel-card { height: 62px; border-radius: var(--radius-md); }

.spinner {
  width: 34px; height: 34px; margin: 0 auto 14px;
  border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Animaciones de entrada ---- */

.view-enter { animation: viewEnter var(--dur-slow) var(--ease) both; }
@keyframes viewEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.stagger > * { opacity: 0; animation: itemEnter var(--dur-med) var(--ease) both; }
@keyframes itemEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.pop { animation: pop var(--dur-med) var(--ease); }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ---- Gráficos (chart.js) ---- */

.chart-wrap { width: 100%; }
.chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-line.origen-planilla { stroke: var(--planilla); }
.chart-line.origen-imputado { stroke: var(--imputado); stroke-dasharray: 5 4; }
.chart-point { fill: var(--bg-elevated); stroke-width: 2.5; }
.chart-point.origen-planilla { stroke: var(--planilla); }
.chart-point.origen-imputado { stroke: var(--imputado); }
.chart-bar { fill: var(--accent); transform-box: fill-box; transform-origin: bottom; }
.chart-bar.origen-imputado { fill: var(--imputado); }
.chart-axis-label { fill: var(--text-faint); font-size: 9.5px; }
.chart-gridline { stroke: var(--border); stroke-width: 1; }
.chart-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; flex-wrap: wrap; }
.chart-legend .item { display: flex; align-items: center; gap: 5px; }
.chart-legend .swatch { width: 14px; height: 3px; border-radius: 2px; background: var(--planilla); }
.chart-legend .swatch.imputado { background: var(--imputado); background-image: repeating-linear-gradient(90deg, var(--imputado) 0 4px, transparent 4px 7px); }

.chart-line-overlay { fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 4; }

.chart-donut-track { stroke: var(--bg-inset); }
.chart-donut-center { fill: var(--text-muted); font-size: 11px; font-weight: 700; text-anchor: middle; }

.chart-heat-cell { fill: var(--bg-inset); }
.chart-heat-cell.nivel-1 { fill: color-mix(in srgb, var(--accent) 35%, var(--bg-inset)); }
.chart-heat-cell.nivel-2 { fill: color-mix(in srgb, var(--accent) 65%, var(--bg-inset)); }
.chart-heat-cell.nivel-3 { fill: var(--accent); }

.chart-radar-ring { fill: none; stroke: var(--border); stroke-width: 1; }
.chart-radar-spoke { stroke: var(--border); stroke-width: 1; }
.chart-radar-area { fill: color-mix(in srgb, var(--accent) 28%, transparent); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }

/* ---- Auth screen ---- */

.auth-shell {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 360px;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.auth-logo {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800;
  margin: 0 auto 16px;
}
.auth-title { text-align: center; font-size: 20px; margin-bottom: 4px; }
.auth-sub { text-align: center; color: var(--text-muted); font-size: 13px; margin-bottom: 22px; }
.auth-error {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 12px;
}
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: 12px; margin: 16px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.empty-state { text-align: center; padding: 48px 16px; color: var(--text-muted); }
.empty-state .icon { font-size: 34px; margin-bottom: 10px; }

/* Progreso: reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (min-width: 640px) {
  .navbar-inner { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* ---- Layout de escritorio: header + sidebar colapsable ----
   Por default sigue el ancho real de pantalla (bloque @media de abajo);
   el botón "celular/escritorio" de la topbar puede forzar uno u otro
   desde cualquier ancho vía [data-layout] en <html> — mismo patrón que
   data-theme para claro/oscuro, declaraciones duplicadas a propósito. */

.sidebar { display: none; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.sidebar-brand-mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.sidebar-brand-label { font-weight: 800; font-size: 15px; white-space: nowrap; }

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  overflow-y: auto;
}
.sidebar-nav .nav-item {
  flex: none;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  white-space: nowrap;
}
.sidebar-nav .nav-item svg { width: 19px; height: 19px; flex-shrink: 0; }
.sidebar-nav .nav-item:hover { background: var(--bg-inset); color: var(--text); }
.sidebar-nav .nav-item.active { background: var(--accent-soft); color: var(--accent); }

.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px;
  padding: 10px 12px;
  border: none;
  background: none;
  color: var(--text-faint);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-toggle:hover { background: var(--bg-inset); color: var(--text); }
.sidebar-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (min-width: 880px) {
  html:not([data-layout="mobile"]) #app { flex-direction: row; max-width: none; margin: 0; align-items: stretch; }
  html:not([data-layout="mobile"]) .sidebar {
    display: flex;
    flex-direction: column;
    width: 232px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    transition: width var(--dur-med) var(--ease);
  }
  html:not([data-layout="mobile"]) .sidebar.collapsed { width: 68px; }
  html:not([data-layout="mobile"]) .sidebar.collapsed .sidebar-brand-label,
  html:not([data-layout="mobile"]) .sidebar.collapsed .sidebar-nav .nav-item span,
  html:not([data-layout="mobile"]) .sidebar.collapsed .sidebar-toggle span { display: none; }
  html:not([data-layout="mobile"]) .sidebar.collapsed .sidebar-nav .nav-item { justify-content: center; }
  html:not([data-layout="mobile"]) .sidebar.collapsed .sidebar-toggle { justify-content: center; }
  html:not([data-layout="mobile"]) .app-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  html:not([data-layout="mobile"]) .navbar { display: none; }
  html:not([data-layout="mobile"]) main#view { max-width: 2400px; margin: 0 auto; width: 100%; padding: 20px 32px 32px; }
  html:not([data-layout="mobile"]) .topbar { padding: 16px 28px; }
}

html[data-layout="desktop"] #app { flex-direction: row; max-width: none; margin: 0; align-items: stretch; }
html[data-layout="desktop"] .sidebar {
  display: flex;
  flex-direction: column;
  width: 232px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  transition: width var(--dur-med) var(--ease);
}
html[data-layout="desktop"] .sidebar.collapsed { width: 68px; }
html[data-layout="desktop"] .sidebar.collapsed .sidebar-brand-label,
html[data-layout="desktop"] .sidebar.collapsed .sidebar-nav .nav-item span,
html[data-layout="desktop"] .sidebar.collapsed .sidebar-toggle span { display: none; }
html[data-layout="desktop"] .sidebar.collapsed .sidebar-nav .nav-item { justify-content: center; }
html[data-layout="desktop"] .sidebar.collapsed .sidebar-toggle { justify-content: center; }
html[data-layout="desktop"] .app-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
html[data-layout="desktop"] .navbar { display: none; }
html[data-layout="desktop"] main#view { max-width: 2400px; margin: 0 auto; width: 100%; padding: 20px 32px 32px; }
html[data-layout="desktop"] .topbar { padding: 16px 28px; }

/* ---- Paneles de dos columnas (ej. /admin) ----
   En celular es simplemente una columna apilada en el orden del DOM (cero
   cambios respecto a antes). En escritorio ancho, .panel-col-aside pasa a
   una segunda columna más angosta a la derecha vía "order" — el truco es
   que el orden visual en escritorio no tiene que coincidir con el orden en
   el DOM, así que la columna angosta puede ir primero en el DOM (para que
   el celular la muestre arriba, como siempre) y last en pantalla grande. */
.panel-grid { display: flex; flex-direction: column; gap: 14px; }
.panel-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

@media (min-width: 880px) {
  html:not([data-layout="mobile"]) .panel-grid { flex-direction: row; align-items: flex-start; gap: 20px; }
  html:not([data-layout="mobile"]) .panel-col { flex: 1; order: 1; }
  html:not([data-layout="mobile"]) .panel-col.panel-col-aside { flex: 0 0 340px; order: 2; }
}
html[data-layout="desktop"] .panel-grid { flex-direction: row; align-items: flex-start; gap: 20px; }
html[data-layout="desktop"] .panel-col { flex: 1; order: 1; }
html[data-layout="desktop"] .panel-col.panel-col-aside { flex: 0 0 340px; order: 2; }

/* ---- Grillas de contenido para escritorio ----
   .dash-grid: grilla explícita de 12 columnas para widgets heterogéneos
   (gráficos, cards de distinto tamaño) — cada hijo declara cuánto ocupa
   con .dash-span-4/6/8/12. En celular es una columna apilada común y
   corriente (sin grid), orden = orden del DOM, cero cambios.
   .auto-grid: grilla de columnas parejas para listas de ítems uniformes
   (sesiones, ejercicios) — sin spans, se auto-acomodan solas. */
.dash-grid { display: flex; flex-direction: column; gap: 14px; }
.auto-grid { display: flex; flex-direction: column; gap: 10px; }
/* Sin esto, un hijo de grid no se achica más allá del tamaño intrínseco de
   su contenido (acá, el ancho explícito del <svg> de los gráficos, ver
   makeSvg() en chart.js) — si esa medida intrínseca no entra en la columna
   que le tocó, el navegador agranda la columna entera para que entre, lo
   que en la práctica tira esa tarjeta a todo el ancho y empuja el resto a
   la fila siguiente (el "3 tarjetas ocupan toda la columna" reportado). */
.dash-grid > *, .auto-grid > * { min-width: 0; }

@media (min-width: 880px) {
  html:not([data-layout="mobile"]) .dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: stretch; }
  html:not([data-layout="mobile"]) .dash-span-4 { grid-column: span 4; }
  html:not([data-layout="mobile"]) .dash-span-6 { grid-column: span 6; }
  html:not([data-layout="mobile"]) .dash-span-8 { grid-column: span 8; }
  html:not([data-layout="mobile"]) .dash-span-12 { grid-column: span 12; }
  html:not([data-layout="mobile"]) .auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
  html:not([data-layout="mobile"]) .card-compact { max-width: 420px; }
  html:not([data-layout="mobile"]) .card-wide { max-width: 900px; }
  html:not([data-layout="mobile"]) .filter-bar { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 16px; max-width: none; }
  html:not([data-layout="mobile"]) .filter-bar > .row { display: contents; }
  html:not([data-layout="mobile"]) .filter-bar input[type="date"],
  html:not([data-layout="mobile"]) .filter-bar select { width: auto; min-width: 160px; }
  html:not([data-layout="mobile"]) .filter-bar .switch-row { width: auto; flex: 0 0 auto; gap: 14px; margin-top: 0; }
}
html[data-layout="desktop"] .dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: stretch; }
html[data-layout="desktop"] .dash-span-4 { grid-column: span 4; }
html[data-layout="desktop"] .dash-span-6 { grid-column: span 6; }
html[data-layout="desktop"] .dash-span-8 { grid-column: span 8; }
html[data-layout="desktop"] .dash-span-12 { grid-column: span 12; }
html[data-layout="desktop"] .auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
html[data-layout="desktop"] .card-compact { max-width: 420px; }
html[data-layout="desktop"] .card-wide { max-width: 900px; }
html[data-layout="desktop"] .filter-bar { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 16px; max-width: none; }
html[data-layout="desktop"] .filter-bar > .row { display: contents; }
html[data-layout="desktop"] .filter-bar input[type="date"],
html[data-layout="desktop"] .filter-bar select { width: auto; min-width: 160px; }
html[data-layout="desktop"] .filter-bar .switch-row { width: auto; flex: 0 0 auto; gap: 14px; margin-top: 0; }

/* 2K/4K: el tope de 2400px de main#view (arriba) ya alcanza para que el
   contenido use casi todo el ancho real hasta pantallas muy grandes —
   nada que cortarle en una capa aparte acá, solo queda como techo de
   cordura para monitores ultra-anchos (3440px+/4K) donde una sola fila
   de tarjetas a todo el ancho se vería absurda. */


/* =============================================
   Rediseño oct 2026 — Inicio (gráficos en pestañas/carrusel + fichas)
   Prototipo aprobado: ver .claude-status/PROGRESS.md (2026-10-14).
   ============================================= */
.num-cond { font-family: var(--f-cond); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Chips de grupo muscular: el color viene en --c (var(--g-<grupo>)). En
   intensidad suave el fondo y el texto se apagan para no competir con el
   resto de la ficha. */
.gchip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); }
html[data-intensity="suave"] .gchip { font-weight: 500;
  background: color-mix(in srgb, var(--c) 30%, var(--bg-elevated)); color: color-mix(in srgb, var(--c) 42%, var(--text)); }
html[data-theme="dark"][data-intensity="suave"] .gchip { background: color-mix(in srgb, var(--c) 17%, var(--bg-elevated)); color: color-mix(in srgb, var(--c) 72%, var(--text)); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"])[data-intensity="suave"] .gchip { background: color-mix(in srgb, var(--c) 17%, var(--bg-elevated)); color: color-mix(in srgb, var(--c) 72%, var(--text)); }
}
.gchip-mas { --c: var(--text-muted); }
.gchip-parcial { --c: var(--warn); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* Pestañas + carrusel de gráficos (en celular). Se elige por pestaña o
   deslizando; se recuerda el último. En escritorio se ven los 4 juntos. */
.home-charts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ctabs { display: flex; gap: 4px; background: var(--bg-inset); border-radius: 9px; padding: 3px; }
.ctabs button { flex: 1; border: 0; background: none; color: var(--text-muted); font: 600 13px var(--f-body); padding: 7px 2px; border-radius: 9px; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.ctabs button.on { background: var(--bg-elevated); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > .chart-card { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.cdots { display: flex; justify-content: center; gap: 6px; }
.cdots i { width: 6px; height: 6px; border-radius: 3px; background: var(--border); transition: width var(--dur-med) var(--ease), background var(--dur-med); display: block; }
.cdots i.on { width: 18px; background: var(--accent); }
.chart-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; min-height: 220px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.chart-card h3 { font: 700 13px var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0; display: none; }
.chart-cap { font-size: 11.5px; color: var(--text-muted); margin-top: auto; line-height: 1.35; }
.chart-vacio { margin: auto; text-align: center; color: var(--text-muted); font-size: 13px; max-width: 260px; }
.ring-leg { display: grid; gap: 6px; }
.ring-leg small { font: 700 10.5px var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.ring-leg b { font: 700 26px/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.ring-leg .prom { font-size: 11.5px; color: var(--text-muted); margin-left: 3px; }
.musc-bars { display: grid; gap: 6px; }
.musc-bars > div { display: grid; grid-template-columns: 58px 1fr 26px; gap: 6px; align-items: center; font-size: 12px; }
.musc-bars i { display: block; height: 7px; border-radius: 4px; }
.musc-bars b { font: 700 15px var(--f-cond); text-align: right; font-variant-numeric: tabular-nums; }
.chart-card.hero { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chart-card.hero h3, .chart-card.hero .chart-cap { color: inherit; opacity: .85; }

@media (min-width: 880px) {
  html:not([data-layout="mobile"]) .home-charts .ctabs,
  html:not([data-layout="mobile"]) .home-charts .cdots { display: none; }
  html:not([data-layout="mobile"]) .home-charts .carousel { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); overflow: visible; }
  html:not([data-layout="mobile"]) .chart-card h3 { display: block; }
}
html[data-layout="desktop"] .home-charts .ctabs,
html[data-layout="desktop"] .home-charts .cdots { display: none; }
html[data-layout="desktop"] .home-charts .carousel { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); overflow: visible; }
html[data-layout="desktop"] .chart-card h3 { display: block; }

/* Encabezado de bloque y separador de mes (versión rediseño). */
.bloque-card2 { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; align-items: center; background: var(--bg-inset); border-radius: var(--radius-md); padding: 12px 14px; margin: 16px 0 4px; }
.bloque-card2:first-child { margin-top: 0; }
.bloque-card2 .nombre { font: 700 16px/1.15 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; }
.bloque-card2 .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.mes-sep { display: flex; align-items: center; gap: 8px; font: 700 13px var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 8px 2px 2px; }
.mes-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Ficha de sesión: datos a la izquierda, fecha grande a la derecha, chips
   de grupo y línea de volumen relativo al bloque abajo. */
.ses-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 13px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; text-align: left; width: 100%; color: inherit; font: inherit;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast); }
.ses-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.ses-card:active { transform: scale(.98); }
.ses-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ses-card .tit { font: 700 17px/1.15 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ses-card .meta { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ses-card .fecha { grid-row: span 3; display: grid; justify-items: center; align-content: start; min-width: 42px; padding-top: 1px; }
.ses-card .fecha b { font: 700 30px/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.ses-card .fecha small { font: 700 11px var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
html[data-intensity="suave"] .ses-card .fecha small { color: var(--text-muted); }
.ses-card .vol { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--bg-inset); overflow: hidden; }
html[data-intensity="suave"] .ses-card .vol { height: 4px; }
.ses-card .vol i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }


/* ---- Perfil: Colores de la app (rediseño oct 2026) ---- */
.seg { display: flex; gap: 3px; background: var(--bg-inset); border-radius: 9px; padding: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: 8px 6px; border-radius: 9px; font: 600 13px var(--f-body); color: var(--text-muted); cursor: pointer; }
.seg button.on { background: var(--bg-elevated); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg button:focus-visible, .pal-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pal-label { font: 700 13px var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.pal-list { display: grid; gap: 8px; }
.pal-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg-elevated); cursor: pointer; width: 100%; text-align: left; color: inherit; font: inherit; }
.pal-opt.sel { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.pal-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text-muted); display: grid; place-items: center; }
.pal-opt.sel .pal-radio { border-color: var(--accent); }
.pal-opt.sel .pal-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pal-nombre { font: 700 17px var(--f-cond); text-transform: uppercase; letter-spacing: .02em; }
.pal-nombre small { font: 500 12px var(--f-body); color: var(--text-muted); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.pal-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.pal-mini { border-radius: 10px; padding: 6px; display: grid; gap: 4px; border: 1px solid rgba(128,128,128,.25); }
.pal-mini span { font: 600 10px var(--f-body); }
.pal-mini-card { border-radius: 6px; padding: 5px; display: grid; gap: 4px; }
.pal-mini-card i { display: block; height: 6px; border-radius: 3px; }
.pal-mini-dots { display: flex; gap: 4px; }
.pal-mini-dots b { width: 10px; height: 10px; border-radius: 50%; display: block; }
.apply-bar { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); width: min(536px, calc(100% - 24px));
  bottom: calc(78px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 8px;
  background: var(--text); color: var(--bg); border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.apply-bar span { flex: 1; font-weight: 600; font-size: 13.5px; min-width: 0; }
.apply-bar .btn { padding: 9px 14px; }
.apply-bar .btn-ghost { background: transparent; color: inherit; }
@media (min-width: 880px) {
  html:not([data-layout="mobile"]) .apply-bar { bottom: 24px; }
}
html[data-layout="desktop"] .apply-bar { bottom: 24px; }
body.con-apply-bar main#view { padding-bottom: 170px; }


/* ---- Detalle de sesión + modo Editar (rediseño oct 2026) ---- */
.txt-btn { border: 0; background: var(--bg-inset); color: var(--text); font: 700 13px var(--f-body); padding: 8px 13px; border-radius: 999px; cursor: pointer; flex-shrink: 0; }
.txt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ses-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ses-head-sub { font-size: 13px; color: var(--text-muted); }
.kpis-cond .kpi .num { font: 700 25px/1.05 var(--f-cond); }
.kpis-cond .kpi .label { text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; font-weight: 600; }
.leyenda-sets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.leyenda-sets .set-pill + .set-pill, .leyenda-sets .set-pill:not(:first-child) { margin-left: 8px; }
.sets { display: flex; flex-wrap: wrap; gap: 5px; }
.set-pill { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 8px; background: var(--bg-inset); font-variant-numeric: tabular-nums; white-space: nowrap; }
.set-pill.imp { background: transparent; border: 1px dashed var(--text-faint); color: var(--text-muted); padding: 3px 7px; }
.ej-card { display: flex; flex-direction: column; gap: 9px; }
.ej-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ej-nombre { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.ej-impl { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }
.ed-head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ed-field { display: grid; gap: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ed-field input { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); }
.ed-row { display: grid; grid-template-columns: 22px 1fr 1fr 32px; gap: 6px; align-items: center; }
.ed-row-head span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); text-align: center; }
.ed-n { font: 700 16px var(--f-cond); color: var(--text-muted); text-align: center; }
input.ed-in { width: 100%; min-width: 0; text-align: center; padding: 8px 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ed-corporal { text-align: center; font-size: 12.5px; color: var(--text-muted); }
.ed-x { width: 32px; height: 32px; border-radius: 9px; border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 15px; }
.ed-x:hover { color: var(--danger); background: var(--bg-inset); }
select.ed-add { width: 100%; border-style: dashed; color: var(--text-muted); }


/* ---- Rediseño oct 2026: retoques globales (títulos de sección, números,
   chips de filtro) + Ejercicios ---- */
.bloque-header { font: 700 13px var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.kpi .num, .pr-card .num { font-family: var(--f-cond); font-weight: 700; font-size: 26px; line-height: 1.05; }
.pr-card .num { color: var(--text); }
.ej-item { display: grid; grid-template-columns: 4px minmax(0, 1fr) 72px; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 11px 14px 11px 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast); }
.ej-item:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.ej-item:active { transform: scale(.98); }
.ej-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ej-item-bar { align-self: stretch; border-radius: 2px; display: block; }
.ej-item .nombre { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ej-item .sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ej-item-spark { display: flex; justify-content: flex-end; }
.auto-grid > .ej-item + .ej-item { margin-top: 0; }
.ej-det-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ej-det-nombre { font: 700 28px/1.05 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.hist-card .fecha { grid-row: auto; }

/* ---- Progreso: filtros en chips (rediseño oct 2026) ---- */
.prog-filtros { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.chip-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll .chip { flex-shrink: 0; white-space: nowrap; }
.prog-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.prog-resumen { font-size: 12.5px; color: var(--text-muted); }
.prog-fechas summary { font-size: 12.5px; color: var(--text-muted); cursor: pointer; width: max-content; }
.prog-fechas input { flex: 1; min-width: 0; }

/* ---- Perfil: lista de accesos (rediseño oct 2026) ---- */
.perfil-lista { padding: 4px 14px; }
.perfil-fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: 600 14.5px var(--f-body); text-align: left; cursor: pointer; text-decoration: none; }
.perfil-fila:last-child { border-bottom: 0; }
.perfil-fila i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; background: var(--bg-inset); flex-shrink: 0; }
.perfil-fila span { flex: 1; }
.perfil-fila b { color: var(--text-faint); font-weight: 400; }
.perfil-fila:disabled { opacity: .5; }
.perfil-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* Chips de filtro por grupo muscular: siempre con el color del grupo (igual
   que las etiquetas de Inicio); el seleccionado, relleno con ese color. */
.chip[style*="--c"] { background: color-mix(in srgb, var(--c) 16%, var(--bg-elevated)); color: color-mix(in srgb, var(--c) 50%, var(--text)); }
.chip[style*="--c"].active { background: var(--c); color: color-mix(in srgb, var(--c) 15%, #000); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); }
html[data-intensity="vivo"]:not([data-theme="dark"]) .chip[style*="--c"].active { color: #fff; }
@media (prefers-color-scheme: dark) {
  html[data-intensity="vivo"]:not([data-theme="light"]) .chip[style*="--c"].active { color: color-mix(in srgb, var(--c) 15%, #000); }
  html:not([data-theme="light"]) .chip[style*="--c"]:not(.active) { color: color-mix(in srgb, var(--c) 80%, var(--text)); }
}
html[data-theme="dark"] .chip[style*="--c"]:not(.active) { color: color-mix(in srgb, var(--c) 80%, var(--text)); }

/* ---- Progreso: frecuencia, vistas Diario / Semanal (rediseño oct 2026) ---- */
.frec-periodos { gap: 5px; }
.frec-periodos .chip { padding: 5px 10px; font-size: 12.5px; }
.frec-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 14px; }
.frec-linea { width: 100%; height: 34px; display: block; }
.frec-celda { width: 100%; border-radius: 8px; background: var(--bg-inset); border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-muted); font: inherit; }
.frec-celda.on { background: color-mix(in srgb, var(--accent) calc(var(--o) * 100%), var(--bg-elevated)); cursor: pointer; color: var(--text); }
.frec-celda.on:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.frec-celda.vacia { background: transparent; }
.frec-celda small { font: 600 10.5px/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.frec-dots { display: flex; gap: 2px; }
.frec-dots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.frec-letra { font-size: 10px; font-weight: 600; color: var(--text-faint); text-align: center; }
.frec-num { font: 600 12px var(--f-cond); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.frec-mes { position: absolute; left: 3px; bottom: -14px; white-space: nowrap; font: 700 10.5px var(--f-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); pointer-events: none; }
/* Diario: un día por columna, el ancho se reparte; mínimo = lo justo para los puntos. */
.frec-track { position: relative; min-width: calc(var(--n) * 26px); }
.frec-cols { display: flex; }
.frec-dia { flex: 1 1 0; min-width: 26px; display: grid; grid-template-rows: 14px 38px 16px; justify-items: center; align-items: center; gap: 3px; padding: 0 1.5px; position: relative; }
.frec-dia .frec-celda { height: 38px; }
.frec-dia.mes-ini { border-left: 1px dashed var(--border); }
.frec-dia.lunes .frec-letra { color: var(--text-muted); }
/* Semanal: columnas = semanas, filas = L..D. */
.frec-sem { display: grid; grid-template-columns: 14px repeat(var(--n), minmax(28px, 1fr)); gap: 3px; min-width: calc(14px + var(--n) * 31px); align-items: center; }
.frec-sem > .frec-linea { grid-column: 2 / -1; }
.frec-sem-letra { font-size: 9.5px; }
.frec-sem-cel { position: relative; }
.frec-sem-cel .frec-celda { height: 30px; }
.frec-sem-cel.mes-ini, .frec-sem-pie.mes-ini { box-shadow: -2px 0 0 -0.5px var(--border); }
.frec-sem-pie { position: relative; text-align: center; padding-top: 2px; }
.frec-sem-pie b { font: 700 12px var(--f-cond); color: var(--text-muted); }

/* Chips de grupo clickeables (llevan a Ejercicios o filtran) */
button.gchip { border: 0; cursor: pointer; font-family: inherit; line-height: 1.5; }
button.gchip:focus-visible { outline: 2px solid var(--c, var(--accent)); outline-offset: 1px; }
.gchip.on { background: var(--c); color: color-mix(in srgb, var(--c) 15%, #000); }
.gchip-mas.on { background: var(--text); color: var(--bg); }
.ses-card[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Fichas de récords del detalle de ejercicio: 2 por línea en celular,
   las 4 en una línea cuando entran (nunca 3 + 1 suelta). */
.pr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 520px) { .pr-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pr-card { background: var(--bg-elevated); border: 1px solid var(--border); padding: 12px 10px; }
.pr-card .label { text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; font-weight: 600; }

/* ---- Menú de 3 puntos del topbar (rediseño oct 2026) ---- */
.topbar { position: sticky; }
.top-menu { position: absolute; right: 12px; top: calc(100% - 6px); z-index: 60; min-width: 230px; max-width: calc(100vw - 24px);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.45);
  display: flex; flex-direction: column; animation: menuIn var(--dur-fast) var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.top-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; color: var(--text); font: 600 14.5px var(--f-body); padding: 11px 12px; border-radius: 10px; cursor: pointer; text-align: left; }
.top-menu-item:hover, .top-menu-item:focus-visible { background: var(--bg-inset); outline: none; }
.top-menu-icon { width: 22px; display: grid; place-items: center; color: var(--text-muted); font-size: 16px; }
.top-menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
@media (prefers-reduced-motion: reduce) { .top-menu { animation: none; } }


/* ---- Ajustes oct 2026: menú, Perfil y Progreso en pantalla grande ---- */
/* Menú principal (barra de abajo y lateral): misma letra que los títulos, sin negrita. */
.nav-item { font-family: var(--f-cond); font-weight: 500; font-size: 12px; letter-spacing: .02em; }
.sidebar-nav .nav-item { font-size: 15.5px; }
.sidebar-brand-label { font-family: var(--f-cond); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
/* Perfil: combinaciones en dos columnas cuando hay lugar. */
.pal-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
/* Progreso: tarjetas de una misma fila con la misma altura (el gráfico estira). */
.dash-grid > * { display: flex; flex-direction: column; }
.dash-grid > * > .card, .dash-grid > * > .chart-wrap { flex: 1; }
/* Tamaño de letra (Perfil): fila con − valor + y botón Normal. */
.font-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; background: var(--bg-inset); border-radius: 9px; padding: 3px; }
.stepper button { width: 38px; height: 34px; border: 0; border-radius: 9px; background: var(--bg-elevated); color: var(--text); font: 700 18px var(--f-body); cursor: pointer; }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper output { min-width: 64px; text-align: center; font: 700 17px var(--f-cond); font-variant-numeric: tabular-nums; }
.colores-card .seg { max-width: 520px; }

/* ---- Perfil: arriba usuario + avatares (lado a lado en pantalla grande, misma altura) ---- */
.perfil-top { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; align-items: stretch; }
.perfil-usuario { display: flex; align-items: center; gap: 16px; }
.perfil-avatar { flex-shrink: 0; line-height: 0; }
.perfil-nombre { font: 700 24px/1.1 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 4px; }
.perfil-dato { color: var(--text-muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-avatares > div[style*="grid"] { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)) !important; gap: 10px 6px !important; }

/* Perfil: Modo / Tamaño de letra / Intensidad en una línea en pantalla grande */
.pal-ajustes { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pal-grupo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pal-grupo .pal-label { margin-top: 0; }
.colores-card .pal-ajustes .seg { max-width: none; }
.font-row { flex-wrap: nowrap; }
.stepper { flex: 1; display: flex; }
.stepper output { flex: 1; }
@media (min-width: 880px) {
  html:not([data-layout="mobile"]) .pal-ajustes { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
  html:not([data-layout="mobile"]) .pal-grupo-modo { grid-column: span 2; }
}
html[data-layout="desktop"] .pal-ajustes { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
html[data-layout="desktop"] .pal-grupo-modo { grid-column: span 2; }
/* Pantalla grande: más aire a los costados del bloque de tamaño de letra. */
@media (min-width: 880px) {
  html:not([data-layout="mobile"]) .pal-ajustes { column-gap: 36px; }
}
html[data-layout="desktop"] .pal-ajustes { column-gap: 36px; }

/* Perfil: avatares ocultos hasta tocar el lapicito del avatar (celular y pantalla grande). */
.perfil-avatar { position: relative; }
.perfil-avatar-edit { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bg-elevated);
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; padding: 0; line-height: 0; }
.perfil-avatar-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.perfil-avatares { display: none; }
.perfil-top.avatares-abiertos .perfil-avatares { display: flex; }

/* ---- Login: accesos de prueba en desplegable ---- */
.demo-accesos { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.demo-accesos summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text-muted); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.demo-accesos summary::-webkit-details-marker { display: none; }
.demo-accesos summary::after { content: "▾"; transition: transform var(--dur-fast); }
.demo-accesos[open] summary::after { transform: rotate(180deg); }
.demo-accesos summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.demo-acceso { background: var(--bg-inset); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 8px; }

/* ---- Instalar la app en iPhone: pasos de Safari ---- */
.instalar-capa { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.instalar-card { width: min(420px, 100%); background: var(--bg-elevated); color: var(--text); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.instalar-card h2 { font: 700 22px var(--f-cond); text-transform: uppercase; margin: 0; }
.instalar-card ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; }
.instalar-card p { color: var(--text-muted); font-size: 13px; }

/* ---- Marca "Una Más" (oct 2026): isologo +1 y logo completo ----
   Colores fijos de la marca (opción 1: pizarra + lavanda), invertidos en
   oscuro. No siguen la combinación elegida en Perfil (por ahora). */
:root { --logo-bg: #334155; --logo-ink: #c4b5fd; --logo-mas: #6d28d9; }
:root[data-theme="dark"] { --logo-bg: #c4b5fd; --logo-ink: #1e1b2e; --logo-mas: #c4b5fd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --logo-bg: #c4b5fd; --logo-ink: #1e1b2e; --logo-mas: #c4b5fd; }
}
.logo-iso { --s: 32px; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .22);
  background: var(--logo-bg); color: var(--logo-ink); font: 800 calc(var(--s) * .5)/1 var(--f-cond); letter-spacing: -.03em; flex-shrink: 0; }
.logo-full { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.logo-wm { font-family: var(--f-cond); font-weight: 800; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.logo-wm b { color: var(--logo-mas); font-weight: 800; }
.topbar-logo { display: flex; align-items: center; }
.topbar > .logo-iso { margin-right: -2px; }
.auth-logo.auth-logo-marca { background: none; width: auto; height: auto; }
.sidebar-brand-mark { background: none; width: auto; height: auto; }
.sidebar-brand-label { font-weight: 800; }
.sidebar-brand-label b { color: var(--logo-mas); font-weight: 800; }