trackops 1.0.1 → 1.1.0

package/ui/css/panels.css

@@ -1,953 +1,956 @@
-/* ═══════════════════════════════════════════════════════
-   PANELS — Sidebar, Topbar, Modals, Flash, Kanban
-   ═══════════════════════════════════════════════════════ */
-
-/* ───────────────────────────────────
-   SIDEBAR
-   ─────────────────────────────────── */
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: var(--surface-1);
-  border-right: 1px solid var(--border);
-  padding: var(--space-5) 0;
-  gap: 0;
-}
-
-/* Logo */
-.sidebar-logo {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: 0 var(--space-5) var(--space-5);
-  border-bottom: 1px solid var(--border);
-  margin-bottom: var(--space-4);
-  text-decoration: none;
-  color: var(--text-primary);
-}
-.sidebar-logo:hover { color: var(--text-primary); }
-
-.sidebar-logo-icon {
-  width: 36px;
-  height: 36px;
-  background: linear-gradient(135deg, var(--accent), #4F46E5);
-  border-radius: var(--radius-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  box-shadow: var(--shadow-accent);
-}
-.sidebar-logo-name {
-  font-family: var(--font-heading);
-  font-weight: 800;
-  font-size: var(--text-lg);
-  letter-spacing: -0.03em;
-  color: var(--text-primary);
-}
-
-/* Secciones */
-.sidebar-section {
-  padding: 0 var(--space-3);
-  flex: 1;
-  overflow-y: auto;
-}
-.sidebar-section + .sidebar-section {
-  border-top: 1px solid var(--border);
-  padding-top: var(--space-4);
-  margin-top: var(--space-4);
-}
-
-.sidebar-section-label {
-  font-size: var(--text-xs);
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  padding: 0 var(--space-3) var(--space-2);
-}
-
-/* Nav items */
-.sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); }
-
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: 0.55rem var(--space-3);
-  border-radius: var(--radius-md);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  color: var(--text-secondary);
-  cursor: pointer;
-  border: 1px solid transparent;
-  text-decoration: none;
-  transition:
-    background var(--duration-fast) var(--ease-out),
-    color var(--duration-fast) var(--ease-out),
-    border-color var(--duration-fast) var(--ease-out);
-  position: relative;
-  user-select: none;
-  min-height: 40px;
-}
-.nav-item:hover {
-  background: var(--surface-3);
-  color: var(--text-primary);
-}
-.nav-item.is-active {
-  background: var(--accent-light);
-  color: var(--text-accent);
-  border-color: var(--border-accent);
-  font-weight: 700;
-}
-.nav-item-icon {
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  opacity: 0.7;
-}
-.nav-item.is-active .nav-item-icon { opacity: 1; }
-
-.nav-item-label { flex: 1; min-width: 0; }
-.nav-item-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 5px;
-  font-size: 0.65rem;
-  font-weight: 800;
-  border-radius: var(--radius-full);
-  background: var(--accent);
-  color: white;
-}
-.nav-item-badge.danger { background: var(--danger); }
-
-/* Sidebar footer */
-.sidebar-footer {
-  padding: var(--space-4) var(--space-3) 0;
-  border-top: 1px solid var(--border);
-  margin-top: auto;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-/* ───────────────────────────────────
-   TOPBAR
-   ─────────────────────────────────── */
-.topbar {
-  height: var(--topbar-height);
-  background: rgba(10, 15, 30, 0.85);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  padding: 0 var(--content-pad);
-  gap: var(--space-4);
-}
-
-.topbar-search {
-  flex: 1;
-  max-width: 380px;
-}
-
-.topbar-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  margin-left: auto;
-}
-
-.topbar-project-selector {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.project-select-wrapper {
-  position: relative;
-}
-.project-select-wrapper select {
-  min-width: 220px;
-  background-color: var(--surface-2);
-  font-size: var(--text-sm);
-  height: 36px;
-  padding: 0 2.5rem 0 0.85rem;
-}
-
-.repo-badge {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: 0.3rem 0.75rem;
-  border-radius: var(--radius-full);
-  font-size: var(--text-xs);
-  font-weight: 600;
-  border: 1px solid transparent;
-  white-space: nowrap;
-}
-.repo-badge.clean {
-  background: var(--success-light);
-  border-color: rgba(16,185,129,0.2);
-  color: var(--success);
-}
-.repo-badge.dirty {
-  background: var(--warning-light);
-  border-color: rgba(245,158,11,0.2);
-  color: var(--warning);
-}
-.repo-badge-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.clean .repo-badge-dot  { background: var(--success); animation: pulse 2s infinite; }
-.dirty .repo-badge-dot  { background: var(--warning); }
-
-/* Hamburger (mobile) */
-.topbar-hamburger {
-  display: none;
-  flex-direction: column;
-  gap: 5px;
-  padding: var(--space-2);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  border: 1px solid var(--border);
-  background: var(--surface-2);
-}
-.topbar-hamburger span {
-  display: block;
-  width: 18px;
-  height: 2px;
-  background: var(--text-primary);
-  border-radius: 2px;
-  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base);
-}
-
-@media (max-width: 1024px) {
-  .topbar-hamburger { display: flex; }
-}
-
-/* ───────────────────────────────────
-   TIME TRACKER WIDGET (en topbar)
-   ─────────────────────────────────── */
-.topbar-timer {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: 0.3rem 0.85rem;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-full);
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  font-weight: 700;
-  color: var(--text-primary);
-  letter-spacing: 0.04em;
-}
-.topbar-timer.is-running {
-  border-color: var(--border-accent);
-  background: var(--accent-light);
-  color: var(--text-accent);
-}
-.topbar-timer-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--text-muted);
-  flex-shrink: 0;
-}
-.topbar-timer.is-running .topbar-timer-dot {
-  background: var(--accent);
-  animation: pulse 1s infinite;
-}
-
-/* ───────────────────────────────────
-   PANEL SECTION (contenedores de vistas)
-   ─────────────────────────────────── */
-.panel {
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-5) var(--space-5) var(--space-4);
-  border-bottom: 1px solid var(--border);
-  gap: var(--space-4);
-}
-.panel-header-left { display: flex; flex-direction: column; gap: var(--space-1); }
-.panel-header-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
-.panel-title { font-size: var(--text-md); font-weight: 700; margin: 0; }
-.panel-subtitle { font-size: var(--text-xs); color: var(--text-muted); }
-
-.panel-body { padding: var(--space-5); }
-.panel-footer {
-  padding: var(--space-4) var(--space-5);
-  border-top: 1px solid var(--border);
-  background: var(--surface-4);
-}
-
-/* ───────────────────────────────────
-   KANBAN BOARD
-   ─────────────────────────────────── */
-.board-grid {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(260px, 1fr);
-  gap: var(--space-3);
-  overflow-x: auto;
-  padding-bottom: var(--space-4);
-  min-height: 500px;
-  align-items: start;
-}
-
-.board-column {
-  background: var(--surface-1);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  padding: var(--space-3);
-  min-height: 400px;
-  transition: border-color var(--duration-fast), background var(--duration-fast);
-}
-.board-column.is-drop-target {
-  border-color: var(--border-accent);
-  background: rgba(99,102,241,0.04);
-}
-
-.board-column-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--space-3);
-  padding: 0 var(--space-1);
-}
-.board-column-title {
-  font-size: var(--text-sm);
-  font-weight: 700;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-.board-column-dot {
-  width: 8px; height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.col-pending .board-column-dot     { background: var(--warning); }
-.col-in_progress .board-column-dot { background: var(--info); }
-.col-in_review .board-column-dot   { background: var(--accent); }
-.col-blocked .board-column-dot     { background: var(--danger); }
-.col-completed .board-column-dot   { background: var(--success); }
-.col-cancelled .board-column-dot   { background: var(--text-muted); }
-
-.board-column-count {
-  min-width: 24px;
-  height: 24px;
-  border-radius: var(--radius-full);
-  background: var(--surface-3);
-  font-size: var(--text-xs);
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 var(--space-2);
-}
-
-.board-column-body { display: flex; flex-direction: column; gap: var(--space-2); }
-
-/* ───────────────────────────────────
-   TERMINAL SURFACE
-   ─────────────────────────────────── */
-.terminal-surface {
-  background: #060a14;
-  border: 1px solid rgba(255,255,255,0.05);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-.terminal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-2) var(--space-4);
-  background: rgba(255,255,255,0.03);
-  border-bottom: 1px solid rgba(255,255,255,0.04);
-  gap: var(--space-3);
-}
-.terminal-dots { display: flex; gap: var(--space-2); align-items: center; }
-.terminal-dots span {
-  width: 10px; height: 10px;
-  border-radius: 50%;
-}
-.terminal-dots span:nth-child(1) { background: #EF4444; }
-.terminal-dots span:nth-child(2) { background: #F59E0B; }
-.terminal-dots span:nth-child(3) { background: #10B981; }
-.terminal-title {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  color: var(--text-muted);
-  flex: 1;
-  text-align: center;
-}
-.terminal-output {
-  margin: 0;
-  padding: var(--space-5);
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  line-height: 1.7;
-  color: #94D4BC;
-  min-height: 280px;
-  max-height: 460px;
-  overflow-y: auto;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-/* ───────────────────────────────────
-   FLASH / TOAST
-   ─────────────────────────────────── */
-#flash-container {
-  position: fixed;
-  right: var(--space-6);
-  bottom: var(--space-6);
-  z-index: var(--z-toast);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  pointer-events: none;
-  max-width: 380px;
-  width: 100%;
-}
-
-.flash {
-  padding: var(--space-4) var(--space-5);
-  border-radius: var(--radius-lg);
-  background: var(--surface-2);
-  border: 1px solid var(--border-strong);
-  box-shadow: var(--shadow-lg);
-  color: var(--text-primary);
-  font-size: var(--text-sm);
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  pointer-events: all;
-  animation: slideInRight var(--duration-slow) var(--ease-out) both;
-  backdrop-filter: blur(20px);
-}
-.flash.flash-success { border-color: rgba(16,185,129,0.3); }
-.flash.flash-error   { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); }
-.flash.flash-warning { border-color: rgba(245,158,11,0.3); }
-.flash.flash-exit    { animation: slideInRight var(--duration-base) var(--ease-in) reverse; }
-
-/* ───────────────────────────────────
-   MODAL
-   ─────────────────────────────────── */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.7);
-  backdrop-filter: blur(8px);
-  z-index: var(--z-modal);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-6);
-  animation: fadeIn var(--duration-base) var(--ease-out);
-}
-.modal-overlay.is-hidden { display: none; }
-
-.modal {
-  background: var(--surface-2);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-xl);
-  width: 100%;
-  max-width: 540px;
-  max-height: 90dvh;
-  overflow-y: auto;
-  box-shadow: var(--shadow-xl);
-  animation: fadeInUp var(--duration-slow) var(--ease-out);
-}
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-5) var(--space-6);
-  border-bottom: 1px solid var(--border);
-}
-.modal-title { font-size: var(--text-md); font-weight: 700; margin: 0; }
-.modal-body  { padding: var(--space-6); }
-.modal-footer {
-  padding: var(--space-4) var(--space-6);
-  border-top: 1px solid var(--border);
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--space-3);
-}
-.modal-close {
-  width: 32px; height: 32px;
-  border-radius: var(--radius-sm);
-  display: flex; align-items: center; justify-content: center;
-  color: var(--text-muted);
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-  cursor: pointer;
-  transition: background var(--duration-fast);
-}
-.modal-close:hover { background: var(--surface-4); color: var(--text-primary); }
-
-/* ───────────────────────────────────
-   CONSOLE LOGS PANEL
-   ─────────────────────────────────── */
-.console-panel {
-  position: fixed;
-  bottom: 0;
-  left: var(--sidebar-width);
-  right: 0;
-  z-index: var(--z-panel);
-  background: #060a14;
-  border-top: 1px solid var(--border);
-  transition: transform var(--duration-slow) var(--ease-out);
-  transform: translateY(100%);
-}
-.console-panel.is-open {
-  transform: translateY(0);
-}
-.console-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-2) var(--space-4);
-  border-bottom: 1px solid rgba(255,255,255,0.04);
-  background: rgba(255,255,255,0.02);
-}
-.console-panel-title {
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  color: var(--text-muted);
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-.console-panel-actions {
-  display: flex;
-  gap: var(--space-2);
-}
-.console-logs {
-  overflow-y: auto;
-  max-height: 220px;
-  padding: var(--space-2) 0;
-}
-.console-log-entry {
-  display: grid;
-  grid-template-columns: auto auto 1fr;
-  gap: var(--space-3);
-  align-items: start;
-  padding: var(--space-1) var(--space-4);
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  line-height: 1.6;
-  border-bottom: 1px solid rgba(255,255,255,0.02);
-}
-.console-log-entry:hover { background: rgba(255,255,255,0.02); }
-.console-log-time  { color: var(--text-muted); white-space: nowrap; }
-.log-level         { font-weight: 700; white-space: nowrap; }
-.log-error         { color: var(--danger); }
-.log-warn          { color: var(--warning); }
-.log-info          { color: var(--info); }
-.log-debug         { color: var(--text-muted); }
-.console-log-msg   { color: var(--text-secondary); word-break: break-all; }
-
-/* ───────────────────────────────────
-   ONBOARDING SPOTLIGHT (Tour)
-   ─────────────────────────────────── */
-.onboarding-spotlight {
-  /* Los estilos inline de position, inset, box-shadow se inyectan por JS */
-  background: transparent;
-  z-index: var(--z-onboard);
-  pointer-events: none;
-}
-.onboarding-spotlight.is-hidden { display: none; }
-
-.onboarding-ring {
-  box-sizing: border-box;
-}
-
-@keyframes ob-ring-pulse {
-  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99,102,241,0.7); opacity: 1; }
-  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(99,102,241,0); opacity: 0; }
-  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99,102,241,0); opacity: 0; }
-}
-
-.onboarding-tooltip {
-  /* Los estilos inline de position y transform se inyectan por JS */
-  background: var(--surface-2);
-  border: 1px solid var(--border-accent);
-  border-radius: var(--radius-xl);
-  padding: var(--space-6);
-  box-shadow: var(--shadow-xl);
-  opacity: 0;
-  transition: opacity var(--duration-base) var(--ease-out);
-  pointer-events: all;
-  color: var(--text-primary);
-}
-.onboarding-tooltip.is-hidden { display: none; pointer-events: none; }
-.ob-enter {
-  animation: ob-enter-anim var(--duration-base) var(--ease-out) forwards;
-}
-@keyframes ob-enter-anim {
-  from { opacity: 0; transform: translateY(8px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-/* ── Flechas (Bocadillo) ── */
-.onboarding-tooltip::after {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-/* Flecha apuntando hacia arriba (cuando el tooltip está bottom) */
-.onboarding-tooltip[data-pos="bottom"]::after {
-  top: -10px;
-  left: 50%;
-  margin-left: -10px;
-  border-width: 0 10px 10px 10px;
-  border-color: transparent transparent var(--surface-2) transparent;
-}
-/* Flecha apuntando hacia abajo (cuando el tooltip está top) */
-.onboarding-tooltip[data-pos="top"]::after {
-  bottom: -10px;
-  left: 50%;
-  margin-left: -10px;
-  border-width: 10px 10px 0 10px;
-  border-color: var(--surface-2) transparent transparent transparent;
-}
-/* Flecha apuntando hacia la izquierda (cuando el tooltip está right) */
-.onboarding-tooltip[data-pos="right"]::after {
-  left: -10px;
-  top: 50%;
-  margin-top: -10px;
-  border-width: 10px 10px 10px 0;
-  border-color: transparent var(--surface-2) transparent transparent;
-}
-/* Flecha apuntando hacia la derecha (cuando el tooltip está left) */
-.onboarding-tooltip[data-pos="left"]::after {
-  right: -10px;
-  top: 50%;
-  margin-top: -10px;
-  border-width: 10px 0 10px 10px;
-  border-color: transparent transparent transparent var(--surface-2);
-}
-
-.ob-step-label {
-  font-size: var(--text-xs);
-  font-weight: 700;
-  color: var(--accent);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin-bottom: var(--space-3);
-}
-.ob-title {
-  font-size: var(--text-lg);
-  font-weight: 800;
-  margin-bottom: var(--space-2);
-}
-.ob-desc {
-  font-size: var(--text-sm);
-  color: var(--text-secondary);
-  line-height: 1.6;
-  margin-bottom: var(--space-5);
-}
-.ob-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: var(--space-4);
-}
-.ob-dots {
-  display: flex;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-}
-.ob-dot {
-  width: 6px; height: 6px;
-  border-radius: 50%;
-  background: var(--border-strong);
-  transition: background var(--duration-base);
-}
-.ob-dot.is-active {
-  background: var(--accent);
-  width: 18px;
-  border-radius: var(--radius-full);
-}
-.ob-actions {
-  display: flex;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-}
-
-
-/* ───────────────────────────────────
-   TIME TRACKER (widget grande)
-   ─────────────────────────────────── */
-.time-tracker-card {
-  background: linear-gradient(135deg, var(--navy-90) 0%, var(--surface-1) 100%);
-  border: 1px solid var(--border-accent);
-  border-radius: var(--radius-xl);
-  padding: var(--space-5);
-  position: relative;
-  overflow: hidden;
-}
-.time-tracker-card::before {
-  content: '';
-  position: absolute;
-  bottom: -40px; right: -40px;
-  width: 160px; height: 160px;
-  background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%);
-  border-radius: 50%;
-}
-
-.timer-display {
-  font-family: var(--font-mono);
-  font-size: 2.8rem;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  color: var(--text-primary);
-  line-height: 1;
-  margin: var(--space-4) 0;
-  text-align: center;
-}
-.timer-display.is-running { color: var(--accent-hover); }
-
-.timer-task-name {
-  font-size: var(--text-xs);
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-align: center;
-  margin-bottom: var(--space-4);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.timer-controls {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-3);
-}
-.timer-btn {
-  width: 44px; height: 44px;
-  border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  border: 2px solid transparent;
-  cursor: pointer;
-  transition:
-    background var(--duration-base) var(--ease-out),
-    transform var(--duration-fast) var(--ease-out),
-    border-color var(--duration-base);
-}
-.timer-btn:active { transform: scale(0.9); }
-.timer-btn-play {
-  background: var(--accent);
-  color: white;
-  box-shadow: var(--shadow-accent);
-  width: 54px; height: 54px;
-}
-.timer-btn-play:hover { background: var(--accent-hover); transform: scale(1.05); }
-.timer-btn-pause {
-  background: var(--warning-light);
-  border-color: rgba(245,158,11,0.2);
-  color: var(--warning);
-}
-.timer-btn-stop {
-  background: var(--danger-light);
-  border-color: rgba(239,68,68,0.2);
-  color: var(--danger);
-}
-
-.timer-total {
-  text-align: center;
-  font-size: var(--text-xs);
-  color: var(--text-muted);
-  margin-top: var(--space-3);
-}
-
-/* ───────────────────────────────────
-   PROGRESS DONUT (SVG)
-   ─────────────────────────────────── */
-.donut-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-3);
-  position: relative;
-}
-.donut-label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-}
-.donut-percent {
-  font-family: var(--font-heading);
-  font-size: var(--text-2xl);
-  font-weight: 800;
-  color: var(--text-primary);
-  display: block;
-  line-height: 1;
-}
-.donut-sub {
-  font-size: var(--text-xs);
-  color: var(--text-muted);
-}
-.donut-legend {
-  display: flex;
-  gap: var(--space-5);
-  flex-wrap: wrap;
-  justify-content: center;
-}
-.donut-legend-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-size: var(--text-xs);
-  color: var(--text-secondary);
-}
-.donut-legend-dot {
-  width: 8px; height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-/* ───────────────────────────────────
-   SESSION PILLS (consola)
-   ─────────────────────────────────── */
-.session-pill {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  padding: var(--space-2) var(--space-4);
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  font-size: var(--text-xs);
-  font-family: var(--font-mono);
-  cursor: pointer;
-  transition: border-color var(--duration-fast), background var(--duration-fast);
-}
-.session-pill:hover { border-color: var(--border-strong); }
-.session-pill.is-selected {
-  border-color: var(--border-accent);
-  background: var(--accent-light);
-}
-.session-pill-cmd {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text-secondary);
-}
-.session-pill-status { flex-shrink: 0; }
-
-/* ───────────────────────────────────
-   ACTIVITY TIMELINE
-   ─────────────────────────────────── */
-.activity-item {
-  display: grid;
-  grid-template-columns: 36px 1fr;
-  gap: var(--space-3);
-  padding: var(--space-3) 0;
-  border-bottom: 1px solid var(--border);
-  align-items: start;
-}
-.activity-item:last-child { border-bottom: none; }
-.activity-icon {
-  width: 36px; height: 36px;
-  border-radius: var(--radius-md);
-  display: flex; align-items: center; justify-content: center;
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-  flex-shrink: 0;
-}
-.activity-content { min-width: 0; }
-.activity-action { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
-.activity-task   { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1); }
-.activity-time   { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
-
-/* ───────────────────────────────────
-   DECISION / FINDING ITEMS
-   ─────────────────────────────────── */
-.finding-item {
-  padding: var(--space-4);
-  border-radius: var(--radius-md);
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--warning);
-}
-.finding-item.severity-critical { border-left-color: var(--danger); }
-.finding-item.severity-low      { border-left-color: var(--info); }
-
-.decision-item {
-  padding: var(--space-4);
-  border-radius: var(--radius-md);
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-}
-
-/* ───────────────────────────────────
-   PROJECT ROW (portfolio)
-   ─────────────────────────────────── */
-.project-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-4);
-  padding: var(--space-3) var(--space-4);
-  border-radius: var(--radius-md);
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-  transition: border-color var(--duration-fast), background var(--duration-fast);
-}
-.project-row:hover { border-color: var(--border-strong); }
-.project-row.is-active {
-  border-color: var(--border-accent);
-  background: var(--accent-light);
-}
-.project-row-info { min-width: 0; flex: 1; }
-.project-name  { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
-.project-path  {
-  font-size: var(--text-xs);
-  font-family: var(--font-mono);
-  color: var(--text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.project-row-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
-
-/* ───────────────────────────────────
-   COMMAND PRESET STRIP
-   ─────────────────────────────────── */
-.preset-strip {
-  display: flex;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-}
+/* ═══════════════════════════════════════════════════════
+   PANELS — Sidebar, Topbar, Modals, Flash, Kanban
+   ═══════════════════════════════════════════════════════ */
+
+/* ───────────────────────────────────
+   SIDEBAR
+   ─────────────────────────────────── */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--surface-1);
+  border-right: 1px solid var(--border);
+  padding: var(--space-5) 0;
+  gap: 0;
+}
+
+/* Logo */
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0 var(--space-5) var(--space-5);
+  border-bottom: 1px solid var(--border);
+  margin-bottom: var(--space-4);
+  text-decoration: none;
+  color: var(--text-primary);
+}
+.sidebar-logo:hover { color: var(--text-primary); }
+
+.sidebar-logo-icon {
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, var(--accent), #4F46E5);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: var(--shadow-accent);
+}
+.sidebar-logo-name {
+  font-family: var(--font-heading);
+  font-weight: 800;
+  font-size: var(--text-lg);
+  letter-spacing: -0.03em;
+  color: var(--text-primary);
+}
+
+/* Secciones */
+.sidebar-section {
+  padding: 0 var(--space-3);
+  flex: 1;
+  overflow-y: auto;
+}
+.sidebar-section + .sidebar-section {
+  border-top: 1px solid var(--border);
+  padding-top: var(--space-4);
+  margin-top: var(--space-4);
+}
+
+.sidebar-section-label {
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  padding: 0 var(--space-3) var(--space-2);
+}
+
+/* Nav items */
+.sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); }
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0.55rem var(--space-3);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border: 1px solid transparent;
+  text-decoration: none;
+  transition:
+    background var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out),
+    border-color var(--duration-fast) var(--ease-out);
+  position: relative;
+  user-select: none;
+  min-height: 40px;
+}
+.nav-item:hover {
+  background: var(--surface-3);
+  color: var(--text-primary);
+}
+.nav-item.is-active {
+  background: var(--accent-light);
+  color: var(--text-accent);
+  border-color: var(--border-accent);
+  font-weight: 700;
+}
+.nav-item-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  opacity: 0.7;
+}
+.nav-item.is-active .nav-item-icon { opacity: 1; }
+
+.nav-item-label { flex: 1; min-width: 0; }
+.nav-item-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  font-size: 0.65rem;
+  font-weight: 800;
+  border-radius: var(--radius-full);
+  background: var(--accent);
+  color: white;
+}
+.nav-item-badge.danger { background: var(--danger); }
+
+/* Sidebar footer */
+.sidebar-footer {
+  padding: var(--space-4) var(--space-3) 0;
+  border-top: 1px solid var(--border);
+  margin-top: auto;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+/* ───────────────────────────────────
+   TOPBAR
+   ─────────────────────────────────── */
+.topbar {
+  height: var(--topbar-height);
+  background: rgba(10, 15, 30, 0.85);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  padding: 0 var(--content-pad);
+  gap: var(--space-4);
+}
+
+.topbar-search {
+  flex: 1;
+  max-width: 380px;
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-left: auto;
+}
+
+.topbar-project-selector {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.project-select-wrapper {
+  position: relative;
+}
+.project-select-wrapper select {
+  min-width: 220px;
+  background-color: var(--surface-2);
+  font-size: var(--text-sm);
+  height: 36px;
+  padding: 0 2.5rem 0 0.85rem;
+}
+.locale-select-wrapper select {
+  min-width: 110px;
+}
+
+.repo-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0.3rem 0.75rem;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+.repo-badge.clean {
+  background: var(--success-light);
+  border-color: rgba(16,185,129,0.2);
+  color: var(--success);
+}
+.repo-badge.dirty {
+  background: var(--warning-light);
+  border-color: rgba(245,158,11,0.2);
+  color: var(--warning);
+}
+.repo-badge-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.clean .repo-badge-dot  { background: var(--success); animation: pulse 2s infinite; }
+.dirty .repo-badge-dot  { background: var(--warning); }
+
+/* Hamburger (mobile) */
+.topbar-hamburger {
+  display: none;
+  flex-direction: column;
+  gap: 5px;
+  padding: var(--space-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+}
+.topbar-hamburger span {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background: var(--text-primary);
+  border-radius: 2px;
+  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base);
+}
+
+@media (max-width: 1024px) {
+  .topbar-hamburger { display: flex; }
+}
+
+/* ───────────────────────────────────
+   TIME TRACKER WIDGET (en topbar)
+   ─────────────────────────────────── */
+.topbar-timer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0.3rem 0.85rem;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: 0.04em;
+}
+.topbar-timer.is-running {
+  border-color: var(--border-accent);
+  background: var(--accent-light);
+  color: var(--text-accent);
+}
+.topbar-timer-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  flex-shrink: 0;
+}
+.topbar-timer.is-running .topbar-timer-dot {
+  background: var(--accent);
+  animation: pulse 1s infinite;
+}
+
+/* ───────────────────────────────────
+   PANEL SECTION (contenedores de vistas)
+   ─────────────────────────────────── */
+.panel {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-5) var(--space-5) var(--space-4);
+  border-bottom: 1px solid var(--border);
+  gap: var(--space-4);
+}
+.panel-header-left { display: flex; flex-direction: column; gap: var(--space-1); }
+.panel-header-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
+.panel-title { font-size: var(--text-md); font-weight: 700; margin: 0; }
+.panel-subtitle { font-size: var(--text-xs); color: var(--text-muted); }
+
+.panel-body { padding: var(--space-5); }
+.panel-footer {
+  padding: var(--space-4) var(--space-5);
+  border-top: 1px solid var(--border);
+  background: var(--surface-4);
+}
+
+/* ───────────────────────────────────
+   KANBAN BOARD
+   ─────────────────────────────────── */
+.board-grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(260px, 1fr);
+  gap: var(--space-3);
+  overflow-x: auto;
+  padding-bottom: var(--space-4);
+  min-height: 500px;
+  align-items: start;
+}
+
+.board-column {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3);
+  min-height: 400px;
+  transition: border-color var(--duration-fast), background var(--duration-fast);
+}
+.board-column.is-drop-target {
+  border-color: var(--border-accent);
+  background: rgba(99,102,241,0.04);
+}
+
+.board-column-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+  padding: 0 var(--space-1);
+}
+.board-column-title {
+  font-size: var(--text-sm);
+  font-weight: 700;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.board-column-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.col-pending .board-column-dot     { background: var(--warning); }
+.col-in_progress .board-column-dot { background: var(--info); }
+.col-in_review .board-column-dot   { background: var(--accent); }
+.col-blocked .board-column-dot     { background: var(--danger); }
+.col-completed .board-column-dot   { background: var(--success); }
+.col-cancelled .board-column-dot   { background: var(--text-muted); }
+
+.board-column-count {
+  min-width: 24px;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: var(--surface-3);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--space-2);
+}
+
+.board-column-body { display: flex; flex-direction: column; gap: var(--space-2); }
+
+/* ───────────────────────────────────
+   TERMINAL SURFACE
+   ─────────────────────────────────── */
+.terminal-surface {
+  background: #060a14;
+  border: 1px solid rgba(255,255,255,0.05);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.terminal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-4);
+  background: rgba(255,255,255,0.03);
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  gap: var(--space-3);
+}
+.terminal-dots { display: flex; gap: var(--space-2); align-items: center; }
+.terminal-dots span {
+  width: 10px; height: 10px;
+  border-radius: 50%;
+}
+.terminal-dots span:nth-child(1) { background: #EF4444; }
+.terminal-dots span:nth-child(2) { background: #F59E0B; }
+.terminal-dots span:nth-child(3) { background: #10B981; }
+.terminal-title {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  flex: 1;
+  text-align: center;
+}
+.terminal-output {
+  margin: 0;
+  padding: var(--space-5);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.7;
+  color: #94D4BC;
+  min-height: 280px;
+  max-height: 460px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* ───────────────────────────────────
+   FLASH / TOAST
+   ─────────────────────────────────── */
+#flash-container {
+  position: fixed;
+  right: var(--space-6);
+  bottom: var(--space-6);
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  pointer-events: none;
+  max-width: 380px;
+  width: 100%;
+}
+
+.flash {
+  padding: var(--space-4) var(--space-5);
+  border-radius: var(--radius-lg);
+  background: var(--surface-2);
+  border: 1px solid var(--border-strong);
+  box-shadow: var(--shadow-lg);
+  color: var(--text-primary);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  pointer-events: all;
+  animation: slideInRight var(--duration-slow) var(--ease-out) both;
+  backdrop-filter: blur(20px);
+}
+.flash.flash-success { border-color: rgba(16,185,129,0.3); }
+.flash.flash-error   { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); }
+.flash.flash-warning { border-color: rgba(245,158,11,0.3); }
+.flash.flash-exit    { animation: slideInRight var(--duration-base) var(--ease-in) reverse; }
+
+/* ───────────────────────────────────
+   MODAL
+   ─────────────────────────────────── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.7);
+  backdrop-filter: blur(8px);
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6);
+  animation: fadeIn var(--duration-base) var(--ease-out);
+}
+.modal-overlay.is-hidden { display: none; }
+
+.modal {
+  background: var(--surface-2);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-xl);
+  width: 100%;
+  max-width: 540px;
+  max-height: 90dvh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-xl);
+  animation: fadeInUp var(--duration-slow) var(--ease-out);
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-5) var(--space-6);
+  border-bottom: 1px solid var(--border);
+}
+.modal-title { font-size: var(--text-md); font-weight: 700; margin: 0; }
+.modal-body  { padding: var(--space-6); }
+.modal-footer {
+  padding: var(--space-4) var(--space-6);
+  border-top: 1px solid var(--border);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+.modal-close {
+  width: 32px; height: 32px;
+  border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--text-muted);
+  background: var(--surface-3);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: background var(--duration-fast);
+}
+.modal-close:hover { background: var(--surface-4); color: var(--text-primary); }
+
+/* ───────────────────────────────────
+   CONSOLE LOGS PANEL
+   ─────────────────────────────────── */
+.console-panel {
+  position: fixed;
+  bottom: 0;
+  left: var(--sidebar-width);
+  right: 0;
+  z-index: var(--z-panel);
+  background: #060a14;
+  border-top: 1px solid var(--border);
+  transition: transform var(--duration-slow) var(--ease-out);
+  transform: translateY(100%);
+}
+.console-panel.is-open {
+  transform: translateY(0);
+}
+.console-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-4);
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  background: rgba(255,255,255,0.02);
+}
+.console-panel-title {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.console-panel-actions {
+  display: flex;
+  gap: var(--space-2);
+}
+.console-logs {
+  overflow-y: auto;
+  max-height: 220px;
+  padding: var(--space-2) 0;
+}
+.console-log-entry {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  gap: var(--space-3);
+  align-items: start;
+  padding: var(--space-1) var(--space-4);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  border-bottom: 1px solid rgba(255,255,255,0.02);
+}
+.console-log-entry:hover { background: rgba(255,255,255,0.02); }
+.console-log-time  { color: var(--text-muted); white-space: nowrap; }
+.log-level         { font-weight: 700; white-space: nowrap; }
+.log-error         { color: var(--danger); }
+.log-warn          { color: var(--warning); }
+.log-info          { color: var(--info); }
+.log-debug         { color: var(--text-muted); }
+.console-log-msg   { color: var(--text-secondary); word-break: break-all; }
+
+/* ───────────────────────────────────
+   ONBOARDING SPOTLIGHT (Tour)
+   ─────────────────────────────────── */
+.onboarding-spotlight {
+  /* Los estilos inline de position, inset, box-shadow se inyectan por JS */
+  background: transparent;
+  z-index: var(--z-onboard);
+  pointer-events: none;
+}
+.onboarding-spotlight.is-hidden { display: none; }
+
+.onboarding-ring {
+  box-sizing: border-box;
+}
+
+@keyframes ob-ring-pulse {
+  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99,102,241,0.7); opacity: 1; }
+  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(99,102,241,0); opacity: 0; }
+  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99,102,241,0); opacity: 0; }
+}
+
+.onboarding-tooltip {
+  /* Los estilos inline de position y transform se inyectan por JS */
+  background: var(--surface-2);
+  border: 1px solid var(--border-accent);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-xl);
+  opacity: 0;
+  transition: opacity var(--duration-base) var(--ease-out);
+  pointer-events: all;
+  color: var(--text-primary);
+}
+.onboarding-tooltip.is-hidden { display: none; pointer-events: none; }
+.ob-enter {
+  animation: ob-enter-anim var(--duration-base) var(--ease-out) forwards;
+}
+@keyframes ob-enter-anim {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* ── Flechas (Bocadillo) ── */
+.onboarding-tooltip::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+/* Flecha apuntando hacia arriba (cuando el tooltip está bottom) */
+.onboarding-tooltip[data-pos="bottom"]::after {
+  top: -10px;
+  left: 50%;
+  margin-left: -10px;
+  border-width: 0 10px 10px 10px;
+  border-color: transparent transparent var(--surface-2) transparent;
+}
+/* Flecha apuntando hacia abajo (cuando el tooltip está top) */
+.onboarding-tooltip[data-pos="top"]::after {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -10px;
+  border-width: 10px 10px 0 10px;
+  border-color: var(--surface-2) transparent transparent transparent;
+}
+/* Flecha apuntando hacia la izquierda (cuando el tooltip está right) */
+.onboarding-tooltip[data-pos="right"]::after {
+  left: -10px;
+  top: 50%;
+  margin-top: -10px;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent var(--surface-2) transparent transparent;
+}
+/* Flecha apuntando hacia la derecha (cuando el tooltip está left) */
+.onboarding-tooltip[data-pos="left"]::after {
+  right: -10px;
+  top: 50%;
+  margin-top: -10px;
+  border-width: 10px 0 10px 10px;
+  border-color: transparent transparent transparent var(--surface-2);
+}
+
+.ob-step-label {
+  font-size: var(--text-xs);
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: var(--space-3);
+}
+.ob-title {
+  font-size: var(--text-lg);
+  font-weight: 800;
+  margin-bottom: var(--space-2);
+}
+.ob-desc {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: var(--space-5);
+}
+.ob-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+}
+.ob-dots {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+.ob-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--border-strong);
+  transition: background var(--duration-base);
+}
+.ob-dot.is-active {
+  background: var(--accent);
+  width: 18px;
+  border-radius: var(--radius-full);
+}
+.ob-actions {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+
+/* ───────────────────────────────────
+   TIME TRACKER (widget grande)
+   ─────────────────────────────────── */
+.time-tracker-card {
+  background: linear-gradient(135deg, var(--navy-90) 0%, var(--surface-1) 100%);
+  border: 1px solid var(--border-accent);
+  border-radius: var(--radius-xl);
+  padding: var(--space-5);
+  position: relative;
+  overflow: hidden;
+}
+.time-tracker-card::before {
+  content: '';
+  position: absolute;
+  bottom: -40px; right: -40px;
+  width: 160px; height: 160px;
+  background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%);
+  border-radius: 50%;
+}
+
+.timer-display {
+  font-family: var(--font-mono);
+  font-size: 2.8rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--text-primary);
+  line-height: 1;
+  margin: var(--space-4) 0;
+  text-align: center;
+}
+.timer-display.is-running { color: var(--accent-hover); }
+
+.timer-task-name {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-align: center;
+  margin-bottom: var(--space-4);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.timer-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+}
+.timer-btn {
+  width: 44px; height: 44px;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition:
+    background var(--duration-base) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out),
+    border-color var(--duration-base);
+}
+.timer-btn:active { transform: scale(0.9); }
+.timer-btn-play {
+  background: var(--accent);
+  color: white;
+  box-shadow: var(--shadow-accent);
+  width: 54px; height: 54px;
+}
+.timer-btn-play:hover { background: var(--accent-hover); transform: scale(1.05); }
+.timer-btn-pause {
+  background: var(--warning-light);
+  border-color: rgba(245,158,11,0.2);
+  color: var(--warning);
+}
+.timer-btn-stop {
+  background: var(--danger-light);
+  border-color: rgba(239,68,68,0.2);
+  color: var(--danger);
+}
+
+.timer-total {
+  text-align: center;
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  margin-top: var(--space-3);
+}
+
+/* ───────────────────────────────────
+   PROGRESS DONUT (SVG)
+   ─────────────────────────────────── */
+.donut-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  position: relative;
+}
+.donut-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+.donut-percent {
+  font-family: var(--font-heading);
+  font-size: var(--text-2xl);
+  font-weight: 800;
+  color: var(--text-primary);
+  display: block;
+  line-height: 1;
+}
+.donut-sub {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+.donut-legend {
+  display: flex;
+  gap: var(--space-5);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.donut-legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+}
+.donut-legend-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* ───────────────────────────────────
+   SESSION PILLS (consola)
+   ─────────────────────────────────── */
+.session-pill {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-4);
+  background: var(--surface-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: border-color var(--duration-fast), background var(--duration-fast);
+}
+.session-pill:hover { border-color: var(--border-strong); }
+.session-pill.is-selected {
+  border-color: var(--border-accent);
+  background: var(--accent-light);
+}
+.session-pill-cmd {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}
+.session-pill-status { flex-shrink: 0; }
+
+/* ───────────────────────────────────
+   ACTIVITY TIMELINE
+   ─────────────────────────────────── */
+.activity-item {
+  display: grid;
+  grid-template-columns: 36px 1fr;
+  gap: var(--space-3);
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid var(--border);
+  align-items: start;
+}
+.activity-item:last-child { border-bottom: none; }
+.activity-icon {
+  width: 36px; height: 36px;
+  border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center;
+  background: var(--surface-3);
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.activity-content { min-width: 0; }
+.activity-action { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
+.activity-task   { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1); }
+.activity-time   { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
+
+/* ───────────────────────────────────
+   DECISION / FINDING ITEMS
+   ─────────────────────────────────── */
+.finding-item {
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--surface-3);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--warning);
+}
+.finding-item.severity-critical { border-left-color: var(--danger); }
+.finding-item.severity-low      { border-left-color: var(--info); }
+
+.decision-item {
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--surface-3);
+  border: 1px solid var(--border);
+}
+
+/* ───────────────────────────────────
+   PROJECT ROW (portfolio)
+   ─────────────────────────────────── */
+.project-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  background: var(--surface-3);
+  border: 1px solid var(--border);
+  transition: border-color var(--duration-fast), background var(--duration-fast);
+}
+.project-row:hover { border-color: var(--border-strong); }
+.project-row.is-active {
+  border-color: var(--border-accent);
+  background: var(--accent-light);
+}
+.project-row-info { min-width: 0; flex: 1; }
+.project-name  { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
+.project-path  {
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.project-row-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
+
+/* ───────────────────────────────────
+   COMMAND PRESET STRIP
+   ─────────────────────────────────── */
+.preset-strip {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}