/*
* UsePostFlow — DESIGN OVERRIDE v3.0 · Claymorphism 3D
*
* Técnica: dual-shadow (sombra escura embaixo-direita + highlight claro cima-esquerda)
* simula iluminação real e dá profundidade física aos elementos.
*
* Dark mode: navy profundo como base, elementos "flutuam" acima.
* Light mode: cinza lavanda suave, elementos "emergem" da superfície.
* Toggle 🌙 continua funcionando normalmente.
*
* COMO USAR: no index.html, dentro do , após o bloco :
*
*/
/* ═══════════════════════════════════════════════════════════════
1. TOKENS — LIGHT MODE (padrão)
═══════════════════════════════════════════════════════════════ */
:root {
--bg: #DDE1F0; /* cinza-lavanda — base da superfície clay */
--bg2: #D4D9EC; /* ligeiramente mais escuro para hovers */
--surface: #E8EBF7; /* cards e painéis */
--surface-hi: #EEF1FB; /* superfície elevada (botões, chips) */
--border: rgba(255,255,255,0.70);
--border-subtle: rgba(163,175,203,0.30);
--accent: #4455FF;
--accent-light: rgba(68,85,255,0.10);
--success: #00C270;
--success-light: rgba(0,194,112,0.12);
--warn: #F59E0B;
--warn-light: rgba(245,158,11,0.12);
--purple: #9B30F0;
--purple-light: rgba(155,48,240,0.12);
--text: #1A1D3A;
--text2: #4A5580;
--text3: #8A95B8;
--radius: 16px;
--radius-sm: 10px;
/* Sombras clay — LIGHT: sombra escura + reflexo claro */
--clay-shadow:
6px 6px 18px rgba(163,175,203,0.55),
-4px -4px 12px rgba(255,255,255,0.90);
--clay-shadow-sm:
4px 4px 12px rgba(163,175,203,0.50),
-3px -3px 8px rgba(255,255,255,0.85);
--clay-shadow-lg:
10px 10px 28px rgba(163,175,203,0.60),
-6px -6px 18px rgba(255,255,255,0.95);
--clay-inset:
inset 4px 4px 10px rgba(163,175,203,0.50),
inset -3px -3px 8px rgba(255,255,255,0.85);
--clay-btn:
5px 5px 14px rgba(163,175,203,0.55),
-3px -3px 10px rgba(255,255,255,0.90),
inset 0 1px 0 rgba(255,255,255,0.90);
--shadow: var(--clay-shadow);
}
/* ── Tipografia global — nitidez e legibilidade ── */
html {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
}
body {
background: #DDE1F0 !important;
background-attachment: fixed !important;
font-weight: 450 !important; /* DM Sans fica mais nítida em 450–500 */
letter-spacing: 0.01em !important;
}
/* Sora (títulos e botões) — peso mínimo 600 para clareza */
.logo, .section-tab, .sub-tab,
.gen-btn, .auto-btn, .single-btn,
.pac-btn, .top-btn, .pfm-btn,
h1, h2, h3,
[class*="title"], [class*="label"],
[class*="-btn"], [class*="font-family:'Sora'"],
[style*="font-family:'Sora'"], [style*='font-family:Sora'] {
-webkit-font-smoothing: antialiased !important;
text-rendering: optimizeLegibility !important;
}
/* Garante que textos em cards não fiquem finos */
.post-title, .main-title, .hd-greeting,
.dash-stat-val, .hd-card-value, .stat-value,
.pfm-title, .sgp-brain-name {
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
/* ═══════════════════════════════════════════════════════════════
2. TOKENS — DARK MODE (ativado pelo toggle body.dark-mode)
═══════════════════════════════════════════════════════════════ */
body.dark-mode {
--bg: #0A1E36; /* azul-oceano profundo — base */
--bg2: #0E2542; /* hover sobre o bg */
--surface: #13314F; /* cards — azul-oceano médio, salto vs bg */
--surface-hi: #1A3D60; /* botões e chips — azul elevado */
--border: rgba(255,255,255,0.09);
--border-subtle: rgba(255,255,255,0.05);
--accent: #6677FF;
--accent-light: rgba(102,119,255,0.16);
--success: #00E682;
--success-light: rgba(0,230,130,0.13);
--warn: #FFB800;
--warn-light: rgba(255,184,0,0.13);
--purple: #C070FF;
--purple-light: rgba(192,112,255,0.15);
--text: #F0F2FF; /* branco frio — máxima legibilidade */
--text2: rgba(240,242,255,0.68);
--text3: rgba(240,242,255,0.40);
/* Sombras clay — DARK: muito mais fortes para profundidade visível */
--clay-shadow:
10px 10px 30px rgba(0,0,0,0.75),
-4px -4px 14px rgba(255,255,255,0.055);
--clay-shadow-sm:
6px 6px 18px rgba(0,0,0,0.65),
-3px -3px 9px rgba(255,255,255,0.045);
--clay-shadow-lg:
16px 16px 44px rgba(0,0,0,0.82),
-6px -6px 20px rgba(255,255,255,0.065);
--clay-inset:
inset 6px 6px 18px rgba(0,0,0,0.60),
inset -3px -3px 8px rgba(255,255,255,0.045);
--clay-btn:
8px 8px 20px rgba(0,0,0,0.70),
-3px -3px 10px rgba(255,255,255,0.055),
inset 0 1px 0 rgba(255,255,255,0.10);
--shadow: var(--clay-shadow);
}
body.dark-mode {
background:
radial-gradient(ellipse 70% 55% at 12% 8%, rgba(48,170,230,0.12) 0%, transparent 58%),
radial-gradient(ellipse 65% 50% at 90% 92%, rgba(140,110,255,0.10) 0%, transparent 58%),
#0A1E36 !important;
background-attachment: fixed !important;
-webkit-font-smoothing: antialiased !important;
font-weight: 450 !important;
letter-spacing: 0.01em !important;
}
body.dark-mode select,
body.dark-mode input,
body.dark-mode textarea { color-scheme: dark; }
/* ═══════════════════════════════════════════════════════════════
3. TOPBAR — levantada da superfície
═══════════════════════════════════════════════════════════════ */
.topbar {
background: var(--surface) !important;
border-bottom: 1px solid var(--border) !important;
box-shadow: 0 4px 16px rgba(163,175,203,0.35), inset 0 1px 0 rgba(255,255,255,0.85) !important;
position: relative !important;
}
body.dark-mode .topbar {
background: var(--surface) !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
/* linha de acento topo */
.topbar::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #4455FF, #9B30F0);
opacity: 0.75;
pointer-events: none;
}
/* Logo */
.logo { color: var(--text) !important; }
.logo-box {
background: linear-gradient(135deg, #4455FF, #9B30F0) !important;
box-shadow: 3px 3px 10px rgba(68,85,255,0.40), -1px -1px 4px rgba(255,255,255,0.15) !important;
}
.logo span[style*="color:var(--accent)"] {
background: linear-gradient(90deg, #4455FF, #9B30F0) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Bio Page — botão destacado com gradiente cian→azul */
.bp-topbar-btn,
button.bp-topbar-btn {
background: linear-gradient(135deg, #00C8F0, #4455FF) !important;
color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.20) !important;
font-weight: 700 !important;
box-shadow:
4px 4px 14px rgba(0,200,240,0.38),
-2px -2px 8px rgba(255,255,255,0.12),
inset 0 1px 0 rgba(255,255,255,0.28) !important;
transition: all 0.18s ease !important;
}
.bp-topbar-btn:hover,
button.bp-topbar-btn:hover {
transform: translateY(-2px) !important;
box-shadow:
6px 6px 18px rgba(0,200,240,0.50),
-2px -2px 8px rgba(255,255,255,0.15),
inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
.bp-topbar-btn:active,
button.bp-topbar-btn:active {
transform: translateY(1px) !important;
box-shadow: inset 4px 4px 12px rgba(0,0,0,0.20) !important;
}
/* Botões do topo — clay raised */
.top-btn {
background: var(--surface-hi) !important;
border: 1px solid var(--border) !important;
color: var(--text2) !important;
border-radius: 10px !important;
box-shadow: var(--clay-btn) !important;
transition: all 0.18s ease !important;
}
.top-btn:hover {
color: var(--accent) !important;
box-shadow: 7px 7px 18px rgba(163,175,203,0.55), -3px -3px 10px rgba(255,255,255,0.90), inset 0 1px 0 rgba(255,255,255,0.90) !important;
}
body.dark-mode .top-btn:hover {
color: #7B8FFF !important;
box-shadow: 8px 8px 20px rgba(0,0,0,0.60), -2px -2px 8px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.09) !important;
}
.top-btn:active {
box-shadow: var(--clay-inset) !important;
transform: translateY(1px) !important;
}
#planBadge {
background: var(--accent-light) !important;
color: var(--accent) !important;
border: 1px solid rgba(68,85,255,0.20) !important;
box-shadow: var(--clay-shadow-sm) !important;
}
.status-badge {
background: var(--success-light) !important;
color: var(--success) !important;
border: 1px solid rgba(0,194,112,0.22) !important;
box-shadow: var(--clay-shadow-sm) !important;
}
.lang-select {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text2) !important;
box-shadow: var(--clay-inset) !important;
border-radius: 8px !important;
}
#userDropdown {
background: var(--surface-hi) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--clay-shadow-lg) !important;
border-radius: 14px !important;
}
/* ═══════════════════════════════════════════════════════════════
4. SIDEBARS — superfícies clay
═══════════════════════════════════════════════════════════════ */
.sidebar, .sidebar-right {
background: var(--bg) !important;
border-color: transparent !important;
box-shadow: 4px 0 20px rgba(163,175,203,0.25) !important;
}
body.dark-mode .sidebar,
body.dark-mode .sidebar-right {
background: var(--bg) !important;
box-shadow: 4px 0 20px rgba(0,0,0,0.30) !important;
border-right: 1px solid rgba(255,255,255,0.04) !important;
}
/* ═══════════════════════════════════════════════════════════════
5. SECTION TABS — nav principal
═══════════════════════════════════════════════════════════════ */
.section-tabs {
background: var(--surface) !important;
border-bottom: 1px solid var(--border-subtle) !important;
box-shadow: 0 2px 12px rgba(163,175,203,0.20) !important;
gap: 8px !important;
padding: 11px 20px !important;
}
body.dark-mode .section-tabs {
background: var(--surface) !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
box-shadow: 0 2px 14px rgba(0,0,0,0.25) !important;
}
/* Tabs principais — pílulas clay elevadas (mesmo formato das sub-abas,
porém já preenchidas em repouso → mais destaque que a linha de baixo).
Aba ativa ganha preenchimento sólido com gradiente. */
.section-tab {
color: var(--text2) !important;
font-family: 'Sora', sans-serif !important;
font-weight: 700 !important;
font-size: 13px !important;
padding: 9px 18px !important;
border: none !important;
border-bottom: none !important;
border-radius: 14px !important;
background: var(--surface-hi) !important;
box-shadow: var(--clay-shadow-sm) !important;
bottom: 0 !important;
position: relative !important;
transition: transform 0.16s, box-shadow 0.16s, background 0.16s, color 0.16s !important;
}
.section-tab:hover {
color: var(--text) !important;
transform: translateY(-1px) !important;
box-shadow: var(--clay-shadow) !important;
}
.section-tab.active {
color: #fff !important;
background: linear-gradient(145deg, #5A6BFF, #6E7BFF) !important;
box-shadow: 0 6px 16px rgba(68,85,255,0.40),
inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.section-tab.piloto-active {
color: #fff !important;
background: linear-gradient(145deg, #A855F7, #7C3AED) !important;
box-shadow: 0 6px 16px rgba(124,58,237,0.40),
inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
/* Sub-tabs — pill clay */
.sub-tabs {
background: var(--bg) !important;
border-bottom: 1px solid var(--border-subtle) !important;
}
body.dark-mode .sub-tabs {
background: var(--bg) !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.sub-tab {
color: var(--text3) !important;
border: 1px solid transparent !important;
border-radius: 20px !important;
font-family: 'Sora', sans-serif !important;
font-weight: 600 !important;
font-size: 12px !important;
transition: all 0.18s !important;
background: transparent !important;
}
.sub-tab:hover {
color: var(--text2) !important;
background: var(--surface) !important;
box-shadow: var(--clay-shadow-sm) !important;
}
.sub-tab.active {
color: var(--accent) !important;
background: var(--surface-hi) !important;
border-color: rgba(68,85,255,0.20) !important;
box-shadow: var(--clay-shadow-sm) !important;
}
body.dark-mode .sub-tab.active {
color: #7B8FFF !important;
border-color: rgba(85,102,255,0.22) !important;
}
/* ═══════════════════════════════════════════════════════════════
6. POST CARDS — flutuando acima da superfície
═══════════════════════════════════════════════════════════════ */
.post-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 18px !important;
box-shadow: var(--clay-shadow) !important;
transition: box-shadow 0.22s ease, transform 0.22s ease !important;
}
.post-card:hover {
transform: translateY(-3px) !important;
box-shadow: var(--clay-shadow-lg) !important;
}
.post-card:active {
transform: translateY(0) !important;
box-shadow: var(--clay-inset) !important;
}
.post-title { color: var(--text) !important; }
.post-text { color: var(--text2) !important; }
.post-hashtags { color: var(--accent) !important; }
body.dark-mode .post-hashtags { color: #7B8FFF !important; }
.post-time { color: var(--text3) !important; }
.post-actions { border-top: 1px solid var(--border-subtle) !important; }
/* Botões de ação nos cards */
.pac-btn {
background: var(--surface-hi) !important;
border: 1px solid var(--border) !important;
color: var(--text2) !important;
border-radius: 8px !important;
box-shadow: var(--clay-btn) !important;
transition: all 0.15s ease !important;
}
.pac-btn:hover {
color: var(--accent) !important;
transform: translateY(-1px) !important;
}
.pac-btn:active {
box-shadow: var(--clay-inset) !important;
transform: translateY(1px) !important;
}
.pac-btn.primary {
background: linear-gradient(135deg, #4455FF, #9B30F0) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
color: white !important;
box-shadow:
5px 5px 14px rgba(68,85,255,0.45),
-2px -2px 8px rgba(255,255,255,0.08),
inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.pac-btn.primary:hover {
box-shadow:
7px 7px 18px rgba(68,85,255,0.55),
-2px -2px 8px rgba(255,255,255,0.10),
inset 0 1px 0 rgba(255,255,255,0.25) !important;
transform: translateY(-2px) !important;
}
.pac-btn.primary:active {
box-shadow: inset 3px 3px 10px rgba(0,0,0,0.25) !important;
transform: translateY(0) !important;
}
.post-menu {
background: var(--surface-hi) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--clay-shadow-lg) !important;
border-radius: 14px !important;
}
.post-menu-item { color: var(--text2) !important; }
.post-menu-item:hover {
background: var(--bg2) !important;
color: var(--text) !important;
}
.post-menu-sep { background: var(--border-subtle) !important; }
.post-edit-area {
background: var(--bg) !important;
border: 1.5px solid rgba(68,85,255,0.30) !important;
color: var(--text) !important;
box-shadow: var(--clay-inset) !important;
border-radius: 10px !important;
}
/* ═══════════════════════════════════════════════════════════════
7. BOTÕES PRINCIPAIS — clay raised 3D
═══════════════════════════════════════════════════════════════ */
/* Gen btn — gradiente primário */
.gen-btn {
background: linear-gradient(145deg, #5A6BFF, #9033F2) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
box-shadow:
6px 6px 20px rgba(68,85,255,0.55),
-3px -3px 10px rgba(255,255,255,0.12),
inset 0 1.5px 0 rgba(255,255,255,0.28),
inset 0 -1px 0 rgba(0,0,0,0.15) !important;
transition: all 0.18s ease !important;
}
.gen-btn:hover:not(:disabled) {
transform: translateY(-3px) !important;
box-shadow:
10px 10px 28px rgba(68,85,255,0.65),
-3px -3px 10px rgba(255,255,255,0.14),
inset 0 1.5px 0 rgba(255,255,255,0.32) !important;
}
.gen-btn:active:not(:disabled) {
transform: translateY(1px) !important;
box-shadow: inset 5px 5px 14px rgba(0,0,0,0.30) !important;
}
.gen-btn:disabled {
background: var(--surface) !important;
color: var(--text3) !important;
box-shadow: var(--clay-shadow-sm) !important;
}
/* Auto btn — verde */
.auto-btn {
background: linear-gradient(145deg, #00D472, #00A855) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 13px !important;
box-shadow:
5px 5px 16px rgba(0,194,112,0.40),
-2px -2px 8px rgba(255,255,255,0.10),
inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.auto-btn:hover:not(:disabled) {
transform: translateY(-2px) !important;
box-shadow:
8px 8px 22px rgba(0,194,112,0.50),
inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
/* Single btn — roxo */
.single-btn {
background: linear-gradient(145deg, #A840F0, #7C3AED) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 13px !important;
box-shadow:
5px 5px 16px rgba(155,48,240,0.40),
-2px -2px 8px rgba(255,255,255,0.08),
inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.single-btn:hover:not(:disabled) {
transform: translateY(-2px) !important;
box-shadow:
8px 8px 22px rgba(155,48,240,0.50),
inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
/* Freq / tone / agent chips */
.freq-btn, .tone-chip, .agent-freq-btn, .sgp-qty-btn {
background: var(--surface-hi) !important;
border: 1px solid var(--border) !important;
color: var(--text2) !important;
box-shadow: var(--clay-btn) !important;
transition: all 0.15s ease !important;
}
.freq-btn:active, .tone-chip:active,
.agent-freq-btn:active, .sgp-qty-btn:active {
box-shadow: var(--clay-inset) !important;
transform: translateY(1px) !important;
}
.freq-btn.active, .tone-chip.active,
.agent-freq-btn.active, .sgp-qty-btn.active {
background: linear-gradient(135deg, rgba(68,85,255,0.18), rgba(155,48,240,0.12)) !important;
border-color: rgba(68,85,255,0.30) !important;
color: var(--accent) !important;
box-shadow:
var(--clay-shadow-sm),
inset 0 1px 0 rgba(68,85,255,0.15) !important;
}
body.dark-mode .freq-btn.active,
body.dark-mode .tone-chip.active,
body.dark-mode .agent-freq-btn.active,
body.dark-mode .sgp-qty-btn.active {
color: #7B8FFF !important;
border-color: rgba(85,102,255,0.28) !important;
}
/* ═══════════════════════════════════════════════════════════════
8. FORMULÁRIOS — carregados na superfície (clay inset)
═══════════════════════════════════════════════════════════════ */
.field-input,
.field-textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="datetime-local"],
select, textarea {
background: var(--bg) !important;
border: 1px solid var(--border-subtle) !important;
color: var(--text) !important;
border-radius: 10px !important;
box-shadow: var(--clay-inset) !important;
transition: box-shadow 0.18s, border-color 0.18s !important;
}
.field-input::placeholder, input::placeholder, textarea::placeholder {
color: var(--text3) !important;
}
.field-input:focus, input:focus, select:focus, textarea:focus {
border-color: rgba(68,85,255,0.40) !important;
box-shadow:
var(--clay-inset),
0 0 0 3px rgba(68,85,255,0.10) !important;
outline: none !important;
}
body.dark-mode .field-input:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
border-color: rgba(85,102,255,0.38) !important;
box-shadow:
inset 5px 5px 14px rgba(0,0,0,0.45),
inset -2px -2px 6px rgba(255,255,255,0.035),
0 0 0 3px rgba(85,102,255,0.12) !important;
}
.bb-input {
background: var(--bg) !important;
border: 1px solid var(--border-subtle) !important;
color: var(--text) !important;
box-shadow: var(--clay-inset) !important;
}
.bb-input:focus {
border-color: rgba(68,85,255,0.35) !important;
}
/* ═══════════════════════════════════════════════════════════════
9. ACCORDION
═══════════════════════════════════════════════════════════════ */
.acc-section.open {
background: var(--surface) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: 14px !important;
box-shadow: var(--clay-shadow-sm) !important;
}
.acc-header:hover {
background: var(--surface-hi) !important;
border-radius: 10px !important;
}
.acc-body { border-top: 1px solid var(--border-subtle) !important; }
.acc-header-label { color: var(--text3) !important; }
.acc-header-arrow { color: var(--text3) !important; }
/* ═══════════════════════════════════════════════════════════════
10. SMART GEN PANEL
═══════════════════════════════════════════════════════════════ */
.sgp-wrap {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
box-shadow: var(--clay-shadow) !important;
}
.sgp-brain-badge {
background: linear-gradient(135deg, rgba(155,48,240,0.10), rgba(68,85,255,0.08)) !important;
border: 1px solid rgba(155,48,240,0.20) !important;
border-radius: 10px !important;
box-shadow: var(--clay-shadow-sm) !important;
}
.sgp-brain-name { color: #7C3AED !important; }
.sgp-brain-sub { color: rgba(124,58,237,0.70) !important; }
body.dark-mode .sgp-brain-name { color: #B060F0 !important; }
body.dark-mode .sgp-brain-sub { color: rgba(176,96,240,0.70) !important; }
/* ═══════════════════════════════════════════════════════════════
11. HOME DASHBOARD
═══════════════════════════════════════════════════════════════ */
.hd-greeting { color: var(--text) !important; }
.hd-date { color: var(--text3) !important; }
/* Card piloto inativo */
.hd-pilot-card.inactive {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 18px !important;
box-shadow: var(--clay-shadow) !important;
}
.hd-pilot-card.inactive .hd-pilot-badge {
background: var(--warn-light) !important;
color: var(--warn) !important;
border: 1px solid rgba(245,158,11,0.22) !important;
box-shadow: var(--clay-shadow-sm) !important;
}
.hd-pilot-card.inactive .hd-pilot-title { color: var(--text) !important; }
.hd-pilot-card.inactive .hd-pilot-sub { color: var(--text2) !important; }
.hd-pilot-card.inactive .hd-pilot-btn {
background: linear-gradient(145deg, #5566FF, #8833EE) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
box-shadow:
4px 4px 14px rgba(68,85,255,0.40),
inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.hd-pilot-card.inactive .hd-pilot-btn:hover {
transform: translateY(-2px) !important;
box-shadow:
7px 7px 20px rgba(68,85,255,0.52),
inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
/* Métricas */
.hd-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
box-shadow: var(--clay-shadow) !important;
transition: box-shadow 0.2s, transform 0.2s !important;
}
.hd-card:hover {
transform: translateY(-2px) !important;
box-shadow: var(--clay-shadow-lg) !important;
}
.hd-card-label { color: var(--text3) !important; }
.hd-card-value { color: var(--text) !important; }
.hd-card-sub { color: var(--text3) !important; }
/* Ações rápidas */
.hd-quick-btn {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
box-shadow: var(--clay-shadow) !important;
transition: all 0.18s ease !important;
}
.hd-quick-btn:hover {
transform: translateY(-3px) !important;
box-shadow: var(--clay-shadow-lg) !important;
}
.hd-quick-btn:active {
transform: translateY(1px) !important;
box-shadow: var(--clay-inset) !important;
}
.hd-quick-btn .hql { color: var(--text2) !important; }
/* Cards informativos */
.hd-next-card, .hd-viral-card, .hd-tpl-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
box-shadow: var(--clay-shadow) !important;
}
.hd-next-item { border-bottom: 1px solid var(--border-subtle) !important; }
.hd-viral-bar { background: var(--bg2) !important; box-shadow: var(--clay-inset) !important; border-radius: 4px !important; }
.hd-viral-tag.pos { background: var(--success-light) !important; color: var(--success) !important; box-shadow: var(--clay-shadow-sm) !important; }
.hd-viral-tag.neg { background: rgba(239,68,68,0.10) !important; color: #DC2626 !important; box-shadow: var(--clay-shadow-sm) !important; }
body.dark-mode .hd-viral-tag.neg { color: #FF6B8A !important; }
/* Pendentes */
.hd-pending-card {
background: var(--warn-light) !important;
border: 1px solid rgba(245,158,11,0.25) !important;
border-radius: 14px !important;
box-shadow: var(--clay-shadow-sm) !important;
}
.hd-pending-card .hd-pend-text { color: #92400E !important; }
body.dark-mode .hd-pending-card .hd-pend-text { color: rgba(255,184,0,0.88) !important; }
/* ROI */
.hd-roi-card {
background: linear-gradient(145deg, #3B0764, #7C3AED) !important;
border: 1px solid rgba(124,58,237,0.30) !important;
box-shadow:
8px 8px 22px rgba(124,58,237,0.30),
-3px -3px 10px rgba(255,255,255,0.06),
inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
/* ═══════════════════════════════════════════════════════════════
12. SIDEBAR DIREITA — stats, histórico
═══════════════════════════════════════════════════════════════ */
.sec-title { color: var(--text3) !important; }
.stat-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important;
box-shadow: var(--clay-shadow-sm) !important;
}
.stat-value { color: var(--text) !important; }
.stat-label { color: var(--text3) !important; }
.stat-card.highlight {
background: linear-gradient(135deg, rgba(68,85,255,0.12), rgba(155,48,240,0.08)) !important;
border-color: rgba(68,85,255,0.22) !important;
}
.stat-card.highlight .stat-value { color: var(--accent) !important; }
.history-item {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 10px !important;
box-shadow: var(--clay-shadow-sm) !important;
transition: all 0.15s ease !important;
}
.history-item:hover {
transform: translateX(2px) !important;
box-shadow: var(--clay-shadow) !important;
}
.niche-bar-track {
background: var(--bg) !important;
box-shadow: var(--clay-inset) !important;
border-radius: 4px !important;
}
.niche-bar-fill { background: linear-gradient(90deg, var(--accent), var(--success)) !important; }
.progress-track {
background: var(--bg) !important;
box-shadow: var(--clay-inset) !important;
}
.progress-fill { background: linear-gradient(90deg, var(--accent), var(--purple)) !important; }
/* ═══════════════════════════════════════════════════════════════
13. PILOTO AUTOMÁTICO — agent dashboard
═══════════════════════════════════════════════════════════════ */
.dash-stat {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
box-shadow: var(--clay-shadow) !important;
}
.dash-stat-val { color: var(--text) !important; }
.dash-stat-lbl { color: var(--text3) !important; }
.dash-act { border-bottom: 1px solid var(--border-subtle) !important; color: var(--text2) !important; }
#agentActiveBanner {
background: linear-gradient(145deg, #3B0764, #7C3AED) !important;
border: 1px solid rgba(124,58,237,0.30) !important;
box-shadow:
6px 6px 18px rgba(124,58,237,0.35),
inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
@keyframes clay-pulse {
0%,100% { box-shadow: 8px 8px 22px rgba(124,58,237,0.28), inset 0 1px 0 rgba(255,255,255,0.12); }
50% { box-shadow: 10px 10px 28px rgba(124,58,237,0.45), inset 0 1px 0 rgba(255,255,255,0.15); }
}
.hd-pilot-card.active,
#agentActiveBanner { animation: clay-pulse 3.5s ease-in-out infinite !important; }
/* ═══════════════════════════════════════════════════════════════
14. MODAIS — elevados acima de tudo
═══════════════════════════════════════════════════════════════ */
.pfm-box {
background: var(--surface-hi) !important;
border: 1px solid var(--border) !important;
border-radius: 22px !important;
box-shadow: var(--clay-shadow-lg) !important;
}
.pfm-title { color: var(--text) !important; }
.pfm-msg { color: var(--text2) !important; }
.pfm-btn.primary {
background: linear-gradient(145deg, #5566FF, #8833EE) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
box-shadow:
4px 4px 14px rgba(68,85,255,0.40),
inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.pfm-btn.primary:hover { transform: translateY(-2px) !important; }
.pfm-btn.primary:active {
box-shadow: inset 3px 3px 10px rgba(0,0,0,0.20) !important;
transform: translateY(0) !important;
}
.pfm-btn.secondary {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text2) !important;
box-shadow: var(--clay-btn) !important;
}
.pfm-btn.secondary:hover { color: var(--accent) !important; }
.pfm-btn.secondary:active { box-shadow: var(--clay-inset) !important; }
.pfm-btn.danger {
background: rgba(239,68,68,0.10) !important;
border: 1px solid rgba(239,68,68,0.22) !important;
color: #DC2626 !important;
box-shadow: var(--clay-shadow-sm) !important;
}
body.dark-mode .pfm-btn.danger { color: #FF6B8A !important; }
.modal, .popup-box {
background: var(--surface-hi) !important;
border: 1px solid var(--border) !important;
border-radius: 20px !important;
box-shadow: var(--clay-shadow-lg) !important;
}
.modal-hashtags { color: var(--accent) !important; }
body.dark-mode .modal-hashtags { color: #7B8FFF !important; }
.btn-primary {
background: linear-gradient(145deg, #5566FF, #8833EE) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
box-shadow: 4px 4px 14px rgba(68,85,255,0.40), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.btn-outline {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text2) !important;
box-shadow: var(--clay-btn) !important;
}
.upgrade-box {
background: var(--surface-hi) !important;
border: 1px solid var(--border) !important;
border-radius: 22px !important;
box-shadow: var(--clay-shadow-lg) !important;
}
.upgrade-plan {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--clay-shadow-sm) !important;
}
.upgrade-plan.popular {
border-color: rgba(68,85,255,0.30) !important;
background: linear-gradient(135deg, rgba(68,85,255,0.08), var(--surface)) !important;
}
.upgrade-plan-badge {
background: linear-gradient(135deg, #4455FF, #9B30F0) !important;
box-shadow: 3px 3px 10px rgba(68,85,255,0.35) !important;
}
.upgrade-cta {
background: linear-gradient(145deg, #5566FF, #8833EE) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
box-shadow: 4px 4px 14px rgba(68,85,255,0.40), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
/* ═══════════════════════════════════════════════════════════════
15. TOAST
═══════════════════════════════════════════════════════════════ */
.toast {
background: var(--surface-hi) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
box-shadow: var(--clay-shadow-lg) !important;
border-radius: 28px !important;
}
/* ═══════════════════════════════════════════════════════════════
16. BRAND BRAIN
═══════════════════════════════════════════════════════════════ */
.bb-bubble {
background: var(--surface-hi) !important;
box-shadow: var(--clay-shadow-sm) !important;
color: var(--text) !important;
}
.bb-msg-user .bb-bubble {
background: linear-gradient(145deg, #5566FF, #8833EE) !important;
box-shadow: 4px 4px 12px rgba(68,85,255,0.38), inset 0 1px 0 rgba(255,255,255,0.20) !important;
color: white !important;
}
.bb-send {
background: linear-gradient(145deg, #5566FF, #8833EE) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
box-shadow: 4px 4px 12px rgba(68,85,255,0.38), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.bb-send:hover:not(:disabled) { transform: translateY(-1px) !important; }
.bb-send:active { box-shadow: inset 3px 3px 8px rgba(0,0,0,0.20) !important; transform: translateY(0) !important; }
.bb-sdot.done { background: var(--purple) !important; }
.bb-sdot.current { background: var(--purple) !important; }
/* ═══════════════════════════════════════════════════════════════
17. MISC
═══════════════════════════════════════════════════════════════ */
.vscore.high { background: var(--success-light) !important; border-color: rgba(0,194,112,0.22) !important; box-shadow: var(--clay-shadow-sm) !important; }
.vscore.mid { background: var(--warn-light) !important; border-color: rgba(245,158,11,0.22) !important; box-shadow: var(--clay-shadow-sm) !important; }
.vscore.low { background: rgba(239,68,68,0.08) !important; border-color: rgba(239,68,68,0.22) !important; box-shadow: var(--clay-shadow-sm) !important; }
.day-header { border-bottom: 2px solid var(--border-subtle) !important; color: var(--text2) !important; }
.day-badge {
background: linear-gradient(135deg, #4455FF, #9B30F0) !important;
box-shadow: 3px 3px 10px rgba(68,85,255,0.35), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.error-box {
background: rgba(239,68,68,0.07) !important;
border: 1px solid rgba(239,68,68,0.22) !important;
color: #DC2626 !important;
box-shadow: var(--clay-shadow-sm) !important;
}
.skeleton {
background: linear-gradient(90deg, var(--bg) 25%, var(--surface-hi) 50%, var(--bg) 75%) !important;
background-size: 200% 100% !important;
}
#genProgressCard {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 16px !important;
box-shadow: var(--clay-shadow) !important;
}
/* ═══════════════════════════════════════════════════════════════
18. SCROLLBAR
═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track {
background: var(--bg) !important;
box-shadow: var(--clay-inset) !important;
border-radius: 99px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, rgba(68,85,255,0.30), rgba(155,48,240,0.25)) !important;
border-radius: 99px;
box-shadow: 2px 2px 6px rgba(0,0,0,0.15) !important;
}
* { scrollbar-width: thin; scrollbar-color: rgba(68,85,255,0.25) transparent; }
/* ═══════════════════════════════════════════════════════════════
19. ÁREA CENTRAL — profundidade nos cards e botões genéricos
Cobre todos os views: carrossel, story, funil, templates, etc.
═══════════════════════════════════════════════════════════════ */
/* Container branco genérico dentro do .main — aplicar clay */
.main > div,
#carouselView > div,
#storyView > div,
#reelsView > div,
#videoView > div,
#abView > div,
#funnelView > div,
#templatesView > div,
#postsView > div,
#agendadosView > div,
#plataformasView > div,
#concorrentesView > div,
#clientesView > div,
#flagsView > div {
color: var(--text) !important;
}
/* Card / caixa branca com border — o wrapper principal do conteúdo */
.main [style*="border-radius"][style*="border"],
.main [style*="background:#fff"],
.main [style*="background: #fff"],
.main [style*="background:white"],
.main [style*="background: white"] {
background: var(--surface) !important;
border-color: var(--border) !important;
box-shadow: var(--clay-shadow) !important;
color: var(--text) !important;
}
/* Botões de seleção genéricos no centro (estilos de carrossel,
número de frames, plataforma, tom de voz, etc.) */
.main button:not(.gen-btn):not(.auto-btn):not(.single-btn):not(.pac-btn):not(.pfm-btn),
.main [class*="-btn"]:not(.gen-btn):not(.auto-btn):not(.single-btn):not(.pac-btn),
.main [class*="style-btn"],
.main [class*="chip"],
.main [class*="-chip"],
.main [class*="freq-btn"],
.main [class*="plat-btn"],
.main [class*="qty-btn"] {
background: var(--surface-hi) !important;
border: 1px solid var(--border) !important;
color: var(--text2) !important;
box-shadow: var(--clay-btn) !important;
transition: all 0.15s ease !important;
-webkit-font-smoothing: antialiased !important;
}
.main button:not(.gen-btn):not(.auto-btn):not(.single-btn):not(.pac-btn):not(.pfm-btn):hover {
box-shadow: var(--clay-shadow) !important;
transform: translateY(-1px) !important;
color: var(--text) !important;
}
.main button:not(.gen-btn):not(.auto-btn):not(.single-btn):not(.pac-btn):not(.pfm-btn):active {
box-shadow: var(--clay-inset) !important;
transform: translateY(1px) !important;
}
/* Botão active/selecionado no centro */
.main button.active:not(.gen-btn):not(.auto-btn):not(.single-btn),
.main [class*="-btn"].active:not(.gen-btn):not(.auto-btn),
.main [class*="chip"].active {
background: linear-gradient(135deg, rgba(68,85,255,0.16), rgba(155,48,240,0.10)) !important;
border-color: rgba(68,85,255,0.32) !important;
color: var(--accent) !important;
box-shadow: var(--clay-shadow-sm), inset 0 1px 0 rgba(68,85,255,0.18) !important;
}
body.dark-mode .main button.active:not(.gen-btn):not(.auto-btn):not(.single-btn) {
color: #8899FF !important;
border-color: rgba(102,119,255,0.32) !important;
}
/* Títulos de seção dentro do conteúdo */
.main h2, .main h3,
.main [class*="title"]:not([class*="post-title"]) {
color: var(--text) !important;
-webkit-font-smoothing: antialiased !important;
}
/* Labels e textos auxiliares */
.main label,
.main [class*="label"],
.main [class*="-label"],
.main small,
.main p {
color: var(--text2) !important;
}
/* Caixas de conteúdo roxas/coloridas (como "Estilo com Foto do Cliente") */
.main [style*="background:linear-gradient"],
.main [style*="background: linear-gradient"] {
box-shadow: var(--clay-shadow) !important;
}
/* Número de posts agendados / contador */
.posts-counter { color: var(--text3) !important; }
/* ═══════════════════════════════════════════════════════════════
20. DARK MODE — reforços específicos de contraste
═══════════════════════════════════════════════════════════════ */
/* Força fundo correto em todos os views do conteúdo no dark */
body.dark-mode .main {
background: transparent !important;
}
/* Cards e containers no dark — garante surface visível sobre o bg */
body.dark-mode .post-card,
body.dark-mode .hd-card,
body.dark-mode .hd-next-card,
body.dark-mode .hd-viral-card,
body.dark-mode .hd-tpl-card,
body.dark-mode .hd-quick-btn,
body.dark-mode .sgp-wrap,
body.dark-mode .dash-stat,
body.dark-mode .stat-card,
body.dark-mode .history-item,
body.dark-mode .pfm-box,
body.dark-mode .modal,
body.dark-mode .popup-box,
body.dark-mode .acc-section.open,
body.dark-mode #genProgressCard {
background: var(--surface) !important; /* #13314F — claramente diferente do bg #0A1E36 */
}
/* Botões e chips no dark — surface-hi claramente elevado */
body.dark-mode .pac-btn,
body.dark-mode .top-btn,
body.dark-mode .freq-btn,
body.dark-mode .tone-chip,
body.dark-mode .sgp-qty-btn,
body.dark-mode .agent-freq-btn,
body.dark-mode .sub-tab.active,
body.dark-mode .pfm-btn.secondary {
background: var(--surface-hi) !important; /* #1A3D60 */
}
/* Texto muito claro no dark para máxima nitidez */
body.dark-mode .post-title,
body.dark-mode .hd-greeting,
body.dark-mode .main-title,
body.dark-mode .dash-stat-val,
body.dark-mode .hd-card-value,
body.dark-mode .stat-value,
body.dark-mode .pfm-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
color: #F0F2FF !important;
font-weight: 700 !important;
}
body.dark-mode .post-text,
body.dark-mode .post-time,
body.dark-mode .hd-card-sub,
body.dark-mode .hd-card-label,
body.dark-mode .stat-label,
body.dark-mode .dash-stat-lbl,
body.dark-mode .sec-title,
body.dark-mode .hd-viral-label,
body.dark-mode small,
body.dark-mode p {
color: rgba(240,242,255,0.65) !important;
}
/* ═══════════════════════════════════════════════════════════════
21. REDUZIR MOVIMENTO
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.hd-pilot-card.active,
#agentActiveBanner { animation: none !important; }
.post-card:hover, .hd-card:hover, .hd-quick-btn:hover { transform: none !important; }
}