/*
* AMGOSSE Modern UI — Design System v5.1
* Growth OS Admin Panel
* ─────────────────────────────────────
* All classes match AdminPortal.php exactly.
*/
/* ══════════════════════════════════════
1. DESIGN TOKENS
══════════════════════════════════════ */
/*
* v5.8.5 — REMOVIDO: blocos :root e [data-theme="light"] daqui que tinham
* loops infinitos (--bg: var(--bg)) causados por um sweep regex.
* Os tokens canônicos agora vêm 100% de amgosse-tokens.css que carrega antes.
* Variáveis legacy (--dash-gap, --card-pad, --radius-*) ficam aqui pra
* compatibilidade.
*/
:root {
--dash-gap: 24px;
--card-pad: 24px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
}
/* ══════════════════════════════════════
2. WP ADMIN FULL TAKEOVER
══════════════════════════════════════ */
/* Break out of WP admin wrapper to fullscreen */
.amgosse-admin-wrap {
position: fixed !important;
left: 0 !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
z-index: 999999 !important;
overflow: hidden !important;
background: var(--bg) !important;
font-family: var(--font) !important;
-webkit-font-smoothing: antialiased !important;
color: var(--text) !important;
}
/* Hide WP admin elements */
.amgosse-active #adminmenuwrap,
.amgosse-active #adminmenuback,
.amgosse-active #adminmenumain,
.amgosse-active #wpadminbar,
.amgosse-active #wpfooter,
.amgosse-active .notice,
.amgosse-active .update-nag,
.amgosse-active .updated,
.amgosse-active .error:not(.amgosse-card-danger),
.amgosse-active #screen-meta,
.amgosse-active #screen-meta-links { display: none !important; }
.amgosse-active #wpcontent,
.amgosse-active #wpbody,
.amgosse-active #wpbody-content {
margin: 0 !important;
padding: 0 !important;
}
/* ══════════════════════════════════════
3. GLOBAL RESET (scoped)
══════════════════════════════════════ */
.amgosse-admin-wrap *,
.amgosse-admin-wrap *::before,
.amgosse-admin-wrap *::after { box-sizing: border-box; }
.amgosse-admin-wrap { line-height: 1.5; }
/* ══════════════════════════════════════
4. SCROLLBAR
══════════════════════════════════════ */
.amgosse-admin-wrap ::-webkit-scrollbar { width: 5px; height: 5px; }
.amgosse-admin-wrap ::-webkit-scrollbar-track { background: transparent; }
.amgosse-admin-wrap ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
/* ══════════════════════════════════════
5. FONTS (loaded inline)
══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
/* ══════════════════════════════════════
6. SPA LAYOUT
══════════════════════════════════════ */
#amgosse-spa {
display: flex;
height: 100%;
width: 100%;
background: var(--bg);
overflow: hidden;
}
/* ══════════════════════════════════════
7. SIDEBAR
══════════════════════════════════════ */
#amgosse-sidebar {
width: 300px;
min-width: 300px;
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
padding: var(--card-pad);
z-index: 10000 !important;
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
/* Collapsed State */
#amgosse-sidebar.collapsed {
width: 84px;
min-width: 84px;
padding: 24px 12px;
}
.amgosse-sidebar-toggle {
position: absolute;
top: 50%;
left: 286px; /* 300px width - 14px */
width: 28px;
height: 28px;
background: rgba(13, 20, 36, 0.95);
border: 1px solid var(--border);
border-radius: 50%;
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10001; /* Above sidebar */
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
padding: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
transform: translateY(-50%);
}
.amgosse-sidebar-toggle:hover {
background: var(--surface-2);
border-color: var(--primary);
color: var(--primary);
box-shadow: 0 0 15px var(--primary-glow);
}
.amgosse-sidebar-toggle svg {
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#amgosse-sidebar.collapsed + .amgosse-sidebar-toggle {
left: 70px; /* 84px width - 14px */
}
#amgosse-sidebar.collapsed + .amgosse-sidebar-toggle svg {
transform: rotate(180deg);
}
/* In collapsed mode, hide text spans/labels */
#amgosse-sidebar.collapsed .amgosse-sidebar-back span,
#amgosse-sidebar.collapsed .amgosse-sidebar-brand-title,
#amgosse-sidebar.collapsed .amgosse-sidebar-brand-sub,
#amgosse-sidebar.collapsed .amgosse-sidebar-status div,
#amgosse-sidebar.collapsed .amgosse-nav-section-label,
#amgosse-sidebar.collapsed .nav-i span,
#amgosse-sidebar.collapsed .amgosse-sidebar-user-info,
#amgosse-sidebar.collapsed .amgosse-sidebar-logout { display: none !important; }
#amgosse-sidebar.collapsed .amgosse-sidebar-back { justify-content: center; margin-bottom: 24px; }
#amgosse-sidebar.collapsed .amgosse-sidebar-brand { justify-content: center; padding: 4px 0 20px; }
#amgosse-sidebar.collapsed .amgosse-sidebar-status { justify-content: center; background: transparent; border-color: transparent; }
#amgosse-sidebar.collapsed .nav-i { justify-content: center; gap: 0; padding: 14px 0; }
#amgosse-sidebar.collapsed .nav-i svg { width: 22px; height: 22px; }
#amgosse-sidebar.collapsed .amgosse-sidebar-user { justify-content: center; padding: 0; }
#amgosse-sidebar.collapsed .amgosse-sidebar-avatar { width: 38px; height: 38px; }
#amgosse-sidebar.collapsed .amgosse-sidebar-footer { padding-top: 10px; }
.amgosse-sidebar-back {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
margin-bottom: 16px;
color: var(--muted);
font-size: 12px;
font-weight: 500;
text-decoration: none;
border-radius: var(--radius-sm);
transition: all 0.18s;
}
.amgosse-sidebar-back:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.amgosse-sidebar-brand {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 8px 20px;
}
.amgosse-sidebar-brand-icon {
width: 38px;
height: 38px;
background: linear-gradient(135deg, var(--brand-color-hover), var(--brand-color-2));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.amgosse-sidebar-brand-title {
font-size: 16px;
font-weight: 900;
color: var(--text);
line-height: 1.2;
}
.amgosse-sidebar-brand-sub {
font-size: 10px;
color: var(--muted);
letter-spacing: 1.5px;
font-weight: 600;
}
.amgosse-sidebar-status {
display: flex;
align-items: center;
gap: 10px;
background: rgba(16,185,129,0.08);
border: 1px solid rgba(16,185,129,0.2);
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 16px;
}
.amgosse-pulse-dot {
width: 8px;
height: 8px;
background: var(--green);
border-radius: 50%;
flex-shrink: 0;
animation: amgossePulse 2s infinite;
}
.amgosse-sidebar-status-label { font-size: 12px; font-weight: 600; color: #34D399; }
.amgosse-sidebar-status-count { font-size: 11px; color: var(--muted); }
.amgosse-nav-section-label {
font-size: 11px;
font-weight: 700;
color: var(--muted);
letter-spacing: 1.4px;
text-transform: uppercase;
padding: 18px 12px 10px;
margin-top: 8px;
}
/* Nav Items */
.nav-i {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: var(--radius-sm);
color: var(--muted);
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.18s;
border: none;
background: transparent;
width: 100%;
text-align: left;
font-family: var(--font);
line-height: 1.4;
}
.nav-i:hover { background: rgba(255,255,255,0.045); color: var(--text); }
.nav-i.active {
background: rgba(59,130,246,0.12);
color: #60A5FA;
box-shadow: inset 3px 0 0 var(--primary);
}
.amgosse-sidebar-footer {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.amgosse-sidebar-user {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
padding: 0 6px;
}
.amgosse-sidebar-avatar {
width: 32px;
height: 32px;
background: linear-gradient(135deg, #8B5CF6, #EC4899);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--text);
font-size: 13px;
flex-shrink: 0;
}
.amgosse-sidebar-user-info { min-width: 0; }
.amgosse-sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amgosse-sidebar-user-role { font-size: 11px; color: var(--muted); }
.amgosse-sidebar-logout { width: 100%; justify-content: flex-start !important; font-size: 12px !important; padding: 8px 12px !important; }
/* ══════════════════════════════════════
8. MAIN CONTENT
══════════════════════════════════════ */
#amgosse-main {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
background: var(--bg);
min-width: 0;
}
/* ══════════════════════════════════════
9. TAB PANES
══════════════════════════════════════ */
.amgosse-tab-pane { display: none; }
.amgosse-tab-pane.active { display: block; animation: amgosseFadeUp 0.35s ease both; }
.apad { padding: var(--card-pad); }
/* Builder tab - fullscreen mode */
#tab-builder.amgosse-tab-pane.active { display: flex !important; flex: 1; height: 100%; padding: 0 !important; overflow: hidden; }
#amgosse-builder-root { height: 100%; width: 100%; }
/* ══════════════════════════════════════
9.5 SPACING SYSTEM (Premium Safe Areas)
══════════════════════════════════════ */
/* Section spacing - Precision Normalization */
.amgosse-card { margin-bottom: 0; }
.amgosse-dash-section, .amgosse-kpi-grid { margin-bottom: var(--dash-gap); }
/* Grid spacing */
.amgosse-dash-grid { gap: var(--dash-gap); margin-bottom: var(--dash-gap); }
.amgosse-pipeline-grid { gap: var(--dash-gap); margin-bottom: var(--dash-gap); }
.amgosse-meta-grid { gap: var(--dash-gap); margin-bottom: var(--dash-gap); }
.amgosse-feature-grid { gap: var(--dash-gap); margin-bottom: var(--dash-gap); }
/* Header spacing */
.amgosse-tab-header { margin-bottom: var(--dash-gap); }
.amgosse-tab-header-block { margin-bottom: var(--dash-gap); }
/* Button groups and action spacing */
.amgosse-btn-group { gap: var(--dash-gap); }
.amgosse-quick-actions { gap: var(--dash-gap); }
.amgosse-crm-toggle { gap: 12px; margin-bottom: var(--dash-gap); }
/* ══════════════════════════════════════
10. TAB HEADERS
══════════════════════════════════════ */
.amgosse-tab-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--dash-gap);
flex-wrap: wrap;
gap: var(--dash-gap);
}
.amgosse-tab-header-block { margin-bottom: var(--dash-gap); }
.amgosse-page-title {
font-size: 26px;
font-weight: 800;
color: var(--text);
margin: 0 0 4px;
line-height: 1.2;
}
.amgosse-page-subtitle {
color: var(--muted);
font-size: 14px;
margin: 0;
}
.amgosse-status-online { color: var(--green); }
.amgosse-btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
/* ══════════════════════════════════════
11. CARDS
══════════════════════════════════════ */
.amgosse-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--card-pad);
transition: border-color 0.22s;
}
.amgosse-card:hover { border-color: var(--border-hover); }
.amgosse-card-glow { position: relative; overflow: hidden; }
.amgosse-card-glow::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(300px at top left, rgba(124,58,237,0.08), transparent 70%);
pointer-events: none;
}
.amgosse-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--dash-gap);
}
.amgosse-card-header h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0; }
.amgosse-floating-filter-head {
position: relative;
padding: 0;
margin-bottom: var(--dash-gap);
border: 0;
background: transparent;
box-shadow: none;
}
.amgosse-floating-filter-actions {
position: fixed !important;
top: 14px;
right: 24px;
z-index: 999999;
padding: 8px;
border: 1px solid rgba(148,163,184,.12);
border-radius: 18px;
background: color-mix(in srgb, var(--bg) 82%, transparent);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 18px 42px rgba(0,0,0,.16);
}
[data-theme="light"] .amgosse-floating-filter-actions,
[data-theme="apple"] .amgosse-floating-filter-actions {
background: rgba(255,255,255,.82);
border-color: rgba(15,23,42,.08);
box-shadow: 0 14px 34px rgba(15,23,42,.08);
}
@media (max-width: 900px) {
.amgosse-floating-filter-actions {
left: 64px;
right: 12px;
overflow-x: auto;
justify-content: flex-start;
}
}
.amgosse-card-section-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.amgosse-card-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 20px; }
.amgosse-card-danger { border-color: rgba(239,68,68,0.25) !important; }
.amgosse-text-danger { color: var(--red) !important; }
.amgosse-chart-wrap { position: relative; height: 220px; }
.amgosse-performance-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 18px;
align-items: stretch;
}
.amgosse-chart-panel,
.amgosse-source-panel {
min-width: 0;
border: 1px solid rgba(148,163,184,.12);
border-radius: 14px;
background: rgba(255,255,255,.018);
}
.amgosse-chart-panel {
padding: 12px 14px 14px;
}
.amgosse-chart-wrap-main {
height: 286px !important;
}
.amgosse-chart-insights {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
}
.amgosse-chart-insights span {
display: flex;
flex-direction: column;
gap: 2px;
padding: 9px 10px;
border: 1px solid rgba(148,163,184,.12);
border-radius: 10px;
background: rgba(148,163,184,.06);
color: var(--muted);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .35px;
}
.amgosse-chart-insights strong {
color: var(--text);
font-size: 13px;
font-weight: 850;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.amgosse-source-panel {
padding: 14px;
display: flex;
flex-direction: column;
}
.amgosse-source-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.amgosse-source-head span {
color: var(--text);
font-size: 13px;
font-weight: 800;
}
.amgosse-source-head strong {
color: var(--muted);
font-size: 11px;
font-weight: 700;
}
.amgosse-pie-wrap {
position: relative;
height: 166px;
margin: 4px 0 10px;
}
.amgosse-source-list {
display: grid;
gap: 8px;
margin-top: auto;
}
.amgosse-source-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 9px;
border: 1px solid rgba(148,163,184,.12);
border-radius: 10px;
background: rgba(148,163,184,.055);
color: var(--text-secondary);
font-size: 11px;
}
.amgosse-source-row span {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.amgosse-source-row i {
width: 8px;
height: 8px;
border-radius: 999px;
flex: 0 0 auto;
box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.amgosse-source-row strong {
color: var(--text);
font-size: 12px;
font-weight: 850;
white-space: nowrap;
}
.amgosse-source-row em {
color: var(--muted);
font-style: normal;
font-weight: 700;
margin-left: 3px;
}
/* ══════════════════════════════════════
12. KPI GRID
══════════════════════════════════════ */
.amgosse-kpi-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--dash-gap);
margin-bottom: var(--dash-gap);
}
/* Compact KPI cards — less padding, smaller numbers */
.amgosse-kpi-grid .amgosse-card {
padding: 16px 18px !important;
}
.amgosse-kpi-grid .amgosse-card .val,
.amgosse-kpi-grid .amgosse-card [data-metric] {
font-size: 26px !important;
font-weight: 700;
line-height: 1.1;
margin-top: 6px;
}
.amgosse-kpi-grid .amgosse-metric-label {
margin-bottom: 2px;
font-size: 9px;
letter-spacing: 1.5px;
}
.amgosse-kpi-card {
position: relative;
overflow: hidden;
padding: 22px !important;
}
.amgosse-kpi-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background: radial-gradient(circle at top right, var(--primary-glow), transparent 70%);
pointer-events: none;
}
.amgosse-kpi-icon { font-size: 24px; margin-bottom: 12px; }
.amgosse-kpi-value {
font-size: 32px;
font-weight: 300;
color: var(--text);
line-height: 1;
margin-bottom: 6px;
}
.amgosse-kpi-label {
font-size: 11px;
color: var(--muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
}
/* ══════════════════════════════════════
13. DASHBOARD GRID (chart + sidebar)
══════════════════════════════════════ */
.amgosse-dash-grid {
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--dash-gap);
margin-bottom: var(--dash-gap);
}
.amgosse-dash-side { display: flex; flex-direction: column; gap: var(--dash-gap); }
.amgosse-quick-actions {
display: flex;
flex-direction: column;
gap: var(--dash-gap);
}
.amgosse-qa-btn { width: 100%; justify-content: center !important; }
/* ══════════════════════════════════════
14. PIPELINE GRID
══════════════════════════════════════ */
.amgosse-pipeline-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--dash-gap);
margin-bottom: var(--dash-gap);
}
.amgosse-pipeline-card {
border-top: 3px solid var(--muted) !important;
padding: 18px !important;
}
.amgosse-pipeline-card[data-stage-color="blue"] { border-top-color: var(--primary) !important; }
.amgosse-pipeline-card[data-stage-color="yellow"] { border-top-color: var(--amber) !important; }
.amgosse-pipeline-card[data-stage-color="green"] { border-top-color: var(--green) !important; }
.amgosse-pipeline-card[data-stage-color="purple"] { border-top-color: var(--purple) !important; }
.amgosse-pipeline-value { font-size: 28px; font-weight: 300; color: var(--text); }
.amgosse-pipeline-label { font-size: 11px; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; }
/* ══════════════════════════════════════
15. CRM COMPONENTS
══════════════════════════════════════ */
.amgosse-crm-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.crm-view-btn.active { background: var(--primary) !important; color: var(--text-on-brand) !important; border-color: transparent !important; }
.amgosse-crm-toolbar {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
margin: -24px -24px 16px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Input de busca com ícone 🔍 embutido */
.amgosse-crm-toolbar #crm-search-input.ai {
flex: 1 1 260px;
min-width: 220px;
max-width: 420px;
height: 40px;
padding: 10px 14px 10px 40px;
font-size: 13px;
font-weight: 500;
color: #E5E7EB;
background: rgba(255,255,255,0.03) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 14px center;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
transition: all .18s ease;
}
.amgosse-crm-toolbar #crm-search-input.ai::placeholder { color: var(--muted); font-weight: 500; }
.amgosse-crm-toolbar #crm-search-input.ai:hover {
background-color: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.14);
}
.amgosse-crm-toolbar #crm-search-input.ai:focus {
background-color: rgba(59,130,246,0.06);
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
/* Selects dark com chevron customizado */
.amgosse-crm-toolbar .amgosse-crm-select.ai {
width: auto !important;
min-width: 170px !important;
flex: 0 0 auto !important;
height: 40px;
padding: 0 38px 0 14px;
font-size: 13px;
font-weight: 600;
color: #E5E7EB;
background: rgba(255,255,255,0.03) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
cursor: pointer;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
transition: all .18s ease;
}
.amgosse-crm-toolbar .amgosse-crm-select.ai:hover {
background-color: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.14);
color: var(--text);
}
.amgosse-crm-toolbar .amgosse-crm-select.ai:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
.amgosse-crm-toolbar .amgosse-crm-select.ai option {
background: var(--surface);
color: #E5E7EB;
padding: 8px;
}
/* Override WP admin core form styles */
.amgosse-crm-toolbar input[type="text"],
.amgosse-crm-toolbar input[type="search"],
.amgosse-crm-toolbar select {
box-shadow: none !important;
line-height: normal !important;
}
@media (max-width: 720px) {
.amgosse-crm-toolbar { flex-direction: column; align-items: stretch; }
.amgosse-crm-toolbar #crm-search-input.ai,
.amgosse-crm-toolbar .amgosse-crm-select.ai { max-width: 100% !important; width: 100% !important; min-width: 0 !important; }
}
.amgosse-lead-cell { display: flex; align-items: center; gap: 10px; }
.amgosse-lead-avatar {
width: 30px;
height: 30px;
background: linear-gradient(135deg, var(--brand-color-hover), var(--brand-color-2));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--text);
font-size: 12px;
flex-shrink: 0;
}
.amgosse-score-badge {
display: inline-flex;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
background: rgba(0,0,0,0.2);
border: 1px solid var(--border);
color: var(--text-secondary);
}
.amgosse-actions { display: flex; gap: 6px; }
.amgosse-pagination { padding: 16px 24px; display: flex; gap: 8px; justify-content: center; }
.text-muted { color: var(--muted) !important; }
/* ══════════════════════════════════════
16. KANBAN BOARD
══════════════════════════════════════ */
.amgosse-kanban-wrap { margin-bottom: var(--dash-gap); }
.k-board { display: flex; gap: var(--dash-gap); overflow-x: auto; min-height: 300px; }
.k-col {
flex: 1;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
}
.k-col-h {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
font-size: 13px;
font-weight: 700;
color: var(--text);
border-bottom: 1px solid var(--border);
}
.k-col-dot[data-color="blue"] { color: var(--primary); }
.k-col-dot[data-color="yellow"] { color: var(--amber); }
.k-col-dot[data-color="green"] { color: var(--green); }
.k-col-dot[data-color="purple"] { color: var(--purple); }
.k-col-dot[data-color="gray"] { color: var(--muted); }
.k-list { padding: 8px; flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.k-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px 12px;
font-size: 12px;
color: var(--text);
cursor: grab;
transition: all 0.15s;
}
.k-card:hover { border-color: var(--border-hover); background: var(--surface-3); }
.k-card-name { font-weight: 600; margin-bottom: 2px; }
.k-card-email { color: var(--muted); font-size: 11px; }
/* ══════════════════════════════════════
17. BUTTONS (.ab)
══════════════════════════════════════ */
.ab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 13px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
white-space: nowrap;
line-height: 1.4;
color: var(--text);
}
.ab-p { background: var(--primary) !important; color: var(--text-on-brand) !important; }
.ab-p:hover { background: var(--primary-hover) !important; box-shadow: 0 0 20px 4px var(--primary-glow); transform: translateY(-1px); }
.ab-s { background: rgba(255,255,255,0.05) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; }
.ab-s:hover { background: rgba(255,255,255,0.09) !important; color: var(--text-on-brand) !important; }
.ab-g { background: var(--green) !important; color: var(--text-on-brand) !important; }
.ab-g:hover { background: #059669 !important; box-shadow: 0 0 16px rgba(16,185,129,0.4); }
.ab-d { background: transparent !important; color: var(--red) !important; border: 1px solid rgba(239,68,68,0.3) !important; }
.ab-d:hover { background: rgba(239,68,68,0.1) !important; }
.ab-sm { padding: 4px 10px !important; font-size: 11px !important; }
/* ══════════════════════════════════════
18. INPUTS (.ai) & LABELS (.al)
══════════════════════════════════════ */
.ai {
width: 100%;
padding: 14px 16px;
background: rgba(0,0,0,0.35);
color: var(--text);
border: 1px solid rgba(255,255,255,0.09);
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}
.ai:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.ai::placeholder { color: var(--muted); }
.ai option { background: var(--surface); color: var(--text); }
select.ai { appearance: auto; cursor: pointer; }
textarea.ai { resize: vertical; min-height: 100px; font-family: var(--font); }
.al {
display: block;
margin-bottom: 10px;
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.amgosse-form-stack { display: flex; flex-direction: column; gap: 20px; }
.amgosse-form-submit { margin-top: 24px; }
/* ══════════════════════════════════════
19. TABLES (.at)
══════════════════════════════════════ */
.at { width: 100%; border-collapse: collapse; }
.at thead th {
padding: 16px 20px;
color: var(--muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
border-bottom: 1px solid var(--border);
text-align: left;
background: transparent;
}
.at tbody tr { transition: background 0.14s; }
.at tbody tr:hover { background: rgba(255,255,255,0.024); }
.at tbody td {
padding: 18px 20px;
color: var(--text);
font-size: 13px;
border-bottom: 1px solid rgba(255,255,255,0.04);
background: transparent;
}
.at tbody td strong { color: var(--text); }
.amgosse-table-scroll { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
.amgosse-shortcode-chip {
background: rgba(59,130,246,0.08);
padding: 4px 10px;
border-radius: 6px;
color: #60A5FA;
font-size: 11px;
border: 1px solid rgba(59,130,246,0.2);
cursor: pointer;
font-family: monospace;
}
.amgosse-shortcode-chip:hover { background: rgba(59,130,246,0.15); }
/* ══════════════════════════════════════
20. BADGES
══════════════════════════════════════ */
.badge-green { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(16,185,129,0.1); color: var(--green); border: 1px solid rgba(16,185,129,0.25); }
.badge-blue { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(59,130,246,0.1); color: #60A5FA; border: 1px solid rgba(59,130,246,0.25); }
.badge-red { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(239,68,68,0.1); color: var(--red); border: 1px solid rgba(239,68,68,0.25); }
.badge-purple { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(139,92,246,0.1); color: #A78BFA; border: 1px solid rgba(139,92,246,0.25); }
.badge-yellow { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(245,158,11,0.1); color: var(--amber); border: 1px solid rgba(245,158,11,0.25); }
.badge-amber { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(245,158,11,0.1); color: var(--amber); border: 1px solid rgba(245,158,11,0.25); }
.badge-gray { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(100,116,139,0.10); color: var(--text-secondary); border: 1px solid rgba(100,116,139,0.25); }
/* Não Convertido — tom cinza esfumaçado, distinto de Abandonado (vermelho) */
.badge-gray-dark { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(71,85,105,0.18); color: #CBD5E1; border: 1px solid rgba(148,163,184,0.28); }
/* WhatsApp pill button */
.am-wa-link { text-decoration: none; display: inline-block; }
.am-wa-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; background: rgba(37,211,102,0.08); border: 1px solid rgba(37,211,102,0.2); color: #25D366; font-size: 12px; font-weight: 600; transition: all 0.2s ease; white-space: nowrap; }
.am-wa-pill svg { color: #25D366; flex-shrink: 0; }
.am-wa-link:hover .am-wa-pill { background: rgba(37,211,102,0.18); border-color: rgba(37,211,102,0.4); box-shadow: 0 0 12px rgba(37,211,102,0.15); transform: translateY(-1px); }
/* ══════════════════════════════════════
21. MODAL
══════════════════════════════════════ */
#amgosse-modal-bg {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 100000;
align-items: center;
justify-content: center;
}
#amgosse-modal-bg.open { display: flex; }
#amgosse-modal-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 32px;
width: 90%;
max-width: 520px;
max-height: 80vh;
overflow-y: auto;
position: relative;
animation: amgosseModalIn 0.25s ease;
box-shadow: var(--shadow-lg);
}
#amgosse-modal-title { color: var(--text); margin: 0 0 20px; font-size: 18px; font-weight: 700; }
.amgosse-modal-close {
position: absolute;
top: 14px;
right: 16px;
background: transparent;
border: none;
color: var(--muted);
font-size: 22px;
cursor: pointer;
line-height: 1;
padding: 4px;
border-radius: 4px;
transition: all 0.15s;
}
.amgosse-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.05); }
@keyframes amgosseModalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
body.amgosse-preview-modal-open #amgosse-modal-card {
width: min(98vw, 1360px);
max-width: 1360px;
height: min(94vh, 920px);
max-height: 94vh;
padding: 0;
overflow: hidden;
border-radius: 22px;
background:
radial-gradient(circle at 20% 0%, rgba(59,130,246,.18), transparent 34%),
radial-gradient(circle at 82% 12%, rgba(16,185,129,.12), transparent 36%),
var(--surface);
}
body.amgosse-preview-modal-open #amgosse-modal-title { display: none; }
body.amgosse-preview-modal-open #amgosse-modal-body { height: 100%; }
body.amgosse-preview-modal-open .amgosse-modal-close {
z-index: 4;
top: 18px;
right: 18px;
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(15,23,42,.62);
border: 1px solid rgba(148,163,184,.22);
color: #fff;
}
.amgosse-ad-preview-shell {
height: 100%;
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
color: var(--text);
}
.amgosse-ad-preview-side {
padding: 30px 24px;
border-right: 1px solid var(--border);
background: rgba(15,23,42,.28);
display: flex;
flex-direction: column;
gap: 16px;
}
.amgosse-ad-preview-kicker {
color: var(--brand-color);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.amgosse-ad-preview-side h2 {
margin: 0;
color: var(--text);
font-size: 20px;
line-height: 1.25;
}
.amgosse-ad-preview-id {
color: var(--muted);
font-size: 11px;
word-break: break-all;
}
.amgosse-ad-preview-tabs {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.amgosse-ad-preview-note {
margin-top: auto;
padding: 14px;
border-radius: 14px;
background: rgba(59,130,246,.1);
border: 1px solid rgba(59,130,246,.22);
color: var(--muted);
font-size: 12px;
line-height: 1.55;
}
.amgosse-ad-preview-stage {
min-width: 0;
padding: 24px;
display: flex;
flex-direction: column;
background:
linear-gradient(135deg, rgba(255,255,255,.04), transparent),
rgba(2,6,23,.18);
}
.amgosse-ad-preview-topbar {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 0 46px 16px 0;
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.amgosse-ad-preview-frame {
flex: 1;
min-height: 0;
border: 1px solid var(--border);
border-radius: 20px;
background:
linear-gradient(45deg, rgba(148,163,184,.06) 25%, transparent 25%),
linear-gradient(-45deg, rgba(148,163,184,.06) 25%, transparent 25%),
rgba(2,6,23,.25);
background-size: 24px 24px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 18px;
}
.amgosse-ad-preview-frame.is-vertical {
padding: 28px;
}
.amgosse-ad-preview-render {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
.amgosse-ad-preview-frame.is-vertical .amgosse-ad-preview-render iframe {
max-height: calc(94vh - 120px) !important;
height: min(760px, calc(94vh - 120px)) !important;
}
.amgosse-clean-preview-btn {
width: 100%;
padding: 13px 14px;
border-radius: 14px;
border: 1px solid rgba(16,185,129,.4);
background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(59,130,246,.12));
color: var(--text);
font-weight: 800;
text-align: left;
cursor: pointer;
}
.amgosse-clean-viewer {
width: 100%;
height: 100%;
min-height: 0;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 14px;
}
.amgosse-clean-main {
min-height: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 18px;
background: rgba(0,0,0,.32);
}
.amgosse-clean-main img,
.amgosse-clean-main video {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 14px;
box-shadow: 0 24px 80px rgba(0,0,0,.32);
}
.amgosse-clean-main video {
width: auto;
max-width: 100%;
max-height: 100%;
aspect-ratio: auto;
}
.amgosse-clean-strip {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 2px;
}
.amgosse-clean-strip button {
width: 74px;
height: 74px;
flex: 0 0 auto;
padding: 0;
border-radius: 12px;
border: 2px solid transparent;
background: rgba(255,255,255,.05);
overflow: hidden;
cursor: pointer;
}
.amgosse-clean-strip button.active {
border-color: var(--brand-color);
}
.amgosse-clean-strip img,
.amgosse-clean-strip video {
width: 100%;
height: 100%;
object-fit: cover;
}
.amgosse-ad-preview-loader,
.amgosse-ad-preview-empty {
text-align: center;
color: var(--muted);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 30px;
}
.amgosse-ad-preview-loader span {
width: 34px;
height: 34px;
border-radius: 999px;
border: 3px solid rgba(148,163,184,.25);
border-top-color: var(--brand-color);
animation: amgosseSpin .8s linear infinite;
}
.amgosse-ad-preview-loader strong,
.amgosse-ad-preview-empty strong {
color: var(--text);
}
.amgosse-ad-preview-empty.is-error strong {
color: var(--danger);
}
@keyframes amgosseSpin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
body.amgosse-preview-modal-open #amgosse-modal-card {
width: 96vw;
height: 92vh;
}
.amgosse-ad-preview-shell {
grid-template-columns: 1fr;
}
.amgosse-ad-preview-side {
border-right: 0;
border-bottom: 1px solid var(--border);
padding: 20px;
}
.amgosse-ad-preview-tabs {
flex-direction: row;
overflow-x: auto;
}
.amgosse-ad-preview-tabs button {
min-width: 130px;
}
.amgosse-ad-preview-note {
display: none;
}
}
/* Dashboard — Top Criativos Campeões */
.amgosse-dash-creative-ranking {
padding: 0 22px 20px;
display: grid;
gap: 10px;
}
.amgosse-dash-ranking-empty {
padding: 18px 0;
color: var(--muted);
font-size: 12px;
}
.amgosse-dash-rank-card {
position: relative;
display: grid;
grid-template-columns: 46px auto minmax(0, 1fr);
align-items: center;
gap: 12px;
padding: 14px 16px 14px 18px;
border: 1px solid var(--border);
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
overflow: hidden;
}
.amgosse-dash-rank-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
opacity: .95;
pointer-events: none;
}
.amgosse-dash-rank-card.rank-gold {
border-color: rgba(250,204,21,.30);
background:
linear-gradient(135deg, rgba(250,204,21,.10), rgba(255,255,255,.024)),
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(250,204,21,.07);
}
.amgosse-dash-rank-card.rank-gold::before {
background: linear-gradient(180deg, #FDE68A, #F59E0B);
}
.amgosse-dash-rank-card.rank-silver {
border-color: rgba(226,232,240,.24);
background:
linear-gradient(135deg, rgba(226,232,240,.075), rgba(255,255,255,.02)),
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
.amgosse-dash-rank-card.rank-silver::before {
background: linear-gradient(180deg, #F8FAFC, #94A3B8);
}
.amgosse-dash-rank-card.rank-bronze {
border-color: rgba(245,158,11,.22);
background:
linear-gradient(135deg, rgba(245,158,11,.07), rgba(255,255,255,.02)),
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
.amgosse-dash-rank-card.rank-bronze::before {
background: linear-gradient(180deg, #FDBA74, #B45309);
}
.amgosse-dash-rank-trophy {
position: relative;
z-index: 1;
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.13);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 22px rgba(0,0,0,.14);
isolation: isolate;
}
.amgosse-dash-rank-trophy::before {
content: "";
position: absolute;
inset: 1px;
border-radius: 11px;
background: radial-gradient(circle at 30% 10%, rgba(255,255,255,.16), transparent 42%);
z-index: -1;
}
.amgosse-dash-rank-trophy svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 5px 8px rgba(0,0,0,.18));
}
.amgosse-dash-rank-position {
position: absolute;
top: 10px;
right: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(148,163,184,.28);
font-size: 22px;
font-weight: 900;
letter-spacing: -.5px;
line-height: 1;
}
.amgosse-dash-rank-trophy.trophy-gold {
background: rgba(250,204,21,.10);
color: #FACC15;
border-color: rgba(250,204,21,.28);
}
.amgosse-dash-rank-trophy.trophy-silver {
background: rgba(226,232,240,.08);
color: #E2E8F0;
border-color: rgba(226,232,240,.22);
}
.amgosse-dash-rank-trophy.trophy-bronze {
background: rgba(245,158,11,.08);
color: #FBBF24;
border-color: rgba(245,158,11,.22);
}
.amgosse-dash-rank-thumb {
position: relative;
z-index: 1;
}
.amgosse-dash-rank-main {
position: relative;
z-index: 1;
min-width: 0;
}
.amgosse-dash-rank-topline {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.amgosse-dash-rank-topline strong {
color: var(--text);
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.amgosse-dash-rank-topline em {
flex: 0 0 auto;
padding: 2px 7px;
border-radius: 999px;
background: rgba(59,130,246,.12);
color: var(--brand-color);
font-style: normal;
font-size: 9px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .5px;
}
.rank-gold .amgosse-dash-rank-topline em {
background: rgba(250,204,21,.18);
color: #FACC15;
}
.amgosse-dash-rank-campaign {
margin-top: 3px;
color: var(--muted);
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.amgosse-dash-rank-metrics {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
.amgosse-dash-rank-metrics span {
display: inline-flex;
align-items: baseline;
gap: 3px;
padding: 4px 7px;
border-radius: 8px;
background: rgba(148,163,184,.08);
border: 1px solid rgba(148,163,184,.12);
color: var(--muted);
font-size: 10px;
}
.amgosse-dash-rank-metrics b {
color: var(--text);
font-size: 11px;
}
/* ══════════════════════════════════════
22. HAMBURGER (mobile)
══════════════════════════════════════ */
#amgosse-hamburger {
display: none;
position: fixed;
top: 14px;
left: 14px;
z-index: 101;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px 11px;
cursor: pointer;
color: var(--text);
font-size: 18px;
line-height: 1;
}
/* ══════════════════════════════════════
23. EMPTY STATE
══════════════════════════════════════ */
.amgosse-empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.amgosse-empty-icon { font-size: 40px; opacity: 0.2; margin-bottom: 12px; }
.amgosse-empty-state p { margin: 0; font-size: 14px; }
/* ══════════════════════════════════════
24. ALERTS
══════════════════════════════════════ */
.amgosse-alert {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 22px;
border-radius: var(--radius-md);
margin-bottom: 24px;
}
.amgosse-alert-warn { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.22); }
.amgosse-alert-icon { font-size: 22px; flex-shrink: 0; }
.amgosse-alert-title { font-weight: 700; color: #FCD34D; margin-bottom: 2px; font-size: 14px; }
.amgosse-alert-desc { font-size: 13px; color: var(--muted); }
/* ══════════════════════════════════════
25. PREMIUM DASHBOARD (MEGA GRID)
══════════════════════════════════════ */
.amgosse-dash-mega-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: var(--dash-gap);
align-items: start;
}
.dash-col-left {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--dash-gap);
}
.dash-col-right {
position: sticky;
top: 0px;
display: flex;
flex-direction: column;
gap: var(--dash-gap);
}
/* Conversion Funnel - Precision Overhaul */
.amgosse-funnel-visual {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 16px 0;
}
.funnel-step {
height: 52px;
background: rgba(59,130,246,0.06);
border: 1px solid rgba(59,130,246,0.12);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
position: relative;
transition: all 0.2s ease-out;
margin-bottom: 2px;
box-sizing: border-box;
min-width: 200px;
}
.funnel-step:hover {
background: rgba(59,130,246,0.1);
border-color: var(--primary);
}
.funnel-step .label {
font-size: 9px;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
flex: 1;
}
.funnel-step .val {
font-size: 18px;
font-weight: 900;
color: var(--text);
flex: 1;
text-align: center;
}
.funnel-step .pct {
font-size: 10px;
font-weight: 800;
color: var(--primary);
background: rgba(59,130,246,0.08);
padding: 3px 8px;
border-radius: 6px;
flex: 1;
text-align: right;
}
/* The "Sales" Pinnacle - Fixed Alignment */
.funnel-step[data-metric="funnel-sales"] {
background: linear-gradient(135deg, var(--green), #059669) !important;
border: none !important;
height: 56px;
min-width: 220px; /* Force minimum space for value */
}
.funnel-step[data-metric="funnel-sales"] .label { color: rgba(0,0,0,0.6); }
.funnel-step[data-metric="funnel-sales"] .val {
color: #000;
font-size: 20px;
}
.funnel-step[data-metric="funnel-sales"] .pct {
background: rgba(0,0,0,0.1);
color: #000;
border-color: transparent;
}
/* Meta Ads Components - Precision Layout */
.amgosse-meta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--dash-gap);
}
.amgosse-metric-box {
background: rgba(255,255,255,0.03);
padding: var(--card-pad);
border-radius: var(--radius-md);
border: 1px solid var(--border);
transition: transform 0.2s;
}
.amgosse-metric-box:hover {
transform: translateY(-2px);
background: rgba(255,255,255,0.05);
}
.amgosse-metric-box .al {
font-size: 9px;
font-weight: 800;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 6px;
}
.amgosse-metric-box .val {
font-size: 18px;
font-weight: 900;
color: var(--text);
}
/* Modifiers */
.amgosse-metric-box.m-green {
background: rgba(16,185,129,0.04);
border-color: rgba(16,185,129,0.15);
}
.amgosse-metric-box.m-green .al, .amgosse-metric-box.m-green .val { color: var(--green); }
.amgosse-metric-box.m-purple {
border-left: 3px solid #8B5CF6;
background: radial-gradient(circle at top right, rgba(139,92,246,0.08), transparent 70%);
}
.amgosse-metric-box.m-purple .val { color: #A78BFA; }
.amgosse-metric-box.m-blue {
border-left: 3px solid var(--primary);
background: radial-gradient(circle at top right, rgba(59,130,246,0.08), transparent 70%);
}
.amgosse-metric-box.m-blue .val { color: #60A5FA; }
.amgosse-metric-box.m-blue .val { color: var(--primary); }
.amgosse-meta-footer {
margin-top: var(--dash-gap);
border-top: 1px solid var(--border);
padding-top: var(--dash-gap);
}
/* Dashboard Grids */
.amgosse-kpi-grid, .amgosse-attribution-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--dash-gap);
}
.amgosse-attribution-grid {
grid-template-columns: repeat(3, 1fr);
}
.amgosse-metric-label {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 12px;
}
.amgosse-metric-flex {
display: flex;
align-items: center;
gap: 12px;
}
.amgosse-metric-flex .val {
font-size: 36px;
font-weight: 900;
color: var(--text);
line-height: 1;
}
.badge-status {
font-size: 11px;
color: var(--muted);
font-weight: 700;
}
/* Geo Pulse */
.geo-pulse {
position: absolute;
width: 12px;
height: 12px;
background: var(--primary);
border-radius: 50%;
box-shadow: 0 0 0 rgba(59,130,246, 0.4);
animation: geoPulse 2s infinite;
}
@keyframes geoPulse {
0% { box-shadow: 0 0 0 0 rgba(59,130,246, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(59,130,246, 0); }
100% { box-shadow: 0 0 0 0 rgba(59,130,246, 0); }
}
@media (max-width: 1200px) {
.amgosse-dash-mega-grid { grid-template-columns: 1fr; }
.dash-col-right { position: static; }
}
.amgosse-event-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
background: rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
margin-bottom: 10px;
}
.amgosse-event-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.amgosse-event-desc { font-size: 11px; color: var(--muted); }
/* ══════════════════════════════════════
26. AI STUDIO
══════════════════════════════════════ */
.amgosse-ai-header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.amgosse-ai-icon {
width: 42px;
height: 42px;
background: linear-gradient(135deg, var(--brand-color-2), #EC4899);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.amgosse-ai-form { display: flex; flex-direction: column; gap: 14px; }
.amgosse-ai-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.amgosse-ai-output { line-height: 1.7; font-size: 14px; white-space: pre-wrap; }
.amgosse-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 20px;
}
.amgosse-feature-icon { font-size: 28px; margin-bottom: 10px; }
.amgosse-feature-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 7px; }
.amgosse-feature-desc { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }
/* ══════════════════════════════════════
27. SETTINGS
══════════════════════════════════════ */
.amgosse-settings-stack { display: flex; flex-direction: column; gap: 20px; max-width: 700px; }
/* ══════════════════════════════════════
28. ACCESS DENIED
══════════════════════════════════════ */
.amgosse-denied-backdrop {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
}
.amgosse-denied-card { text-align: center; padding: 60px 48px; max-width: 400px; }
.amgosse-denied-icon { font-size: 48px; margin-bottom: 18px; }
.amgosse-denied-title { color: var(--primary); font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.amgosse-denied-desc { color: var(--muted); margin-bottom: 24px; font-size: 14px; }
/* ══════════════════════════════════════
29. ANIMATIONS
══════════════════════════════════════ */
@keyframes amgosseFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes amgossePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes amgossePulseDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.65; } }
@keyframes amgosseFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.fade-up { animation: amgosseFadeUp 0.4s cubic-bezier(0.16,1,0.3,1) both; }
.fade-up-d1 { animation-delay: 0.06s; }
.fade-up-d2 { animation-delay: 0.12s; }
.fade-up-d3 { animation-delay: 0.18s; }
.fade-up-d4 { animation-delay: 0.24s; }
/* ══════════════════════════════════════
30. TOAST NOTIFICATION
══════════════════════════════════════ */
.amgosse-toast {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px 22px;
color: var(--text);
font-size: 13px;
font-weight: 500;
z-index: 100001;
animation: amgosseFadeUp 0.3s ease both;
box-shadow: var(--shadow-md);
}
/* ══════════════════════════════════════
30.5 CUSTOM SELECT DROPDOWN
══════════════════════════════════════ */
.amgosse-custom-select-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
/* Hide the native select — still in DOM for JS .value / .innerHTML / events */
.amgosse-custom-select-wrap > select {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0 !important;
height: 0 !important;
border: none;
padding: 0;
margin: 0;
overflow: hidden;
}
/* Trigger button */
.amgosse-custom-select-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 12px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
color: var(--text);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
cursor: pointer;
white-space: nowrap;
max-width: 220px;
transition: background 0.18s, border-color 0.18s;
outline: none;
}
.amgosse-custom-select-btn:hover {
background: rgba(255,255,255,0.09);
border-color: rgba(255,255,255,0.2);
}
.amgosse-custom-select-btn .amgosse-csd-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.amgosse-custom-select-btn .amgosse-csd-chevron {
flex-shrink: 0;
transition: transform 0.2s;
opacity: 0.6;
}
.amgosse-custom-select-wrap.open .amgosse-csd-chevron {
transform: rotate(180deg);
}
/* Dropdown panel — rendered as a body portal to escape overflow:hidden parents */
.amgosse-custom-select-dropdown {
display: none;
position: absolute; /* overridden to absolute via JS top/left coords */
width: max-content;
max-height: 360px;
overflow-y: auto;
overflow-x: visible;
background: #0F1628;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
z-index: 999999;
padding: 8px;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.amgosse-custom-select-dropdown.open {
display: block;
animation: amgosseDropDown 0.2s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes amgosseDropDown {
from { opacity: 0; transform: translateY(-8px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.amgosse-custom-select-dropdown::-webkit-scrollbar { width: 4px; }
.amgosse-custom-select-dropdown::-webkit-scrollbar-track { background: transparent; }
.amgosse-custom-select-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
/* Option item */
.amgosse-csd-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.65);
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: background 0.14s, color 0.14s;
white-space: nowrap;
}
.amgosse-csd-option:hover {
background: rgba(255,255,255,0.07);
color: var(--text);
}
.amgosse-csd-option.selected {
background: rgba(37,99,235,0.18);
color: var(--primary);
}
.amgosse-csd-option .amgosse-csd-check {
flex-shrink: 0;
width: 16px;
color: var(--primary);
}
.amgosse-csd-option .amgosse-csd-text {
overflow: visible;
text-overflow: unset;
}
/* ══════════════════════════════════════
31. BUILDER (placeholder)
══════════════════════════════════════ */
#amgosse-builder-root {
height: calc(100vh - 0px);
background: var(--bg);
position: relative;
}
/* ══════════════════════════════════════
32. RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1400px) {
.amgosse-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1200px) {
.amgosse-kpi-grid { grid-template-columns: repeat(3, 1fr); }
.amgosse-pipeline-grid { grid-template-columns: repeat(3, 1fr); }
.amgosse-dash-grid { grid-template-columns: 1fr; }
.amgosse-performance-grid { grid-template-columns: 1fr; }
.amgosse-source-panel { min-height: 260px; }
.amgosse-meta-grid { grid-template-columns: repeat(3, 1fr) !important; }
.amgosse-feature-grid { grid-template-columns: repeat(2, 1fr); }
.amgosse-ai-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
#amgosse-hamburger { display: flex !important; align-items: center; justify-content: center; }
#amgosse-sidebar {
position: fixed !important;
left: 0;
top: 0;
height: 100vh;
transform: translateX(-110%);
transition: transform 0.3s ease;
z-index: 200;
box-shadow: var(--shadow-lg);
}
#amgosse-sidebar.open { transform: translateX(0) !important; }
.apad { padding: 20px 16px !important; }
.amgosse-kpi-grid { grid-template-columns: repeat(2, 1fr); }
.amgosse-attribution-grid { grid-template-columns: 1fr 1fr; }
.amgosse-pipeline-grid { grid-template-columns: repeat(2, 1fr); }
.amgosse-chart-insights { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.amgosse-kpi-grid,
.amgosse-attribution-grid,
.amgosse-pipeline-grid,
.amgosse-feature-grid,
.amgosse-meta-grid,
.amgosse-ai-form-row { grid-template-columns: 1fr !important; }
.amgosse-tab-header { flex-direction: column; }
.at thead th:nth-child(n+4),
.at tbody td:nth-child(n+4) { display: none; }
}
/* ══════════════════════════════════════
3. BUILDER UI SCAFFOLD
══════════════════════════════════════ */
:root {
--s-1: 8px;
--s-2: 12px;
--s-3: 16px;
--s-4: 24px;
--s-5: 32px;
--fw-extrabold: 800;
--bg-main: var(--bg);
--bg-sidebar: var(--surface);
--text-main: #E2E8F0;
--text-sub: var(--text-secondary);
--border: rgba(255, 255, 255, 0.07);
}
/* Main Builder Wrapper */
.am-builder-wrapper {
display: flex;
position: relative;
width: 100%;
height: 100%;
background: var(--bg-main);
color: var(--text-main);
font-family: var(--font);
}
/* Left Sidebar - Components */
.am-sb-l {
width: 220px;
background: var(--bg-sidebar);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Center Area */
.am-builder-center {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Builder Viewport */
.am-viewport {
flex: 1;
position: relative;
overflow: hidden;
background: var(--bg-main);
}
/* Canvas */
.am-canvas {
position: absolute;
width: 100%;
height: 100%;
cursor: grab;
}
.am-canvas.mode-pan {
cursor: grabbing;
}
/* Right Sidebar - Properties */
.am-sb-r {
width: 300px;
background: var(--bg-sidebar);
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.am-sb-r.collapsed {
width: 0;
border-left: none;
}
/* Widget Buttons */
.widget-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s-1);
padding: var(--s-2);
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
color: var(--text-sub);
font-size: 12px;
font-weight: 600;
}
.widget-btn:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.14);
color: var(--text-main);
}
/* Control Bar */
.am-control-bar {
display: flex;
align-items: center;
gap: 16px;
}
/* Mobile Lock Overlay */
.am-mobile-lock {
position: absolute;
inset: 0;
background: rgba(5, 11, 24, 0.95);
backdrop-filter: blur(8px);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
}
.am-mobile-lock-icon {
margin-bottom: var(--s-3);
display: flex;
align-items: center;
justify-content: center;
}
.am-mobile-lock-icon svg {
width: 64px;
height: 64px;
}
/* Mobile Responsive */
@media (max-width: 1200px) {
.am-sb-l {
width: 180px;
}
.am-sb-r {
width: 250px;
}
}
@media (max-width: 900px) {
.am-sb-l {
width: 160px;
}
.am-sb-r {
width: 220px;
}
}
@media (max-width: 600px) {
.am-mobile-lock {
display: flex !important;
}
.am-builder-wrapper > div:not(.am-mobile-lock) {
display: none;
}
}
/* ══════════════════════════════════════
33. BUILDER NODE / CARD PREMIUM STYLES
══════════════════════════════════════ */
/* ── Extra CSS Variables for inline-style compatibility ── */
:root {
--bg-card: var(--surface-2);
--r-md: 12px;
--shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
/* Removidos --success: var(--success) e --warning: var(--warning) — eram loops infinitos. Tokens canônicos vêm de amgosse-tokens.css */
}
/* ── Floating keyframe ── */
@keyframes amFloating {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
/* ── Dashed SVG edge animation ── */
@keyframes amDashFlow {
from { stroke-dashoffset: 24; }
to { stroke-dashoffset: 0; }
}
.dashed-edge {
stroke: var(--primary);
stroke-width: 2;
stroke-dasharray: 6 6;
fill: none;
opacity: 0.7;
animation: amDashFlow 0.6s linear infinite;
filter: drop-shadow(0 0 3px rgba(59,130,246,0.5));
transition: stroke 0.2s, opacity 0.2s;
}
.dashed-edge:hover {
stroke: #60A5FA;
opacity: 1;
filter: drop-shadow(0 0 6px rgba(96,165,250,0.7));
}
/* ── Node Wrapper (position: absolute on canvas) ── */
.node-wrapper {
position: absolute;
cursor: pointer;
user-select: none;
transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
filter 0.18s ease;
z-index: 10;
}
.node-wrapper:hover {
z-index: 20;
transform: translateY(-2px) scale(1.01);
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}
.node-wrapper.selected {
z-index: 30;
transform: translateY(-3px) scale(1.015);
filter: drop-shadow(0 0 0 2px var(--primary))
drop-shadow(0 0 18px rgba(59,130,246,0.55))
drop-shadow(0 12px 36px rgba(0,0,0,0.7));
}
/* ── Node Card ── */
.node-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md);
min-width: 200px;
max-width: 260px;
box-shadow: var(--shadow-lg);
overflow: visible;
position: relative;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.node-wrapper:hover .node-card {
border-color: var(--border-hover);
box-shadow: 0 20px 60px rgba(0,0,0,0.65),
inset 0 1px 0 rgba(255,255,255,0.06);
}
.node-wrapper.selected .node-card {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(59,130,246,0.35),
0 20px 60px rgba(0,0,0,0.7),
inset 0 1px 0 rgba(255,255,255,0.08);
background: #131f35;
}
/* Subtle shimmer overlay on selected */
.node-wrapper.selected .node-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r-md);
background: linear-gradient(
135deg,
rgba(59,130,246,0.06) 0%,
transparent 60%
);
pointer-events: none;
z-index: 0;
}
/* ── Node Header ── */
.node-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: var(--r-md) var(--r-md) 0 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--text);
position: relative;
z-index: 1;
/* default header color — overridden per-type via inline style */
background: linear-gradient(90deg, var(--surface-3), var(--text-strong));
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.node-header .node-type-icon {
font-size: 14px;
flex-shrink: 0;
filter: drop-shadow(0 0 6px currentColor);
}
/* ── Node Body ── */
.node-body {
padding: 12px 14px 14px;
position: relative;
z-index: 1;
}
.node-body p,
.node-body span {
margin: 0;
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.5;
}
.node-body strong {
color: var(--text);
font-weight: 600;
}
/* ── Connection Dots ── */
.node-dot {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--surface-3);
border: 2.5px solid var(--text-secondary);
top: 50%;
transform: translateY(-50%);
transition: border-color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
z-index: 40;
cursor: crosshair;
}
.node-dot:hover {
border-color: var(--primary);
background: rgba(59,130,246,0.25);
box-shadow: 0 0 0 4px rgba(59,130,246,0.2),
0 0 12px rgba(59,130,246,0.4);
transform: translateY(-50%) scale(1.35);
}
/* Input dot — left side */
.node-dot.node-in {
left: -8px;
}
/* Output dot — right side */
.node-dot.node-out {
right: -8px;
}
/* Highlight state when a connection is being drawn */
.node-dot.highlight-in {
border-color: var(--success);
background: rgba(16,185,129,0.3);
box-shadow: 0 0 0 5px rgba(16,185,129,0.18),
0 0 14px rgba(16,185,129,0.5);
transform: translateY(-50%) scale(1.4);
animation: amgossePulse 1s infinite;
}
/* ── Multiple Choice Options ── */
.node-options {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 10px;
}
.node-option-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 6px;
font-size: 11.5px;
color: var(--text-secondary);
transition: background 0.15s, border-color 0.15s;
position: relative;
}
.node-option-item:hover {
background: rgba(59,130,246,0.08);
border-color: rgba(59,130,246,0.25);
color: #93C5FD;
}
.node-option-dot {
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--surface-3);
border: 2px solid var(--text-secondary);
cursor: crosshair;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.node-option-dot:hover {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
transform: translateY(-50%) scale(1.3);
}
/* ── Empty Canvas State ── */
.am-empty-state {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: var(--text-secondary);
pointer-events: none;
text-align: center;
padding: 40px;
}
.am-empty-icon-wrap {
width: 72px;
height: 72px;
border-radius: 20px;
background: rgba(255,255,255,0.025);
border: 1.5px dashed rgba(255,255,255,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
animation: amFloating 3.5s ease-in-out infinite;
margin-bottom: 4px;
}
.am-empty-state h3 {
font-size: 15px;
font-weight: 700;
color: #334155;
margin: 0;
}
.am-empty-state p {
font-size: 13px;
color: var(--surface-3);
margin: 0;
max-width: 280px;
line-height: 1.6;
}
/* ── Builder Badges ── */
.am-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
border: 1px solid transparent;
}
.am-badge-success {
background: rgba(16,185,129,0.1);
color: var(--success);
border-color: rgba(16,185,129,0.22);
}
.am-badge-warning {
background: rgba(245,158,11,0.1);
color: var(--warning);
border-color: rgba(245,158,11,0.22);
}
.am-badge-info {
background: rgba(59,130,246,0.1);
color: #60A5FA;
border-color: rgba(59,130,246,0.22);
}
/* ── Properties Panel Settings Groups ── */
.st-group {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.st-group:last-child {
border-bottom: none;
}
.st-label {
font-size: 10px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 2px;
}
/* ── Node type-specific header gradients (via data attribute) ── */
.node-header[data-type="inicio"] {
background: linear-gradient(90deg, #1D4ED8, #1E40AF);
}
.node-header[data-type="input"] {
background: linear-gradient(90deg, #065F46, #064E3B);
}
.node-header[data-type="multipla_escolha"] {
background: linear-gradient(90deg, #6D28D9, #5B21B6);
}
.node-header[data-type="whatsapp_entrada"] {
background: linear-gradient(90deg, #065F46, #047857);
}
.node-header[data-type="whatsapp_saida"] {
background: linear-gradient(90deg, #065F46, #047857);
}
.node-header[data-type="email"] {
background: linear-gradient(90deg, #1D4ED8, #1E40AF);
}
.node-header[data-type="fim"] {
background: linear-gradient(90deg, #9D174D, #831843);
}
.node-header[data-type="mensagem"] {
background: linear-gradient(90deg, #92400E, #78350F);
}
/* ── Drag ghost opacity ── */
.node-wrapper.dragging {
opacity: 0.75;
z-index: 50;
transform: scale(1.03);
filter: drop-shadow(0 24px 48px rgba(0,0,0,0.8));
}
/* ── Builder connection wire hint (thin pulse line) ── */
.am-wire-hint {
pointer-events: none;
stroke: var(--primary);
stroke-width: 1.5;
stroke-dasharray: 5 5;
fill: none;
opacity: 0.5;
animation: amDashFlow 0.5s linear infinite;
}
/* ══════════════════════════════════════
MODAL ARCHITECTURE v3.0 STYLES
══════════════════════════════════════ */
/* Modal Node on Canvas */
.modal-node { transition: transform 0.2s, box-shadow 0.2s; }
.modal-node:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
.modal-node.selected { border-color: var(--brand-color) !important; box-shadow: 0 0 0 2px rgba(59,130,246,0.3), 0 12px 32px rgba(0,0,0,0.5); }
/* Modal dots */
.modal-dot { cursor: pointer; transition: transform 0.2s; z-index: 5; }
.modal-dot:hover { transform: scale(1.5); }
.modal-dot.highlight-in { animation: amDotPulse 1s infinite; }
@keyframes amDotPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
/* Component in edit mode */
.modal-component { transition: all 0.2s; }
.modal-component:hover { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.1) !important; }
.modal-component.selected { border-color: var(--brand-color) !important; background: rgba(59,130,246,0.05) !important; }
/* Edge animations */
@keyframes amDashFlow { to { stroke-dashoffset: -20; } }
.animated-edge { animation: amDashFlow 1s linear infinite; }
/* Empty state */
.am-empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
@keyframes amFloating { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }
/* Add Modal button */
.add-modal-btn { width: 100%; padding: 12px; background: rgba(59,130,246,0.1); border: 1px dashed rgba(59,130,246,0.3); border-radius: 8px; color: var(--brand-color); font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.add-modal-btn:hover { background: rgba(59,130,246,0.2); border-color: var(--brand-color); }
/* Component palette in sidebar */
.comp-btn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: transparent; border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all 0.2s; width: 100%; }
.comp-btn:hover { background: rgba(255,255,255,0.05); color: #E2E8F0; border-color: rgba(255,255,255,0.1); }
/* Canvas cursor modes */
.mode-pan { cursor: grab !important; }
.mode-pan:active { cursor: grabbing !important; }
/* ── Dashboard Date Filters (Premium SaaS) ── */
.amgosse-date-filter button {
background: transparent;
border: none !important;
color: var(--muted) !important;
box-shadow: none !important;
transform: none !important;
padding: 6px 14px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
cursor: pointer;
transition: all 0.2s ease;
opacity: 0.7;
}
.amgosse-date-filter button:hover {
color: var(--text) !important;
opacity: 1;
}
.amgosse-date-filter button.active {
background: var(--surface-3) !important;
color: var(--primary) !important;
border-radius: 8px;
opacity: 1;
box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
/* ══════════════════════════════════════
CRM — REDESIGN v2
══════════════════════════════════════ */
/* Missing badge variants */
.badge-orange { display:inline-flex;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;background:rgba(249,115,22,0.1);color:#FB923C;border:1px solid rgba(249,115,22,0.25); }
.badge-red { display:inline-flex;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;background:rgba(239,68,68,0.1);color:var(--red);border:1px solid rgba(239,68,68,0.25); }
/* Fix amgosse-btn aliases */
.amgosse-btn { display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;border:none; }
.amgosse-btn-primary { background:var(--primary)!important;color: var(--text-on-brand) !important; }
.amgosse-btn-secondary { background:rgba(255,255,255,0.05)!important;border:1px solid var(--border)!important;color:var(--text)!important; }
.amgosse-btn-danger { background:transparent!important;color:var(--red)!important;border:1px solid rgba(239,68,68,0.3)!important; }
.amgosse-badge { display:inline-flex;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700; }
.amgosse-badge-green { background:rgba(16,185,129,0.1);color:var(--green);border:1px solid rgba(16,185,129,0.25); }
.amgosse-badge-blue { background:rgba(59,130,246,0.1);color:#60A5FA;border:1px solid rgba(59,130,246,0.25); }
.amgosse-badge-red { background:rgba(239,68,68,0.1);color:var(--red);border:1px solid rgba(239,68,68,0.25); }
.amgosse-badge-amber { background:rgba(245,158,11,0.1);color:var(--amber);border:1px solid rgba(245,158,11,0.25); }
/* Lead rows */
.crm-lead-row { cursor:pointer;transition:background 0.15s; }
.crm-lead-row:hover { background:rgba(255,255,255,0.028)!important; }
.crm-lead-name { font-size:13px;font-weight:600;color:var(--text); }
.crm-ig-handle { font-size:11px;color:var(--primary);margin-top:2px;display:block; }
.crm-actions-cell { display:flex;gap:6px;align-items:center;white-space:nowrap; }
/* Source badges */
.crm-source-badge { display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap; }
.crm-src-instagram { background:rgba(168,85,247,0.12);color:#C084FC;border:1px solid rgba(168,85,247,0.3); }
.crm-src-meta { background:rgba(59,130,246,0.12);color:#60A5FA;border:1px solid rgba(59,130,246,0.3); }
.crm-src-form { background:rgba(245,158,11,0.12);color:#FCD34D;border:1px solid rgba(245,158,11,0.3); }
.crm-src-whatsapp { background:rgba(16,185,129,0.12);color:#34D399;border:1px solid rgba(16,185,129,0.3); }
.crm-src-organic { background:rgba(100,116,139,0.12);color:var(--text-secondary);border:1px solid rgba(100,116,139,0.3); }
/* WhatsApp button in table */
.crm-wa-btn { display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);text-decoration:none;font-size:14px;flex-shrink:0; }
.crm-wa-btn:hover { background:rgba(16,185,129,0.22); }
/* ── Lead Detail Panel ───────────────────────────────────────────── */
.crm-panel-overlay {
position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:99998;
opacity:0;pointer-events:none;transition:opacity 0.28s;backdrop-filter:blur(3px);
}
.crm-panel-overlay.open { opacity:1;pointer-events:all; }
.crm-lead-panel {
position:fixed;top:0;right:-480px;width:440px;max-width:100vw;height:100vh;
background:var(--surface);border-left:1px solid var(--border);z-index:99999;
display:flex;flex-direction:column;transition:right 0.32s cubic-bezier(0.4,0,0.2,1);
box-shadow:-8px 0 40px rgba(0,0,0,0.5);overflow:hidden;
}
.crm-lead-panel.open { right:0; }
.clp-header {
display:flex;align-items:flex-start;gap:14px;
padding:22px 20px 18px;border-bottom:1px solid var(--border);
background:var(--surface-2);flex-shrink:0;
}
.clp-avatar {
width:48px;height:48px;border-radius:50%;
background:linear-gradient(135deg,var(--brand-color-hover),var(--brand-color-2));
display:flex;align-items:center;justify-content:center;
font-weight:700;color: var(--text);font-size:18px;flex-shrink:0;
}
.clp-header-info { flex:1;min-width:0; }
.clp-name { font-size:16px;font-weight:700;color:var(--text);line-height:1.3; }
.clp-handle{ font-size:12px;color:var(--primary);margin-top:2px; }
.clp-close {
background:none;border:none;color:var(--muted);cursor:pointer;
font-size:20px;padding:2px 6px;line-height:1;flex-shrink:0;border-radius:6px;
}
.clp-close:hover { color:var(--text);background:rgba(255,255,255,0.07); }
.clp-body { flex:1;overflow-y:auto;padding:0 20px; }
.clp-section { padding:16px 0;border-bottom:1px solid var(--border); }
.clp-section:last-child { border-bottom:none; }
.clp-section-title { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--muted);margin-bottom:10px; }
.clp-contact-rows { display:flex;flex-direction:column;gap:7px; }
.clp-contact-row {
display:flex;justify-content:space-between;align-items:center;
padding:9px 12px;background:var(--surface-2);border-radius:var(--radius-sm);
border:1px solid var(--border);font-size:13px;color:var(--text);text-decoration:none;
}
.clp-contact-row span:first-child { color:var(--muted);font-size:12px; }
.clp-wa-row { color:#34D399!important;border-color:rgba(16,185,129,0.25)!important; }
.clp-wa-row:hover { background:rgba(16,185,129,0.08)!important; }
.clp-muted { color:var(--muted)!important; }
.clp-muted span { color:var(--muted)!important; }
.clp-message {
font-size:13px;color:var(--text);background:var(--surface-2);
border-radius:var(--radius-sm);padding:12px 14px;
border-left:3px solid var(--primary);line-height:1.6;
}
.clp-utms { display:flex;flex-direction:column;gap:5px; }
.clp-utm-row {
display:flex;justify-content:space-between;font-size:12px;
padding:5px 0;color:var(--text-secondary);
border-bottom:1px solid rgba(255,255,255,0.04);
}
.clp-utm-row span:first-child { color:var(--muted);font-weight:600;font-size:11px; }
.clp-stage-select { width:100%!important;margin-top:4px; }
.clp-footer {
display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--border);
background:var(--surface);flex-shrink:0;
}
/* Journey timeline */
.clp-journey-wrap { display:flex;flex-direction:column; }
.clp-journey-item {
display:flex;align-items:flex-start;gap:12px;
padding:8px 0;position:relative;
}
.clp-journey-item:not(:last-child)::after {
content:'';position:absolute;left:7px;top:22px;bottom:-8px;
width:2px;background:var(--border);
}
.clp-ji-dot {
width:16px;height:16px;border-radius:50%;
background:var(--surface-3);border:2px solid var(--muted);
flex-shrink:0;margin-top:2px;
}
.clp-ji-dot-entry { border-color:var(--green)!important;background:rgba(16,185,129,0.2)!important; }
.clp-ji-dot-now { background:var(--primary)!important;border-color:var(--primary)!important; }
.clp-ji-label { font-size:13px;color:var(--text);line-height:1.4; }
.clp-ji-from { color:var(--muted);font-size:11px; }
.clp-ji-time { font-size:11px;color:var(--muted);margin-top:2px; }
/* Pipeline grid CRM — 8 etapas em linha única (padrão), compacta em telas menores */
#crm-pipeline.amgosse-pipeline-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 10px !important; }
#crm-pipeline .amgosse-pipeline-card { padding: 14px 12px !important; min-width: 0; }
#crm-pipeline .amgosse-pipeline-value { font-size: 24px !important; line-height: 1.1; font-variant-numeric: tabular-nums; }
#crm-pipeline .amgosse-pipeline-label {
font-size: 10px !important;
letter-spacing: .6px !important;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 1500px) { #crm-pipeline.amgosse-pipeline-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 900px) { #crm-pipeline.amgosse-pipeline-grid { grid-template-columns: repeat(2, 1fr) !important; } }
/* Card red (Perdido / Não Qualificado) */
.amgosse-pipeline-card[data-stage-color="red"] { border-top-color: var(--red) !important; }
.amgosse-pipeline-card[data-stage-color="gray"] { border-top-color: var(--muted) !important; }
/* Kanban card clickable */
.k-card { cursor:pointer;transition:border-color 0.15s,transform 0.1s; }
.k-card:hover { border-color:var(--border-hover)!important;transform:translateY(-1px); }
.k-card.k-dragging { opacity:0.5;transform:scale(0.97); }
.k-col.k-dragover .k-list { background:rgba(59,130,246,0.06);border-radius:var(--radius-sm); }
/* ══════════════════════════════════════
LEAD PROFILE MODAL (lpm-*)
══════════════════════════════════════ */
/* Overlay */
.lpm-overlay {
position:fixed;inset:0;z-index:1000000;
background:rgba(5,11,24,0.82);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;
padding:16px;
animation:lpmFadeIn 0.18s ease;
}
@keyframes lpmFadeIn { from{opacity:0} to{opacity:1} }
/* Modal card */
.lpm-modal {
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-xl);
width:100%;max-width:680px;max-height:92vh;
display:flex;flex-direction:column;overflow:hidden;
box-shadow:0 32px 80px rgba(0,0,0,0.6);
animation:lpmSlideUp 0.22s ease;
}
@keyframes lpmSlideUp { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }
/* Header */
.lpm-header {
display:flex;align-items:flex-start;gap:16px;
padding:20px 20px 16px;
border-bottom:1px solid var(--border);
flex-shrink:0;
}
.lpm-avatar { position:relative;flex-shrink:0; }
.lpm-avatar-img {
width:72px;height:72px;border-radius:50%;object-fit:cover;
border:2px solid var(--border);display:block;
}
.lpm-avatar-initials {
width:72px;height:72px;border-radius:50%;
background:linear-gradient(135deg,var(--primary),var(--purple));
display:flex;align-items:center;justify-content:center;
font-size:24px;font-weight:700;color: var(--text);
border:2px solid var(--border);
}
.lpm-header-info { flex:1;min-width:0; }
.lpm-name-line { display:flex;align-items:center;gap:8px;margin-bottom:4px; }
.lpm-name {
font-size:18px;font-weight:700;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lpm-handle { font-size:13px;color:var(--muted);margin-bottom:8px; }
.lpm-badges { display:flex;gap:6px;flex-wrap:wrap; }
.lpm-header-actions { display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0; }
.lpm-close {
background:none;border:none;color:var(--muted);cursor:pointer;
font-size:18px;width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
transition:background 0.15s,color 0.15s;
}
.lpm-close:hover { background:var(--surface-3);color:var(--text); }
/* Qualificação badge/dropdown */
.lpm-qual-wrap { position:relative; }
.lpm-qual-badge {
border:none;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:600;
cursor:pointer;transition:all 0.15s;white-space:nowrap;
}
.lpm-qual-none { background:rgba(100,116,139,0.18);color:var(--muted); }
.lpm-qual-yes { background:rgba(16,185,129,0.18);color:var(--green); }
.lpm-qual-no { background:rgba(239,68,68,0.18);color:var(--red); }
.lpm-qual-dropdown {
position:absolute;right:0;top:calc(100% + 6px);
background:var(--surface-2);border:1px solid var(--border);
border-radius:var(--radius-md);min-width:160px;
box-shadow:var(--shadow-md);z-index:10;
display:none;flex-direction:column;overflow:hidden;
}
.lpm-qual-dropdown.open { display:flex; }
.lpm-qual-dropdown button {
background:none;border:none;color:var(--text);
text-align:left;padding:10px 16px;font-size:13px;cursor:pointer;
transition:background 0.1s;
}
.lpm-qual-dropdown button:hover { background:var(--surface-3); }
/* Body */
.lpm-body {
flex:1;overflow-y:auto;padding:0 20px 20px;
scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.lpm-body::-webkit-scrollbar { width:4px; }
.lpm-body::-webkit-scrollbar-track { background:transparent; }
.lpm-body::-webkit-scrollbar-thumb { background:var(--border);border-radius:2px; }
/* Section */
.lpm-section { margin-top:18px; }
.lpm-section-title {
font-size:10px;font-weight:700;letter-spacing:0.1em;
text-transform:uppercase;color:var(--muted);
margin-bottom:10px;
}
/* Contact buttons */
.lpm-contact-btns { display:flex;flex-wrap:wrap;gap:10px; }
.lpm-btn {
display:inline-flex;align-items:center;gap:8px;
padding:10px 18px;border-radius:12px;font-size:14px;font-weight:600;
text-decoration:none;cursor:pointer;transition:all 0.2s;white-space:nowrap;
}
/* WhatsApp — green glow */
.lpm-wa-btn {
background:linear-gradient(135deg,#25D366,#128C7E);
color: var(--text);border:none;
box-shadow:0 0 20px rgba(37,211,102,0.45),0 4px 16px rgba(37,211,102,0.25);
}
.lpm-wa-btn:hover {
box-shadow:0 0 32px rgba(37,211,102,0.7),0 6px 24px rgba(37,211,102,0.4);
transform:translateY(-1px);color: var(--text);text-decoration:none;
}
/* Instagram — gradient */
.lpm-ig-btn {
background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
color: var(--text);border:none;
box-shadow:0 4px 16px rgba(131,58,180,0.3);
}
.lpm-ig-btn:hover {
box-shadow:0 6px 24px rgba(131,58,180,0.5);
transform:translateY(-1px);color: var(--text);text-decoration:none;
}
/* Email */
.lpm-email-btn {
background:var(--surface-3);border:1px solid var(--border);color:var(--text);
}
.lpm-email-btn:hover { border-color:var(--border-hover);color:var(--text);text-decoration:none; }
/* Qual mini badge (tabela + kanban) */
.crm-qual-mini {
display:inline-flex;align-items:center;justify-content:center;
font-size:11px;margin-left:5px;vertical-align:middle;
width:18px;height:18px;border-radius:50%;
line-height:1;flex-shrink:0;
}
.crm-qual-mini.qual-yes { background:rgba(16,185,129,0.15); }
.crm-qual-mini.qual-no { background:rgba(239,68,68,0.15); }
/* Badge gray (Visitante / legado) */
.badge-gray { background:rgba(100,116,139,0.18);color:var(--muted); }
/* Pipeline card metric (Visitante) */
.amgosse-pipeline-card.amgosse-pipeline-metric {
border-style:dashed;opacity:0.75;
}
.amgosse-pipeline-metric-label {
font-size:9px;text-transform:uppercase;letter-spacing:0.1em;
color:var(--muted);margin-bottom:2px;
}
/* Contact editable fields */
.lpm-contact-fields {
margin-top:12px;display:flex;flex-direction:column;gap:2px;
background:var(--surface-2);border:1px solid var(--border);
border-radius:var(--radius-md);overflow:hidden;
}
.lpm-contact-field-row {
display:flex;align-items:center;gap:10px;
padding:9px 14px;transition:background 0.12s;
border-bottom:1px solid var(--border);
}
.lpm-contact-field-row:last-child { border-bottom:none; }
.lpm-contact-field-row:hover { background:var(--surface-3); }
.lpm-contact-field-icon { font-size:15px;width:20px;flex-shrink:0;text-align:center; }
.lpm-contact-field-label {
font-size:11px;font-weight:600;color:var(--muted);
text-transform:uppercase;letter-spacing:0.06em;width:72px;flex-shrink:0;
}
.lpm-contact-field-value {
flex:1;font-size:13px;color:var(--text);
cursor:pointer;border-bottom:1px dashed transparent;
transition:border-color 0.15s;min-height:18px;
}
.lpm-contact-field-value:hover { border-bottom-color:var(--muted); }
.lpm-contact-placeholder { color:var(--muted)!important;font-style:italic; }
.lpm-contact-input {
flex:1;background:transparent;border:none;border-bottom:1px solid var(--primary);
color:var(--text);font-size:13px;font-family:var(--font);
padding:2px 4px;outline:none;width:100%;
box-shadow:none;border-radius:0;
}
.lpm-contact-input:focus { border-bottom-color:var(--primary); }
/* Form payload grid */
.lpm-field-grid {
display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
@media (max-width:560px) { .lpm-field-grid { grid-template-columns:1fr; } }
.lpm-field {
background:var(--surface-2);border:1px solid var(--border);
border-radius:var(--radius-sm);padding:10px 12px;
}
.lpm-field-label {
display:block;font-size:10px;font-weight:600;
letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);
margin-bottom:4px;
}
.lpm-field-value { font-size:13px;color:var(--text);word-break:break-word; }
/* Address grid */
.lpm-addr-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.lpm-addr-field {
background:var(--surface-2);border:1px solid var(--border);
border-radius:var(--radius-sm);padding:10px 12px;
}
.lpm-addr-full { grid-column:1/-1; }
.lpm-addr-field label {
display:block;font-size:10px;font-weight:600;
letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);
margin-bottom:4px;
}
.lpm-addr-field span { font-size:13px;color:var(--text); }
/* Notes */
.lpm-notes-text {
display:block;font-size:13px;color:var(--text);
min-height:20px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
}
/* Inline edit */
.lpm-editable {
cursor:pointer;
border-bottom:1px dashed transparent;
transition:border-color 0.15s;
}
.lpm-editable:hover { border-bottom-color:var(--muted); }
.lpm-inline-input {
width:100%;background:var(--surface-3);border:1px solid var(--primary);
border-radius:var(--radius-sm);color:var(--text);
font-size:inherit;font-family:var(--font);
padding:4px 8px;outline:none;box-sizing:border-box;
box-shadow:0 0 0 3px var(--primary-glow);
}
.lpm-inline-textarea {
resize:vertical;min-height:80px;line-height:1.5;
}
/* Stage select */
.lpm-stage-select { width:100%!important;margin-top:4px; }
/* Journey */
.lpm-journey-wrap { display:flex;flex-direction:column; }
/* Footer */
.lpm-footer {
display:flex;gap:10px;padding:14px 20px;
border-top:1px solid var(--border);
background:var(--surface);flex-shrink:0;justify-content:flex-end;
}
/* ══════════════════════════════════════
Theme Toggle Button (dark/light) — v5.6.0
══════════════════════════════════════ */
#amgosse-theme-toggle {
position: fixed;
top: 20px;
right: 28px;
width: 40px;
height: 40px;
background: var(--surface);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: background .2s, border-color .2s, color .2s, transform .2s;
box-shadow: var(--shadow-sm);
}
#amgosse-theme-toggle:hover {
background: var(--surface-2);
border-color: var(--border-hover);
color: var(--text);
transform: translateY(-1px);
}
/* Toggle 3-estados (dark/light/apple) — v5.7.0-test
Default (dark) → mostra moon
Light → mostra sun
Apple → mostra apple logo */
#amgosse-theme-toggle .amgosse-theme-icon-sun,
#amgosse-theme-toggle .amgosse-theme-icon-moon,
#amgosse-theme-toggle .amgosse-theme-icon-apple { display: none; }
#amgosse-theme-toggle .amgosse-theme-icon-moon { display: inline-flex; }
[data-theme="light"] #amgosse-theme-toggle .amgosse-theme-icon-sun { display: inline-flex; }
[data-theme="light"] #amgosse-theme-toggle .amgosse-theme-icon-moon { display: none; }
[data-theme="apple"] #amgosse-theme-toggle .amgosse-theme-icon-apple { display: inline-flex; }
[data-theme="apple"] #amgosse-theme-toggle .amgosse-theme-icon-moon { display: none; }
[data-theme="apple"] #amgosse-theme-toggle .amgosse-theme-icon-sun { display: none; }
@media (max-width: 720px) {
#amgosse-theme-toggle { top: 12px; right: 12px; width: 36px; height: 36px; }
}
/* ══════════════════════════════════════
LIGHT THEME — Overrides de legibilidade — v5.6.1
Corrige hardcodes color:#fff/rgba(255,255,255,...) que ficavam
invisíveis sobre fundo claro. Aplica via [data-theme="light"]
com !important pra sobrescrever inline styles.
══════════════════════════════════════ */
/* Body / wrap */
[data-theme="light"] .amgosse-admin-wrap { background: #F1F5F9 !important; color: var(--text) !important; }
/* Títulos e textos brancos hardcoded */
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#FFFFFF"],
[data-theme="light"] [style*="color: #FFFFFF"],
[data-theme="light"] [style*="color:#FFF"],
[data-theme="light"] [style*="color: #FFF"],
[data-theme="light"] [style*="color:white"],
[data-theme="light"] [style*="color: white"] { color: var(--text) !important; }
/* Headings */
[data-theme="light"] h1, [data-theme="light"] h2,
[data-theme="light"] h3, [data-theme="light"] h4 { color: var(--text) !important; }
/* Page titles e subtitles */
[data-theme="light"] .amgosse-page-title,
[data-theme="light"] .amgosse-page-subtitle { color: var(--text) !important; }
[data-theme="light"] .amgosse-page-subtitle { color: var(--text-secondary) !important; }
/* Cards */
[data-theme="light"] .amgosse-card,
[data-theme="light"] .amgosse-card-accent,
[data-theme="light"] .amgosse-card-glow,
[data-theme="light"] .amgosse-settings-section,
[data-theme="light"] .amgosse-sub-card {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
/* Métricas (valores grandes) */
[data-theme="light"] .val,
[data-theme="light"] .amgosse-metric-flex .val,
[data-theme="light"] .amgosse-metric-box .val { color: var(--text) !important; }
/* Labels de métricas */
[data-theme="light"] .al,
[data-theme="light"] .amgosse-metric-label,
[data-theme="light"] .amgosse-section-desc { color: var(--text-secondary) !important; }
/* Backgrounds rgba(255,255,255,...) → trocar pra superfície */
[data-theme="light"] [style*="rgba(255,255,255,0.03)"],
[data-theme="light"] [style*="rgba(255,255,255, 0.03)"],
[data-theme="light"] [style*="rgba(255,255,255,0.04)"],
[data-theme="light"] [style*="rgba(255,255,255,0.05)"],
[data-theme="light"] [style*="rgba(255,255,255, 0.05)"],
[data-theme="light"] [style*="rgba(255,255,255,0.06)"],
[data-theme="light"] [style*="rgba(255,255,255,0.08)"] {
background: rgba(15,23,42,0.04) !important;
background-color: rgba(15,23,42,0.04) !important;
}
[data-theme="light"] [style*="rgba(255,255,255,0.1)"],
[data-theme="light"] [style*="rgba(255,255,255, 0.1)"],
[data-theme="light"] [style*="rgba(255,255,255,0.12)"],
[data-theme="light"] [style*="rgba(255,255,255,0.14)"],
[data-theme="light"] [style*="rgba(255,255,255,0.15)"] {
background: rgba(15,23,42,0.06) !important;
background-color: rgba(15,23,42,0.06) !important;
border-color: rgba(15,23,42,0.10) !important;
}
/* Sidebar */
[data-theme="light"] #amgosse-sidebar {
background: var(--surface) !important;
border-right: 1px solid var(--border) !important;
}
[data-theme="light"] #amgosse-sidebar,
[data-theme="light"] #amgosse-sidebar * { color: var(--text) !important; }
[data-theme="light"] #amgosse-sidebar .nav-i:not(.active) { color: var(--text-secondary) !important; }
[data-theme="light"] #amgosse-sidebar .nav-i.active {
background: var(--primary-glow) !important;
color: var(--primary) !important;
}
[data-theme="light"] .amgosse-nav-section-label,
[data-theme="light"] .amgosse-sidebar-section-label { color: var(--muted) !important; }
/* Sistema Operacional badge */
[data-theme="light"] .amgosse-sidebar-status,
[data-theme="light"] .amgosse-status-badge {
background: rgba(16,185,129,0.10) !important;
color: #047857 !important;
border-color: rgba(16,185,129,0.25) !important;
}
/* Tabelas */
[data-theme="light"] .at,
[data-theme="light"] .at thead,
[data-theme="light"] .at tbody,
[data-theme="light"] .at tr,
[data-theme="light"] .at td,
[data-theme="light"] .at th {
background: var(--surface) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
[data-theme="light"] .at th { color: var(--text-secondary) !important; background: var(--surface-2) !important; }
[data-theme="light"] .at tr:hover td { background: var(--surface-2) !important; }
/* Inputs */
[data-theme="light"] .ai,
[data-theme="light"] .amgosse-input,
[data-theme="light"] input.ai,
[data-theme="light"] textarea.ai,
[data-theme="light"] select.ai {
background: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border-hover) !important;
}
[data-theme="light"] .ai::placeholder { color: var(--muted) !important; }
/* Buttons secundários */
[data-theme="light"] .ab.ab-s,
[data-theme="light"] .ab-sm:not(.active) {
background: var(--surface-2) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
[data-theme="light"] .ab.ab-s.active {
background: var(--primary) !important;
color: var(--text-on-brand) !important;
}
[data-theme="light"] .ab.ab-p { color: var(--text-on-brand) !important; }
/* Date filter */
[data-theme="light"] .amgosse-date-filter {
background: var(--surface) !important;
border-color: var(--border) !important;
}
/* Headers internos */
[data-theme="light"] .amgosse-tab-header { background: transparent !important; }
[data-theme="light"] .amgosse-tab-header > div > div:first-child {
/* "GROWTH INTEL v5.2" eyebrow */
color: var(--primary) !important;
}
/* Badges */
[data-theme="light"] .badge-blue { background: rgba(59,130,246,.12) !important; color: #1d4ed8 !important; }
[data-theme="light"] .badge-green { background: rgba(16,185,129,.12) !important; color: #047857 !important; }
[data-theme="light"] .badge-amber { background: rgba(245,158,11,.12) !important; color: #b45309 !important; }
[data-theme="light"] .badge-orange { background: rgba(249,115,22,.12) !important; color: #c2410c !important; }
[data-theme="light"] .badge-red { background: rgba(239,68,68,.12) !important; color: #b91c1c !important; }
[data-theme="light"] .badge-status { background: rgba(15,23,42,.06) !important; color: var(--text-secondary) !important; }
/* Dashboard Top Criativos — ranking legivel nos temas claros */
[data-theme="light"] .amgosse-dash-rank-card,
[data-theme="apple"] .amgosse-dash-rank-card {
background: #FFFFFF !important;
border-color: rgba(15,23,42,.10) !important;
box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px rgba(15,23,42,.06) !important;
}
[data-theme="light"] .amgosse-dash-rank-card.rank-gold,
[data-theme="apple"] .amgosse-dash-rank-card.rank-gold {
background: linear-gradient(135deg, rgba(255,251,235,.96), #FFFFFF 58%) !important;
border-color: rgba(217,119,6,.24) !important;
}
[data-theme="light"] .amgosse-dash-rank-card.rank-silver,
[data-theme="apple"] .amgosse-dash-rank-card.rank-silver {
background: linear-gradient(135deg, rgba(248,250,252,.98), #FFFFFF 58%) !important;
border-color: rgba(100,116,139,.20) !important;
}
[data-theme="light"] .amgosse-dash-rank-card.rank-bronze,
[data-theme="apple"] .amgosse-dash-rank-card.rank-bronze {
background: linear-gradient(135deg, rgba(255,247,237,.96), #FFFFFF 58%) !important;
border-color: rgba(180,83,9,.20) !important;
}
[data-theme="light"] .amgosse-dash-rank-position,
[data-theme="apple"] .amgosse-dash-rank-position {
color: rgba(15,23,42,.10) !important;
}
[data-theme="light"] .amgosse-dash-rank-trophy,
[data-theme="apple"] .amgosse-dash-rank-trophy {
background: rgba(15,23,42,.035) !important;
border-color: rgba(15,23,42,.08) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.80), 0 8px 18px rgba(15,23,42,.08) !important;
}
[data-theme="light"] .amgosse-dash-rank-trophy.trophy-gold,
[data-theme="apple"] .amgosse-dash-rank-trophy.trophy-gold {
background: rgba(245,158,11,.12) !important;
color: #B45309 !important;
border-color: rgba(217,119,6,.22) !important;
}
[data-theme="light"] .amgosse-dash-rank-trophy.trophy-silver,
[data-theme="apple"] .amgosse-dash-rank-trophy.trophy-silver {
background: rgba(100,116,139,.10) !important;
color: #475569 !important;
border-color: rgba(100,116,139,.18) !important;
}
[data-theme="light"] .amgosse-dash-rank-trophy.trophy-bronze,
[data-theme="apple"] .amgosse-dash-rank-trophy.trophy-bronze {
background: rgba(180,83,9,.10) !important;
color: #92400E !important;
border-color: rgba(180,83,9,.18) !important;
}
[data-theme="light"] .amgosse-dash-rank-topline strong,
[data-theme="apple"] .amgosse-dash-rank-topline strong,
[data-theme="light"] .amgosse-dash-rank-metrics b,
[data-theme="apple"] .amgosse-dash-rank-metrics b {
color: #0F172A !important;
}
[data-theme="light"] .amgosse-dash-rank-campaign,
[data-theme="apple"] .amgosse-dash-rank-campaign,
[data-theme="light"] .amgosse-dash-rank-metrics span,
[data-theme="apple"] .amgosse-dash-rank-metrics span {
color: #475569 !important;
}
[data-theme="light"] .amgosse-dash-rank-metrics span,
[data-theme="apple"] .amgosse-dash-rank-metrics span {
background: rgba(15,23,42,.035) !important;
border-color: rgba(15,23,42,.07) !important;
}
/* Right side panel (Alcance, Engajamento, etc — visível na imagem) */
[data-theme="light"] [class*="kpi"],
[data-theme="light"] [class*="metric-box"],
[data-theme="light"] .amgosse-metric-box {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
}
/* Borders cinzas que sumiram */
[data-theme="light"] [style*="border:1px solid rgba(255,255,255"],
[data-theme="light"] [style*="border-color:rgba(255,255,255"] {
border-color: var(--border) !important;
}
/* Selects nativos */
[data-theme="light"] select { background: var(--surface) !important; color: var(--text) !important; }
/* Pulse dot (LIVE indicator) */
[data-theme="light"] .amgosse-pulse-dot { background: var(--success) !important; }
/* Hamburger e toggle sidebar */
[data-theme="light"] #amgosse-hamburger,
[data-theme="light"] .amgosse-sidebar-toggle {
background: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
/* Theme toggle button já tem regra própria, garantindo contraste */
[data-theme="light"] #amgosse-theme-toggle {
background: var(--surface) !important;
color: #b45309 !important; /* sun icon âmbar */
border-color: var(--border) !important;
}
/* Modal background */
[data-theme="light"] #amgosse-modal-bg { background: rgba(15,23,42,0.45) !important; }
[data-theme="light"] #amgosse-modal-card {
background: var(--surface) !important;
color: var(--text) !important;
}
[data-theme="light"] .amgosse-modal-close { color: var(--text) !important; }
/* Top fontes orgânicas card */
[data-theme="light"] .dash-col-left .amgosse-card { background: var(--surface) !important; }
/* Empty state genérico */
[data-theme="light"] [style*="color:var(--muted)"] { color: var(--muted) !important; }
/* Charts container */
[data-theme="light"] .amgosse-chart-wrap canvas { filter: none !important; }
[data-theme="light"] .amgosse-chart-panel,
[data-theme="light"] .amgosse-source-panel,
[data-theme="apple"] .amgosse-chart-panel,
[data-theme="apple"] .amgosse-source-panel {
background: #FFFFFF !important;
border-color: rgba(15,23,42,.08) !important;
box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 10px 28px rgba(15,23,42,.045) !important;
}
[data-theme="light"] .amgosse-chart-insights span,
[data-theme="light"] .amgosse-source-row,
[data-theme="apple"] .amgosse-chart-insights span,
[data-theme="apple"] .amgosse-source-row {
background: rgba(15,23,42,.025) !important;
border-color: rgba(15,23,42,.07) !important;
}
/* Compatibilidade: reset textos descontextualizados */
[data-theme="light"] .amgosse-tab-pane,
[data-theme="light"] .amgosse-tab-pane > div { color: var(--text); }
/* ════════════════════════════════════════════════════════════
PREMIUM REFINEMENT — v5.6.2
Polimento tipográfico, sombras estilo Stripe/Linear/Vercel,
glassmorphism, micro-animações. Aplicado em dark + light.
════════════════════════════════════════════════════════════ */
/* ── Refined design tokens (override + new) ── */
:root {
/* Premium shadow system multi-layer */
--shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
--shadow-card: 0 1px 3px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.05);
--shadow-card-hover: 0 2px 6px rgba(15,23,42,0.06), 0 16px 40px rgba(15,23,42,0.08);
--shadow-popover: 0 4px 12px rgba(15,23,42,0.08), 0 24px 64px rgba(15,23,42,0.12);
--shadow-button: 0 1px 2px rgba(0,0,0,0.06);
--shadow-button-primary: 0 4px 14px rgba(37,99,235,0.35), 0 1px 2px rgba(37,99,235,0.18);
/* Border radius refinado */
--radius-button: 10px;
--radius-input: 10px;
--radius-card-md: 16px;
--radius-card-lg: 20px;
/* Transitions consistentes */
--t-fast: 120ms cubic-bezier(.4,0,.2,1);
--t-med: 220ms cubic-bezier(.4,0,.2,1);
--t-slow: 380ms cubic-bezier(.16,1,.3,1);
}
[data-theme="light"] {
--bg: linear-gradient(180deg, #FAFBFD 0%, #F4F6FA 100%);
--surface: #FFFFFF;
--surface-2: #F8FAFC;
--surface-3: #F1F5F9;
--border: rgba(15,23,42,0.06);
--border-hover: rgba(15,23,42,0.10);
--text: #0F172A;
--text-secondary: #475569;
--muted: #94A3B8;
--shadow-card: 0 1px 3px rgba(15,23,42,0.04), 0 6px 18px rgba(15,23,42,0.04);
--shadow-card-hover: 0 2px 6px rgba(15,23,42,0.06), 0 14px 34px rgba(15,23,42,0.08);
--shadow-popover: 0 4px 14px rgba(15,23,42,0.08), 0 24px 60px rgba(15,23,42,0.10);
--shadow-button-primary: 0 4px 14px rgba(37,99,235,0.30), 0 1px 2px rgba(37,99,235,0.16);
}
/* Body background com gradient sutil */
[data-theme="light"] .amgosse-admin-wrap {
background: linear-gradient(180deg, #FAFBFD 0%, #F4F6FA 100%) !important;
}
/* ── Tipografia premium global ── */
.amgosse-admin-wrap,
.amgosse-admin-wrap * {
font-feature-settings: 'cv02','cv03','cv04','cv11' !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Page titles */
.amgosse-page-title {
font-size: 36px !important;
font-weight: 800 !important;
letter-spacing: -1.4px !important;
line-height: 1.1 !important;
margin: 0 0 8px !important;
}
.amgosse-page-subtitle,
.amgosse-tab-header > div > div:nth-child(2):not(.amgosse-page-title) {
font-size: 13px !important;
color: var(--text-secondary) !important;
font-weight: 500;
letter-spacing: -0.1px;
}
/* Eyebrow "GROWTH INTEL V5.2" e similares */
.amgosse-tab-header [style*="text-transform:uppercase"],
.amgosse-tab-header [style*="letter-spacing:2.5px"] {
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
display: inline-block;
}
/* ── Sidebar premium ── */
[data-theme="light"] #amgosse-sidebar {
background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%) !important;
border-right: 1px solid rgba(15,23,42,0.06) !important;
box-shadow: 1px 0 24px rgba(15,23,42,0.02);
}
#amgosse-sidebar .nav-i {
border-radius: var(--radius-button) !important;
margin: 2px 0 !important;
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) !important;
font-weight: 600 !important;
font-size: 13.5px !important;
letter-spacing: -0.1px !important;
}
#amgosse-sidebar .nav-i:hover:not(.active) {
background: var(--surface-2) !important;
transform: translateX(2px);
}
[data-theme="light"] #amgosse-sidebar .nav-i.active {
background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(124,58,237,0.06)) !important;
color: var(--brand-color) !important;
box-shadow: inset 3px 0 0 var(--brand-color);
font-weight: 700 !important;
}
[data-theme="dark"] #amgosse-sidebar .nav-i.active,
:root:not([data-theme="light"]) #amgosse-sidebar .nav-i.active {
background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(124,58,237,0.10)) !important;
box-shadow: inset 3px 0 0 var(--brand-color);
}
.amgosse-nav-section-label,
.amgosse-sidebar-section-label {
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 1.6px !important;
margin: 24px 0 8px !important;
padding: 0 12px !important;
}
/* Logo brand area */
[data-theme="light"] .amgosse-sidebar-brand-icon {
box-shadow: 0 4px 14px rgba(37,99,235,0.20);
}
/* Avatar de usuário (rodapé sidebar) */
[data-theme="light"] [class*="amgosse-user"],
[data-theme="light"] [id*="amgosse-user"] {
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important;
}
/* ── Cards premium ── */
.amgosse-card,
.amgosse-card-accent,
.amgosse-card-glow,
.amgosse-settings-section {
border-radius: var(--radius-card-md) !important;
box-shadow: var(--shadow-card) !important;
transition: box-shadow var(--t-med), transform var(--t-med), border-color var(--t-med) !important;
}
.amgosse-card:hover,
.amgosse-card-accent:hover {
box-shadow: var(--shadow-card-hover) !important;
border-color: var(--border-hover) !important;
}
[data-theme="light"] .amgosse-card,
[data-theme="light"] .amgosse-card-accent,
[data-theme="light"] .amgosse-card-glow {
background: #FFFFFF !important;
border: 1px solid rgba(15,23,42,0.06) !important;
}
/* Card accent: barra esquerda em gradiente premium */
[data-theme="light"] .amgosse-card-accent {
position: relative;
overflow: hidden;
}
[data-theme="light"] .amgosse-card-accent::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--brand-color), var(--brand-color-2));
border-radius: 4px 0 0 4px;
}
/* ── KPI Metric Cards refinados ── */
.amgosse-metric-label,
.al {
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
color: var(--muted) !important;
margin-bottom: 8px !important;
display: block;
}
.val,
.amgosse-metric-flex .val,
.amgosse-metric-box .val {
font-size: 30px !important;
font-weight: 800 !important;
letter-spacing: -1px !important;
line-height: 1.05 !important;
color: var(--text) !important;
font-variant-numeric: tabular-nums;
}
.amgosse-metric-box {
padding: 18px !important;
border-radius: 14px !important;
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) !important;
}
.amgosse-metric-box:hover {
background: var(--surface-3) !important;
border-color: var(--border-hover) !important;
transform: translateY(-1px);
}
[data-theme="light"] .amgosse-metric-box {
background: #F8FAFC !important;
border: 1px solid rgba(15,23,42,0.05) !important;
}
[data-theme="light"] .amgosse-metric-box:hover {
background: #F1F5F9 !important;
}
/* Box de métrica colorida (m-blue, m-green, m-purple) */
[data-theme="light"] .amgosse-metric-box.m-blue { background: linear-gradient(135deg,#EFF6FF,#DBEAFE) !important; border-color:rgba(59,130,246,.18) !important; }
[data-theme="light"] .amgosse-metric-box.m-green { background: linear-gradient(135deg,#ECFDF5,#D1FAE5) !important; border-color:rgba(16,185,129,.18) !important; }
[data-theme="light"] .amgosse-metric-box.m-purple { background: linear-gradient(135deg,#F5F3FF,#EDE9FE) !important; border-color:rgba(124,58,237,.18) !important; }
/* Funil de Conversão Meta (painel direito) */
[data-theme="light"] [class*="kpi-card"],
[data-theme="light"] [class*="conversion"] {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
box-shadow: var(--shadow-xs) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ── Buttons premium ── */
.ab {
border-radius: var(--radius-button) !important;
transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast) !important;
font-weight: 700 !important;
letter-spacing: -0.1px !important;
}
.ab.ab-p {
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-2)) !important;
box-shadow: var(--shadow-button-primary) !important;
border: none !important;
color: var(--text-on-brand) !important;
}
.ab.ab-p:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(37,99,235,.45), 0 1px 3px rgba(37,99,235,.20) !important;
}
.ab.ab-p:active { transform: translateY(0); }
[data-theme="light"] .ab.ab-s,
[data-theme="light"] .ab-sm:not(.active) {
background: #FFFFFF !important;
border: 1px solid rgba(15,23,42,0.08) !important;
color: #334155 !important;
box-shadow: var(--shadow-xs) !important;
}
[data-theme="light"] .ab.ab-s:hover,
[data-theme="light"] .ab-sm:not(.active):hover {
background: #F8FAFC !important;
border-color: rgba(15,23,42,0.14) !important;
transform: translateY(-1px);
}
/* Date filter premium */
.amgosse-date-filter {
border-radius: 14px !important;
padding: 4px !important;
gap: 2px !important;
}
.amgosse-date-filter .ab {
border-radius: 10px !important;
padding: 6px 14px !important;
font-size: 11px !important;
letter-spacing: 0.4px !important;
}
.amgosse-date-filter .ab.active {
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-2)) !important;
color: var(--text-on-brand) !important;
box-shadow: 0 2px 8px rgba(37,99,235,.30) !important;
}
/* ── Inputs premium ── */
.ai, .amgosse-input,
input.ai, textarea.ai, select.ai {
border-radius: var(--radius-input) !important;
transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast) !important;
font-size: 13.5px !important;
font-weight: 500 !important;
}
.ai:focus, .amgosse-input:focus,
input.ai:focus, textarea.ai:focus, select.ai:focus {
border-color: var(--brand-color) !important;
box-shadow: 0 0 0 3px rgba(59,130,246,.14) !important;
outline: none !important;
}
/* ── Tabelas premium ── */
.at {
border-radius: 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
width: 100%;
}
[data-theme="light"] .at thead th {
font-size: 10.5px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: var(--muted) !important;
background: #F8FAFC !important;
padding: 14px 16px !important;
border-bottom: 1px solid rgba(15,23,42,0.06) !important;
}
.at tbody td {
padding: 14px 16px !important;
border-bottom: 1px solid var(--border) !important;
font-size: 13.5px !important;
transition: background var(--t-fast) !important;
}
[data-theme="light"] .at tbody tr:hover td {
background: #F8FAFC !important;
}
/* ── Badges premium ── */
[class*="badge-"] {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
padding: 4px 10px !important;
border-radius: 999px !important;
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid transparent;
}
.amgosse-status-pill { padding: 4px 10px !important; }
/* ── Top date filter card e Cockpit chart card ── */
[data-theme="light"] .amgosse-card-glow {
background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
border: 1px solid rgba(15,23,42,0.06) !important;
}
/* Meta Ads card header — dimensão premium */
.amgosse-meta-header > div:first-child > div:first-child {
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(24,119,242,.30) !important;
}
/* ── Theme toggle premium ── */
#amgosse-theme-toggle {
border-radius: 12px !important;
box-shadow: var(--shadow-button) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] #amgosse-theme-toggle {
background: rgba(255,255,255,0.85) !important;
border: 1px solid rgba(15,23,42,0.08) !important;
}
[data-theme="dark"] #amgosse-theme-toggle,
:root:not([data-theme="light"]) #amgosse-theme-toggle {
background: rgba(13,20,36,0.85) !important;
color: var(--warning) !important;
}
/* ── Tab pane fade-up sutil ── */
.amgosse-tab-pane.active {
animation: amgosseTabFade .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes amgosseTabFade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Modal premium ── */
[data-theme="light"] #amgosse-modal-bg {
background: rgba(15,23,42,0.40) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
#amgosse-modal-card {
border-radius: 20px !important;
box-shadow: var(--shadow-popover) !important;
}
[data-theme="light"] #amgosse-modal-card {
border: 1px solid rgba(15,23,42,0.06) !important;
}
/* ── Right panel: glass effect quando há dados Meta ── */
[data-theme="light"] [class*="conversion-funnel"],
[data-theme="light"] .dash-col-right .amgosse-card {
background: rgba(255,255,255,0.85) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ── Numbers tabular ── */
.val, [class*="metric"] [class*="num"], .at td:has(button) {
font-variant-numeric: tabular-nums;
}
/* ── Hover scale sutil em cards de KPI ── */
.amgosse-card-accent { cursor: default; }
[data-theme="light"] .amgosse-card-accent:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-card-hover) !important;
}
/* ── Investimento total — gradient text ── */
[data-metric="spend"] {
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
font-variant-numeric: tabular-nums;
}
/* ── Geo map placeholder ── */
[data-theme="light"] [class*="geo"],
[data-theme="light"] [class*="map"] {
background: linear-gradient(135deg, #F8FAFC, #F1F5F9) !important;
border: 1px solid rgba(15,23,42,0.06) !important;
border-radius: 16px !important;
filter: none !important;
}
[data-theme="light"] [class*="geo"] svg,
[data-theme="light"] [class*="map"] img {
filter: none !important;
opacity: 0.4 !important;
}
/* ── Date pill "06/05/2026 — Atribuição de Canais Ativa" ── */
.amgosse-tab-header [style*="display:inline-flex"][style*="gap:6px"] {
background: rgba(16,185,129,.10);
padding: 4px 12px;
border-radius: 999px;
font-size: 11.5px !important;
font-weight: 600;
}
/* ── Sidebar status badge "Sistema Operacional / 1 leads hoje" ── */
[data-theme="light"] .amgosse-sidebar-status,
[data-theme="light"] [class*="amgosse-sidebar"] [class*="status"] {
background: linear-gradient(135deg, #ECFDF5, #D1FAE5) !important;
border: 1px solid rgba(16,185,129,.20) !important;
border-radius: 12px !important;
padding: 12px 14px !important;
}
/* ── Inputs no settings (bgs cinza) ── */
[data-theme="light"] [class*="settings"] input,
[data-theme="light"] [class*="settings"] textarea,
[data-theme="light"] [class*="settings"] select {
background: #FFFFFF !important;
}
/* ── Toggle switch premium ── */
[data-theme="light"] input[type="checkbox"][role="switch"] {
accent-color: var(--brand-color);
}
/* ── Scrollbars sutis (webkit) ── */
[data-theme="light"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="light"] ::-webkit-scrollbar-thumb {
background: rgba(15,23,42,0.10);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
background: rgba(15,23,42,0.20);
background-clip: padding-box;
}
/* ── Headings nas seções de configurações ── */
.amgosse-section-title {
font-size: 17px !important;
font-weight: 800 !important;
letter-spacing: -0.4px !important;
}
.amgosse-section-icon {
border-radius: 10px !important;
box-shadow: var(--shadow-xs) !important;
}
/* ════════════════════════════════════════════════════════════
PREMIUM v5.6.3 — Hierarquia visual nota 10
Reduz números gigantes, refina spacing, melhora elevation,
redesenha painel direito e sidebar status badge.
Cancela parcialmente o exagero da v5.6.2.
════════════════════════════════════════════════════════════ */
/* ── Reset values: tamanhos enxutos estilo Linear/Stripe ── */
.val,
.amgosse-metric-flex .val {
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.5px !important;
line-height: 1.1 !important;
}
.amgosse-metric-box .val {
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: -0.4px !important;
margin-top: 4px;
}
/* Cards top de atribuição (Lead Tráfego, Orgânico, Visitas) — valores menores */
.amgosse-attribution-grid .val {
font-size: 26px !important;
font-weight: 800 !important;
letter-spacing: -0.7px !important;
}
.amgosse-attribution-grid .amgosse-card-accent {
padding: 18px 22px !important;
}
.amgosse-attribution-grid .amgosse-metric-label {
font-size: 10px !important;
letter-spacing: 1.3px !important;
margin-bottom: 6px !important;
}
.amgosse-attribution-grid .amgosse-metric-flex {
display: flex;
align-items: baseline !important;
gap: 10px !important;
margin-top: 4px;
}
/* Labels mais legíveis */
.al,
.amgosse-metric-label {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.3px !important;
margin-bottom: 6px !important;
color: var(--muted) !important;
}
/* Investimento Total — mais contido, antes parecia banner */
[data-metric="spend"] {
font-size: 28px !important;
letter-spacing: -0.6px !important;
font-weight: 800 !important;
}
.amgosse-meta-footer .al { font-size: 11px !important; }
/* ── Cards Meta Ads internos (CPM/CTR/CPC etc) — mais elegantes ── */
.amgosse-meta-grid {
gap: 12px !important;
}
.amgosse-metric-box {
padding: 16px !important;
border-radius: 12px !important;
position: relative;
overflow: hidden;
}
.amgosse-metric-box .al {
font-size: 9.5px !important;
letter-spacing: 1.4px !important;
}
/* Variantes de cor mais sutis no light */
[data-theme="light"] .amgosse-metric-box {
background: #F8FAFC !important;
border: 1px solid rgba(15,23,42,0.04) !important;
}
[data-theme="light"] .amgosse-metric-box.m-blue {
background: linear-gradient(135deg, rgba(239,246,255,0.7), rgba(219,234,254,0.4)) !important;
border-color: rgba(59,130,246,0.10) !important;
}
[data-theme="light"] .amgosse-metric-box.m-green {
background: linear-gradient(135deg, rgba(236,253,245,0.7), rgba(209,250,229,0.4)) !important;
border-color: rgba(16,185,129,0.10) !important;
}
[data-theme="light"] .amgosse-metric-box.m-purple {
background: linear-gradient(135deg, rgba(245,243,255,0.7), rgba(237,233,254,0.4)) !important;
border-color: rgba(124,58,237,0.10) !important;
}
[data-theme="light"] .amgosse-metric-box.m-green .val { color: #047857 !important; }
[data-theme="light"] .amgosse-metric-box.m-blue .val { color: #1d4ed8 !important; }
[data-theme="light"] .amgosse-metric-box.m-purple .val { color: #6d28d9 !important; }
/* ── Sidebar "Sistema Operacional" badge — mais discreto ── */
[data-theme="light"] .amgosse-sidebar-status,
#amgosse-sidebar [class*="status"]:not(.nav-i):not([class*="amgosse-status-pill"]) {
background: rgba(16,185,129,0.06) !important;
border: 1px solid rgba(16,185,129,0.14) !important;
border-radius: 12px !important;
padding: 10px 12px !important;
font-size: 11.5px !important;
margin: 0 !important;
}
#amgosse-sidebar [class*="status"] strong,
#amgosse-sidebar [class*="status"] [style*="font-weight"] {
font-size: 12px !important;
font-weight: 700 !important;
}
#amgosse-sidebar [class*="status"] [style*="font-size"]:last-child {
font-size: 10.5px !important;
color: var(--muted) !important;
}
/* ── Logo da agência (sidebar topo) ── */
#amgosse-sidebar [class*="brand"] [style*="font-size:18px"],
#amgosse-sidebar [class*="brand"] [style*="font-size:17px"] {
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -0.3px !important;
}
#amgosse-sidebar [class*="brand"] [style*="font-size:11px"],
#amgosse-sidebar [class*="brand"] [style*="font-size:10px"] {
font-size: 9.5px !important;
letter-spacing: 1.4px !important;
font-weight: 700 !important;
color: var(--muted) !important;
}
/* ── Page title respiro ── */
.amgosse-page-title {
font-size: 32px !important;
letter-spacing: -1.2px !important;
margin-bottom: 6px !important;
}
.amgosse-tab-header {
margin-bottom: 32px !important;
align-items: flex-end !important;
}
.amgosse-tab-header > div:first-child > div:first-child {
font-size: 10px !important;
letter-spacing: 1.8px !important;
margin-bottom: 6px !important;
}
/* Date pill subtitle */
.amgosse-tab-header [style*="margin-top"][style*="font-size:12px"] {
font-size: 12px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.amgosse-tab-header [style*="rgba(16,185,129"] {
background: rgba(16,185,129,0.08) !important;
padding: 4px 10px !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 600 !important;
}
/* ── Painel direito (Funil de Conversão Meta) — refinado ── */
.dash-col-right {
gap: 12px !important;
}
.dash-col-right > div,
[class*="conversion"] > div,
[class*="conversion-funnel-row"] {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
transition: background var(--t-fast), border-color var(--t-fast) !important;
}
.dash-col-right > div:hover,
[class*="conversion-funnel-row"]:hover {
background: var(--surface-2) !important;
border-color: var(--border-hover) !important;
}
[data-theme="light"] .dash-col-right > div {
background: rgba(255,255,255,0.7) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-xs) !important;
}
/* Heading "Funil de Conversão Meta (Tempo Real)" */
.dash-col-right > h3,
.dash-col-right > div:first-child h3,
[class*="conversion-funnel"] h3 {
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
margin-bottom: 12px !important;
}
/* Audience Geo Distribution heading */
.dash-col-right h3 {
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
}
/* Conversion funnel labels e values */
[class*="conversion-funnel-row"] [style*="text-transform:uppercase"],
.dash-col-right [style*="font-size:11px"][style*="uppercase"] {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
}
[class*="conversion-funnel-row"] [style*="font-size:18px"],
.dash-col-right [style*="font-weight:800"] {
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: -0.4px !important;
}
/* Progress bar do funil direito */
[class*="conversion-funnel"] [style*="height:6px"],
[class*="conversion-funnel"] [style*="height: 6px"] {
height: 4px !important;
border-radius: 99px !important;
background: rgba(15,23,42,0.05) !important;
}
/* ── Date filter compacto ── */
.amgosse-date-filter {
padding: 3px !important;
gap: 1px !important;
}
.amgosse-date-filter .ab {
padding: 5px 11px !important;
font-size: 10.5px !important;
letter-spacing: 0.3px !important;
font-weight: 700 !important;
}
/* ── Cards principais top — accent bar mais sutil (não gradient pesado) ── */
[data-theme="light"] .amgosse-card-accent {
border-left: none !important;
}
[data-theme="light"] .amgosse-card-accent::before {
width: 3px !important;
background: var(--brand-color) !important;
opacity: 0.85;
border-radius: 3px 0 0 3px;
}
[data-theme="light"] .amgosse-card-accent[style*="--purple"]::before,
[data-theme="light"] .amgosse-card-accent[style*="border-left:4px solid var(--purple)"]::before {
background: var(--brand-color-2) !important;
}
[data-theme="light"] .amgosse-card-accent[style*="--muted"]::before,
[data-theme="light"] .amgosse-card-accent[style*="border-left:4px solid var(--muted)"]::before {
background: var(--muted) !important;
}
/* Remove inline border-left dos cards accent (que estamos substituindo por ::before) */
[data-theme="light"] .amgosse-card-accent[style*="border-left"] {
border-left: none !important;
}
/* ── Cards Meta Ads section header ── */
.amgosse-meta-header {
margin-bottom: 20px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid var(--border);
}
.amgosse-meta-header > div:first-child > div:nth-child(2) > div:first-child {
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
}
.amgosse-meta-header [class*="badge-green"] {
font-size: 9px !important;
padding: 2px 7px !important;
letter-spacing: 0.6px !important;
}
/* ── Cockpit "Investimento Total" footer mais limpo ── */
.amgosse-meta-footer {
padding-top: 20px !important;
border-top: 1px solid var(--border) !important;
margin-top: 20px !important;
}
/* ── Card glow effect sutil ── */
[data-theme="light"] .amgosse-card-glow {
background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%) !important;
}
[data-theme="light"] .amgosse-card-glow::before {
content: '';
position: absolute;
top: -1px; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--brand-color), var(--brand-color-2), transparent);
opacity: 0.7;
border-radius: var(--radius-card-md) var(--radius-card-md) 0 0;
}
.amgosse-card-glow { position: relative; }
/* ── Audience Geo placeholder elegante ── */
[data-theme="light"] [class*="geo-distribution"],
[data-theme="light"] [class*="audience-geo"] {
background: linear-gradient(135deg, #F8FAFC, #F1F5F9) !important;
border-radius: 16px !important;
border: 1px solid var(--border) !important;
position: relative;
overflow: hidden;
}
/* ── Reportar button no canto direito ── */
.amgosse-tab-header .ab.ab-p {
font-size: 12.5px !important;
padding: 10px 20px !important;
letter-spacing: -0.1px !important;
border-radius: 10px !important;
margin-right: 56px !important; /* respira do theme toggle */
}
/* ── Theme toggle posição refinada ── */
#amgosse-theme-toggle {
width: 38px !important;
height: 38px !important;
top: 24px !important;
right: 24px !important;
}
[data-theme="light"] #amgosse-theme-toggle {
color: #d97706 !important;
}
/* ── Sidebar bottom (admin user) ── */
[data-theme="light"] #amgosse-sidebar [class*="user"]:not(.nav-i),
[data-theme="light"] [class*="amgosse-user-bottom"] {
background: var(--surface-2) !important;
border-top: 1px solid var(--border) !important;
}
/* ── Spacing global mais arejado ── */
.amgosse-dash-mega-grid {
gap: 20px !important;
}
.amgosse-attribution-grid {
gap: 12px !important;
margin-bottom: 20px !important;
}
/* Hover lift mais sutil em cards */
[data-theme="light"] .amgosse-card:hover {
transform: translateY(-1px);
}
/* ── Border-left de cards accent — versão refinada (com cor verdadeira) ── */
[data-theme="light"] .amgosse-card.amgosse-card-accent {
padding-left: 22px !important;
}
/* ── Sutileza: cards secundários (KPI Meta) sem border-left ── */
.amgosse-meta-grid .amgosse-metric-box {
border-left: none !important;
}
/* ── Charts card title — refinado ── */
.amgosse-card-header h3 {
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
}
.amgosse-card-header p {
font-size: 12px !important;
margin-top: 4px !important;
}
/* ── Animação stagger nos cards quando entra ── */
.fade-up {
animation: amgosseFadeUp .55s cubic-bezier(.16,1,.3,1) both;
}
.amgosse-attribution-grid > *:nth-child(1) { animation-delay: 0ms; }
.amgosse-attribution-grid > *:nth-child(2) { animation-delay: 50ms; }
.amgosse-attribution-grid > *:nth-child(3) { animation-delay: 100ms; }
@keyframes amgosseFadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Selects nativos com seta custom ── */
[data-theme="light"] select.ai,
[data-theme="light"] select.amgosse-input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
padding-right: 36px !important;
}
/* ── Responsive: mobile spacing ── */
@media (max-width: 720px) {
.val { font-size: 19px !important; }
.amgosse-attribution-grid .val { font-size: 22px !important; }
.amgosse-page-title { font-size: 24px !important; letter-spacing: -0.7px !important; }
}
/* ════════════════════════════════════════════════════════════
v5.6.4 — UX/UI SENIOR-GRADE POLISH
Fix layout direita + hero aurora + segmented control +
dot grid + status horizontal + animações refinadas.
════════════════════════════════════════════════════════════ */
/* ── FIX URGENTE: reverter quebra do .dash-col-right ── */
.dash-col-right {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
/* Cancela o flex agressivo em CHILDREN (que estava colocando header em row com cards) */
.dash-col-right > .amgosse-card,
.dash-col-right > div.amgosse-card {
display: block !important;
padding: 20px !important;
}
/* Heading da coluna direita — single line */
.dash-col-right .amgosse-card h3,
.dash-col-right > div > h3 {
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
margin: 0 0 16px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Cada item do funil de conversão (row interna) */
.dash-col-right [class*="conversion-funnel-row"],
.dash-col-right [class*="funnel-row"],
.dash-col-right .amgosse-card > div:not(:first-child) {
background: transparent !important;
border: none !important;
padding: 8px 0 !important;
margin: 0 !important;
}
/* ── DOT GRID BACKGROUND (textura sutil) ── */
[data-theme="light"] .amgosse-admin-wrap {
background:
radial-gradient(circle, rgba(15,23,42,0.025) 1px, transparent 1px) 0 0/24px 24px,
linear-gradient(180deg, #FAFBFD 0%, #F4F6FA 100%) !important;
}
[data-theme="dark"] .amgosse-admin-wrap,
:root:not([data-theme="light"]) .amgosse-admin-wrap {
background:
radial-gradient(circle, rgba(255,255,255,0.012) 1px, transparent 1px) 0 0/24px 24px,
var(--bg) !important;
}
/* ── HERO HEADER COM AURORA EFFECT ── */
.amgosse-tab-header {
position: relative !important;
padding: 28px 32px !important;
border-radius: 20px !important;
overflow: hidden;
margin-bottom: 24px !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="light"] .amgosse-tab-header::before {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(124,58,237,0.10), transparent 60%);
pointer-events: none;
z-index: 0;
filter: blur(40px);
}
[data-theme="light"] .amgosse-tab-header::after {
content: '';
position: absolute;
top: -80px;
right: 80px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(59,130,246,0.10), transparent 60%);
pointer-events: none;
z-index: 0;
filter: blur(40px);
}
.amgosse-tab-header > * {
position: relative;
z-index: 1;
}
.amgosse-page-title {
font-size: 30px !important;
letter-spacing: -1.1px !important;
margin-bottom: 4px !important;
}
/* ── SEGMENTED CONTROL pro date filter ── */
.amgosse-date-filter {
background: rgba(15,23,42,0.04) !important;
border: 1px solid rgba(15,23,42,0.06) !important;
border-radius: 12px !important;
padding: 4px !important;
gap: 0 !important;
position: relative;
}
[data-theme="dark"] .amgosse-date-filter,
:root:not([data-theme="light"]) .amgosse-date-filter {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.08) !important;
}
.amgosse-date-filter .ab {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--muted) !important;
padding: 6px 12px !important;
border-radius: 8px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.2px !important;
transition: color var(--t-fast), background var(--t-fast) !important;
position: relative;
z-index: 1;
}
.amgosse-date-filter .ab:not(.active):hover {
background: transparent !important;
color: var(--text-secondary) !important;
transform: none !important;
}
.amgosse-date-filter .ab.active {
background: var(--surface) !important;
color: var(--brand-color) !important;
box-shadow: 0 1px 3px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04) !important;
transform: none !important;
}
[data-theme="dark"] .amgosse-date-filter .ab.active,
:root:not([data-theme="light"]) .amgosse-date-filter .ab.active {
background: rgba(59,130,246,0.18) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
/* ── SIDEBAR STATUS BADGE — Layout horizontal compacto ── */
[data-theme="light"] #amgosse-sidebar > div:has([style*="leads hoje"]),
[data-theme="light"] #amgosse-sidebar [class*="status-badge"],
[data-theme="light"] #amgosse-sidebar [class*="status-card"] {
background: linear-gradient(135deg, #ECFDF5, #D1FAE5) !important;
border: 1px solid rgba(16,185,129,0.15) !important;
border-radius: 12px !important;
padding: 10px 12px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 12px 14px !important;
}
#amgosse-sidebar [style*="leads hoje"] {
font-size: 11px !important;
color: #047857 !important;
font-weight: 700 !important;
white-space: nowrap;
}
#amgosse-sidebar [style*="Sistema Operacional"] {
font-size: 11.5px !important;
font-weight: 700 !important;
color: #047857 !important;
white-space: nowrap;
}
/* ── REPORT BUTTON — destaque premium ── */
.amgosse-tab-header .ab.ab-p {
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-2)) !important;
padding: 11px 22px !important;
font-size: 12.5px !important;
letter-spacing: -0.1px !important;
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(124,58,237,0.30), inset 0 1px 0 rgba(255,255,255,0.15) !important;
position: relative;
overflow: hidden;
}
.amgosse-tab-header .ab.ab-p::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 50%);
pointer-events: none;
}
.amgosse-tab-header .ab.ab-p:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(124,58,237,0.40), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
/* ── KPI CARDS TOP — Estilo Stripe Dashboard ── */
.amgosse-attribution-grid {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 14px !important;
}
[data-theme="light"] .amgosse-attribution-grid .amgosse-card-accent {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
padding: 18px 20px !important;
position: relative;
overflow: hidden;
}
[data-theme="light"] .amgosse-attribution-grid .amgosse-card-accent::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 60%, rgba(59,130,246,0.03));
pointer-events: none;
z-index: 0;
}
.amgosse-attribution-grid .amgosse-card-accent > * { position: relative; z-index: 1; }
/* Card 2 (Lead Orgânico) — accent purple */
[data-theme="light"] .amgosse-attribution-grid .amgosse-card-accent:nth-child(2)::before { background: var(--brand-color-2) !important; }
[data-theme="light"] .amgosse-attribution-grid .amgosse-card-accent:nth-child(2)::after {
background: linear-gradient(135deg, transparent 60%, rgba(124,58,237,0.04)) !important;
}
/* Card 3 (Visitas no Site) — accent neutro */
[data-theme="light"] .amgosse-attribution-grid .amgosse-card-accent:nth-child(3)::before { background: var(--muted) !important; }
[data-theme="light"] .amgosse-attribution-grid .amgosse-card-accent:nth-child(3)::after {
background: linear-gradient(135deg, transparent 70%, rgba(100,116,139,0.04)) !important;
}
.amgosse-attribution-grid .amgosse-metric-flex {
display: flex !important;
align-items: baseline !important;
gap: 12px !important;
}
.amgosse-attribution-grid .val {
font-size: 28px !important;
font-weight: 800 !important;
letter-spacing: -0.8px !important;
color: var(--text) !important;
}
/* Badge no card top (96% do Funil, Estável) — refinado */
.amgosse-attribution-grid [class*="badge-"] {
font-size: 10px !important;
padding: 3px 9px !important;
letter-spacing: 0.3px !important;
border-radius: 999px !important;
font-weight: 700 !important;
}
[data-theme="light"] .amgosse-attribution-grid .badge-green {
background: rgba(16,185,129,0.10) !important;
color: #047857 !important;
}
[data-theme="light"] .amgosse-attribution-grid .badge-status {
background: rgba(15,23,42,0.05) !important;
color: var(--text-secondary) !important;
}
/* ── META ADS CARD — header refinado ── */
.amgosse-card-glow .amgosse-meta-header > div:first-child > div:first-child {
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
}
.amgosse-card-glow .amgosse-meta-header svg {
width: 18px !important;
height: 18px !important;
}
/* ── KPI Boxes Meta — número e label proporção ── */
.amgosse-metric-box {
padding: 14px 16px !important;
border-radius: 12px !important;
}
.amgosse-metric-box .al {
font-size: 9.5px !important;
letter-spacing: 1.3px !important;
margin-bottom: 6px !important;
display: block;
}
.amgosse-metric-box .val {
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: -0.4px !important;
margin-top: 0 !important;
}
/* Cards verdes (m-green) — saturação reduzida */
[data-theme="light"] .amgosse-metric-box.m-green {
background: linear-gradient(135deg, #F0FDF4, #DCFCE7) !important;
border-color: rgba(16,185,129,0.12) !important;
}
[data-theme="light"] .amgosse-metric-box.m-green .val { color: #047857 !important; }
[data-theme="light"] .amgosse-metric-box.m-blue .val { color: #1E40AF !important; }
[data-theme="light"] .amgosse-metric-box.m-purple .val { color: #6D28D9 !important; }
/* ── Investimento Total — typography premium ── */
.amgosse-meta-footer {
text-align: center !important;
padding-top: 24px !important;
margin-top: 24px !important;
border-top: 1px solid var(--border) !important;
}
.amgosse-meta-footer .al {
font-size: 10.5px !important;
letter-spacing: 1.5px !important;
margin-bottom: 8px !important;
}
[data-metric="spend"] {
font-size: 32px !important;
font-weight: 800 !important;
letter-spacing: -0.8px !important;
font-feature-settings: 'tnum' 1;
}
/* ── Theme toggle — refinado ── */
#amgosse-theme-toggle {
width: 40px !important;
height: 40px !important;
top: 26px !important;
right: 28px !important;
border-radius: 12px !important;
}
/* Espaço pro report button respirar */
.amgosse-tab-header > div:nth-child(2),
.amgosse-tab-header [style*="display:flex"][style*="gap:16px"] {
padding-right: 56px !important;
}
/* ── Audience Geo — empty state elegante ── */
.dash-col-right [class*="audience"],
.dash-col-right [class*="geo-distribution"],
.dash-col-right .amgosse-card:has(canvas#amgosse-geo) {
background: var(--surface) !important;
padding: 20px !important;
}
/* Empty state geo — texto centralizado ao invés de quebrado */
.dash-col-right [class*="geo"] [style*="Nenhum"],
.dash-col-right [class*="geo"] p:not(:has(svg)) {
text-align: center !important;
font-size: 12px !important;
color: var(--muted) !important;
margin: 12px 0 0 !important;
padding: 16px !important;
}
/* ── Progress bars refinadas ── */
[class*="progress"] [style*="background:linear-gradient"],
[class*="progress-bar"] {
height: 4px !important;
border-radius: 999px !important;
background: linear-gradient(90deg, var(--brand-color), var(--brand-color-2)) !important;
}
/* Wrapper das progress bars */
[class*="progress"]:has([style*="height:8px"]),
[style*="height:8px"][style*="background:rgba"] {
height: 4px !important;
background: rgba(15,23,42,0.06) !important;
border-radius: 999px !important;
}
/* ── Refinamento sidebar nav ── */
#amgosse-sidebar .nav-i {
padding: 10px 14px !important;
font-size: 13px !important;
height: auto !important;
min-height: 38px;
}
#amgosse-sidebar .nav-i svg {
width: 18px !important;
height: 18px !important;
opacity: 0.9;
}
/* Voltar link — mais sutil */
[data-theme="light"] #amgosse-sidebar [href*="wp-admin"]:first-child,
[data-theme="light"] .amgosse-sidebar-back {
color: var(--muted) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
padding: 10px 14px !important;
margin-bottom: 4px !important;
}
[data-theme="light"] .amgosse-sidebar-back:hover {
color: var(--text) !important;
}
/* ── Avatar de usuário (rodapé sidebar) ── */
[data-theme="light"] #amgosse-sidebar [class*="user-bottom"],
[data-theme="light"] #amgosse-sidebar [class*="user-avatar"]:has(span):last-child {
background: linear-gradient(135deg, #FFFFFF, #FAFBFD) !important;
border-top: 1px solid var(--border) !important;
padding: 14px !important;
}
/* ── Card "Conv. Leads" line "CRM: 0 0% match" ── */
#meta-match-line,
[id*="match-line"] {
display: flex !important;
align-items: center !important;
gap: 6px !important;
margin-top: 8px !important;
font-size: 10.5px !important;
letter-spacing: 0.2px !important;
font-weight: 600 !important;
padding-top: 8px !important;
border-top: 1px dashed var(--border) !important;
}
/* ── Subtle pulse no pulse dot ── */
.amgosse-pulse-dot {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: var(--success) !important;
box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
animation: amgossePulse 2s infinite;
}
@keyframes amgossePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
50% { box-shadow: 0 0 0 6px rgba(16,185,129,0.15); }
}
/* ── Card hover lift + gentle scale ── */
.amgosse-card,
.amgosse-card-accent {
will-change: transform, box-shadow;
}
/* ── Iconografia: peso 1.5 (mais elegante) ── */
.amgosse-tab-header svg,
.amgosse-card-header svg,
.amgosse-meta-header > div:last-child svg {
stroke-width: 1.75 !important;
}
/* ── Skeleton loading shimmer (placeholder) ── */
@keyframes amgosseShimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.amgosse-skeleton {
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
background-size: 200% 100%;
animation: amgosseShimmer 1.4s infinite;
border-radius: 6px;
}
/* ── "Conta: MESTRE CLIENTE 04" — refinado ── */
.amgosse-meta-header [style*="font-size:11px"][style*="margin-top:2px"],
.amgosse-meta-header select#dash-account-selector {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.1px !important;
}
/* ── Modal/Settings forms ── */
.amgosse-settings-section .amgosse-section-icon svg {
stroke-width: 1.75 !important;
}
/* ── Date pill no header ── */
.amgosse-tab-header [style*="rgba(16,185,129"] {
background: rgba(16,185,129,0.10) !important;
padding: 5px 12px !important;
border-radius: 999px !important;
font-size: 11.5px !important;
font-weight: 600 !important;
color: #047857 !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
}
/* ════════════════════════════════════════════════════════════
v5.6.5 — Espaçamentos premium + consistência total
════════════════════════════════════════════════════════════ */
/* ── Espaçamento global mais generoso ── */
.amgosse-tab-pane.apad,
.apad {
padding: 32px !important;
}
@media (max-width: 900px) {
.amgosse-tab-pane.apad { padding: 20px !important; }
}
.amgosse-dash-mega-grid {
display: grid !important;
gap: 24px !important;
align-items: start !important;
}
.amgosse-attribution-grid {
gap: 16px !important;
margin-bottom: 24px !important;
}
.amgosse-meta-grid {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 14px !important;
margin-top: 22px !important;
}
@media (max-width: 1100px) {
.amgosse-meta-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
.amgosse-meta-grid { grid-template-columns: 1fr !important; }
}
/* ── Hero header — aurora reduzida ── */
[data-theme="light"] .amgosse-tab-header::before {
opacity: 0.55 !important;
filter: blur(60px) !important;
}
[data-theme="light"] .amgosse-tab-header::after {
opacity: 0.55 !important;
filter: blur(60px) !important;
}
.amgosse-tab-header {
padding: 24px 28px !important;
margin-bottom: 22px !important;
border-radius: 18px !important;
}
/* ── Card padding interno ── */
.amgosse-card,
.amgosse-card-accent,
.amgosse-card-glow {
padding: 24px !important;
}
.amgosse-card-glow {
padding: 24px 26px !important;
}
.amgosse-attribution-grid .amgosse-card-accent {
padding: 20px 22px !important;
}
.amgosse-settings-section {
padding: 28px !important;
}
/* ── Header dentro de card ── */
.amgosse-card-header {
margin-bottom: 18px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid var(--border) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 16px !important;
flex-wrap: wrap !important;
}
/* ── Painel direito — refinado de verdade ── */
.dash-col-right {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
position: sticky !important;
top: 24px !important;
}
.dash-col-right > .amgosse-card,
.dash-col-right > div.amgosse-card {
padding: 22px !important;
border-radius: 16px !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-card) !important;
}
.dash-col-right .amgosse-card h3 {
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
margin: 0 0 18px !important;
color: var(--text) !important;
white-space: normal !important;
line-height: 1.3 !important;
}
/* Cada métrica do funil de conversão (ALCANCE, ENGAJAMENTO, etc) */
.dash-col-right .amgosse-card > div:not(:first-child),
.dash-col-right [class*="conversion-funnel-row"],
.dash-col-right [class*="funnel-row"] {
background: var(--surface-2) !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
padding: 14px 16px !important;
margin: 0 0 10px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) !important;
}
.dash-col-right .amgosse-card > div:not(:first-child):last-child {
margin-bottom: 0 !important;
}
.dash-col-right .amgosse-card > div:not(:first-child):hover {
background: var(--surface-3) !important;
border-color: var(--border-hover) !important;
transform: translateX(2px) !important;
}
[data-theme="light"] .dash-col-right .amgosse-card > div:not(:first-child) {
background: #F8FAFC !important;
}
[data-theme="light"] .dash-col-right .amgosse-card > div:not(:first-child):hover {
background: #F1F5F9 !important;
}
/* Label da métrica do painel direito */
.dash-col-right [class*="conversion-funnel-row"] [style*="text-transform:uppercase"],
.dash-col-right > div > div [style*="text-transform:uppercase"] {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
color: var(--muted) !important;
flex-shrink: 0 !important;
}
/* Valor da métrica */
.dash-col-right [class*="conversion-funnel-row"] [style*="font-weight:800"],
.dash-col-right [class*="conversion-funnel-row"] [style*="font-weight:700"],
.dash-col-right > div > div [style*="font-weight:800"] {
font-size: 17px !important;
font-weight: 700 !important;
letter-spacing: -0.3px !important;
color: var(--text) !important;
font-feature-settings: 'tnum' 1 !important;
}
/* % indicador no rodapé do row */
.dash-col-right [style*="font-size:11px"][style*="color"] {
font-size: 11px !important;
font-weight: 600 !important;
flex-shrink: 0 !important;
}
/* Progress bar fina */
.dash-col-right [style*="height:8px"],
.dash-col-right [style*="height: 8px"],
.dash-col-right [style*="height:6px"] {
height: 4px !important;
border-radius: 999px !important;
background: rgba(15,23,42,0.06) !important;
overflow: hidden !important;
flex: 1 !important;
max-width: 80px !important;
}
.dash-col-right [style*="height:8px"] > *,
.dash-col-right [style*="height: 8px"] > * {
background: linear-gradient(90deg, var(--brand-color), var(--brand-color-2)) !important;
border-radius: 999px !important;
}
/* ── Audience Geo Distribution — empty state com container ── */
.dash-col-right .amgosse-card:has(canvas#amgosse-geo),
.dash-col-right [class*="audience"],
.dash-col-right [class*="geo-distribution"] {
text-align: center !important;
}
.dash-col-right [class*="geo"] [style*="Nenhum"],
.dash-col-right [class*="geo"] p {
color: var(--muted) !important;
font-size: 12px !important;
margin: 16px 0 0 !important;
text-align: center !important;
}
/* Geo map placeholder */
.dash-col-right canvas {
border-radius: 12px !important;
background: linear-gradient(135deg, #F8FAFC, #F1F5F9) !important;
opacity: 0.7 !important;
}
/* ── Card Meta Ads — header refinado ── */
.amgosse-meta-header {
margin-bottom: 22px !important;
padding-bottom: 18px !important;
border-bottom: 1px solid var(--border) !important;
}
.amgosse-meta-header [class*="badge-green"] {
background: rgba(16,185,129,0.10) !important;
color: #047857 !important;
font-size: 9px !important;
padding: 3px 8px !important;
border-radius: 999px !important;
letter-spacing: 0.6px !important;
}
/* ── Investimento Total — comprimido ── */
[data-metric="spend"] {
font-size: 28px !important;
letter-spacing: -0.6px !important;
}
.amgosse-meta-footer .al {
font-size: 10.5px !important;
letter-spacing: 1.4px !important;
margin-bottom: 6px !important;
}
.amgosse-meta-footer {
padding-top: 22px !important;
margin-top: 22px !important;
}
/* ── KPI Boxes refinamento final ── */
.amgosse-metric-box {
padding: 16px !important;
border-radius: 12px !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
min-height: 78px !important;
justify-content: center !important;
}
.amgosse-metric-box .al {
margin-bottom: 4px !important;
font-size: 9.5px !important;
}
.amgosse-metric-box .val {
font-size: 19px !important;
font-weight: 700 !important;
letter-spacing: -0.4px !important;
line-height: 1.1 !important;
}
/* Variantes de cor mais clean */
[data-theme="light"] .amgosse-metric-box {
background: rgba(15,23,42,0.025) !important;
border: 1px solid rgba(15,23,42,0.04) !important;
}
[data-theme="light"] .amgosse-metric-box.m-blue {
background: linear-gradient(180deg, rgba(239,246,255,0.6), rgba(219,234,254,0.3)) !important;
border-color: rgba(59,130,246,0.10) !important;
}
[data-theme="light"] .amgosse-metric-box.m-green {
background: linear-gradient(180deg, rgba(240,253,244,0.6), rgba(220,252,231,0.3)) !important;
border-color: rgba(16,185,129,0.10) !important;
}
[data-theme="light"] .amgosse-metric-box.m-purple {
background: linear-gradient(180deg, rgba(245,243,255,0.6), rgba(237,233,254,0.3)) !important;
border-color: rgba(124,58,237,0.10) !important;
}
/* ── Sidebar — Voltar e seções ── */
[data-theme="light"] .amgosse-sidebar-back {
padding: 14px 18px !important;
font-size: 12.5px !important;
color: var(--muted) !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
[data-theme="light"] .amgosse-sidebar-back:hover {
color: var(--text) !important;
}
#amgosse-sidebar {
padding: 0 !important;
}
#amgosse-sidebar > * {
padding-left: 14px !important;
padding-right: 14px !important;
}
#amgosse-sidebar .amgosse-nav-section-label,
.amgosse-sidebar-section-label {
margin: 22px 14px 8px !important;
padding: 0 !important;
}
/* Brand area sidebar — espaço superior */
[data-theme="light"] #amgosse-sidebar > div:first-child:not(.amgosse-sidebar-back),
[data-theme="light"] .amgosse-sidebar-brand {
padding: 18px 14px 6px !important;
}
/* User bottom card */
[data-theme="light"] #amgosse-sidebar [style*="Mestre Dos Mestre"]:closest(div),
[data-theme="light"] #amgosse-sidebar > div:has([style*="Administrador"]) {
padding: 14px !important;
border-top: 1px solid var(--border) !important;
margin-top: auto !important;
}
/* "Sair da plataforma" no rodapé sidebar */
[data-theme="light"] #amgosse-sidebar a[href*="logout"],
[data-theme="light"] [href*="logout"] {
padding: 12px 18px !important;
font-size: 12.5px !important;
color: var(--muted) !important;
border-top: 1px solid var(--border) !important;
}
/* ── Date filter no header ── */
.amgosse-tab-header [style*="display:flex"][style*="gap:16px"],
.amgosse-tab-header > div:nth-child(2) {
gap: 14px !important;
flex-wrap: nowrap !important;
}
/* ── Top 3 cards — height equalizado ── */
.amgosse-attribution-grid {
align-items: stretch !important;
}
.amgosse-attribution-grid > * {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
/* ── Ajusta o grid principal pra coluna direita ter mínimo ── */
@media (min-width: 1280px) {
.amgosse-dash-mega-grid {
grid-template-columns: 1fr minmax(280px, 320px) !important;
}
}
@media (max-width: 1279px) {
.amgosse-dash-mega-grid {
grid-template-columns: 1fr !important;
}
.dash-col-right {
position: static !important;
}
}
/* ── Eyebrow — sempre usa brand-color (não mais gradient com roxo se brand for outra cor) ── */
.amgosse-tab-header > div > div:first-child {
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 1.8px !important;
background: var(--brand-color) !important;
background-image: linear-gradient(135deg, var(--brand-color), var(--brand-color-2)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
display: inline-block !important;
}
/* ── Iconografia consistente no peso ── */
.amgosse-meta-header svg,
.amgosse-card-header svg {
stroke-width: 1.75 !important;
}
/* ── Cards com leve elevação ao hover (todos) ── */
.amgosse-card,
.amgosse-card-accent,
.amgosse-card-glow {
will-change: transform;
}
[data-theme="light"] .amgosse-card:hover {
border-color: rgba(15,23,42,0.10) !important;
}
/* ── Seção: progress bar dentro do card direito (Alcance 100%) ── */
.dash-col-right [class*="conversion-funnel-row"] > div:last-child,
.dash-col-right > div > div > div:last-child:has([style*="background"]) {
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* ── Subtítulo "06/05/2026 — Atribuição Ativa" ── */
.amgosse-tab-header [style*="margin-top"][style*="font-size:12px"] {
margin-top: 10px !important;
font-size: 12.5px !important;
color: var(--text-secondary) !important;
}
/* ── Geo map: opacity correta no light ── */
[data-theme="light"] .dash-col-right canvas#amgosse-geo {
filter: invert(0) !important;
opacity: 0.18 !important;
}
/* ════════════════════════════════════════════════════════════
v5.6.6 — DESIGN SYSTEM UNIFICADO + WHITE-LABEL SWEEP
════════════════════════════════════════════════════════════ */
/* ── DESIGN TOKENS (single source of truth) ── */
:root {
/* Spacing scale */
--gap-2xs: 4px;
--gap-xs: 8px;
--gap-sm: 12px;
--gap-md: 16px;
--gap-lg: 20px;
--gap-xl: 24px;
--gap-2xl: 32px;
--gap-3xl: 40px;
/* Card padding scale */
--card-pad-sm: 18px;
--card-pad-md: 22px;
--card-pad-lg: 26px;
/* Border radius scale */
--r-xs: 8px;
--r-sm: 10px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-2xl: 24px;
}
/* ── ESPAÇAMENTO UNIFICADO — Aplicação universal ── */
/* Tab pane wrap */
.amgosse-tab-pane.apad,
.apad {
padding: var(--gap-2xl) !important;
}
/* Hero header */
.amgosse-tab-header {
padding: var(--gap-xl) !important;
margin-bottom: var(--gap-xl) !important;
border-radius: var(--r-xl) !important;
}
/* Grids principais */
.amgosse-dash-mega-grid {
gap: var(--gap-xl) !important;
}
.amgosse-attribution-grid {
gap: var(--gap-md) !important;
margin-bottom: var(--gap-xl) !important;
}
.amgosse-meta-grid {
gap: var(--gap-sm) !important;
margin-top: var(--gap-lg) !important;
}
/* Cards */
.amgosse-card,
.amgosse-card-accent,
.amgosse-card-glow {
padding: var(--card-pad-lg) !important;
border-radius: var(--r-lg) !important;
}
.amgosse-attribution-grid .amgosse-card-accent {
padding: var(--gap-lg) var(--card-pad-md) !important;
}
.amgosse-settings-section {
padding: var(--gap-2xl) !important;
}
/* Sub-cards */
.amgosse-sub-card {
padding: var(--gap-lg) !important;
border-radius: var(--r-md) !important;
margin-top: var(--gap-md) !important;
}
/* Painel direito — espaçamento interno consistente */
.dash-col-right {
gap: var(--gap-md) !important;
}
.dash-col-right > .amgosse-card,
.dash-col-right > div.amgosse-card {
padding: var(--card-pad-md) !important;
}
.dash-col-right .amgosse-card h3 {
margin: 0 0 var(--gap-md) !important;
}
.dash-col-right .amgosse-card > div:not(:first-child) {
padding: var(--gap-sm) var(--gap-md) !important;
margin-bottom: var(--gap-xs) !important;
border-radius: var(--r-md) !important;
}
/* Card-header consistente */
.amgosse-card-header {
margin-bottom: var(--gap-md) !important;
padding-bottom: var(--gap-md) !important;
gap: var(--gap-md) !important;
}
/* Meta ads header */
.amgosse-meta-header {
margin-bottom: var(--gap-lg) !important;
padding-bottom: var(--gap-md) !important;
}
/* Meta ads footer */
.amgosse-meta-footer {
padding-top: var(--gap-lg) !important;
margin-top: var(--gap-lg) !important;
}
/* KPI metric box */
.amgosse-metric-box {
padding: var(--gap-md) !important;
border-radius: var(--r-md) !important;
gap: var(--gap-2xs) !important;
}
/* Sidebar — espaçamento interno */
#amgosse-sidebar {
gap: 0 !important;
}
#amgosse-sidebar .nav-i {
margin: 1px var(--gap-sm) !important;
padding: var(--gap-sm) var(--gap-md) !important;
border-radius: var(--r-sm) !important;
}
.amgosse-nav-section-label,
.amgosse-sidebar-section-label {
margin: var(--gap-lg) var(--gap-md) var(--gap-xs) !important;
}
/* ── WHITE-LABEL SWEEP — Override via attribute selectors ── */
/* Força cores hardcoded a respeitar --brand-color em CSS inline e no JS scaffold */
/* Hex blue 1: var(--brand-color) → brand */
.amgosse-admin-wrap [style*="var(--brand-color)"]:not([style*="background"]),
.amgosse-admin-wrap [style*="var(--brand-color)"]:not([style*="background"]) {
/* texto */
}
.amgosse-admin-wrap [style*="color:var(--brand-color)"],
.amgosse-admin-wrap [style*="color: var(--brand-color)"],
.amgosse-admin-wrap [style*="color:var(--brand-color)"] {
color: var(--brand-color) !important;
}
.amgosse-admin-wrap [style*="border-color:var(--brand-color)"],
.amgosse-admin-wrap [style*="border: 1px solid var(--brand-color)"],
.amgosse-admin-wrap [style*="border-left:4px solid var(--brand-color)"] {
border-color: var(--brand-color) !important;
}
/* Hex blue 2: var(--brand-color-hover) */
.amgosse-admin-wrap [style*="color:var(--brand-color-hover)"],
.amgosse-admin-wrap [style*="color: var(--brand-color-hover)"],
.amgosse-admin-wrap [style*="color:#2563eb"] {
color: var(--brand-color) !important;
}
/* Hex purple: var(--brand-color-2) */
.amgosse-admin-wrap [style*="color:var(--brand-color-2)"],
.amgosse-admin-wrap [style*="color: var(--brand-color-2)"],
.amgosse-admin-wrap [style*="color:var(--brand-color-2)"] {
color: var(--brand-color-2) !important;
}
/* Hex purple: #6366f1 */
.amgosse-admin-wrap [style*="color:#6366f1"],
.amgosse-admin-wrap [style*="color: #6366f1"],
.amgosse-admin-wrap [style*="color:#6366F1"] {
color: var(--brand-color) !important;
}
/* Gradient combos */
.amgosse-admin-wrap [style*="linear-gradient(135deg, var(--brand-color-hover)"],
.amgosse-admin-wrap [style*="linear-gradient(135deg,var(--brand-color-hover)"] {
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-2)) !important;
}
/* ── FLOW BUILDER — White-label override ── */
#tab-builder, #amgosse-builder-root {
/* Variables específicas do builder */
--builder-primary: var(--brand-color);
--builder-primary-2: var(--brand-color-2);
--builder-accent: var(--brand-color);
}
/* Overrides forçados no builder */
#amgosse-builder-root [style*="var(--brand-color)"],
#amgosse-builder-root [style*="var(--brand-color)"],
#tab-builder [style*="var(--brand-color)"],
#tab-builder [style*="var(--brand-color)"] {
color: var(--brand-color) !important;
}
#amgosse-builder-root [style*="background:var(--brand-color)"],
#amgosse-builder-root [style*="background-color:var(--brand-color)"],
#amgosse-builder-root [style*="background: var(--brand-color)"],
#amgosse-builder-root [style*="background:var(--brand-color-hover)"],
#amgosse-builder-root [style*="background-color:var(--brand-color-hover)"] {
background-color: var(--brand-color) !important;
background-image: none !important;
}
#amgosse-builder-root [style*="border-color:var(--brand-color)"],
#amgosse-builder-root [style*="border:1px solid var(--brand-color)"],
#amgosse-builder-root [style*="border:2px solid var(--brand-color)"] {
border-color: var(--brand-color) !important;
}
#amgosse-builder-root [style*="stroke=\"var(--brand-color)\""],
#amgosse-builder-root [style*='stroke="var(--brand-color)"'],
#amgosse-builder-root svg [stroke="var(--brand-color)"] {
stroke: var(--brand-color) !important;
}
#amgosse-builder-root [fill="var(--brand-color)"] {
fill: var(--brand-color) !important;
}
/* SVG paths (conexões do canvas) */
#amgosse-builder-root svg path[stroke="var(--brand-color)"] {
stroke: var(--brand-color) !important;
}
/* Botões action no builder */
#amgosse-builder-root button[style*="background: var(--brand-color)"],
#amgosse-builder-root button[style*="background:var(--brand-color)"] {
background: var(--brand-color) !important;
}
/* ── RUNTIME (popup do funil) — White-label override ── */
.amgosse-rt-overlay [style*="var(--brand-color)"],
[id^="amgosse-rt"] [style*="var(--brand-color)"] {
color: var(--brand-color) !important;
}
.amgosse-rt-overlay button[style*="background"][style*="var(--brand-color)"],
.amgosse-rt-overlay button[style*="background"][style*="var(--brand-color-hover)"] {
background-color: var(--brand-color) !important;
background-image: linear-gradient(135deg, var(--brand-color), var(--brand-color-2)) !important;
}
/* ── CLIENT PORTAL — White-label ── */
[class*="client-portal"] [style*="var(--brand-color)"],
[id*="client-portal"] [style*="var(--brand-color)"] {
color: var(--brand-color) !important;
}
/* ── LOGIN PORTAL — White-label ── */
#amgosse-login-card [style*="background:linear-gradient(135deg,var(--brand-color-hover),var(--brand-color-2))"],
#amgosse-login-card [style*="background:linear-gradient(135deg, var(--brand-color-hover), var(--brand-color-2))"] {
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-2)) !important;
}
/* ── ITEMS active de SIDEBAR e tabs — usam brand color ── */
#amgosse-sidebar .nav-i.active {
background: linear-gradient(135deg, var(--brand-glow-soft, rgba(59,130,246,0.10)), transparent) !important;
color: var(--brand-color) !important;
box-shadow: inset 3px 0 0 var(--brand-color) !important;
}
#amgosse-sidebar .nav-i.active svg {
color: var(--brand-color) !important;
}
/* ── Active states em cards top — usam brand ── */
[data-theme="light"] .amgosse-attribution-grid .amgosse-card-accent::before {
background: var(--brand-color) !important;
}
[data-theme="light"] .amgosse-attribution-grid .amgosse-card-accent:nth-child(2)::before {
background: var(--brand-color-2) !important;
}
/* ── FIX: Sidebar collapsed state ── */
#amgosse-sidebar.collapsed,
.amgosse-sidebar-collapsed #amgosse-sidebar {
width: 60px !important;
}
#amgosse-sidebar.collapsed .nav-i,
.amgosse-sidebar-collapsed #amgosse-sidebar .nav-i {
justify-content: center !important;
padding: 10px !important;
margin: 4px 8px !important;
}
#amgosse-sidebar.collapsed .nav-i span:not([class*="icon"]),
.amgosse-sidebar-collapsed #amgosse-sidebar .nav-i > span:last-child {
display: none !important;
}
#amgosse-sidebar.collapsed .amgosse-nav-section-label,
.amgosse-sidebar-collapsed .amgosse-nav-section-label {
display: none !important;
}
/* ── Ajustes finos restantes ── */
/* "Voltar" link com mais respiro */
.amgosse-sidebar-back {
padding: var(--gap-md) !important;
margin-bottom: var(--gap-2xs) !important;
}
/* Brand sidebar */
.amgosse-sidebar-brand,
#amgosse-sidebar > div:has(.amgosse-sidebar-brand-icon) {
padding: var(--gap-md) !important;
}
/* User bottom card */
#amgosse-sidebar > div:has([style*="Administrador"]) {
padding: var(--gap-md) !important;
border-top: 1px solid var(--border) !important;
}
/* Sair button */
#amgosse-sidebar a[href*="logout"],
[data-theme="light"] [href*="logout"] {
padding: var(--gap-md) !important;
}
/* ── Botão Report destaque branco-label ── */
.amgosse-tab-header .ab.ab-p {
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-2)) !important;
}
/* Date filter active state respeita brand */
.amgosse-date-filter .ab.active {
color: var(--brand-color) !important;
}
/* ── Investimento total — gradient brand ── */
[data-metric="spend"] {
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-2)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
}
/* Chart legend dots */
[data-theme="light"] [style*="background:var(--brand-color)"][style*="border-radius:50%"],
[data-theme="light"] [style*="background:var(--brand-color-hover)"][style*="border-radius:50%"] {
background: var(--brand-color) !important;
}
/* Stage badge active na tabela */
[data-theme="light"] .badge-blue {
background: var(--brand-glow-soft, rgba(59,130,246,0.12)) !important;
color: var(--brand-color) !important;
}
/* ════════════════════════════════════════════════════════════
v5.6.7 — FORCE LIGHT MODE NO FLOW BUILDER
Override agressivo dos hardcodes de background escuro:
var(--bg) #0B141A var(--surface) var(--text-strong) var(--surface-2) var(--surface-3) rgba(13,*)
════════════════════════════════════════════════════════════ */
/* ── Container raiz do builder ── */
[data-theme="light"] #amgosse-builder-root,
[data-theme="light"] #tab-builder {
background: var(--bg) !important;
}
/* Viewports e canvas — bg do canvas */
[data-theme="light"] #amgosse-builder-viewport {
background: linear-gradient(180deg, #FAFBFD 0%, #F4F6FA 100%) !important;
background-color: #FAFBFD !important;
}
[data-theme="light"] #amgosse-builder-canvas {
background:
radial-gradient(circle, rgba(15,23,42,0.04) 1px, transparent 1px) 0 0/24px 24px,
transparent !important;
}
/* Override de bg hardcoded escuros — selectors atributo */
[data-theme="light"] #amgosse-builder-root [style*="background:var(--bg)"],
[data-theme="light"] #amgosse-builder-root [style*="background-color:var(--bg)"],
[data-theme="light"] #amgosse-builder-root [style*="background: var(--bg)"] {
background: var(--bg) !important;
background-color: var(--bg) !important;
}
[data-theme="light"] #amgosse-builder-root [style*="background:#0B141A"],
[data-theme="light"] #amgosse-builder-root [style*="background:var(--surface)"],
[data-theme="light"] #amgosse-builder-root [style*="background:var(--text-strong)"],
[data-theme="light"] #amgosse-builder-root [style*="background:var(--surface-2)"],
[data-theme="light"] #amgosse-builder-root [style*="background:var(--surface-3)"],
[data-theme="light"] #amgosse-builder-root [style*="background:#1e293b"] {
background: var(--surface) !important;
background-color: var(--surface) !important;
}
[data-theme="light"] #amgosse-builder-root [style*="background:rgba(13,"],
[data-theme="light"] #amgosse-builder-root [style*="background:rgba(13, 20, 36"],
[data-theme="light"] #amgosse-builder-root [style*="background-color:rgba(13"] {
background: var(--surface) !important;
background-color: var(--surface) !important;
}
[data-theme="light"] #amgosse-builder-root [style*="background:radial-gradient"][style*="0F172A"],
[data-theme="light"] #amgosse-builder-root [style*="background:radial-gradient"][style*="050B18"] {
background: linear-gradient(180deg, #FAFBFD 0%, #F4F6FA 100%) !important;
}
/* Linear-gradient bg escuros */
[data-theme="light"] #amgosse-builder-root [style*="background:linear-gradient"][style*="rgba(13"] {
background: var(--surface) !important;
}
/* Texto branco hardcoded → text-color do tema */
[data-theme="light"] #amgosse-builder-root [style*="color:#fff"],
[data-theme="light"] #amgosse-builder-root [style*="color: #fff"],
[data-theme="light"] #amgosse-builder-root [style*="color:white"],
[data-theme="light"] #amgosse-builder-root [style*="color:#FFFFFF"],
[data-theme="light"] #amgosse-builder-root [style*="color: #FFFFFF"] {
color: var(--text) !important;
}
/* Texto cinza claro (slate-400, etc) hardcoded — manter como muted */
[data-theme="light"] #amgosse-builder-root [style*="color:var(--text-secondary)"],
[data-theme="light"] #amgosse-builder-root [style*="color:var(--muted)"],
[data-theme="light"] #amgosse-builder-root [style*="color:#cbd5e1"],
[data-theme="light"] #amgosse-builder-root [style*="color: var(--text-secondary)"] {
color: var(--text-secondary) !important;
}
/* Borders escuras → light */
[data-theme="light"] #amgosse-builder-root [style*="border:1px solid rgba(255,255,255"],
[data-theme="light"] #amgosse-builder-root [style*="border-color:rgba(255,255,255"],
[data-theme="light"] #amgosse-builder-root [style*="border-top:1px solid rgba(255,255,255"],
[data-theme="light"] #amgosse-builder-root [style*="border-bottom:1px solid rgba(255,255,255"] {
border-color: var(--border) !important;
}
/* Header topbar do builder (Voltar, Salvar, Energia Solar Pro V5, etc) */
[data-theme="light"] #amgosse-builder-root > div:first-child,
[data-theme="light"] #amgosse-builder-root [class*="topbar"],
[data-theme="light"] #amgosse-builder-root [class*="header"] {
background: var(--surface) !important;
border-bottom: 1px solid var(--border) !important;
color: var(--text) !important;
}
/* Botões da topbar */
[data-theme="light"] #amgosse-builder-root button {
color: var(--text) !important;
}
[data-theme="light"] #amgosse-builder-root button[style*="background:rgba(255,255,255"],
[data-theme="light"] #amgosse-builder-root button[style*="background-color:rgba(255,255,255"] {
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
}
/* Salvar button */
[data-theme="light"] #amgosse-builder-root button[id="save-btn"],
[data-theme="light"] #amgosse-builder-root button[onclick*="save"]:not([onclick*="settings"]) {
background: linear-gradient(135deg, var(--brand-color), var(--brand-color-2)) !important;
color: var(--text-on-brand) !important;
border: none !important;
}
/* Painel direito (MODAIS / COMP. / PROP.) */
[data-theme="light"] #amgosse-builder-settings,
[data-theme="light"] #amgosse-builder-root [id*="sidebar"]:not(#amgosse-sidebar):not(#amgosse-sidebar-toggle-btn) {
background: var(--surface) !important;
border-left: 1px solid var(--border) !important;
}
/* Tabs MODAIS/COMP./PROP. */
[data-theme="light"] #amgosse-builder-root [class*="tab"]:not([class*="tab-pane"]) {
color: var(--text-secondary) !important;
}
[data-theme="light"] #amgosse-builder-root [class*="tab"][class*="active"],
[data-theme="light"] #amgosse-builder-root [class*="active"][class*="tab"] {
color: var(--brand-color) !important;
border-bottom: 2px solid var(--brand-color) !important;
}
/* Inputs no builder */
[data-theme="light"] #amgosse-builder-root input,
[data-theme="light"] #amgosse-builder-root textarea,
[data-theme="light"] #amgosse-builder-root select {
background: var(--surface) !important;
color: var(--text) !important;
border: 1px solid var(--border-hover) !important;
}
/* Cards na home do builder (Novo / Biblioteca / Meus Funis) */
[data-theme="light"] #amgosse-dashboard-view > div,
[data-theme="light"] #amgosse-dashboard-view [class*="card"],
[data-theme="light"] #amgosse-dashboard-view button {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
box-shadow: var(--shadow-card) !important;
}
[data-theme="light"] #amgosse-dashboard-view h1,
[data-theme="light"] #amgosse-dashboard-view h2,
[data-theme="light"] #amgosse-dashboard-view h3,
[data-theme="light"] #amgosse-dashboard-view p {
color: var(--text) !important;
}
[data-theme="light"] #amgosse-dashboard-view p {
color: var(--text-secondary) !important;
}
/* Tabela da Biblioteca (Sua Biblioteca) */
[data-theme="light"] #amgosse-view-library,
[data-theme="light"] #library-list-container,
[data-theme="light"] #amgosse-view-library table,
[data-theme="light"] #library-list-container table,
[data-theme="light"] #amgosse-view-library tbody tr,
[data-theme="light"] #amgosse-view-library td,
[data-theme="light"] #amgosse-view-library th {
background: var(--surface) !important;
color: var(--text) !important;
}
[data-theme="light"] #amgosse-view-library h1,
[data-theme="light"] #amgosse-view-library h2 {
color: var(--text) !important;
}
[data-theme="light"] #amgosse-view-library tr {
border-bottom: 1px solid var(--border) !important;
}
/* Templates view */
[data-theme="light"] #amgosse-view-templates,
[data-theme="light"] #template-list-container,
[data-theme="light"] #amgosse-view-templates [class*="card"],
[data-theme="light"] #amgosse-view-templates > div > div {
background: var(--surface) !important;
color: var(--text) !important;
}
[data-theme="light"] #amgosse-view-templates h1,
[data-theme="light"] #amgosse-view-templates h2,
[data-theme="light"] #amgosse-view-templates h3 {
color: var(--text) !important;
}
/* Modais flutuantes do builder (modal de edição, etc) */
[data-theme="light"] #amgosse-modal-edit-view,
[data-theme="light"] #amgosse-modal-edit-content {
background: var(--surface) !important;
color: var(--text) !important;
}
/* Cabeçalho do canvas (centro com nome do funil) */
[data-theme="light"] #amgosse-funnel-title-input {
background: transparent !important;
color: var(--text) !important;
border: none !important;
}
/* Botões de zoom, undo, redo, fit, organizar */
[data-theme="light"] #undo-btn,
[data-theme="light"] #redo-btn,
[data-theme="light"] #mode-select,
[data-theme="light"] #mode-pan,
[data-theme="light"] #amgosse-builder-root [id*="zoom"],
[data-theme="light"] #amgosse-builder-root button[onclick*="zoom"],
[data-theme="light"] #amgosse-builder-root button[onclick*="fit"],
[data-theme="light"] #amgosse-builder-root button[onclick*="organize"],
[data-theme="light"] #amgosse-builder-root button[onclick*="play"] {
background: var(--surface-2) !important;
color: var(--text) !important;
border: 1px solid var(--border) !important;
}
/* Sidebar toggle (botão de chevron lateral) */
[data-theme="light"] #amgosse-sidebar-toggle-btn,
[data-theme="light"] .amgosse-sidebar-toggle {
background: var(--surface) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-xs) !important;
}
/* Canvas SVG: linhas de conexão (cor padrão) */
[data-theme="light"] #amgosse-svg-lines path[stroke="rgba(255,255,255,0.2)"],
[data-theme="light"] #amgosse-svg-lines path[stroke="rgba(255,255,255,0.3)"] {
stroke: rgba(15,23,42,0.15) !important;
}
/* Settings panel (painel lateral direito do builder) */
[data-theme="light"] #amgosse-builder-settings > div,
[data-theme="light"] #amgosse-builder-settings [class*="section"],
[data-theme="light"] #amgosse-builder-settings [class*="property"] {
background: var(--surface) !important;
color: var(--text) !important;
}
/* Item ativo na lista de modais */
[data-theme="light"] #amgosse-builder-settings [class*="active"],
[data-theme="light"] #amgosse-builder-settings [style*="background:rgba(59,130,246,0.18)"] {
background: var(--brand-glow-soft, rgba(59,130,246,0.10)) !important;
color: var(--brand-color) !important;
}
/* Modais (rows) na sidebar direita */
[data-theme="light"] #amgosse-builder-settings ul li,
[data-theme="light"] #amgosse-builder-settings [class*="modal-row"],
[data-theme="light"] #amgosse-builder-settings [class*="modal-list-item"] {
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
}
[data-theme="light"] #amgosse-builder-settings ul li:hover {
background: var(--surface-3) !important;
}
/* "Adicionar Novo Modal" botão */
[data-theme="light"] #amgosse-builder-root button[onclick*="addModal"],
[data-theme="light"] #amgosse-builder-root [class*="add-modal"],
[data-theme="light"] #amgosse-builder-root button:has(svg + span:contains("Adicionar")) {
background: linear-gradient(135deg, var(--brand-glow-soft), transparent) !important;
color: var(--brand-color) !important;
border: 1px dashed var(--brand-color) !important;
}
/* Keyboard hints (Cmd+Z etc) */
[data-theme="light"] #amgosse-builder-root kbd,
[data-theme="light"] #amgosse-builder-root [class*="keybind"],
[data-theme="light"] #amgosse-builder-root [class*="kbd"] {
background: var(--surface-2) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border) !important;
}
/* ── ESPAÇAMENTOS LOCK — Igualar alturas do painel direito ── */
.dash-col-right .amgosse-card > div:not(:first-child) {
min-height: 56px !important;
align-items: center !important;
}
.dash-col-right .amgosse-card > div:not(:first-child) [style*="text-transform:uppercase"] {
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Card Conv. Leads "CRM: 0 — match" em layout limpo */
#meta-match-line,
[id*="match-line"] {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
margin-top: 10px !important;
padding-top: 10px !important;
border-top: 1px dashed var(--border) !important;
font-size: 10.5px !important;
font-weight: 600 !important;
letter-spacing: 0.2px !important;
}
#meta-match-dot {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: var(--muted) !important;
flex-shrink: 0 !important;
}
/* ── KPI Meta cards: alturas iguais ── */
.amgosse-meta-grid .amgosse-metric-box {
min-height: 80px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
/* ── Hero header — ainda mais respiro ── */
.amgosse-tab-header {
padding: var(--gap-xl) !important;
}
.amgosse-tab-header > div:first-child {
flex: 1 !important;
min-width: 0 !important;
}
/* ── Top filter date — não quebra linha ── */
.amgosse-date-filter {
flex-wrap: nowrap !important;
}
/* ── Grid pattern visível mesmo no canvas ── */
[data-theme="light"] #amgosse-builder-canvas::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle, rgba(15,23,42,0.06) 1px, transparent 1px) 0 0/40px 40px;
z-index: 0;
}
/* ════════════════════════════════════════════════════════════
v5.8.3 — Flow Builder Home cards refinados (light + apple)
════════════════════════════════════════════════════════════ */
/* ── Container principal (Flow Builder Home) ── */
[data-theme="light"] #amgosse-dashboard-view,
[data-theme="apple"] #amgosse-dashboard-view {
background: var(--bg) !important;
padding: 80px 40px !important;
}
/* Headline "Flow Builder" — gradient text fica feio em light, deixa sólido */
[data-theme="light"] #amgosse-dashboard-view h1,
[data-theme="apple"] #amgosse-dashboard-view h1 {
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: var(--text-strong) !important;
color: var(--text-strong) !important;
font-size: 42px !important;
font-weight: 800 !important;
letter-spacing: -1.4px !important;
margin-bottom: 12px !important;
}
[data-theme="light"] #amgosse-dashboard-view p,
[data-theme="apple"] #amgosse-dashboard-view p {
color: var(--muted) !important;
font-size: 17px !important;
}
/* ── 3 cards uniformes ── */
[data-theme="light"] #amgosse-dashboard-view > div > div:nth-child(2),
[data-theme="apple"] #amgosse-dashboard-view > div > div:nth-child(2) {
gap: 20px !important;
margin-bottom: 40px !important;
}
/* ── Card 1: "Criar do Zero" — CTA primário sutil ── */
[data-theme="light"] #amgosse-dashboard-view [onclick*="addNewFunnel"],
[data-theme="apple"] #amgosse-dashboard-view [onclick*="addNewFunnel"] {
background: var(--surface) !important;
background-image: linear-gradient(180deg, var(--brand-glow-faint) 0%, var(--surface) 100%) !important;
border: 1px solid var(--brand-color) !important;
border-radius: 20px !important;
padding: 36px !important;
height: 280px !important;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
position: relative !important;
overflow: hidden !important;
}
[data-theme="light"] #amgosse-dashboard-view [onclick*="addNewFunnel"]:hover,
[data-theme="apple"] #amgosse-dashboard-view [onclick*="addNewFunnel"]:hover {
transform: translateY(-2px) !important;
border-color: var(--brand-color-hover) !important;
box-shadow: 0 12px 32px var(--brand-glow-soft) !important;
}
/* Ícone "+" do card 1 — sem glow agressivo */
[data-theme="light"] #amgosse-dashboard-view [onclick*="addNewFunnel"] > div:first-child,
[data-theme="apple"] #amgosse-dashboard-view [onclick*="addNewFunnel"] > div:first-child {
background: var(--brand-color) !important;
background-image: none !important;
border-radius: 14px !important;
width: 56px !important;
height: 56px !important;
margin-bottom: 24px !important;
box-shadow: none !important;
}
/* Apple: ícone do card 1 ainda mais clean */
[data-theme="apple"] #amgosse-dashboard-view [onclick*="addNewFunnel"] > div:first-child {
border-radius: 12px !important;
}
/* ── Card 2: "Biblioteca de Templates" ── */
[data-theme="light"] #amgosse-dashboard-view [onclick*="templates"],
[data-theme="apple"] #amgosse-dashboard-view [onclick*="templates"] {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 20px !important;
padding: 36px !important;
height: 280px !important;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
}
[data-theme="light"] #amgosse-dashboard-view [onclick*="templates"]:hover,
[data-theme="apple"] #amgosse-dashboard-view [onclick*="templates"]:hover {
transform: translateY(-2px) !important;
border-color: var(--border-hover) !important;
box-shadow: 0 8px 24px rgba(15,23,42,0.06) !important;
}
[data-theme="light"] #amgosse-dashboard-view [onclick*="templates"] > div:first-child,
[data-theme="apple"] #amgosse-dashboard-view [onclick*="templates"] > div:first-child {
background: var(--success-bg) !important;
border: 1px solid var(--success-border) !important;
border-radius: 14px !important;
width: 56px !important;
height: 56px !important;
margin-bottom: 24px !important;
}
/* ── Card 3: "Meus Funis" ── */
[data-theme="light"] #amgosse-dashboard-view [onclick*="library"],
[data-theme="apple"] #amgosse-dashboard-view [onclick*="library"] {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 20px !important;
padding: 36px !important;
height: 280px !important;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
}
[data-theme="light"] #amgosse-dashboard-view [onclick*="library"]:hover,
[data-theme="apple"] #amgosse-dashboard-view [onclick*="library"]:hover {
transform: translateY(-2px) !important;
border-color: var(--border-hover) !important;
box-shadow: 0 8px 24px rgba(15,23,42,0.06) !important;
}
[data-theme="light"] #amgosse-dashboard-view [onclick*="library"] > div:first-child,
[data-theme="apple"] #amgosse-dashboard-view [onclick*="library"] > div:first-child {
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
width: 56px !important;
height: 56px !important;
margin-bottom: 24px !important;
}
/* ── Tipografia dos cards ── */
[data-theme="light"] #amgosse-dashboard-view [onclick] h3,
[data-theme="apple"] #amgosse-dashboard-view [onclick] h3 {
font-size: 20px !important;
font-weight: 700 !important;
letter-spacing: -0.4px !important;
color: var(--text) !important;
margin-bottom: 10px !important;
}
[data-theme="light"] #amgosse-dashboard-view [onclick] p,
[data-theme="apple"] #amgosse-dashboard-view [onclick] p {
font-size: 14px !important;
line-height: 1.55 !important;
color: var(--text-secondary) !important;
}
/* ── Apple-specific: tipografia SF Pro ── */
[data-theme="apple"] #amgosse-dashboard-view h1 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
letter-spacing: -1.2px !important;
}
[data-theme="apple"] #amgosse-dashboard-view [onclick] h3 {
font-family: var(--font-display) !important;
font-weight: 600 !important;
letter-spacing: -0.374px !important;
font-size: 21px !important;
}
[data-theme="apple"] #amgosse-dashboard-view [onclick] p {
font-family: var(--font) !important;
font-size: 15px !important;
letter-spacing: -0.224px !important;
}
/* ════════════════════════════════════════════════════════════
v5.8.4 → v5.8.6 — Fix Flow Builder home wrapper + ícones cards
════════════════════════════════════════════════════════════ */
/* ── Container EXTERNO (#amgosse-dashboard-view) ──
IMPORTANTE: NÃO mexer em margin/position aqui — é position:absolute; inset:0
inline e qualquer margin desloca e revela a topbar do editor por baixo.
Só estiliza padding e bg. */
#amgosse-dashboard-view {
background: var(--bg) !important;
padding: 40px !important;
}
/* ── Wrapper INTERNO recebe o card-style (border-radius, shadow, etc) ── */
[data-theme="light"] #amgosse-dashboard-view > div:first-child,
[data-theme="apple"] #amgosse-dashboard-view > div:first-child,
[data-theme="dark"] #amgosse-dashboard-view > div:first-child,
:root:not([data-theme="light"]):not([data-theme="apple"]) #amgosse-dashboard-view > div:first-child {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: 24px !important;
padding: 60px 40px !important;
box-shadow: var(--shadow-card) !important;
max-width: 1200px !important;
margin: 0 auto !important;
}
/* ── Ícones dos cards 2 e 3 — garantir visibilidade ── */
[data-theme="light"] #amgosse-dashboard-view [onclick*="templates"] > div:first-child svg,
[data-theme="apple"] #amgosse-dashboard-view [onclick*="templates"] > div:first-child svg {
color: var(--success) !important;
stroke: var(--success) !important;
width: 28px !important;
height: 28px !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
[data-theme="light"] #amgosse-dashboard-view [onclick*="library"] > div:first-child svg,
[data-theme="apple"] #amgosse-dashboard-view [onclick*="library"] > div:first-child svg {
color: var(--text-secondary) !important;
stroke: var(--text-secondary) !important;
width: 28px !important;
height: 28px !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
[data-theme="light"] #amgosse-dashboard-view [onclick*="addNewFunnel"] > div:first-child svg,
[data-theme="apple"] #amgosse-dashboard-view [onclick*="addNewFunnel"] > div:first-child svg {
color: var(--text-on-brand) !important;
stroke: var(--text-on-brand) !important;
width: 28px !important;
height: 28px !important;
display: block !important;
}
/* ── Garantir que ícones não fiquem invisible quando bg = success-bg (verde claro) ── */
[data-theme="light"] #amgosse-dashboard-view [onclick*="templates"] > div:first-child {
background: rgba(16,185,129,0.10) !important;
border: 1px solid rgba(16,185,129,0.25) !important;
}
[data-theme="apple"] #amgosse-dashboard-view [onclick*="templates"] > div:first-child {
background: rgba(0,102,204,0.08) !important;
border: 1px solid rgba(0,102,204,0.18) !important;
}
[data-theme="apple"] #amgosse-dashboard-view [onclick*="templates"] > div:first-child svg {
color: var(--brand-color) !important;
stroke: var(--brand-color) !important;
}
/* ── Ícone "Meus Funis" sobre bg cinza ── */
[data-theme="light"] #amgosse-dashboard-view [onclick*="library"] > div:first-child {
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
}
[data-theme="apple"] #amgosse-dashboard-view [onclick*="library"] > div:first-child {
background: rgba(0,0,0,0.04) !important;
border: 1px solid var(--border) !important;
}
/* ── Hide qualquer header voltar dentro do dashboard view ── */
[data-theme="light"] #amgosse-dashboard-view > div > div:first-child,
[data-theme="apple"] #amgosse-dashboard-view > div > div:first-child {
margin-bottom: 40px !important;
}
/* ════════════════════════════════════════════════════════════
v5.8.7 — Fix texto invisível em cards com bg escuro no canvas
────────────────────────────────────────────────────────────
Cards de opção (multipla escolha) no builder canvas têm bg escuro
hardcoded como DADO do funil (configurável pelo user). Quando
o tema apple/light força text-color → preto, fica preto sobre preto.
Solução: força texto branco em children de elementos com bg escuro
hardcoded, mas SÓ dentro do builder canvas.
════════════════════════════════════════════════════════════ */
/* Cards com bg hex hardcoded escuro dentro do canvas */
[data-theme="light"] #amgosse-builder-canvas [style*="background:#0F172A"] *,
[data-theme="light"] #amgosse-builder-canvas [style*="background: #0F172A"] *,
[data-theme="light"] #amgosse-builder-canvas [style*="background:#0f172a"] *,
[data-theme="light"] #amgosse-builder-canvas [style*="background:#1d1d1f"] *,
[data-theme="light"] #amgosse-builder-canvas [style*="background:#000"] *,
[data-theme="light"] #amgosse-builder-canvas [style*="background-color:#0F172A"] *,
[data-theme="apple"] #amgosse-builder-canvas [style*="background:#0F172A"] *,
[data-theme="apple"] #amgosse-builder-canvas [style*="background: #0F172A"] *,
[data-theme="apple"] #amgosse-builder-canvas [style*="background:#0f172a"] *,
[data-theme="apple"] #amgosse-builder-canvas [style*="background:#1d1d1f"] *,
[data-theme="apple"] #amgosse-builder-canvas [style*="background:#000"] *,
[data-theme="apple"] #amgosse-builder-canvas [style*="background-color:#0F172A"] * {
color: #FFFFFF !important;
}
/* Especifico: cards de opção (multipla escolha) com bg escuro
estrutura típica: */
[data-theme="light"] #amgosse-builder-canvas [class*="modal-node"] [style*="background"][style*="172A"],
[data-theme="apple"] #amgosse-builder-canvas [class*="modal-node"] [style*="background"][style*="172A"],
[data-theme="light"] #amgosse-builder-canvas [class*="modal-node"] [style*="background"][style*="1d1d1f"],
[data-theme="apple"] #amgosse-builder-canvas [class*="modal-node"] [style*="background"][style*="1d1d1f"] {
color: #FFFFFF !important;
}
[data-theme="light"] #amgosse-builder-canvas [class*="modal-node"] [style*="background"][style*="172A"] *,
[data-theme="apple"] #amgosse-builder-canvas [class*="modal-node"] [style*="background"][style*="172A"] *,
[data-theme="light"] #amgosse-builder-canvas [class*="modal-node"] [style*="background"][style*="1d1d1f"] *,
[data-theme="apple"] #amgosse-builder-canvas [class*="modal-node"] [style*="background"][style*="1d1d1f"] * {
color: #FFFFFF !important;
}
/* SVG icons dentro de cards escuros — também branco */
[data-theme="light"] #amgosse-builder-canvas [style*="background"][style*="0F172A"] svg,
[data-theme="apple"] #amgosse-builder-canvas [style*="background"][style*="0F172A"] svg,
[data-theme="light"] #amgosse-builder-canvas [style*="background"][style*="1d1d1f"] svg,
[data-theme="apple"] #amgosse-builder-canvas [style*="background"][style*="1d1d1f"] svg {
color: #FFFFFF !important;
stroke: #FFFFFF !important;
}
/* Generic helper: qualquer elemento que tenha bg gradient escuro com brand-color (gradient com purple) */
[data-theme="apple"] #amgosse-builder-canvas [style*="background:linear-gradient"][style*="135deg"] *:not([style*="color:"]):not(svg):not(button) {
color: #FFFFFF !important;
}
/* ════════════════════════════════════════════════════════════
v5.8.8 — Fix DEFINITIVO cards multipla escolha (canvas builder)
────────────────────────────────────────────────────────────
Os cards usam bg linear-gradient inline. Força texto branco
em TODOS descendentes de elementos com bg gradient inline,
apenas dentro do builder canvas.
════════════════════════════════════════════════════════════ */
/* Pega qualquer elemento com gradient inline no canvas e força texto branco descendente */
#amgosse-builder-canvas [style*="background:linear-gradient"],
#amgosse-builder-canvas [style*="background: linear-gradient"] {
color: #FFFFFF !important;
}
#amgosse-builder-canvas [style*="background:linear-gradient"] *:not(svg):not(button):not(input),
#amgosse-builder-canvas [style*="background: linear-gradient"] *:not(svg):not(button):not(input),
#amgosse-builder-canvas [style*="background:linear-gradient"] [style*="color:"]:not(button),
#amgosse-builder-canvas [style*="background: linear-gradient"] [style*="color:"]:not(button) {
color: #FFFFFF !important;
}
/* SVGs em ícones dentro de cards gradient — branco também */
#amgosse-builder-canvas [style*="background:linear-gradient"] svg path[fill],
#amgosse-builder-canvas [style*="background:linear-gradient"] svg path[stroke],
#amgosse-builder-canvas [style*="background:linear-gradient"] svg circle,
#amgosse-builder-canvas [style*="background:linear-gradient"] svg rect {
color: #FFFFFF !important;
}
#amgosse-builder-canvas [style*="background:linear-gradient"] svg {
color: #FFFFFF !important;
stroke: #FFFFFF !important;
fill: currentColor !important;
}
/* Cobertura para hex escuros usados como bg de card de opção (caso user configurou preto/cinza escuro) */
#amgosse-builder-canvas [style*="background:#0"],
#amgosse-builder-canvas [style*="background: #0"],
#amgosse-builder-canvas [style*="background:#1"],
#amgosse-builder-canvas [style*="background: #1"],
#amgosse-builder-canvas [style*="background:#2"],
#amgosse-builder-canvas [style*="background: #2"],
#amgosse-builder-canvas [style*="background-color:#0"],
#amgosse-builder-canvas [style*="background-color:#1"],
#amgosse-builder-canvas [style*="background-color:#2"] {
color: #FFFFFF !important;
}
#amgosse-builder-canvas [style*="background:#0"] *,
#amgosse-builder-canvas [style*="background: #0"] *,
#amgosse-builder-canvas [style*="background:#1"] *,
#amgosse-builder-canvas [style*="background: #1"] *,
#amgosse-builder-canvas [style*="background:#2"] *,
#amgosse-builder-canvas [style*="background: #2"] *,
#amgosse-builder-canvas [style*="background-color:#0"] *,
#amgosse-builder-canvas [style*="background-color:#1"] *,
#amgosse-builder-canvas [style*="background-color:#2"] * {
color: #FFFFFF !important;
}
/* Exception: se um descendente é botão com bg próprio brand, mantém */
#amgosse-builder-canvas [style*="background:linear-gradient"] [style*="background:linear-gradient"] *:not(svg) {
color: #FFFFFF !important;
}
/* ════════════════════════════════════════════════════════════
v6.2.6 — Selects (CRM toolbar + Meta Ads + outros) seguem tema
────────────────────────────────────────────────────────────
Defaults usavam #E5E7EB (cinza claro) hardcoded — invisível em
apple/light. Options dropdown também forçado dark com texto
claro — ilegível em fundo branco do apple.
════════════════════════════════════════════════════════════ */
/* "Importar .JSON" button na biblioteca — texto sempre branco em qualquer tema
(sobrescreve regras genéricas que tentam forçar var(--text) em labels) */
.amgosse-import-json-btn,
.amgosse-import-json-btn * {
color: #FFFFFF !important;
}
.amgosse-import-json-btn svg {
color: #FFFFFF !important;
stroke: #FFFFFF !important;
}
.amgosse-import-json-btn:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
/* "Usar este Modelo" button (Templates / Modelos) — também branco bulletproof */
.amgosse-template-use-btn,
.amgosse-template-use-btn *,
.amgosse-template-use-btn span {
color: #FFFFFF !important;
}
.amgosse-template-use-btn:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
/* Specificity extra pra beat regras [data-theme="light"] #amgosse-builder-root button */
[data-theme="light"] #amgosse-builder-root .amgosse-template-use-btn,
[data-theme="apple"] #amgosse-builder-root .amgosse-template-use-btn,
[data-theme="dark"] #amgosse-builder-root .amgosse-template-use-btn,
[data-theme="light"] #amgosse-builder-root .amgosse-template-use-btn span,
[data-theme="apple"] #amgosse-builder-root .amgosse-template-use-btn span,
[data-theme="dark"] #amgosse-builder-root .amgosse-template-use-btn span {
color: #FFFFFF !important;
background: var(--brand-color) !important;
}
[data-theme="light"] #amgosse-builder-root .amgosse-template-use-btn span,
[data-theme="apple"] #amgosse-builder-root .amgosse-template-use-btn span,
[data-theme="dark"] #amgosse-builder-root .amgosse-template-use-btn span {
background: transparent !important;
}
/* CRM toolbar selects em apple/light — texto escuro legível + tamanho compacto
(override do apple .ai que força font-size:17px / padding:12px 16px) */
[data-theme="apple"] .amgosse-crm-toolbar .amgosse-crm-select.ai,
[data-theme="light"] .amgosse-crm-toolbar .amgosse-crm-select.ai {
color: var(--text) !important;
background-color: var(--surface) !important;
border-color: var(--border) !important;
font-size: 13px !important;
font-weight: 600 !important;
height: 40px !important;
padding: 0 38px 0 14px !important;
letter-spacing: normal !important;
}
[data-theme="apple"] .amgosse-crm-toolbar input.ai,
[data-theme="light"] .amgosse-crm-toolbar input.ai {
font-size: 13px !important;
height: 40px !important;
padding: 0 14px !important;
}
[data-theme="apple"] .amgosse-crm-toolbar .amgosse-crm-select.ai:hover,
[data-theme="light"] .amgosse-crm-toolbar .amgosse-crm-select.ai:hover {
background-color: var(--surface-2) !important;
border-color: var(--border-hover) !important;
}
[data-theme="apple"] .amgosse-crm-toolbar .amgosse-crm-select.ai option,
[data-theme="light"] .amgosse-crm-toolbar .amgosse-crm-select.ai option {
background: var(--surface) !important;
color: var(--text) !important;
}
/* Meta Ads header — campaign filter + account selector
(override do apple .amgosse-input que força font-size:17px / padding:12px 16px,
resultando em texto cortado mostrando só "F") */
[data-theme="apple"] #amgosse-campaign-filter,
[data-theme="light"] #amgosse-campaign-filter {
color: var(--text) !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
width: 180px !important;
min-width: 180px !important;
height: 32px !important;
padding: 0 28px 0 12px !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
}
[data-theme="apple"] #dash-account-selector,
[data-theme="light"] #dash-account-selector {
font-size: 11px !important;
height: auto !important;
padding: 0 !important;
width: auto !important;
background: transparent !important;
border: none !important;
color: var(--brand-color) !important;
font-weight: 700 !important;
}
/* Gear button (Configurar Meta Ads) — apple força pill azul via .ab.ab-s.
Specificity #id (1,0,0) beats .ab.ab-s (0,2,0). */
[data-theme="apple"] #btn-meta-config,
[data-theme="light"] #btn-meta-config {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
padding: 0 !important;
border-radius: 8px !important;
border: 1px solid var(--border) !important;
background: var(--surface) !important;
color: var(--text-secondary) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
letter-spacing: 0 !important;
}
[data-theme="apple"] #btn-meta-config:hover,
[data-theme="light"] #btn-meta-config:hover {
background: var(--surface-2) !important;
border-color: var(--border-hover) !important;
color: var(--text) !important;
}
[data-theme="apple"] #amgosse-campaign-filter option,
[data-theme="light"] #amgosse-campaign-filter option,
[data-theme="apple"] #dash-account-selector option,
[data-theme="light"] #dash-account-selector option {
background: var(--surface) !important;
color: var(--text) !important;
}
/* Genérico: qualquer select dentro do admin segue tema em light/apple */
[data-theme="apple"] #amgosse-builder-root select,
[data-theme="apple"] #amgosse-portal-root select,
[data-theme="apple"] .amgosse-admin-wrap select,
[data-theme="light"] #amgosse-builder-root select,
[data-theme="light"] #amgosse-portal-root select,
[data-theme="light"] .amgosse-admin-wrap select {
color: var(--text) !important;
background-color: var(--surface) !important;
}
[data-theme="apple"] #amgosse-builder-root select option,
[data-theme="apple"] #amgosse-portal-root select option,
[data-theme="apple"] .amgosse-admin-wrap select option,
[data-theme="light"] #amgosse-builder-root select option,
[data-theme="light"] #amgosse-portal-root select option,
[data-theme="light"] .amgosse-admin-wrap select option {
background: var(--surface) !important;
color: var(--text) !important;
}
/* CUSTOM DROPDOWN JS (.amgosse-custom-select-*) — todos os elementos hardcoded
em dark: bg #0F1628, border rgba(255,255,255,...), color rgba(255,255,255,.65)
Em apple/light precisamos light bg + dark text.
Specificity dupla na class (.amgosse-custom-select-btn.amgosse-custom-select-btn)
pra beat regras como .amgosse-meta-header button (0,2,1) que força 32x32. */
[data-theme="apple"] .amgosse-custom-select-btn.amgosse-custom-select-btn,
[data-theme="light"] .amgosse-custom-select-btn.amgosse-custom-select-btn {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
height: 34px !important;
width: auto !important;
min-width: 200px !important;
max-width: 240px !important;
padding: 0 12px !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
}
[data-theme="apple"] .amgosse-custom-select-btn:hover,
[data-theme="light"] .amgosse-custom-select-btn:hover {
background: var(--surface-2) !important;
border-color: var(--border-hover) !important;
}
[data-theme="apple"] .amgosse-custom-select-dropdown,
[data-theme="light"] .amgosse-custom-select-dropdown {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 24px 64px rgba(15,23,42,0.18), 0 4px 20px rgba(15,23,42,0.10) !important;
scrollbar-color: rgba(15,23,42,0.15) transparent !important;
}
[data-theme="apple"] .amgosse-custom-select-dropdown::-webkit-scrollbar-thumb,
[data-theme="light"] .amgosse-custom-select-dropdown::-webkit-scrollbar-thumb {
background: rgba(15,23,42,0.15) !important;
}
[data-theme="apple"] .amgosse-csd-option,
[data-theme="light"] .amgosse-csd-option {
color: var(--text-secondary) !important;
}
[data-theme="apple"] .amgosse-csd-option:hover,
[data-theme="light"] .amgosse-csd-option:hover {
background: var(--brand-glow-faint) !important;
color: var(--text) !important;
}
[data-theme="apple"] .amgosse-csd-option.selected,
[data-theme="light"] .amgosse-csd-option.selected {
background: var(--brand-glow-soft) !important;
color: var(--brand-color) !important;
}
/* ════════════════════════════════════════════════════════════
v6.2.3 — "Botão Mágico" button na lista de funis (Editar/Botão/Modelo)
────────────────────────────────────────────────────────────
A regra global [data-theme="light"] #amgosse-builder-root button
{ color: var(--text) !important } sobrescreve o color inline
purpura do botão "Botão", deixando o texto preto e quase invisível
no admin theme apple/light. Override específico abaixo restaura
o look purple (consistente com o conceito "Botão Mágico").
════════════════════════════════════════════════════════════ */
/* Botão "Botão Mágico" — purple consistente, derruba a regra apple genérica
"button[title*='Configurar']" (que fazia 32x32 icon-only) */
[data-theme="apple"] #amgosse-builder-root button[title*="Configurar Botão Mágico"],
[data-theme="light"] #amgosse-builder-root button[title*="Configurar Botão Mágico"] {
color: #A855F7 !important;
background: rgba(168,85,247,0.08) !important;
background-image: none !important;
border: 1px solid rgba(168,85,247,0.30) !important;
border-radius: 6px !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
padding: 6px 12px !important;
display: inline-flex !important;
font-size: 11px !important;
font-weight: 700 !important;
}
[data-theme="apple"] #amgosse-builder-root button[title*="Configurar Botão Mágico"]:hover,
[data-theme="light"] #amgosse-builder-root button[title*="Configurar Botão Mágico"]:hover {
background: rgba(168,85,247,0.14) !important;
border-color: rgba(168,85,247,0.45) !important;
}
/* "Modelo" button — verde consistente, derruba a regra apple genérica
"button[onclick*='save']" (que fazia solid blue pill por causa do
saveFunnelAsTemplate no onclick) */
[data-theme="apple"] #amgosse-builder-root button[title*="Salvar como Modelo"],
[data-theme="light"] #amgosse-builder-root button[title*="Salvar como Modelo"] {
color: #10B981 !important;
background: rgba(16,185,129,0.08) !important;
background-image: none !important;
border: 1px solid rgba(16,185,129,0.30) !important;
border-radius: 6px !important;
padding: 6px 12px !important;
font-size: 11px !important;
font-weight: 700 !important;
}
[data-theme="apple"] #amgosse-builder-root button[title*="Salvar como Modelo"]:hover,
[data-theme="light"] #amgosse-builder-root button[title*="Salvar como Modelo"]:hover {
background: rgba(16,185,129,0.14) !important;
border-color: rgba(16,185,129,0.45) !important;
}
/* ════════════════════════════════════════════════════════════
v6.2.2 — Cards de opção (multipla escolha) no canvas
ficam LIGHT em apple/light admin theme
────────────────────────────────────────────────────────────
Default render usa background:linear-gradient(135deg,var(--brand-color)...)
que em apple (#0066CC) renderiza muito escuro a 30% zoom — parece preto.
Em apple/light queremos cards LIGHT pra combinar com o admin.
════════════════════════════════════════════════════════════ */
/* Cards de multipla escolha — bg light + texto escuro em apple/light admin */
[data-theme="apple"] #amgosse-builder-canvas [style*="linear-gradient(135deg,var(--brand-color)"],
[data-theme="light"] #amgosse-builder-canvas [style*="linear-gradient(135deg,var(--brand-color)"] {
background: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
background-image: linear-gradient(180deg, var(--surface), var(--surface-2)) !important;
border: 1px solid var(--border) !important;
color: var(--text-strong) !important;
box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 4px 10px rgba(15,23,42,0.04) !important;
}
/* Texto/labels dentro dos cards — preto em apple/light */
[data-theme="apple"] #amgosse-builder-canvas [style*="linear-gradient(135deg,var(--brand-color)"] *:not(svg),
[data-theme="light"] #amgosse-builder-canvas [style*="linear-gradient(135deg,var(--brand-color)"] *:not(svg) {
color: var(--text-strong) !important;
}
/* Span do ícone (rgba(255,255,255,0.15) bg) — vira tint do brand */
[data-theme="apple"] #amgosse-builder-canvas [style*="linear-gradient(135deg,var(--brand-color)"] [style*="background:rgba(255,255,255,0.15)"],
[data-theme="light"] #amgosse-builder-canvas [style*="linear-gradient(135deg,var(--brand-color)"] [style*="background:rgba(255,255,255,0.15)"] {
background: var(--brand-glow-soft) !important;
border-color: var(--brand-glow) !important;
}
/* SVG ícones — cor brand em apple/light */
[data-theme="apple"] #amgosse-builder-canvas [style*="linear-gradient(135deg,var(--brand-color)"] svg,
[data-theme="light"] #amgosse-builder-canvas [style*="linear-gradient(135deg,var(--brand-color)"] svg {
color: var(--brand-color) !important;
stroke: var(--brand-color) !important;
fill: none !important;
}
/* v6.4.33 — Command bar flutuante do dashboard */
.amgosse-command-bar {
position: fixed !important;
top: 18px !important;
left: 324px !important;
right: 24px !important;
z-index: 1000005 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
min-height: 66px !important;
padding: 10px 12px 10px 18px !important;
border-radius: 22px !important;
border: 1px solid rgba(148,163,184,.15) !important;
background:
linear-gradient(135deg, rgba(255,255,255,.070), rgba(255,255,255,.025)),
color-mix(in srgb, var(--bg) 82%, transparent) !important;
backdrop-filter: blur(22px) saturate(145%) !important;
-webkit-backdrop-filter: blur(22px) saturate(145%) !important;
box-shadow: 0 18px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
pointer-events: auto !important;
}
.amgosse-command-brand {
display: grid;
grid-template-columns: auto auto;
align-items: center;
gap: 3px 12px;
min-width: 250px;
}
.amgosse-command-brand .amgosse-command-kicker {
grid-column: 1 / -1;
color: var(--brand-color);
font-size: 10px;
font-weight: 900;
letter-spacing: 2.4px;
line-height: 1;
text-transform: uppercase;
}
.amgosse-command-brand strong {
color: var(--text);
font-size: 20px;
font-weight: 900;
letter-spacing: -.6px;
line-height: 1.1;
white-space: nowrap;
}
.amgosse-command-status {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(16,185,129,.10);
color: var(--success-text);
border: 1px solid rgba(16,185,129,.16);
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
.amgosse-command-clock {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
padding: 8px 12px;
border-radius: 16px;
background: rgba(148,163,184,.07);
border: 1px solid rgba(148,163,184,.11);
min-width: 112px;
}
.amgosse-command-clock span {
color: var(--text);
font-size: 21px;
font-weight: 900;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.amgosse-command-clock small {
color: var(--muted);
font-size: 10px;
font-weight: 750;
text-transform: uppercase;
white-space: nowrap;
}
.amgosse-command-separator {
width: 1px;
height: 36px;
background: rgba(148,163,184,.16);
flex: 0 0 auto;
}
.amgosse-command-actions {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
margin-left: auto;
}
.amgosse-command-actions #amgosse-date-filter,
#amgosse-date-filter {
position: static !important;
display: flex !important;
width: auto !important;
max-width: none !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
gap: 3px !important;
padding: 5px !important;
border-radius: 15px !important;
background: rgba(148,163,184,.08) !important;
border: 1px solid rgba(148,163,184,.12) !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.amgosse-command-actions #btn-export-report,
#btn-export-report {
position: static !important;
display: inline-flex !important;
align-items: center !important;
gap: 9px !important;
padding: 12px 18px !important;
border-radius: 16px !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
#tab-dashboard {
padding-top: 104px !important;
}
[data-theme="light"] .amgosse-command-bar,
[data-theme="apple"] .amgosse-command-bar {
background: rgba(255,255,255,.88) !important;
border-color: rgba(15,23,42,.10) !important;
box-shadow: 0 14px 34px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.amgosse-sidebar-is-collapsed .amgosse-command-bar {
left: 84px !important;
}
@media (max-width: 900px) {
.amgosse-command-bar {
left: 12px !important;
right: 12px !important;
top: 12px !important;
min-height: 0 !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding: 10px !important;
}
.amgosse-command-brand { min-width: 0; width: 100%; }
.amgosse-command-clock { align-items: flex-start; }
.amgosse-command-separator { display: none; }
.amgosse-command-actions {
width: 100%;
overflow-x: auto;
}
.amgosse-command-actions #btn-export-report { display: none !important; }
#tab-dashboard { padding-top: 164px !important; }
}
/* v6.4.34 — Dashboard premium compacto: ritmo visual padronizado */
#tab-dashboard {
--dash-gap: 16px;
--card-pad: 18px;
padding: 88px 18px 22px !important;
}
#tab-dashboard .amgosse-dash-mega-grid {
grid-template-columns: minmax(0, 1fr) 328px !important;
gap: var(--dash-gap) !important;
align-items: start !important;
}
#tab-dashboard .dash-col-left,
#tab-dashboard .dash-col-right {
gap: var(--dash-gap) !important;
}
#tab-dashboard .dash-col-right {
top: 88px !important;
}
#tab-dashboard .dash-col-left > .amgosse-card,
#tab-dashboard .dash-col-right > .amgosse-card,
#tab-dashboard .dash-col-left > .amgosse-card-glow,
#tab-dashboard .dash-col-right > .amgosse-card-glow {
margin: 0 !important;
}
#tab-dashboard .amgosse-card,
#tab-dashboard .amgosse-card-accent,
#tab-dashboard .amgosse-card-glow {
border-radius: 16px !important;
}
#tab-dashboard .amgosse-card-glow,
#tab-dashboard .dash-col-right > .amgosse-card {
padding: 18px !important;
}
#tab-dashboard .amgosse-card-header {
margin-bottom: 12px !important;
min-height: 0 !important;
}
#tab-dashboard .amgosse-card-header[style*="padding"] {
padding: 16px 18px 10px !important;
}
#tab-dashboard .amgosse-card-header h3 {
font-size: 16px !important;
line-height: 1.15 !important;
}
#tab-dashboard .amgosse-card-header span {
font-size: 11px !important;
}
#tab-dashboard .amgosse-attribution-grid {
gap: 14px !important;
margin-bottom: 0 !important;
}
#tab-dashboard .amgosse-attribution-grid .amgosse-card-accent {
min-height: 98px !important;
padding: 16px 18px !important;
}
#tab-dashboard .amgosse-attribution-grid .amgosse-metric-label {
font-size: 10px !important;
letter-spacing: 2.8px !important;
margin-bottom: 16px !important;
}
#tab-dashboard .amgosse-attribution-grid .val {
font-size: 30px !important;
line-height: 1 !important;
}
#tab-dashboard .badge-green,
#tab-dashboard .badge-status {
padding: 5px 9px !important;
font-size: 10px !important;
}
#tab-dashboard .amgosse-dash-creative-ranking {
padding: 0 18px 18px !important;
gap: 8px !important;
}
#tab-dashboard .amgosse-dash-rank-card {
grid-template-columns: 38px auto minmax(0, 1fr) !important;
gap: 10px !important;
padding: 10px 12px 10px 14px !important;
border-radius: 14px !important;
min-height: 74px !important;
}
#tab-dashboard .amgosse-dash-rank-trophy {
width: 36px !important;
height: 36px !important;
border-radius: 11px !important;
}
#tab-dashboard .amgosse-dash-rank-trophy svg {
width: 21px !important;
height: 21px !important;
}
#tab-dashboard .amgosse-dash-rank-position {
top: 9px !important;
right: 12px !important;
font-size: 20px !important;
}
#tab-dashboard .amgosse-dash-rank-topline {
gap: 7px !important;
padding-right: 38px !important;
}
#tab-dashboard .amgosse-dash-rank-topline strong {
font-size: 12px !important;
letter-spacing: .1px !important;
}
#tab-dashboard .amgosse-dash-rank-topline em {
padding: 2px 6px !important;
font-size: 8px !important;
}
#tab-dashboard .amgosse-dash-rank-campaign {
margin-top: 2px !important;
font-size: 10px !important;
}
#tab-dashboard .amgosse-dash-rank-metrics {
gap: 5px !important;
margin-top: 6px !important;
}
#tab-dashboard .amgosse-dash-rank-metrics span {
padding: 3px 6px !important;
border-radius: 7px !important;
font-size: 9px !important;
}
#tab-dashboard .amgosse-dash-rank-metrics b {
font-size: 10px !important;
}
#tab-dashboard .amgosse-dash-rank-thumb img,
#tab-dashboard .amgosse-dash-rank-thumb video,
#tab-dashboard .amgosse-dash-rank-thumb .creative-thumb-fallback {
width: 48px !important;
height: 48px !important;
border-radius: 10px !important;
object-fit: cover !important;
}
#dashboard-top-creatives-side-card .amgosse-card-header {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
}
#dashboard-top-creatives-side-card .amgosse-dash-creative-ranking {
padding: 0 18px 18px !important;
}
#dashboard-top-creatives-side-card .amgosse-dash-rank-card {
grid-template-columns: 42px 52px minmax(0, 1fr) !important;
gap: 12px !important;
min-height: 86px !important;
padding: 12px 14px 12px 16px !important;
overflow: hidden !important;
}
#dashboard-top-creatives-side-card .amgosse-dash-rank-position {
display: none !important;
}
#dashboard-top-creatives-side-card .amgosse-dash-rank-topline {
padding-right: 0 !important;
}
#dashboard-top-creatives-side-card .amgosse-dash-rank-topline em {
display: none !important;
}
#dashboard-top-creatives-side-card .amgosse-dash-rank-metrics span:nth-child(n+4) {
display: none !important;
}
#dashboard-top-creatives-side-card .am-client-creative-ranking,
#dashboard-top-creatives-side.amgosse-dash-creative-ranking {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
padding: 0 18px 18px !important;
overflow: visible !important;
}
#dashboard-top-creatives-side-card .am-client-rank-card {
position: relative !important;
display: grid !important;
grid-template-columns: 42px 52px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: center !important;
width: 100% !important;
min-height: 86px !important;
padding: 12px 14px 12px 16px !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
background: linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018)) !important;
overflow: hidden !important;
}
#dashboard-top-creatives-side-card .am-client-rank-card:before {
content: "" !important;
position: absolute !important;
inset: 0 auto 0 0 !important;
width: 4px !important;
}
#dashboard-top-creatives-side-card .am-client-rank-card.rank-gold:before {
background: linear-gradient(180deg,#FDE68A,#F59E0B) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-card.rank-silver:before {
background: linear-gradient(180deg,#F8FAFC,#94A3B8) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-card.rank-bronze:before {
background: linear-gradient(180deg,#FDBA74,#B45309) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-trophy {
width: 42px !important;
height: 42px !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(255,255,255,.13) !important;
background: rgba(148,163,184,.08) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-trophy svg {
width: 23px !important;
height: 23px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.9 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
#dashboard-top-creatives-side-card .am-client-rank-trophy.trophy-gold {
color: #FACC15 !important;
background: rgba(250,204,21,.10) !important;
border-color: rgba(250,204,21,.28) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-trophy.trophy-silver {
color: #E2E8F0 !important;
background: rgba(226,232,240,.08) !important;
border-color: rgba(226,232,240,.22) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-trophy.trophy-bronze {
color: #FBBF24 !important;
background: rgba(245,158,11,.08) !important;
border-color: rgba(245,158,11,.22) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-thumb img,
#dashboard-top-creatives-side-card .am-client-rank-thumb .am-client-thumb-fallback {
width: 52px !important;
height: 52px !important;
border-radius: 12px !important;
object-fit: cover !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(59,130,246,.12) !important;
color: var(--text) !important;
font-weight: 900 !important;
}
#dashboard-top-creatives-side-card .am-client-rank-main {
min-width: 0 !important;
}
#dashboard-top-creatives-side-card .am-client-rank-main strong {
display: block !important;
color: var(--text) !important;
font-size: 13px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#dashboard-top-creatives-side-card .am-client-rank-main small {
display: block !important;
color: var(--muted) !important;
font-size: 11px !important;
margin-top: 2px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#dashboard-top-creatives-side-card .am-client-rank-metrics {
display: flex !important;
gap: 6px !important;
flex-wrap: wrap !important;
margin-top: 7px !important;
}
#dashboard-top-creatives-side-card .am-client-rank-metrics span {
padding: 3px 7px !important;
border-radius: 8px !important;
background: rgba(148,163,184,.08) !important;
border: 1px solid rgba(148,163,184,.12) !important;
color: var(--muted) !important;
font-size: 10px !important;
}
#dashboard-top-creatives-side-card .am-client-rank-metrics b {
color: var(--text) !important;
}
#tab-dashboard .amgosse-meta-header {
margin-bottom: 14px !important;
}
#tab-dashboard .amgosse-metrics-grid,
#tab-dashboard .amgosse-kpi-grid {
gap: 12px !important;
}
#tab-dashboard .amgosse-funnel-visual {
gap: 10px !important;
padding: 12px 0 0 !important;
}
#tab-dashboard .funnel-step {
min-width: 0 !important;
height: 46px !important;
padding: 0 14px !important;
border-radius: 9px !important;
margin-bottom: 0 !important;
}
#tab-dashboard .funnel-step .label {
font-size: 8px !important;
letter-spacing: 1.8px !important;
}
#tab-dashboard .funnel-step .val {
font-size: 17px !important;
}
#tab-dashboard .funnel-step .pct {
font-size: 9px !important;
padding: 3px 7px !important;
}
#tab-dashboard .dash-col-right .amgosse-card h3 {
font-size: 14px !important;
}
#tab-dashboard .dash-col-right .amgosse-card > div[style*="height:200px"] {
height: 178px !important;
}
.amgosse-command-bar {
top: 14px !important;
left: 318px !important;
right: 18px !important;
min-height: 58px !important;
gap: 12px !important;
padding: 8px 10px 8px 14px !important;
border-radius: 18px !important;
}
.amgosse-command-brand {
min-width: 218px !important;
gap: 2px 10px !important;
}
.amgosse-command-brand .amgosse-command-kicker {
font-size: 9px !important;
letter-spacing: 2px !important;
}
.amgosse-command-brand strong {
font-size: 18px !important;
letter-spacing: -.45px !important;
}
.amgosse-command-status {
gap: 6px !important;
padding: 5px 9px !important;
font-size: 10px !important;
}
.amgosse-command-clock {
min-width: 98px !important;
padding: 7px 10px !important;
border-radius: 14px !important;
}
.amgosse-command-clock span {
font-size: 20px !important;
}
.amgosse-command-clock small {
font-size: 9px !important;
}
.amgosse-command-separator {
height: 30px !important;
}
.amgosse-command-actions {
gap: 10px !important;
}
.amgosse-command-actions #amgosse-date-filter,
#amgosse-date-filter {
padding: 4px !important;
border-radius: 14px !important;
}
.amgosse-command-actions #amgosse-date-filter .ab,
#amgosse-date-filter .ab {
min-height: 0 !important;
padding: 8px 11px !important;
border-radius: 10px !important;
font-size: 10px !important;
}
.amgosse-command-actions #btn-export-report,
#btn-export-report {
padding: 10px 16px !important;
border-radius: 14px !important;
}
.amgosse-sidebar-is-collapsed .amgosse-command-bar {
left: 78px !important;
}
@media (max-width: 1200px) {
#tab-dashboard .amgosse-dash-mega-grid {
grid-template-columns: 1fr !important;
}
#tab-dashboard .dash-col-right {
position: static !important;
}
}
@media (max-width: 900px) {
#tab-dashboard {
padding: 150px 12px 18px !important;
}
#tab-dashboard .amgosse-attribution-grid {
grid-template-columns: 1fr !important;
}
.amgosse-command-brand strong {
font-size: 16px !important;
}
.amgosse-command-status {
width: max-content !important;
}
}
/* v6.4.35 — Header executivo limpo e cards mais proximos */
#tab-dashboard {
padding-top: 78px !important;
}
#tab-dashboard .dash-col-right {
top: 78px !important;
}
.amgosse-command-bar {
min-height: 54px !important;
padding: 8px 10px 8px 16px !important;
}
.amgosse-command-brand {
display: flex !important;
align-items: center !important;
min-width: 210px !important;
}
.amgosse-command-brand strong {
font-size: 19px !important;
letter-spacing: -.55px !important;
}
.amgosse-command-kicker,
.amgosse-command-status {
display: none !important;
}
.amgosse-command-clock {
position: relative !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 9px !important;
min-width: 138px !important;
padding: 8px 12px !important;
border-radius: 15px !important;
background:
linear-gradient(135deg, rgba(124,58,237,.16), rgba(59,130,246,.08)),
rgba(148,163,184,.07) !important;
border: 1px solid rgba(148,163,184,.16) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.12) !important;
}
.amgosse-command-clock::after {
content: "";
position: absolute;
inset: 1px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 44%);
pointer-events: none;
}
.amgosse-command-clock-icon {
position: relative;
z-index: 1;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: var(--brand-color);
background: rgba(124,58,237,.14);
border: 1px solid rgba(124,58,237,.24);
}
.amgosse-command-clock-copy {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.amgosse-command-clock-copy #amgosse-live-time {
color: var(--text) !important;
font-size: 18px !important;
font-weight: 950 !important;
line-height: 1 !important;
font-variant-numeric: tabular-nums;
}
.amgosse-command-clock-copy #amgosse-live-date {
color: var(--muted) !important;
font-size: 9px !important;
font-weight: 850 !important;
line-height: 1.1 !important;
letter-spacing: .35px !important;
text-transform: uppercase !important;
}
[data-theme="light"] .amgosse-command-clock,
[data-theme="apple"] .amgosse-command-clock {
background:
linear-gradient(135deg, rgba(124,58,237,.10), rgba(59,130,246,.045)),
rgba(255,255,255,.70) !important;
border-color: rgba(15,23,42,.09) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 22px rgba(15,23,42,.08) !important;
}
[data-theme="light"] .amgosse-command-clock-icon,
[data-theme="apple"] .amgosse-command-clock-icon {
background: rgba(124,58,237,.09) !important;
border-color: rgba(124,58,237,.16) !important;
}
@media (max-width: 900px) {
#tab-dashboard {
padding-top: 132px !important;
}
.amgosse-command-brand {
min-width: 0 !important;
}
.amgosse-command-clock {
min-width: 130px !important;
}
}
/* v6.4.36 — Respiro padrao entre barra fixa e primeira linha */
#tab-dashboard {
padding-top: 94px !important;
}
#tab-dashboard .dash-col-right {
top: 94px !important;
}
@media (max-width: 900px) {
#tab-dashboard {
padding-top: 148px !important;
}
}
/* v6.4.40 — Regra final: barra + respiro visual padrao */
#tab-dashboard {
padding-top: 104px !important;
}
#tab-dashboard .dash-col-right {
top: 104px !important;
}
@media (max-width: 900px) {
#tab-dashboard {
padding-top: 164px !important;
}
}
/* v6.4.63-final — ultima regra: KPIs do topo em uma linha */
#tab-dashboard .dash-col-left > .amgosse-attribution-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: var(--dash-gap, 16px) !important;
align-items: stretch !important;
width: 100% !important;
}
#tab-dashboard .dash-col-left > .amgosse-attribution-grid > .amgosse-card {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
min-height: 132px !important;
box-sizing: border-box !important;
}
#tab-dashboard .dash-col-left > .amgosse-attribution-grid .amgosse-metric-label {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
@media (max-width: 1180px) {
#tab-dashboard .dash-col-left > .amgosse-attribution-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 720px) {
#tab-dashboard .dash-col-left > .amgosse-attribution-grid {
grid-template-columns: 1fr !important;
}
}
/* v6.4.66 — Campos premium em Eventos por Pagina, sem setas duplicadas */
#tab-settings .amgosse-page-event-row {
grid-template-columns: minmax(180px, 1.1fr) minmax(220px, .9fr) minmax(180px, 1fr) 44px !important;
gap: 12px !important;
align-items: center !important;
background:
linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
rgba(148,163,184,.045) !important;
border: 1px solid rgba(148,163,184,.14) !important;
border-radius: 16px !important;
padding: 12px !important;
}
#tab-settings .amgosse-page-event-row input.ai,
#tab-settings .amgosse-page-event-row select.ai {
width: 100% !important;
height: 46px !important;
min-height: 46px !important;
box-sizing: border-box !important;
border-radius: 13px !important;
border: 1px solid rgba(148,163,184,.18) !important;
background:
linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
var(--surface) !important;
color: var(--text) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
font-size: 14px !important;
font-weight: 650 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
outline: none !important;
}
#tab-settings .amgosse-page-event-row input.ai {
padding: 0 16px !important;
}
#tab-settings .amgosse-page-event-row select.ai {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
padding: 0 44px 0 16px !important;
background-image:
url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
background-repeat: no-repeat, no-repeat !important;
background-position: right 15px center, 0 0 !important;
background-size: 18px 18px, 100% 100% !important;
text-overflow: ellipsis !important;
}
#tab-settings .amgosse-page-event-row select.ai::-ms-expand {
display: none !important;
}
#tab-settings .amgosse-page-event-row input.ai:focus,
#tab-settings .amgosse-page-event-row select.ai:focus {
border-color: var(--brand-color) !important;
box-shadow:
0 0 0 3px var(--brand-glow-soft),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#tab-settings .amgosse-page-event-remove {
width: 44px !important;
height: 46px !important;
border-radius: 13px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(239,68,68,.10) !important;
border: 1px solid rgba(239,68,68,.24) !important;
color: #ef4444 !important;
font-size: 18px !important;
line-height: 1 !important;
}
#tab-settings .amgosse-sub-card code {
display: inline-flex !important;
align-items: center !important;
min-height: 24px !important;
padding: 2px 8px !important;
border-radius: 8px !important;
background: rgba(148,163,184,.12) !important;
color: var(--text) !important;
border: 1px solid rgba(148,163,184,.14) !important;
font-size: .92em !important;
}
[data-theme="light"] #tab-settings .amgosse-page-event-row,
[data-theme="apple"] #tab-settings .amgosse-page-event-row {
background: rgba(15,23,42,.035) !important;
border-color: rgba(15,23,42,.08) !important;
}
[data-theme="light"] #tab-settings .amgosse-page-event-row input.ai,
[data-theme="light"] #tab-settings .amgosse-page-event-row select.ai,
[data-theme="apple"] #tab-settings .amgosse-page-event-row input.ai,
[data-theme="apple"] #tab-settings .amgosse-page-event-row select.ai {
background:
linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92)),
#fff !important;
color: #0f172a !important;
border-color: rgba(15,23,42,.10) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(15,23,42,.035) !important;
}
[data-theme="light"] #tab-settings .amgosse-page-event-row select.ai,
[data-theme="apple"] #tab-settings .amgosse-page-event-row select.ai {
background-image:
url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23334155' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92)) !important;
}
@media (max-width: 920px) {
#tab-settings .amgosse-page-event-row {
grid-template-columns: 1fr !important;
}
#tab-settings .amgosse-page-event-remove {
width: 100% !important;
}
}
/* v6.4.67 — Corrige repeticao da seta custom dos selects nos temas claros */
#tab-settings .amgosse-page-event-row select.amgosse-page-event-type.ai,
#tab-settings .amgosse-page-event-row select.ai.amgosse-page-event-type,
[data-theme="light"] #tab-settings .amgosse-page-event-row select.amgosse-page-event-type.ai,
[data-theme="apple"] #tab-settings .amgosse-page-event-row select.amgosse-page-event-type.ai {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-color: var(--surface) !important;
background-repeat: no-repeat !important;
background-position: right 15px center !important;
background-size: 18px 18px !important;
background-clip: padding-box !important;
}
#tab-settings .amgosse-page-event-row select.amgosse-page-event-type.ai {
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
[data-theme="light"] #tab-settings .amgosse-page-event-row select.amgosse-page-event-type.ai,
[data-theme="apple"] #tab-settings .amgosse-page-event-row select.amgosse-page-event-type.ai {
background-color: #fff !important;
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23334155' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* v6.4.63 — KPIs do topo sempre encaixados lado a lado no dashboard */
#tab-dashboard .amgosse-attribution-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: var(--dash-gap, 16px) !important;
align-items: stretch !important;
width: 100% !important;
}
#tab-dashboard .amgosse-attribution-grid > .amgosse-card {
width: 100% !important;
min-width: 0 !important;
min-height: 132px !important;
box-sizing: border-box !important;
}
#tab-dashboard .amgosse-attribution-grid .amgosse-metric-label {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
@media (max-width: 1500px) {
#tab-dashboard .amgosse-attribution-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
#tab-dashboard .amgosse-attribution-grid > .amgosse-card {
padding-left: 24px !important;
padding-right: 20px !important;
}
#tab-dashboard .amgosse-attribution-grid .amgosse-metric-label {
font-size: 10px !important;
letter-spacing: 3px !important;
}
}
@media (max-width: 1180px) {
#tab-dashboard .amgosse-attribution-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 720px) {
#tab-dashboard .amgosse-attribution-grid {
grid-template-columns: 1fr !important;
}
}
/* v6.4.62 — Top Criativos do admin espelha o portal do cliente */
#tab-dashboard .amgosse-dash-mega-grid {
grid-template-columns: minmax(0, 1fr) 400px !important;
gap: 16px !important;
align-items: start !important;
}
#tab-dashboard .dash-col-right {
width: 400px !important;
max-width: 400px !important;
gap: 16px !important;
}
#dashboard-top-creatives-side-card {
padding: 0 !important;
overflow: hidden !important;
}
#dashboard-top-creatives-side-card > div:not(:first-child),
#tab-dashboard .dash-col-right #dashboard-top-creatives-side-card > div:not(:first-child) {
transform: none !important;
box-shadow: none !important;
background: transparent !important;
border: 0 !important;
}
#dashboard-top-creatives-side-card .amgosse-card-header {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 20px 24px 14px !important;
}
#dashboard-top-creatives-side-card .amgosse-card-header h3 {
margin: 0 0 4px !important;
font-size: 16px !important;
line-height: 1.2 !important;
}
#dashboard-top-creatives-status.am-status-pill {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 28px !important;
padding: 5px 13px !important;
border-radius: 999px !important;
border: 1px solid rgba(59,130,246,.22) !important;
background: rgba(59,130,246,.10) !important;
color: #60a5fa !important;
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: .01em !important;
white-space: nowrap !important;
}
#dashboard-top-creatives-side-card #dashboard-top-creatives-side {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 0 18px 18px !important;
overflow: visible !important;
background: transparent !important;
}
#dashboard-top-creatives-side-card .am-client-rank-card {
position: relative !important;
display: grid !important;
grid-template-columns: 52px 58px minmax(0, 1fr) !important;
align-items: center !important;
gap: 13px !important;
min-height: 92px !important;
width: 100% !important;
padding: 14px 16px 14px 18px !important;
border: 1px solid rgba(148,163,184,.14) !important;
border-radius: 16px !important;
background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
box-shadow: none !important;
overflow: hidden !important;
}
#dashboard-top-creatives-side-card .am-client-rank-card:before {
content: "" !important;
position: absolute !important;
inset: 0 auto 0 0 !important;
width: 4px !important;
}
#dashboard-top-creatives-side-card .am-client-rank-card.rank-gold:before {
background: linear-gradient(180deg, #fde68a, #f59e0b) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-card.rank-silver:before {
background: linear-gradient(180deg, #f8fafc, #94a3b8) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-card.rank-bronze:before {
background: linear-gradient(180deg, #fdba74, #b45309) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-trophy {
width: 52px !important;
height: 52px !important;
border-radius: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(255,255,255,.13) !important;
background: rgba(148,163,184,.08) !important;
flex: 0 0 52px !important;
}
#dashboard-top-creatives-side-card .am-client-rank-trophy svg {
width: 26px !important;
height: 26px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.9 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
#dashboard-top-creatives-side-card .am-client-rank-trophy.trophy-gold {
color: #facc15 !important;
background: rgba(250,204,21,.10) !important;
border-color: rgba(250,204,21,.30) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-trophy.trophy-silver {
color: #e2e8f0 !important;
background: rgba(226,232,240,.08) !important;
border-color: rgba(226,232,240,.24) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-trophy.trophy-bronze {
color: #fbbf24 !important;
background: rgba(245,158,11,.08) !important;
border-color: rgba(245,158,11,.24) !important;
}
#dashboard-top-creatives-side-card .am-client-rank-thumb,
#dashboard-top-creatives-side-card .am-client-rank-thumb img,
#dashboard-top-creatives-side-card .am-client-thumb-fallback {
width: 58px !important;
height: 58px !important;
min-width: 58px !important;
border-radius: 13px !important;
overflow: hidden !important;
}
#dashboard-top-creatives-side-card .am-client-rank-thumb img {
display: block !important;
object-fit: cover !important;
}
#dashboard-top-creatives-side-card .am-client-thumb-fallback {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(59,130,246,.12) !important;
color: var(--text) !important;
font-weight: 900 !important;
}
#dashboard-top-creatives-side-card .am-client-rank-main {
min-width: 0 !important;
display: block !important;
}
#dashboard-top-creatives-side-card .am-client-rank-main strong {
display: block !important;
max-width: 100% !important;
margin: 0 !important;
color: var(--text) !important;
font-size: 15px !important;
line-height: 1.2 !important;
font-weight: 900 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#dashboard-top-creatives-side-card .am-client-rank-main small {
display: block !important;
margin: 5px 0 0 !important;
color: var(--muted) !important;
font-size: 12px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#dashboard-top-creatives-side-card .am-client-rank-metrics {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 7px !important;
margin-top: 9px !important;
}
#dashboard-top-creatives-side-card .am-client-rank-metrics span {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
min-width: 0 !important;
padding: 4px 8px !important;
border-radius: 9px !important;
background: rgba(148,163,184,.10) !important;
border: 1px solid rgba(148,163,184,.14) !important;
color: var(--muted) !important;
font-size: 11px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
#dashboard-top-creatives-side-card .am-client-rank-metrics b {
color: var(--text) !important;
font-weight: 900 !important;
}
[data-theme="light"] #dashboard-top-creatives-side-card .am-client-rank-card,
[data-theme="apple"] #dashboard-top-creatives-side-card .am-client-rank-card {
background: rgba(255,255,255,.78) !important;
border-color: rgba(15,23,42,.10) !important;
}
[data-theme="light"] #dashboard-top-creatives-side-card .am-client-rank-metrics span,
[data-theme="apple"] #dashboard-top-creatives-side-card .am-client-rank-metrics span {
background: rgba(15,23,42,.045) !important;
border-color: rgba(15,23,42,.08) !important;
}
@media (max-width: 1280px) {
#tab-dashboard .amgosse-dash-mega-grid {
grid-template-columns: 1fr !important;
}
#tab-dashboard .dash-col-right {
width: 100% !important;
max-width: none !important;
}
}
/* v6.4.48 — Tracking real no topo: visitantes e inicios de funil */
#tab-dashboard .amgosse-attribution-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}
@media (max-width: 1280px) {
#tab-dashboard .amgosse-attribution-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 900px) {
#tab-dashboard .amgosse-attribution-grid {
grid-template-columns: 1fr !important;
}
}
/* v6.4.41 — Barra executiva aparece somente no dashboard inicial */
body:not(.amgosse-dashboard-command-active) .amgosse-command-bar {
display: none !important;
}
body:not(.amgosse-dashboard-command-active) #tab-dashboard {
padding-top: 24px !important;
}
/* v6.4.47 — Libera modal nativo do WordPress Media Uploader no portal */
body.amgosse-portal-active .media-modal,
body.amgosse-portal-active .media-modal *,
body.amgosse-portal-active .media-modal-backdrop,
body.amgosse-portal-active .media-frame,
body.amgosse-portal-active .media-frame *,
body.amgosse-portal-active .media-router,
body.amgosse-portal-active .media-toolbar,
body.amgosse-portal-active .media-frame-title,
body.amgosse-portal-active .media-frame-content,
body.amgosse-portal-active .media-sidebar {
visibility: visible !important;
}
body.amgosse-portal-active .media-modal,
body.amgosse-portal-active .media-modal-backdrop {
display: block !important;
z-index: 2000000 !important;
}
body.amgosse-portal-active .media-sidebar,
body.amgosse-portal-active .media-frame-title,
body.amgosse-portal-active .media-frame-router,
body.amgosse-portal-active .media-frame-content,
body.amgosse-portal-active .media-frame-toolbar {
display: block !important;
}
/* v6.4.39 — Geometria fixa da barra: sem sobrepor os cards */
:root {
--amgosse-command-top: 14px;
--amgosse-command-height: 76px;
--amgosse-dashboard-gap: 16px;
}
.amgosse-command-bar {
top: var(--amgosse-command-top) !important;
height: var(--amgosse-command-height) !important;
min-height: var(--amgosse-command-height) !important;
box-sizing: border-box !important;
align-items: center !important;
}
#tab-dashboard {
--dash-gap: var(--amgosse-dashboard-gap);
padding-top: calc(var(--amgosse-command-top) + var(--amgosse-command-height) + var(--amgosse-dashboard-gap)) !important;
}
#tab-dashboard .dash-col-right {
top: calc(var(--amgosse-command-top) + var(--amgosse-command-height) + var(--amgosse-dashboard-gap)) !important;
}
.amgosse-command-clock,
#amgosse-theme-toggle.amgosse-command-theme-toggle,
.amgosse-command-actions #btn-export-report,
#btn-export-report {
max-height: 46px !important;
box-sizing: border-box !important;
}
.amgosse-command-actions #amgosse-date-filter,
#amgosse-date-filter {
max-height: 46px !important;
box-sizing: border-box !important;
}
@media (max-width: 900px) {
:root {
--amgosse-command-top: 12px;
--amgosse-command-height: 124px;
}
}
/* v6.4.37 — Barra completa, tema integrado e ritmo uniforme */
#tab-dashboard {
--dash-gap: 16px;
padding: 100px 20px 24px !important;
}
#tab-dashboard .amgosse-dash-mega-grid,
#tab-dashboard .dash-col-left,
#tab-dashboard .dash-col-right,
#tab-dashboard .amgosse-attribution-grid {
gap: var(--dash-gap) !important;
}
#tab-dashboard .dash-col-right {
top: 100px !important;
}
#tab-dashboard .dash-col-left > .amgosse-card,
#tab-dashboard .dash-col-right > .amgosse-card,
#tab-dashboard .dash-col-left > .amgosse-card-glow,
#tab-dashboard .dash-col-right > .amgosse-card-glow {
margin: 0 !important;
}
.amgosse-command-bar {
top: 14px !important;
left: 320px !important;
right: 20px !important;
min-height: 58px !important;
padding: 10px 12px 10px 18px !important;
gap: 16px !important;
}
.amgosse-command-brand {
min-width: 220px !important;
}
.amgosse-command-separator {
margin-left: 0 !important;
margin-right: auto !important;
}
.amgosse-command-actions {
gap: 10px !important;
margin-left: 0 !important;
}
#amgosse-theme-toggle.amgosse-command-theme-toggle {
position: static !important;
inset: auto !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
padding: 0 !important;
border-radius: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background:
linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
rgba(148,163,184,.08) !important;
border: 1px solid rgba(148,163,184,.14) !important;
color: var(--text) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.12) !important;
transform: none !important;
}
#amgosse-theme-toggle.amgosse-command-theme-toggle:hover {
border-color: var(--brand-glow) !important;
background:
linear-gradient(135deg, var(--brand-glow-soft), rgba(255,255,255,.035)),
rgba(148,163,184,.10) !important;
}
#amgosse-theme-toggle.amgosse-command-theme-toggle svg {
width: 17px !important;
height: 17px !important;
}
[data-theme="light"] #amgosse-theme-toggle.amgosse-command-theme-toggle,
[data-theme="apple"] #amgosse-theme-toggle.amgosse-command-theme-toggle {
background: rgba(255,255,255,.72) !important;
border-color: rgba(15,23,42,.10) !important;
color: var(--text) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 8px 20px rgba(15,23,42,.08) !important;
}
.amgosse-sidebar-is-collapsed .amgosse-command-bar {
left: 104px !important;
}
#amgosse-sidebar.collapsed + .amgosse-sidebar-toggle,
.amgosse-sidebar-is-collapsed .amgosse-sidebar-toggle {
left: 70px !important;
}
@media (max-width: 1280px) {
.amgosse-command-brand {
min-width: 180px !important;
}
.amgosse-command-clock {
min-width: 126px !important;
}
.amgosse-command-actions #amgosse-date-filter .ab,
#amgosse-date-filter .ab {
padding: 8px 9px !important;
}
}
@media (max-width: 900px) {
#tab-dashboard {
padding: 154px 14px 20px !important;
}
.amgosse-command-bar {
left: 12px !important;
right: 12px !important;
gap: 10px !important;
}
#amgosse-theme-toggle.amgosse-command-theme-toggle {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
}
}
/* v6.4.38 — Intervalo exato da barra para os cards */
#tab-dashboard {
padding-top: 88px !important;
}
#tab-dashboard .dash-col-right {
top: 88px !important;
}
@media (max-width: 900px) {
#tab-dashboard {
padding-top: 148px !important;
}
}
/* v6.4.40-final — ultima regra do arquivo: respiro correto abaixo da barra */
#tab-dashboard {
padding-top: 104px !important;
}
#tab-dashboard .dash-col-right {
top: 104px !important;
}
@media (max-width: 900px) {
#tab-dashboard {
padding-top: 164px !important;
}
}
/* v6.4.63-final-eof — KPIs do topo travados em uma linha */
#tab-dashboard .dash-col-left > .amgosse-attribution-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: var(--dash-gap, 16px) !important;
align-items: stretch !important;
width: 100% !important;
}
#tab-dashboard .dash-col-left > .amgosse-attribution-grid > .amgosse-card {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
min-height: 132px !important;
box-sizing: border-box !important;
}
#tab-dashboard .dash-col-left > .amgosse-attribution-grid .amgosse-metric-label {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
@media (max-width: 1180px) {
#tab-dashboard .dash-col-left > .amgosse-attribution-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 720px) {
#tab-dashboard .dash-col-left > .amgosse-attribution-grid {
grid-template-columns: 1fr !important;
}
}