/* =====================================================
   Persona 2.0 SaaS — Extended CSS
   Añade: Fitness, Business/Kanban, Gamificación,
          Notificaciones, Goals, Leaderboard
   ===================================================== */

/* ── Home extras ──────────────────────────────────── */
.welcome-avatar { width:52px;height:52px;border-radius:50%;border:2px solid var(--color-primary);flex-shrink:0; }
.home-welcome { display:flex;align-items:center;gap:16px;margin-bottom:24px; }
.home-welcome h2 { font-size:22px;margin:0; }
.home-welcome p  { margin:4px 0 0;color:var(--color-text-muted);font-size:14px; }

.level-bar-wrap { margin-bottom:24px; }
.level-bar-header { display:flex;justify-content:space-between;font-size:13px;color:var(--color-text-muted);margin-bottom:6px; }

.home-stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
}
.stat-tile {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:20px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color var(--transition),transform var(--transition);
}
.stat-tile:hover { border-color:var(--color-primary);transform:translateY(-2px); }
.stat-tile.upgrade-tile { border-style:dashed;border-color:var(--color-premium); }
.tile-icon  { display:block;font-size:30px;margin-bottom:8px; }
.tile-val   { display:block;font-size:20px;font-weight:700;margin-bottom:4px; }
.tile-label { display:block;font-size:12px;color:var(--color-text-muted); }

/* ── Fitness ──────────────────────────────────────── */
.routines-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
  margin-bottom:20px;
}
.routine-card {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:20px;
  transition:border-color var(--transition);
}
.routine-card:hover { border-color:var(--color-primary); }
.routine-card.locked { opacity:.65; }
.routine-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; }
.routine-cat { font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600; }
.cat-fuerza       { background:#1a2a4a;color:#6ba8d8; }
.cat-cardio       { background:#2a1a3a;color:#c86bd8; }
.cat-flexibilidad { background:#1a3a2a;color:#6bd8a8; }
.cat-general      { background:var(--color-surface-2);color:var(--color-text-muted); }
.routine-title { font-size:16px;font-weight:600;margin:0 0 6px; }
.routine-meta  { font-size:13px;color:var(--color-text-muted);margin-bottom:14px; }

.exercise-list { display:flex;flex-direction:column;gap:8px; }
.exercise-item {
  display:flex;align-items:center;gap:12px;
  background:var(--color-surface-2);
  border-radius:var(--radius-sm);
  padding:10px 14px;
}
.ex-num { width:24px;height:24px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0; }
.ex-body { flex:1; }
.ex-body strong { display:block;font-size:14px;font-weight:600; }
.ex-body span   { font-size:12px;color:var(--color-text-muted); }

/* ── Activity history bars ────────────────────────── */
.hist-day {
  display:grid;
  grid-template-columns:100px 1fr auto;
  align-items:center;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--color-border);
  font-size:13px;
}
.hist-bar-wrap { background:var(--color-surface-2);border-radius:4px;height:6px;overflow:hidden; }
.hist-bar      { background:var(--color-accent);height:100%;border-radius:4px;transition:width .5s; }

/* ── Business / Tasks ─────────────────────────────── */
.kanban-summary {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:20px;
}
.kanban-count {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:16px;
  text-align:center;
  font-size:28px;
  font-weight:700;
}
.kanban-count span { display:block;font-size:13px;font-weight:400;color:var(--color-text-muted); }
.kanban-count.pending    { border-top:3px solid var(--color-premium); }
.kanban-count.in-progress{ border-top:3px solid var(--color-primary); }
.kanban-count.done       { border-top:3px solid var(--color-accent); }

.tasks-filters { display:flex;gap:8px;flex-wrap:wrap; }
.filter-btn {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:20px;
  padding:6px 16px;
  font-size:13px;
  color:var(--color-text-muted);
  cursor:pointer;
  transition:all var(--transition);
}
.filter-btn.active { background:var(--color-primary);border-color:var(--color-primary);color:#fff; }

.task-item {
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  margin-bottom:8px;
  transition:border-color var(--transition);
}
.task-item.status-done { opacity:.65; }
.task-item.status-in_progress { border-left:3px solid var(--color-primary); }
.task-item.status-pending { border-left:3px solid var(--color-premium); }
.task-prio  { font-size:16px;flex-shrink:0; }
.task-title { flex:1;font-size:14px;font-weight:500; }
.task-title.done-txt { text-decoration:line-through;color:var(--color-text-muted); }
.task-due   { font-size:12px;color:var(--color-text-muted); }
.task-actions { display:flex;gap:4px; }
.btn-sm {
  background:var(--color-surface-2);
  border:none;
  border-radius:6px;
  padding:4px 8px;
  cursor:pointer;
  font-size:14px;
  transition:background var(--transition);
}
.btn-sm:hover { background:var(--color-border); }

/* ── Goals ────────────────────────────────────────── */
.goal-item {
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:14px;
  margin-bottom:10px;
}
.goal-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px; }
.goal-status { font-size:11px;padding:2px 8px;border-radius:10px; }
.status-active    { background:#1a3a2a;color:#6bd8a8; }
.status-completed { background:#1a2a4a;color:#6ba8d8; }
.status-paused    { background:var(--color-surface);color:var(--color-text-muted); }
.goal-date  { font-size:12px;color:var(--color-text-muted);margin:4px 0; }
.goal-progress { display:flex;align-items:center;gap:10px;margin-top:8px; }
.goal-progress .progress-bar-wrap { flex:1; }
.goal-slider { width:80px;accent-color:var(--color-primary); }

/* ── Productivity score circle ────────────────────── */
.score-circle {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100px;height:100px;
  border-radius:50%;
  border:5px solid var(--score-color,var(--color-primary));
  margin:0 auto;
}
.score-value { font-size:32px;font-weight:700;line-height:1; }
.score-label { font-size:12px;color:var(--color-text-muted); }

/* ── Wallet category breakdown ────────────────────── */
.category-breakdown h3 { margin-bottom:12px; }
.cat-list { display:flex;flex-direction:column;gap:8px; }
.cat-row { display:flex;align-items:center;gap:10px;font-size:13px; }
.cat-icon { font-size:16px;width:20px;text-align:center; }
.cat-name { min-width:100px; }
.cat-bar-wrap { flex:1;background:var(--color-surface-2);border-radius:4px;height:8px;overflow:hidden; }
.cat-bar { height:100%;border-radius:4px;transition:width .5s; }
.cat-bar.income  { background:var(--color-income); }
.cat-bar.expense { background:var(--color-expense); }
.cat-amount { min-width:80px;text-align:right;font-weight:600; }

/* ── Gamification ─────────────────────────────────── */
.gami-hero { text-align:center; }
.gami-level-badge {
  display:inline-block;
  background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
  color:#fff;
  font-size:22px;font-weight:700;
  padding:10px 24px;
  border-radius:24px;
  margin-bottom:20px;
}
.gami-stats { display:flex;justify-content:center;gap:40px;margin-bottom:16px;flex-wrap:wrap; }
.gami-stat  { text-align:center; }
.gami-val   { display:block;font-size:24px;font-weight:700; }
.gami-lbl   { display:block;font-size:12px;color:var(--color-text-muted);margin-top:2px; }

.badges-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px; }
.badge-card {
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:16px;
  text-align:center;
}
.badge-icon  { display:block;font-size:32px;margin-bottom:6px; }
.badge-label { display:block;font-size:13px;font-weight:600;margin-bottom:4px; }
.badge-desc  { display:block;font-size:11px;color:var(--color-text-muted);line-height:1.4; }

.leaderboard-row {
  display:flex;align-items:center;gap:14px;
  padding:12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--color-border);
  margin-bottom:6px;
  transition:background var(--transition);
}
.leaderboard-row:hover { background:var(--color-surface-2); }
.leaderboard-row.top-1 { border-color:#f5a623;background:#2a1f0a; }
.leaderboard-row.top-2 { border-color:#8890b5; }
.leaderboard-row.top-3 { border-color:#c87a3a; }
.lb-rank   { font-size:22px;width:32px;text-align:center;flex-shrink:0; }
.lb-name   { flex:1;font-weight:500; }
.lb-points { font-weight:700;color:var(--color-primary); }

/* ── Notifications ────────────────────────────────── */
.notif-list { display:flex;flex-direction:column;gap:16px; }
.notif-row  { display:flex;align-items:center;justify-content:space-between;gap:16px; }
.notif-info { flex:1; }
.notif-info strong { display:block;margin-bottom:4px; }
.notif-info p { font-size:13px;color:var(--color-text-muted);margin:0; }

/* ── Toggle (reusable) ────────────────────────────── */
.persona-toggle { position:relative;cursor:pointer; }
.persona-toggle input { display:none; }
.toggle-slider {
  display:block;
  width:48px;height:26px;
  background:var(--color-surface-2);
  border-radius:13px;
  position:relative;
  transition:background var(--transition);
  border:1px solid var(--color-border);
}
.toggle-slider::after {
  content:"";
  position:absolute;
  top:3px;left:3px;
  width:18px;height:18px;
  background:#fff;
  border-radius:50%;
  transition:left var(--transition);
}
.persona-toggle input:checked + .toggle-slider { background:var(--color-primary);border-color:var(--color-primary); }
.persona-toggle input:checked + .toggle-slider::after { left:25px; }

/* ── Wallet report table ──────────────────────────── */
.report-header,.report-row {
  display:grid;
  grid-template-columns:80px 1fr 1fr 1fr;
  gap:8px;
  padding:10px 8px;
  border-bottom:1px solid var(--color-border);
  font-size:14px;
  align-items:center;
}
.report-row:hover { background:var(--color-surface-2); }

/* ── Responsive additions ─────────────────────────── */
@media (max-width:768px) {
  .kanban-summary { grid-template-columns:repeat(3,1fr); }
  .routines-grid  { grid-template-columns:1fr 1fr; }
  .gami-stats     { gap:20px; }
  .home-stats-grid{ grid-template-columns:1fr 1fr; }
  .hist-day       { grid-template-columns:90px 1fr auto; }
  .report-header,.report-row { grid-template-columns:70px 1fr 1fr 1fr;font-size:12px; }
}

@media (max-width:480px) {
  .kanban-summary { grid-template-columns:1fr; }
  .kanban-count   { font-size:22px; }
  .routines-grid  { grid-template-columns:1fr; }
  .gami-hero      { padding:16px; }
  .badges-grid    { grid-template-columns:1fr 1fr; }
  .home-stats-grid{ grid-template-columns:1fr 1fr; }
}