em vez de .kpi-card-value) */ .stat-num.money{ color:var(--money); } .stat-num.hot{ color:var(--hot); } /* Backward-compat com seletor antigo (caso algum HTML legado use .kpi-value) */ .kpi-card.kpi-money .kpi-value{ color:var(--money); } .kpi-card.kpi-hot .kpi-value{ color:var(--hot); } /* Funil de conversão visual — Sprint 2 Nexus v2 (item V) ───────────────── */ .funnel-chart{ display:flex; flex-direction:column; gap:14px; padding:var(--space-5); background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); } .funnel-step{ display:flex; flex-direction:column; gap:4px; } .funnel-step .funnel-bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-radius:var(--radius); min-width:140px; transition:width .4s ease; border:1px solid var(--border-2); background:var(--bg-3); position:relative; overflow:hidden; } .funnel-step .funnel-bar::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, currentColor 200%); opacity:.08; pointer-events:none; } .funnel-step.neutral .funnel-bar{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } .funnel-step.good .funnel-bar{ color:var(--money); border-color:var(--money); background:var(--money-soft); } .funnel-step.warn .funnel-bar{ color:var(--warn); border-color:var(--warn); background:var(--warn-soft); } .funnel-step.bad .funnel-bar{ color:var(--down); border-color:var(--down); background:var(--down-soft); } .funnel-bar-label{ font-weight:600; color:var(--text); font-size:14px; z-index:1; } .funnel-bar-count{ font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; z-index:1; } .funnel-step .funnel-conv{ font-size:11px; color:var(--muted); padding-left:18px; } .funnel-step .conv-pct{ color:var(--text); font-weight:600; } .funnel-step.bad .drop-pct{ color:var(--down); font-weight:600; } @media (max-width:600px){ .funnel-chart{ padding:var(--space-3); } .funnel-step .funnel-bar{ padding:10px 12px; } .funnel-bar-label{ font-size:12px; } .funnel-bar-count{ font-size:14px; } } /* Lead temperature badges (preparação pra item P/X da Sprint 2) */ .lead-temp{ display:inline-flex; align-items:center; gap:3px; font-size:11px; padding:2px 8px; border-radius:99px; font-weight:600; } .lead-temp.hot{ background:var(--hot-soft); color:var(--hot); border:1px solid var(--hot); } .lead-temp.warm{ background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn); } .lead-temp.cold{ background:var(--bg-3); color:var(--muted); border:1px solid var(--border); } /* ─── Mobile-first improvements (Pacote 5 - I) ──────────── */ @media (max-width:900px){ body{grid-template-columns:1fr;} aside{ /* Hamburguer-collapsível em mobile (toggle por botão flutuante) */ position:fixed; top:0; left:0; height:100vh; width:280px; z-index:200; transform:translateX(-100%); transition:transform .25s ease; border-right:1px solid var(--border); padding:var(--space-3) 0; overflow-y:auto; } aside.mobile-open{ transform:translateX(0); box-shadow:0 0 30px rgba(0,0,0,.5); } body::before { /* Backdrop quando menu aberto */ content:''; position:fixed; inset:0; z-index:199; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s; } body.menu-open::before { opacity:1; pointer-events:auto; } main{ padding:var(--space-4) var(--space-3) var(--space-6); padding-top:60px; } .mobile-menu-toggle { display:flex !important; position:fixed; top:12px; left:12px; z-index:201; width:42px; height:42px; align-items:center; justify-content:center; background:var(--bg-2); border:1px solid var(--border); border-radius:8px; cursor:pointer; color:var(--text); font-size:20px; } .form-grid{grid-template-columns:1fr;} .page-header{flex-direction:column; align-items:flex-start;} .page-actions{flex-wrap:wrap; gap:6px; width:100%;} .page-actions .btn{flex:1; min-width:120px; font-size:13px;} .kpi-grid{grid-template-columns:repeat(2, 1fr); gap:8px;} .kpi-value{font-size:22px;} .kpi-card{padding:14px;} /* tap targets ≥44px (WCAG) */ button, .btn, a.btn, input[type="checkbox"]+label{min-height:44px;} /* tabelas viram lista vertical */ table.responsive thead{display:none;} table.responsive tr{display:block; padding:10px; border-bottom:1px solid var(--border);} table.responsive td{display:flex; justify-content:space-between; padding:4px 0;} table.responsive td:before{content:attr(data-label); font-weight:600; color:var(--muted);} } @media (max-width:600px){ .kpi-grid{grid-template-columns:1fr;} main{padding:var(--space-3) var(--space-3) var(--space-5); padding-top:60px;} .modal-card{margin:8px; max-height:calc(100vh - 16px);} } /* ─── Item K (2026-05-20): mobile-first polish — bottom nav + sininho fullscreen ─ */ /* Bottom nav fixo: 4 atalhos críticos visíveis sem hamburger */ @media (max-width:768px){ #nx-bottom-nav{ display:flex !important; position:fixed; bottom:0; left:0; right:0; z-index:150; background:rgba(10,10,10,.96); backdrop-filter:blur(12px); border-top:1px solid var(--border); padding:8px 0; padding-bottom:max(8px, env(safe-area-inset-bottom)); justify-content:space-around; } #nx-bottom-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; padding:4px 0; color:var(--muted); text-decoration:none; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; min-height:auto; /* override do tap-target 44px global */ } #nx-bottom-nav a svg{width:22px; height:22px;} #nx-bottom-nav a[aria-current="page"]{color:var(--accent);} /* Espaço extra no fim do main pra não ficar atrás do bottom nav */ main{padding-bottom:84px !important;} } @media (min-width:769px){ #nx-bottom-nav{display:none !important;} } /* Sininho dropdown vira fullscreen em telas pequenas — mais espaço pra ler notif */ @media (max-width:480px){ #nx-notif-dropdown{ position:fixed !important; top:60px !important; right:8px !important; left:8px !important; width:auto !important; max-width:none !important; max-height:calc(100vh - 80px) !important; } #nx-notif-list{ max-height:calc(100vh - 200px) !important; } } .mobile-menu-toggle{display:none;} /* ═════════════════════════════════════════════════════════ Sprint Visual v2.1 — JJ: Onboarding tour Tour guiado com overlay + tooltip apontando pro elemento. Custom (sem libs), persistido em workspace_settings.onboarding.tour_completed. API: NEXUS.startTour(steps), NEXUS.endTour(). ═════════════════════════════════════════════════════════ */ .nx-tour-overlay{ position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); animation:nx-fade-in .25s ease-out; } .nx-tour-cutout{ position:fixed; z-index:9999; border-radius:var(--radius-lg); box-shadow:0 0 0 9999px rgba(0,0,0,.55), 0 0 0 4px var(--accent-glow), 0 0 28px var(--accent); pointer-events:none; transition:all .35s cubic-bezier(.22, 1, .36, 1); } .nx-tour-tooltip{ position:fixed; z-index:10000; background:var(--bg-2); border:1px solid var(--accent); border-radius:var(--radius-lg); padding:var(--space-5); width:340px; max-width:calc(100vw - 32px); box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 24px var(--accent-glow); animation:nx-fade-up .3s ease-out; } .nx-tour-tooltip .nx-tour-step{ font-size:var(--text-xs); color:var(--accent); text-transform:uppercase; letter-spacing:1px; font-family:var(--font-mono); font-weight:700; margin-bottom:var(--space-2); } .nx-tour-tooltip h4{ font-size:var(--text-lg); font-weight:var(--weight-bold); margin:0 0 var(--space-2); color:var(--text); } .nx-tour-tooltip p{ font-size:var(--text-base); color:var(--muted); line-height:1.55; margin:0 0 var(--space-4); } .nx-tour-actions{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); } .nx-tour-skip{ background:transparent; border:none; cursor:pointer; color:var(--dim); font-size:var(--text-sm); padding:6px 10px; text-decoration:underline; } .nx-tour-skip:hover{color:var(--muted);} .nx-tour-nav{display:flex; gap:var(--space-2);} .nx-tour-btn{ padding:8px 16px; border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:var(--weight-semibold); cursor:pointer; border:none; transition:all var(--transition-base); } .nx-tour-btn.next{ background:var(--gradient); color:#000; box-shadow:0 4px 14px var(--accent-glow); } .nx-tour-btn.next:hover{transform:translateY(-1px); box-shadow:0 6px 20px var(--accent);} .nx-tour-btn.prev{ background:var(--bg-3); color:var(--text); border:1px solid var(--border-2); } .nx-tour-btn.prev:hover{border-color:var(--accent); color:var(--accent);} .nx-tour-progress{ display:flex; gap:4px; margin-top:var(--space-3); } .nx-tour-progress-dot{ flex:1; height:3px; border-radius:99px; background:var(--bg-3); transition:background var(--transition-base); } .nx-tour-progress-dot.done{ background:var(--accent); } @keyframes nx-fade-in{ from{ opacity:0; } to{ opacity:1; } } @media (max-width:600px){ .nx-tour-tooltip{ width:calc(100vw - 24px); left:12px !important; } } /* ═════════════════════════════════════════════════════════ Sprint Visual v2.1 — OO: Print-friendly CSS Permite Ctrl+P virar PDF de relatório limpo: esconde chrome, inverte cores pra economizar tinta, evita quebra ruim de cards. ═════════════════════════════════════════════════════════ */ @media print{ /* Esconder cromo do app */ aside, #sidebar, .page-actions, .btn, #nx-bottom-nav, #nx-notif-bell, #nx-notif-dropdown, .mobile-menu-toggle, .nav-collapse-toggle, .api-doc, .section-action, [data-print="hide"]{ display:none !important; } /* Layout single column, sem grid */ body{ background:#fff !important; color:#000 !important; display:block !important; font-size:11pt; } main{ padding:0 !important; max-width:100% !important; margin:0 !important; } /* Cores acessíveis em papel */ .page-header h2, h1, h2, h3{ color:#000 !important; page-break-after:avoid; } .page-header p, p, .muted{ color:#333 !important; } .page-header{ border-bottom:2px solid #000 !important; padding-bottom:8px !important; margin-bottom:16px !important; } /* Cards/sections: preto no branco, borda fina, sem shadow */ .kpi-card, .metric-card, .stat-card, .stat-box, .pulse-box, .card, section.s, .nx-empty, .funnel-chart, .nx-skeleton-card{ background:#fff !important; border:1px solid #ccc !important; box-shadow:none !important; color:#000 !important; page-break-inside:avoid; break-inside:avoid; } /* Money/hot preservam cor (mas escurece um pouco pra ler em papel) */ .text-money, .stat-num.money, .stat-num.green, .metric-value.money, .kpi-card.kpi-money .kpi-card-value, .pulse-num.money, .pprice, .lead-price, .hero-stat .num.money{ color:#008860 !important; } .text-hot, .stat-num.hot, .metric-value.hot, .kpi-card.kpi-hot .kpi-card-value, .pulse-num.hot, .hero-stat .num.hot{ color:#cc4422 !important; } /* Tabelas mais limpas */ table{ border-collapse:collapse !important; width:100% !important; } th, td{ border:1px solid #ccc !important; padding:6px 8px !important; color:#000 !important; } th{ background:#f0f0f0 !important; font-weight:700; } /* Cabeçalho de página de relatório (mostra só no print) */ .print-header{ display:block !important; border-bottom:3px solid #000; padding:0 0 12px; margin-bottom:16px; } .print-header h1{ font-size:18pt; margin:0 0 4px; } .print-header .meta{ font-size:9pt; color:#666; } /* Evita órfãs/viúvas */ p, li{ orphans:3; widows:3; } /* Imprime URL de links */ a[href]:after{ content:" (" attr(href) ")"; font-size:8pt; color:#666; word-wrap:break-word; } a[href^="#"]:after, a[href^="javascript:"]:after, .btn[href]:after{ content:""; } /* Skeleton/spinner: não mostrar em print */ .nx-skeleton, .nx-spinner, .nx-spinner-block{ display:none !important; } /* Page break manual */ .page-break-before{ page-break-before:always; } .page-break-after{ page-break-after:always; } .page-break-avoid{ page-break-inside:avoid; } /* Margens de página */ @page{ margin:1.5cm 1.2cm; size:A4; } } .print-header{ display:none; } /* só aparece em @media print */ /* ═════════════════════════════════════════════════════════ Sprint Visual v2.1 — GG: Microanimações Hover sutil em cards, count-up nos KPIs, entrada de página suave. Tudo CSS puro + IntersectionObserver, zero libs. Respeita prefers-reduced-motion. ═════════════════════════════════════════════════════════ */ /* Hover lift em cards (uniformiza o que estava espalhado) */ .kpi-card, .metric-card, .stat-card, .stat-box, .pulse-box, .nx-skeleton-card, .section-card, .card{ transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .kpi-card:hover, .metric-card:hover, .stat-card:hover, .stat-box:hover, .pulse-box:hover{ transform:translateY(-2px); border-color:var(--border-2); box-shadow:0 6px 20px rgba(0,0,0,.18); } /* Variante específica: card money ganha glow sutil verde-$ no hover */ .kpi-card.kpi-money:hover, .metric-card.money:hover{ box-shadow:0 6px 20px var(--money-glow); border-color:var(--money); } .kpi-card.kpi-hot:hover, .metric-card.hot:hover{ box-shadow:0 6px 20px rgba(255,92,46,.25); border-color:var(--hot); } /* Count-up animation — número conta de 0 ao valor real em ~800ms. Aplicado via JS (NEXUS.countUp) ao elemento. Esses estilos preparam o terreno. */ .nx-countup{ font-variant-numeric:tabular-nums; /* evita "pular" largura quando dígitos mudam */ display:inline-block; } .nx-countup.nx-countup-running{ opacity:.95; } /* Page enter animation — section/main fade-up suave quando carrega */ @keyframes nx-fade-up{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } } main > section, main > .page-header{ animation:nx-fade-up .35s ease-out backwards; } main > section:nth-child(1){ animation-delay:0s; } main > section:nth-child(2){ animation-delay:.05s; } main > section:nth-child(3){ animation-delay:.1s; } main > section:nth-child(4){ animation-delay:.15s; } main > section:nth-child(5){ animation-delay:.2s; } main > section:nth-child(6){ animation-delay:.25s; } main > section:nth-child(7){ animation-delay:.3s; } /* Item enter — cards em grid aparecem em cascata */ .kpi-grid > .kpi-card, .metrics-grid > .metric-card, .stat-row > .stat-card, .stat-row > .stat-box{ animation:nx-fade-up .4s ease-out backwards; } .kpi-grid > .kpi-card:nth-child(1), .metrics-grid > .metric-card:nth-child(1), .stat-row > *:nth-child(1){ animation-delay:.05s; } .kpi-grid > .kpi-card:nth-child(2), .metrics-grid > .metric-card:nth-child(2), .stat-row > *:nth-child(2){ animation-delay:.1s; } .kpi-grid > .kpi-card:nth-child(3), .metrics-grid > .metric-card:nth-child(3), .stat-row > *:nth-child(3){ animation-delay:.15s; } .kpi-grid > .kpi-card:nth-child(4), .metrics-grid > .metric-card:nth-child(4), .stat-row > *:nth-child(4){ animation-delay:.2s; } /* Botões com micro-feedback no clique */ .btn{ transition:transform var(--transition-fast), background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); } .btn:active{ transform:scale(.97); } /* Nav-item — leve translateX no hover pra dar feedback de direção */ .nav-item{ position:relative; } .nav-item:hover{ padding-left:calc(var(--space-5) + 2px); } /* Respeita acessibilidade — usuários com prefers-reduced-motion ficam imunes */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .nav-item:hover{ padding-left:var(--space-5); } } /* ═════════════════════════════════════════════════════════ Sprint Visual v2.1 — EE + FF: Empty states + Loading skeletons Componentes globais reusáveis em qualquer módulo. Substituem: - "Carregando…" texto puro → .nx-skeleton (shimmer animado) - "Nenhum X encontrado" cru → .nx-empty (ilustração + CTA) ═════════════════════════════════════════════════════════ */ /* ─── Empty state ──────────────────────────────────────── */ .nx-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); padding:var(--space-10) var(--space-5); text-align:center; color:var(--muted); background:var(--bg-2); border:1px dashed var(--border-2); border-radius:var(--radius-lg); min-height:200px; } .nx-empty-icon{ width:64px; height:64px; border-radius:50%; background:var(--bg-3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--dim); margin-bottom:var(--space-2); } .nx-empty-icon svg{ width:28px; height:28px; stroke-width:1.5; } .nx-empty-title{ font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--text); margin:0; } .nx-empty-hint{ font-size:var(--text-sm); color:var(--muted); max-width:380px; line-height:1.5; margin:0; } .nx-empty-cta{ margin-top:var(--space-3); } /* Variantes semânticas */ .nx-empty.nx-empty-success .nx-empty-icon{ background:var(--up-soft); color:var(--up); border-color:var(--up); } .nx-empty.nx-empty-money .nx-empty-icon{ background:var(--money-soft); color:var(--money); border-color:var(--money); } .nx-empty.nx-empty-warn .nx-empty-icon{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn); } .nx-empty.nx-empty-error .nx-empty-icon{ background:var(--down-soft); color:var(--down); border-color:var(--down); } /* Inline (pra usar dentro de tabelas/cards menores) */ .nx-empty.nx-empty-inline{ min-height:120px; padding:var(--space-6) var(--space-4); } .nx-empty.nx-empty-inline .nx-empty-icon{ width:44px; height:44px; } .nx-empty.nx-empty-inline .nx-empty-icon svg{ width:20px; height:20px; } /* ─── Loading skeleton ─────────────────────────────────── */ @keyframes nx-shimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } } .nx-skeleton{ background:linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%); background-size:200% 100%; animation:nx-shimmer 1.5s ease-in-out infinite; border-radius:var(--radius-md); display:block; } .nx-skeleton.nx-skeleton-text{ height:14px; margin:6px 0; } .nx-skeleton.nx-skeleton-text.sm{ height:10px; } .nx-skeleton.nx-skeleton-text.lg{ height:18px; } .nx-skeleton.nx-skeleton-title{ height:24px; width:60%; margin:8px 0 16px; } .nx-skeleton.nx-skeleton-line-50{ width:50%; } .nx-skeleton.nx-skeleton-line-70{ width:70%; } .nx-skeleton.nx-skeleton-line-90{ width:90%; } /* Card skeleton: usar em grids de cards (KPI, lista de items, etc) */ .nx-skeleton-card{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); } .nx-skeleton-card .nx-skeleton{ background-color:var(--bg-3); } /* Row skeleton: pra tabelas */ .nx-skeleton-row{ display:flex; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--border); } .nx-skeleton-row .nx-skeleton{ flex:1; height:16px; } /* Spinner global (substitui texto "Carregando…") */ .nx-spinner{ display:inline-block; width:18px; height:18px; border:2px solid var(--bg-3); border-top-color:var(--accent); border-radius:50%; animation:nx-spin .8s linear infinite; vertical-align:middle; } .nx-spinner.lg{ width:32px; height:32px; border-width:3px; } .nx-spinner.sm{ width:14px; height:14px; border-width:1.5px; } .nx-spinner-block{ display:flex; align-items:center; justify-content:center; gap:var(--space-2); padding:var(--space-8) var(--space-4); color:var(--muted); font-size:var(--text-sm); } @keyframes nx-spin{ to{ transform:rotate(360deg); } }