trackops 2.0.3 → 2.0.4

package/ui/css/panels.css

@@ -2,282 +2,447 @@
    PANELS — Sidebar, Topbar, Modals, Flash, Kanban
    ═══════════════════════════════════════════════════════ */
 
-/* ───────────────────────────────────
-   SIDEBAR
-   ─────────────────────────────────── */
+/* ── Sidebar ── */
 .sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--sidebar-width-collapsed);
+  height: 100dvh;
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+  border-right: 1px solid var(--glass-border);
   display: flex;
   flex-direction: column;
-  height: 100%;
-  background: var(--surface-1);
-  border-right: 1px solid var(--border);
-  padding: var(--space-5) 0;
-  gap: 0;
+  padding: var(--space-3) 0;
+  z-index: var(--z-sidebar);
+  transition: width var(--duration-slow) var(--ease-out);
+  overflow: hidden;
+}
+.sidebar:hover,
+.sidebar:focus-within {
+  width: var(--sidebar-width-expanded);
 }
 
-/* Logo */
+/* ── 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);
+  padding: var(--space-2) var(--space-4);
   margin-bottom: var(--space-4);
   text-decoration: none;
   color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  min-height: 44px;
 }
-.sidebar-logo:hover { color: var(--text-primary); }
-
 .sidebar-logo-icon {
+  flex-shrink: 0;
   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;
+  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
+  border-radius: var(--radius-md);
+  color: #fff;
   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;
+  font-weight: 700;
+  opacity: 0;
+  transform: translateX(-8px);
+  transition: opacity var(--duration-base) var(--ease-out),
+              transform var(--duration-base) var(--ease-out);
 }
-.sidebar-section + .sidebar-section {
-  border-top: 1px solid var(--border);
-  padding-top: var(--space-4);
-  margin-top: var(--space-4);
+.sidebar:hover .sidebar-logo-name,
+.sidebar:focus-within .sidebar-logo-name {
+  opacity: 1;
+  transform: translateX(0);
 }
 
+/* ── Section Label ── */
 .sidebar-section-label {
   font-size: var(--text-xs);
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+  font-weight: 600;
   color: var(--text-muted);
-  padding: 0 var(--space-3) var(--space-2);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: var(--space-1) var(--space-4);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity var(--duration-base) var(--ease-out);
+}
+.sidebar:hover .sidebar-section-label,
+.sidebar:focus-within .sidebar-section-label {
+  opacity: 1;
 }
 
-/* Nav items */
-.sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); }
+/* ── Sidebar Section ── */
+.sidebar-section {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
 
+/* ── Nav Items ── */
+.sidebar-nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
 .nav-item {
   display: flex;
   align-items: center;
   gap: var(--space-3);
-  padding: 0.55rem var(--space-3);
-  border-radius: var(--radius-md);
+  width: 100%;
+  padding: var(--space-2) var(--space-4);
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-family: var(--font-ui);
   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;
+  border-radius: 0;
+  transition: background var(--duration-fast) var(--ease-out),
+              color var(--duration-fast) var(--ease-out);
+  white-space: nowrap;
+  overflow: hidden;
   min-height: 40px;
+  position: relative;
 }
 .nav-item:hover {
-  background: var(--surface-3);
+  background: rgba(255, 255, 255, 0.04);
   color: var(--text-primary);
 }
 .nav-item.is-active {
+  color: var(--accent);
   background: var(--accent-light);
-  color: var(--text-accent);
-  border-color: var(--border-accent);
-  font-weight: 700;
+}
+.nav-item.is-active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 24px;
+  background: var(--accent);
+  border-radius: 0 3px 3px 0;
 }
 .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;
+  width: 20px;
+  height: 20px;
+  display: flex;
   align-items: center;
   justify-content: center;
+  margin-left: 6px;
+}
+.nav-item-label {
+  opacity: 0;
+  transform: translateX(-8px);
+  transition: opacity var(--duration-base) var(--ease-out),
+              transform var(--duration-base) var(--ease-out);
+}
+.sidebar:hover .nav-item-label,
+.sidebar:focus-within .nav-item-label {
+  opacity: 1;
+  transform: translateX(0);
+}
+.nav-item-badge {
+  margin-left: auto;
   min-width: 20px;
   height: 20px;
-  padding: 0 5px;
-  font-size: 0.65rem;
-  font-weight: 800;
+  padding: 0 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  background: var(--accent-light);
+  color: var(--accent);
   border-radius: var(--radius-full);
-  background: var(--accent);
-  color: white;
+  opacity: 0;
+  transition: opacity var(--duration-base) var(--ease-out);
+}
+.sidebar:hover .nav-item-badge,
+.sidebar:focus-within .nav-item-badge {
+  opacity: 1;
+}
+.nav-item-badge.danger {
+  background: var(--danger-light);
+  color: var(--danger);
 }
-.nav-item-badge.danger { background: var(--danger); }
 
-/* Sidebar footer */
+/* ── Sidebar Footer ── */
 .sidebar-footer {
-  padding: var(--space-4) var(--space-3) 0;
-  border-top: 1px solid var(--border);
   margin-top: auto;
-  flex-shrink: 0;
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--border);
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
+  gap: 2px;
 }
 
-/* ───────────────────────────────────
-   TOPBAR
-   ─────────────────────────────────── */
+/* ── Tooltip for collapsed state ── */
+.nav-item[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: calc(var(--sidebar-width-collapsed) + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 4px 10px;
+  background: var(--gray-800);
+  color: var(--text-primary);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--ease-out);
+  z-index: 100;
+  box-shadow: var(--shadow-md);
+}
+.nav-item[data-tooltip]:hover::after {
+  opacity: 1;
+}
+.sidebar:hover .nav-item[data-tooltip]::after,
+.sidebar:focus-within .nav-item[data-tooltip]::after {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ── 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);
+  height: var(--topbar-height);
+  padding: 0 var(--content-pad);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border-bottom: 1px solid var(--glass-border);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-topbar);
 }
 
-.topbar-search {
-  flex: 1;
-  max-width: 380px;
-}
-
-.topbar-right {
+/* ── Active project name ── */
+.topbar-project-name {
   display: flex;
   align-items: center;
-  gap: var(--space-3);
-  margin-left: auto;
+  gap: var(--space-2);
+  padding: 0.3rem 0.7rem;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 220px;
+}
+.topbar-project-icon {
+  display: flex;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+.topbar-project-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.topbar-project-selector {
+/* ── Locale selector ── */
+.topbar-locale {
+  position: relative;
+}
+.locale-dropdown {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  right: 0;
+  min-width: 120px;
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-1);
+  z-index: var(--z-panel);
   display: flex;
-  align-items: center;
-  gap: var(--space-2);
+  flex-direction: column;
+}
+.locale-dropdown.is-hidden { display: none; }
+.locale-option {
+  padding: 0.4rem 0.75rem;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  text-align: left;
+  transition: background var(--duration-fast), color var(--duration-fast);
+}
+.locale-option:hover {
+  background: var(--surface-4);
+  color: var(--text-primary);
+}
+.locale-option.is-active {
+  color: var(--accent);
+  font-weight: 700;
 }
 
-.project-select-wrapper {
+/* ── Search ── */
+.topbar-search {
+  flex: 1;
+  max-width: 400px;
+}
+.search-wrapper {
   position: relative;
+  display: flex;
+  align-items: center;
 }
-.project-select-wrapper select {
-  min-width: 220px;
-  background-color: var(--surface-2);
+.search-wrapper .search-icon {
+  position: absolute;
+  left: 12px;
+  color: var(--text-muted);
+  display: flex;
+  pointer-events: none;
+}
+.search-wrapper input {
+  width: 100%;
+  padding: 0.45rem 0.85rem 0.45rem 2.2rem;
+  background: var(--glass-bg-subtle);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-full);
+  color: var(--text-primary);
+  font-family: var(--font-ui);
   font-size: var(--text-sm);
-  height: 36px;
-  padding: 0 2.5rem 0 0.85rem;
+  transition: border-color var(--duration-fast) var(--ease-out),
+              background var(--duration-fast) var(--ease-out);
+}
+.search-wrapper input:focus {
+  outline: none;
+  border-color: var(--accent);
+  background: var(--glass-bg);
+  box-shadow: 0 0 0 3px var(--accent-light);
+}
+.search-wrapper input::placeholder {
+  color: var(--text-muted);
 }
-.locale-select-wrapper select {
-  min-width: 110px;
+.search-kbd {
+  position: absolute;
+  right: 10px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  background: var(--surface-4);
+  padding: 2px 6px;
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--border);
 }
 
-.repo-badge {
+/* ── Right section ── */
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: auto;
+}
+
+/* ── Timer badge ── */
+.topbar-timer {
   display: flex;
   align-items: center;
   gap: var(--space-2);
-  padding: 0.3rem 0.75rem;
+  padding: 0.3rem 0.7rem;
+  background: var(--glass-bg-subtle);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-full);
+  font-family: var(--font-mono);
   font-size: var(--text-xs);
-  font-weight: 600;
-  border: 1px solid transparent;
-  white-space: nowrap;
+  color: var(--text-secondary);
 }
-.repo-badge.clean {
-  background: var(--success-light);
-  border-color: rgba(16,185,129,0.2);
-  color: var(--success);
+.topbar-timer-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-green);
+  animation: pulse 2s infinite;
 }
-.repo-badge.dirty {
-  background: var(--warning-light);
-  border-color: rgba(245,158,11,0.2);
-  color: var(--warning);
+
+/* ── Repo badge ── */
+.repo-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 0.2rem 0.6rem;
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  background: var(--glass-bg-subtle);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-full);
 }
 .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); }
+.repo-badge.clean .repo-badge-dot { background: var(--accent-green); }
+.repo-badge.dirty .repo-badge-dot { background: var(--accent-yellow); }
 
-/* Hamburger (mobile) */
+/* ── Hamburger (mobile) ── */
 .topbar-hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
-  padding: var(--space-2);
-  border-radius: var(--radius-sm);
+  padding: 8px;
+  background: none;
+  border: none;
   cursor: pointer;
-  border: 1px solid var(--border);
-  background: var(--surface-2);
 }
 .topbar-hamburger span {
-  display: block;
-  width: 18px;
+  width: 20px;
   height: 2px;
   background: var(--text-primary);
   border-radius: 2px;
-  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base);
+  transition: transform var(--duration-fast);
 }
 
 @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;
+  .sidebar {
+    transform: translateX(-100%);
+    width: var(--sidebar-width-expanded) !important;
+  }
+  .sidebar.is-open {
+    transform: translateX(0);
+  }
+  .topbar-hamburger {
+    display: flex;
+  }
 }
 
 /* ───────────────────────────────────
    PANEL SECTION (contenedores de vistas)
    ─────────────────────────────────── */
 .panel {
-  background: var(--surface-2);
-  border: 1px solid var(--border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-xl);
+  box-shadow: var(--glass-shadow), var(--glass-inner);
   overflow: hidden;
 }
 
@@ -316,8 +481,10 @@
 }
 
 .board-column {
-  background: var(--surface-1);
-  border: 1px solid var(--border);
+  background: var(--glass-bg-subtle);
+  backdrop-filter: blur(var(--glass-blur-sm));
+  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   padding: var(--space-3);
   min-height: 400px;
@@ -370,52 +537,7 @@
 
 .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;
-}
+/* Terminal styles moved to terminal.css */
 
 /* ───────────────────────────────────
    FLASH / TOAST
@@ -436,8 +558,10 @@
 .flash {
   padding: var(--space-4) var(--space-5);
   border-radius: var(--radius-lg);
-  background: var(--surface-2);
-  border: 1px solid var(--border-strong);
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+  border: 1px solid var(--glass-border);
   box-shadow: var(--shadow-lg);
   color: var(--text-primary);
   font-size: var(--text-sm);
@@ -447,7 +571,6 @@
   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); }
@@ -472,8 +595,10 @@
 .modal-overlay.is-hidden { display: none; }
 
 .modal {
-  background: var(--surface-2);
-  border: 1px solid var(--border-strong);
+  background: var(--glass-bg-strong);
+  backdrop-filter: blur(var(--glass-blur-lg));
+  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-xl);
   width: 100%;
   max-width: 540px;
@@ -510,210 +635,24 @@
 }
 .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); }
-}
+/* Console logs panel styles moved to terminal.css */
 
-/* ── 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;
-}
+/* Onboarding styles moved to onboarding.css */
 
 
 /* ───────────────────────────────────
    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);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius-xl);
   padding: var(--space-5);
   position: relative;
   overflow: hidden;
+  box-shadow: var(--glass-shadow), var(--glass-inner);
 }
 .time-tracker-card::before {
   content: '';