/* AdvoCRM — Modern SaaS App.
Direção: dark friendly tipo Cakto/Linear/Vercel.
Cards generosos arredondados, sans clean (Plus Jakarta + Geist Mono),
accent emerald vibrante, sombras macias, sensação de produto fintech atual. */
/* ─────────────────────────────────────────────────────────────
TOKENS
───────────────────────────────────────────────────────────── */
:root {
/* ── Theming ──────────────────────────────────────────────────────
Tokens default = tema "emerald-dark". Outros temas sobrescrevem
via [data-theme="..."] no , setado por settings.js.
localStorage key: 'advocrm:theme'
*/
/* Surfaces — dark friendly com matiz suave verde-escura (não cinza-chumbo) */
--bg: #0a0d0c;
--surface-1: #11171a; /* sidebar, cards */
--surface-2: #161d20; /* hover, elevations */
--surface-3: #1d2528; /* inputs, pills internas */
--surface-4: #252e32; /* hover de pills */
--overlay: rgba(10, 13, 12, 0.85);
/* Aliases legados */
--bg-primary: var(--bg);
--bg-secondary: var(--surface-1);
--bg-tertiary: var(--surface-2);
--bg-elevated: var(--surface-3);
--bg-overlay: var(--overlay);
/* Bordas — quase invisíveis (Cakto usa muito sombra ao invés de border) */
--line: rgba(255, 255, 255, 0.04);
--line-2: rgba(255, 255, 255, 0.08);
--line-3: rgba(255, 255, 255, 0.14);
--border: var(--line);
--border-strong:var(--line-2);
/* Texto */
--fg: #ffffff;
--fg-2: #b1b8c2;
--fg-3: #6b7682;
--fg-4: #4a525c;
--text-primary: var(--fg);
--text-secondary: var(--fg-2);
--text-tertiary: var(--fg-3);
--text-disabled: var(--fg-4);
/* ACCENT — verde esmeralda Cakto (do print real) */
--brand: #10b981; /* primário */
--brand-hi: #34d399;
--brand-lo: #059669;
--brand-deep: #047857; /* botão escuro */
--brand-soft: rgba(16, 185, 129, 0.12);
--brand-glow: rgba(16, 185, 129, 0.32);
--brand-dark: #022c1f; /* texto sobre botão verde */
/* Aliases legados (mantém compat com classes existentes) */
--primary: var(--brand);
--primary-hover: var(--brand-hi);
--primary-soft: var(--brand-soft);
--primary-glow: var(--brand-glow);
--accent: var(--brand);
--accent-hover: var(--brand-hi);
--accent-soft: var(--brand-soft);
--accent-glow: var(--brand-glow);
/* Status vibrantes */
--success: var(--brand);
--success-soft: var(--brand-soft);
--info: #4cb3ff;
--info-soft: rgba(76, 179, 255, 0.10);
--warning: #ffb547;
--warning-soft: rgba(255, 181, 71, 0.10);
--danger: #ff5a65;
--danger-soft: rgba(255, 90, 101, 0.10);
--violet: #b48bff;
--violet-soft: rgba(180, 139, 255, 0.10);
--accent-blue: var(--info);
--accent-red: var(--danger);
/* Tipografia — sans clean SaaS */
--font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-display: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
--font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
/* Escala */
--text-xs: 11px;
--text-sm: 12.5px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 17px;
--text-xl: 20px;
--text-2xl: 26px;
--text-3xl: clamp(28px, 3.5vw, 38px);
--text-4xl: clamp(40px, 5vw, 56px);
/* Espaçamento */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
/* Radius generosos (Cakto-style — bem arredondado) */
--r-sm: 10px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-2xl: 28px;
--r-full: 999px;
/* Sombras macias com glow do brand (Cakto-feel) */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6);
--shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.04);
--shadow-glow: 0 0 0 4px var(--brand-soft);
--shadow-glow-strong: 0 8px 32px var(--brand-glow), 0 0 0 1px var(--brand-soft);
--shadow-btn-brand: 0 4px 14px rgba(0, 255, 136, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3);
/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--motion-fast: 120ms;
--motion-base: 180ms;
--motion-slow: 280ms;
}
/* ─────────────────────────────────────────────────────────────
RESET + BASE
───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--fg);
font-size: var(--text-base);
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.011em;
position: relative;
}
a {
color: var(--brand);
text-decoration: none;
transition: color var(--motion-fast) var(--ease-out);
}
a:hover { color: var(--brand-hi); }
a:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 4px;
}
::selection { background: var(--brand-soft); color: var(--fg); }
/* Scrollbar moderna */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
border-radius: var(--r-full);
border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); }
/* ─────────────────────────────────────────────────────────────
TIPOGRAFIA — sans clean com hierarquia
───────────────────────────────────────────────────────────── */
h1, h2, h3 {
font-family: var(--font-display);
letter-spacing: -0.02em;
color: var(--fg);
font-weight: 700;
}
h1 {
font-size: var(--text-3xl);
line-height: 1.1;
margin-bottom: var(--sp-3);
}
h2 {
font-size: var(--text-xl);
line-height: 1.2;
margin-bottom: var(--sp-2);
font-weight: 600;
}
h3 {
font-size: var(--text-lg);
line-height: 1.3;
font-weight: 600;
}
.font-display { font-family: var(--font-display); }
.font-mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-feature-settings: 'ss01';
}
p {
color: var(--fg-2);
font-size: var(--text-base);
margin-bottom: var(--sp-4);
line-height: 1.6;
}
/* ─────────────────────────────────────────────────────────────
AUTH / CARDS centralizados
───────────────────────────────────────────────────────────── */
.center-screen {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-6);
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 213, 99, 0.06), transparent 60%),
radial-gradient(ellipse 40% 30% at 50% 100%, rgba(76, 179, 255, 0.04), transparent 60%),
var(--bg);
}
.card {
max-width: 460px;
width: 100%;
background: var(--surface-1);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
padding: var(--sp-10) var(--sp-8);
box-shadow: var(--shadow-lg);
}
.card-fluid { max-width: none; padding: 0; box-shadow: none; background: transparent; border: 0; }
.logo {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: var(--sp-2);
color: var(--fg);
}
.logo .dot {
width: 10px;
height: 10px;
background: var(--brand);
border-radius: 50%;
box-shadow: 0 0 0 4px var(--brand-soft), 0 0 18px var(--brand);
display: inline-block;
}
.tagline {
color: var(--fg-3);
font-size: var(--text-sm);
margin-bottom: var(--sp-8);
font-weight: 500;
}
/* ─────────────────────────────────────────────────────────────
FORMS — pills modernas com border ao redor
───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-4); }
.form-label {
display: block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--fg-2);
margin-bottom: var(--sp-2);
letter-spacing: -0.005em;
}
.form-input,
input:where([type="text"], [type="email"], [type="number"], [type="date"], [type="month"], [type="password"], [type="search"], [type="tel"], [type="url"]),
select,
textarea {
width: 100%;
padding: 12px 16px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r-md);
color: var(--fg);
font-size: var(--text-base);
font-family: var(--font);
line-height: 1.4;
transition: border-color var(--motion-fast) var(--ease-out),
background var(--motion-fast) var(--ease-out),
box-shadow var(--motion-fast) var(--ease-out);
}
.form-input::placeholder { color: var(--fg-4); }
.form-input:hover { border-color: var(--line-2); background: var(--surface-3); }
.form-input:focus {
outline: none;
border-color: var(--brand);
background: var(--surface-1);
box-shadow: var(--shadow-glow);
}
.form-input:disabled { opacity: 0.5; cursor: not-allowed; }
/* Ícone do date picker nativo — força branco (default é cinza/preto, some no dark theme).
Suporta Chrome/Edge/Safari (webkit). Firefox não tem esse pseudo, mostra outro UI.
color-scheme: dark faz o calendário popup também vir em dark. */
input[type="date"],
input[type="month"],
input[type="datetime-local"],
input[type="time"] {
color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(1) brightness(1.2);
opacity: 0.7;
cursor: pointer;
transition: opacity var(--motion-fast);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
select.form-input, select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 11px;
padding-right: 36px;
cursor: pointer;
}
textarea.form-input, textarea {
resize: vertical;
min-height: 90px;
line-height: 1.55;
}
.form-help { font-size: var(--text-xs); color: var(--fg-3); margin-top: var(--sp-1); }
input[type="checkbox"] {
accent-color: var(--brand);
width: 16px; height: 16px;
cursor: pointer;
vertical-align: middle;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: var(--surface-3);
border-radius: var(--r-full);
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--brand);
cursor: pointer;
border: 0;
box-shadow: 0 0 0 0 var(--brand-soft);
transition: box-shadow var(--motion-fast);
}
input[type="range"]::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 6px var(--brand-soft);
}
/* ─────────────────────────────────────────────────────────────
BUTTONS — sólidos, com lift suave
───────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 12px 24px;
background: var(--brand);
color: #fff;
border: 0;
border-radius: 10px;
font-size: var(--text-base);
font-weight: 600;
font-family: var(--font);
letter-spacing: -0.005em;
cursor: pointer;
transition: background var(--motion-fast) var(--ease-out),
transform var(--motion-fast) var(--ease-out),
box-shadow var(--motion-fast) var(--ease-out);
white-space: nowrap;
user-select: none;
position: relative;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn:hover:not(:disabled) {
background: var(--brand-lo);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
transform: translateY(-1px);
}
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:focus-visible {
outline: none;
box-shadow: var(--shadow-glow), var(--shadow-btn-brand);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-block { width: 100%; }
.btn-secondary {
background: var(--surface-3);
color: var(--fg);
border: 0;
box-shadow: none;
}
.btn-secondary:hover:not(:disabled) {
background: var(--surface-4);
border: 0;
box-shadow: none;
color: var(--fg);
transform: none;
}
.btn-ghost {
background: transparent;
color: var(--fg-2);
border: 0;
box-shadow: none;
}
.btn-ghost:hover:not(:disabled) {
background: var(--surface-2);
color: var(--fg);
box-shadow: none;
transform: none;
}
.btn-danger {
background: var(--danger);
color: #21080a;
box-shadow: 0 4px 14px rgba(255, 90, 101, 0.25), 0 1px 2px rgba(0,0,0,0.3);
}
.btn-danger:hover:not(:disabled) {
background: #ff7780;
box-shadow: 0 6px 24px rgba(255, 90, 101, 0.4);
}
/* ─────────────────────────────────────────────────────────────
CLERK widgets
───────────────────────────────────────────────────────────── */
.cl-rootBox, .cl-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
width: 100% !important;
max-width: 100% !important;
}
.cl-formButtonPrimary, .cl-internal-1ta0xpz {
background: var(--brand) !important;
color: #00210d !important;
border: 0 !important;
font-family: var(--font) !important;
font-weight: 600 !important;
}
.cl-formFieldInput {
background: var(--surface-2) !important;
border: 1px solid var(--line-2) !important;
color: var(--fg) !important;
font-family: var(--font) !important;
}
/* ─────────────────────────────────────────────────────────────
APP SHELL — sidebar dark + main content
───────────────────────────────────────────────────────────── */
.app-shell {
display: grid;
grid-template-columns: 256px 1fr;
min-height: 100vh;
background: var(--bg);
background-image:
radial-gradient(ellipse 60% 40% at 100% 0%, rgba(0, 255, 136, 0.04), transparent 70%);
}
.sidebar {
background: var(--surface-1);
border-right: 1px solid var(--line);
padding: var(--sp-6) var(--sp-4);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.main-content {
padding: var(--sp-8) var(--sp-10);
overflow-y: auto;
max-width: 100%;
min-width: 0;
}
/* Nav items — pílulas Cakto-style: bem arredondados, ícone destacado */
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 11px 14px;
border-radius: var(--r-md);
color: var(--fg-2);
font-size: var(--text-base);
font-weight: 500;
font-family: var(--font);
cursor: pointer;
transition: all var(--motion-fast) var(--ease-out);
letter-spacing: -0.005em;
}
.nav-item:hover {
background: var(--surface-2);
color: var(--fg);
}
.nav-item.active {
background: var(--brand-soft);
color: var(--brand);
font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(0, 255, 136, 0.15);
}
.nav-item.active > span:first-child {
opacity: 1;
transform: scale(1.05);
}
/* Item de menu desabilitado/em breve — visual atenuado, badge no canto.
Continua clicável (mostra tela "Em breve"), só sinaliza visualmente. */
.nav-item-disabled .nav-icon,
.nav-item-disabled > span:not(.nav-soon-badge) {
opacity: 0.55;
}
.nav-soon-badge {
margin-left: auto;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: var(--r-full);
background: rgba(255, 181, 71, 0.12);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.28);
line-height: 1;
white-space: nowrap;
}
/* Tela "Em breve" — usada quando uma rota está temporariamente desabilitada. */
.coming-soon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px;
min-height: 60vh;
}
.coming-soon-icon {
width: 88px; height: 88px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--brand-soft);
color: var(--brand);
margin-bottom: 20px;
border: 1px solid rgba(0, 255, 136, 0.18);
}
.coming-soon-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--r-full);
background: rgba(245, 158, 11, 0.14);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.32);
margin-bottom: 14px;
}
.coming-soon h1 {
font-size: 28px;
margin: 0 0 10px;
letter-spacing: -0.02em;
}
.coming-soon p {
max-width: 520px;
color: var(--fg-2);
line-height: 1.55;
font-size: 15px;
margin: 0;
}
.nav-item > span:first-child {
font-size: 17px;
width: 22px;
text-align: center;
opacity: 0.85;
transition: transform var(--motion-fast);
}
/* Ícones SVG do sidebar — Lucide-style, currentColor, opacidade sutil que vira 100% no active */
.nav-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
opacity: 0.72;
transition: opacity var(--motion-fast) var(--ease-out),
transform var(--motion-fast) var(--ease-out);
stroke: currentColor;
}
.nav-item:hover .nav-icon { opacity: 1; }
.nav-item.active .nav-icon {
opacity: 1;
transform: scale(1.04);
}
/* Sidebar footer — card flutuante com plano destacado */
.sidebar-footer {
border-top: 0;
background: var(--surface-2);
padding: var(--sp-4);
margin-top: var(--sp-5);
border-radius: var(--r-lg);
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-org {
font-family: var(--font);
font-size: var(--text-base);
color: var(--fg);
font-weight: 600;
padding: 0;
margin-bottom: 4px;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 8px;
}
.sidebar-org::before {
content: '';
width: 32px;
height: 32px;
border-radius: var(--r-md);
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-lo) 100%);
flex-shrink: 0;
box-shadow: 0 4px 12px var(--brand-glow);
}
/* ───────── Badge de plano (sidebar) ─────────
Renderizado por renderPlanBadge() em tenant.html.
Variantes por plano via classe modificadora (.plan-active, .plan-admin, etc).
Cor é controlada por --p-color e --p-soft locais — todo .sidebar-plan-* puxa
delas, então adicionar variante nova = só setar essas 2 vars.
*/
.sidebar-plan {
--p-color: var(--brand);
--p-soft: var(--brand-soft);
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--p-color);
background: var(--p-soft);
padding: 4px 10px 4px 8px;
border-radius: var(--r-full);
letter-spacing: 0.02em;
font-weight: 700;
margin: 4px 0 var(--sp-2) 40px;
align-self: flex-start;
border: 1px solid color-mix(in srgb, var(--p-color) 30%, transparent);
transition: transform .15s, box-shadow .15s;
}
.sidebar-plan:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px color-mix(in srgb, var(--p-color) 35%, transparent);
}
.sidebar-plan-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--p-color);
box-shadow: 0 0 8px color-mix(in srgb, var(--p-color) 55%, transparent);
flex-shrink: 0;
}
.sidebar-plan-label { line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; }
/* ── Variantes por status do plano ── */
.sidebar-plan.plan-active { --p-color: #10b981; --p-soft: rgba(16,185,129,0.12); }
.sidebar-plan.plan-trial { --p-color: #38bdf8; --p-soft: rgba(56,189,248,0.12); }
.sidebar-plan.plan-gift { --p-color: #a78bfa; --p-soft: rgba(167,139,250,0.14); }
.sidebar-plan.plan-admin { --p-color: #c084fc; --p-soft: rgba(192,132,252,0.14); }
.sidebar-plan.plan-warn { --p-color: #f59e0b; --p-soft: rgba(245,158,11,0.14); }
.sidebar-plan.plan-danger { --p-color: #ef4444; --p-soft: rgba(239,68,68,0.14); }
.sidebar-plan.plan-muted { --p-color: var(--fg-3); --p-soft: var(--bg-3); }
.sidebar-email {
font-size: var(--text-xs);
color: var(--fg-3);
padding: 0 0 0 40px;
margin-bottom: var(--sp-3);
word-break: break-all;
}
/* Empty state */
.empty-state {
text-align: center;
padding: var(--sp-16) var(--sp-6);
color: var(--fg-3);
}
.empty-state .empty-icon {
font-size: 48px;
margin-bottom: var(--sp-4);
opacity: 0.4;
}
/* ─────────────────────────────────────────────────────────────
UTILS
───────────────────────────────────────────────────────────── */
.muted { color: var(--fg-3); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.page { animation: fadeSlideUp 0.4s var(--ease-out) both; }
.dash-cards > * { animation: fadeSlideUp 0.4s var(--ease-out) both; }
.dash-cards > *:nth-child(1) { animation-delay: 0.04s; }
.dash-cards > *:nth-child(2) { animation-delay: 0.08s; }
.dash-cards > *:nth-child(3) { animation-delay: 0.12s; }
.dash-cards > *:nth-child(4) { animation-delay: 0.16s; }
.dash-cards > *:nth-child(5) { animation-delay: 0.20s; }
.dash-cards > *:nth-child(6) { animation-delay: 0.24s; }
/* ─────────────────────────────────────────────────────────────
LEADS table — bordas internas suaves, rows pill-like
───────────────────────────────────────────────────────────── */
.leads-filters {
display: flex;
gap: var(--sp-3);
flex-wrap: wrap;
}
.leads-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-base);
}
.leads-table thead th {
text-align: left;
padding: var(--sp-3) var(--sp-4);
font-size: var(--text-xs);
font-weight: 600;
color: var(--fg-3);
border-bottom: 1px solid var(--line);
background: transparent;
letter-spacing: -0.005em;
}
.leads-table tbody tr {
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background var(--motion-fast) var(--ease-out);
}
.leads-table tbody tr:hover { background: var(--surface-1); }
.leads-table tbody tr:last-child { border-bottom: none; }
.leads-table td {
padding: var(--sp-4);
vertical-align: middle;
font-size: var(--text-base);
}
.leads-table td .name { font-weight: 600; color: var(--fg); }
.leads-table td .contact { color: var(--fg-3); font-size: var(--text-sm); font-family: var(--font-mono); }
/* ─────────────────────────────────────────────────────────────
BADGES — pills coloridas modernas
───────────────────────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--r-full);
font-size: 11px;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.4;
}
.badge-novo { background: var(--info-soft); color: var(--info); }
.badge-em_contato { background: var(--warning-soft); color: var(--warning); }
.badge-qualificado { background: var(--violet-soft); color: var(--violet); }
.badge-cliente { background: var(--brand-soft); color: var(--brand-hi); }
.badge-perdido { background: var(--danger-soft); color: var(--danger); }
.badge-manual { background: var(--surface-3); color: var(--fg-3); }
.badge-facebook { background: var(--info-soft); color: var(--info); }
.badge-google { background: var(--danger-soft); color: var(--danger); }
.badge-whatsapp { background: var(--brand-soft); color: var(--brand-hi); }
.badge-indicacao { background: var(--violet-soft); color: var(--violet); }
.badge-outro { background: var(--surface-3); color: var(--fg-3); }
/* Tese: pill neutro com tom levemente brand */
.badge-tese {
background: var(--brand-soft);
color: var(--brand-hi);
font-family: var(--font);
letter-spacing: 0;
}
/* ─── Toggle Tabela/Kanban no header da página /leads ─── */
.leads-view-toggle {
display: inline-flex;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 3px;
}
.leads-view-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px;
background: transparent;
border: 0;
border-radius: 7px;
color: var(--fg-3);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: all var(--motion-fast);
font-family: var(--font);
}
.leads-view-btn svg { width: 14px; height: 14px; }
.leads-view-btn:hover { color: var(--fg); }
.leads-view-btn.active {
background: var(--surface-1);
color: var(--brand);
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
/* ─── Kanban de leads ─── */
.leads-kanban {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 1fr);
gap: 12px;
overflow-x: auto;
padding-bottom: 12px;
min-height: 400px;
}
.kanban-col {
background: var(--surface-1);
border: 1px solid var(--line);
border-radius: 14px;
display: flex;
flex-direction: column;
min-height: 200px;
max-height: calc(100vh - 280px);
}
.kanban-col.is-none {
background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 60%);
}
.kanban-col-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 10px;
border-bottom: 1px solid var(--line);
}
.kanban-col-title {
font-family: var(--font-display);
font-size: 13.5px;
font-weight: 700;
color: var(--fg);
letter-spacing: -0.01em;
}
.kanban-col-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 20px;
padding: 0 7px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--line);
font-size: 11px;
font-weight: 600;
color: var(--fg-3);
font-variant-numeric: tabular-nums;
}
.kanban-col-body {
display: flex; flex-direction: column;
gap: 8px;
padding: 12px;
overflow-y: auto;
flex: 1;
}
.kanban-col-more {
text-align: center;
font-size: 11.5px;
color: var(--fg-4);
padding: 8px;
}
.kanban-card {
position: relative;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 11px 12px;
cursor: pointer;
transition: all var(--motion-fast) var(--ease-out);
}
.kanban-card:hover {
border-color: var(--brand);
background: var(--surface-3);
transform: translateY(-1px);
}
/* Decisão da IA: borda lateral colorida (verde/vermelho) +
leve tint no background pra destaque sem poluir. */
.kanban-card.is-qualificado {
border-left: 3px solid var(--brand, #00d97e);
background: linear-gradient(90deg, rgba(0,217,126,0.06) 0%, var(--surface-2) 30%);
}
.kanban-card.is-perdido {
border-left: 3px solid #ef4444;
background: linear-gradient(90deg, rgba(239,68,68,0.05) 0%, var(--surface-2) 30%);
opacity: 0.85;
}
/* Etiqueta no topo direito do card */
.kanban-card-tag {
position: absolute;
top: 8px;
right: 8px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 4px;
line-height: 1.2;
}
.kanban-card-tag.is-qualificado {
background: rgba(0,217,126,0.18);
color: #00d97e;
border: 1px solid rgba(0,217,126,0.32);
}
.kanban-card-tag.is-perdido {
background: rgba(239,68,68,0.15);
color: #fca5a5;
border: 1px solid rgba(239,68,68,0.30);
}
.kanban-card-head {
display: flex; align-items: center; gap: 9px;
margin-bottom: 6px;
}
.kanban-card-avatar {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--brand-soft);
color: var(--brand-hi);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
.kanban-card-name {
font-size: 13px;
font-weight: 600;
color: var(--fg);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kanban-card-meta {
font-size: 11.5px;
color: var(--fg-3);
margin-bottom: 8px;
font-variant-numeric: tabular-nums;
}
.kanban-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* ─────────────────────────────────────────────────────────────
MODAL
───────────────────────────────────────────────────────────── */
.modal-backdrop {
position: fixed; inset: 0;
background: var(--overlay);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-6);
animation: fadeIn 180ms var(--ease-out);
}
.modal {
background: var(--surface-1);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
width: 100%;
max-width: 600px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-xl);
animation: fadeSlideUp 220ms var(--ease-out);
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-5) var(--sp-6);
border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; }
.modal-close {
background: var(--surface-2);
border: 1px solid var(--line-2);
color: var(--fg-2);
font-size: 16px;
width: 32px; height: 32px;
border-radius: var(--r-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--motion-fast);
}
.modal-close:hover { background: var(--surface-3); color: var(--fg); }
.modal-body { padding: var(--sp-6); overflow-y: auto; }
/* ─── Tabs do modal de Lead (Detalhes / Resumo IA) ─── */
.lead-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
margin-top: -4px;
}
.lead-tab {
display: inline-flex;
align-items: center;
gap: 7px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
padding: 10px 14px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--fg-3);
cursor: pointer;
transition: color var(--motion-fast), border-color var(--motion-fast);
}
.lead-tab:hover { color: var(--fg); }
.lead-tab.active {
color: var(--brand);
border-bottom-color: var(--brand);
}
/* ─── Resumo IA — visual estruturado de leitura rápida ─── */
.summary-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 16px;
}
.summary-tldr-wrap { flex: 1; min-width: 0; }
.summary-tldr-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 4px;
}
.summary-tldr {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--fg);
line-height: 1.35;
letter-spacing: -0.01em;
}
.summary-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex-shrink: 0;
}
.summary-viability {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px 9px;
border-radius: 999px;
white-space: nowrap;
}
.summary-viability.is-high { background: rgba(0,217,126,0.15); color: #00d97e; border: 1px solid rgba(0,217,126,0.30); }
.summary-viability.is-medium { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
.summary-viability.is-low { background: rgba(239,68,68,0.12); color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); }
.summary-viability.is-unknown { background: var(--surface-3); color: var(--fg-3); border: 1px solid var(--line); }
.summary-refresh {
font-size: 11px;
padding: 4px 10px;
height: auto;
}
.summary-section {
margin-bottom: 14px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 12px 16px;
}
.summary-section-title {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-3);
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 6px;
}
.summary-list {
margin: 0;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
.summary-list li {
font-size: 13px;
color: var(--fg-2);
line-height: 1.5;
}
.summary-foot {
margin-top: 12px;
text-align: center;
padding: 6px;
}
/* ─────────────────────────────────────────────────────────────
TIMELINE
───────────────────────────────────────────────────────────── */
.timeline { margin-top: var(--sp-4); }
.timeline-item {
display: flex;
gap: var(--sp-4);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--line);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
flex-shrink: 0;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--brand);
margin-top: 8px;
box-shadow: 0 0 0 3px var(--brand-soft);
}
.timeline-content { flex: 1; }
.timeline-when { font-size: var(--text-xs); color: var(--fg-3); font-weight: 500; }
.timeline-text { font-size: var(--text-base); color: var(--fg); margin-top: 2px; }
/* ─────────────────────────────────────────────────────────────
DASHBOARD — KPI cards modernos
───────────────────────────────────────────────────────────── */
.dash-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--sp-4);
}
.card.kpi {
padding: var(--sp-5) var(--sp-6);
max-width: none;
background: var(--surface-1);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
transition: transform var(--motion-base) var(--ease-out),
border-color var(--motion-base) var(--ease-out),
box-shadow var(--motion-base) var(--ease-out);
position: relative;
overflow: hidden;
}
.card.kpi::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.card.kpi:hover {
transform: translateY(-3px);
border-color: rgba(0, 255, 136, 0.15);
box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 255, 136, 0.08);
}
.kpi-label {
font-family: var(--font);
font-size: var(--text-sm);
font-weight: 500;
color: var(--fg-3);
letter-spacing: -0.005em;
display: flex;
align-items: center;
gap: 6px;
}
.kpi-value {
font-family: var(--font-display);
font-size: 30px;
margin-top: var(--sp-3);
line-height: 1;
letter-spacing: -0.03em;
color: var(--fg);
font-weight: 700;
}
.kpi-sub {
font-family: var(--font);
font-size: var(--text-xs);
color: var(--fg-3);
margin-left: var(--sp-2);
font-weight: 500;
padding: 2px 8px;
background: var(--surface-3);
border-radius: var(--r-full);
vertical-align: middle;
}
/* ROI status */
.roi-good { color: var(--brand); }
.roi-good.kpi { border-color: rgba(0, 213, 99, 0.25); }
.roi-good.kpi:hover { box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 213, 99, 0.15); }
.roi-ok { color: var(--warning); }
.roi-ok.kpi { border-color: rgba(255, 181, 71, 0.25); }
.roi-ok.kpi:hover { box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 181, 71, 0.15); }
.roi-bad { color: var(--danger); }
.roi-bad.kpi { border-color: rgba(255, 90, 101, 0.25); }
.roi-bad.kpi:hover { box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 90, 101, 0.15); }
.roi-na { color: var(--fg-3); }
/* ─────────────────────────────────────────────────────────────
INTEGRAÇÕES
───────────────────────────────────────────────────────────── */
.copy-row {
display: flex;
gap: var(--sp-2);
margin-top: var(--sp-2);
}
.copy-row input { flex: 1; }
/* ─────────────────────────────────────────────────────────────
PROCESS DETAIL
───────────────────────────────────────────────────────────── */
.modal.modal-wide { max-width: 920px; }
.pd-header {
display: flex;
justify-content: space-between;
gap: var(--sp-4);
padding-bottom: var(--sp-5);
border-bottom: 1px solid var(--line);
margin-bottom: var(--sp-5);
}
.pd-header-main { flex: 1; min-width: 0; }
.pd-cnj {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--fg-3);
margin-bottom: var(--sp-2);
}
.pd-meta {
display: flex;
gap: var(--sp-2);
align-items: center;
flex-wrap: wrap;
margin-bottom: var(--sp-3);
}
.pd-status {
padding: 3px var(--sp-3);
border-radius: var(--r-full);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pd-status-ativo { background: var(--brand-soft); color: var(--brand-hi); }
.pd-status-suspenso { background: var(--warning-soft); color: var(--warning); }
.pd-status-arquivado { background: var(--surface-3); color: var(--fg-3); }
.pd-status-encerrado { background: var(--danger-soft); color: var(--danger); }
.pd-chip {
padding: 3px var(--sp-3);
border-radius: var(--r-full);
background: var(--surface-2);
font-size: var(--text-sm);
color: var(--fg-2);
border: 1px solid var(--line);
}
.pd-court { font-size: var(--text-base); color: var(--fg-2); margin-top: var(--sp-1); }
.pd-description {
font-size: var(--text-md);
color: var(--fg);
margin-top: var(--sp-3);
line-height: 1.55;
}
.pd-btn-sm { padding: 8px var(--sp-4); font-size: var(--text-sm); }
.pd-datajud {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-3) var(--sp-4);
background: var(--info-soft);
border: 1px solid rgba(76, 179, 255, 0.22);
border-radius: var(--r-md);
margin-bottom: var(--sp-5);
}
.pd-datajud-left { display: flex; align-items: center; gap: var(--sp-3); }
.pd-datajud-dot {
width: 8px; height: 8px; border-radius: 50%;
box-shadow: 0 0 8px currentColor;
}
.pd-datajud-title { font-size: var(--text-base); font-weight: 600; }
.pd-datajud-sub { font-size: var(--text-xs); color: var(--fg-3); margin-top: 2px; }
.pd-datajud-sub.pd-err { color: var(--danger); }
.pd-datajud-actions { display: flex; align-items: center; gap: var(--sp-3); }
.pd-toggle {
display: flex; align-items: center; gap: var(--sp-2);
cursor: pointer; font-size: var(--text-sm);
color: var(--fg-2);
}
.pd-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-5);
margin-bottom: var(--sp-6);
}
@media (max-width: 720px) { .pd-grid-2 { grid-template-columns: 1fr; } }
.pd-section { display: flex; flex-direction: column; }
.pd-section-head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: var(--sp-3);
margin-bottom: var(--sp-3);
border-bottom: 1px solid var(--line);
}
.pd-section-head h3 {
font-family: var(--font);
font-size: var(--text-sm);
font-weight: 600;
color: var(--fg-2);
margin: 0;
letter-spacing: -0.005em;
}
.pd-count {
background: var(--surface-3);
padding: 2px var(--sp-2);
border-radius: var(--r-full);
font-size: var(--text-xs);
color: var(--fg-3);
font-weight: 600;
}
.pd-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.pd-empty {
padding: var(--sp-6) var(--sp-4);
text-align: center;
color: var(--fg-3);
font-size: var(--text-sm);
background: var(--surface-1);
border-radius: var(--r-md);
border: 1px dashed var(--line);
}
.pd-card {
display: grid;
grid-template-columns: 72px 1fr auto;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--surface-1);
border: 1px solid var(--line);
border-radius: var(--r-md);
align-items: center;
transition: all var(--motion-fast) var(--ease-out);
}
.pd-card:hover { border-color: var(--line-2); background: var(--surface-2); }
.pd-card-urgent { background: var(--warning-soft); border-color: rgba(255,181,71,0.3); }
.pd-card-overdue { background: var(--danger-soft); border-color: rgba(255,90,101,0.32); }
.pd-card-warn { background: var(--info-soft); border-color: rgba(76,179,255,0.22); }
.pd-card-past { opacity: 0.5; }
.pd-card-time {
text-align: center;
border-right: 1px solid var(--line);
padding-right: var(--sp-3);
}
.pd-card-date {
font-family: var(--font-display);
font-size: var(--text-lg);
line-height: 1;
color: var(--fg);
font-weight: 700;
letter-spacing: -0.02em;
}
.pd-card-hour {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--fg-2);
margin-top: var(--sp-1);
}
.pd-card-when {
font-size: 10px;
color: var(--fg-3);
margin-top: var(--sp-1);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.pd-card-body { min-width: 0; }
.pd-card-title {
font-weight: 600;
font-size: var(--text-md);
color: var(--fg);
margin-bottom: var(--sp-1);
display: flex;
align-items: center;
gap: var(--sp-2);
letter-spacing: -0.01em;
}
.pd-card-sub { font-size: var(--text-sm); color: var(--fg-2); margin-bottom: var(--sp-1); }
.pd-card-notes {
font-size: var(--text-sm);
color: var(--fg-2);
margin-top: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
background: var(--surface-2);
border-radius: var(--r-sm);
border-left: 2px solid var(--brand);
line-height: 1.5;
}
.pd-status-pill {
display: inline-block;
padding: 2px var(--sp-2);
border-radius: var(--r-full);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: var(--sp-2);
}
.pd-status-agendada { background: var(--info-soft); color: var(--info); }
.pd-status-realizada { background: var(--brand-soft); color: var(--brand-hi); }
.pd-status-cancelada { background: var(--danger-soft); color: var(--danger); }
.pd-status-adiada { background: var(--warning-soft); color: var(--warning); }
.pd-status-pendente { background: var(--info-soft); color: var(--info); }
.pd-status-cumprido { background: var(--brand-soft); color: var(--brand-hi); }
.pd-status-perdido { background: var(--danger-soft); color: var(--danger); }
.pd-auto-tag {
font-size: 9px;
padding: 1px 6px;
border-radius: var(--r-full);
background: var(--info-soft);
color: var(--info);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.pd-del {
background: transparent;
border: 0;
width: 28px; height: 28px;
border-radius: var(--r-sm);
color: var(--fg-3);
font-size: 16px;
cursor: pointer;
align-self: start;
transition: all var(--motion-fast) var(--ease-out);
}
.pd-del:hover { background: var(--danger-soft); color: var(--danger); }
.pd-add { margin-top: var(--sp-3); }
.pd-add summary {
cursor: pointer;
padding: var(--sp-2) var(--sp-3);
font-size: var(--text-sm);
color: var(--fg-3);
border: 1px dashed var(--line-2);
border-radius: var(--r-md);
list-style: none;
user-select: none;
transition: all var(--motion-fast) var(--ease-out);
font-weight: 500;
}
.pd-add summary::-webkit-details-marker { display: none; }
.pd-add summary:hover { color: var(--brand); border-color: var(--brand); }
.pd-add[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.pd-add-form {
display: flex; flex-direction: column; gap: var(--sp-2);
padding: var(--sp-3);
border: 1px dashed var(--line-2);
border-top: none;
border-bottom-left-radius: var(--r-md);
border-bottom-right-radius: var(--r-md);
}
.pd-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.pd-events-list { gap: 0; }
.pd-event {
display: grid;
grid-template-columns: 20px 1fr;
gap: var(--sp-3);
padding: var(--sp-3) 0;
}
.pd-event-line {
display: flex;
justify-content: center;
position: relative;
}
.pd-event-line::before {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 1px;
background: var(--line);
}
.pd-event:first-child .pd-event-line::before { top: 8px; }
.pd-event:last-child .pd-event-line::before { bottom: calc(100% - 8px); }
.pd-event-dot {
position: relative;
z-index: 1;
width: 8px; height: 8px;
border-radius: 50%;
margin-top: 7px;
box-shadow: 0 0 0 3px var(--bg);
}
.pd-event-body { padding-bottom: var(--sp-1); }
.pd-event-head {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: 2px;
font-size: var(--text-sm);
}
.pd-event-type { font-weight: 600; color: var(--fg); }
.pd-event-when { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; }
.pd-attach {
margin-left: auto;
cursor: pointer;
padding: 2px var(--sp-2);
border-radius: var(--r-sm);
color: var(--fg-3);
font-size: 14px;
transition: all var(--motion-fast);
}
.pd-attach:hover { background: var(--surface-3); color: var(--fg); }
.pd-event-text { font-size: var(--text-base); color: var(--fg-2); line-height: 1.55; }
.pd-event-attachments { font-size: var(--text-xs); color: var(--fg-3); margin-top: var(--sp-1); }
.proc-sync-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 8px var(--brand-glow);
margin-left: var(--sp-2);
vertical-align: middle;
animation: pulse 2s ease-in-out infinite;
}
.pd-card-clickable { cursor: pointer; }
.pd-card-clickable:hover {
border-color: var(--brand);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.pd-actions { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* ─────────────────────────────────────────────────────────────
WHATSAPP INBOX — Minimalista premium (Linear/Vercel-style)
Sem doodle pattern, sem verde-musgo WhatsApp, sem cauda.
Foco: espaço, tipografia, hairlines, brand color do app.
───────────────────────────────────────────────────────────── */
/* Estado vazio — antes de conectar */
.wpp-empty {
text-align: center;
padding: 120px var(--sp-6);
color: var(--fg-3);
}
.wpp-empty-icon { font-size: 48px; opacity: 0.3; margin-bottom: var(--sp-5); }
.wpp-empty h1 { margin-bottom: var(--sp-2); color: var(--fg); font-weight: 600; }
.wpp-qr-screen { max-width: 460px; margin: var(--sp-10) auto; text-align: center; }
/* Shell — sem borda, ocupa tudo, vira parte do app */
.wpp-shell {
display: grid;
grid-template-columns: 360px 1fr;
height: calc(100vh - 64px);
background: var(--bg);
border: 0;
border-radius: 0;
overflow: hidden;
}
/* ── Lista de conversas ────────────────────────────────────── */
.wpp-list {
display: flex;
flex-direction: column;
border-right: 1px solid var(--line);
background: var(--surface-1);
min-width: 0;
}
.wpp-list-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-5) var(--sp-5) var(--sp-3);
background: transparent;
border-bottom: 0;
}
.wpp-head-info { flex: 1; min-width: 0; }
.wpp-head-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
letter-spacing: -0.02em;
color: var(--fg);
line-height: 1.2;
display: inline-flex;
align-items: center;
gap: 10px;
}
.wpp-head-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 7px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--line);
font-family: var(--font);
font-size: 11px;
font-weight: 600;
color: var(--fg-3);
letter-spacing: 0;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.wpp-head-sub {
display: flex;
align-items: center;
gap: 7px;
margin-top: 5px;
font-size: 12px;
color: var(--fg-3);
font-family: var(--font);
letter-spacing: 0;
min-width: 0;
}
.wpp-head-account {
color: var(--fg-2);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.wpp-head-phone {
color: var(--fg-4);
font-variant-numeric: tabular-nums;
}
.wpp-head-phone::before {
content: "·";
margin-right: 6px;
color: var(--fg-4);
}
.wpp-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand, #00d97e);
box-shadow: 0 0 0 0 rgba(0, 217, 126, 0.55);
animation: wpp-pulse-dot 2.2s ease-out infinite;
flex-shrink: 0;
}
@keyframes wpp-pulse-dot {
0% { box-shadow: 0 0 0 0 rgba(0, 217, 126, 0.55); }
70% { box-shadow: 0 0 0 6px rgba(0, 217, 126, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 217, 126, 0); }
}
/* Botão circular do header — desconectar */
.wpp-head-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--fg-3);
cursor: pointer;
transition: all var(--motion-fast) var(--ease-out);
flex-shrink: 0;
}
.wpp-head-btn svg { width: 16px; height: 16px; }
.wpp-head-btn:hover {
background: var(--danger-soft, rgba(239,68,68,0.1));
border-color: var(--danger, #ef4444);
color: var(--danger, #ef4444);
transform: scale(1.04);
}
.wpp-list-items {
flex: 1;
overflow-y: auto;
padding: 0 var(--sp-2) var(--sp-3);
}
/* Item de conversa — minimalista, hover sutil, ativo com indicador lateral */
.wpp-conv {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 12px;
padding: 10px 12px;
cursor: pointer;
border: 0;
border-radius: var(--r-md);
align-items: center;
transition: background var(--motion-fast) var(--ease-out);
position: relative;
margin: 1px 0;
}
.wpp-conv:hover { background: var(--surface-2); }
.wpp-conv.active {
background: var(--surface-2);
}
.wpp-conv.active::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 24px;
background: var(--brand);
border-radius: 0 2px 2px 0;
box-shadow: 0 0 12px var(--brand-glow);
}
/* Avatar — gradient sutil, sem peso visual exagerado */
.wpp-avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
border: 1px solid var(--line-2);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font);
font-weight: 600;
font-size: 14px;
color: var(--fg-2);
flex-shrink: 0;
position: relative;
}
.wpp-conv.active .wpp-avatar {
background: linear-gradient(135deg, var(--brand-soft), var(--surface-3));
border-color: rgba(0, 213, 99, 0.25);
color: var(--brand);
}
.wpp-conv-body { min-width: 0; }
.wpp-conv-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-2);
}
.wpp-conv-head strong {
font-size: 14px;
color: var(--fg);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.005em;
}
.wpp-conv-head .muted, .wpp-conv-head .text-xs {
font-size: 11px;
color: var(--fg-3);
white-space: nowrap;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.wpp-conv-preview {
font-size: 13px;
color: var(--fg-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
line-height: 1.4;
}
.wpp-tag {
display: inline-block;
padding: 1px 7px;
border-radius: var(--r-full);
font-size: 10px;
margin-top: 5px;
font-weight: 600;
letter-spacing: 0;
background: var(--brand-soft);
color: var(--brand);
}
.wpp-badge {
background: var(--brand);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 1px 7px;
border-radius: var(--r-full);
min-width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 3px var(--brand-soft);
}
/* ── Painel da conversa aberta ─────────────────────────────── */
.wpp-main {
display: flex;
flex-direction: column;
min-height: 0;
background: var(--bg);
position: relative;
}
/* Header da conversa — slot pra avatar via data-initial */
.wpp-conv-head-main {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-6);
background: var(--surface-1);
border-bottom: 1px solid var(--line);
min-height: 68px;
}
.wpp-conv-head-main > div:first-child {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1;
}
.wpp-conv-head-main > div:first-child::before {
content: attr(data-initial);
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-soft), var(--surface-3));
border: 1px solid rgba(0, 213, 99, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
color: var(--brand);
flex-shrink: 0;
}
/* Nome + telefone empilhados verticalmente ao lado do avatar.
Sem isso, o flex-row do pai colocava avatar/nome/telefone tudo inline,
e o telefone era encoberto pelo lado direito quando o header lotava. */
.wpp-head-text {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.wpp-head-text > div:first-child {
color: var(--fg) !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.3;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wpp-head-text .muted,
.wpp-head-text .text-xs {
color: var(--fg-3) !important;
font-size: 12px !important;
margin-top: 2px;
font-family: var(--font-mono);
letter-spacing: 0.01em;
white-space: nowrap;
}
/* Lado direito do header — botões + tag de lead/cliente.
flex-shrink: 0 nos botões pra não esmagarem; gap consistente.
Sem isso, o select de templates (texto longo) empurrava tudo
pra cima do nome/telefone. */
.wpp-head-actions {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-shrink: 0;
}
.wpp-head-actions > * { flex-shrink: 0; }
/* Tag dentro do header é inline-flex centralizado, sem margin-top
(esse margin era pra contexto de card na sidebar, não de header). */
.wpp-head-actions .wpp-tag {
margin-top: 0;
display: inline-flex;
align-items: center;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wpp-head-actions select {
max-width: 220px;
text-overflow: ellipsis;
}
/* Select de template de IA no header — antes usava --wa-bg-elev/--wa-text
(que NÃO existem como CSS vars) então caía pro fundo branco padrão do
browser e quebrava o tema dark.
color-scheme: dark faz o dropdown nativo aparecer em dark no Chrome/Edge/Firefox. */
.wpp-ai-template-select {
padding: 6px 28px 6px 12px !important;
font-size: 12px !important;
background: var(--surface-2) !important;
color: var(--fg) !important;
border: 1px solid var(--line-2) !important;
border-radius: var(--r-md) !important;
cursor: pointer;
color-scheme: dark;
height: auto !important;
width: auto !important;
min-width: 0;
}
.wpp-ai-template-select:hover {
background: var(--surface-3) !important;
border-color: var(--line-3) !important;
}
.wpp-ai-template-select:focus {
outline: none;
border-color: var(--brand) !important;
box-shadow: 0 0 0 2px var(--brand-soft);
}
/* Options dentro do dropdown — bg dark + texto claro.
Browsers limitam estilização de