MUSCLE MAP
══════════════════════════════════════ */
.muscle-map-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:500px}
.muscle-svg path,.muscle-svg rect,.muscle-svg ellipse{transition:fill .4s ease}

/* ══════════════════════════════════════
   REST TIMER
══════════════════════════════════════ */
.timer-ring{position:relative;display:flex;align-items:center;justify-content:center}
.timer-ring svg{transform:rotate(-90deg)}
.timer-ring .time-display{position:absolute;font-family:'Bebas Neue';font-size:52px;letter-spacing:2px;color:var(--accent)}

/* ══════════════════════════════════════
   WELCOME STUDENT
══════════════════════════════════════ */
.welcome-banner{
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.06) 0%,rgba(var(--accent2-rgb),.04) 100%);
  border:1px solid rgba(var(--accent-rgb),.12);border-radius:var(--radius-lg);
  padding:26px 30px;margin-bottom:24px;display:flex;align-items:center;gap:22px
}
.welcome-av{
  width:60px;height:60px;border-radius:50%;background:var(--accent);color:#000;
  display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue';font-size:26px;flex-shrink:0
}
.welcome-title{font-family:'Bebas Neue';font-size:32px;letter-spacing:2px}
.welcome-title span{color:var(--accent)}
.welcome-sub{color:var(--muted2);font-size:13px;margin-top:3px}

/* ══════════════════════════════════════
   NUTRITION
══════════════════════════════════════ */
.macro-bar{display:flex;height:12px;border-radius:20px;overflow:hidden;gap:2px;margin-top:8px}
.macro-seg{transition:flex .8s cubic-bezier(.4,0,.2,1)}

/* ══════════════════════════════════════
   HEADER BAR (top notif + bell)
══════════════════════════════════════ */
.top-bar{
  position:fixed;top:0;left:var(--sidebar);right:0;height:64px;z-index:150;
  display:flex;align-items:center;justify-content:flex-end;padding:0 32px;
  background:var(--surface);border-bottom:1px solid var(--border)
}
.top-bar-actions{
  display:flex;gap:8px;align-items:center
}
.icon-btn{
  width:38px;height:38px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:17px;transition:all var(--transition);position:relative
}
.icon-btn:hover{border-color:var(--border2);background:var(--surface2)}
.icon-btn .dot{
  position:absolute;top:6px;right:6px;width:7px;height:7px;
  background:var(--danger);border-radius:50%;border:1.5px solid var(--surface)
}

/* ══════════════════════════════════════
   DRAG & DROP (routine builder)
══════════════════════════════════════ */
.draggable{cursor:grab;user-select:none}
.draggable:active{cursor:grabbing}
.drag-over{background:rgba(var(--accent-rgb),.05);border:1px dashed rgba(var(--accent-rgb),.3);border-radius:8px}

/* ══════════════════════════════════════
   ACHIEVEMENT POP
══════════════════════════════════════ */
@keyframes achiev-pop{
  0%{transform:scale(0) translateY(20px);opacity:0}
  70%{transform:scale(1.15) translateY(-5px)}
  100%{transform:scale(1) translateY(0);opacity:1}
}
.achievement-popup{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--surface);border:2px solid var(--accent);border-radius:var(--radius-lg);
  padding:40px 60px;text-align:center;z-index:9999;
  box-shadow:0 0 80px rgba(var(--accent-rgb),.25),var(--shadow-lg);
  animation:achiev-pop .5s cubic-bezier(.4,0,.2,1);display:none
}
.achievement-popup.show{display:block}

/* ══════════════════════════════════════
   MAPA MUSCULAR
══════════════════════════════════════ */
.muscular-layout{display:flex;gap:20px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.anatomy-container{flex:1;min-width:260px;max-width:420px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:flex;justify-content:center}
.anatomy-svg{width:100%;height:auto}
.svg-label{font-family:'Bebas Neue',sans-serif;font-size:14px;fill:var(--muted2);letter-spacing:2px;text-anchor:middle}
.body-silhouette{fill:#161616;stroke:var(--border);stroke-width:1px;transition:fill var(--transition)}
.muscle-group{fill:#262626;stroke:#0a0a0a;stroke-width:1px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}
.muscle-group:hover{fill:#363636;filter:drop-shadow(0 0 4px rgba(232,255,0,0.2))}
.muscle-group.active-hoy{fill:rgba(232,255,0,0.7);filter:drop-shadow(0 0 8px rgba(232,255,0,0.5));stroke:var(--accent)}
.muscle-group.active-semana{fill:rgba(74,158,255,0.5);filter:drop-shadow(0 0 6px rgba(74,158,255,0.4));stroke:#4a9eff}
.muscle-group.active-hoy-rutina{fill:rgba(232,255,0,0.12);stroke:rgba(232,255,0,0.4);stroke-width:1.5px}
.muscle-legend{display:flex;flex-direction:column;gap:8px;min-width:140px}
.legend-item{font-size:13px;font-weight:500;color:var(--muted2);display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:var(--radius-sm);background:var(--surface2);border:1px solid transparent;transition:all var(--transition);cursor:pointer}
.legend-item .dot{width:8px;height:8px;border-radius:50%;background:var(--border2);transition:background var(--transition);flex-shrink:0}
.legend-item.active-hoy{color:var(--accent);border-color:rgba(232,255,0,.2);background:rgba(232,255,0,.05)}
.legend-item.active-hoy .dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.legend-item.active-semana{color:#4a9eff;border-color:rgba(74,158,255,.2);background:rgba(74,158,255,.05)}
.legend-item.active-semana .dot{background:#4a9eff;box-shadow:0 0 6px #4a9eff}
@media(max-width:900px){.muscular-layout{flex-direction:column;align-items:center}.anatomy-container{max-width:100%;width:100%}.muscle-legend{flex-direction:row;flex-wrap:wrap;min-width:unset;width:100%;justify-content:center}}

/* ══════════════════════════════════════