trackops 1.0.0 → 1.0.1

package/ui/css/panels.css

@@ -0,0 +1,953 @@
+/* ═══════════════════════════════════════════════════════
+   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;
+}