:root{
  --accent:#22c55e;
  --accent-2:#16a34a;
  --info:#2563eb;
  --info-2:#1d4ed8;
  --warn:#a855f7;
  --warn-2:#9333ea;
  --danger:#ef4444;
  --danger-2:#dc2626;
  --bg:#eef4ff;
  --card:#ffffff;
  --line:#d7e3f1;
  --text:#172033;
  --muted:#64748b;
  --shadow-sm:0 4px 14px rgba(15,23,42,.06);
  --shadow-md:0 10px 28px rgba(15,23,42,.09);
  --shadow-lg:0 18px 40px rgba(15,23,42,.12);
  --radius:16px;
}

*{box-sizing:border-box}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;
  padding:
    calc(18px + env(safe-area-inset-top, 0px))
    18px
    calc(136px + env(safe-area-inset-bottom, 0px));
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(37,99,235,.10), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(168,85,247,.10), transparent 24%),
    radial-gradient(circle at 100% 100%, rgba(34,197,94,.08), transparent 25%),
    linear-gradient(180deg, #f7fbff 0%, #edf4ff 100%);
}
.wrap{
  max-width:1100px;
  margin:0 auto;
  min-height:calc(100vh - env(safe-area-inset-top, 0px));
  padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px));
}
.hidden{display:none !important}
#appScreen{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px));}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

h1{
  text-align:center;
  margin:0;
  font-size:2rem;
  color:#0f172a;
}

.card{
  background:rgba(255,255,255,.94);
  padding:16px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  margin:14px 0;
  border:1px solid rgba(255,255,255,.7);
}

.login-screen{
  max-width:460px;
  margin:52px auto;
}

.form-grid{
  display:grid;
  gap:12px;
}

.topbar,.toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:12px;
  align-items:center;
}

.toolbar.start{justify-content:flex-start}

.btn{
  appearance:none;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff 0%,#f3f7fb 100%);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
  box-shadow:var(--shadow-sm);
}

.btn.primary{
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-2) 100%);
  color:#fff;
  border-color:var(--accent-2);
}

.btn.info{
  background:linear-gradient(180deg,var(--info) 0%,var(--info-2) 100%);
  color:#fff;
  border-color:var(--info-2);
}

.btn.warn{
  background:linear-gradient(180deg,var(--warn) 0%,var(--warn-2) 100%);
  color:#fff;
  border-color:var(--warn-2);
}

.btn.danger{
  background:linear-gradient(180deg,var(--danger) 0%,var(--danger-2) 100%);
  color:#fff;
  border-color:var(--danger-2);
}

.day-btn.active{
  background:linear-gradient(180deg,#34d399 0%,#059669 100%);
  color:#fff;
  border-color:#059669;
}

input,select{
  padding:10px 11px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  outline:none;
  width:100%;
}

label{font-weight:700;color:#334155}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:12px;
}

.user-badge{
  padding:8px 12px;
  background:linear-gradient(180deg,#ecfdf5 0%,#dcfce7 100%);
  border-radius:999px;
  border:1px solid #bbf7d0;
  color:#166534;
  font-weight:700;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:12px;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

th,td{
  border:1px solid #dbe5f0;
  padding:9px 8px;
  text-align:center;
  vertical-align:top;
}

th{
  background:linear-gradient(180deg,#eff6ff 0%,#dbeafe 100%);
  color:#1e3a8a;
  font-weight:800;
}

td:first-child{
  font-weight:800;
  color:#334155;
  background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);
}

.exercise-card{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:16px;
  align-items:start;
}

.exercise-image-box{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}

.exercise-image{
  width:120px;
  height:120px;
  border:2px solid #dbeafe;
  border-radius:14px;
  object-fit:cover;
  background:linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%);
}

.exercise-image.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:#64748b;
  font-weight:800;
  text-align:center;
  padding:8px;
}

.last-hint{
  display:block;
  color:#64748b;
  font-size:12px;
  margin-top:4px;
  line-height:1.35;
}

.set-input{
  width:92px;
  text-align:center;
  font-weight:800;
  background:#f8fafc;
}

.video-box{margin-top:12px}
.video-frame,.video-player{
  width:100%;
  max-width:420px;
  height:236px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#000;
}

.row-inputs{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}

summary{
  cursor:pointer;
  font-weight:800;
  color:#0f172a;
  padding:6px 0;
}

#syncDebug{
  background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
  border:1px dashed #cbd5e1;
  border-radius:12px;
  padding:10px;
  line-height:1.45;
  white-space:pre-wrap;
}

canvas{
  width:100%;
  height:280px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  display:block;
}

.toast{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#111827 0%,#0f172a 100%);
  color:white;
  padding:10px 16px;
  border-radius:999px;
  opacity:0;
  transition:.25s;
  pointer-events:none;
  z-index:9999;
  font-weight:700;
}

.toast.show{opacity:.96}

@media (max-width:700px){
  body{margin:12px}
  h1{font-size:1.7rem}
  .exercise-card{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .topbar,.toolbar{justify-content:stretch}
  .topbar > *,.toolbar > *{flex:1 1 100%}
  .btn{width:100%}
  table{display:block;overflow-x:auto;white-space:nowrap}
}

.table-wrap{
  overflow-x:auto;
  width:100%;
}

.measure-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:12px;
  margin:12px 0;
}

.measure-notes{
  min-height:88px;
  width:100%;
  padding:10px 11px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  resize:vertical;
  font-family:inherit;
}

#bodyProgressLatest{
  margin:10px 0 14px;
  line-height:1.5;
}

.delta-up{ color:#166534; font-weight:800; }
.delta-down{ color:#b91c1c; font-weight:800; }
.delta-flat{ color:#475569; font-weight:800; }

#bodyProgressTable td{
  min-width:88px;
}

#bodyProgressTable td.notes-cell{
  min-width:180px;
  text-align:left;
}

@media (max-width:900px){
  .measure-grid{
    grid-template-columns:repeat(2,minmax(140px,1fr));
  }
}

@media (max-width:640px){
  .measure-grid{
    grid-template-columns:1fr;
  }
}



textarea{
  width:100%;
  min-height:92px;
  padding:10px 11px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  outline:none;
  resize:vertical;
}

.table-wrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}

.notes-cell{
  min-width:180px;
  text-align:left;
}

.measure-grid,
.challenge-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(180px,1fr));
  gap:12px;
  margin:12px 0;
}

.measure-notes{
  margin-top:8px;
  margin-bottom:8px;
}

.challenge-summary{
  background:linear-gradient(180deg,#fff7ed 0%,#ffedd5 100%);
  border:1px solid #fdba74;
  border-radius:14px;
  padding:12px;
  line-height:1.45;
  color:#9a3412;
}

.challenge-summary strong{
  color:#7c2d12;
}

.delta-up{color:#166534;font-weight:800}
.delta-down{color:#b91c1c;font-weight:800}
.delta-flat{color:#334155;font-weight:800}

.toast{
  position:fixed;
  left:50%;
  bottom:calc(26px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%) translateY(20px);
  background:linear-gradient(180deg,#0f172a 0%,#111827 100%);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  box-shadow:var(--shadow-lg);
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  max-width:min(88vw, 460px);
  text-align:center;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@media (max-width: 820px){
  .grid-3,
  .measure-grid,
  .challenge-grid{
    grid-template-columns:1fr;
  }

  .exercise-card{
    grid-template-columns:1fr;
  }

  .exercise-image-box{
    align-items:flex-start;
  }

  .video-frame,.video-player{
    max-width:100%;
    height:220px;
  }

  th,td{
    padding:8px 6px;
    font-size:14px;
  }

  .set-input{
    width:100%;
    min-width:72px;
  }
}


/* Mejoras visuales */
body.theme-dark{
  --bg:#0b1220;
  --card:#111827;
  --line:#253041;
  --text:#e5eefc;
  --muted:#94a3b8;
  background:
    radial-gradient(circle at 0% 0%, rgba(37,99,235,.20), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(168,85,247,.16), transparent 26%),
    radial-gradient(circle at 100% 100%, rgba(34,197,94,.12), transparent 26%),
    linear-gradient(180deg, #0b1220 0%, #101827 100%);
}
body.theme-dark .card{
  background:rgba(17,24,39,.94);
  border:1px solid rgba(51,65,85,.85);
  box-shadow:0 18px 40px rgba(2,6,23,.36);
}
body.theme-dark .btn{
  background:linear-gradient(180deg,#162133 0%,#101827 100%);
  border-color:#334155;
  color:#e5eefc;
}
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
  background:#0f172a;
  color:#e5eefc;
  border-color:#334155;
}
body.theme-dark th{
  background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);
  color:#dbeafe;
}
body.theme-dark td:first-child{
  background:linear-gradient(180deg,#172133 0%,#111827 100%);
  color:#e5eefc;
}
body.theme-dark #syncDebug,
body.theme-dark canvas{
  background:linear-gradient(180deg,#0f172a 0%,#111827 100%);
  border-color:#334155;
}
body.theme-dark .user-badge{
  background:linear-gradient(180deg,#052e16 0%,#14532d 100%);
  border-color:#166534;
  color:#dcfce7;
}
body.theme-dark .app-kicker{color:#86efac;}
body.theme-dark .hero-subtitle{color:#9fb0c9;}
.hero{padding:18px 18px 16px;margin-top:4px;margin-bottom:14px;}
.app-kicker{text-align:center;font-size:.78rem;letter-spacing:.18em;font-weight:900;color:#16a34a;margin-bottom:10px;}
.hero-subtitle{text-align:center;margin:10px auto 0;max-width:640px;}
#appScreen{padding-bottom:calc(100px + env(safe-area-inset-bottom, 0px));}
.stats-panel{display:grid;gap:14px}
.stats-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.stats-headline{display:flex;flex-direction:column;gap:4px;}
.stats-title{font-size:1.05rem;font-weight:900;color:var(--text);}
.stats-subtitle{color:var(--muted);font-size:.95rem;}
.pill{padding:8px 12px;border-radius:999px;font-weight:800;border:1px solid var(--line);background:linear-gradient(180deg,#ffffff 0%,#f3f7fb 100%);}
body.theme-dark .pill{background:linear-gradient(180deg,#162133 0%,#101827 100%);}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;}
.stat-tile{border:1px solid var(--line);border-radius:14px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(245,249,255,.96) 100%);}
body.theme-dark .stat-tile{background:linear-gradient(180deg,rgba(22,33,51,.88) 0%,rgba(15,23,42,.96) 100%);}
.stat-tile .label{display:block;color:var(--muted);font-size:.86rem;font-weight:700;margin-bottom:6px;}
.stat-tile .value{display:block;font-size:1.3rem;font-weight:900;color:var(--text);}
.stat-tile .hint{display:block;margin-top:6px;color:var(--muted);font-size:.78rem;}
.fab-top{position:fixed;right:18px;bottom:calc(90px + env(safe-area-inset-bottom, 0px));width:48px;height:48px;border:none;border-radius:999px;background:linear-gradient(180deg,var(--info) 0%,var(--info-2) 100%);color:#fff;font-size:1.2rem;font-weight:900;box-shadow:0 18px 32px rgba(37,99,235,.28);z-index:9998;}
.fab-top.hidden{display:none !important}
.toast{position:fixed;bottom: calc(28px + env(safe-area-inset-bottom, 0px));left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#111827 0%,#0f172a 100%);color:white;padding:10px 16px;border-radius:999px;opacity:0;transition:.25s;pointer-events:none;z-index:9999;font-weight:700;box-shadow:0 18px 40px rgba(15,23,42,.25);}
.toast.show{opacity:1}
.measure-notes{width:100%;min-height:100px;padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);}
body.theme-dark .measure-notes{background:#0f172a;border-color:#334155;color:#e5eefc;}
.challenge-summary{margin-top:12px;line-height:1.55;padding:12px 14px;border-radius:12px;border:1px dashed var(--line);background:linear-gradient(180deg,#fcfcff 0%,#f8fbff 100%);}
body.theme-dark .challenge-summary{background:linear-gradient(180deg,#111827 0%,#0f172a 100%);}
@media (max-width: 820px){.hero{padding:16px 14px}.stats-head{align-items:flex-start}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 640px){body{padding:calc(14px + env(safe-area-inset-top, 0px)) 12px calc(152px + env(safe-area-inset-bottom, 0px));}.grid-3,.measure-grid,.challenge-grid{grid-template-columns:1fr !important;}.exercise-card{grid-template-columns:1fr;}.video-frame,.video-player{max-width:100%;height:220px;}}



/* Ajustes extra de tema y legibilidad */
html, body { min-height: 100%; }
body.theme-dark,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark summary,
body.theme-dark label,
body.theme-dark .stats-title,
body.theme-dark .stat-tile .value,
body.theme-dark .stat-tile .label,
body.theme-dark .challenge-summary,
body.theme-dark #templateStatus,
body.theme-dark #bodyProgressLatest,
body.theme-dark #loginStatus,
body.theme-dark #syncStatus,
body.theme-dark .last-hint{
  color: var(--text);
}
body.theme-dark .muted,
body.theme-dark .stats-subtitle,
body.theme-dark .hero-subtitle,
body.theme-dark .stat-tile .hint,
body.theme-dark .last-hint{
  color: #9fb0c9;
}
body.theme-dark a{ color:#93c5fd; }
body.theme-dark table{
  background:#0f172a;
  color:var(--text);
}
body.theme-dark td{
  background:#0f172a;
  color:var(--text);
  border-color:#334155;
}
body.theme-dark th,
body.theme-dark td:first-child{
  border-color:#334155;
}
body.theme-dark .exercise-image{
  border-color:#334155;
  background:linear-gradient(180deg,#111827 0%,#0f172a 100%);
}
body.theme-dark .exercise-image.placeholder{
  color:#cbd5e1;
  background:linear-gradient(180deg,#162133 0%,#101827 100%);
}
body.theme-dark .video-frame,
body.theme-dark .video-player{
  border-color:#334155;
}
body.theme-dark .pill,
body.theme-dark .challenge-summary,
body.theme-dark #syncDebug,
body.theme-dark .stat-tile{
  color:var(--text);
}
body.theme-dark .challenge-summary strong{
  color:#bfdbfe;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder{
  color:#7c8aa0;
}
body.theme-dark select option{
  background:#0f172a;
  color:#e5eefc;
}
body.theme-dark .toast{
  background:linear-gradient(180deg,#020617 0%,#0f172a 100%);
}
body.theme-dark .fab-top{
  box-shadow:0 18px 32px rgba(2,6,23,.45);
}


/* Full safe plus */
.compact-mode .card{padding:12px;margin:10px 0}
.compact-mode .exercise-card{grid-template-columns:88px 1fr;gap:10px}
.compact-mode .exercise-image{width:76px;height:76px}
.compact-mode .btn{padding:8px 10px}
.compact-mode input,.compact-mode select,.compact-mode textarea{padding:8px 9px}
.compact-mode table th,.compact-mode table td{padding:6px 5px}
.compact-mode .video-frame,.compact-mode .video-player{height:180px}

.exercise-top-meta{
  display:grid;
  grid-template-columns:1fr 180px auto;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.exercise-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:var(--muted);
}
.exercise-toggle input{width:auto}
.exercise-notes{min-height:68px;margin-top:12px}
.pr-badges{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.badge-pr{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  background:linear-gradient(180deg,#fef3c7 0%,#fde68a 100%);
  color:#92400e;
  border:1px solid #f59e0b;
}
.badge-done{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:linear-gradient(180deg,#dcfce7 0%,#bbf7d0 100%);
  color:#166534;
  border:1px solid #22c55e;
}
.filters-summary{margin-top:8px}
.progress-shell{
  width:100%;
  height:14px;
  background:#e2e8f0;
  border-radius:999px;
  overflow:hidden;
  margin-top:12px;
}
.progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#22c55e 0%,#16a34a 100%);
  transition:width .25s ease;
}
.history-calendar{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.history-day{
  min-height:78px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.history-day.empty{
  opacity:.35;
  background:transparent;
}
.history-day.active-date{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.12);
}
.history-day-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
}
.history-markers{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
}
.dot.work{background:#22c55e}
.dot.cardio{background:#2563eb}
.dot.body{background:#a855f7}
.day-score{
  font-size:11px;
  color:var(--muted);
  line-height:1.2;
}
table .notes-cell{
  min-width:160px;
  text-align:left;
}
.theme-dark .history-day{
  background:linear-gradient(180deg,#10192b 0%,#0b1220 100%);
  border-color:#22314a;
}
.theme-dark .progress-shell{background:#1e293b}
.theme-dark .badge-pr{
  background:linear-gradient(180deg,#78350f 0%,#92400e 100%);
  color:#fde68a;
  border-color:#f59e0b;
}
.theme-dark .badge-done{
  background:linear-gradient(180deg,#14532d 0%,#166534 100%);
  color:#dcfce7;
  border-color:#22c55e;
}
@media (max-width: 860px){
  .exercise-top-meta{grid-template-columns:1fr}
  .history-calendar{grid-template-columns:repeat(2, minmax(0,1fr))}
}


#dayContainer{padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));}
#sessionExtrasSection{margin-top:8px;}


.day-buttons-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.day-name-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.day-index{
  font-size:.85rem;
  color:var(--muted);
  font-weight:700;
}

.tools-card summary,
#toolsSection summary{
  cursor:pointer;
}


/* Login premium */
.login-screen{
  max-width:520px;
  margin:42px auto;
  overflow:hidden;
  position:relative;
}

.login-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(34,197,94,.18), transparent 24%),
    radial-gradient(circle at bottom left, rgba(37,99,235,.14), transparent 28%);
  pointer-events:none;
}

.login-brand,
.login-highlight,
.login-screen .form-grid{
  position:relative;
  z-index:1;
}

.login-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0f172a;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(148,163,184,.35);
  border-radius:999px;
  padding:8px 12px;
  box-shadow:var(--shadow-sm);
  margin-bottom:10px;
}

.login-copy{
  max-width:44ch;
  line-height:1.5;
}

.login-highlight{
  margin:12px 0 16px;
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(37,99,235,.12));
  border:1px solid rgba(148,163,184,.25);
}

.login-highlight-title{
  font-weight:800;
  margin-bottom:6px;
}

.login-highlight-copy{
  color:var(--muted);
  line-height:1.45;
}

body.dark .login-badge{
  color:#e5eefb;
  background:rgba(15,23,42,.72);
  border-color:rgba(148,163,184,.2);
}

body.dark .login-highlight{
  background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(59,130,246,.12));
  border-color:rgba(71,85,105,.6);
}

/* Update: ordenar ejercicios y elegir número de series */
.exercise-controls{
  margin:10px 0 8px;
  align-items:flex-end;
}
.exercise-controls .mini-control{
  min-width:96px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.drag-handle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px dashed var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff 0%,#f3f7fb 100%);
  color:var(--text);
  font-weight:800;
  cursor:grab;
  user-select:none;
  box-shadow:var(--shadow-sm);
}
.drag-handle:active{cursor:grabbing;}
.exercise-sort-card.drag-over{
  outline:2px dashed var(--accent);
  outline-offset:4px;
}
body.theme-dark .drag-handle{
  background:linear-gradient(180deg,#162133 0%,#101827 100%);
  border-color:#334155;
  color:#e5eefc;
}
@media (max-width: 820px){
  .exercise-controls .mini-control,
  .drag-handle{
    width:100%;
  }
}

/* Update visual: login premium + acciones rápidas de ejercicios */
@keyframes loginRiseIn{
  from{opacity:0;transform:translateY(26px) scale(.985);filter:blur(8px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes softPulse{
  0%,100%{transform:translateY(0);box-shadow:0 10px 30px rgba(34,197,94,.18)}
  50%{transform:translateY(-2px);box-shadow:0 18px 42px rgba(34,197,94,.28)}
}
@keyframes shineSweep{
  0%{transform:translateX(-120%) rotate(14deg);opacity:0}
  25%{opacity:.55}
  100%{transform:translateX(145%) rotate(14deg);opacity:0}
}
@keyframes gradientFloat{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.login-screen{
  position:relative;
  overflow:hidden;
  animation:loginRiseIn .7s ease both;
  border:1px solid rgba(255,255,255,.78);
  background:
    radial-gradient(circle at 12% 0%, rgba(34,197,94,.18), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(37,99,235,.16), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
}
.login-screen::before{
  content:"";
  position:absolute;
  inset:-80px auto -80px -80px;
  width:150px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  animation:shineSweep 3.8s ease-in-out infinite;
  pointer-events:none;
}
.login-brand h2{
  margin-bottom:8px;
  letter-spacing:-.03em;
}
.login-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  color:#052e16;
  background:linear-gradient(90deg,#bbf7d0,#dbeafe,#e9d5ff,#bbf7d0);
  background-size:260% 260%;
  animation:gradientFloat 7s ease infinite;
  font-weight:900;
  box-shadow:0 10px 30px rgba(34,197,94,.16);
}
.login-badge::before{
  content:"●";
  color:#16a34a;
  font-size:.78rem;
}
.login-highlight{
  position:relative;
  border:1px solid rgba(34,197,94,.22);
  background:
    linear-gradient(180deg, rgba(236,253,245,.92), rgba(239,246,255,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 12px 30px rgba(15,23,42,.07);
}
.login-highlight-title{
  font-size:1.02rem;
  font-weight:950;
}
.login-screen #btnLogin{
  position:relative;
  overflow:hidden;
  min-height:46px;
  animation:softPulse 3.2s ease-in-out infinite;
}
.login-screen #btnLogin::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:translateX(-110%);
  transition:transform .55s ease;
}
.login-screen #btnLogin:hover::after{
  transform:translateX(110%);
}
.login-screen input,
.login-screen select{
  min-height:44px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.login-screen input:focus,
.login-screen select:focus{
  border-color:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.14);
  transform:translateY(-1px);
}

body.theme-dark .login-screen{
  border-color:rgba(51,65,85,.88);
  background:
    radial-gradient(circle at 12% 0%, rgba(34,197,94,.16), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(37,99,235,.18), transparent 30%),
    linear-gradient(180deg, rgba(15,23,42,.97), rgba(17,24,39,.94));
}
body.theme-dark .login-badge{
  color:#dcfce7;
  background:linear-gradient(90deg,#14532d,#1e3a8a,#581c87,#14532d);
  background-size:260% 260%;
}
body.theme-dark .login-highlight{
  border-color:rgba(74,222,128,.22);
  background:linear-gradient(180deg, rgba(5,46,22,.45), rgba(30,41,59,.62));
}

.soft-action{
  white-space:nowrap;
}
.exercise-controls .soft-action{
  box-shadow:0 8px 22px rgba(15,23,42,.08);
}
.last-hint{
  padding:5px 8px;
  border-radius:10px;
  background:rgba(241,245,249,.72);
}
body.theme-dark .last-hint{
  background:rgba(15,23,42,.76);
}

@media (prefers-reduced-motion: reduce){
  .login-screen,
  .login-badge,
  .login-screen #btnLogin,
  .login-screen::before{
    animation:none !important;
  }
}

/* Update visual extra v2: movimiento suave sin tocar la lógica */
@keyframes cardFloatIn{
  from{opacity:0;transform:translateY(16px) scale(.992);filter:blur(4px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes buttonTinyGlow{
  0%,100%{box-shadow:0 8px 22px rgba(15,23,42,.08)}
  50%{box-shadow:0 12px 30px rgba(34,197,94,.18)}
}
@keyframes activeDayGlow{
  0%,100%{filter:saturate(1)}
  50%{filter:saturate(1.2) brightness(1.03)}
}
@keyframes heroBreath{
  0%,100%{background-position:0% 50%, 100% 50%, 0 0}
  50%{background-position:16% 42%, 82% 56%, 0 0}
}

.hero{
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 18% 12%, rgba(34,197,94,.13), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(37,99,235,.12), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  animation:cardFloatIn .55s ease both, heroBreath 8s ease-in-out infinite;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto -10% -55% -10%;
  height:80%;
  background:radial-gradient(ellipse at center, rgba(34,197,94,.13), transparent 62%);
  pointer-events:none;
}
body.theme-dark .hero{
  background:
    radial-gradient(circle at 18% 12%, rgba(34,197,94,.13), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(37,99,235,.16), transparent 30%),
    linear-gradient(180deg, rgba(17,24,39,.96), rgba(15,23,42,.92));
}

.exercise-sort-card{
  animation:cardFloatIn .34s ease both;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.exercise-sort-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(34,197,94,.25);
}
.exercise-sort-card.drag-over{
  transform:translateY(-3px) scale(1.006);
}

.exercise-controls .btn,
.exercise-controls .drag-handle,
.exercise-controls .mini-control select{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.exercise-controls .btn:hover,
.exercise-controls .drag-handle:hover{
  transform:translateY(-1px);
}
.exercise-controls .soft-action:hover{
  animation:buttonTinyGlow 1.4s ease-in-out infinite;
}

.day-btn.active{
  animation:activeDayGlow 2.8s ease-in-out infinite;
}

.login-screen{
  box-shadow:0 24px 70px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.75);
}
.login-screen::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(34,197,94,.45), rgba(37,99,235,.28), rgba(168,85,247,.35), rgba(34,197,94,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.65;
}
.login-highlight{
  transform:translateZ(0);
  transition:transform .18s ease, box-shadow .18s ease;
}
.login-highlight:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 18px 42px rgba(15,23,42,.10);
}

@media (prefers-reduced-motion: reduce){
  .hero,
  .exercise-sort-card,
  .exercise-controls .soft-action:hover,
  .day-btn.active{
    animation:none !important;
  }
  .exercise-sort-card,
  .exercise-controls .btn,
  .exercise-controls .drag-handle,
  .login-highlight{
    transition:none !important;
  }
}

.exercise-card-flash{
  animation: exerciseCardFlash .55s ease-out;
}
@keyframes exerciseCardFlash{
  0%{transform:scale(1); box-shadow:var(--shadow-md);}
  35%{transform:scale(1.012); box-shadow:0 0 0 4px rgba(34,197,94,.18), var(--shadow-lg);}
  100%{transform:scale(1); box-shadow:var(--shadow-md);}
}


/* v8: referencias reforzadas */
.reference-summary{
  border-left:4px solid var(--accent);
  font-weight:800;
  margin:10px 0 8px;
}
.set-input::placeholder{
  color:var(--muted);
  opacity:.9;
  font-weight:700;
}
body.theme-dark .reference-summary{
  border-left-color:#86efac;
}


/* v9: tabla más limpia y referencias fuera del input */
.set-input::placeholder{
  color:transparent !important;
  opacity:0 !important;
}
#dayContainer table td{
  position:relative;
}
#dayContainer .last-hint:not(.reference-summary){
  display:inline-block;
  margin-top:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  line-height:1.15;
  white-space:nowrap;
  background:linear-gradient(180deg, rgba(236,253,245,.95), rgba(220,252,231,.88));
  color:#166534;
  border:1px solid rgba(22,101,52,.14);
}
body.theme-dark #dayContainer .last-hint:not(.reference-summary){
  background:linear-gradient(180deg, rgba(20,83,45,.55), rgba(5,46,22,.45));
  color:#bbf7d0;
  border-color:rgba(187,247,208,.18);
}
.reference-summary{
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(240,253,244,.95), rgba(236,253,245,.72));
  border:1px solid rgba(34,197,94,.22);
  box-shadow:0 8px 20px rgba(15,23,42,.06);
  line-height:1.45;
}
body.theme-dark .reference-summary{
  background:linear-gradient(180deg, rgba(20,83,45,.28), rgba(15,23,42,.45));
  border-color:rgba(134,239,172,.18);
  box-shadow:0 8px 22px rgba(2,6,23,.28);
}
#dayContainer tbody tr{
  transition:background .16s ease, transform .16s ease;
}
#dayContainer tbody tr:hover{
  background:rgba(34,197,94,.045);
}
body.theme-dark #dayContainer tbody tr:hover{
  background:rgba(34,197,94,.07);
}
.exercise-image{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.exercise-card:hover .exercise-image{
  transform:scale(1.025);
  box-shadow:0 12px 26px rgba(15,23,42,.13);
  border-color:rgba(34,197,94,.35);
}
.login-screen input:focus,
.login-screen select:focus,
.set-input:focus{
  border-color:rgba(34,197,94,.65);
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
}
@keyframes softShimmerLine{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(110%)}
}
.login-highlight::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:40%;
  left:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  animation:softShimmerLine 5.5s ease-in-out infinite;
  pointer-events:none;
}
.login-highlight{
  position:relative;
  overflow:hidden;
}
@media (prefers-reduced-motion: reduce){
  .login-highlight::after,
  #dayContainer tbody tr,
  .exercise-image{
    animation:none !important;
    transition:none !important;
  }
}