/* =============================================================
   GymBro — CSS Principal
   Dark-first, glassmorphism, consistent with login page
   ============================================================= */

:root {
  --bg:            #0a0a0f;
  --bg-card:       rgba(255,255,255,.04);
  --bg-card-solid: #13131a;
  --bg-input:      rgba(255,255,255,.06);
  --border:        rgba(255,255,255,.08);
  --border-focus:  rgba(124,58,237,.7);
  --text:          #f0f0f0;
  --text-muted:    rgba(255,255,255,.45);
  --text-subtle:   rgba(255,255,255,.2);
  --accent:        #7c3aed;
  --accent2:       #2563eb;
  --accent-glow:   rgba(124,58,237,.35);
  --badge-green:   rgba(74,222,128,.12);  --badge-green-t: #4ade80;
  --badge-yellow:  rgba(251,191,36,.12);  --badge-yellow-t:#fbbf24;
  --badge-red:     rgba(239,68,68,.12);   --badge-red-t:   #fca5a5;
  --badge-purple:  rgba(167,139,250,.12); --badge-purple-t:#a78bfa;
  --shadow:        0 8px 32px rgba(0,0,0,.5);
  --radius:        16px;
  --radius-sm:     10px;
  --nav-h:         60px;
  --transition:    .2s ease;
  --font:          -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;

  /* ---- aliases legacy (usados en templates inline) ---- */
  --muted:        rgba(255,255,255,.45);
  --primary:      #7c3aed;
  --primary-soft: rgba(124,58,237,.15);
  --success:      #4ade80;
  --warning:      #fbbf24;
  --danger:       #fca5a5;
  --card:         rgba(255,255,255,.04);
  --card2:        rgba(255,255,255,.07);
}

[data-theme='light'] {
  --bg:            #f0f0f5;
  --bg-card:       rgba(255,255,255,.7);
  --bg-card-solid: #ffffff;
  --bg-input:      rgba(0,0,0,.05);
  --border:        rgba(0,0,0,.08);
  --border-focus:  rgba(124,58,237,.5);
  --text:          #1a1a2e;
  --text-muted:    #666;
  --text-subtle:   #aaa;
  --accent-glow:   rgba(124,58,237,.15);
  --badge-green:   #dcfce7;  --badge-green-t: #166534;
  --badge-yellow:  #fef9c3;  --badge-yellow-t:#854d0e;
  --badge-red:     #fee2e2;  --badge-red-t:   #991b1b;
  --badge-purple:  #ede9fe;  --badge-purple-t:#5b21b6;
  --shadow:        0 4px 20px rgba(0,0,0,.08);

  --muted:        #666;
  --primary:      #7c3aed;
  --primary-soft: rgba(124,58,237,.1);
  --success:      #166534;
  --warning:      #854d0e;
  --danger:       #991b1b;
  --card:         rgba(255,255,255,.8);
  --card2:        rgba(0,0,0,.04);
}

/* -- Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
a { color: var(--text); text-decoration: none; }
img { max-width: 100%; }

/* -- Fondo animado ------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  inset: -50%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #0a0a0f 0deg, #0f0a1e 60deg, #0a0a0f 120deg,
    #150a1e 180deg, #0a0a0f 240deg, #0d1023 300deg, #0a0a0f 360deg
  );
  animation: bgSpin 25s linear infinite;
  z-index: -2;
  pointer-events: none;
}
[data-theme='light'] body::before { display: none; }

.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .12;
  z-index: -1;
  pointer-events: none;
  animation: orbFloat 10s ease-in-out infinite;
}
.orb-1 { width:500px; height:500px; background:radial-gradient(circle,#7c3aed,transparent 70%); top:-150px; left:-150px; animation-delay:0s; }
.orb-2 { width:350px; height:350px; background:radial-gradient(circle,#2563eb,transparent 70%); bottom:-100px; right:-100px; animation-delay:-4s; }
.orb-3 { width:250px; height:250px; background:radial-gradient(circle,#db2777,transparent 70%); top:50%; left:60%; animation-delay:-8s; }

@keyframes bgSpin  { to { transform: rotate(360deg); } }
@keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.07)} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes slideIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }

/* -- Section header ------------------------------------------ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.section-header .section-title {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  margin: 0;
}

/* -- card-subtitle ------------------------------------------- */
.card-subtitle { font-size: .8rem; color: var(--text-muted); margin-top: 3px; }

/* -- exercise-gif / exercise-badge / exercise-sets ----------- */
.exercise-gif {
  width: 70px; height: 70px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--card2);
  flex-shrink: 0;
}
.exercise-sets { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.exercise-badge {
  font-size:.68rem; padding:2px 8px;
  background: var(--card2);
  border-radius: 6px;
  color: var(--text-muted);
}

/* -- btn-ghost / btn-full ------------------------------------ */
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-ghost:hover { background: var(--card2); color: var(--text); }
.btn-full { width: 100%; }

/* ============================================================
   TOP NAV BAR
   ============================================================ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(10,10,15,.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}
[data-theme='light'] .topbar { background: rgba(240,240,245,.85); }
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
}
.brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.1rem; font-weight: 800; letter-spacing: -.5px;
  background: linear-gradient(135deg,#fff 0%,#a78bfa 50%,#60a5fa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  white-space: nowrap; flex-shrink: 0;
}
[data-theme='light'] .brand { background: linear-gradient(135deg,#1a1a2e 0%,#7c3aed 100%); -webkit-background-clip: text; background-clip: text; }
.brand svg { flex-shrink:0; stroke: #a78bfa; fill:none; }
.nav-items {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto; overflow: hidden;
}
.nav-item {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  font-size: .85rem; font-weight: 500;
  color: var(--text-muted); transition: all var(--transition); white-space: nowrap;
}
.nav-item svg { flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.8; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.07); }
.nav-item.active { color: var(--text); background: rgba(124,58,237,.18); }
.nav-logout { color: var(--badge-red-t); }
.nav-logout:hover { background: rgba(239,68,68,.1); }
.topbar-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:8px; }
.theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-muted); cursor: pointer; padding: 6px;
  display: flex; align-items: center; transition: all var(--transition);
}
.theme-toggle:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.nav-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--border); flex-shrink:0; }
.nav-avatar-placeholder {
  width:32px; height:32px; border-radius:50%;
  background: linear-gradient(135deg,#7c3aed,#2563eb);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; color:#fff; flex-shrink:0;
}
.hamburger {
  display:none; background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--text-muted); cursor:pointer; padding:6px; align-items:center;
}
@media (max-width: 768px) {
  .nav-items {
    position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
    flex-direction:column; align-items:flex-start;
    padding:20px 16px; background:rgba(10,10,15,.97);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    gap:4px; overflow-y:auto;
    transform:translateX(-100%); transition:transform .3s cubic-bezier(.16,1,.3,1);
    margin-left:0; z-index:999;
  }
  [data-theme='light'] .nav-items { background: rgba(240,240,245,.97); }
  .nav-items.is-open { transform: none; }
  .nav-item { width:100%; padding:12px 16px; font-size:.95rem; border-radius:10px; }
  .hamburger { display:flex; }
}

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  height:calc(60px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(10,10,15,.85);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-around; z-index:1000;
}
[data-theme='light'] .bottom-nav { background: rgba(240,240,245,.9); }
.bottom-nav-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.62rem; color:var(--text-muted); padding:6px 10px; border-radius:8px;
  transition:color var(--transition); min-width:52px;
}
.bottom-nav-item svg { stroke:currentColor; fill:none; stroke-width:1.8; }
.bottom-nav-item.active, .bottom-nav-item:active { color: var(--text); }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
  padding-top: calc(var(--nav-h) + 20px);
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 20px);
  padding-left: 16px; padding-right: 16px;
  max-width: 680px; margin: 0 auto;
  animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px; margin-bottom: 14px;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow);
  transition: border-color var(--transition);
}
.card:hover { border-color: rgba(124,58,237,.25); }
.card-title { font-size:1rem; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.card-meta { font-size:.8rem; color:var(--text-muted); margin-top:6px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--bg-input);
  color:var(--text); font-size:.875rem; font-weight:600;
  cursor:pointer; transition:all var(--transition);
  white-space:nowrap; font-family:var(--font); text-decoration:none;
  -webkit-tap-highlight-color:transparent; backdrop-filter:blur(8px);
}
.btn:hover { border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.1); }
.btn:active { transform:scale(.97); }
.btn-primary { background:linear-gradient(135deg,#7c3aed,#2563eb); border-color:transparent; color:#fff; box-shadow:0 4px 16px var(--accent-glow); }
.btn-primary:hover { opacity:.9; box-shadow:0 6px 24px var(--accent-glow); }
.btn-sm { padding:6px 12px; font-size:.8rem; }
.btn-danger { color:var(--badge-red-t); border-color:rgba(239,68,68,.3); }
.btn-danger:hover { background:rgba(239,68,68,.1); }
.btn-block { width:100%; }
.btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; }
.form-control {
  width:100%; padding:13px 14px;
  background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-size:.95rem; font-family:var(--font);
  transition:border-color var(--transition),box-shadow var(--transition);
  -webkit-appearance:none; appearance:none; backdrop-filter:blur(8px);
}
.form-control::placeholder { color:var(--text-subtle); }
.form-control:focus { outline:none; border-color:var(--border-focus); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
select.form-control { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
textarea.form-control { resize:vertical; min-height:80px; }
.form-check { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.9rem; padding:8px 0; }
.form-check input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); cursor:pointer; }

/* ============================================================
   BADGES
   ============================================================ */
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.badge-green  { background:var(--badge-green);  color:var(--badge-green-t);  }
.badge-yellow { background:var(--badge-yellow); color:var(--badge-yellow-t); }
.badge-red    { background:var(--badge-red);    color:var(--badge-red-t);    }
.badge-purple { background:var(--badge-purple); color:var(--badge-purple-t); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-radius:var(--radius-sm); margin-bottom:16px;
  font-size:.875rem; font-weight:500; animation:slideIn .3s ease both; position:relative;
}
.alert-close { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1.1rem; color:inherit; opacity:.6; padding:0 4px; }
.alert-close:hover { opacity:1; }
.alert-success { background:var(--badge-green);  border:1px solid rgba(74,222,128,.25);  color:var(--badge-green-t);  }
.alert-error   { background:var(--badge-red);    border:1px solid rgba(239,68,68,.3);    color:var(--badge-red-t);    }
.alert-warning { background:var(--badge-yellow); border:1px solid rgba(251,191,36,.25);  color:var(--badge-yellow-t); }
.alert-info    { background:var(--badge-purple); border:1px solid rgba(167,139,250,.25); color:var(--badge-purple-t); }
.flash { padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:14px; font-size:.875rem; font-weight:500; animation:slideIn .3s ease; }
.flash-success { background:var(--badge-green); color:var(--badge-green-t); }
.flash-error   { background:var(--badge-red);   color:var(--badge-red-t); }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-bar-wrap { height:6px; background:var(--bg-input); border-radius:3px; overflow:hidden; margin:8px 0; }
.progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:3px; transition:width .6s ease; }

/* ============================================================
   STAT GRID
   ============================================================ */
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px; }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 14px; text-align:center; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.stat-card .stat-value { font-size:1.8rem; font-weight:800; line-height:1; background:linear-gradient(135deg,#fff,#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-card .stat-label { font-size:.72rem; color:var(--text-muted); margin-top:5px; text-transform:uppercase; letter-spacing:.5px; }

/* ============================================================
   EXERCISE CARD
   ============================================================ */
.exercise-card { display:flex; gap:12px; align-items:flex-start; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; margin-bottom:10px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.exercise-info { flex:1; min-width:0; }
.exercise-name { font-size:.9rem; font-weight:600; margin-bottom:4px; }
.exercise-meta { font-size:.78rem; color:var(--text-muted); }
.exercise-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.exercise-tags span { font-size:.68rem; padding:2px 7px; background:var(--bg-input); border-radius:4px; color:var(--text-muted); }

/* ============================================================
   SESSION BLOCK
   ============================================================ */
.session-block { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; backdrop-filter:blur(10px); }
.session-header { background:var(--bg-input); padding:12px 16px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.session-header h3 { font-size:.9rem; font-weight:600; }
.session-body { padding:12px; }
.session-done .session-header { opacity:.5; }

/* ============================================================
   TABLE
   ============================================================ */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
th { text-align:left; padding:12px 14px; color:var(--text-muted); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,.02); }

/* ============================================================
   AVATAR
   ============================================================ */
.avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--bg-input); border:1px solid var(--border); }
.avatar-lg { width:80px; height:80px; }

/* ============================================================
   MISC UTILS
   ============================================================ */
.divider { height:1px; background:var(--border); margin:16px 0; }
.section-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.flex { display:flex; } .flex-center { align-items:center; } .flex-between { justify-content:space-between; }
.gap-8{gap:8px} .gap-12{gap:12px} .mt-8{margin-top:8px} .mt-16{margin-top:16px} .mb-16{margin-bottom:16px}
.text-muted{color:var(--text-muted)} .text-sm{font-size:.82rem} .text-center{text-align:center} .fw-600{font-weight:600}
.empty-state { text-align:center; padding:48px 20px; color:var(--text-muted); }
.empty-state svg { width:52px; height:52px; stroke:var(--text-subtle); fill:none; stroke-width:1.5; margin-bottom:16px; }
.hidden { display:none !important; }

/* ============================================================
   STARS
   ============================================================ */
.stars{display:flex;gap:4px} .star{width:20px;height:20px;cursor:pointer;color:var(--text-subtle);transition:color .15s} .star.on{color:#fbbf24}

/* ============================================================
   TOGGLE SWITCH
   ============================================================ */
.toggle-wrap{display:flex;align-items:center;gap:10px}
.toggle{position:relative;display:inline-block;width:44px;height:26px}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--bg-input);border-radius:26px;cursor:pointer;border:1px solid var(--border);transition:background .2s}
.toggle-slider:before{content:'';position:absolute;width:20px;height:20px;left:2px;top:2px;background:var(--text-muted);border-radius:50%;transition:transform .2s,background .2s}
.toggle input:checked + .toggle-slider{background:var(--accent);border-color:var(--accent)}
.toggle input:checked + .toggle-slider:before{transform:translateX(18px);background:#fff}

/* ============================================================
   RATING / CHIP
   ============================================================ */
.rating-group{display:flex;gap:8px;flex-wrap:wrap}
.rating-btn{padding:8px 16px;border-radius:20px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:all var(--transition)}
.rating-btn.active,.rating-btn:hover{border-color:var(--accent);background:rgba(124,58,237,.15);color:var(--text)}
.check-chip{padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-muted);font-size:.82rem;cursor:pointer;transition:all var(--transition);display:inline-flex;align-items:center;gap:6px}
.check-chip.selected{border-color:var(--accent);background:rgba(124,58,237,.15);color:var(--text)}

/* ============================================================
   MEAL ROWS
   ============================================================ */
.meal-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.meal-row:last-child{border-bottom:none}
.meal-icon{font-size:1.4rem;flex-shrink:0}
.meal-info{flex:1}
.meal-type{font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px}
.meal-desc{font-size:.88rem;margin-top:2px}
.meal-macros{font-size:.72rem;color:var(--text-muted);margin-top:4px}