/* =========================================================
   FULL TORO — Consola del Coach
   Mismo sistema corregido que la app del atleta:
   Anton + Barlow Semi Condensed · contraste subido ·
   glass solo donde flota · jerarquía de botones.
   ========================================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(var(--violet-2-rgb),0.18); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

:root {
  --bg-0: #0a0614;
  --bg-1: #100a20;
  --panel: #0a0714;

  --violet:   #8b5cf6;
  --violet-2: #a78bfa;
  --violet-3: #7c3aed;
  --violet-4: #6d28d9;
  --violet-5: #5b21b6;
  --violet-soft: #c4b5fd;
  --violet-icon: #b89bff;
  --violet-rgb: 139,92,246;
  --violet-2-rgb: 167,139,250;
  --violet-3-rgb: 124,58,237;

  /* texto de máximo contraste (blanco en dark, se invierte a oscuro en modo marca claro) */
  --ink-strong: #fff;
  /* superficies temables (se invierten en modo marca claro) */
  --bg-top: #241248;
  --head-bg: rgba(14,10,28,0.82);
  --panel: rgba(20,14,32,0.97);
  /* text ramp — raised floor for legibility on dark */
  --txt:   #f5f3fb;
  --txt-2: #ebe7f6;
  --txt-3: #d8d1ed;
  --txt-4: #c4bbdf;
  --txt-5: #b2a9cd;
  --txt-6: #a59cbf;
  --txt-7: #978eb1;
  --txt-8: #897fa3;

  /* superficies sólidas y tintadas (no translúcidas) — flatten */
  --glass:     #1b1036;
  --glass-2:   #241545;
  --glass-brd: rgba(255,255,255,0.07);
  --glass-brd-2: rgba(255,255,255,0.11);
  --vglass:     rgba(var(--violet-3-rgb),0.13);
  --vglass-brd: rgba(var(--violet-2-rgb),0.26);

  --success: #34d27f;
  --danger:  #f0a8a8;
  --danger-soft: rgba(240,138,138,0.14);
  --blue: #6ea8fe;

  --font-ui:  'Barlow Semi Condensed', -apple-system, system-ui, sans-serif;
  --font-display: 'Anton', 'Barlow Semi Condensed', system-ui, sans-serif;

  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-violet: 0 14px 30px -12px rgba(var(--violet-3-rgb),0.7);
  --shadow-card: 0 40px 90px -30px rgba(0,0,0,0.7);
  --sidebar-w: 244px;
}

html, body {
  background:
    radial-gradient(90% 55% at 50% -5%, var(--bg-top) 0%, var(--bg-1) 55%, var(--bg-0) 100%) fixed;
  color: var(--txt);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: transparent; }

/* sport eyebrow / label (replaces all the mockup's mono labels) */
.eyebrow {
  font: 700 11px/1 var(--font-ui);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-6);
}

/* display titles — Anton, jersey caps */
.h-xl, .h-lg, .h-md {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink-strong);
}
.h-xl { font-size: 30px; }
.h-lg { font-size: 24px; }
.h-md { font-size: 19px; }

/* ============================================================ APP SHELL */
.shell { display: flex; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-w); flex: none;
  display: flex; flex-direction: column;
  padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
  border-right: 1px solid var(--glass-brd);
  background: rgba(255,255,255,0.015);
  position: sticky; top: 0; height: 100dvh;
}
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 22px; margin-bottom: 4px; border-bottom: 1px solid var(--glass-brd); }
.sb-logo { width: 42px; height: 42px; flex: none; display: block; }
.sb-brandname { font: 400 24px/1 var(--font-display); color: var(--ink-strong); letter-spacing: 0.04em; }

.sb-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 16px; }
/* items con barra lateral en el activo (no pill genérico) */
.sb-item {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 0 11px 11px 0;
  color: var(--txt-6); font: 700 13px/1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase;
  border-left: 3px solid transparent; transition: all .15s var(--easing);
}
.sb-item svg { width: 19px; height: 19px; stroke: currentColor; flex: none; }
.sb-item:hover { color: var(--txt-3); background: rgba(255,255,255,0.03); }
.sb-item.active { color: var(--ink-strong); border-left-color: var(--violet-2); background: linear-gradient(90deg, rgba(var(--violet-2-rgb),0.18), transparent 82%); }
.sb-item.active svg { stroke: var(--violet-2); }

.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--glass-brd); }
.sb-coach { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-brd); }
.sb-coach .av {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--violet-soft), var(--violet-3));
  font: 700 12px/1 var(--font-ui); color: var(--ink-strong);
}
.sb-coach .nm { font: 700 13px/1 var(--font-ui); color: var(--ink-strong); }
.sb-coach .rl { margin-top: 4px; font: 700 9px/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-2); }

/* main */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.view { display: none; flex-direction: column; min-height: 0; flex: 1; }
.view.active { display: flex; animation: fade .3s var(--easing); }
/* opacity-only (no translateY) so it never spawns a transient scrollbar */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* entrada coreografiada + micro-interacciones (movimiento) */
.view.active .stat-row > .stat, .view.active .trow, .view.active .routine-card { animation: crise .5s var(--easing) both; }
.view.active .stat-row > .stat:nth-child(2) { animation-delay: .05s; }
.view.active .stat-row > .stat:nth-child(3) { animation-delay: .10s; }
.view.active .stat-row > .stat:nth-child(4) { animation-delay: .15s; }
.view.active .trow:nth-child(2), .view.active .routine-card:nth-child(2) { animation-delay: .05s; }
.view.active .trow:nth-child(3), .view.active .routine-card:nth-child(3) { animation-delay: .09s; }
.view.active .trow:nth-child(4), .view.active .routine-card:nth-child(4) { animation-delay: .13s; }
.view.active .trow:nth-child(n+5), .view.active .routine-card:nth-child(n+5) { animation-delay: .16s; }
@keyframes crise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.trow, .routine-card, .share-row, .np-opt { transition: transform .13s var(--easing), border-color .2s var(--easing), background .2s var(--easing); }
.trow:active, .routine-card:active, .share-row:active, .np-opt:active { transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) {
  .view.active .stat-row > .stat, .view.active .trow, .view.active .routine-card { animation: none !important; }
  .trow:active, .routine-card:active, .share-row:active, .np-opt:active { transform: none; }
}

.view-head {
  padding: 26px 32px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; z-index: 20;
  background: var(--head-bg); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--glass-brd);
}
.view-head .sub { margin-top: 8px; font: 500 13px/1.4 var(--font-ui); color: var(--txt-5); }
.head-actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: 12px;
  font: 700 13px/1 var(--font-ui); color: var(--txt-2);
  background: var(--glass-2); border: 1px solid var(--glass-brd-2);
  transition: transform .12s var(--easing), background .15s var(--easing);
}
.btn svg { width: 15px; height: 15px; stroke: currentColor; }
.btn:active { transform: scale(0.98); }
.btn.primary {
  color: var(--ink-strong); background: linear-gradient(135deg, var(--violet), var(--violet-4));
  border: 0; box-shadow: var(--shadow-violet);
}
.btn.violet { color: var(--ink-strong); background: rgba(var(--violet-2-rgb),0.22); border-color: rgba(var(--violet-2-rgb),0.42); }
.btn.lg { padding: 14px 20px; font-size: 15px; border-radius: 14px; }

/* botón partido: Nueva rutina (desde cero / con IA) */
.split-wrap { position: relative; }
.split-btn { display: inline-flex; align-items: stretch; }
.split-btn .split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn .split-caret {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding: 11px 10px; margin-left: 1px;
  box-shadow: var(--shadow-violet);
}
.split-btn .split-caret::before {
  content: ''; position: absolute; left: 0; top: 18%; height: 64%; width: 1px;
  background: rgba(255,255,255,0.28);
}
.split-btn .split-caret { position: relative; }
.split-btn .split-caret svg { width: 16px; height: 16px; }
.np-menu {
  position: absolute; z-index: 300; top: calc(100% + 8px); right: 0; min-width: 234px;
  padding: 6px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--glass-brd-2, var(--glass-brd));
  box-shadow: 0 20px 50px rgba(0,0,0,0.5); backdrop-filter: blur(20px);
}
.np-menu[hidden] { display: none; }
.np-menu button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border-radius: 10px; background: transparent; border: 0; cursor: pointer; text-align: left;
}
.np-menu button:hover { background: var(--glass-2); }
.np-menu .npm-ic { font-size: 17px; line-height: 1; flex: none; }
.np-menu .npm-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.np-menu .npm-txt b { font: 700 13.5px/1 var(--font-ui); color: var(--ink-strong); }
.np-menu .npm-txt span { font: 500 11.5px/1.2 var(--font-ui); color: var(--txt-6); }

.search {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-brd);
  color: var(--txt-7); min-width: 220px;
}
.search svg { width: 16px; height: 16px; stroke: currentColor; flex: none; }
.search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font: 500 13px/1 var(--font-ui); color: var(--txt-2);
}
.search input::placeholder { color: var(--txt-7); }

.icon-btn {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-2); border: 1px solid var(--glass-brd); color: var(--txt-4);
}
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; }

/* ============================================================ ENTRENADOS */
.scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 40px; }

/* tira de resumen discreta (no hero-tiles) */
.stat-row {
  padding: 20px 32px 4px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.stat { display: flex; align-items: baseline; gap: 7px; padding: 0; background: none; border: 0; }
.stat .v { font: 400 21px/1 var(--font-display); color: var(--ink-strong); letter-spacing: 0.01em; }
.stat.accent .v { color: var(--violet-2); }
.stat .v .pct { font-size: 13px; color: var(--violet-2); }
.stat .l { font: 600 12px/1 var(--font-ui); color: var(--txt-6); }
/* KPIs de Entrenados: como tarjetas, con más jerarquía */
.stat-row .stat {
  flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 16px 18px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--glass-brd);
}
.stat-row .stat.accent { background: var(--vglass); border-color: var(--vglass-brd); }
.stat-row .stat .v { font-size: 36px; line-height: 0.9; }
.stat-row .stat .v .pct { font-size: 18px; }
.stat-row .stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--txt-7); }
.stat-row .stat.accent .l { color: var(--violet-soft); }

.table-wrap { padding: 22px 32px 0; }
.thead, .trow {
  display: grid; grid-template-columns: 2.2fr 1fr 1.3fr 1.6fr 1.3fr 1.2fr; gap: 14px; align-items: center;
}
.thead {
  padding: 0 16px 12px; font: 700 10px/1 var(--font-ui);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-7);
}
.tbody { display: flex; flex-direction: column; gap: 9px; }
.trow {
  padding: 13px 16px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-brd);
  transition: background .15s var(--easing), border-color .15s var(--easing); cursor: pointer;
}
.trow:hover { border-color: var(--vglass-brd); }
.trow.active { background: var(--vglass); border-color: var(--vglass-brd); }
.who { display: flex; align-items: center; gap: 11px; }
.who .av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-ui); color: var(--ink-strong); }
.who .nm { font: 700 13px/1 var(--font-ui); color: var(--txt-2); }
.trow.active .who .nm { color: var(--ink-strong); }
.who .hd { margin-top: 4px; font: 500 11px/1 var(--font-ui); color: var(--txt-6); }
.tag { justify-self: start; padding: 4px 9px; border-radius: 8px; font: 700 10px/1 var(--font-ui); background: var(--glass-2); color: var(--txt-5); }
.tag.adv { background: rgba(var(--violet-2-rgb),0.18); color: var(--violet-soft); }
.tcell { font: 600 12px/1 var(--font-ui); color: var(--txt-3); }
.tcell.muted { font-weight: 500; color: var(--txt-4); }
.trow { cursor: pointer; }
.trow-end { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.disc-chip { position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; background: var(--glass); border: 1px solid var(--glass-brd); cursor: help; outline: none; }
.disc-chip.run { background: color-mix(in oklch, var(--violet-2) 16%, transparent); border-color: color-mix(in oklch, var(--violet-2) 34%, transparent); }
.disc-chip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); right: 0;
  padding: 6px 10px; border-radius: 9px; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--glass-brd-2);
  color: var(--ink-strong); font: 600 11px/1 var(--font-ui);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s var(--easing), transform .14s var(--easing);
  box-shadow: 0 10px 26px rgba(0,0,0,0.45); z-index: 40;
}
.disc-chip:hover::after, .disc-chip:focus-visible::after { opacity: 1; transform: translateY(0); }
.trow-more { display: inline-flex; align-items: center; gap: 4px; font: 700 12px/1 var(--font-ui); color: var(--violet-2); white-space: nowrap; }
.trow-more svg { width: 14px; height: 14px; }
.trow:hover .trow-more { color: var(--ink-strong); }
.trow-dots { width: 30px; height: 30px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--txt-4); background: transparent; cursor: pointer; }
.trow-dots:hover { background: var(--glass-2); color: var(--ink-strong); }
/* menú flotante de acciones */
.trow-menu { position: fixed; z-index: 300; min-width: 168px; padding: 6px; border-radius: 13px; background: var(--panel); border: 1px solid var(--glass-brd-2, var(--glass-brd)); box-shadow: 0 20px 50px rgba(0,0,0,0.5); backdrop-filter: blur(20px); }
.trow-menu[hidden] { display: none; }
.trow-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 9px; background: transparent; color: var(--txt-2); font: 600 13px/1 var(--font-ui); cursor: pointer; text-align: left; }
.trow-menu button svg { width: 16px; height: 16px; }
.trow-menu button:hover { background: var(--glass-2); color: var(--ink-strong); }
.trow-menu button.danger { color: #f0a8a8; }
.trow-menu button.danger:hover { background: rgba(240,80,80,0.12); }
/* nota explicativa (adherencia, etc.) */
.tr-note { margin-top: 12px; margin-bottom: 4px; font: 500 12.5px/1.45 var(--font-ui); color: var(--txt-4); }
.tr-note b { color: var(--txt-2); }
/* performance */
.perf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.perf-tile { padding: 14px 12px; border-radius: 14px; text-align: center; background: var(--glass); border: 1px solid var(--glass-brd); }
.perf-tile.accent { background: var(--vglass); border-color: var(--vglass-brd); }
.perf-tile .v { font: 400 26px/1 var(--font-display); color: var(--ink-strong); }
.perf-tile .v .pct { font: 400 14px/1 var(--font-display); color: var(--violet-2); }
.perf-tile .l { margin-top: 6px; font: 600 11px/1.2 var(--font-ui); color: var(--txt-5); }
.perf-chart-card { margin-top: 4px; padding: 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-brd); }
.perf-bars { display: flex; align-items: flex-end; gap: 8px; height: 132px; }
.perf-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; justify-content: flex-end; }
.perf-bar { width: 100%; max-width: 26px; border-radius: 6px 6px 0 0; background: var(--vglass); border: 1px solid var(--vglass-brd); min-height: 6px; }
.perf-col.peak .perf-bar { background: linear-gradient(180deg, var(--violet-2), var(--violet-3)); border-color: transparent; }
.perf-lbl { font: 600 10px/1 var(--font-ui); color: var(--txt-6); }
.perf-log { display: flex; flex-direction: column; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-brd); overflow: hidden; }
.perf-log-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--glass-brd); }
.perf-log-row:first-child { border-top: none; }
.pl-name { font: 600 13px/1.25 var(--font-ui); color: var(--txt-2); }
.pl-done { font: 600 12.5px/1.25 var(--font-ui); color: var(--txt-1); text-align: right; }
.pl-pending { font: 500 12.5px/1.25 var(--font-ui); color: var(--txt-6); text-align: right; }
.bar { display: flex; align-items: center; gap: 8px; }
.bar .track { flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
.bar .fill { height: 100%; background: var(--violet-2); border-radius: 4px; }
.bar .pc { font: 700 11px/1 var(--font-ui); color: var(--txt-3); }

/* ============================================================ GENERADOR */
.gen-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 22px 32px 28px; }
.panel { border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-brd); padding: 22px; display: flex; flex-direction: column; min-height: 0; }
.panel.violet { background: var(--vglass); border-color: var(--vglass-brd); }
.gen-form { gap: 18px; overflow-y: auto; }

.field-label { font: 700 10px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-7); margin-bottom: 10px; }

.pick-trainee {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: 13px; background: var(--vglass); border: 1px solid var(--vglass-brd);
}
.pick-trainee .av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 11px/1 var(--font-ui); color: var(--ink-strong); background: linear-gradient(150deg, var(--violet), var(--violet-5)); }
.pick-trainee .nm { font: 700 13px/1 var(--font-ui); color: var(--ink-strong); }
.pick-trainee .mt { margin-top: 4px; font: 500 11px/1 var(--font-ui); color: var(--txt-4); }
.pick-trainee svg { width: 16px; height: 16px; stroke: var(--violet-2); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 13px; border-radius: 11px; font: 600 12px/1 var(--font-ui);
  background: var(--glass); border: 1px solid var(--glass-brd); color: var(--txt-5);
  transition: all .12s var(--easing);
}
.chip.on { background: rgba(var(--violet-2-rgb),0.22); border-color: rgba(var(--violet-2-rgb),0.4); color: #e7ddff; }
.chip.solid { background: var(--violet); border-color: var(--violet); color: var(--ink-strong); }
.chip.danger { background: var(--danger-soft); border-color: rgba(240,138,138,0.3); color: var(--danger); }

.row-2 { display: flex; gap: 18px; }
.segmented { display: flex; padding: 4px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-brd); }
.segmented button { flex: 1; padding: 8px; border-radius: 9px; font: 600 11px/1 var(--font-ui); color: var(--txt-6); }
.segmented button.on { background: rgba(var(--violet-2-rgb),0.25); color: var(--ink-strong); }

.stepper { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--glass-brd); }
.stepper button { font: 700 16px/1 var(--font-ui); color: var(--violet-2); width: 24px; }
.stepper .n { font: 700 16px/1 var(--font-ui); color: var(--ink-strong); }

.slider-head { display: flex; justify-content: space-between; margin-bottom: 10px; }
.slider-head .val { font: 700 11px/1 var(--font-ui); color: var(--violet-soft); }
/* native range, themed */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.12); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.5); cursor: pointer; }
.range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.5); cursor: pointer; }
.range::-moz-range-progress { background: var(--violet-2); height: 6px; border-radius: 4px; }

/* editable preview title with pencil affordance */
.gp-title-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.gp-title-input { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px dashed transparent; padding: 2px 0; font: 400 19px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink-strong); }
.gp-title-input:not(:disabled) { border-bottom-color: var(--vglass-brd); }
.gp-title-input:focus { outline: none; border-bottom-color: var(--violet-2); }
.gp-title-input:disabled { color: var(--txt-5); }
.gp-pencil { width: 15px; height: 15px; flex: none; stroke: var(--violet-2); opacity: 0; transition: opacity .15s; }
.gp-title-input:not(:disabled) ~ .gp-pencil { opacity: 1; }

/* botón Generar fijo: no se va de pantalla aunque el form crezca */
.gen-cta { position: sticky; bottom: 0; margin-top: 8px; }

/* desplegable de entrenado (no modal) */
.gen-trainee-wrap { position: relative; }
#gen-trainee-chev { transition: transform .2s var(--easing); }
.gen-trainee-wrap.open #gen-trainee-chev { transform: rotate(180deg); }
.gen-dd {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  display: none; flex-direction: column; gap: 4px; padding: 6px;
  border-radius: 14px; background: var(--panel);
  border: 1px solid var(--glass-brd-2); box-shadow: var(--shadow-card);
  max-height: 260px; overflow-y: auto;
}
.gen-dd.show { display: flex; }
.gen-dd .dd-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px;
  background: transparent; width: 100%; text-align: left;
}
.gen-dd .dd-row:hover { background: var(--vglass); }
.gen-dd .dd-row .av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 11px/1 var(--font-ui); color: var(--ink-strong); }
.gen-dd .dd-row .nm { font: 600 13px/1 var(--font-ui); color: var(--txt-2); }

/* generador preview */
.gen-prev { gap: 0; overflow: hidden; }
.gp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.gp-sub { font: 500 11.5px/1.4 var(--font-ui); color: var(--txt-5); margin-bottom: 16px; }
.gp-blocks { flex: 1; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; }
.gp-block { padding: 13px 15px; border-radius: 13px; background: var(--glass); border: 1px solid var(--glass-brd); }
.gp-block.accent { background: var(--vglass); border-color: var(--vglass-brd); }
.gp-block .bt { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.gp-block .bt .name { font: 700 12px/1 var(--font-ui); color: var(--txt-3); }
.gp-block.accent .bt .name { color: #e7ddff; }
.gp-block .bt .meta { font: 600 10px/1 var(--font-ui); letter-spacing: 0.04em; color: var(--txt-7); }
.gp-block.accent .bt .meta { color: var(--violet-2); }
.gp-block .desc { font: 500 11.5px/1.5 var(--font-ui); color: var(--txt-5); }
.gp-ex { display: flex; gap: 8px; align-items: center; }
.gp-ex .k { font: 700 9px/1 var(--font-ui); color: var(--violet-soft); width: 18px; }
.gp-ex .n { font: 500 11.5px/1 var(--font-ui); color: var(--txt-3); }
.gp-foot { margin-top: 16px; display: flex; gap: 10px; }
.gp-foot .btn { flex: 1; }
.gp-foot .btn.violet { flex: 1.4; }
.badge { padding: 5px 10px; border-radius: 9px; font: 700 9px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; background: rgba(var(--violet-2-rgb),0.2); color: var(--violet-soft); }

/* ============================================================ EDITOR */
.editor-head {
  padding: 22px 28px; border-bottom: 1px solid var(--glass-brd);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.editor-title { display: flex; align-items: center; gap: 10px; }
.editor-title svg { width: 15px; height: 15px; stroke: var(--txt-7); }
.editor-tags { margin-top: 11px; display: flex; gap: 7px; flex-wrap: wrap; }
.editor-body { flex: 1; min-height: 0; display: flex; }
.canvas { flex: 1; min-width: 0; padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }

.block { border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-brd); padding: 16px; }
.block.accent { background: var(--vglass); border-color: var(--vglass-brd); }
.block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.dot.violet { background: var(--violet-2); } .dot.blue { background: var(--blue); }
.block-head .bname { font: 700 14px/1 var(--font-ui); color: var(--ink-strong); }
.block-head .bcount { font: 600 10px/1 var(--font-ui); letter-spacing: 0.04em; color: var(--txt-7); }
.ss-badge { padding: 3px 8px; border-radius: 7px; font: 700 9px/1 var(--font-ui); letter-spacing: 0.06em; background: rgba(var(--violet-2-rgb),0.22); color: var(--violet-soft); }
.drag-dots { margin-left: auto; }
.drag-dots svg { width: 14px; height: 14px; fill: none; stroke: var(--txt-8); }

.ss-wrap { display: flex; gap: 10px; }
.ss-rail { width: 4px; border-radius: 3px; background: rgba(var(--violet-2-rgb),0.4); flex: none; margin: 2px 0; }
.ex-rows { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ex-row {
  display: grid; grid-template-columns: 24px 1fr 64px 60px 24px; gap: 11px; align-items: center;
  padding: 10px 12px; border-radius: 11px; background: rgba(0,0,0,0.22);
}
.ex-row .ord { font: 700 11px/1 var(--font-ui); color: var(--violet-soft); text-align: center; }
.ex-row .grip { display: flex; }
.ex-row .grip svg { width: 11px; height: 16px; fill: var(--txt-8); }
.ex-row .exn { font: 500 12.5px/1.2 var(--font-ui); color: var(--ink-strong); }
.ex-row .reps { padding: 6px; border-radius: 8px; text-align: center; font: 700 11px/1 var(--font-ui); color: var(--txt-3); background: rgba(255,255,255,0.05); }
.ex-row .reps.v { background: rgba(var(--violet-2-rgb),0.16); color: #e7ddff; }
.ex-row .rest { font: 600 10px/1 var(--font-ui); color: var(--txt-7); text-align: center; }
.ex-row .swap { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--txt-7); }
.ex-row .swap:hover { background: rgba(var(--violet-2-rgb),0.16); color: var(--violet-soft); }
.ex-row .swap svg { width: 14px; height: 14px; stroke: currentColor; }

.add-block {
  height: 46px; border-radius: 14px; border: 1.5px dashed rgba(var(--violet-2-rgb),0.35);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 12px/1 var(--font-ui); color: var(--violet-2);
}
.add-block svg { width: 15px; height: 15px; stroke: currentColor; }

/* right rail mini library */
.rail { width: 268px; flex: none; border-left: 1px solid var(--glass-brd); padding: 20px 18px; display: flex; flex-direction: column; min-height: 0; }
.rail-list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; overflow-y: auto; }
.lib-item { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-brd); cursor: grab; }
.lib-item:hover { border-color: var(--vglass-brd); }
.lib-thumb { width: 30px; height: 30px; flex: none; border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(var(--violet-2-rgb),0.18) 0 4px, rgba(var(--violet-2-rgb),0.06) 4px 8px); }
.lib-item .ln { font: 600 12px/1.2 var(--font-ui); color: var(--txt-2); }
.lib-item .lm { margin-top: 4px; font: 600 9px/1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--txt-7); }
.lib-item .grip { margin-left: auto; }
.lib-item .grip svg { width: 13px; height: 13px; fill: var(--txt-8); }

/* ============================================================ LIBRERÍA */
.filters { padding: 18px 32px 0; display: flex; flex-direction: column; gap: 10px; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-row .flabel { font: 700 9px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-7); margin-right: 4px; }
.lib-body { flex: 1; min-height: 0; display: flex; }
/* librería como LISTA (no grilla de cards, sin thumbnails rayados) */
.lib-grid { flex: 1; min-width: 0; padding: 18px 28px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.lib-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-brd); cursor: pointer; width: 100%; text-align: left; transition: border-color .15s var(--easing); }
.lib-row:hover, .lib-row.active { border-color: var(--vglass-brd); }
.lib-row.active { background: var(--vglass); }
.lib-row .ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 800 11px/1 var(--font-ui); color: var(--violet-soft); background: rgba(var(--violet-2-rgb),0.14); border: 1px solid rgba(var(--violet-2-rgb),0.22); }
.lib-row .nm { font: 600 13.5px/1.2 var(--font-ui); color: var(--txt-2); }
.lib-row.active .nm { color: var(--ink-strong); }
.lib-row .lib-tags { margin-left: auto; display: flex; gap: 6px; flex: none; }
.mini-tag { padding: 4px 8px; border-radius: 7px; font: 600 9px/1 var(--font-ui); background: var(--glass-2); color: var(--txt-6); white-space: nowrap; }
.mini-tag.v { background: rgba(var(--violet-2-rgb),0.2); color: var(--violet-soft); }

.detail { width: 304px; flex: none; border-left: 1px solid var(--glass-brd); padding: 22px 20px; display: flex; flex-direction: column; overflow-y: auto; }
.detail-name { font: 400 22px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink-strong); }
.detail-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.detail-cues { margin-top: 18px; }
.detail-cues .sec-label { margin-top: 0; }
.detail-cues .lib-cues-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.detail-cues .lib-cues-list li { font: 500 13.5px/1.45 var(--font-ui); color: var(--txt-2); }
.detail .sec-label { margin-top: 18px; margin-bottom: 11px; }
.var-list { display: flex; flex-direction: column; gap: 8px; }
.var { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; background: var(--glass); border: 1px solid var(--glass-brd); font: 500 12px/1 var(--font-ui); color: var(--txt-3); }
.var svg { width: 13px; height: 13px; stroke: var(--txt-7); margin-left: auto; }
.detail .btn { margin-top: auto; }

/* ============================================================ MODAL (reemplazo) — glass floats here */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center; padding: 40px;
  background: rgba(6,4,12,0.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.modal-backdrop.show { display: flex; }
.modal {
  width: 768px; max-width: 100%; max-height: 86vh; display: flex; flex-direction: column;
  border-radius: 24px; background: var(--panel); border: 1px solid var(--vglass-brd);
  box-shadow: var(--shadow-card); overflow: hidden; animation: pop .28s var(--easing);
}
@keyframes pop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.modal-head { padding: 22px 24px; border-bottom: 1px solid var(--glass-brd); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-target { margin-top: 13px; display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 12px; background: var(--glass-2); border: 1px solid var(--glass-brd); }
.modal-target .k { font: 700 10px/1 var(--font-ui); color: var(--violet-soft); }
.modal-target .n { font: 600 13px/1 var(--font-ui); color: var(--txt-2); }
.modal-target .m { font: 600 10px/1 var(--font-ui); letter-spacing: 0.04em; color: var(--txt-7); }
.modal-filters { padding: 16px 24px 6px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.modal-grid { flex: 1; min-height: 0; padding: 14px 24px 16px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; gap: 12px; overflow-y: auto; }
/* picker como LISTA */
#libpicker-grid { display: flex; flex-direction: column; gap: 7px; grid-template-columns: none; }
.libpick-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 11px; background: var(--glass); border: 1px solid var(--glass-brd); cursor: pointer; width: 100%; text-align: left; transition: border-color .15s var(--easing); }
.libpick-row:hover { border-color: var(--vglass-brd); background: var(--vglass); }
.libpick-row .ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; font: 800 10px/1 var(--font-ui); color: var(--violet-soft); background: rgba(var(--violet-2-rgb),0.14); border: 1px solid rgba(var(--violet-2-rgb),0.22); }
.libpick-row .nm { font: 600 13px/1.2 var(--font-ui); color: var(--txt-2); }
.libpick-row .pmeta { margin-left: auto; font: 600 10px/1 var(--font-ui); color: var(--txt-6); white-space: nowrap; }
.libpick-row .go { font: 700 10px/1 var(--font-ui); color: var(--violet-soft); flex: none; }
.modal-foot { margin-top: auto; padding: 18px 24px; border-top: 1px solid var(--glass-brd); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toggle-line { display: flex; align-items: center; gap: 11px; font: 600 12.5px/1 var(--font-ui); color: var(--txt-3); }
.toggle-line .em { color: var(--violet-2); }
.toggle { width: 42px; height: 25px; flex: none; border-radius: 14px; background: var(--violet); position: relative; }
.toggle::after { content: ""; position: absolute; top: 2.5px; right: 2.5px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }

/* ============================================================ COACH AUTH OVERLAY */
.auth-ov {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(90% 55% at 50% -5%, var(--bg-top), var(--bg-1) 55%, var(--bg-0));
}
.auth-ov.show { display: flex; }
.auth-card {
  width: 100%; max-width: 380px; padding: 32px 28px;
  border-radius: 22px; background: var(--glass-2); border: 1px solid var(--glass-brd-2);
  box-shadow: var(--shadow-card);
}
.auth-logo { width: 58px; height: 58px; display: block; margin: 0 auto 14px; }
.auth-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px; border-radius: 12px; background: #fff; color: #1f1f22; font: 700 14px/1 var(--font-ui); cursor: pointer; margin: 4px 0 14px; transition: filter .15s ease; }
.auth-google:hover { filter: brightness(0.96); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--txt-6); font: 700 10px/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--glass-brd); }
.auth-links { margin-top: 16px; text-align: center; }
.auth-link { font: 600 13px/1 var(--font-ui); color: var(--violet-2); background: none; border: none; cursor: pointer; }
.auth-link:hover { color: var(--violet-soft); }

/* ---- perfil ---- */
.profile { max-width: 592px; display: flex; flex-direction: column; gap: 22px; padding: 8px 32px 44px; }
@media (max-width: 900px) { .profile { padding: 8px 18px 44px; } }
.profile-photo { display: flex; align-items: center; gap: 18px; }
.pf-av {
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font: 400 28px/1 var(--font-display); color: var(--ink-strong);
  background: linear-gradient(150deg, var(--violet-soft), var(--violet-3));
  background-size: cover; background-position: center;
}
.profile-photo label.btn { cursor: pointer; }
.profile-field { display: flex; flex-direction: column; }
.pf-bio { min-height: 110px; resize: vertical; font: 500 14px/1.5 var(--font-ui); }
#pf-email:disabled { opacity: 0.55; cursor: not-allowed; }
.profile-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.btn.danger { color: #f0a8a8; border-color: rgba(240,168,168,0.38); }
.btn.danger:hover { background: rgba(240,168,168,0.12); }

/* ---- invitación por link ---- */
.invite-link { font: 600 13px/1.4 var(--font-ui); color: var(--violet-soft); background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 10px; padding: 10px 12px; word-break: break-all; text-align: center; }

/* ---- videos de la librería ---- */
.lib-videos { display: flex; flex-direction: column; gap: 7px; }
.vid-row { display: flex; align-items: center; gap: 8px; }
.vid-row a { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 10px; padding: 9px 11px; color: var(--txt-2); font: 600 13px/1 var(--font-ui); }
.vid-row a:hover { border-color: var(--vtint-brd); color: var(--ink-strong); }
.vid-row .vp { color: var(--violet-2); flex: none; font-size: 11px; }
.vid-row .vl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid-del { width: 30px; height: 30px; flex: none; border-radius: 9px; color: var(--txt-6); background: var(--glass-2); border: 1px solid var(--glass-brd); }
.vid-del:hover { color: #f0a8a8; border-color: rgba(240,168,168,0.4); }

/* botón crear entrenamiento en la fila del entrenado sin rutina */
.trow-create { justify-self: start; align-self: center; font: 700 12px/1 var(--font-ui); color: var(--violet-soft); background: var(--vtint); border: 1px solid var(--vtint-brd); border-radius: 9px; padding: 9px 13px; cursor: pointer; transition: background .15s var(--easing), color .15s var(--easing); }
.trow-create:hover { background: rgba(var(--violet-2-rgb),0.28); color: var(--ink-strong); }
.auth-brand { font: 400 30px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-strong); text-align: center; }
.auth-eyebrow { margin-top: 14px; text-align: center; font: 700 11px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-2); }
.auth-help { margin-top: 12px; text-align: center; font: 500 13px/1.5 var(--font-ui); color: var(--txt-5); }
.auth-form { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.auth-form input {
  width: 100%; padding: 14px; border-radius: 13px;
  background: var(--glass-2); border: 1px solid var(--glass-brd); color: var(--ink-strong);
  font: 500 15px/1 var(--font-ui);
}
.auth-form input:focus { outline: none; border-color: rgba(var(--violet-2-rgb),0.5); }
.auth-form button {
  margin-top: 4px; padding: 15px; border-radius: 14px;
  background: linear-gradient(135deg, var(--violet), var(--violet-4));
  font: 700 15px/1 var(--font-ui); color: var(--ink-strong); box-shadow: var(--shadow-violet);
}
.auth-status { margin-top: 12px; text-align: center; font: 500 13px/1.4 var(--font-ui); min-height: 18px; }
.auth-status.error { color: var(--danger); }
.auth-status.ok { color: var(--success); }

/* invite code */
.invite-code {
  font: 400 30px/1 var(--font-display); letter-spacing: 0.06em; color: var(--ink-strong);
  padding: 16px 22px; border-radius: 14px; text-align: center; width: 100%;
  background: var(--vglass); border: 1px solid var(--vglass-brd);
}

.empty-note { padding: 40px 32px; color: var(--txt-5); font: 500 14px/1.5 var(--font-ui); }

/* ============================================================ RUTINAS (lista) */
.routines-list { padding: 22px 32px 0; display: flex; flex-direction: column; gap: 11px; }
.routine-card {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-brd);
}
.routine-card:hover { border-color: var(--vglass-brd); }
.rc-main { flex: 1; min-width: 0; }
.rc-name { font: 700 16px/1.2 var(--font-ui); color: var(--ink-strong); }
.rc-meta { margin-top: 6px; font: 500 12px/1 var(--font-ui); color: var(--txt-6); }
.rc-actions { display: flex; gap: 8px; flex: none; }
.rc-del { padding: 11px; color: var(--danger); background: var(--danger-soft); border-color: rgba(240,138,138,0.28); }
.rc-del svg { width: 16px; height: 16px; }
.rc-del:hover { background: rgba(240,138,138,0.22); }
.rc-del-confirm { background: var(--danger-soft); border-color: rgba(240,138,138,0.3); color: var(--danger); }

/* elegir rutina/día para agregar ejercicio */
.addto-routine { padding: 13px 14px; border-radius: 13px; background: var(--glass); border: 1px solid var(--glass-brd); }
.addto-rn { font: 700 14px/1 var(--font-ui); color: var(--ink-strong); }
.addto-days { margin-top: 10px; display: flex; gap: 7px; flex-wrap: wrap; }
.addto-day { padding: 8px 13px; border-radius: 10px; font: 700 12px/1 var(--font-ui); color: var(--violet-2); background: rgba(var(--violet-2-rgb),0.16); border: 1px solid rgba(var(--violet-2-rgb),0.3); }
.addto-day:hover { background: rgba(var(--violet-2-rgb),0.3); color: var(--ink-strong); }

/* routine editor + share modals */
.rt-input {
  width: 100%; padding: 13px 14px; border-radius: 12px;
  background: var(--glass-2); border: 1px solid var(--glass-brd); color: var(--ink-strong);
  font: 600 15px/1 var(--font-ui);
}
.rt-input:focus, .rt-textarea:focus { outline: none; border-color: rgba(var(--violet-2-rgb),0.5); }
.rt-hint { font: 500 11.5px/1.6 var(--font-ui); color: var(--txt-6); }
.rt-hint code { font-family: ui-monospace, monospace; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,0.3); color: var(--violet-soft); }
.rt-textarea {
  width: 100%; min-height: 280px; resize: vertical; padding: 14px; border-radius: 12px;
  background: var(--glass-2); border: 1px solid var(--glass-brd); color: var(--txt-2);
  font: 500 13px/1.6 ui-monospace, monospace;
}
.rt-status { font: 600 13px/1.4 var(--font-ui); min-height: 18px; }
.rt-status.error { color: var(--danger); }
.rt-status.ok { color: var(--success); }
.share-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 13px; background: var(--glass); border: 1px solid var(--glass-brd); cursor: pointer; width: 100%; text-align: left;
}
.share-row:hover { border-color: var(--vglass-brd); background: var(--vglass); }
.share-row .av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-ui); color: var(--ink-strong); }
.share-row .nm { font: 700 13px/1 var(--font-ui); color: var(--txt-2); }
.share-row .ap-emo { width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; background: var(--glass-2); border: 1px solid var(--glass-brd); }
.share-row .ap-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.share-row .ap-meta { font: 500 11.5px/1.2 var(--font-ui); color: var(--txt-6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================ EDITOR FUNCIONAL (días → ejercicios) */
.ed-title-input {
  width: 100%; max-width: 460px; padding: 6px 0; background: transparent; border: 0; border-bottom: 1px solid transparent;
  font: 400 24px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink-strong);
}
.ed-title-input:focus { outline: none; border-bottom-color: var(--vglass-brd); }
.ed-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ed-days { display: flex; gap: 8px; flex-wrap: wrap; padding: 18px 28px 0; }
.ed-day-tab {
  padding: 9px 14px; border-radius: 11px; font: 700 12px/1 var(--font-ui); color: var(--txt-5);
  background: var(--glass); border: 1px solid var(--glass-brd);
}
.ed-day-tab.active { background: var(--vglass); border-color: var(--vglass-brd); color: var(--ink-strong); }
.ed-add-day { padding: 9px 13px; border-radius: 11px; font: 700 14px/1 var(--font-ui); color: var(--violet-2); background: var(--glass); border: 1px dashed var(--vglass-brd); }
.ed-canvas { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 28px 40px; display: flex; flex-direction: column; gap: 10px; }
.ed-day-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ed-day-title { flex: 1; padding: 10px 13px; border-radius: 11px; background: var(--glass-2); border: 1px solid var(--glass-brd); color: var(--ink-strong); font: 700 14px/1 var(--font-ui); }
.ed-day-title:focus { outline: none; border-color: var(--vglass-brd); }
.ed-rm-day { width: 38px; height: 38px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--danger); background: var(--danger-soft); border: 1px solid rgba(240,138,138,0.3); }
.ed-rm-day svg { width: 16px; height: 16px; stroke: currentColor; }
.ed-ex {
  display: grid; grid-template-columns: 24px 1fr 50px 12px 60px 52px 32px 32px; gap: 8px; align-items: center;
  padding: 9px 12px; border-radius: 12px; background: rgba(0,0,0,0.22); border: 1px solid var(--glass-brd);
}
.ed-swap { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--violet-2); background: rgba(var(--violet-2-rgb),0.14); }
.ed-swap:hover { background: rgba(var(--violet-2-rgb),0.26); }
.ed-swap svg { width: 15px; height: 15px; stroke: currentColor; }
.ed-ex .ord { font: 700 12px/1 var(--font-ui); color: var(--violet-soft); text-align: center; }
.ed-ex .sep { text-align: center; color: var(--txt-7); font: 700 12px/1 var(--font-ui); }
.ed-ex input { background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 9px; color: var(--ink-strong); padding: 9px 10px; font: 500 13px/1 var(--font-ui); min-width: 0; }
.ed-ex input.exn { font-weight: 600; }
.ed-ex input.num { text-align: center; font-weight: 700; }
.ed-ex input:focus { outline: none; border-color: var(--vglass-brd); }
.ed-ex .restwrap { display: flex; align-items: center; gap: 3px; }
.ed-ex .restwrap input { width: 100%; }
.ed-ex .restwrap .u { font: 600 11px/1 var(--font-ui); color: var(--txt-7); }
.ed-rm { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--txt-6); background: var(--glass-2); }
.ed-rm:hover { color: var(--danger); }
.ed-rm svg { width: 15px; height: 15px; stroke: currentColor; }
.ed-add-ex { margin-top: 4px; height: 42px; border-radius: 12px; border: 1.5px dashed var(--vglass-brd); display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 12px/1 var(--font-ui); color: var(--violet-2); }
.ed-add-ex svg { width: 14px; height: 14px; stroke: currentColor; }

/* editor de running */
.run-day-label { flex: 1; font: 700 15px/1.2 var(--font-ui); color: var(--ink-strong); }
.run-field { margin-top: 14px; }
.run-field > label { display: block; font: 700 11px/1 var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--txt-5); margin-bottom: 8px; }
.run-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.run-chip { padding: 9px 13px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--glass-brd); color: var(--txt-3); font: 700 12.5px/1 var(--font-ui); cursor: pointer; }
.run-chip.on { background: var(--vglass); border-color: var(--vglass-brd); color: var(--ink-strong); }
.run-grid3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; }
.run-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rn { width: 100%; padding: 11px 12px; border-radius: 11px; background: var(--glass-2); border: 1px solid var(--glass-brd); color: var(--ink-strong); font: 600 14px/1 var(--font-ui); }
.rn::placeholder { color: var(--txt-6); font-weight: 500; }
.input-unit { display: flex; align-items: center; gap: 8px; background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 11px; padding: 0 12px; }
.input-unit input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 11px 0; color: var(--ink-strong); font: 600 14px/1 var(--font-ui); }
.input-unit span { color: var(--txt-6); font: 600 13px/1 var(--font-ui); flex: none; }
.run-legend { margin-top: 8px; font: 500 11px/1.4 var(--font-ui); color: var(--txt-6); }

/* editor de segmentos de running */
.run-chips.sm .run-chip { padding: 7px 10px; font-size: 11.5px; border-radius: 9px; }
.seg-list-ed { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.seg-card { border: 1px solid var(--glass-brd); border-radius: 14px; padding: 14px; background: rgba(255,255,255,0.02); }
.seg-card .run-field { margin-top: 12px; }
.seg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.seg-ctl { display: flex; align-items: center; gap: 4px; flex: none; }
.seg-mv { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font: 700 14px/1 var(--font-ui); color: var(--txt-4); background: var(--glass-2); border: 1px solid var(--glass-brd); cursor: pointer; }
.seg-mv:hover { color: var(--ink-strong); background: var(--vglass); border-color: var(--vglass-brd); }
.seg-mv.rm:hover { color: #f0a8a8; background: rgba(240,80,80,0.12); border-color: rgba(240,80,80,0.3); }
/* identidad por tipo de bloque */
.seg-title { display: flex; align-items: center; gap: 9px; }
.seg-step { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; font: 700 12px/1 var(--font-ui); color: var(--txt-4); background: var(--glass-2); border: 1px solid var(--glass-brd); }
.seg-badge { font: 700 11px/1 var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 11px; border-radius: 40px; }
.seg-card.seg-warmup  { border-color: rgba(79,131,204,0.30); }
.seg-card.seg-work    { border-color: rgba(var(--violet-2-rgb),0.30); }
.seg-card.seg-recovery{ border-color: rgba(63,174,116,0.30); }
.seg-card.seg-cooldown{ border-color: rgba(70,179,201,0.30); }
.seg-warmup  .seg-badge { background: rgba(79,131,204,0.18); color: #8fb4e6; }
.seg-work    .seg-badge { background: rgba(var(--violet-2-rgb),0.18); color: var(--violet-2); }
.seg-recovery.seg-card .seg-badge, .seg-recovery .seg-badge { background: rgba(63,174,116,0.18); color: #6fce9f; }
.seg-cooldown .seg-badge { background: rgba(70,179,201,0.18); color: #7fd0de; }

/* zonas con escala de color + referencia inline */
.zona-label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.zona-ref { font: 600 11px/1.3 var(--font-ui); color: var(--violet-soft); text-transform: none; letter-spacing: 0; }
.zona-chips .run-chip { display: inline-flex; align-items: center; }
.zdot { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--txt-6); }
.zc-Z1 .zdot { background: #4f83cc; } .zc-Z2 .zdot { background: #3fae74; } .zc-Z3 .zdot { background: #d8a63a; } .zc-Z4 .zdot { background: #db7a3c; } .zc-Z5 .zdot { background: #d64c4c; }
.zc-Z1.on { background: #4f83cc; border-color: transparent; color: var(--ink-strong); }
.zc-Z2.on { background: #3fae74; border-color: transparent; color: var(--ink-strong); }
.zc-Z3.on { background: #d8a63a; border-color: transparent; color: #14100a; }
.zc-Z4.on { background: #db7a3c; border-color: transparent; color: var(--ink-strong); }
.zc-Z5.on { background: #d64c4c; border-color: transparent; color: var(--ink-strong); }
.zona-chips .run-chip.on .zdot { background: currentColor; }
.zona-scale { display: flex; align-items: center; gap: 8px; margin-top: 9px; font: 600 9.5px/1 var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--txt-6); }
.zona-bar { flex: 1; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #4f83cc, #3fae74, #d8a63a, #db7a3c, #d64c4c); }

.seg-add-wrap { margin-top: 16px; }
.seg-add-label { font: 700 11px/1 var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--txt-5); margin-bottom: 8px; }
.seg-add-row { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-add { padding: 9px 13px; border-radius: 10px; background: var(--glass-2); border: 1px dashed var(--vglass-brd); color: var(--violet-soft); font: 700 12px/1 var(--font-ui); cursor: pointer; }
.seg-add:hover { background: var(--vglass); color: var(--ink-strong); }
.seg-add-warmup { color: #8fb4e6; border-color: rgba(79,131,204,0.42); }
.seg-add-recovery { color: #6fce9f; border-color: rgba(63,174,116,0.42); }
.seg-add-cooldown { color: #7fd0de; border-color: rgba(70,179,201,0.42); }
.seg-add-warmup:hover { background: rgba(79,131,204,0.14); color: var(--ink-strong); }
.seg-add-recovery:hover { background: rgba(63,174,116,0.14); color: var(--ink-strong); }
.seg-add-cooldown:hover { background: rgba(70,179,201,0.14); color: var(--ink-strong); }

/* selector nueva rutina + chip de tipo */
.np-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.np-opt { display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: 14px; text-align: left; cursor: pointer; background: var(--glass-2); border: 1px solid var(--glass-brd); transition: background .15s var(--easing), border-color .15s var(--easing); }
.np-opt:hover { background: var(--glass); border-color: var(--vglass-brd); }
.np-emo { font-size: 28px; flex: none; }
.np-tx { display: flex; flex-direction: column; gap: 3px; }
.np-tx b { font: 700 15px/1.1 var(--font-ui); color: var(--ink-strong); }
.np-tx > span { font: 500 12.5px/1.2 var(--font-ui); color: var(--txt-5); }
.rc-chip { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 8px; background: var(--glass-2); border: 1px solid var(--glass-brd); font: 700 10px/1.4 var(--font-ui); color: var(--txt-4); vertical-align: middle; }
.rc-chip.run { background: var(--vglass); border-color: var(--vglass-brd); color: var(--violet-2); }
.ed-empty { padding: 30px; text-align: center; color: var(--txt-6); font: 500 13px/1.5 var(--font-ui); }

/* ============================================================ DETALLE ENTRENADO + CHAT */
.trow { position: relative; }
/* badge de no leídos sobre el avatar del entrenado */
.trow .who .av { position: relative; }
.av-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #fff; color: var(--violet-4); font: 800 10px/19px var(--font-ui); text-align: center; box-shadow: 0 0 0 2px var(--panel), 0 2px 8px rgba(0,0,0,0.5); }

.tr-modal { display: flex; flex-direction: column; }
.tr-av { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--font-ui); color: var(--ink-strong); background: linear-gradient(150deg, var(--violet), var(--violet-5)); }
/* tabs con subrayado (queda claro que son pestañas) */
.tr-tabs { display: flex; gap: 22px; padding: 0 22px; border-bottom: 1px solid var(--glass-brd); }
.tr-tab { position: relative; padding: 13px 2px; background: transparent; border: 0; border-bottom: 2px solid transparent; font: 700 13.5px/1 var(--font-ui); color: var(--txt-5); display: flex; align-items: center; gap: 7px; transition: color .15s var(--easing); }
.tr-tab:hover { color: var(--txt-3); }
.tr-tab.active { color: var(--ink-strong); border-bottom-color: var(--violet-2); }
.tr-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-2); display: inline-block; }
.tr-tab-dot[hidden] { display: none; }
.tr-pane { flex: 1; min-height: 0; overflow-y: auto; }
#tr-resumen, #tr-perf { padding: 18px 22px 24px; }
.tr-pane[hidden] { display: none; }  /* gana al display:flex del chat-pane */
#tr-resumen { padding: 18px 22px 24px; }
.tr-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 11px; }
.tr-next { font-size: 15px !important; }
.tr-lbl { margin: 18px 0 9px; }
.tr-plan { padding: 12px 14px; border-radius: 12px; background: var(--vglass); border: 1px solid var(--vglass-brd); font: 700 14px/1 var(--font-ui); color: var(--ink-strong); }
.tr-plan-actions { display: flex; gap: 8px; margin-top: 8px; }
.tr-plan-actions .btn { flex: 1; justify-content: center; }
.tr-plan-actions .btn.rc-del { flex: 0 0 auto; }
/* perfil de running en el modal del atleta */
.tr-runprofile { padding: 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-brd); }
.rp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
@media (max-width: 560px) { .rp-grid { grid-template-columns: 1fr 1fr; } .rp-grid .btn { grid-column: 1 / -1; } }
.rp-in { display: flex; flex-direction: column; gap: 6px; }
.rp-in span { font: 700 10px/1 var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--txt-6); }
.rp-in input { width: 100%; padding: 10px 11px; border-radius: 10px; background: var(--glass-2); border: 1px solid var(--glass-brd); color: var(--ink-strong); font: 600 14px/1 var(--font-ui); }
.rp-in input::placeholder { color: var(--txt-6); font-weight: 500; }
.rp-out { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.rp-hint { font: 500 12px/1.4 var(--font-ui); color: var(--txt-6); }
.rp-block .rp-h { font: 700 10px/1 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--violet-soft); margin-bottom: 7px; }
.rp-zonas, .rp-paces { display: flex; flex-wrap: wrap; gap: 7px; }
.rp-zona, .rp-pace { font: 600 12px/1 var(--font-ui); color: var(--txt-3); background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 8px; padding: 7px 10px; }
.rp-zona b, .rp-pace b { color: var(--violet-2); margin-right: 4px; }
.tr-hist { display: flex; flex-direction: column; gap: 8px; }
.tr-hist-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-brd); }
.tr-hist-row .nm { font: 600 13px/1 var(--font-ui); color: var(--txt-2); }
.tr-hist-row .d { font: 600 11px/1 var(--font-ui); color: var(--txt-6); }

/* chat (coach + reusa para detalle) */
.tr-chat-pane { display: flex; flex-direction: column; }
.chat-body { flex: 1; min-height: 240px; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 9px; }
.chat-note { align-self: center; padding: 8px 13px; border-radius: 12px; background: var(--vglass); border: 1px solid var(--vglass-brd); font: 600 11px/1.4 var(--font-ui); color: var(--violet-soft); text-align: center; }
.chat-msg { display: flex; max-width: 80%; }
.chat-msg.coach { align-self: flex-start; }
.chat-msg.me { align-self: flex-end; }
.chat-msg .bubble { padding: 11px 14px; border-radius: 18px; font: 500 13.5px/1.4 var(--font-ui); color: var(--txt); }
.chat-msg.coach .bubble { background: var(--glass-2); border: 1px solid var(--glass-brd); border-bottom-left-radius: 6px; }
.chat-msg.me .bubble { background: linear-gradient(135deg, var(--violet), var(--violet-4)); color: var(--ink-strong); border-bottom-right-radius: 6px; }
.tr-compose { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--glass-brd); }
#tr-chat-input { flex: 1; padding: 12px 15px; border-radius: 22px; background: var(--glass-2); border: 1px solid var(--glass-brd-2); color: var(--ink-strong); font: 500 14px/1.2 var(--font-ui); }
#tr-chat-input:focus { outline: none; border-color: rgba(var(--violet-2-rgb),0.5); }
.chat-send { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--violet), var(--violet-4)); box-shadow: var(--shadow-violet); }
.chat-send svg { width: 19px; height: 19px; stroke: #fff; }
.chat-attach { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--glass-2); border: 1px solid var(--glass-brd-2, var(--glass-brd)); color: rgba(var(--violet-2-rgb),0.95); transition: background .15s, opacity .15s; }
.chat-attach svg { width: 20px; height: 20px; }
.chat-attach.busy { opacity: .5; pointer-events: none; animation: chatAttachPulse 1s ease-in-out infinite; }
@keyframes chatAttachPulse { 50% { opacity: .85; } }

/* imágenes en el chat */
.chat-msg .bubble.has-img { padding: 4px; overflow: hidden; }
.chat-img { display: block; }
.chat-img img { display: block; width: 100%; max-width: 220px; max-height: 300px; object-fit: cover; border-radius: 14px; cursor: zoom-in; }
.bubble.has-img .bubble-txt { display: block; padding: 6px 9px 3px; }

/* lightbox de imagen a pantalla completa */
.ft-lightbox { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6,4,12,0.93); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .2s cubic-bezier(0.25,1,0.5,1); }
.ft-lightbox.show { opacity: 1; pointer-events: auto; }
.ft-lightbox img { max-width: 100%; max-height: 100%; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,0.6); cursor: zoom-out; }
@media (prefers-reduced-motion: reduce) { .ft-lightbox { transition: none; } .chat-attach.busy { animation: none; } }

/* coach toast */
.c-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  z-index: 300; padding: 13px 20px; border-radius: 14px; max-width: 90%;
  background: var(--panel); border: 1px solid var(--glass-brd-2);
  box-shadow: var(--shadow-card); color: var(--ink-strong); font: 600 13.5px/1.4 var(--font-ui);
  opacity: 0; pointer-events: none; transition: all .3s var(--easing);
}
.c-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================ MOBILE NAV (hidden on desktop) */
.mobile-nav { display: none; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1000px) {
  .sidebar { display: none; }
  .view-head { padding: calc(20px + env(safe-area-inset-top)) 18px 0; flex-wrap: wrap; }
  .stat-row { padding: 18px 18px 0; grid-template-columns: 1fr 1fr; }
  .table-wrap { padding: 18px 18px 0; }
  /* table → cards on mobile */
  .thead { display: none; }
  .trow { grid-template-columns: 1fr auto; grid-auto-flow: row; gap: 10px 12px; }
  .trow .who { grid-column: 1 / 2; }
  .trow .tag { grid-column: 2 / 3; justify-self: end; }
  .trow .tcell, .trow .bar { grid-column: 1 / -1; }
  .gen-grid { grid-template-columns: 1fr; padding: 18px; }
  .editor-body { flex-direction: column; }
  .rail { width: auto; border-left: 0; border-top: 1px solid var(--glass-brd); }
  .lib-body { flex-direction: column; }
  .lib-grid { grid-template-columns: 1fr 1fr; padding: 18px; }
  .detail { width: auto; border-left: 0; border-top: 1px solid var(--glass-brd); }
  .filters { padding: 16px 18px 0; }
  .editor-head { padding: 18px; flex-wrap: wrap; }
  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal { max-height: 100dvh; border-radius: 0; width: 100%; }
  .modal-grid { grid-template-columns: 1fr 1fr; }

  .main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .mobile-nav {
    display: flex; position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom)); width: min(440px, calc(100% - 24px)); height: 68px;
    align-items: center; justify-content: space-around; padding: 0 6px; z-index: 70;
    border-radius: 34px; background: rgba(18,12,30,0.7);
    border: 1px solid var(--glass-brd-2); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    box-shadow: var(--shadow-card);
  }
  .mn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--txt-8); font: 600 10px/1 var(--font-ui); }
  .mn-item svg { width: 22px; height: 22px; stroke: currentColor; }
  .mn-item.active { color: var(--violet-icon); }
}
@media (max-width: 560px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .lib-grid { grid-template-columns: 1fr; }
  .modal-grid { grid-template-columns: 1fr; }
  .row-2 { flex-direction: column; }
}

/* ===================== Tu negocio (white-label) ===================== */
/* layout dos columnas: controles + preview del atleta al costado */
.biz { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(28px, 4vw, 56px); align-items: start; padding: 8px 32px 48px; max-width: 880px; }
.biz-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.biz-side { position: sticky; top: 96px; }
@media (max-width: 900px) {
  .biz { grid-template-columns: 1fr; padding: 8px 18px 48px; }
  .biz-side { position: static; order: -1; display: flex; flex-direction: column; align-items: center; }
}
/* botones de acento: texto según contraste del acento, no del fondo */
.btn.primary, .btn.violet { color: var(--brand-ink, #fff); }

/* switch de modo segmentado (llamativo) */
.mode-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; border-radius: 15px; background: var(--glass); border: 1px solid var(--glass-brd); }
.mode-glow { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 6px); border-radius: 11px; background: var(--vglass); border: 1px solid var(--vglass-brd); transition: transform .28s var(--easing); }
.mode-switch[data-mode="on"] .mode-glow { transform: translateX(calc(100% + 3px)); background: var(--violet); border-color: transparent; }
.mode-opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 10px; border-radius: 11px; background: none; border: 0; cursor: pointer; font: 700 14px/1 var(--font-ui); letter-spacing: 0.02em; color: var(--txt-5); transition: color .2s var(--easing); }
.mode-switch[data-mode="off"] .mode-opt[data-mode="off"] { color: var(--ink-strong); }
.mode-switch[data-mode="on"] .mode-opt[data-mode="on"] { color: var(--brand-ink, #fff); }
.mo-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.mo-dot.ft { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.mo-dot.mk { background: var(--violet); border: 2px solid var(--vglass-brd); }
.mode-switch[data-mode="on"] .mo-dot.mk { background: #fff; border-color: transparent; }
.biz-logo-row { display: flex; align-items: center; gap: 16px; }
.biz-logo-prev { width: 88px; height: 88px; flex: none; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-brd); display: grid; place-items: center; overflow: hidden; }
.biz-logo-prev img { width: 100%; height: 100%; object-fit: contain; }
.biz-logo-prev span { font: 600 11px/1 var(--font-ui); color: var(--txt-6); }
.biz-colors { display: flex; flex-wrap: wrap; gap: 12px; }
.biz-color { display: inline-flex; align-items: center; gap: 9px; font: 600 13px/1 var(--font-ui); color: var(--txt-3); background: var(--glass-2); border: 1px solid var(--glass-brd); border-radius: 11px; padding: 8px 12px; cursor: pointer; }
.biz-color .sw { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--glass-brd); flex: none; }
.biz-color input[type=color] { width: 28px; height: 26px; border: 0; background: none; padding: 0; cursor: pointer; }
.bp-label { font: 700 10px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-6); margin-bottom: 10px; }
.bp-notch { width: 58px; height: 5px; border-radius: 3px; background: color-mix(in oklch, var(--ptext) 22%, transparent); margin: 2px auto 14px; }
.biz-autosave { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 600 12.5px/1 var(--font-ui); color: var(--txt-5); }
.biz-save-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--txt-6); flex: none; transition: background .2s var(--easing); }
.biz-save-dot.saving { background: #e8b84b; }
.biz-save-dot.saved { background: var(--success); }
.biz-save-dot.error { background: #f0a8a8; }
.biz-preview {
  --pa: #8b5cf6; --pbg: #0b0816; --psurf: #150f26; --pink: #fff; --ptext: #fff;
  --pmut: color-mix(in oklch, var(--ptext) 52%, var(--pbg));
  --pborder: color-mix(in oklch, var(--ptext) 12%, transparent);
  width: 300px; max-width: 100%; border-radius: 22px; padding: 18px; background: var(--pbg);
  border: 8px solid #17122a; box-shadow: 0 30px 70px -40px rgba(0,0,0,0.85);
}
.bp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bp-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--pa); display: inline-block; overflow: hidden; flex: none; }
.bp-logo img { width: 100%; height: 100%; object-fit: contain; }
.bp-name { font-family: var(--font-display); font-size: 18px; color: var(--ptext); letter-spacing: 0.02em; text-transform: uppercase; }
.bp-card { background: var(--psurf); border: 1px solid var(--pborder); border-radius: 14px; padding: 14px; }
.bp-eyebrow { font: 700 10px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pa); }
.bp-title { margin-top: 6px; font-family: var(--font-display); font-size: 20px; color: var(--ptext); text-transform: uppercase; letter-spacing: 0.01em; }
.bp-bar { margin-top: 12px; height: 8px; border-radius: 5px; background: color-mix(in oklch, var(--ptext) 12%, transparent); overflow: hidden; }
.bp-bar span { display: block; width: 60%; height: 100%; background: var(--pa); }
.bp-sub { margin-top: 8px; font: 600 11px/1 var(--font-ui); color: var(--pmut); }
.bp-row { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 10px 12px; border-radius: 12px; background: var(--psurf); border: 1px solid var(--pborder); }
.bp-ic { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; font: 700 12px/1 var(--font-ui); color: var(--pmut); background: color-mix(in oklch, var(--ptext) 8%, transparent); }
.bp-ic.ok { background: var(--pa); color: var(--pink); }
.bp-rt { flex: 1; min-width: 0; font: 700 13px/1 var(--font-ui); color: var(--ptext); }
.bp-badge { font: 700 9px/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--pmut); background: color-mix(in oklch, var(--ptext) 8%, transparent); padding: 5px 8px; border-radius: 7px; }
.bp-chip { font: 700 9px/1 var(--font-ui); text-transform: uppercase; color: var(--pa); background: color-mix(in oklch, var(--pa) 18%, transparent); padding: 5px 8px; border-radius: 7px; }
.bp-btn { margin-top: 12px; text-align: center; font: 700 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--pink); background: var(--pa); padding: 12px; border-radius: 11px; }
.bp-foot { margin-top: 14px; text-align: center; font: 600 10px/1 var(--font-ui); color: var(--pmut); }
.bp-foot b { color: var(--ptext); }
.powered { display: block; margin-top: 10px; text-align: center; font: 600 11px/1 var(--font-ui); color: var(--txt-6); padding: 6px; }
.powered b { color: var(--txt-4); }

/* progresión de carga (editor) */
.ed-prog { padding: 12px 28px 14px; border-bottom: 1px solid var(--glass-brd); display: flex; flex-direction: column; gap: 10px; }
.ed-prog[hidden] { display: none; }
.ed-prog-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ed-prog-label { font: 700 12px/1 var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--txt-4); }
.ed-prog-hint { font: 500 12px/1.3 var(--font-ui); color: var(--txt-6); }