trackops 2.0.3 → 2.0.5

package/ui/css/onboarding.css

@@ -0,0 +1,133 @@
+/* ═══════════════════════════════════════════════════════
+   ONBOARDING — Spotlight tour, tooltips, navigation
+   ═══════════════════════════════════════════════════════ */
+
+.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(59,130,246,0.7); opacity: 1; }
+  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(59,130,246,0); opacity: 0; }
+  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59,130,246,0); opacity: 0; }
+}
+
+.onboarding-tooltip {
+  /* Los estilos inline de position y transform se inyectan por JS */
+  background: var(--glass-bg-strong);
+  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-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 esta 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(--glass-bg-strong) transparent;
+}
+/* Flecha apuntando hacia abajo (cuando el tooltip esta top) */
+.onboarding-tooltip[data-pos="top"]::after {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -10px;
+  border-width: 10px 10px 0 10px;
+  border-color: var(--glass-bg-strong) transparent transparent transparent;
+}
+/* Flecha apuntando hacia la izquierda (cuando el tooltip esta right) */
+.onboarding-tooltip[data-pos="right"]::after {
+  left: -10px;
+  top: 50%;
+  margin-top: -10px;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent var(--glass-bg-strong) transparent transparent;
+}
+/* Flecha apuntando hacia la derecha (cuando el tooltip esta 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;
+}