/* ═══════════════════════════════════════════════════════ HRZ Uploader — Design System (Dark + Light themes) ═══════════════════════════════════════════════════════ Dark is the default. Light is opt-in via: Theme bootstrap script in reads localStorage('hrz-theme') and OS prefers-color-scheme to set the attribute before paint. ═══════════════════════════════════════════════════════ */ :root { /* ─── DARK THEME (default) ─────────────────────────── */ --bg-primary: #000000; /* page background */ --bg-secondary: #0a0a0a; /* slightly elevated surfaces */ --bg-card: #111111; /* cards, panels */ --bg-card-hover: #161616; --bg-input: #0d0d0d; --bg-elevated: #1a1a1a; /* badges, inline highlights, "skipped" boxes */ --bg-tooltip: #1a1a1a; --bg-overlay: rgba(0,0,0,0.7); /* modal scrim */ --border: #1a1a1a; --border-light: #222222; --border-medium: #333333; /* visible card borders */ --border-focus: #444444; /* Soft off-white text scale — Claude-style. */ --text-primary: #ededed; --text-secondary: #c8c8c8; --text-muted: #8e8e8e; --text-hint: #6e6e6e; --text-on-accent: #000000; /* text on a white/highlight surface */ --accent: #ededed; --accent-dim: #a8a8a8; --accent-primary: #d6d6d6; --success: #c8c8c8; --error: #ff6b6b; --warning: #b8b8b8; /* Functional highlight greens — same on both themes (with hue shift in light) */ --highlight-best: #00e676; --highlight-good: #69f0ae; --highlight-mid: #ededed; --highlight-low: #8e8e8e; /* Shadow depth — invisible on dark, visible on light */ --shadow-card: none; --shadow-card-lg: none; --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ─── LIGHT THEME (opt-in) ───────────────────────────── Inspired by Claude's light mode — warm off-white background, near-black text, white cards on a slightly tinted background. ─────────────────────────────────────────────────────── */ [data-theme="light"] { --bg-primary: #faf9f6; /* warm off-white page */ --bg-secondary: #f3f1eb; --bg-card: #ffffff; /* pure white cards on warm bg */ --bg-card-hover: #f5f4ee; --bg-input: #ffffff; --bg-elevated: #f0eee7; --bg-tooltip: #1a1a1a; /* tooltip stays dark for max legibility */ --bg-overlay: rgba(0,0,0,0.45); --border: #e8e4dc; --border-light: #ddd9d0; --border-medium: #c8c3b8; --border-focus: #888482; --text-primary: #1a1a1a; /* near-black, warm-neutral */ --text-secondary: #4a4a4a; --text-muted: #757575; --text-hint: #a3a3a3; --text-on-accent: #ffffff; /* text on dark accent surface */ --accent: #1a1a1a; --accent-dim: #525252; --accent-primary: #2c2925; --success: #15803d; --error: #dc2626; --warning: #a16207; /* Highlights — darker greens for legibility on white */ --highlight-best: #15803d; --highlight-good: #16a34a; --highlight-mid: #1a1a1a; --highlight-low: #757575; --shadow-card: 0 1px 2px rgba(15,15,12,0.04), 0 1px 3px rgba(15,15,12,0.06); --shadow-card-lg: 0 4px 12px rgba(15,15,12,0.06), 0 2px 4px rgba(15,15,12,0.04); } /* (Tooltip color é definido no bloco principal de .tooltip-overlay abaixo — sempre #ededed sobre fundo escuro) */ /* ─── Theme toggle ─────────────────────────────────── */ .theme-toggle { padding: 6px 8px; min-width: auto; } .theme-toggle svg { transition: opacity 0.2s var(--ease); } .theme-icon-light { display: none; } .theme-icon-dark { display: block; } [data-theme="light"] .theme-icon-light { display: block; } [data-theme="light"] .theme-icon-dark { display: none; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 14px; } body { font-family: var(--font); background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; font-weight: 400; line-height: 1.55; /* slightly more breathing room */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern', 'liga', 'cv11'; /* better Inter rendering */ } /* Tabular numerals globally for any data display */ .kpi-value, .ci-kpi-value, td, th, .bar-tooltip, [style*="font-variant-numeric"] { font-variant-numeric: tabular-nums; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: #555; } /* ═══ SCREENS ═══ */ .screen { display: none; } .screen.active { display: flex; } /* ─── LOGIN ──────────────────────────────────────────── */ #login-screen { min-height: 100vh; align-items: center; justify-content: center; background: var(--bg-primary); position: relative; overflow: hidden; } .login-container { width: 100%; max-width: 380px; padding: 48px 32px; position: relative; z-index: 2; } .login-brand { text-align: center; margin-bottom: 40px; } .logo-icon { margin-bottom: 20px; opacity: 0.9; } .logo-icon svg rect { fill: #ffffff !important; } .logo-icon svg path { fill: #000000 !important; } .logo-icon svg stop { stop-color: #ffffff !important; } .login-brand h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .login-subtitle { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.02em; } .login-form { display: flex; flex-direction: column; gap: 20px; } .input-group label { display: block; font-size: 0.7rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; letter-spacing: 0.05em; text-transform: uppercase; } .input-wrapper { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 14px; color: var(--text-muted); pointer-events: none; } .input-wrapper input { width: 100%; padding: 14px 48px 14px 44px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-size: 0.95rem; font-family: var(--font); outline: none; transition: border-color 0.2s var(--ease); } .input-wrapper input:focus { border-color: var(--border-focus); } .input-wrapper input::placeholder { color: var(--text-hint); } .toggle-password { position: absolute; right: 12px; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; } /* ─── Buttons ────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 600; font-size: 0.85rem; border: none; border-radius: var(--radius); cursor: pointer; transition: all 0.2s var(--ease); } .btn-primary { background: var(--text-primary); color: var(--bg-primary); padding: 14px 24px; } .btn-primary:hover { opacity: 0.85; } .btn-primary:disabled { opacity: 0.3; cursor: not-allowed; } .btn-full { width: 100%; } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); padding: 8px 14px; } .btn-ghost:hover { background: var(--bg-card); color: var(--text-primary); } .btn-sm { font-size: 0.75rem; padding: 6px 12px; } .error-msg { color: #ff4444; font-size: 0.8rem; text-align: center; margin-top: 4px; } .hidden { display: none !important; } .login-bg-decoration { display: none; } /* ═══ APP LAYOUT ═══ */ #app-screen { flex-direction: row; height: 100vh; background: var(--bg-primary); } /* ═══ SIDEBAR (navegação lateral por categoria) ═══ */ .app-sidebar { width: 248px; flex-shrink: 0; height: 100vh; display: flex; flex-direction: column; background: var(--bg-secondary); border-right: 1px solid var(--border); z-index: 40; } .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; border-bottom: 1px solid var(--border); } .sidebar-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 18px; } .sidebar-group { display: flex; flex-direction: column; gap: 3px; } .sidebar-group-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 0 10px 4px; } .sidebar-nav .tab-btn { width: 100%; justify-content: flex-start; gap: 12px; padding: 11px 13px; min-height: 44px; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); border-radius: 9px; border: 1px solid transparent; position: relative; transition: background 140ms var(--ease), color 140ms var(--ease); } .sidebar-nav .tab-btn svg { flex-shrink: 0; opacity: 0.6; transition: opacity 140ms var(--ease); } .sidebar-nav .tab-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); } .sidebar-nav .tab-btn:hover svg { opacity: 0.9; } .sidebar-nav .tab-btn.active { background: rgba(59, 130, 246, 0.13); color: var(--text-primary); font-weight: 600; } [data-theme="light"] .sidebar-nav .tab-btn.active { background: rgba(59, 130, 246, 0.10); } .sidebar-nav .tab-btn.active svg { opacity: 1; color: #3b82f6; } .sidebar-nav .tab-btn.active::before { content: ''; position: absolute; left: -13px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: #3b82f6; } .sidebar-footer { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-top: 1px solid var(--border); } .sidebar-footer .btn { width: 100%; justify-content: flex-start; gap: 12px; padding: 10px 13px; min-height: 42px; border-radius: 9px; font-size: 0.85rem; } /* Conteúdo (à direita da sidebar) */ .app-content { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Topbar — só no mobile (abre o drawer) */ .app-topbar { display: none; } .topbar-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); border-radius: 8px; cursor: pointer; } .topbar-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); } /* Scrim do drawer */ .sidebar-scrim { display: none; } @media (max-width: 1024px) { .app-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform 220ms var(--ease); box-shadow: var(--shadow-card-lg, 0 12px 40px rgba(0,0,0,0.4)); } .app-sidebar.open { transform: translateX(0); } .app-topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-primary); flex-shrink: 0; z-index: 10; } .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease); z-index: 35; } .sidebar-scrim.visible { opacity: 1; pointer-events: auto; } } @media (prefers-reduced-motion: reduce) { .app-sidebar, .sidebar-scrim { transition: none; } } .app-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--bg-primary); flex-shrink: 0; z-index: 10; } .header-left { display: flex; align-items: center; gap: 12px; } .header-avatar { position: relative; width: 36px; height: 36px; } .header-avatar svg rect { fill: #ffffff !important; } .header-avatar svg path { fill: #000000 !important; } .header-avatar svg stop { stop-color: #ffffff !important; } .avatar-status { position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: #666; border: 2px solid var(--bg-primary); } .header-title { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; } .header-status { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.02em; } .header-center { display: flex; gap: 2px; background: var(--bg-secondary); padding: 3px; border-radius: var(--radius); border: 1px solid var(--border); } .tab-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; background: transparent; color: var(--text-muted); font-family: var(--font); font-size: 0.8rem; font-weight: 500; border-radius: 6px; cursor: pointer; transition: all 0.2s var(--ease); } .tab-btn:hover { color: var(--text-secondary); } .tab-btn.active { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-light); } .header-right { display: flex; gap: 8px; } .tab-panel { display: none; } .tab-panel.active { display: flex; } /* ═══ CHAT ═══ */ .chat-area { flex: 1; flex-direction: column; overflow: hidden; } .chat-messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 4px; } .message { display: flex; align-items: flex-start; gap: 10px; max-width: 680px; animation: msgIn 0.3s var(--ease); } @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .message.bot { align-self: flex-start; } .message.user { align-self: flex-end; flex-direction: row-reverse; } .message.consecutive .msg-avatar { visibility: hidden; } .msg-avatar { width: 32px; height: 32px; flex-shrink: 0; margin-top: 2px; } .msg-avatar svg rect { fill: #ffffff !important; } .msg-avatar svg path { fill: #000000 !important; } .msg-avatar svg stop { stop-color: #ffffff !important; } .msg-bubble { padding: 12px 16px; border-radius: var(--radius-lg); font-size: 0.9rem; line-height: 1.55; max-width: 560px; } .message.bot .msg-bubble { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .message.user .msg-bubble { background: #ffffff; color: #000000; border-bottom-right-radius: 4px; } .message.bot .msg-bubble strong { color: var(--text-primary); font-weight: 600; } .typing-indicator { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .typing-dots { display: flex; gap: 4px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); border-bottom-left-radius: 4px; } .typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typingBounce 1.4s ease-in-out infinite; } .typing-dots span:nth-child(2) { animation-delay: 0.2s; } .typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } /* ─── Chat Components ────────────────────────────────── */ .chat-drop-zone { border: 1px dashed var(--border-light); border-radius: var(--radius-lg); padding: 28px 20px; text-align: center; cursor: pointer; transition: all 0.2s var(--ease); margin-top: 10px; background: var(--bg-secondary); } .chat-drop-zone:hover, .chat-drop-zone.drag-over { border-color: var(--text-muted); background: var(--bg-card); } .drop-icon { color: var(--text-muted); margin-bottom: 10px; } .drop-text { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); } .drop-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; } .drop-formats { display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .format-badge { padding: 3px 8px; font-size: 0.65rem; font-weight: 600; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); } .file-pill { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } .file-pill-icon { color: var(--text-muted); } .file-pill-name { font-size: 0.85rem; font-weight: 600; } .file-pill-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; } .chat-table-wrapper { overflow-x: auto; margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius); } .chat-table-wrapper table { width: 100%; border-collapse: collapse; font-size: 0.75rem; } .chat-table-wrapper th { background: var(--bg-secondary); padding: 8px 12px; text-align: left; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); white-space: nowrap; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.05em; } .chat-table-wrapper td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; } .chat-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .chat-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: none; border-radius: var(--radius); font-family: var(--font); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s var(--ease); } .chat-btn-primary { background: var(--text-primary); color: var(--bg-primary); } .chat-btn-primary:hover { opacity: 0.85; } .chat-btn-primary:disabled { opacity: 0.3; cursor: not-allowed; } .chat-btn-secondary { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); } .chat-btn-secondary:hover { background: var(--bg-card-hover); color: var(--text-primary); } /* Mapping */ .chat-mapping-container { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .mapping-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.2s var(--ease); } .mapping-row.mapped { border-color: var(--border-focus); } .mapping-source { flex: 1; min-width: 0; } .mapping-source-label { font-size: 0.8rem; font-weight: 600; display: block; } .mapping-source-sample { font-size: 0.65rem; color: var(--text-muted); } .mapping-arrow { color: var(--text-hint); flex-shrink: 0; } .mapping-target { flex: 1; } .mapping-target select { width: 100%; padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-family: var(--font); font-size: 0.8rem; outline: none; cursor: pointer; } .mapping-target select:focus { border-color: var(--border-focus); } /* Tags */ .tags-search-wrap { position: relative; margin-bottom: 10px; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .tags-search-inline { width: 100%; padding: 10px 14px 10px 36px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: var(--font); font-size: 0.8rem; outline: none; } .tags-search-inline:focus { border-color: var(--border-focus); } .chat-tags-container { display: flex; flex-wrap: wrap; gap: 6px; max-height: 200px; overflow-y: auto; padding: 2px; } .tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; font-size: 0.75rem; color: var(--text-secondary); cursor: pointer; transition: all 0.15s var(--ease); user-select: none; } .tag-chip:hover { border-color: var(--border-focus); color: var(--text-primary); } .tag-chip.selected { background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); } .tag-check { width: 14px; height: 14px; display: none; } .tag-chip.selected .tag-check { display: block; } /* Progress */ .chat-progress { margin-top: 10px; padding: 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); } .progress-header { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.8rem; } .progress-status { font-weight: 600; } .progress-counter { color: var(--text-muted); font-variant-numeric: tabular-nums; } .progress-bar-wrapper { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 14px; } .progress-bar { height: 100%; background: var(--text-primary); border-radius: 2px; transition: width 0.4s var(--ease); } .progress-stats { display: flex; gap: 20px; } .stat { text-align: center; } .stat-number { display: block; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; } .stat-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* Errors */ .error-list-chat { margin-top: 10px; padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .error-list-chat h5 { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 8px; } .error-item { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.75rem; } .error-item:last-child { border-bottom: none; } .error-item-row { font-weight: 600; font-size: 0.7rem; color: var(--text-muted); } .error-item-msg { color: var(--text-secondary); margin-top: 2px; } .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--text-primary); border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .spinner-inline { display: flex; align-items: center; gap: 8px; } /* ═══ DASHBOARD ═══ */ .dashboard-area { flex: 1; overflow-y: auto; background: var(--bg-primary); } .dashboard-container { max-width: 1200px; margin: 0 auto; padding: 24px; width: 100%; box-sizing: border-box; min-width: 0; } /* Quando o
.tab-panel.active vira flex container (row), o filho .dashboard-container precisa explicitamente ocupar largura — caso contrário grid/items colapsam pra 0px. Sem isso, a tab "Mídia & Conciliação" (cujo primeiro filho é display:grid sem width) ficava 100% invisível mesmo com HTML renderizado. */ /* KPI */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; } .kpi-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); position: relative; } .kpi-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-card-lg); } .kpi-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); flex-shrink: 0; } .kpi-blue, .kpi-green, .kpi-purple, .kpi-cyan { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; } .kpi-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: block; line-height: 1.1; } .kpi-label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; margin-top: 2px; } /* Dashboard Grid */ .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .dash-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .dash-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-card-lg); } .dash-card-wide { grid-column: span 2; } .dash-card-full { grid-column: span 2; } .dash-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .dash-card-header h3 { font-size: 0.85rem; font-weight: 700; letter-spacing: -0.01em; } .dash-card-hint { font-size: 0.7rem; color: var(--text-muted); } .dash-loading { display: flex; justify-content: center; padding: 40px; } /* ═══ FUNNEL ═══ */ .funnel-section { margin-bottom: 28px; } .funnel-section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .funnel-container { display: flex; gap: 2px; align-items: stretch; margin-bottom: 16px; } .funnel-stage { flex: 1; position: relative; padding: 20px 14px; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.2s var(--ease); cursor: default; min-width: 0; } .funnel-stage:hover { border-color: var(--border-focus); background: var(--bg-card-hover); } .funnel-stage-label { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .funnel-stage-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; } .funnel-stage-pct { font-size: 0.65rem; color: var(--text-muted); margin-top: 6px; font-variant-numeric: tabular-nums; } .funnel-stage-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--border); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; } .funnel-stage-bar-fill { height: 100%; background: var(--text-primary); transition: width 1s var(--ease); } .funnel-arrow { display: flex; align-items: center; color: var(--text-hint); font-size: 12px; flex-shrink: 0; padding: 0 2px; } /* Funnel group selector */ .funnel-group-selector { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .funnel-group-btn { padding: 6px 14px; font-size: 0.7rem; font-weight: 600; font-family: var(--font); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; color: var(--text-muted); cursor: pointer; transition: all 0.15s var(--ease); } .funnel-group-btn:hover { border-color: var(--border-focus); color: var(--text-secondary); } .funnel-group-btn.active { background: var(--text-primary); color: var(--bg-primary); border-color: var(--text-primary); } /* Store funnels */ .store-funnels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .store-funnel-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; transition: border-color 0.2s var(--ease); } .store-funnel-card:hover { border-color: var(--border-light); } .store-funnel-name { font-size: 0.75rem; font-weight: 700; text-transform: capitalize; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .store-funnel-stages { display: flex; flex-direction: column; gap: 4px; } .store-funnel-row { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; } .store-funnel-row-label { flex: 1; color: var(--text-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .store-funnel-row-bar { flex: 2; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; } .store-funnel-row-bar-fill { height: 100%; background: var(--text-primary); border-radius: 2px; transition: width 0.8s var(--ease); } .store-funnel-row-value { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; color: var(--text-secondary); } /* ═══ TIMELINE LINE CHART ═══ */ .timeline-chart-container { position: relative; width: 100%; height: 280px; margin-top: 12px; } .timeline-canvas { width: 100%; height: 100%; display: block; } .timeline-legend { display: flex; gap: 20px; justify-content: center; margin-top: 10px; } .timeline-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text-muted); } .timeline-legend-dot { width: 8px; height: 8px; border-radius: 50%; } /* ═══ TOOLTIPS ═══ */ /* Tooltip via JS — see app.js tooltipSystem */ [data-tooltip] { cursor: help; } /* Tooltip rendered as fixed overlay by JS — background sempre escuro nos 2 temas para máxima legibilidade (--bg-tooltip é hardcoded escuro em light e dark). */ .tooltip-overlay { position: fixed; padding: 10px 14px; background: var(--bg-tooltip); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; font-size: 0.72rem; font-weight: 400; color: #ededed; max-width: 280px; white-space: normal; pointer-events: none; z-index: 99999; line-height: 1.5; letter-spacing: 0; text-transform: none; box-shadow: 0 8px 32px rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.15s var(--ease); } .tooltip-overlay.visible { opacity: 1; } /* ═══ HISTORY TABLE ═══ */ .history-table-wrap { overflow-x: auto; } .history-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; } .history-table thead th { padding: 10px 14px; text-align: left; font-weight: 600; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } .history-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; } .history-table tbody tr:hover { background: var(--bg-card-hover); } .history-empty { text-align: center; padding: 32px; color: var(--text-muted); font-size: 0.8rem; } .history-tag { display: inline-block; padding: 2px 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 4px; font-size: 0.65rem; margin: 1px 2px; color: var(--text-muted); } .history-tags { display: flex; flex-wrap: wrap; gap: 2px; } .status-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 0.65rem; font-weight: 600; } .status-completed { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); } .status-error { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border); } /* Tag Stats */ .tag-stats-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; } .tag-stat-item { display: flex; align-items: center; gap: 10px; padding: 4px 0; } .tag-stat-name { font-size: 0.75rem; font-weight: 500; min-width: 90px; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); } .tag-stat-bar { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; } .tag-stat-bar-fill { height: 100%; background: var(--text-primary); border-radius: 2px; transition: width 0.6s var(--ease); } .tag-stat-count { font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; color: var(--text-secondary); } /* Workflows */ .workflows-list { display: flex; flex-direction: column; gap: 8px; } .workflow-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.2s var(--ease); } .workflow-card:hover { border-color: var(--border-light); } .workflow-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .workflow-status-dot.published { background: var(--text-secondary); } .workflow-status-dot.draft { background: var(--text-hint); } .workflow-info { flex: 1; min-width: 0; } .workflow-name { font-size: 0.8rem; font-weight: 600; } .workflow-meta { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; } .workflow-stats { display: flex; gap: 16px; } .wf-stat { text-align: center; } .wf-stat-value { display: block; font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; } .wf-stat-label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } /* Workflows grouping (P2 #13) */ .workflows-section { display: flex; flex-direction: column; gap: 16px; } .workflows-group-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .workflows-count { padding: 2px 8px; background: rgba(255,255,255,0.06); border-radius: 10px; font-size: 11px; color: var(--text-secondary); font-weight: 600; } .workflows-drafts > summary { cursor: pointer; font-size: 13px; font-weight: 500; padding: 8px 0; color: var(--text-secondary); list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; } .workflows-drafts > summary::-webkit-details-marker { display: none; } .workflows-drafts > summary::before { content: '▸'; font-size: 10px; color: var(--text-muted); transition: transform 0.15s; display: inline-block; } .workflows-drafts[open] > summary::before { transform: rotate(90deg); } .workflows-drafts[open] > summary { color: var(--text-primary); } /* Bar Chart */ .bar-chart-container { overflow-x: auto; } .bar-chart { display: flex; gap: 3px; align-items: flex-end; height: 180px; padding-top: 10px; } .bar-item { flex: 1; min-width: 28px; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; } .bar-fill { width: 100%; background: var(--text-primary); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; transition: height 0.6s var(--ease); opacity: 0.6; } .bar-fill:hover { opacity: 1; } .bar-tooltip { position: fixed; padding: 8px 12px; background: var(--bg-elevated); border: 1px solid var(--border-medium); border-radius: 6px; font-size: 0.7rem; color: var(--text-primary); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s var(--ease); z-index: 99999; box-shadow: 0 6px 24px rgba(0,0,0,0.5); } .bar-fill:hover .bar-tooltip { opacity: 1; } .bar-label { font-size: 0.55rem; color: var(--text-muted); margin-top: 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; writing-mode: vertical-lr; transform: rotate(180deg); max-height: 60px; } /* Click Analysis */ .click-generated { font-size: 0.65rem; color: var(--text-hint); margin-bottom: 14px; } .click-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } .click-channel-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .click-channel-total { border-color: var(--border-light); } .click-channel-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 12px; } .click-metrics { display: flex; gap: 14px; } .click-metric { text-align: center; flex: 1; } .click-metric-value { display: block; font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .click-metric-label { font-size: 0.6rem; color: var(--text-muted); margin-top: 4px; } .click-section-title { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 10px; margin-top: 20px; } .click-table-wrap { overflow-x: auto; } .click-table tbody td { font-variant-numeric: tabular-nums; } /* Timeline (old bar) */ .timeline-chart { display: flex; gap: 3px; align-items: flex-end; height: 120px; } .timeline-bar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 30px; } .timeline-fill { width: 100%; background: var(--text-primary); border-radius: 2px 2px 0 0; position: relative; opacity: 0.5; transition: height 0.6s var(--ease), opacity 0.2s; } .timeline-fill:hover { opacity: 1; } /* Campaigns by Day */ .campaign-overall { display: flex; gap: 12px; margin-bottom: 16px; padding: 12px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(108,99,255,0.06), rgba(59,130,246,0.06)); border: 1px solid rgba(108,99,255,0.12); } .campaign-overall-stat { flex: 1; text-align: center; } .campaign-overall-value { display: block; font-size: 1.3rem; font-weight: 800; color: var(--text-primary); } .campaign-overall-label { display: block; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } .campaign-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; } .campaign-card { padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-card); transition: all 0.2s; } .campaign-card:hover { border-color: var(--cam-color, var(--border)); transform: translateY(-1px); } /* Today's campaign card — glowing highlight */ .campaign-card-today { border-color: rgba(239, 68, 68, 0.4) !important; background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), var(--bg-card)); box-shadow: 0 0 20px rgba(239, 68, 68, 0.08), inset 0 0 0 1px rgba(239, 68, 68, 0.06); animation: todayPulse 3s ease-in-out infinite; } @keyframes todayPulse { 0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.08), inset 0 0 0 1px rgba(239, 68, 68, 0.06); } 50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.14), inset 0 0 0 1px rgba(239, 68, 68, 0.12); } } /* Today's comparison row */ .campaign-compare-today { background: rgba(239, 68, 68, 0.06); border-radius: 8px; padding: 8px 12px; margin: -4px -12px; } .campaign-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .campaign-date-badge { padding: 6px 12px; border-radius: 8px; color: white; font-weight: 700; font-size: 0.75rem; white-space: nowrap; } .campaign-card-title { font-weight: 700; font-size: 0.85rem; } .campaign-card-desc { font-size: 0.68rem; color: var(--text-muted); } .campaign-kpi-row { display: flex; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .campaign-kpi { flex: 1; text-align: center; min-width: 60px; } .campaign-kpi-value { display: block; font-size: 1.4rem; font-weight: 800; } .campaign-kpi-label { display: block; font-size: 0.58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .campaign-metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .campaign-metric-item { padding: 8px; border-radius: 6px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); transition: background 0.15s, border-color 0.15s; } .campaign-metric-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); } .campaign-metric-count { display: block; font-weight: 700; font-size: 0.9rem; } .campaign-metric-name { display: block; font-size: 0.6rem; color: var(--text-muted); margin-top: 2px; } /* Comparison */ .campaign-compare { display: flex; flex-direction: column; gap: 12px; } .campaign-compare-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; } .campaign-compare-label { font-weight: 600; font-size: 0.75rem; } .campaign-compare-bars { display: flex; flex-direction: column; gap: 4px; } .campaign-compare-bar { height: 14px; border-radius: 7px; min-width: 4px; transition: width 0.6s ease; } .campaign-compare-values { display: flex; flex-direction: column; gap: 2px; font-size: 0.7rem; font-weight: 600; text-align: right; min-width: 120px; } @media (max-width: 768px) { .campaign-cards { grid-template-columns: 1fr; } .campaign-overall { flex-wrap: wrap; } .campaign-compare-item { grid-template-columns: 1fr; } } /* ═══ TOAST ═══ */ .toast-container { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 12px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8rem; color: var(--text-primary); box-shadow: 0 4px 20px rgba(0,0,0,0.5); animation: toastIn 0.3s var(--ease); max-width: 380px; } .toast-out { animation: toastOut 0.3s var(--ease) forwards; } @keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } } /* ═══ CEO EXECUTIVE SUMMARY ═══ */ .exec-summary { display: flex; align-items: center; gap: 40px; padding: 32px 36px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); margin-bottom: 16px; } .exec-hero { flex-shrink: 0; text-align: left; padding-right: 40px; border-right: 1px solid var(--border); } .exec-hero-number { font-size: 3.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary); } .exec-hero-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 8px; } .exec-hero-sub { font-size: 0.65rem; color: var(--text-hint); margin-top: 4px; } .exec-metrics { display: flex; gap: 32px; flex: 1; } .exec-metric { flex: 1; text-align: center; padding: 12px 8px; border-radius: var(--radius); transition: background 0.15s var(--ease); } .exec-metric:hover { background: var(--bg-secondary); } .exec-metric-value { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .exec-metric-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 6px; } .exec-metric-rate { font-size: 0.8rem; font-weight: 700; color: var(--highlight-best); margin-top: 4px; font-variant-numeric: tabular-nums; } /* ═══ SIDE-BY-SIDE COMPARISON ═══ */ .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .comparison-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; transition: border-color 0.15s var(--ease); } .comparison-card:hover { border-color: var(--border-light); } .comparison-header { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 16px; color: var(--text-secondary); } .comparison-body {} .comp-funnel { display: flex; flex-direction: column; gap: 6px; } .comp-stage { display: flex; align-items: center; gap: 10px; } .comp-stage-bar-wrap { flex: 1; height: 24px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; position: relative; } .comp-stage-bar { height: 100%; border-radius: 4px; transition: width 0.8s var(--ease); min-width: 2px; } .comp-stage-label { font-size: 0.65rem; font-weight: 600; color: var(--text-muted); min-width: 70px; text-transform: uppercase; letter-spacing: 0.04em; } .comp-stage-value { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; } .comp-stage-pct { font-size: 0.6rem; font-weight: 600; color: var(--text-hint); min-width: 36px; text-align: right; } .comp-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .comp-total-value { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .comp-total-label { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } @media (max-width: 768px) { .exec-summary { flex-direction: column; gap: 20px; padding: 24px 20px; } .exec-hero { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 20px; text-align: center; } .exec-metrics { gap: 16px; } .comparison-grid { grid-template-columns: 1fr; } } /* ═══ ACTION BAR ═══ */ .dash-action-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .dash-action-bar-left { display: flex; align-items: center; gap: 12px; } .dash-action-bar-right { display: flex; align-items: center; gap: 8px; } .dash-cache-hint { font-size: 0.65rem; color: var(--text-hint); letter-spacing: 0.02em; } /* 2026-05-28: variante proeminente do timestamp (feedback #20 — "atualizado há X min" mais visível) */ .dash-cache-hint--prominent { font-size: 0.75rem; color: var(--text-primary); font-weight: 400; display: inline-flex; align-items: center; gap: 6px; cursor: help; } .dash-cache-hint--prominent strong { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; } .dash-cache-hint__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-positive); box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15); animation: dash-cache-pulse 2.4s ease-in-out infinite; } @keyframes dash-cache-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } @media (prefers-reduced-motion: reduce) { .dash-cache-hint__dot { animation: none; } } .action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--text-primary); color: var(--bg-primary); border: none; border-radius: var(--radius); font-family: var(--font); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.15s var(--ease); } .action-btn:hover { opacity: 0.85; } .action-btn:disabled { opacity: 0.3; cursor: not-allowed; } .action-btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); } .action-btn-ghost:hover { background: var(--bg-card); color: var(--text-primary); } /* ═══ SKELETON LOADING ═══ */ .skeleton { background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { display: inline-block; height: 1.2em; min-width: 40px; vertical-align: middle; } .skeleton-box { flex: 1; height: 100px; border-radius: var(--radius); } .skeleton-funnel { display: flex; gap: 8px; } .skeleton-bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; } .skeleton-bar { flex: 1; min-width: 24px; border-radius: 3px 3px 0 0; } .skeleton-list { display: flex; flex-direction: column; gap: 8px; } .skeleton-row { height: 32px; border-radius: 4px; } /* ═══ STORE SEARCH/SORT ═══ */ .store-search-input { padding: 5px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-family: var(--font); font-size: 0.7rem; outline: none; width: 140px; transition: border-color 0.15s var(--ease); } .store-search-input:focus { border-color: var(--border-focus); } .store-search-input::placeholder { color: var(--text-hint); } .store-sort-select { padding: 5px 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); font-family: var(--font); font-size: 0.7rem; outline: none; cursor: pointer; } .store-sort-select:focus { border-color: var(--border-focus); } /* ═══ CONVERSATION INTELLIGENCE ═══ */ .ci-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .ci-kpi { text-align: center; padding: 16px 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); } .ci-kpi-value { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; } .ci-kpi-label { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 6px; } .ci-kpi-sub { font-size: 0.75rem; font-weight: 700; color: var(--highlight-best); margin-top: 2px; } /* Horizontal funnel bars */ .ci-funnel { margin-bottom: 24px; } .ci-funnel-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .ci-funnel-label { min-width: 100px; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-align: right; } .ci-funnel-bar-wrap { flex: 1; height: 28px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; position: relative; } .ci-funnel-bar { height: 100%; background: var(--text-primary); border-radius: 4px; transition: width 0.8s var(--ease); min-width: 2px; display: flex; align-items: center; padding-left: 8px; } .ci-funnel-bar-text { font-size: 0.65rem; font-weight: 700; color: #000; white-space: nowrap; } .ci-funnel-value { min-width: 70px; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .ci-funnel-pct { min-width: 50px; font-size: 0.65rem; font-weight: 600; color: var(--text-hint); text-align: right; } .ci-funnel-drop { min-width: 50px; font-size: 0.6rem; font-weight: 600; color: #ff4444; text-align: right; } /* Category bars */ .ci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .ci-block { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .ci-block-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .ci-cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 0.7rem; } .ci-cat-name { min-width: 100px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ci-cat-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .ci-cat-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s var(--ease); } .ci-cat-count { min-width: 40px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--text-secondary); } /* Temporal bars (mini) */ .ci-temporal-bars { display: flex; align-items: flex-end; gap: 2px; height: 80px; } .ci-temporal-bar { flex: 1; background: var(--text-primary); border-radius: 2px 2px 0 0; min-width: 4px; transition: height 0.4s var(--ease); opacity: 0.5; position: relative; } .ci-temporal-bar:hover { opacity: 1; } .ci-temporal-labels { display: flex; gap: 2px; margin-top: 4px; } .ci-temporal-label { flex: 1; text-align: center; font-size: 0.5rem; color: var(--text-hint); } /* Store ranking table */ .ci-ranking-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; } .ci-ranking-table th { padding: 8px 10px; text-align: left; font-weight: 600; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); cursor: pointer; } .ci-ranking-table th:hover { color: var(--text-primary); } .ci-ranking-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .ci-ranking-table tr:hover { background: var(--bg-card-hover); } .ci-score-bar { width: 60px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; } .ci-score-fill { height: 100%; background: var(--highlight-best); border-radius: 2px; } /* Sample replies */ .ci-samples { display: flex; flex-direction: column; gap: 6px; } .ci-sample { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.75rem; } .ci-sample-text { flex: 1; color: var(--text-secondary); font-style: italic; } .ci-sample-badge { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 4px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; } .ci-sample-badge.intent { color: var(--highlight-best); border-color: var(--highlight-best); } .ci-sample-badge.question { color: #64b5f6; border-color: #64b5f6; } .ci-sample-badge.positive { color: #81c784; border-color: #81c784; } .ci-sample-badge.optout { color: var(--color-warning); border-color: var(--color-warning); } .ci-sample-badge.complaint { color: #ef5350; border-color: #ef5350; } /* Keywords */ .ci-keywords { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .ci-keyword { padding: 3px 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; font-size: 0.65rem; color: var(--text-secondary); } /* Deep reply stats */ .ci-deep-stats { display: flex; gap: 20px; margin-bottom: 12px; } .ci-deep-stat { text-align: center; } .ci-deep-stat-value { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; } .ci-deep-stat-label { font-size: 0.55rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } @media (max-width: 768px) { .ci-kpis { grid-template-columns: repeat(2, 1fr); } .ci-grid { grid-template-columns: 1fr; } .ci-funnel-label { min-width: 60px; font-size: 0.6rem; } } /* ═══ SORTABLE TABLE ═══ */ .history-table thead th.sortable { cursor: pointer; user-select: none; transition: color 0.15s var(--ease); } .history-table thead th.sortable:hover { color: var(--text-primary); } .history-table thead th.sortable .sort-icon { display: inline-block; margin-left: 4px; opacity: 0.3; transition: opacity 0.15s var(--ease); } .history-table thead th.sortable.sorted .sort-icon { opacity: 1; } .history-table thead th.sortable.sorted { color: var(--text-primary); } /* ═══ FUNNEL DROP-OFF ═══ */ .funnel-dropoff { position: absolute; top: 50%; right: -16px; transform: translateY(-50%); font-size: 0.55rem; font-weight: 700; color: var(--text-hint); background: var(--bg-primary); padding: 2px 4px; border-radius: 3px; z-index: 2; white-space: nowrap; letter-spacing: 0.02em; } /* ═══ RESPONSIVE ═══ */ @media (max-width: 768px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } .dash-card-wide, .dash-card-full { grid-column: span 1; } .click-overview { grid-template-columns: 1fr; } .funnel-container { flex-direction: column; } .funnel-arrow { transform: rotate(90deg); padding: 4px 0; } .store-funnels-grid { grid-template-columns: 1fr; } .header-center { display: none; } .app-header { padding: 10px 16px; } .chat-messages { padding: 16px; } .dashboard-container { padding: 16px; } } @media (max-width: 480px) { .kpi-row { grid-template-columns: 1fr; } html { font-size: 13px; } } /* ═══════════════════════════════════════════════════════ DETECTOR BANNER (Dashboard topo) — Atualizações recentes do GHL ═══════════════════════════════════════════════════════ */ .detector-banner { margin: 4px 0 16px; padding: 16px 18px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(0, 230, 118, 0.06), rgba(108, 99, 255, 0.06)); border: 1px solid var(--border-medium); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 14px; animation: detector-fade-in 240ms var(--ease); } [data-theme="light"] .detector-banner { background: linear-gradient(135deg, #f0fdf4 0%, #eef2ff 100%); border-color: #d1d5db; } .detector-banner-empty { display: none !important; } @keyframes detector-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .detector-banner-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .detector-banner-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .detector-banner-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-card); color: var(--highlight-best); border: 1px solid var(--border); flex-shrink: 0; } .detector-banner-title { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); line-height: 1.25; } .detector-banner-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; } .detector-banner-cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius); background: var(--accent); color: var(--text-on-accent); font-size: 0.78rem; font-weight: 600; border: 0; cursor: pointer; transition: transform 150ms var(--ease), opacity 150ms var(--ease); white-space: nowrap; } .detector-banner-cta:hover { opacity: 0.88; transform: translateY(-1px); } .detector-banner-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .detector-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .detector-chip { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--border-medium); background: var(--bg-card); cursor: pointer; font-family: inherit; font-size: inherit; color: var(--text-primary); transition: border-color 150ms var(--ease), transform 150ms var(--ease), background 150ms var(--ease); position: relative; } .detector-chip:hover { border-color: var(--border-focus); transform: translateY(-1px); background: var(--bg-card-hover); } .detector-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .detector-chip.is-new { border-left: 3px solid var(--highlight-best); } .detector-chip.is-update { border-left: 3px solid #29b6f6; } [data-theme="light"] .detector-chip.is-update { border-left-color: #1d4ed8; } .detector-chip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .detector-chip-flag { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; } .detector-chip.is-new .detector-chip-flag { background: rgba(0, 230, 118, 0.14); color: var(--highlight-best); } .detector-chip.is-update .detector-chip-flag { background: rgba(41, 182, 246, 0.14); color: #29b6f6; } [data-theme="light"] .detector-chip.is-new .detector-chip-flag { background: #dcfce7; color: #15803d; } [data-theme="light"] .detector-chip.is-update .detector-chip-flag { background: #dbeafe; color: #1d4ed8; } .detector-chip-date { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .detector-chip-title { display: flex; flex-direction: column; gap: 2px; } .detector-chip-channel { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .detector-chip-name { font-weight: 600; font-size: 0.82rem; color: var(--text-primary); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .detector-chip-kpis { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 0.72rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-top: 2px; } .detector-chip-kpis strong { color: var(--text-primary); font-weight: 700; } .detector-chip-kpis .detector-chip-ctr strong { color: var(--highlight-best); } @media (max-width: 720px) { .detector-banner { padding: 14px; } .detector-banner-head { flex-direction: column; align-items: flex-start; } .detector-banner-cta { width: 100%; justify-content: center; } .detector-chips { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .detector-banner { animation: none; } .detector-chip, .detector-banner-cta { transition: none; } } /* ═══════════════════════════════════════════════════════ AÇÃO DE HOJE — herói (clareza máxima da ação em andamento) ═══════════════════════════════════════════════════════ */ .today-action { margin: 4px 0 18px; padding: 20px 22px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.10), var(--bg-card) 58%); border: 1px solid var(--border-medium, var(--border)); border-left: 4px solid #3b82f6; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .ta-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .ta-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ta-live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em; color: #ef4444; } .ta-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); animation: taPulse 1.8s infinite; } @keyframes taPulse { 70% { box-shadow: 0 0 0 7px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } } .ta-date { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .ta-name { margin: 0; font-size: 1.18rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; } .ta-status { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-warning); background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); padding: 5px 10px; border-radius: 6px; white-space: nowrap; } [data-theme="light"] .ta-status { color: #b45309; background: #fef3c7; } .ta-body { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 16px; } .ta-headline { display: flex; align-items: baseline; gap: 11px; } .ta-big { font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; } .ta-big-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.4; } .ta-big-label em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 0.66rem; opacity: 0.85; } .ta-chips { display: flex; gap: 8px; flex-wrap: wrap; } .ta-chip { font-size: 0.74rem; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); padding: 6px 11px; border-radius: 7px; } .ta-chip strong { color: var(--text-primary); font-variant-numeric: tabular-nums; } .ta-chip-soft { color: var(--text-muted); background: transparent; } .ta-waves { margin-top: 18px; } .ta-waves-head { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 10px; } .ta-waves-head span { color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; } .ta-waves-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 680px) { .ta-waves-grid { grid-template-columns: repeat(2, 1fr); } } .ta-wave { display: flex; flex-direction: column; gap: 6px; } .ta-wave-bar { height: 6px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; } .ta-wave-bar span { display: block; height: 100%; background: #3b82f6; border-radius: 3px; } .ta-wave-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .ta-wave-name { font-size: 0.72rem; color: var(--text-muted); } .ta-wave-val { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .ta-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 0.68rem; color: var(--text-muted); line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .ta-dot { animation: none; } } /* ═══════════════════════════════════════════════════════ LATEST DISPATCHES — Cards lado-a-lado E-com × Lojas ═══════════════════════════════════════════════════════ */ .latest-dispatches { margin: 4px 0 20px; display: flex; flex-direction: column; gap: 12px; } .latest-dispatches-empty { display: none !important; } .latest-dispatches-head { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; } .latest-dispatches-title { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); display: inline-flex; align-items: center; gap: 6px; } .latest-dispatches-title svg { color: var(--highlight-best); } .latest-dispatches-hint { font-size: 0.72rem; color: var(--text-muted); } .latest-dispatches-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 880px) { .latest-dispatches-grid { grid-template-columns: 1fr; } } .latest-card { position: relative; padding: 18px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-medium); display: flex; flex-direction: column; gap: 14px; transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease); box-shadow: var(--shadow-card); } .latest-card:hover { transform: translateY(-2px); border-color: var(--border-focus); box-shadow: var(--shadow-card-lg); } /* Faixa lateral colorida por canal */ .latest-card::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; } .latest-ecom::before { background: #3b82f6; } .latest-loja::before { background: var(--highlight-best); } [data-theme="light"] .latest-loja::before { background: #15803d; } .latest-card.is-recent { border-color: rgba(0, 230, 118, 0.5); box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.15), var(--shadow-card); } [data-theme="light"] .latest-card.is-recent { border-color: #86efac; box-shadow: 0 0 0 1px rgba(21, 128, 61, 0.08), var(--shadow-card); } .latest-card-empty { align-items: center; justify-content: center; min-height: 220px; border-style: dashed; opacity: 0.7; } .latest-card-empty-msg { font-size: 0.78rem; color: var(--text-muted); text-align: center; } .latest-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .latest-card-channel { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .latest-ecom .latest-card-channel { color: #3b82f6; } .latest-loja .latest-card-channel { color: var(--highlight-best); } [data-theme="light"] .latest-loja .latest-card-channel { color: #15803d; } .latest-card-flags { display: inline-flex; align-items: center; gap: 8px; } .latest-card-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: rgba(0, 230, 118, 0.14); color: var(--highlight-best); } [data-theme="light"] .latest-card-badge { background: #dcfce7; color: #15803d; } .latest-card-since { font-size: 0.66rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .latest-card-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .latest-card-date { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .latest-card-name { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .latest-card-headline { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; background: var(--bg-elevated); border-radius: var(--radius); border: 1px solid var(--border); } .latest-card-headline-value { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; } .latest-card-headline-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .latest-card-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media (max-width: 520px) { .latest-card-kpis { grid-template-columns: repeat(2, 1fr); } } .latest-kpi { padding: 10px 12px; background: var(--bg-card-hover); border-radius: var(--radius); border: 1px solid transparent; display: flex; flex-direction: column; gap: 2px; cursor: help; transition: border-color 150ms var(--ease), background 150ms var(--ease); } .latest-kpi:hover { border-color: var(--border); background: var(--bg-elevated); } .latest-kpi-value { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); line-height: 1.1; } .latest-kpi-label { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .latest-kpi-sub { font-size: 0.66rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-top: 2px; } .latest-kpi-success .latest-kpi-value { color: var(--highlight-best); } .latest-kpi-success .latest-kpi-sub { color: var(--highlight-best); } .latest-kpi-tv .latest-kpi-value { color: #ffb74d; } [data-theme="light"] .latest-kpi-tv .latest-kpi-value { color: #b45309; } .latest-kpi-rec .latest-kpi-value { color: #c084fc; } [data-theme="light"] .latest-kpi-rec .latest-kpi-value { color: #7c3aed; } .latest-kpi-warn .latest-kpi-value { color: #ff8a65; } [data-theme="light"] .latest-kpi-warn .latest-kpi-value { color: #c2410c; } .latest-kpi-good .latest-kpi-value { color: var(--highlight-good); } .latest-card-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); } .latest-card-footer:has(> .latest-card-foot-cell:only-child) { grid-template-columns: 1fr; } .latest-card-foot-cell { display: flex; flex-direction: column; gap: 2px; cursor: help; } .latest-card-foot-value { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .latest-card-foot-label { font-size: 0.66rem; color: var(--text-muted); } .latest-card-foot-cell-sales .latest-card-foot-value { color: var(--highlight-best); } /* Detalhe por ação — divisão clara ação-por-ação dentro do card do dia */ .latest-card-actions { padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .lca-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .lca-title { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); } .lca-sub { font-size: 0.64rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .lca-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .lca-table th { font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--border); } .lca-table th:first-child { text-align: left; } .lca-table td { font-size: 0.74rem; color: var(--text-primary); text-align: right; padding: 7px 6px; border-bottom: 1px solid var(--border); } .lca-table tbody tr:last-child td { border-bottom: none; } .lca-table tbody tr:hover td { background: var(--bg-card-hover); } .lca-table td.lca-name { text-align: left; font-weight: 700; color: var(--text-primary); } .lca-b1 { font-weight: 700; color: var(--highlight-best); } .lca-ctr { font-size: 0.64rem; color: var(--text-muted); } .lca-pill { font-size: 0.52rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 3px; margin-left: 6px; vertical-align: middle; } .lca-pill-best { background: rgba(0, 230, 118, 0.16); color: var(--highlight-best); } .lca-pill-low { background: var(--color-neutral-bg); color: var(--color-neutral); } [data-theme="light"] .lca-pill-best { background: #dcfce7; color: #15803d; } [data-theme="light"] .lca-pill-low { background: #ffedd5; color: #c2410c; } .latest-card-badge-multi { background: rgba(59, 130, 246, 0.16); color: #3b82f6; } [data-theme="light"] .latest-card-badge-multi { background: #dbeafe; color: #1d4ed8; } @media (prefers-reduced-motion: reduce) { .latest-card { transition: none; } } /* ═══════════════════════════════════════════════════════ COMPARATIVO POR DIA — Tabela compacta (substitui flex row) ═══════════════════════════════════════════════════════ */ .dctbl-hint { font-weight: 400; color: var(--text-muted); font-size: 0.7rem; margin-left: 10px; letter-spacing: 0; text-transform: none; } .dctbl-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } .dctbl { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-variant-numeric: tabular-nums; min-width: 760px; } .dctbl thead th { position: sticky; top: 0; background: var(--bg-elevated); color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.05em; padding: 10px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border-medium); } .dctbl th.dctbl-num, .dctbl td.dctbl-num { text-align: right; } .dctbl th.dctbl-sort { cursor: pointer; user-select: none; transition: color 150ms var(--ease), background 150ms var(--ease); } .dctbl th.dctbl-sort:hover { color: var(--text-primary); background: var(--bg-card-hover); } .dctbl th[data-dctbl-dir] { color: var(--text-primary); background: var(--bg-card-hover); } .dctbl-arrow { font-size: 0.6rem; margin-left: 2px; color: var(--highlight-best); } .dctbl tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; font-weight: 500; } .dctbl tbody tr { transition: background 120ms var(--ease); } .dctbl tbody tr:hover { background: var(--bg-card-hover); } .dctbl tbody tr:last-child td { border-bottom: 0; } .dctbl-strong { color: var(--text-primary); font-weight: 700; } .dctbl-date { font-weight: 700; color: var(--text-primary); position: relative; } .dctbl-dash { color: var(--text-hint); } /* Recente: fundo sutil + dot indicator */ .dctbl tbody tr.dctbl-row-recent { background: rgba(0, 230, 118, 0.04); } .dctbl tbody tr.dctbl-row-recent:hover { background: rgba(0, 230, 118, 0.10); } [data-theme="light"] .dctbl tbody tr.dctbl-row-recent { background: #f0fdf4; } [data-theme="light"] .dctbl tbody tr.dctbl-row-recent:hover { background: #dcfce7; } .dctbl-recent-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--highlight-best); margin-left: 6px; vertical-align: middle; box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.18); animation: dctbl-pulse 2s ease-in-out infinite; } @keyframes dctbl-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.18); } 50% { box-shadow: 0 0 0 4px rgba(0, 230, 118, 0.08); } } /* Canal badge */ .dctbl-channel { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; } .dctbl-channel-ecom { background: rgba(59, 130, 246, 0.12); color: #3b82f6; } .dctbl-channel-loja { background: var(--channel-loja-bg); color: var(--channel-loja); } .dctbl-channel-mixed { background: rgba(171, 71, 188, 0.12); color: var(--channel-misto); } [data-theme="light"] .dctbl-channel-loja { color: #15803d; background: #dcfce7; } [data-theme="light"] .dctbl-channel-ecom { color: #1d4ed8; background: #dbeafe; } [data-theme="light"] .dctbl-channel-mixed { color: #7c3aed; background: #ede9fe; } .dctbl-channel-count { font-size: 0.68rem; color: var(--text-muted); font-weight: 500; } /* Footer: linha consolidado destacada */ .dctbl tfoot tr.dctbl-total td { padding: 12px; background: var(--bg-elevated); border-top: 2px solid var(--border-medium); border-bottom: 0; font-weight: 700; color: var(--text-primary); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; } .dctbl tfoot tr.dctbl-total td:first-child { color: var(--highlight-best); } @media (max-width: 720px) { .dctbl { font-size: 0.72rem; min-width: 680px; } .dctbl thead th, .dctbl tbody td, .dctbl tfoot td { padding: 9px 10px; } } @media (prefers-reduced-motion: reduce) { .dctbl-recent-dot { animation: none; } .dctbl tbody tr, .dctbl th.dctbl-sort { transition: none; } } /* ═══════════════════════════════════════════════════════ MÍDIA & CONCILIAÇÃO — Redesign v2 (5 blocos + 6 gráficos) Estilo Data-Dense Dashboard (alta densidade, visual hierarchy) ═══════════════════════════════════════════════════════ */ .mc-section { margin-bottom: 28px; } .mc-section-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; letter-spacing: -0.01em; } .mc-section-hint { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); } /* ─── BLOCO 0: ALERT BANNER (zumbis no topo) ─── */ .mc-alert-banner { margin: 0 0 22px; padding: 16px 18px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(255,107,107,0.10), rgba(255,138,101,0.05)); border: 1px solid rgba(255,107,107,0.45); border-left: 4px solid var(--error); display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; box-shadow: var(--shadow-card); } [data-theme="light"] .mc-alert-banner { background: linear-gradient(135deg, #fef2f2, #fff7ed); border-color: #fca5a5; } .mc-alert-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,107,107,0.15); border-radius: 10px; color: var(--error); flex-shrink: 0; } .mc-alert-title { font-size: 1rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.25; } .mc-alert-sub { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; } .mc-alert-details { font-size: 0.72rem; } .mc-alert-details summary { cursor: pointer; padding: 6px 10px; border-radius: var(--radius); background: rgba(255,107,107,0.10); color: var(--error); font-weight: 600; } .mc-alert-details summary:hover { background: rgba(255,107,107,0.20); } .mc-alert-list { list-style: decimal; padding-left: 22px; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; } .mc-alert-list li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 0.7rem; color: var(--text-secondary); } .mc-zombie-spend { color: var(--error); font-weight: 700; font-variant-numeric: tabular-nums; } .mc-zombie-name { font-family: ui-monospace, "SF Mono", Monaco, monospace; font-size: 0.65rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media (max-width: 720px) { .mc-alert-banner { grid-template-columns: 1fr; text-align: left; } .mc-alert-icon { width: 32px; height: 32px; } } /* ─── BLOCO 1: KPI GRID + NARRATIVA ─── */ .mc-kpi-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr; gap: 12px; margin-bottom: 16px; } @media (max-width: 1100px) { .mc-kpi-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .mc-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .mc-kpi-grid { grid-template-columns: 1fr; } } .mc-kpi { padding: 16px 18px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-medium); display: flex; flex-direction: column; gap: 4px; position: relative; box-shadow: var(--shadow-card); } .mc-kpi-hero { background: linear-gradient(135deg, rgba(124,99,255,0.10), rgba(59,130,246,0.06)); border-color: rgba(124,99,255,0.30); } [data-theme="light"] .mc-kpi-hero { background: linear-gradient(135deg, #eef2ff, #f0f9ff); } .mc-kpi-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elevated); border-radius: 8px; margin-bottom: 4px; } .mc-kpi-value { font-size: 1.55rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1; } .mc-kpi-hero .mc-kpi-value { font-size: 1.75rem; } .mc-kpi-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-top: 4px; } .mc-kpi-sub { font-size: 0.7rem; color: var(--text-secondary); } .mc-kpi-bench { font-size: 0.64rem; color: var(--text-hint); margin-top: 4px; font-style: italic; } .mc-kpi-efficiency .mc-kpi-meter { height: 6px; background: var(--bg-elevated); border-radius: 3px; margin-top: 8px; overflow: hidden; } .mc-kpi-meter-fill { height: 100%; border-radius: 3px; transition: width 400ms var(--ease); } .mc-narrative { padding: 14px 16px; background: rgba(0, 230, 118, 0.05); border: 1px solid rgba(0, 230, 118, 0.25); border-left: 3px solid var(--highlight-best); border-radius: var(--radius); margin-bottom: 18px; } [data-theme="light"] .mc-narrative { background: #f0fdf4; border-color: #86efac; } .mc-narrative-head { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--highlight-best); margin-bottom: 8px; } [data-theme="light"] .mc-narrative-head { color: #15803d; } .mc-narrative-list { list-style: disc; padding-left: 22px; margin: 0; display: flex; flex-direction: column; gap: 6px; } .mc-narrative-list li { font-size: 0.82rem; color: var(--text-primary); line-height: 1.5; } /* ─── BLOCO 2/5: CARDS COM CHART OU LISTAS ─── */ .mc-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 980px) { .mc-2col { grid-template-columns: 1fr; } } .mc-card { padding: 16px 18px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-medium); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); } .mc-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .mc-card-title { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .mc-card-sub { margin: 4px 0 0; font-size: 0.7rem; color: var(--text-muted); line-height: 1.4; } .mc-chart-wrap { position: relative; height: 280px; width: 100%; } .mc-chart-wrap-wide { height: 360px; } /* ─── FUNIL DE ATRIBUIÇÃO ─── */ .mc-funnel { display: flex; flex-direction: column; gap: 10px; } .mc-funnel-stage { display: flex; flex-direction: column; gap: 4px; } .mc-funnel-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .mc-funnel-label { font-size: 0.74rem; color: var(--text-secondary); font-weight: 600; } .mc-funnel-value { font-size: 0.85rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); } .mc-funnel-bar { height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; } .mc-funnel-bar-fill { height: 100%; border-radius: 4px; transition: width 400ms var(--ease); } .mc-funnel-conv { font-size: 0.65rem; color: var(--text-muted); font-style: italic; margin-top: 2px; } /* ─── BLOCO 3: TRILHAS DE AÇÕES ─── */ .mc-trilhas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 1100px) { .mc-trilhas { grid-template-columns: 1fr; } } .mc-trilha { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; } .mc-trilha-empty { background: transparent; border-style: dashed; opacity: 0.7; } .mc-trilha-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .mc-trilha-head h5 { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; } .mc-trilha-count { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; background: var(--bg-elevated); color: var(--text-muted); } .mc-trilha-ativa { background: rgba(0, 230, 118, 0.16); color: var(--highlight-best); } [data-theme="light"] .mc-trilha-ativa { background: #dcfce7; color: #15803d; } .mc-trilha-recente { background: rgba(255, 183, 77, 0.18); color: #ffb74d; } [data-theme="light"] .mc-trilha-recente { background: #fef3c7; color: #b45309; } .mc-trilha-encerrada { background: var(--bg-elevated); color: var(--text-muted); } .mc-trilha-items { display: flex; flex-direction: column; gap: 8px; } .mc-trilha-empty-msg { text-align: center; font-size: 0.74rem; color: var(--text-hint); padding: 24px 12px; } .mc-mini-card { padding: 10px 12px; border-radius: var(--radius); background: var(--bg-card-hover); border: 1px solid var(--border); border-left: 3px solid var(--text-muted); display: flex; flex-direction: column; gap: 4px; } .mc-roas-top { border-left-color: var(--highlight-best); } .mc-roas-mid { border-left-color: #ffb74d; } .mc-roas-low { border-left-color: var(--error); } .mc-mini-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .mc-mini-name { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mc-mini-roas { font-size: 0.74rem; font-weight: 800; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 4px; background: var(--bg-elevated); } .mc-roas-top .mc-mini-roas { background: rgba(0, 230, 118, 0.16); color: var(--highlight-best); } .mc-roas-mid .mc-mini-roas { background: rgba(255, 183, 77, 0.18); color: #ffb74d; } [data-theme="light"] .mc-roas-top .mc-mini-roas { background: #dcfce7; color: #15803d; } [data-theme="light"] .mc-roas-mid .mc-mini-roas { background: #fef3c7; color: #b45309; } .mc-mini-value { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); } .mc-mini-sub { font-size: 0.66rem; color: var(--text-secondary); } .mc-mini-period { font-size: 0.62rem; color: var(--text-muted); font-family: ui-monospace, "SF Mono", Monaco, monospace; margin-top: 2px; } /* ─── BLOCO 5: CANAIS ROWS ─── */ .mc-canais { display: flex; flex-direction: column; gap: 10px; } .mc-canal-row { display: grid; grid-template-columns: 150px 1fr auto auto auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--bg-card-hover); border: 1px solid var(--border); border-left: 3px solid var(--mc-canal-color, var(--border-medium)); border-radius: var(--radius); font-size: 0.78rem; } .mc-canal-label { display: inline-flex; align-items: center; gap: 6px; color: var(--mc-canal-color, var(--text-primary)); font-weight: 700; letter-spacing: 0.02em; } .mc-canal-bar { height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; } .mc-canal-bar-fill { height: 100%; background: var(--mc-canal-color, var(--text-primary)); border-radius: 4px; transition: width 400ms var(--ease); } .mc-canal-value { font-weight: 700; font-variant-numeric: tabular-nums; } .mc-canal-pct { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; } .mc-canal-roas { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; } @media (max-width: 720px) { .mc-canal-row { grid-template-columns: 1fr auto auto; } .mc-canal-bar, .mc-canal-pct { grid-column: 1 / -1; } } /* ─── TOP CAMPANHAS (mantido) ─── */ .mc-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 980px) { .mc-top-grid { grid-template-columns: 1fr; } } .mc-top-block { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border-medium); box-shadow: var(--shadow-card); } .mc-top-block h4 { margin: 0 0 10px; font-size: 0.74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } .mc-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .mc-top-list li { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 8px; align-items: center; font-size: 0.72rem; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .mc-top-list li:last-child { border-bottom: 0; } .mc-top-rank { color: var(--text-muted); font-weight: 700; font-variant-numeric: tabular-nums; } .mc-top-name { color: var(--text-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: ui-monospace, "SF Mono", Monaco, monospace; font-size: 0.66rem; } .mc-top-spend { font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 700; } .mc-top-roas { font-variant-numeric: tabular-nums; font-weight: 700; } /* ─── FOOTER ─── */ .mc-footer { margin-top: 28px; padding: 12px 14px; border-top: 1px solid var(--border); font-size: 0.66rem; color: var(--text-hint); text-align: center; } @media (prefers-reduced-motion: reduce) { .mc-kpi-meter-fill, .mc-funnel-bar-fill, .mc-canal-bar-fill { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════ MOBILE / RESPONSIVIDADE PROFUNDA — v49 (2026-05-17) TODAS as regras abaixo vivem DENTRO de @media (max-width:…). Desktop (≥1025px) NÃO é afetado por construção: nenhuma regra fora de media query, nenhuma alteração de regra desktop existente. Auditado por 3 agentes (shell/nav, conteúdo gerado, hero/charts/tipografia). ═══════════════════════════════════════════════════════════════════════ */ /* ── ≤1024px: era do drawer — touch, safe-area, tap-delay ────────────── */ @media (max-width: 1024px) { /* Hamburger: alvo de toque ≥44×44 (era 40×40) */ .topbar-burger { width: 44px; height: 44px; } /* Mata o atraso de 300ms no toque */ button, a, select, input, .tab-btn, .btn, .funnel-group-btn { touch-action: manipulation; } /* Safe-area iPhone (notch / Dynamic Island / home indicator) */ .app-topbar { padding-top: calc(10px + env(safe-area-inset-top)); } .app-sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* Espaçamento entre botões do rodapé da sidebar ≥8px */ .sidebar-footer { gap: 8px; } } /* ── ≤768px: alvos de toque + fim do auto-zoom iOS em inputs ─────────── */ @media (max-width: 768px) { /* iOS Safari faz zoom forçado quando input/select tem fonte <16px. Login é a 1ª tela — isto resolve o zoom preso definitivamente. */ .input-wrapper input, .store-sort-select, select, input, textarea { font-size: 16px; } /* Alvos de toque ≥44px em controles gerados */ .funnel-group-btn { padding: 10px 16px; min-height: 44px; } .store-sort-select { min-height: 44px; padding: 8px 10px; } .history-table thead th.sortable { padding-top: 12px; padding-bottom: 12px; } } /* ── ≤560px: o grosso — grids inline que furam o layout no celular ──── */ @media (max-width: 560px) { /* KPI bands: o app-v2.js injeta style="grid-template-columns:repeat(N,1fr)" inline que vence a media query existente por especificidade. O seletor de atributo + !important é a única forma sem editar 6 call-sites. */ .ci-kpis[style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; } .ci-kpi-value { font-size: 1.35rem !important; } .ci-kpi-label { font-size: 0.7rem !important; } /* Grids de 3 colunas (tiers EFICIENTES/NORMAIS/INEFICIENTES, resumo de performance, comparativo) → 1 coluna no celular */ .ci-grid[style*="grid-template-columns"], [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"], [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:repeat(3, 1fr)"] { grid-template-columns: 1fr !important; } /* Barras de evolução das parciais: quebra em 2 por linha (era flex:1 numa única linha → texto R$ recortava) */ .roi-evo-bars { flex-wrap: wrap !important; } .roi-evo-bars > div { flex: 1 1 calc(50% - 6px) !important; } /* Tabela byCategory "Modelos disparados" e latest-card: scroll-x próprio em vez de furar a página */ .lca-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .lca-scroll .lca-table { min-width: 380px; } /* Tabela ROI (12 colunas) → mantém 7 essenciais + Loja fixa (sticky). Ordem das colunas: 1 Regional · 2 Loja · 3 Disparos · 4 Custo WA · 5 Ads · 6 B1 · 7 B2 · 8 CTR · 9 Meta · 10 Vendas · 11 Ating · 12 ROI. Esconde 1,4,5,7,9 (thead+tbody+tfoot alinhados por posição). */ #roi-table th:nth-child(1), #roi-table td:nth-child(1), #roi-table th:nth-child(4), #roi-table td:nth-child(4), #roi-table th:nth-child(5), #roi-table td:nth-child(5), #roi-table th:nth-child(7), #roi-table td:nth-child(7), #roi-table th:nth-child(9), #roi-table td:nth-child(9) { display: none; } #roi-table th:nth-child(2), #roi-table td:nth-child(2) { position: sticky; left: 0; z-index: 1; background: var(--bg-secondary, var(--bg-card, #15161a)); } #roi-table th, #roi-table td { padding: 6px 6px; font-size: 0.68rem; } /* Cabeçalho do card ROI (título + seletor de ordenação) empilha no celular para o select ganhar largura/altura de toque */ .dash-card-header:has(.store-sort-select) { flex-direction: column; align-items: stretch; gap: 8px; } .dash-card-header:has(.store-sort-select) .store-sort-select { width: 100%; } /* Gráficos Chart.js: já são responsive+maintainAspectRatio:false; só reduz a altura do container no celular (cosmético, sem quebrar) */ .mc-chart-wrap { height: 240px; } .mc-chart-wrap-wide { height: 280px; } .timeline-chart-container { height: 220px; } } /* ── ≤480px: legibilidade — neutraliza o encolhimento do root + hero ── */ @media (max-width: 480px) { /* styles.css:2168 reduz o root para 13px no celular, deixando textos sub-legíveis. Volta para 14px (= base desktop; sem reescalar p/ 16px para não cascatear overflow nos grids). Esta regra vem DEPOIS da :2168 no arquivo → vence por ordem. */ html { font-size: 14px; } /* Hero "Ação de Hoje": número grande + chips empilham e escalam */ .ta-headline { flex-direction: column; align-items: flex-start; gap: 4px; } .ta-big { font-size: 2rem; } .ta-name { font-size: 1.05rem; } .ta-chip { font-size: 0.78rem; padding: 7px 10px; } } /* ── ≤400px: telas muito estreitas — ondas em 1 coluna ──────────────── */ @media (max-width: 400px) { .ta-waves-grid { grid-template-columns: 1fr; } } /* ═══════════ FIM bloco mobile v49 ═══════════ */ /* ═══════════ REDESIGN v50 — tokens de ação + componentes (append-only) ═══════════ Desktop intacto: nada acima é alterado; tudo abaixo é classe nova usada só pelas telas novas. Verde semântico (#00e676) preservado. */ :root{ --screen-portfolio:#94a3b8; --screen-pulse:#00e676; --screen-roi:#c084fc; --screen-closing:#22d3ee; --screen-media:#f59e0b; } .rd-actbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:13px 30px;background:rgba(10,11,13,.92);border-bottom:1px solid var(--border);backdrop-filter:blur(6px)} .rd-actbar .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:700} .rd-actsel{display:flex;align-items:center;gap:9px;background:var(--bg-elevated);border:1px solid var(--border-medium,#2b2f36);border-radius:10px;padding:8px 13px;cursor:pointer;font-weight:700;font-size:13.5px} .rd-cpl{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid} .rd-cpl.full{color:#00e676;border-color:#1d5e3a;background:rgba(0,230,118,.08)} .rd-cpl.part{color:#f59e0b;border-color:#5e4a1d;background:rgba(245,158,11,.08)} .rd-cpl.thin{color:var(--text-muted);border-color:var(--border-medium,#2b2f36);background:var(--bg-elevated)} .rd-intent{color:var(--text-secondary);font-size:12.5px;margin:6px 0 20px;padding-left:13px;border-left:3px solid var(--rd-ac)} .rd-lead{border-left:3px solid var(--rd-ac)} .rd-pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .rd-pcard{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--rd-cc);border-radius:12px;padding:16px;cursor:pointer} .rd-pcard:hover{border-color:var(--border-medium,#2b2f36);background:var(--bg-card-hover)} .rd-pf-row{display:flex;align-items:center;gap:12px;margin-bottom:9px} .rd-pf-row .pt{display:block;flex:1;height:24px;background:var(--bg-elevated);border-radius:5px;overflow:hidden} .rd-pf-row .pf{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#0c7a45,#00e676)} .rd-pf-row.ecom .pf{background:linear-gradient(90deg,#5b3a9e,#c084fc)} .rd-deg{display:flex;align-items:flex-start;gap:10px;background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.4);border-radius:10px;padding:12px 15px;font-size:12.5px;color:#f3d49a;margin-bottom:16px} .rd-deg b{color:#ffe2ad} @media (max-width:560px){.rd-pcards{grid-template-columns:1fr}.rd-actbar{padding-left:16px;padding-right:16px;flex-wrap:wrap;gap:8px}} /* ═══════════ FIM redesign v50 ═══════════ */ /* ═══════════ MOBILE v50.1 — revisão profunda (append-only, ≥1025px byte-idêntico: toda regra abaixo vive dentro de @media max-width). 3 agentes auditaram. ═══════════ */ /* P0 — a barra de topo (hamburger) deve ficar ACIMA da .rd-actbar sticky no mobile, senão o drawer fica inacessível nas telas novas (Portfólio/Pulso). */ @media (max-width:1024px){ .app-topbar{position:sticky;top:0;z-index:60} .rd-actbar{z-index:30;top:0} .app-sidebar.open{z-index:70} .sidebar-scrim.visible{z-index:65} } @media (max-width:768px){ #rd-portfolio-area > div[style*="padding:24px 30px"], #rd-pulse-area > div[style*="padding:24px 30px"]{padding-left:16px!important;padding-right:16px!important;padding-bottom:40px!important} .rd-actbar{padding-left:16px!important;padding-right:16px!important} .rd-actsel{min-height:44px;padding:10px 14px;font-size:14px} } @media (max-width:560px){ #rd-portfolio-area,#rd-pulse-area{overflow-x:hidden} .rd-actbar{flex-wrap:wrap;gap:8px 10px} .rd-actbar span[style*="margin-left:auto"]{display:none} .rd-actsel{width:100%;justify-content:space-between;box-sizing:border-box} /* Portfólio — libera as colunas fixas 210/150px da barra "vendas por ação" */ .rd-pf-row{flex-wrap:wrap;gap:4px 10px} .rd-pf-row > span:first-child{width:100%!important;flex:1 1 100%} .rd-pf-row .pt{flex:1 1 auto;min-width:0;order:3} .rd-pf-row > span:last-child{width:auto!important;margin-left:auto;text-align:right!important} .rd-pcard > div[style*="gap:14px"]{flex-wrap:wrap;gap:10px 18px} /* Pulso — grade 1fr/1.15fr -> 1 coluna; herói SVG sem min-width travando */ #rd-pulse-area [style*="grid-template-columns:1fr 1.15fr"]{grid-template-columns:1fr!important} #rd-pulse-area [style*="min-width:330px"]{min-width:0!important;flex:1 1 100%!important} #rd-pulse-area [style*="gap:30px"]{gap:18px!important} #rd-pulse-area [style*="font-size:44px"]{font-size:32px!important} #rd-pulse-area [style*="min-width:64px"]{min-width:44px!important} #rd-pulse-area svg text{font-size:13px} } /* ═══════════ FIM MOBILE v50.1 ═══════════ */ /* ═══════════ v55 — dropdown de seleção de ação (classes novas; corrige o seletor que só ciclava e re-renderizava o Portfólio oculto) ═══════════ */ .rd-actsel{position:relative} .rd-actsel .rd-dd{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:300px;max-width:380px;max-height:62vh;overflow:auto;background:var(--bg-elevated);border:1px solid var(--border-medium,#2b2f36);border-radius:10px;padding:6px;z-index:80;box-shadow:0 16px 44px rgba(0,0,0,.55)} .rd-actsel.open .rd-dd{display:block} .rd-actsel.open{outline:1px solid var(--border-medium,#2b2f36)} .rd-dd-i{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:12.5px;white-space:nowrap} .rd-dd-i:hover{background:var(--bg-card-hover)} .rd-dd-i.sel{background:rgba(255,255,255,.05)} .rd-dd-i .ddn{font-weight:600} .rd-dd-i .ddp{font-size:10.5px;color:var(--text-muted);margin-right:auto} @media (max-width:560px){ .rd-actsel .rd-dd{left:0;right:0;min-width:0;max-width:none} .rd-dd-i{white-space:normal} .rd-dd-i .ddp{margin-right:0;width:100%;order:3} } /* ═══════════ FIM v55 dropdown ═══════════ */ /* ═══════════ v56.1 — logo Grupo HRZ: o asset é preto+Z dourado em fundo transparente (feito p/ fundo claro). No dashboard escuro some. Solução fiel à marca: placa clara atrás (preserva 100% as cores, sem inverter). */ .brand-img{display:block;width:auto;max-width:100%;object-fit:contain; background:#ffffff;border-radius:9px;box-sizing:border-box} .brand-img-lg{height:78px;padding:9px 16px;margin:0 auto} /* login */ .brand-img-side{height:42px;padding:6px 10px;flex-shrink:0} /* sidebar */ .brand-img-top{height:32px;padding:4px 8px} /* topbar mobile */ @media (max-width:560px){ .brand-img-lg{height:64px;padding:8px 12px} } /* ═══════════ FIM v56.1 logo ═══════════ */ /* ═══════════ D1 — Dashboard sub-tabs ═══════════ */ .dashboard-tabs{ display:flex;gap:8px;margin:16px 0 20px; border-bottom:1px solid rgba(255,255,255,0.08); position:sticky;top:0;z-index:30;background:var(--bg-page,#0d1117); padding-top:4px; } .dash-tab-btn{ padding:10px 16px;background:transparent;border:0; color:var(--text-secondary);cursor:pointer; font-weight:500;font-size:14px; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease; font-family:inherit; } .dash-tab-btn:hover{ color:var(--text-primary); } .dash-tab-btn.active{ color:var(--color-positive,#00e676); border-bottom-color:var(--color-positive,#00e676); font-weight:600; } .dash-tab-btn:focus-visible{ outline:2px solid var(--color-positive,#00e676); outline-offset:2px; border-radius:4px; } .dash-tab-content.hidden{ display:none; } @media (max-width:560px){ .dashboard-tabs{ gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .dash-tab-btn{ padding:10px 12px; font-size:13px; white-space:nowrap; } } /* Filtros da aba Tags & Lojas */ .dash-tags-controls{ display:flex;gap:10px;align-items:center;margin:0 0 16px;flex-wrap:wrap; } .dash-tags-search{ flex:1;min-width:220px;padding:9px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px;color:var(--text-primary); font-size:13px;font-family:inherit; } .dash-tags-search:focus{ outline:none;border-color:var(--color-positive,#00e676); background:rgba(255,255,255,0.06); } .dash-tags-channel-filter{ padding:9px 12px;background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px;color:var(--text-primary); font-size:13px;font-family:inherit;cursor:pointer;min-width:170px; } /* Paginação simples para tabelas longas */ .dash-pagination{ display:flex;align-items:center;justify-content:center;gap:6px; margin:12px 0 4px;padding:8px 0; } .dash-pagination button{ min-width:32px;height:32px;padding:0 10px; background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08); border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:12px; font-family:inherit; } .dash-pagination button:hover:not(:disabled){ background:rgba(255,255,255,0.08);color:var(--text-primary); } .dash-pagination button.active{ background:var(--color-positive-bg,rgba(0,230,118,0.1)); color:var(--color-positive,#00e676); border-color:var(--color-positive-border,rgba(0,230,118,0.3)); } .dash-pagination button:disabled{ opacity:.35;cursor:not-allowed; } .dash-pagination .dash-page-info{ font-size:12px;color:var(--text-muted);margin:0 8px; font-variant-numeric:tabular-nums; } /* ═══════════ D5 — Sparkline + Delta inline (no estilo dos KPIs) ═══════════ */ .kpi-spark{ vertical-align:middle;margin-left:8px;opacity:.7; } .kpi-delta{ font-size:.72em;font-weight:600;display:inline-flex;align-items:center;gap:2px; margin-left:8px;font-variant-numeric:tabular-nums; } .kpi-delta--up{ color:var(--color-positive,#00e676); } .kpi-delta--down{ color:var(--color-critical,#ff5252); } .kpi-delta--neutral{ color:var(--color-neutral,#9e9e9e); } /* ═══════════ FIM D1+D5 ═══════════ */ /* === Stores chart H (refator 2026-05-28: vertical → horizontal) === */ .stores-chart-h{display:flex;flex-direction:column;gap:6px;padding:8px 0} .stores-chart-x-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--text-secondary,#999);padding-left:168px;margin-bottom:8px;border-bottom:1px dashed rgba(255,255,255,0.08);padding-bottom:4px;font-variant-numeric:tabular-nums} .stores-chart-bars{display:flex;flex-direction:column;gap:4px} .stores-chart-row{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:8px;font-size:12px;padding:2px 4px;border-radius:4px;transition:background 0.15s var(--ease)} .stores-chart-row:hover{background:rgba(255,255,255,0.04)} .stores-chart-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary,#fff);font-weight:400;cursor:help} .stores-chart-track{position:relative;height:22px;background:rgba(255,255,255,0.04);border-radius:4px;overflow:hidden} .stores-chart-fill{height:100%;border-radius:4px;transition:width 0.5s var(--ease)} .stores-chart-row:hover .stores-chart-fill{filter:brightness(1.15);box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset} .stores-chart-value{position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--text-primary,#fff);font-weight:600;font-size:11px;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,0.6);pointer-events:none} .stores-chart-row--outras{opacity:0.7;font-style:italic} .stores-chart-row--outras .stores-chart-fill{background:repeating-linear-gradient(45deg,var(--color-neutral) 0 4px,rgba(158,158,158,0.6) 4px 8px)!important} .stores-chart-toggle{margin-top:10px;align-self:flex-start;padding:6px 12px;background:rgba(255,255,255,0.06);border:0;color:var(--text-primary,#fff);border-radius:4px;cursor:pointer;font-size:11px;font-weight:500;transition:background 0.15s var(--ease)} .stores-chart-toggle:hover{background:rgba(255,255,255,0.12)} .stores-chart-toggle:focus-visible{outline:2px solid var(--color-positive);outline-offset:2px} /* ─── D2: Global filters bar (2026-05-28) ─────────────────── */ .global-filters{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 16px;background:var(--bg-secondary,#1a1a1a);border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:12px} .gf-group{display:flex;align-items:center;gap:8px} .gf-label{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.04em} .gf-pills{display:flex;gap:4px} .gf-pill{padding:5px 12px;border:0;background:rgba(255,255,255,0.04);color:var(--text-secondary);border-radius:14px;font-size:12px;cursor:pointer;transition:background .15s var(--ease,ease),color .15s var(--ease,ease)} .gf-pill:hover{background:rgba(255,255,255,0.08);color:var(--text-primary)} .gf-pill.active{background:var(--color-positive,#00e676);color:#000;font-weight:600} .gf-pill:focus-visible{outline:2px solid var(--color-positive,#00e676);outline-offset:2px} .gf-reset{padding:5px 12px;border:1px solid rgba(255,255,255,0.1);background:transparent;color:var(--text-secondary);border-radius:14px;font-size:11px;cursor:pointer;margin-left:auto;transition:color .15s var(--ease,ease),border-color .15s var(--ease,ease)} .gf-reset:hover{color:var(--color-warning,#ffb74d);border-color:var(--color-warning,#ffb74d)} .gf-reset:focus-visible{outline:2px solid var(--color-warning,#ffb74d);outline-offset:2px} @media (max-width:768px){ .global-filters{flex-direction:column;align-items:stretch;gap:10px} .gf-group{justify-content:space-between;flex-wrap:wrap} .gf-reset{margin-left:0;align-self:flex-end} } /* ─── D3: Executive Mode toggle (2026-05-28) ─────────────────── */ .exec-toggle{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:16px;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:background .15s var(--ease,ease),color .15s var(--ease,ease),border-color .15s var(--ease,ease)} .exec-toggle:hover{background:rgba(255,255,255,0.08);color:var(--text-primary)} .exec-toggle.active{background:var(--color-positive,#00e676);color:#000;border-color:var(--color-positive,#00e676)} .exec-toggle:focus-visible{outline:2px solid var(--color-positive,#00e676);outline-offset:2px} .exec-toggle-icon{font-size:14px;line-height:1} .exec-toggle-label{white-space:nowrap} /* Em modo executivo: esconder elementos densos / detalhes */ body.exec-mode .dash-tab-content[data-dash-content="tags"], body.exec-mode .dash-tab-content[data-dash-content="funil"], body.exec-mode .dash-tab-content[data-dash-content="disparos"], body.exec-mode .dashboard-tabs, body.exec-mode .ci-grid, body.exec-mode .stores-chart-h, body.exec-mode .workflows-section, body.exec-mode #history-card, body.exec-mode .tag-stats-list, body.exec-mode .latest-dispatches, body.exec-mode .campaigns-section{display:none !important} /* KPIs maiores em modo exec */ body.exec-mode .ci-kpi-value{font-size:2.4rem !important} body.exec-mode .ci-kpi-label{font-size:0.85rem !important} body.exec-mode .ci-kpi{padding:24px !important} /* Insight box / herói maior em modo exec */ body.exec-mode .ta-headline .ta-big{font-size:4.5rem !important} body.exec-mode .ta-big-label{font-size:1rem !important} /* ─── D4: Painel Próximos Passos Sugeridos (2026-05-28) ──────── */ .suggestions-panel{margin-bottom:16px} .suggestions-panel:empty{display:none} .suggestions-details{background:linear-gradient(135deg,rgba(0,230,118,0.04),rgba(255,193,7,0.04));border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:12px 16px} .suggestions-details summary{cursor:pointer;display:flex;align-items:center;gap:8px;list-style:none;font-weight:600;color:var(--text-primary)} .suggestions-details summary::-webkit-details-marker{display:none} .suggestions-details summary::marker{display:none;content:''} .suggestions-title{flex:1;font-size:14px} .suggestions-count{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;min-width:24px;text-align:center} .suggestions-count--critical{background:var(--color-critical,#ff5252);color:#fff} .suggestions-count--warning{background:var(--color-warning,#ffb74d);color:#000} .suggestions-count--positive{background:var(--color-positive,#00e676);color:#000} .suggestions-list{margin-top:12px;display:flex;flex-direction:column;gap:8px} .suggestion-card{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:10px 12px;background:rgba(255,255,255,0.02);border-radius:6px;border-left:3px solid var(--color-neutral,#9e9e9e)} .suggestion-card--critical{border-left-color:var(--color-critical,#ff5252)} .suggestion-card--warning{border-left-color:var(--color-warning,#ffb74d)} .suggestion-card--positive{border-left-color:var(--color-positive,#00e676)} .suggestion-icon{font-size:18px;line-height:1} .suggestion-body strong{display:block;font-size:13px;color:var(--text-primary)} .suggestion-body p{margin:4px 0 0;font-size:12px;color:var(--text-secondary);line-height:1.4} .suggestion-action{padding:5px 10px;background:rgba(255,255,255,0.06);border:0;color:var(--text-primary);border-radius:4px;font-size:11px;cursor:pointer;white-space:nowrap;transition:background .15s var(--ease,ease)} .suggestion-action:hover{background:rgba(255,255,255,0.12)} .suggestion-action:focus-visible{outline:2px solid var(--color-positive,#00e676);outline-offset:2px} .suggestions-empty{color:var(--color-positive,#00e676);padding:8px 4px;font-size:13px} /* Hierarquia ampliada em modo executivo */ body.exec-mode .suggestions-title{font-size:16px} body.exec-mode .suggestion-body strong{font-size:14px} body.exec-mode .suggestion-body p{font-size:13px} @media (max-width:768px){ .suggestion-card{grid-template-columns:24px 1fr;row-gap:6px} .suggestion-action{grid-column:1 / -1;justify-self:start} .exec-toggle-label{display:none} .exec-toggle{padding:6px 10px} }