*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#f5f5f3;
--surface:#ffffff;
--s2:#fafaf9;
--s3:#f0f0ee;
--border:#e8e8e4;
--border2:#d8d8d2;
--text:#111110;
--muted:#888882;
--muted2:#555550;
--ink:#1a1a18;
--green:#16a34a;
--green-bg:#f0fdf4;
--green-border:#bbf7d0;
--red:#dc2626;
--red-bg:#fef2f2;
--red-border:#fecaca;
--amber:#d97706;
--amber-bg:#fffbeb;
--amber-border:#fde68a;
--blue:#2563eb;
--blue-bg:#eff6ff;
--blue-border:#bfdbfe;
--purple:#7c3aed;
--sidebar-bg:#292929;
--sidebar-border:rgba(255,255,255,0.08);
--sidebar-muted:rgba(255,255,255,0.35);
--sidebar-text:rgba(255,255,255,0.7);
--accent:#ea462a;
--accent-hover:#d63d22;
--accent-bg:#fef0ec;
--accent-border:#fbcfc1;
--font:'Plus Jakarta Sans',sans-serif;
--mono:'DM Mono',monospace;
--brand:'Varela Round',sans-serif;
}
/* ╔══════════════════════════════════════════════════════════╗
║ TEMA ESCURO · activado via [data-theme="dark"] no ║
║ Modo 'auto' no Perfil resolve via prefers-color-scheme ║
╚══════════════════════════════════════════════════════════╝ */
[data-theme="dark"]{
--bg:#161616;
--surface:#1f1f1f;
--s2:#262626;
--s3:#2e2e2e;
--border:#353532;
--border2:#454540;
--text:#e8e8e6;
--muted:#888882;
--muted2:#aaaaa5;
--ink:#f5f5f3;
--green:#22c55e;
--green-bg:rgba(34,197,94,0.10);
--green-border:rgba(34,197,94,0.30);
--red:#ef4444;
--red-bg:rgba(239,68,68,0.10);
--red-border:rgba(239,68,68,0.30);
--amber:#f59e0b;
--amber-bg:rgba(245,158,11,0.10);
--amber-border:rgba(245,158,11,0.30);
--blue:#3b82f6;
--blue-bg:rgba(59,130,246,0.10);
--blue-border:rgba(59,130,246,0.30);
--purple:#a78bfa;
--accent:#f55836;
--accent-hover:#ff6a4a;
--accent-bg:rgba(245,88,54,0.14);
--accent-border:rgba(245,88,54,0.35);
/* Sidebar mantém-se preta — já é dark-first */
}
/* Sobreposições para componentes com cores hardcoded.
Tudo dentro de [data-theme="dark"] {} para isolar o light theme. */
[data-theme="dark"] body,
[data-theme="dark"] html{
background:var(--bg);color:var(--text);
}
[data-theme="dark"] .topbar,
[data-theme="dark"] .tb-search,
[data-theme="dark"] .page-toolbar,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .perfil-modal,
[data-theme="dark"] .perfil-side,
[data-theme="dark"] .perfil-content,
[data-theme="dark"] .construcao,
[data-theme="dark"] .crit-drive-card,
[data-theme="dark"] .perfil-card,
[data-theme="dark"] .perfil-input,
[data-theme="dark"] .perfil-side-hero,
[data-theme="dark"] .email-row,
[data-theme="dark"] .email-list,
[data-theme="dark"] .email-reader,
[data-theme="dark"] .email-folder-list,
[data-theme="dark"] .cal-modal,
[data-theme="dark"] .comms-channel-list,
[data-theme="dark"] .comms-thread,
[data-theme="dark"] .nota-card,
[data-theme="dark"] .perfil-rh-kpi{
background:var(--surface);color:var(--text);
}
[data-theme="dark"] .perfil-side{
background:linear-gradient(180deg, var(--surface), var(--bg));
}
[data-theme="dark"] .perfil-content .perfil-card{
background:var(--surface);border-color:var(--border);
}
[data-theme="dark"] .perfil-input{
background:var(--s2);border-color:var(--border);color:var(--text);
}
[data-theme="dark"] .perfil-input:read-only{background:var(--s3);color:var(--muted2)}
[data-theme="dark"] .perfil-card-warn{background:linear-gradient(135deg, rgba(245,158,11,0.08), var(--surface));border-color:rgba(245,158,11,0.4)}
[data-theme="dark"] .perfil-sig-preview{background:var(--s2);color:var(--text)}
[data-theme="dark"] .perfil-scope-row,
[data-theme="dark"] .perfil-toggle-row,
[data-theme="dark"] .perfil-rh-item,
[data-theme="dark"] .perfil-storage-row,
[data-theme="dark"] .perfil-kbd-row,
[data-theme="dark"] .notif-status-item,
[data-theme="dark"] .notif-status-hint{background:var(--s2)}
[data-theme="dark"] .perfil-kbd-combo kbd,
[data-theme="dark"] .perfil-kbd-capture-box kbd,
[data-theme="dark"] .perfil-kbd-capture-hint kbd{
background:var(--s3);border-color:var(--border2);color:var(--text);
}
[data-theme="dark"] .perfil-kbd-capture-box{background:var(--s2);border-color:var(--border)}
[data-theme="dark"] .perfil-hero{background:linear-gradient(135deg, var(--surface), var(--s2));border-color:var(--border)}
[data-theme="dark"] .perfil-side-avatar,
[data-theme="dark"] .perfil-avatar{background:var(--s3);border-color:var(--border2)}
/* Botões, dropdowns, inputs genéricos */
[data-theme="dark"] .btn{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .btn:hover{background:var(--s2)}
[data-theme="dark"] .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-theme="dark"] .btn.primary:hover{background:var(--accent-hover)}
[data-theme="dark"] .btn.danger{background:var(--red);color:#fff;border-color:var(--red)}
[data-theme="dark"] input:not(.perfil-input):not([type=checkbox]):not([type=radio]),
[data-theme="dark"] textarea:not(.perfil-input),
[data-theme="dark"] select:not(.perfil-input){
background:var(--s2);border-color:var(--border);color:var(--text);
}
/* Modais com fundo branco hardcoded */
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-overlay > div:not([class*="overlay"]),
[data-theme="dark"] .email-compose-modal,
[data-theme="dark"] .email-move-modal,
[data-theme="dark"] .email-schedule-modal,
[data-theme="dark"] .cal-modal,
[data-theme="dark"] .perfil-modal{
background:var(--surface);color:var(--text);
}
/* Bordas/separadores */
[data-theme="dark"] hr,
[data-theme="dark"] .perfil-modal-h,
[data-theme="dark"] .perfil-modal-f{border-color:var(--border)}
/* Imagens / avatars com fallback */
[data-theme="dark"] .perfil-side-avatar.is-fallback::after,
[data-theme="dark"] .perfil-avatar.is-fallback::after{color:var(--accent)}
/* Scrollbars (apenas WebKit) */
[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px}
[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--bg)}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:5px}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:var(--muted)}
/* Sobreposições agressivas para componentes com cores hardcoded ─ pass-2 */
/* Início — cards do dashboard */
[data-theme="dark"] .inicio-hero,
[data-theme="dark"] .inicio-card,
[data-theme="dark"] .inicio-section,
[data-theme="dark"] .inicio-mtg,
[data-theme="dark"] .inicio-cal,
[data-theme="dark"] .inicio-alert{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .inicio-mtg-day,
[data-theme="dark"] .inicio-mtg-list{background:var(--s2)}
[data-theme="dark"] .ic-row{border-color:var(--border)}
/* Comunicação */
[data-theme="dark"] .comms-layout,
[data-theme="dark"] .comms-clients,
[data-theme="dark"] .comms-thread,
[data-theme="dark"] .comms-detail,
[data-theme="dark"] .comms-post,
[data-theme="dark"] .comms-reply{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .comms-client{background:var(--s2);color:var(--text)}
[data-theme="dark"] .comms-client.is-active{background:var(--accent-bg);color:var(--accent)}
[data-theme="dark"] .comms-tab{color:var(--muted)}
[data-theme="dark"] .comms-tab.is-active{color:var(--accent);background:var(--accent-bg)}
[data-theme="dark"] .comms-composer-input,
[data-theme="dark"] .comms-reply-input{background:var(--s2);color:var(--text);border-color:var(--border)}
/* To-do */
[data-theme="dark"] .td-col,
[data-theme="dark"] .td-card,
[data-theme="dark"] .td-alert{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .td-col-head{background:var(--s2)}
[data-theme="dark"] .td-card-meta,
[data-theme="dark"] .td-card-cli{color:var(--muted)}
/* Email — linhas e painéis */
[data-theme="dark"] .email-row,
[data-theme="dark"] .email-folder-item,
[data-theme="dark"] .email-detail-h,
[data-theme="dark"] .email-detail-body{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .email-row:hover{background:var(--s2)}
[data-theme="dark"] .email-row.is-active{background:var(--accent-bg)}
[data-theme="dark"] .email-row.is-unread{background:var(--surface);font-weight:600}
[data-theme="dark"] .email-folder-item.is-active{background:var(--accent-bg);color:var(--accent)}
[data-theme="dark"] .email-bulkbar,
[data-theme="dark"] .email-search{background:var(--s2);border-color:var(--border)}
/* Calendário */
[data-theme="dark"] .cal-grid,
[data-theme="dark"] .cal-day,
[data-theme="dark"] .cal-week-cell,
[data-theme="dark"] .cal-sidebar,
[data-theme="dark"] .cal-toolbar{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .cal-day.is-today .cal-day-num,
[data-theme="dark"] .cal-week-head.is-today{color:var(--accent)}
[data-theme="dark"] .cal-row,
[data-theme="dark"] .cal-cal-row{background:var(--surface);color:var(--text)}
[data-theme="dark"] .cal-cal-row:hover{background:var(--s2)}
/* Agência (Visão Geral) — projetos kanban */
[data-theme="dark"] .pj-col,
[data-theme="dark"] .pj-card,
[data-theme="dark"] .pj-grid,
[data-theme="dark"] .pj-col-h{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .pj-col-h{background:var(--s2)}
[data-theme="dark"] .pj-pill{background:var(--s3);color:var(--text)}
/* Notas */
[data-theme="dark"] .nota-card,
[data-theme="dark"] .nota-detail{background:var(--surface);color:var(--text);border-color:var(--border)}
/* Dashboards Meta/Google/GA */
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .data-table,
[data-theme="dark"] .data-table th,
[data-theme="dark"] .data-table td{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .data-table tr:nth-child(even){background:var(--s2)}
[data-theme="dark"] .data-table th{background:var(--s3);color:var(--text)}
/* Tabs / chips / pills genéricos */
[data-theme="dark"] .chip,
[data-theme="dark"] .tab,
[data-theme="dark"] .filter-chip{background:var(--s2);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .tab.is-active,
[data-theme="dark"] .filter-chip.is-active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
/* Construção (em desenvolvimento) */
[data-theme="dark"] .construcao{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .construcao-text,
[data-theme="dark"] .construcao-hint{color:var(--muted)}
/* Dropdowns / selects nativos */
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea{
background:var(--s2);color:var(--text);border-color:var(--border);
}
[data-theme="dark"] select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus{border-color:var(--accent);outline:none}
/* Sidebar Alertas / Faturas */
[data-theme="dark"] .alert-card,
[data-theme="dark"] .fatura-card,
[data-theme="dark"] .lead-card{background:var(--surface);color:var(--text);border-color:var(--border)}
/* Wizard / setup pages */
[data-theme="dark"] .wiz-step,
[data-theme="dark"] .wiz-card,
[data-theme="dark"] .setup-card{background:var(--surface);color:var(--text);border-color:var(--border)}
/* Page toolbar */
[data-theme="dark"] .page-toolbar,
[data-theme="dark"] .page-toolbar-row,
[data-theme="dark"] .platform-link{background:var(--surface);color:var(--text);border-color:var(--border)}
/* Topbar */
[data-theme="dark"] .topbar{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .tb-title,
[data-theme="dark"] .tb-title em{color:var(--text)}
[data-theme="dark"] .global-search{background:var(--s2);border-color:var(--border)}
[data-theme="dark"] .global-search input{background:transparent;color:var(--text)}
[data-theme="dark"] .tb-nav-btn{background:var(--s2);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .tb-nav-btn:hover{background:var(--s3)}
/* IA Chat panel & Harvey */
[data-theme="dark"] .ai-panel,
[data-theme="dark"] .harvey-msg,
[data-theme="dark"] .harvey-input{background:var(--surface);color:var(--text);border-color:var(--border)}
/* Notas — paleta dark com texto claro */
[data-theme="dark"] .is-color-yellow{--n-bg:#3a3010;--n-bg-h:#4a3e15;--n-bd:#5a4d20;--n-ink:#ffe082}
[data-theme="dark"] .is-color-pink{--n-bg:#3a1820;--n-bg-h:#4a212a;--n-bd:#5a2b35;--n-ink:#f8a5c2}
[data-theme="dark"] .is-color-blue{--n-bg:#15243a;--n-bg-h:#1a2e4a;--n-bd:#22405e;--n-ink:#a8d0f4}
[data-theme="dark"] .is-color-green{--n-bg:#152a1c;--n-bg-h:#1c3826;--n-bd:#264d33;--n-ink:#a8e5b8}
[data-theme="dark"] .is-color-purple{--n-bg:#251a3a;--n-bg-h:#30224a;--n-bd:#3e2d5e;--n-ink:#d3b8ee}
[data-theme="dark"] .is-color-orange{--n-bg:#3a1f10;--n-bg-h:#4a2814;--n-bd:#5e351a;--n-ink:#ffc69a}
/* Performance / Objectivos tables — categorias com cores light hardcoded */
[data-theme="dark"] .obj-table{color:var(--text)}
[data-theme="dark"] .obj-table thead th{background:var(--s2);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .obj-table thead .obj-th-label{background:var(--s2);color:var(--text)}
[data-theme="dark"] .obj-table thead .obj-th-avatar{background:var(--s2)}
[data-theme="dark"] .obj-table thead .obj-th-channel{background:var(--surface);color:var(--text)}
[data-theme="dark"] .obj-table thead .obj-th-target{background:rgba(220,38,38,0.20);color:#fca5a5;border-color:rgba(220,38,38,0.35)}
[data-theme="dark"] .obj-table thead .obj-th-actual{background:var(--s2);color:var(--text)}
[data-theme="dark"] .obj-table tbody td{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .obj-table tbody td.obj-c-target{background:rgba(220,38,38,0.12)}
[data-theme="dark"] .obj-table tbody tr:hover td{background:var(--s2)}
[data-theme="dark"] .obj-table tbody tr:hover td.obj-c-target{background:rgba(220,38,38,0.18)}
/* Performance table específica (Visão Geral · Performance) */
[data-theme="dark"] .perf-wrap,
[data-theme="dark"] .perf-table,
[data-theme="dark"] .perf-table th,
[data-theme="dark"] .perf-table td,
[data-theme="dark"] .perf-row,
[data-theme="dark"] .perf-cat,
[data-theme="dark"] .perf-sec-h,
[data-theme="dark"] .perf-sec-row{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .perf-sec-h{background:var(--s2)}
[data-theme="dark"] .perf-sub-row td{background:var(--surface);color:var(--text)}
[data-theme="dark"] .perf-sub-row:hover td{background:var(--s2)}
[data-theme="dark"] .perf-tot-row td{background:var(--s2);color:var(--text);font-weight:700}
/* Headers com cores hardcoded por categoria */
[data-theme="dark"] .perf-th-obj,
[data-theme="dark"] .perf-th-cal,
[data-theme="dark"] .perf-th-met,
[data-theme="dark"] .perf-th-perf,
[data-theme="dark"] .perf-th-sig{background:var(--s2);color:var(--muted)}
/* Cells pastel */
[data-theme="dark"] .cell-obj{background:rgba(234,70,42,0.08)}
[data-theme="dark"] .cell-cal{background:rgba(234,150,42,0.08)}
[data-theme="dark"] .cell-met{background:rgba(59,130,246,0.08)}
[data-theme="dark"] .cell-perf{background:rgba(34,197,94,0.08)}
[data-theme="dark"] .cell-sig{background:var(--s2)}
/* Cores de fundo pastel genéricas — overrides */
[data-theme="dark"] [style*="background:#fef0ec"],
[data-theme="dark"] [style*="background: #fef0ec"]{background:rgba(234,70,42,0.10) !important}
[data-theme="dark"] [style*="background:#fff8eb"],
[data-theme="dark"] [style*="background: #fff8eb"]{background:rgba(245,158,11,0.10) !important}
[data-theme="dark"] [style*="background:#f0fdf4"],
[data-theme="dark"] [style*="background: #f0fdf4"]{background:rgba(34,197,94,0.10) !important}
[data-theme="dark"] [style*="background:#eff6ff"],
[data-theme="dark"] [style*="background: #eff6ff"]{background:rgba(59,130,246,0.10) !important}
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background: #fef2f2"]{background:rgba(239,68,68,0.10) !important}
[data-theme="dark"] [style*="background:#fafaf9"]{background:var(--s2) !important}
[data-theme="dark"] [style*="background:#fff"]{background:var(--surface) !important}
/* Projetos kanban — colunas pastel dos colaboradores */
[data-theme="dark"] .pj-tone-green{background:rgba(34,197,94,0.12)}
[data-theme="dark"] .pj-tone-blue{background:rgba(59,130,246,0.12)}
[data-theme="dark"] .pj-tone-pink{background:rgba(244,114,182,0.12)}
[data-theme="dark"] .pj-tone-red{background:rgba(239,68,68,0.12)}
[data-theme="dark"] .pj-tone-grey{background:var(--s2)}
[data-theme="dark"] .pj-col-hdr{color:var(--text)}
[data-theme="dark"] .pj-col-name{color:var(--text)}
[data-theme="dark"] .pj-col-role{color:var(--muted2)}
/* To-do cards específicos — fundos hardcoded */
[data-theme="dark"] .td-card,
[data-theme="dark"] .td-list,
[data-theme="dark"] .td-task,
[data-theme="dark"] .td-status,
[data-theme="dark"] .td-month-h{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .td-task:hover{background:var(--s2)}
[data-theme="dark"] .td-task.is-done{opacity:.6}
[data-theme="dark"] .td-task.is-done .td-task-title{text-decoration:line-through;color:var(--muted)}
[data-theme="dark"] .td-month-h{background:var(--s2);color:var(--muted)}
[data-theme="dark"] .td-empty-text{color:var(--muted2)}
/* Notas modal/quick — texto invertido para visibilidade */
[data-theme="dark"] .notas-modal{background:var(--n-bg);color:var(--n-ink);border-color:var(--n-bd)}
[data-theme="dark"] .notas-modal-title-input,
[data-theme="dark"] .notas-modal-body{background:transparent;color:var(--n-ink)}
[data-theme="dark"] .notas-modal-foot{background:rgba(0,0,0,.2)}
[data-theme="dark"] .notes-quick-pop{background:var(--n-bg);border-color:var(--n-bd)}
/* /TEMA ESCURO */
html{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px}
body{min-height:100vh}
/* —— LAYOUT —— */
.app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
/* —— SIDEBAR —— */
.sidebar{
background:var(--sidebar-bg);
display:flex;flex-direction:column;
position:sticky;top:0;height:100vh;overflow-y:auto;
}
.logo-zone{padding:22px 20px 18px;border-bottom:1px solid var(--sidebar-border)}
.logo-row{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.logo-icon{
width:32px;height:32px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.logo-icon svg{width:100%;height:100%;display:block}
.logo-name{
font-family:var(--brand);
font-size:17px;font-weight:400;color:#fff;letter-spacing:-.2px;line-height:1;
}
.logo-name .dot{color:var(--accent)}
.logo-sub{font-size:9px;color:var(--sidebar-muted);letter-spacing:1.5px;text-transform:uppercase;font-family:var(--mono)}
/* CLIENT DROPDOWN BLOCK */
.client-block{
margin:14px 14px 0;padding:11px 13px;
background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:10px;
}
.cb-label{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--sidebar-muted);margin-bottom:6px;font-family:var(--mono)}
.client-select{
width:100%;
appearance:none;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.12);
border-radius:7px;
color:#fff;
font-family:var(--font);
font-size:13px;
font-weight:600;
padding:8px 28px 8px 10px;
cursor:pointer;
outline:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 9px center;
background-size:11px;
transition:all .15s;
}
.client-select:hover{background-color:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2)}
.client-select:focus{border-color:var(--accent)}
.client-select option{background:var(--sidebar-bg);color:#fff}
.cb-url{font-size:10px;color:var(--sidebar-muted);margin-top:6px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* NAV */
.nav-section{padding:16px 13px 4px}
.nav-section-label{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,0.2);padding:0 7px 7px;font-family:var(--mono)}
.nav-item{
display:flex;align-items:center;gap:9px;
padding:8px 9px;border-radius:8px;cursor:pointer;
color:var(--sidebar-text);font-size:12.5px;font-weight:400;
transition:all .15s;margin-bottom:1px;position:relative;
}
.nav-item:hover{background:rgba(255,255,255,0.06);color:#fff}
.nav-item.active{background:rgba(234,70,42,0.18);color:#ff8a6f;font-weight:500;border:1px solid rgba(234,70,42,0.3)}
.nav-item.active::before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:2px;background:var(--accent);border-radius:2px}
.ni{font-size:13px;width:17px;text-align:center;opacity:.6}
.nav-item.active .ni{opacity:1}
.nbadge{margin-left:auto;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:8px}
.nav-soon{margin-left:auto;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.5);font-size:8px;font-weight:600;padding:2px 6px;border-radius:8px;letter-spacing:.3px;text-transform:uppercase;font-family:var(--mono)}
.nbadge.amber{background:var(--amber)}
.nbadge.green{background:var(--green)}
.npro{margin-left:auto;background:rgba(234,70,42,0.25);color:#ff8a6f;font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;letter-spacing:.5px}
/* Sub-itens (Visão Geral → Projetos / Objetivos / Performance) */
.nav-has-sub{padding-right:7px}
.nav-chevron{margin-left:auto;font-size:11px;opacity:.5;transition:transform .15s}
.nav-subitems{display:none;flex-direction:column;margin:2px 0 4px 26px;gap:1px}
.nav-subitems.open{display:flex}
.nav-subitem{
padding:6px 10px;border-radius:6px;cursor:pointer;
color:var(--sidebar-muted);font-size:11.5px;font-weight:400;
transition:all .12s;letter-spacing:.1px;position:relative;
}
.nav-subitem::before{
content:'';position:absolute;left:-9px;top:50%;width:5px;height:1px;
background:rgba(255,255,255,0.18);
}
.nav-subitem:hover{color:#fff;background:rgba(255,255,255,0.05)}
.nav-subitem.active{color:#ff8a6f;background:rgba(234,70,42,0.14);font-weight:500}
.sidebar-footer{margin-top:auto;padding:14px 16px;border-top:1px solid var(--sidebar-border);font-size:10px;color:var(--sidebar-muted);font-family:var(--mono)}
/* —— MAIN —— */
.main{overflow:auto;display:flex;flex-direction:column;min-width:0}
/* —— TOPBAR —— */
.topbar{
background:var(--surface);border-bottom:1px solid var(--border);
padding:0 28px;height:54px;
display:flex;align-items:center;justify-content:space-between;
position:sticky;top:0;z-index:50;
}
.tb-title{font-size:14px;font-weight:600;color:var(--ink)}
.tb-title em{font-style:normal;color:var(--muted);font-weight:400}
.tb-right{display:flex;align-items:center;gap:8px}
.date-pill{
display:flex;align-items:center;gap:7px;padding:6px 12px;
border:1px solid var(--border);border-radius:7px;background:var(--s2);
font-size:12px;color:var(--muted2);cursor:pointer;font-family:var(--mono);
}
.date-pill strong{color:var(--ink);font-weight:500;font-family:var(--font)}
.btn{
display:flex;align-items:center;gap:5px;padding:6px 14px;border-radius:7px;
font-size:12px;font-weight:500;font-family:var(--font);cursor:pointer;
border:1px solid var(--border);background:var(--surface);color:var(--ink);transition:all .15s;
}
.btn:hover{background:var(--s2);border-color:var(--border2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
/* —— PAGES —— */
.page{display:none}.page.active{display:block}
.content{padding:22px 28px}
/* —— EM CONSTRUÇÃO —— */
.construcao{
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:calc(100vh - 54px);padding:40px 28px;text-align:center;
}
.construcao-icon{
width:96px;height:96px;border-radius:24px;
background:linear-gradient(135deg,var(--amber-bg),var(--s3));
border:1px solid var(--amber-border);
display:flex;align-items:center;justify-content:center;
font-size:44px;margin-bottom:24px;
}
.construcao-title{font-size:24px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-.5px}
.construcao-client{
display:inline-block;padding:5px 14px;
background:var(--green-bg);border:1px solid var(--green-border);border-radius:20px;
font-size:13px;font-weight:600;color:var(--green);margin-bottom:14px;
}
.construcao-text{font-size:14px;color:var(--muted2);max-width:480px;line-height:1.6;margin-bottom:22px}
.construcao-hint{
display:flex;align-items:center;gap:8px;padding:10px 16px;
background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:9px;
font-size:12px;color:var(--blue);font-family:var(--mono);
}
/* —— SECTION LABEL —— */
.sec-lbl{
font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px;font-family:var(--mono);
}
.sec-lbl::after{content:'';flex:1;height:1px;background:var(--border)}
/* —— KPI CARDS —— */
.kgrid{display:grid;gap:10px;margin-bottom:14px}
/* Base: 5 colunas por linha (cartões compactos). Linhas parciais (1-4 cartões)
mantêm a MESMA largura de coluna e alinham à esquerda — nunca esticam para
ocupar a tela toda (era o caso de Tx. Conversão / CPA / Conversões). */
.kgrid.c5,.kgrid.c4,.kgrid.c3,.kgrid.c2,.kgrid.c1{grid-template-columns:repeat(5,1fr)}
.kgrid.c8{grid-template-columns:repeat(8,1fr)}
.kgrid.c7{grid-template-columns:repeat(7,1fr)}
.kgrid.c6{grid-template-columns:repeat(6,1fr)}
.kc{
background:var(--surface);border:1px solid var(--border);border-radius:11px;
padding:14px 16px;cursor:default;transition:box-shadow .15s;
animation:ku .35s ease both;
}
.kc:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
@keyframes ku{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.kc:nth-child(1){animation-delay:.03s}.kc:nth-child(2){animation-delay:.06s}
.kc:nth-child(3){animation-delay:.09s}.kc:nth-child(4){animation-delay:.12s}
.kc:nth-child(5){animation-delay:.15s}.kc:nth-child(6){animation-delay:.18s}
.kc:nth-child(7){animation-delay:.21s}.kc:nth-child(8){animation-delay:.24s}
.kc.g{border-top:2px solid var(--green)}
.kc.r{border-top:2px solid var(--red)}
.kc.a{border-top:2px solid var(--amber)}
.kc.b{border-top:2px solid var(--blue)}
.kc.p{border-top:2px solid var(--purple)}
.kl{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:7px;font-family:var(--mono)}
.kv{font-size:24px;font-weight:700;color:var(--ink);line-height:1;margin-bottom:5px;letter-spacing:-.5px}
.kv.lg{font-size:28px}
.kd{font-size:11px;font-weight:600;display:flex;align-items:center;gap:3px;font-family:var(--mono)}
.kd.up{color:var(--green)}.kd.dn{color:var(--red)}.kd.nu{color:var(--muted)}
.ks{font-size:10px;color:var(--muted);margin-top:2px;font-family:var(--mono)}
/* —— Faixa de veredito (objetivo vs realizado + pacing) —— */
.verdict-band{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:11px}
.vb-verdict{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.vb-verdict .vb-ico{font-size:14px}
.vb-verdict.vb-ok .vb-ico{color:#16a34a}
.vb-verdict.vb-warn .vb-ico{color:#d97706}
.vb-verdict.vb-bad .vb-ico{color:#dc2626}
.vb-pac{margin-left:8px;font-size:11px;font-weight:500;color:var(--muted);font-family:var(--mono)}
.vb-heroes{display:flex;align-items:stretch;gap:9px;flex-wrap:wrap;margin-left:auto}
.vb-hero{display:flex;flex-direction:column;gap:1px;padding:6px 12px;border-radius:9px;border:1px solid var(--border);border-left-width:3px;background:var(--bg,#fff);min-width:96px}
.vb-hero.vb-ok{border-left-color:#16a34a}
.vb-hero.vb-warn{border-left-color:#d97706}
.vb-hero.vb-bad{border-left-color:#dc2626}
.vb-h-lbl{font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-family:var(--mono)}
.vb-h-val{font-size:17px;font-weight:700;color:var(--ink);line-height:1.1;letter-spacing:-.3px}
.vb-h-meta{font-size:10px;color:var(--muted);font-family:var(--mono)}
.vb-h-proj{font-size:10px;color:var(--muted);font-family:var(--mono);margin-top:1px}
.vb-hero.vb-ok .vb-h-proj{color:#16a34a}
.vb-hero.vb-bad .vb-h-proj{color:#dc2626}
/* —— Dashboard Tráfego/Brand —— */
.trf-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:900px){.trf-2col{grid-template-columns:1fr}}
.trf-seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trf-seo-item{border:1px solid var(--border);border-radius:9px;padding:9px 11px}
.trf-seo-l{font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-family:var(--mono);margin-bottom:3px}
.trf-seo-v{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.3px}
/* —— CARDS —— */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}
.ch{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.ct{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px}
.cs{font-size:11px;color:var(--muted)}
.ca{font-size:11px;color:var(--accent);cursor:pointer;font-weight:500;white-space:nowrap}
/* —— LAYOUTS —— */
.r2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.r4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.r32{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;margin-bottom:12px}
.r23{display:grid;grid-template-columns:1fr 1.5fr;gap:12px;margin-bottom:12px}
.r312{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:12px}
/* —— FUNNEL —— */
.funnel{display:flex;flex-direction:column;gap:5px}
.frow{display:flex;align-items:center;gap:10px}
.fn{min-width:96px;font-size:11px;color:var(--muted2);font-weight:500;font-family:var(--mono)}
.fbg{flex:1;height:28px;background:var(--s3);border-radius:4px;overflow:hidden}
.ff2{height:100%;border-radius:4px;display:flex;align-items:center;padding:0 9px;font-size:10px;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:.3px}
.fm{min-width:78px;text-align:right}
.fnum{font-size:15px;font-weight:700;color:var(--ink);line-height:1}
.frate{font-size:10px;color:var(--muted);font-family:var(--mono)}
.farr{font-size:10px;color:var(--border2);padding:1px 0 1px 106px;font-family:var(--mono)}
/* —— FUNIL · novo design (gbFunnel) —— */
.fnnl{display:flex;flex-direction:column;padding:6px 2px}
.fnnl-row{display:grid;grid-template-columns:88px 1fr 78px;align-items:center;gap:12px}
.fnnl-label{font-size:11px;color:var(--muted2);font-weight:600;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px}
.fnnl-bar-wrap{display:flex;justify-content:center}
.fnnl-bar{
height:38px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
color:#fff;font-size:16px;font-weight:700;letter-spacing:-.3px;
box-shadow:0 1px 2px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18);
transition:transform .15s ease;min-width:60px;
}
.fnnl-bar:hover{transform:translateY(-1px)}
.fnnl-bar-num{font-variant-numeric:tabular-nums}
.fnnl-side{text-align:right}
.fnnl-side-pct{font-size:13px;font-weight:700;color:var(--ink);font-family:var(--mono);line-height:1.1}
.fnnl-side-lbl{font-size:9px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.fnnl-gap{display:grid;grid-template-columns:88px 1fr 78px;gap:12px;padding:3px 0}
.fnnl-drop{
grid-column:2;justify-self:center;
display:inline-flex;align-items:center;gap:6px;
font-size:10px;color:var(--muted);font-family:var(--mono);font-weight:500;
background:var(--s2);border:1px solid var(--border);border-radius:11px;
padding:2px 9px;
}
.fnnl-drop.warn{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.fnnl-drop.urg{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.fnnl-drop.ok{background:#dcfce7;border-color:#86efac;color:#166534}
.fnnl-drop-rate{font-weight:700}
/* Cores das etapas (gradient diagonal) */
.fnnl-c1{background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%)}
.fnnl-c2{background:linear-gradient(135deg,#1e40af 0%,#60a5fa 100%)}
.fnnl-c3{background:linear-gradient(135deg,#15803d 0%,#4ade80 100%)}
.fnnl-c4{background:linear-gradient(135deg,#b45309 0%,#fbbf24 100%)}
.fnnl-c5{background:linear-gradient(135deg,#6d28d9 0%,#a78bfa 100%)}
.fnnl-c6{background:linear-gradient(135deg,#991b1b 0%,#f87171 100%)}
/* —— PLATFORM BLOCKS —— */
.plat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plat-card{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:14px}
.plat-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.plat-name{font-size:13px;font-weight:600;color:var(--ink)}
.plat-kpis{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pk{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:9px 11px}
.pk-l{font-size:9px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px;font-family:var(--mono)}
.pk-v{font-size:16px;font-weight:700;color:var(--ink)}
.pk-d{font-size:10px;font-family:var(--mono);font-weight:600;margin-top:2px}
.pk-d.up{color:var(--green)}.pk-d.dn{color:var(--red)}.pk-d.nu{color:var(--muted)}
/* —— TABLES —— */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;padding:0 0 9px;text-align:left;border-bottom:1px solid var(--border);font-family:var(--mono)}
.tbl th:not(:first-child){text-align:right}
.tbl td{padding:9px 0;border-bottom:1px solid var(--border);font-size:12px}
.tbl td:not(:first-child){text-align:right;font-family:var(--mono);font-size:12px}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--s2)}
.cdot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px;flex-shrink:0}
.cn{font-weight:500;font-size:12px;display:flex;align-items:center}
.qbar{display:flex;align-items:center;gap:5px;justify-content:flex-end}
.qb{width:38px;height:3px;background:var(--s3);border-radius:2px;overflow:hidden}
.qbf{height:100%;border-radius:2px}
/* —— CAMP TABLE —— */
.ctbl{width:100%;border-collapse:collapse}
.ctbl th{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);background:var(--s2);font-family:var(--mono)}
.ctbl th:not(:first-child){text-align:right}
.ctbl td{padding:9px 10px;border-bottom:1px solid var(--border);font-size:12px}
.ctbl td:not(:first-child){text-align:right;font-family:var(--mono)}
.ctbl tr:last-child td{border-bottom:none;font-weight:600;background:var(--s2)}
.ctbl tr:hover td{background:var(--s2)}
.bc{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.mb{width:48px;height:3px;background:var(--s3);border-radius:2px;overflow:hidden}
.mf2{height:100%;border-radius:2px}
/* —— CRIATIVOS —— */
.crit-list{display:flex;flex-direction:column;gap:6px}
.crit-item{
display:flex;align-items:center;gap:10px;padding:11px 13px;
background:var(--s2);border-radius:9px;border:1px solid var(--border);transition:border-color .15s;
}
.crit-item:hover{border-color:var(--border2)}
.cr-rank{font-size:12px;font-weight:700;color:var(--muted);min-width:17px}
.cr-thumb{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.cr-info{flex:1;min-width:0}
.cr-name{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-meta{font-size:10px;color:var(--muted);margin-top:2px;font-family:var(--mono)}
.cr-score{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.sa{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.sb{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.sc{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.cr-kpis{display:flex;gap:10px}
.crk{text-align:right}
.crk strong{display:block;font-size:14px;font-weight:700;letter-spacing:-.3px}
.crk span{font-size:10px;color:var(--muted);font-family:var(--mono)}
/* —— DONUT —— */
.dw{display:flex;align-items:center;gap:16px}
.dc{position:relative;width:106px;height:106px;flex-shrink:0}
.dcenter{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.dpct{font-size:19px;font-weight:700;color:var(--green)}
.dlbl{font-size:9px;color:var(--muted);font-family:var(--mono)}
.leg{display:flex;flex-direction:column;gap:6px;flex:1}
.legi{display:flex;align-items:center;gap:7px;font-size:11px}
.legd{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.legv{margin-left:auto;font-size:14px;font-weight:700}
/* —— ALERTS —— */
.al{display:flex;flex-direction:column;gap:7px}
.ai{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--s2)}
.ai.urg{border-color:var(--red-border);background:var(--red-bg)}
.ai.warn{border-color:var(--amber-border);background:var(--amber-bg)}
.ai.ok{border-color:var(--green-border);background:var(--green-bg)}
.ai.info{border-color:var(--blue-border);background:var(--blue-bg)}
.ai-ico{font-size:15px;flex-shrink:0;margin-top:1px}
.ai-t{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:2px}
.ai-d{font-size:11px;color:var(--muted2)}
.ai-time{font-size:10px;color:var(--muted);margin-top:3px;font-family:var(--mono)}
/* —— COMPARATIVA —— */
.comp-wrap{overflow-x:auto;border-radius:11px;border:1px solid var(--border)}
.comp-tbl{width:100%;border-collapse:collapse;background:var(--surface)}
.comp-tbl thead tr:first-child th{background:var(--ink);color:#fff;font-size:11px;font-weight:600;font-family:var(--font)}
.comp-tbl thead tr:nth-child(2) th{background:var(--s2);font-size:9px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;padding:7px 10px;border-right:1px solid var(--border);font-family:var(--mono)}
.comp-tbl th{padding:9px 10px;text-align:center;border-right:1px solid rgba(0,0,0,.04);white-space:nowrap}
.comp-tbl th:first-child{text-align:left;border-right:1px solid var(--border2)}
.comp-tbl td{padding:8px 10px;border-bottom:1px solid var(--border);border-right:1px solid rgba(0,0,0,.03);font-size:12px;text-align:center;font-family:var(--mono)}
.comp-tbl td:first-child{text-align:left;font-family:var(--font);font-weight:600;font-size:12px;background:var(--s2);border-right:1px solid var(--border2);color:var(--ink)}
.comp-tbl tfoot td{background:var(--s3);font-weight:700;border-top:1px solid var(--border2);border-bottom:none}
.comp-tbl tfoot td:first-child{font-family:var(--font)}
.comp-tbl tr:hover td{background:#f8f8f6}
.comp-tbl tr:hover td:first-child{background:var(--s3)}
.col-y{color:var(--muted)!important}
.cgs{border-left:1px solid var(--border2)!important}
.dp2{color:var(--green);font-weight:700;font-size:10px}
.dn2{color:var(--red);font-weight:700;font-size:10px}
.dnu2{color:var(--muted);font-size:10px}
.gh1{background:#1e3a5f!important}.gh2{background:#2d1f0a!important}
.gh3{background:#0a2014!important}.gh4{background:#2d1a00!important}
.gh5{background:#1a0a30!important}.gh6{background:#2d0a0a!important}
.gh7{background:#0a1f1a!important}.gh8{background:#2d2600!important}
/* —— QUAL —— */
.qsgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:14px}
.qsc{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:12px;text-align:center;cursor:pointer;transition:all .15s}
.qsc:hover{border-color:var(--border2);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.qsc.qa{border-color:var(--green);background:var(--green-bg)}
.qsn{font-size:22px;font-weight:700;line-height:1}
.qsl{font-size:10px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.6px;font-family:var(--mono)}
.qtb{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.srch{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--border);border-radius:7px;background:var(--surface);flex:1;max-width:280px}
.srch input{border:none;background:transparent;font-size:13px;font-family:var(--font);color:var(--text);outline:none;flex:1}
.srch input::placeholder{color:var(--muted)}
/* Dropdown padrão Growth Click — usado em todas as páginas */
.fsel{
border:1px solid var(--border);border-radius:8px;padding:8px 30px 8px 12px;
font-size:12px;font-weight:500;font-family:var(--font);background:var(--surface);
cursor:pointer;outline:none;color:var(--ink);
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 10px center;
transition:border-color .15s, box-shadow .15s;
letter-spacing:-.1px;
}
/* Selector de conta Google Ads (multi-conta) */
.g-acc-wrap{display:flex;align-items:center;gap:6px;background:var(--surface-2,#f4f5f7);border:1px solid var(--border);border-radius:8px;padding:4px 4px 4px 10px}
.g-acc-lbl{font-size:10.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.g-acc-sel{border:none;background:transparent;font-size:12px;font-weight:600;color:var(--ink);padding:6px 22px 6px 6px;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 6px center;min-width:160px}
.fsel:hover{border-color:var(--accent-border)}
.fsel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.qw{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.qt{width:100%;border-collapse:collapse}
.qt thead{background:var(--s2)}
.qt th{padding:9px 12px;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;font-family:var(--mono)}
.qt td{padding:0;border-bottom:1px solid var(--border)}
.qt tr:last-child td{border-bottom:none}
.qt tr:hover td{background:var(--s2)}
.qtd2{padding:8px 12px}
.ln{font-weight:600;font-size:12px}
.ls{font-size:10px;color:var(--muted);margin-top:1px;font-family:var(--mono)}
.stsel{
appearance:none;border:1px solid transparent;border-radius:6px;
padding:5px 20px 5px 8px;font-size:11px;font-weight:600;font-family:var(--font);
cursor:pointer;outline:none;
background-repeat:no-repeat;background-position:right 5px center;background-size:10px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
transition:all .15s;
}
.stsel.pendente{background-color:var(--amber-bg);color:var(--amber);border-color:var(--amber-border)}
.stsel.valida{background-color:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.stsel.invalida{background-color:var(--red-bg);color:var(--red);border-color:var(--red-border)}
.stsel.proposta{background-color:var(--blue-bg);color:var(--blue);border-color:var(--blue-border)}
.stsel.fechado{background-color:#f5f3ff;color:var(--purple);border-color:#ddd6fe}
.stsel.sem-interesse{background-color:var(--s3);color:var(--muted2);border-color:var(--border2)}
.nota-inp{border:1px solid transparent;border-radius:6px;padding:5px 8px;font-size:11px;font-family:var(--font);color:var(--text);background:transparent;width:100%;min-width:140px;outline:none;transition:all .15s;resize:none}
.nota-inp:hover,.nota-inp:focus{border-color:var(--border2);background:var(--s2)}
.nota-inp::placeholder{color:var(--muted);font-style:italic}
.comsel{appearance:none;border:1px solid transparent;border-radius:6px;padding:5px 20px 5px 7px;font-size:11px;font-family:var(--font);color:var(--text);background-color:transparent;background-repeat:no-repeat;background-position:right 5px center;background-size:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");cursor:pointer;outline:none;transition:all .15s}
.comsel:hover,.comsel:focus{border-color:var(--border2);background-color:var(--s2)}
.sbdg{display:inline-flex;align-items:center;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:600;font-family:var(--mono)}
.sbdg.google{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border)}
.sbdg.meta{background:#f5f3ff;color:var(--purple);border:1px solid #ddd6fe}
.sbdg.organic{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.sbdg.direct{background:var(--s3);color:var(--muted2);border:1px solid var(--border2)}
.sbdg.ai{background:#ecfeff;color:#0891b2;border:1px solid #a5f3fc}
.pbdg{display:inline-flex;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:500;background:var(--s3);color:var(--muted2);border:1px solid var(--border);font-family:var(--mono)}
.qpag{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:var(--s2);border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.pbtns{display:flex;gap:3px}
.pb{width:27px;height:27px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:var(--surface);font-size:12px;cursor:pointer;color:var(--text);transition:all .15s;font-family:var(--font)}
.pb:hover,.pb.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.sf2{font-size:11px;color:var(--green);display:none;align-items:center;gap:4px;padding:4px 10px;background:var(--green-bg);border:1px solid var(--green-border);border-radius:6px;font-family:var(--mono)}
/* —— REPORTS —— */
.rhero{background:var(--ink);border-radius:14px;padding:28px;margin-bottom:14px;position:relative;overflow:hidden}
.rhero::before{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:rgba(22,163,74,0.08)}
.rht{font-size:22px;font-weight:700;color:#fff;margin-bottom:4px}
.rhs{font-size:12px;color:rgba(255,255,255,0.35);margin-bottom:22px;font-family:var(--mono)}
.rhk{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:1}
.rk{border-left:1px solid rgba(255,255,255,0.12);padding-left:13px}
.rkl{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:4px;font-family:var(--mono)}
.rkv{font-size:22px;font-weight:700;color:#fff;line-height:1}
.rkd{font-size:11px;margin-top:3px;font-family:var(--mono)}
.rkd.up{color:#4ade80}.rkd.dn{color:#fca5a5}
.ins{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:16px 18px}
.inh{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.inico{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px}
.int{font-size:13px;font-weight:600;color:var(--ink)}
.ins2{font-size:11px;color:var(--muted)}
.sr{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border)}
.sr:last-child{border-bottom:none}
.srl{font-size:12px;color:var(--muted2)}
.srv{font-size:14px;font-weight:700;color:var(--ink)}
.srd{font-size:10px;font-weight:600;margin-top:1px;text-align:right;font-family:var(--mono)}
/* —— MODAL —— */
.mbg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.mbg.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;width:490px;max-width:95vw;animation:su .2s ease;box-shadow:0 20px 60px rgba(0,0,0,.15)}
@keyframes su{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mt{font-size:16px;font-weight:700;margin-bottom:3px}
.ms{font-size:12px;color:var(--muted);margin-bottom:16px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ff.full{grid-column:1/-1}
.ff label{display:block;font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;font-family:var(--mono)}
.ff input,.ff select,.ff textarea{width:100%;border:1px solid var(--border);border-radius:7px;padding:8px 11px;font-size:13px;font-family:var(--font);color:var(--text);background:var(--s2);outline:none;transition:border-color .15s}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--accent)}
.mf{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:13px;border-top:1px solid var(--border)}
.ld-val{font-size:13px;color:var(--ink);padding:8px 11px;background:var(--s2);border:1px solid var(--border);border-radius:7px;min-height:36px;display:flex;align-items:center;font-family:var(--font)}
/* ─── COMPARATIVA · cards mensais ─── */
.comp-month-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.comp-month-card{
background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px 12px;
transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
display:flex;flex-direction:column;gap:11px;
}
.comp-month-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);border-color:var(--border2);transform:translateY(-1px)}
.comp-month-card.is-future{background:linear-gradient(180deg,var(--s2) 0%,var(--surface) 35%);border-style:dashed}
.comp-month-card.is-current{border-color:#10b98155;background:linear-gradient(180deg,#ecfdf5 0%,var(--surface) 30%)}
.comp-month-hdr{display:flex;align-items:center;justify-content:space-between;gap:8px}
.comp-month-name{font-size:15px;font-weight:700;letter-spacing:-.3px;color:var(--ink)}
.comp-month-tag{
font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
padding:3px 8px;border-radius:11px;font-family:var(--mono);
}
.comp-month-tag.t-current{background:rgba(234,70,42,0.1);color:var(--accent);border:1px solid rgba(234,70,42,0.3)}
.comp-month-tag.t-past{background:var(--s2);color:var(--muted);border:1px solid var(--border)}
.comp-month-tag.t-future{background:var(--s2);color:var(--muted);border:1px dashed var(--border2)}
.comp-month-main{
display:flex;align-items:flex-end;gap:12px;padding:11px 12px;
background:linear-gradient(135deg,var(--s2),var(--surface));
border:1px solid var(--border);border-radius:10px;
}
.comp-month-main-vals{display:flex;align-items:flex-end;gap:10px;flex:1;min-width:0}
.comp-yr-prev{font-size:18px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}
.comp-yr-arrow{font-size:14px;color:var(--muted)}
.comp-yr-cur{font-size:26px;font-weight:800;letter-spacing:-.6px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:.95}
.comp-yr-pending{font-size:13px;color:var(--muted);font-weight:500;font-family:var(--mono)}
.comp-month-main-meta{font-size:9px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;text-align:right;line-height:1.4}
.comp-delta-chip{
display:inline-flex;align-items:center;gap:4px;
font-size:11px;font-weight:700;font-family:var(--mono);
padding:4px 9px;border-radius:11px;letter-spacing:-.1px;
}
.comp-delta-chip.up{background:#dcfce7;color:#166534;border:1px solid #86efac}
.comp-delta-chip.dn{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.comp-delta-chip.zero{background:var(--s2);color:var(--muted);border:1px solid var(--border)}
.comp-delta-chip.pending{background:var(--s2);color:var(--muted);border:1px dashed var(--border2);font-weight:500}
.comp-submetrics{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:2px}
.comp-sub{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:6px 10px;background:var(--s2);border-radius:7px;border:1px solid var(--border);
}
.comp-sub-l{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;font-family:var(--mono)}
.comp-sub-r{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.comp-sub-prev{color:var(--muted);font-size:11px}
.comp-sub-cur{color:var(--ink)}
.comp-sub-delta{font-size:10px;font-weight:700;font-family:var(--mono)}
.comp-sub-delta.up{color:#16a34a}
.comp-sub-delta.dn{color:#dc2626}
.comp-sub-delta.zero{color:var(--muted)}
/* ─── COMPARATIVA · vista anual ─── */
.comp-yearly-hero{
background:linear-gradient(135deg,#ecfdf5 0%,#eff6ff 100%);
border:1px solid var(--border);border-radius:12px;
padding:18px 22px;margin-bottom:14px;
}
.comp-yearly-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-family:var(--mono);margin-bottom:4px}
.comp-yearly-title{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--ink)}
.comp-yearly-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.comp-yearly-card{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:14px 16px;display:flex;flex-direction:column;gap:10px;
transition:border-color .15s ease, box-shadow .15s ease;
}
.comp-yearly-card:hover{border-color:var(--border2);box-shadow:0 4px 14px rgba(0,0,0,.05)}
.comp-yc-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-family:var(--mono)}
.comp-yc-main{display:flex;align-items:baseline;gap:8px}
.comp-yc-cur{font-size:28px;font-weight:800;letter-spacing:-.7px;color:var(--ink);font-variant-numeric:tabular-nums}
.comp-yc-prev{font-size:12px;color:var(--muted);font-family:var(--mono)}
.comp-yc-delta-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.comp-yc-delta-row .comp-delta-chip{font-size:10px}
/* ─── COMPARATIVA · 3 anos (cards mensais) ─── */
.comp3-main{
display:flex;flex-direction:column;gap:6px;padding:12px 14px;
background:linear-gradient(135deg,var(--s2),var(--surface));
border:1px solid var(--border);border-radius:10px;
}
.comp3-main-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-family:var(--mono)}
.comp3-main-vals{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.comp3-main-yr{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:0;text-align:center}
.comp3-main-yr.is-current .comp3-main-num{color:var(--ink);font-weight:800}
.comp3-main-num{font-size:22px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.comp3-main-num.muted{color:var(--muted2);font-weight:600;font-size:18px}
.comp3-rows{display:flex;flex-direction:column;gap:6px}
.comp3-row{
display:flex;flex-direction:column;gap:4px;
padding:8px 10px;background:var(--s2);border-radius:8px;border:1px solid var(--border);
}
.comp3-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-family:var(--mono)}
.comp3-vals{display:flex;align-items:center;justify-content:space-between;gap:4px}
.comp3-yr{display:flex;flex-direction:column;align-items:center;gap:1px;flex:1;min-width:0;text-align:center}
.comp3-yr-y{font-size:8px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px}
.comp3-yr-v{font-size:12px;font-weight:600;color:var(--muted2);font-variant-numeric:tabular-nums;line-height:1.1}
.comp3-yr.is-current .comp3-yr-v{color:var(--ink);font-weight:700;font-size:13px}
.comp3-arrow{color:var(--border2);font-size:11px;flex-shrink:0}
.comp-mini-delta{
display:inline-block;font-size:9px;font-weight:700;font-family:var(--mono);
padding:2px 6px;border-radius:4px;line-height:1.3;letter-spacing:.3px;
}
.comp-mini-delta.up{background:#dcfce7;color:#166534}
.comp-mini-delta.dn{background:#fee2e2;color:#991b1b}
.comp-mini-delta.zero{background:var(--s3);color:var(--muted)}
/* ─── COMPARATIVA · cards mensais (2 colunas: YoY + MoM) ─── */
.comp2-main-block{
display:flex;flex-direction:column;gap:8px;padding:14px 14px 12px;
background:linear-gradient(135deg,var(--s2),var(--surface));
border:1px solid var(--border);border-radius:10px;
}
.comp2-main-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-family:var(--mono)}
.comp2-main-num{font-size:32px;font-weight:800;letter-spacing:-.7px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.comp2-main-deltas{display:flex;flex-direction:column;gap:6px}
.comp2-rows{display:flex;flex-direction:column;gap:6px}
.comp2-row{
display:flex;flex-direction:column;gap:6px;
padding:10px 12px;background:var(--s2);border-radius:8px;border:1px solid var(--border);
}
.comp2-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-family:var(--mono)}
.comp2-main{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.comp2-cur{font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;flex-shrink:0}
.comp2-deltas{display:flex;flex-direction:column;gap:4px;align-items:flex-end;flex:1;min-width:140px}
.comp2-cmp{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.comp2-cmp-base{font-size:10px;color:var(--muted);font-family:var(--mono);font-variant-numeric:tabular-nums}
.comp2-main-deltas .comp2-cmp{justify-content:flex-start}
/* ─── COMPARATIVA · 3 anos (cards anuais) ─── */
.comp3-yearly-vals{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:nowrap}
.comp3-yearly-yr{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:0;text-align:center}
.comp3-yearly-yr.is-current .comp3-yearly-v.big{font-size:24px;font-weight:800;color:var(--ink)}
.comp3-yearly-y{font-size:9px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px}
.comp3-yearly-v{font-size:14px;font-weight:600;color:var(--muted2);font-variant-numeric:tabular-nums}
.comp3-yearly-v.big{font-size:24px;color:var(--ink)}
.comp3-yearly-step{display:flex;justify-content:center;flex-shrink:0}
.comp3-yearly-step .comp-delta-chip{font-size:9px;padding:2px 6px}
.comp-mom-row{
display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
padding:8px 10px;margin-top:4px;
background:var(--s2);border:1px dashed var(--border);border-radius:8px;
}
.comp-mom-lbl{
font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
color:var(--muted);font-family:var(--mono);
}
.comp-mom-vals{
font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;font-family:var(--mono);
}
.comp-mom-arrow{color:var(--border2);font-size:10px;margin:0 2px}
.comp-mom-row .comp-delta-chip{font-size:10px}
.comp-mom-row.is-pending{opacity:.6}
/* ─── FATURAS · árvore de pastas estilo file explorer ─── */
.fat-tree{display:flex;flex-direction:column;gap:6px;font-family:var(--font)}
.fat-year{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.fat-folder{
display:flex;align-items:center;gap:8px;
padding:11px 14px;cursor:pointer;user-select:none;
transition:background .12s ease;
}
.fat-folder:hover{background:var(--s2)}
.fat-folder-year{background:linear-gradient(135deg,var(--s2),var(--surface));border-bottom:1px solid var(--border)}
.fat-folder-year .fat-name{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.fat-folder-month{padding:8px 14px 8px 32px;border-bottom:1px solid var(--border)}
.fat-folder-month:last-child{border-bottom:none}
.fat-folder-month .fat-name{font-size:13px;font-weight:500;color:var(--ink)}
.fat-chev{font-size:10px;color:var(--muted);width:10px;text-align:center;flex-shrink:0}
.fat-icon{font-size:16px;flex-shrink:0}
.fat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fat-count{font-size:10px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}
.fat-files{display:flex;flex-direction:column;padding:0 14px 6px 52px;background:var(--s2)}
.fat-file{
display:flex;align-items:center;gap:10px;
padding:8px 10px;border-bottom:1px solid var(--border);
background:var(--surface);
}
.fat-file.is-selected{background:var(--accent-bg)}
.fat-checkbox{
width:15px;height:15px;cursor:pointer;accent-color:var(--accent);flex-shrink:0;
}
.fat-bulk-bar{
display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:12px;
background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:10px;
}
.fat-bulk-count{
font-size:12.5px;font-weight:600;color:var(--accent);flex:1;
}
.fat-file:first-child{border-top-left-radius:6px;border-top-right-radius:6px}
.fat-file:last-child{border-bottom:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.fat-file .fat-name{font-size:12px;color:var(--ink);font-weight:500;font-family:var(--mono)}
.fat-meta{font-size:10px;color:var(--muted);font-family:var(--mono);flex-shrink:0;white-space:nowrap}
.fat-actions{display:flex;gap:4px;flex-shrink:0}
.fat-btn{
display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:5px;
background:var(--s2);border:1px solid var(--border);color:var(--muted);
text-decoration:none;cursor:pointer;font-size:13px;
transition:all .12s ease;
}
.fat-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.fat-btn-danger:hover{background:var(--red);border-color:var(--red)}
.fat-empty{padding:10px 12px;font-size:11px;color:var(--muted);font-style:italic;background:var(--surface);border-radius:6px;text-align:center}
.comp-yc-note{
font-size:10px;color:var(--amber);background:var(--amber-bg);
border:1px solid var(--amber-border);border-radius:6px;
padding:4px 8px;margin-top:6px;text-align:center;font-family:var(--mono);
}
/* Banner aviso integrações pendentes */
.comp-warn-banner{
display:flex;align-items:flex-start;gap:10px;
padding:10px 14px;border-radius:8px;
background:linear-gradient(135deg,#fef3c7,#fed7aa);
border:1px solid #fbbf24;color:#78350f;
font-size:12px;margin-bottom:12px;
}
.comp-warn-banner-ico{font-size:18px;flex-shrink:0;line-height:1.2}
.comp-warn-banner-title{font-weight:700;margin-bottom:2px}
.comp-warn-banner-desc{font-size:11px;opacity:.85;line-height:1.4}
/* —— NOTIFICATION BELL —— */
.bell-wrap{position:relative;cursor:pointer}
.bell-btn{
width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
background:var(--surface);display:flex;align-items:center;justify-content:center;
font-size:16px;cursor:pointer;transition:all .15s;position:relative;
}
.bell-btn:hover{background:var(--s2);border-color:var(--border2)}
.bell-dot{
position:absolute;top:6px;right:6px;width:8px;height:8px;
background:var(--red);border-radius:50%;border:2px solid var(--surface);
animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.bell-dropdown{
position:absolute;top:calc(100% + 8px);right:0;width:320px;
background:var(--surface);border:1px solid var(--border);border-radius:12px;
box-shadow:0 8px 30px rgba(0,0,0,.12);z-index:100;
display:none;animation:su .15s ease;
}
.bell-dropdown.open{display:block}
.bell-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border)}
.bell-title{font-size:13px;font-weight:600}
.bell-list{max-height:340px;overflow-y:auto}
.bell-item{
display:flex;flex-direction:column;gap:8px;padding:11px 16px;
border-bottom:1px solid var(--border);transition:background .12s;
}
.bell-item:last-child{border-bottom:none}
.bell-item:hover{background:var(--s2)}
.bell-item.unread{background:#fffef8}
.bell-row{display:flex;align-items:flex-start;gap:10px}
.bell-row .bell-body{cursor:pointer}
.bell-ico{font-size:18px;flex-shrink:0;margin-top:1px}
.bell-body{flex:1;min-width:0}
.bell-t{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:2px}
.bell-d{font-size:11px;color:var(--muted2);line-height:1.4}
.bell-time{font-size:10px;color:var(--muted);margin-top:3px;font-family:var(--mono)}
.bell-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:5px}
.bell-actions{display:flex;gap:6px;justify-content:flex-end;padding-left:28px}
.bell-mini-btn{
background:var(--surface);border:1px solid var(--border);border-radius:6px;
padding:3px 9px;font-size:10px;font-weight:600;cursor:pointer;
font-family:var(--mono);color:var(--ink);transition:all .12s;letter-spacing:.2px;
}
.bell-mini-btn:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.bell-mini-btn.bell-mini-seen{color:var(--muted)}
.bell-mini-btn.bell-mini-seen:hover{background:#f0fdf4;border-color:var(--green);color:var(--green)}
.bell-mini-btn.bell-mini-done{color:var(--green);border-color:#bbf7d0}
.bell-mini-btn.bell-mini-done:hover{background:var(--green);border-color:var(--green);color:#fff}
.bell-mini-btn.bell-mini-ongoing{color:var(--blue);border-color:#bfdbfe}
.bell-mini-btn.bell-mini-ongoing:hover{background:var(--blue);border-color:var(--blue);color:#fff}
/* Botão "Marcados como lido" no header do sino */
.bell-tab-btn{
background:transparent;border:1px solid var(--border);border-radius:6px;
padding:3px 9px;font-size:10px;font-weight:600;cursor:pointer;
font-family:var(--mono);color:var(--muted);transition:all .12s;letter-spacing:.2px;
}
.bell-tab-btn:hover{background:var(--s2);color:var(--ink);border-color:var(--border2)}
.bell-tab-btn.is-active-view{background:var(--s2);color:var(--ink);border-color:var(--ink)}
/* —— Floating Action Button · Google Chat —— */
.gchat-fab{
position:fixed;bottom:24px;right:24px;z-index:200;
display:inline-flex;align-items:center;gap:8px;
padding:13px 20px;border-radius:30px;border:0;cursor:pointer;
background:linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
color:#fff;font-size:13px;font-weight:600;font-family:var(--font);
box-shadow:0 4px 14px rgba(26,115,232,.35), 0 2px 4px rgba(0,0,0,.08);
transition:all .18s cubic-bezier(.4,0,.2,1);
}
.gchat-fab:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(26,115,232,.45), 0 3px 6px rgba(0,0,0,.12);
}
.gchat-fab:active{transform:translateY(0)}
.gchat-fab-ico{font-size:16px;line-height:1}
.gchat-fab-lbl{line-height:1}
.gchat-fab-badge{
position:absolute;top:-4px;right:-4px;
background:var(--accent);color:#fff;font-size:10px;font-weight:700;
min-width:18px;height:18px;padding:0 5px;border-radius:9px;
display:inline-flex;align-items:center;justify-content:center;
border:2px solid #fff;font-family:var(--mono);
box-shadow:0 2px 6px rgba(234,70,42,.35);
animation:gchatBadgePulse 1.4s ease-in-out infinite;
}
@keyframes gchatBadgePulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.08)}
}
/* No mobile, só o ícone (compactar) */
@media (max-width: 720px){
.gchat-fab{padding:13px;border-radius:50%;width:52px;height:52px;justify-content:center}
.gchat-fab-lbl{display:none}
}
/* —— Drawer Chat (slide from right) —— */
.gchat-drawer{
position:fixed;right:0;top:0;bottom:0;width:780px;max-width:96vw;
background:var(--surface);border-left:1px solid var(--border);
z-index:180;display:flex;flex-direction:column;
transform:translateX(105%);
transition:transform .3s cubic-bezier(.4,0,.2,1);
box-shadow:-12px 0 40px rgba(0,0,0,.12);
}
/* Google Chat · layout 2 painéis (lista de espaços + conversa) */
.gchat-2pane{ display:flex; height:100%; min-height:0; }
.gchat-pane-left{ width:280px; flex-shrink:0; border-right:1px solid var(--border); overflow-y:auto; background:var(--s2); }
.gchat-pane-right{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.gchat-2pane .gchat-conv-h{ border-bottom:1px solid var(--border); }
.gchat-2pane .gchat-conv-back{ display:none; }
.gchat-2pane .gchat-space-row.is-active{ background:var(--surface); box-shadow:inset 3px 0 0 var(--accent); }
.gchat-pane-right .gchat-state{ margin:auto; text-align:center; }
.gchat-drawer.open{transform:translateX(0)}
.gchat-drawer-h{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 18px;border-bottom:1px solid var(--border);background:var(--s2);
}
.gchat-drawer-title{
display:flex;align-items:center;gap:8px;
font-size:14px;font-weight:600;color:var(--ink);
}
.gchat-drawer-close{
width:30px;height:30px;border-radius:7px;border:0;background:transparent;cursor:pointer;
font-size:18px;color:var(--muted);transition:all .12s;
}
.gchat-drawer-close:hover{background:var(--surface);color:var(--ink)}
.gchat-drawer-body{flex:1;overflow-y:auto;display:flex;flex-direction:column}
/* Placeholder states no drawer */
.gchat-state{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:32px 24px;text-align:center;gap:10px;
}
.gchat-state-emoji{font-size:42px;opacity:.45;margin-bottom:6px}
.gchat-state-t{font-size:14px;font-weight:700;color:var(--ink)}
.gchat-state-d{font-size:12px;color:var(--muted2);line-height:1.55;max-width:300px}
.gchat-state-d code{
background:var(--s2);padding:1px 6px;border-radius:4px;
font-family:var(--mono);font-size:11px;color:var(--accent);
}
/* Lista de espaços */
.gchat-spaces{display:flex;flex-direction:column}
.gchat-side-h{
font-size:9px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;
font-family:var(--mono);padding:14px 16px 6px;background:var(--s2);
border-bottom:1px solid var(--border);
}
.gchat-space-ico.is-dm{background:var(--accent-bg);color:var(--accent);font-size:11px}
.gchat-space-ico.has-photo{background:transparent;padding:0;overflow:hidden}
.gchat-space-ico.has-photo img{width:100%;height:100%;object-fit:cover}
/* Config modal preview */
.gchat-cfg-photo-row{display:flex;align-items:center;gap:14px}
.gchat-cfg-photo-preview{
width:64px;height:64px;border-radius:50%;flex-shrink:0;overflow:hidden;
background:var(--s2);display:flex;align-items:center;justify-content:center;
border:1px solid var(--border);color:var(--muted2);font-size:18px;font-weight:700;
}
.gchat-cfg-photo-preview.has-photo{background:transparent}
.gchat-cfg-photo-preview img{width:100%;height:100%;object-fit:cover}
.gchat-cfg-photo-actions{display:flex;flex-direction:column;gap:6px;flex:1}
.gchat-cfg-photo-actions .btn{font-size:11px;padding:5px 10px;text-align:left}
.gchat-date-sep{
text-align:center;font-size:10px;color:var(--muted);font-family:var(--mono);
text-transform:uppercase;letter-spacing:.5px;margin:6px 0;
position:relative;
}
.gchat-date-sep::before, .gchat-date-sep::after{
content:'';position:absolute;top:50%;width:30%;height:1px;background:var(--border);
}
.gchat-date-sep::before{left:0}
.gchat-date-sep::after{right:0}
.gchat-msg-bubble a{color:inherit;text-decoration:underline}
.gchat-msg.is-self .gchat-msg-bubble a{color:#fff}
.gchat-space-row{
display:flex;align-items:center;gap:10px;padding:11px 16px;
border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;
position:relative;
}
.gchat-space-row:hover{background:var(--s2)}
.gchat-space-row.has-unread .gchat-space-name{color:var(--accent);font-weight:700}
.gchat-space-badge{
background:var(--accent);color:#fff;font-size:10px;font-weight:700;
min-width:18px;height:18px;padding:0 6px;border-radius:9px;
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--mono);flex-shrink:0;
box-shadow:0 0 0 2px var(--surface);
}
.gchat-space-ico{
width:36px;height:36px;border-radius:50%;background:var(--s2);
display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--muted2);flex-shrink:0;
}
.gchat-space-body{flex:1;min-width:0}
.gchat-space-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gchat-space-preview{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.gchat-space-time{font-size:10px;color:var(--muted);font-family:var(--mono);flex-shrink:0}
.gchat-space-cnt{
font-size:10px;font-weight:700;background:var(--accent);color:#fff;
padding:1px 6px;border-radius:8px;font-family:var(--mono);flex-shrink:0;
}
.gchat-space-fav, .gchat-space-rename{
background:transparent;border:0;cursor:pointer;color:var(--border2);
font-size:14px;line-height:1;padding:4px;flex-shrink:0;
opacity:0;transition:all .12s;
}
.gchat-space-row:hover .gchat-space-fav,
.gchat-space-row:hover .gchat-space-rename{opacity:1}
.gchat-space-fav.is-on{color:var(--amber);opacity:1}
.gchat-space-fav:hover{color:var(--amber)}
.gchat-space-rename{font-size:12px}
.gchat-space-rename:hover{color:var(--accent)}
/* Conversa aberta */
.gchat-conv-h{
display:flex;align-items:center;gap:8px;padding:10px 14px;
border-bottom:1px solid var(--border);background:var(--s2);
}
.gchat-conv-back{
width:28px;height:28px;border-radius:6px;border:0;background:transparent;cursor:pointer;
font-size:14px;color:var(--muted2);
}
.gchat-conv-back:hover{background:var(--surface);color:var(--ink)}
.gchat-conv-name{font-size:13px;font-weight:600;color:var(--ink)}
.gchat-conv-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.gchat-msg{display:flex;gap:8px;max-width:85%;align-items:flex-start}
.gchat-msg.is-self{margin-left:auto;flex-direction:row-reverse}
.gchat-msg-avatar{
width:28px;height:28px;border-radius:50%;background:var(--s2);flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted2);
overflow:hidden;
}
.gchat-msg-avatar.has-photo{background:transparent}
.gchat-msg-avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.gchat-msg-content{min-width:0;display:flex;flex-direction:column;align-items:flex-start;max-width:100%}
.gchat-msg.is-self .gchat-msg-content{align-items:flex-end}
.gchat-msg-meta{font-size:10px;color:var(--muted);font-family:var(--mono);margin-bottom:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gchat-rename-sender{
background:transparent;border:1px dashed var(--border2);color:var(--accent);
font-size:9px;padding:1px 6px;border-radius:8px;cursor:pointer;
font-family:var(--mono);letter-spacing:.3px;
}
.gchat-rename-sender:hover{border-color:var(--accent);background:var(--accent-bg)}
.gchat-pending{font-size:10px;opacity:.7}
.gchat-msg-bubble{
background:var(--s2);padding:8px 12px;border-radius:12px;font-size:13px;color:var(--ink);
line-height:1.45;word-wrap:break-word;white-space:pre-wrap;
width:fit-content;max-width:100%;min-width:0;
}
.gchat-msg.is-self .gchat-msg-bubble{background:var(--accent);color:#fff}
.gchat-msg-reactions{
display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;
}
.gchat-msg.is-self .gchat-msg-reactions{justify-content:flex-end}
.gchat-reaction{
display:inline-flex;align-items:center;gap:3px;
padding:2px 7px;border-radius:10px;
background:var(--surface);border:1px solid var(--border);
font-size:11px;line-height:1;
cursor:pointer;transition:all .12s;
font-family:inherit;
}
.gchat-reaction:hover{
background:var(--accent-bg);border-color:var(--accent-border);
transform:translateY(-1px);
}
.gchat-reaction-emoji{font-size:12px}
.gchat-reaction-count{
color:var(--muted);font-family:var(--mono);font-weight:600;font-size:10px;
}
/* Acções por mensagem — aparecem em hover */
.gchat-msg-bubble-wrap{
display:flex;align-items:flex-end;gap:6px;position:relative;
}
.gchat-msg.is-self .gchat-msg-bubble-wrap{flex-direction:row-reverse}
.gchat-msg-bubble-wrap{position:relative}
.gchat-msg-actions{
position:absolute;top:50%;transform:translateY(-50%);
display:flex;gap:3px;
opacity:0;transition:opacity .12s;
flex-shrink:0;pointer-events:none;
}
.gchat-msg:not(.is-self) .gchat-msg-actions{left:calc(100% + 6px)}
.gchat-msg.is-self .gchat-msg-actions{right:calc(100% + 6px)}
.gchat-msg:hover .gchat-msg-actions{opacity:1;pointer-events:auto}
.gchat-msg-action{
background:var(--surface);border:1px solid var(--border);
width:24px;height:24px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--muted);cursor:pointer;
padding:0;flex-shrink:0;
transition:background .12s, color .12s, border-color .12s;
}
.gchat-msg-action:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}
.gchat-msg-action.gchat-delete-btn:hover{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}
.gchat-react-btn{}
.gchat-edited{font-size:10px;color:var(--muted);font-style:italic;opacity:.75}
/* Mention badge (texto de mensagem) */
.gchat-mention{
color:var(--accent);font-weight:600;
background:var(--accent-bg);padding:1px 5px;border-radius:6px;
}
.gchat-msg.is-self .gchat-mention{
background:rgba(255,255,255,0.22);color:#fff;
}
/* Reply bar acima do input */
.gchat-reply-bar{
display:flex;align-items:center;gap:10px;
margin:0 14px 6px 14px;padding:8px 12px;
background:var(--accent-bg);border:1px solid var(--accent-border);
border-radius:8px;font-size:12px;
animation:gchatPickerIn .14s ease;
}
.grb-l{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.grb-ico{color:var(--accent);font-size:14px;flex-shrink:0}
.grb-body{flex:1;min-width:0}
.grb-to{font-size:10px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono)}
.grb-preview{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grb-close{
background:transparent;border:0;cursor:pointer;font-size:18px;color:var(--muted);
width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.grb-close:hover{background:rgba(0,0,0,.06);color:var(--ink)}
/* Edit inline */
.gchat-edit-box{
flex:1;background:var(--surface);border:1px solid var(--accent-border);
border-radius:10px;padding:8px;
}
.gchat-edit-area{
width:100%;border:0;background:transparent;font-family:inherit;font-size:13px;
color:var(--ink);outline:none;resize:vertical;min-height:32px;
}
.gchat-edit-actions{
display:flex;gap:6px;justify-content:flex-end;margin-top:6px;
}
.gchat-edit-cancel, .gchat-edit-save{
font-size:11px;padding:5px 12px;border-radius:6px;cursor:pointer;
font-family:inherit;
}
.gchat-edit-cancel{background:transparent;border:1px solid var(--border);color:var(--muted)}
.gchat-edit-cancel:hover{background:var(--s2);color:var(--ink)}
.gchat-edit-save{background:var(--accent);border:1px solid var(--accent);color:#fff}
.gchat-edit-save:hover{background:var(--accent-hover)}
/* Mention autocomplete popover */
.gchat-mention-pop{
position:fixed;z-index:10001;
background:#fff;border:1px solid var(--border);border-radius:10px;
box-shadow:0 6px 24px rgba(0,0,0,.14);
padding:4px;display:flex;flex-direction:column;
max-height:240px;overflow-y:auto;
}
.gchat-mention-opt{
display:flex;align-items:center;gap:8px;
padding:6px 8px;border:0;background:transparent;cursor:pointer;
border-radius:6px;text-align:left;font-family:inherit;
}
.gchat-mention-opt:hover, .gchat-mention-opt.is-sel{background:var(--accent-bg)}
.gchat-mention-opt.is-sel .gmp-name{color:var(--accent);font-weight:600}
.gmp-av{
width:24px;height:24px;border-radius:50%;background:var(--s2);
display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:700;color:var(--muted2);
overflow:hidden;flex-shrink:0;
}
.gmp-av.has-photo{background:transparent}
.gmp-av img{width:100%;height:100%;object-fit:cover}
.gmp-name{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Thread reply indicator no metadata da mensagem */
.gchat-msg-thread-info{
font-size:10px;color:var(--muted);font-family:var(--mono);
margin-top:2px;opacity:.6;
}
/* Markdown inline in messages */
.gchat-msg-bubble code{
background:rgba(0,0,0,.07);padding:1px 5px;border-radius:4px;
font-family:var(--mono);font-size:11.5px;
}
.gchat-msg.is-self .gchat-msg-bubble code{background:rgba(255,255,255,.2)}
/* Emoji picker popover */
.gchat-emoji-picker{
position:fixed;z-index:10000;
background:#fff;border:1px solid var(--border);border-radius:10px;
padding:6px;display:flex;gap:2px;flex-wrap:wrap;
box-shadow:0 6px 24px rgba(0,0,0,.14);
width:232px;
animation:gchatPickerIn .14s ease;
}
@keyframes gchatPickerIn{
from{opacity:0;transform:translateY(4px) scale(.98)}
to{opacity:1;transform:none}
}
.gchat-emoji-opt{
width:32px;height:32px;border:0;background:transparent;cursor:pointer;
font-size:18px;border-radius:6px;
display:flex;align-items:center;justify-content:center;
padding:0;
}
.gchat-emoji-opt:hover{background:var(--s2)}
.gchat-conv-input{
display:flex;align-items:flex-end;gap:8px;padding:10px 14px;
border-top:1px solid var(--border);background:var(--surface);
}
.gchat-conv-textarea{
flex:1;border:1px solid var(--border);border-radius:8px;padding:8px 10px;
font-size:13px;color:var(--ink);font-family:var(--font);resize:none;min-height:38px;max-height:120px;line-height:1.4;
}
.gchat-conv-textarea:focus{outline:none;border-color:var(--accent)}
.gchat-send-btn{
width:38px;height:38px;border-radius:8px;border:0;background:var(--accent);color:#fff;
cursor:pointer;font-size:16px;flex-shrink:0;
}
.gchat-send-btn:hover{background:var(--accent-hover)}
.gchat-send-btn:disabled{opacity:.5;cursor:not-allowed}
.gchat-attach-btn{
width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:var(--s2);
color:var(--muted2);cursor:pointer;font-size:16px;flex-shrink:0;
}
.gchat-attach-btn:hover{background:var(--s3);color:var(--ink)}
/* Pending attachments — preview pré-envio */
.gchat-pending-atts{
display:flex;flex-wrap:wrap;gap:6px;
padding:8px 14px;border-top:1px dashed var(--border);background:var(--s2);
}
.gchat-pending-att{
display:inline-flex;align-items:center;gap:5px;
padding:4px 8px;background:var(--surface);border:1px solid var(--border);
border-radius:6px;font-size:11.5px;color:var(--text);
}
.gchat-pending-ico{font-size:13px}
.gchat-pending-name{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gchat-pending-x{
background:transparent;border:0;cursor:pointer;color:var(--muted);
font-size:14px;padding:0 2px;line-height:1;
}
.gchat-pending-x:hover{color:var(--red)}
/* Drag-over visual hint */
.gchat-conv-messages.is-drag-over{background:rgba(234,70,42,0.06);outline:2px dashed var(--accent);outline-offset:-8px}
/* Attachments dentro do bubble */
.gchat-msg-atts{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.gchat-att-img{display:block;max-width:240px;max-height:240px;border-radius:8px;overflow:hidden}
.gchat-att-img img{display:block;max-width:100%;max-height:240px;width:auto;height:auto;border-radius:8px}
.gchat-att-chip{
display:inline-flex;align-items:center;gap:8px;
padding:6px 10px;background:rgba(0,0,0,0.05);border-radius:8px;
text-decoration:none;color:var(--text);font-size:12px;
border:1px solid transparent;transition:background .12s;
max-width:240px;
}
.gchat-att-chip:hover{background:rgba(0,0,0,0.08)}
.gchat-att-ico{font-size:14px;flex-shrink:0}
.gchat-att-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gchat-att-ext{color:var(--muted);font-size:11px;flex-shrink:0}
.gchat-msg.is-self .gchat-att-chip{background:rgba(255,255,255,0.18);color:#fff}
.gchat-msg.is-self .gchat-att-ext{color:rgba(255,255,255,0.7)}
[data-theme="dark"] .gchat-att-chip{background:rgba(255,255,255,0.07)}
[data-theme="dark"] .gchat-att-chip:hover{background:rgba(255,255,255,0.12)}
/* Re-auth modal */
.gchat-scope-overlay{
position:fixed;inset:0;background:rgba(0,0,0,0.5);
display:flex;align-items:center;justify-content:center;
z-index:10000;padding:20px;
}
.gchat-scope-modal{
background:var(--surface);border-radius:14px;
width:100%;max-width:520px;
box-shadow:0 20px 50px rgba(0,0,0,0.3);
overflow:hidden;
}
.gchat-scope-h{
display:flex;align-items:center;gap:10px;
padding:16px 20px;border-bottom:1px solid var(--border);background:var(--s2);
}
.gchat-scope-ico{font-size:22px}
.gchat-scope-t{flex:1;font-size:15px;font-weight:700;color:var(--ink)}
.gchat-scope-x{background:transparent;border:0;cursor:pointer;font-size:22px;color:var(--muted);padding:0 8px;border-radius:6px}
.gchat-scope-x:hover{background:var(--s3)}
.gchat-scope-body{padding:18px 22px;font-size:13.5px;line-height:1.55;color:var(--text)}
.gchat-scope-body p{margin:0 0 12px}
.gchat-scope-body ol{margin:0 0 12px;padding-left:22px}
.gchat-scope-body li{margin:6px 0}
.gchat-scope-body code{
font-family:var(--mono);font-size:11.5px;
background:var(--s2);padding:2px 6px;border-radius:4px;color:var(--accent);
display:inline-block;
}
.gchat-scope-note{font-size:12px;color:var(--muted)}
.gchat-scope-f{padding:14px 22px;border-top:1px solid var(--border);text-align:right}
/* —— TOPBAR · botões de navegação (Calendário, Email) —— */
.tb-nav-btn{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:8px;
border:1px solid var(--border);background:var(--surface);color:var(--muted2);
font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);
transition:all .14s;position:relative;
}
.tb-nav-btn:hover{background:var(--s2);border-color:var(--border2);color:var(--ink)}
.tb-nav-btn.is-active{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent);font-weight:600}
.tb-nav-ico{font-size:13px;line-height:1}
.tb-nav-lbl{line-height:1}
.tb-nav-badge{
background:var(--accent);color:#fff;font-size:9px;font-weight:700;
padding:1px 6px;border-radius:8px;letter-spacing:.3px;margin-left:2px;
}
/* —— AI CHAT —— */
.ai-chat-btn{
display:flex;align-items:center;gap:6px;padding:6px 13px;
border-radius:8px;border:1px solid var(--accent-border);
background:var(--accent-bg);color:var(--accent);font-size:12px;font-weight:600;
cursor:pointer;font-family:var(--font);transition:all .15s;
}
.ai-chat-btn:hover{background:#fde2d8;border-color:var(--accent)}
.ai-panel{
position:fixed;right:0;top:0;bottom:0;width:400px;
background:var(--surface);border-left:1px solid var(--border);
z-index:150;display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
box-shadow:-8px 0 30px rgba(0,0,0,.08);
}
.ai-panel.open{transform:translateX(0)}
.ai-panel-hdr{
padding:18px 20px 14px;border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;
}
.ai-panel-title{font-size:14px;font-weight:700}
.ai-panel-sub{font-size:11px;color:var(--muted);margin-top:1px}
.ai-close{font-size:20px;color:var(--muted);cursor:pointer;line-height:1;padding:2px 6px;border-radius:5px}
.ai-close:hover{background:var(--s2)}
.ai-context{
margin:12px 16px;padding:10px 12px;
background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:8px;
font-size:11px;color:var(--accent);
}
.ai-msgs{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.ai-msg{display:flex;gap:8px;align-items:flex-start}
.ai-msg.user{flex-direction:row-reverse}
.ai-avatar{
width:28px;height:28px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.ai-avatar.bot{background:var(--accent);color:#fff}
.ai-avatar.usr{background:var(--ink);color:#fff}
.ai-bubble{
max-width:78%;padding:9px 12px;border-radius:10px;font-size:12px;line-height:1.5;
}
.ai-msg.bot .ai-bubble{background:var(--s2);border:1px solid var(--border);color:var(--ink)}
.ai-msg.user .ai-bubble{background:var(--accent);color:#fff}
.ai-typing{display:flex;gap:4px;padding:4px 0}
.ai-dot{width:6px;height:6px;background:var(--muted);border-radius:50%;animation:bounce .8s ease-in-out infinite}
.ai-dot:nth-child(2){animation-delay:.15s}
.ai-dot:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
.ai-suggestions{padding:0 16px 10px;display:flex;flex-wrap:wrap;gap:5px}
.ai-sug{
padding:5px 10px;border:1px solid var(--border);border-radius:20px;
font-size:11px;color:var(--muted2);cursor:pointer;background:var(--s2);transition:all .12s;
}
.ai-sug:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.ai-input-zone{
padding:12px 16px;border-top:1px solid var(--border);
display:flex;gap:8px;align-items:flex-end;
}
.ai-textarea{
flex:1;border:1px solid var(--border);border-radius:8px;padding:9px 11px;
font-size:13px;font-family:var(--font);color:var(--text);background:var(--s2);
outline:none;resize:none;transition:border-color .15s;max-height:100px;
line-height:1.4;
}
.ai-textarea:focus{border-color:var(--accent)}
.ai-send{
width:36px;height:36px;background:var(--accent);border:none;border-radius:8px;
color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
flex-shrink:0;transition:background .15s;
}
.ai-send:hover{background:var(--accent-hover)}
.ai-overlay{position:fixed;inset:0;background:rgba(0,0,0,.15);z-index:149;display:none}
.ai-overlay.open{display:block}
/* —— AGENCY NOTES —— */
.notes-panel{
background:var(--surface);border:1px solid var(--amber-border);border-radius:12px;
padding:16px;margin-bottom:12px;
}
.notes-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.notes-title{font-size:12px;font-weight:600;color:var(--amber);display:flex;align-items:center;gap:6px}
.notes-badge{font-size:9px;background:var(--amber-bg);border:1px solid var(--amber-border);color:var(--amber);padding:2px 6px;border-radius:4px;font-family:var(--mono)}
.notes-list{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.note-item{
padding:9px 11px;background:var(--amber-bg);border-radius:7px;border:1px solid var(--amber-border);
}
.note-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.note-author{font-size:10px;font-weight:600;color:var(--amber)}
.note-time{font-size:10px;color:var(--muted);font-family:var(--mono)}
.note-text{font-size:12px;color:var(--muted2);line-height:1.4}
.note-add{display:flex;gap:7px;align-items:flex-end}
.note-textarea{
flex:1;border:1px solid var(--border);border-radius:7px;padding:8px 10px;
font-size:12px;font-family:var(--font);color:var(--text);background:var(--s2);
outline:none;resize:none;transition:border-color .15s;
}
.note-textarea:focus{border-color:var(--amber)}
/* —— CREATIVES WITH IMAGES —— */
.crit-img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.crit-img-card{
background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;
transition:box-shadow .15s,border-color .15s;cursor:pointer;
}
.crit-img-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);border-color:var(--border2)}
.crit-img-thumb{
width:100%;aspect-ratio:1/1;background:var(--s3);
display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.crit-img-thumb img{width:100%;height:100%;object-fit:cover}
.crit-img-thumb .placeholder{font-size:40px;opacity:.3}
.crit-score-badge{
position:absolute;top:8px;right:8px;
width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:700;backdrop-filter:blur(4px);
}
.crit-img-body{padding:11px 12px}
.crit-img-name{font-size:12px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crit-img-meta{font-size:10px;color:var(--muted);margin-bottom:9px;font-family:var(--mono)}
.crit-img-meta-row{
font-size:10.5px;color:var(--muted);
margin-bottom:2px;line-height:1.35;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.crit-img-meta-row:last-of-type{margin-bottom:9px}
.crit-img-meta-lbl{
display:inline-block;min-width:54px;
font-family:var(--mono);font-size:9px;
color:var(--muted);text-transform:uppercase;letter-spacing:.4px;
font-weight:600;
}
/* —— Score de campanha (badge usada em Meta + Google Ads tables) —— */
.camp-score{
display:inline-flex;align-items:center;justify-content:center;
min-width:30px;height:22px;padding:0 8px;
font-size:11px;font-weight:800;
border-radius:6px;font-family:var(--mono);
letter-spacing:.3px;
}
.camp-score.sc-aplus{background:#dcfce7;color:#15803d;border:1px solid #86efac}
.camp-score.sc-a {background:#ecfccb;color:#3f6212;border:1px solid #bef264}
.camp-score.sc-b {background:#fef3c7;color:#92400e;border:1px solid #fcd34d}
.camp-score.sc-c {background:#ffedd5;color:#9a3412;border:1px solid #fdba74}
.camp-score.sc-d {background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.camp-score.sc-na {background:var(--s2);color:var(--muted);border:1px solid var(--border)}
.crit-img-kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.crit-img-kpi{background:var(--s2);border-radius:5px;padding:5px 7px;text-align:center}
.crit-img-kpi strong{display:block;font-size:13px;font-weight:700;letter-spacing:-.3px}
.crit-img-kpi span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
/* ═══════════════════════════════════════════════════════════════════
PÁGINA CRIATIVOS · Galeria + filtros + top 3
═══════════════════════════════════════════════════════════════════ */
.crit-controls{
display:flex;align-items:center;justify-content:space-between;gap:12px;
flex-wrap:wrap;margin:14px 0 10px;
}
.crit-controls-right{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.crit-pills{
display:inline-flex;gap:4px;
background:#f5f5f7;border:1px solid var(--border);border-radius:10px;
padding:4px;
}
.crit-pill{
padding:6px 14px;font-size:12px;font-weight:600;
background:transparent;border:none;border-radius:7px;
color:var(--muted);cursor:pointer;
transition:background .15s, color .15s;
}
.crit-pill:hover{color:var(--ink)}
.crit-pill.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.crit-sort-wrap{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.crit-sort-lbl{font-family:var(--mono);text-transform:uppercase;font-size:10px;letter-spacing:.3px;font-weight:600}
.crit-sort-wrap .fsel{min-width:110px;padding:6px 10px;font-size:12px}
.crit-toggle{
display:inline-flex;gap:2px;
background:#f5f5f7;border:1px solid var(--border);border-radius:8px;
padding:3px;
}
.crit-toggle-btn{
padding:5px 10px;font-size:11px;font-weight:600;
background:transparent;border:none;border-radius:6px;
color:var(--muted);cursor:pointer;
}
.crit-toggle-btn.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.crit-section-hdr{
display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
margin:18px 0 8px;
}
.crit-section-title{font-size:14px;font-weight:700;color:var(--ink)}
.crit-section-sub{font-size:11px;color:var(--muted);margin-top:1px}
.crit-section-meta{font-size:10px;color:var(--muted);font-family:var(--mono)}
/* ── Top 3: cards grandes em destaque ── */
.crit-top3-grid{
display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px;
margin-bottom:8px;
}
/* ── Galeria principal: 5 previews por linha, cards mais pequenos/compactos ── */
.crit-gallery-grid{
display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:9px;
}
/* Cards da galeria (não-destaque) mais compactos: corpo e KPIs reduzidos. */
.crit-gallery-grid .crit-card-body{padding:8px 9px;gap:4px}
.crit-gallery-grid .crit-card-name{font-size:11.5px}
.crit-gallery-grid .crit-card-kpis{gap:3px;margin-top:4px}
.crit-gallery-grid .crit-card-kpi{padding:4px 2px}
.crit-gallery-grid .crit-card-kpi strong{font-size:11px}
.crit-gallery-grid .crit-card-kpi span{font-size:8px}
@media (max-width:1280px){ .crit-gallery-grid{grid-template-columns:repeat(4, 1fr)} }
@media (max-width:980px){ .crit-gallery-grid{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:680px){ .crit-gallery-grid{grid-template-columns:repeat(2, 1fr)} }
/* ── Card de criativo ── */
.crit-card{
background:#fff;border:1px solid var(--border);border-radius:12px;
overflow:hidden;display:flex;flex-direction:column;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.crit-card:hover{
transform:translateY(-2px);
box-shadow:0 8px 22px rgba(0,0,0,.08);
border-color:var(--border2, #d4d4d8);
}
.crit-card.is-highlight{
border-width:2px;
box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.crit-card.is-highlight.sc-aplus{border-color:#86efac}
.crit-card.is-highlight.sc-a {border-color:#bef264}
.crit-card.is-highlight.sc-b {border-color:#fcd34d}
.crit-card.is-highlight.sc-c {border-color:#fdba74}
.crit-card.is-highlight.sc-d {border-color:#fca5a5}
.crit-card-thumb{
position:relative;width:100%;aspect-ratio:1/1;
background:var(--s3, #f4f4f5);overflow:hidden;
}
.crit-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.crit-thumb-fallback{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:48px;opacity:.55;
}
.crit-score-bdg{
position:absolute;top:8px;right:8px;
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:-.3px;
backdrop-filter:blur(6px);
box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.crit-card.is-highlight .crit-score-bdg{
width:38px;height:38px;font-size:12px;
}
.crit-score-bdg.sc-aplus{background:rgba(220,252,231,.92);color:#15803d;border:1px solid #86efac}
.crit-score-bdg.sc-a {background:rgba(236,252,203,.92);color:#3f6212;border:1px solid #bef264}
.crit-score-bdg.sc-b {background:rgba(254,243,199,.92);color:#92400e;border:1px solid #fcd34d}
.crit-score-bdg.sc-c {background:rgba(255,237,213,.92);color:#9a3412;border:1px solid #fdba74}
.crit-score-bdg.sc-d {background:rgba(254,226,226,.92);color:#991b1b;border:1px solid #fca5a5}
.crit-score-bdg.sc-na {background:rgba(244,244,245,.92);color:#71717a;border:1px solid #e4e4e7}
.crit-rank-badge{
position:absolute;top:8px;left:8px;
background:rgba(15,15,15,.85);color:#fff;
font-family:var(--mono);font-size:11px;font-weight:700;
padding:3px 9px;border-radius:6px;letter-spacing:.3px;
backdrop-filter:blur(6px);
}
.crit-status-badge{
position:absolute;bottom:8px;left:8px;
background:rgba(15,15,15,.7);color:#fff;
font-family:var(--mono);font-size:9px;font-weight:700;
padding:2px 6px;border-radius:4px;letter-spacing:.4px;
backdrop-filter:blur(6px);
}
.crit-status-badge.is-paused{background:rgba(180,83,9,.85)}
.crit-card-body{padding:11px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.crit-card.is-highlight .crit-card-body{padding:14px 14px}
.crit-card-name{
font-size:12.5px;font-weight:600;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
line-height:1.3;
}
.crit-card.is-highlight .crit-card-name{font-size:14px}
.crit-card-meta{
display:flex;align-items:baseline;gap:6px;font-size:11px;
white-space:nowrap;overflow:hidden;
}
.crit-card-meta-lbl{
font-family:var(--mono);font-size:9px;
color:var(--muted);text-transform:uppercase;letter-spacing:.3px;
font-weight:600;flex-shrink:0;
}
.crit-card-meta-val{
color:var(--ink);overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.crit-card-kpis{
display:grid;grid-template-columns:repeat(4, 1fr);gap:4px;
margin-top:6px;
}
.crit-card-kpi{
background:var(--s2, #fafafa);border-radius:6px;
padding:6px 4px;text-align:center;
}
.crit-card-kpi strong{
display:block;font-size:12px;font-weight:700;letter-spacing:-.3px;
font-family:var(--mono);color:var(--ink);
}
.crit-card.is-highlight .crit-card-kpi strong{font-size:14px}
.crit-card-kpi span{
font-size:9px;color:var(--muted);
text-transform:uppercase;letter-spacing:.3px;font-weight:600;
}
.crit-empty{
padding:30px 20px;text-align:center;color:var(--muted);font-size:12px;
background:#fafafa;border:1px dashed var(--border);border-radius:10px;
grid-column:1 / -1;
}
.crit-empty-err{color:var(--red,#dc2626);background:#fef2f2;border-color:#fecaca}
/* Responsive: top 3 vira 2x2 em ecrãs pequenos */
@media (max-width:1200px){
.crit-top3-grid{grid-template-columns:repeat(2, 1fr)}
.crit-top3-grid > :nth-child(3){grid-column:1 / -1}
}
/* —— KEYWORDS TABLE —— */
.kw-table{width:100%;border-collapse:collapse}
.kw-table th{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;padding:9px 11px;text-align:left;border-bottom:1px solid var(--border);background:var(--s2);font-family:var(--mono)}
.kw-table th:not(:first-child):not(:nth-child(2)){text-align:right}
.kw-table td{padding:9px 11px;border-bottom:1px solid var(--border);font-size:12px}
.kw-table td:not(:first-child):not(:nth-child(2)){text-align:right;font-family:var(--mono)}
.kw-table tr:last-child td{border-bottom:none}
.kw-table tr:hover td{background:var(--s2)}
.kw-table tfoot td{font-weight:600;background:var(--s2);border-top:1px solid var(--border2);border-bottom:none}
.match-badge{display:inline-flex;padding:2px 7px;border-radius:4px;font-size:9px;font-weight:600;font-family:var(--mono)}
.match-exact{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.match-phrase{background:#fdf4ff;color:#7e22ce;border:1px solid #e9d5ff}
.match-broad{background:var(--s3);color:var(--muted2);border:1px solid var(--border2)}
.kw-score{display:flex;align-items:center;gap:5px}
.kw-bar{width:40px;height:4px;background:var(--s3);border-radius:2px;overflow:hidden}
.kw-fill{height:100%;border-radius:2px}
.kw-trend{font-size:11px;font-weight:600;font-family:var(--mono)}
.kw-trend.up{color:var(--green)}.kw-trend.dn{color:var(--red)}.kw-trend.nu{color:var(--muted)}
/* —— NOTIFICATIONS PAGE —— */
.notif-week{margin-bottom:20px}
.notif-week-hdr{
display:flex;align-items:center;justify-content:space-between;
padding:12px 16px;background:var(--ink);border-radius:10px 10px 0 0;
}
.notif-week-title{font-size:13px;font-weight:600;color:#fff}
.notif-week-sub{font-size:11px;color:rgba(255,255,255,.4);font-family:var(--mono)}
.notif-week-actions{display:flex;gap:7px}
.notif-card{
background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border);
padding:18px 20px;border-bottom:none;
}
.notif-card:last-child{border-radius:0 0 10px 10px;border-bottom:1px solid var(--border)}
.notif-card.sent{border-left-color:var(--green)}
.notif-card.pending{border-left-color:var(--amber)}
.notif-card.replied{border-left-color:var(--blue)}
.notif-card-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.notif-card-title{font-size:14px;font-weight:700;color:var(--ink)}
.notif-card-period{font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--mono)}
.notif-status{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}
.notif-status.sent{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.notif-status.pending{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)}
.notif-status.replied{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border)}
.notif-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.notif-metric{background:var(--s2);border-radius:7px;padding:9px 10px;text-align:center}
.notif-metric strong{display:block;font-size:16px;font-weight:700;letter-spacing:-.3px}
.notif-metric span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-family:var(--mono)}
.notif-metric .delta{font-size:10px;font-weight:600;font-family:var(--mono);margin-top:1px}
.notif-ai-text{
background:linear-gradient(135deg,#f0fdf4,#eff6ff);
border:1px solid var(--green-border);border-radius:8px;padding:12px 14px;
font-size:13px;line-height:1.6;color:var(--ink);margin-bottom:12px;position:relative;
}
.notif-ai-label{
position:absolute;top:-8px;left:12px;
background:var(--green);color:#fff;font-size:9px;font-weight:700;
padding:2px 8px;border-radius:4px;letter-spacing:.5px;font-family:var(--mono);
}
.notif-reply{
background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:8px;
padding:12px 14px;margin-bottom:12px;
}
.notif-reply-hdr{font-size:11px;font-weight:600;color:var(--blue);margin-bottom:5px;display:flex;align-items:center;gap:5px}
.notif-reply-text{font-size:12px;color:var(--muted2);line-height:1.4}
.notif-reply-ai{font-size:11px;color:var(--blue);margin-top:6px;padding-top:6px;border-top:1px solid var(--blue-border)}
.notif-actions{display:flex;align-items:center;gap:7px}
.notif-preview-btn{
display:flex;align-items:center;gap:5px;padding:7px 13px;
border:1px solid var(--border);border-radius:7px;background:var(--s2);
font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);color:var(--ink);transition:all .15s;
}
.notif-preview-btn:hover{background:var(--s3);border-color:var(--border2)}
.notif-send-btn{
display:flex;align-items:center;gap:5px;padding:7px 14px;
border:1px solid var(--accent);border-radius:7px;background:var(--accent);
font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);color:#fff;transition:all .15s;
}
.notif-send-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.notif-regen-btn{
display:flex;align-items:center;gap:5px;padding:7px 13px;
border:1px solid var(--blue-border);border-radius:7px;background:var(--blue-bg);
font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);color:var(--blue);transition:all .15s;
}
.notif-regen-btn:hover{background:#dbeafe}
/* EMAIL PREVIEW MODAL */
.email-preview{
background:#f4f4f0;border-radius:12px;padding:20px;font-family:Georgia,serif;
max-height:60vh;overflow-y:auto;
}
.email-header{background:var(--ink);padding:18px 22px;border-radius:8px 8px 0 0;margin:-20px -20px 16px}
.email-header-name{font-size:16px;font-weight:700;color:#fff}
.email-header-sub{font-size:11px;color:rgba(255,255,255,.4);margin-top:3px}
.email-subject{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:10px}
.email-body{font-size:13px;color:var(--muted2);line-height:1.7}
.email-metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0;background:var(--surface);border-radius:7px;padding:12px}
.email-metric{text-align:center}
.email-metric strong{display:block;font-size:18px;font-weight:700;color:var(--ink);font-family:var(--font)}
.email-metric span{font-size:10px;color:var(--muted);text-transform:uppercase}
.email-footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);text-align:center}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* —— AGÊNCIA · PROJECTOS —— */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pj-topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.pj-totals{display:flex;gap:9px;flex-wrap:wrap}
.pj-total{
display:flex;align-items:baseline;gap:6px;padding:9px 14px;
background:var(--surface);border:1px solid var(--border);border-radius:9px;
}
.pj-total-num{font-size:18px;font-weight:700;color:var(--ink);font-family:var(--font)}
.pj-total-lbl{font-size:11px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.6px}
.pj-actions{display:flex;gap:7px;align-items:center}
/* Menu unificado de Partilhar (individual + em massa) */
.pj-share-wrap{position:relative}
.pj-share-menu{
position:absolute;top:calc(100% + 6px);right:0;min-width:280px;
background:var(--surface);border:1px solid var(--border);border-radius:10px;
box-shadow:0 8px 24px rgba(0,0,0,.1);
padding:6px;z-index:80;
}
.pj-share-menu-item{
display:flex;align-items:center;gap:11px;width:100%;
padding:9px 11px;border:none;background:transparent;cursor:pointer;
border-radius:8px;text-align:left;
transition:background .12s;font-family:var(--font);color:var(--ink);
}
.pj-share-menu-item:hover{background:var(--accent-bg)}
.pj-share-menu-item + .pj-share-menu-item{margin-top:2px}
.pj-share-menu-ico{
font-size:16px;width:32px;height:32px;border-radius:8px;
background:var(--s2);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pj-share-menu-body{flex:1;min-width:0}
.pj-share-menu-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.2}
.pj-share-menu-desc{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.pj-edit-hint{
margin-bottom:14px;padding:10px 14px;border-radius:8px;
background:var(--accent-bg);border:1px solid var(--accent-border);
font-size:12px;color:var(--accent);
}
/* —— GRID 3 COLUNAS —— */
.pj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media (max-width:1300px){ .pj-grid{grid-template-columns:repeat(2,1fr)} }
.pj-col{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:11px;overflow:hidden}
.pj-col-hdr{
display:flex;align-items:center;gap:10px;padding:12px 14px;
border-bottom:1px solid var(--border);font-family:var(--font);
}
.pj-tone-green{background:#e8f5e9}
.pj-tone-blue{background:#e3f2fd}
.pj-tone-pink{background:#fce4ec}
.pj-tone-red{background:#ffebee}
.pj-tone-grey{background:#f5f5f3}
.pj-avatar{
width:34px;height:34px;border-radius:50%;flex-shrink:0;
background:var(--surface);border:1.5px solid var(--border);
display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:700;color:var(--ink);overflow:hidden;
}
.pj-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pj-col-name-wrap{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.pj-col-name{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.2px;display:flex;align-items:center;gap:6px}
.pj-col-role{font-size:10px;color:var(--muted2);font-family:var(--mono);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-lock{font-size:11px;opacity:.7}
.pj-col.is-blocked{opacity:.7}
.pj-col.is-blocked .pj-col-hdr{filter:grayscale(.5)}
.pj-col.is-blocked .pj-avatar img{filter:grayscale(.8)}
.pj-blocked-msg{
padding:18px 12px;text-align:center;
font-size:11px;color:var(--muted);font-family:var(--mono);
border:1.5px dashed var(--border2);border-radius:7px;margin:4px;
background:var(--s3);
}
.pj-col-count{
background:rgba(0,0,0,0.06);color:var(--ink);
padding:3px 10px;border-radius:11px;font-size:12px;font-weight:700;font-family:var(--mono);
}
/* Stats mensais por colaborador (no header da coluna) */
.pj-col-stats{position:relative;display:flex;align-items:center;gap:6px;margin-top:3px;font-family:var(--mono)}
.pj-stats-current{
display:inline-flex;align-items:center;gap:2px;font-size:10.5px;color:var(--muted);
background:rgba(255,255,255,0.6);padding:2px 8px;border-radius:9px;
border:1px solid rgba(0,0,0,0.05);
}
.pj-stats-current strong{font-size:11.5px;color:var(--ink);font-weight:800}
.pj-stats-current strong:first-of-type{color:#16a34a}
.pj-stats-sep{opacity:.4;margin:0 1px}
.pj-stats-lbl{margin-left:4px;text-transform:uppercase;letter-spacing:.4px;font-size:9px;color:var(--muted2)}
.pj-stats-toggle{
background:transparent;border:none;color:var(--muted);cursor:pointer;
width:18px;height:18px;border-radius:4px;font-size:11px;line-height:1;
transition:transform .12s, background .12s;
}
.pj-stats-toggle:hover{background:rgba(0,0,0,0.05);color:var(--ink)}
.pj-stats-toggle.is-open{transform:rotate(180deg)}
.pj-stats-history{
position:absolute;top:calc(100% + 4px);left:0;z-index:30;
background:var(--surface);border:1px solid var(--border);border-radius:8px;
box-shadow:0 4px 14px rgba(0,0,0,.08);padding:8px 10px;min-width:170px;
}
.pj-stats-hist-lbl{
font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;
letter-spacing:.5px;margin-bottom:6px;
}
.pj-stats-hist-row{
display:flex;justify-content:space-between;font-size:11px;padding:3px 0;
color:var(--ink);border-top:1px solid var(--s3);
}
.pj-stats-hist-row:first-of-type{border-top:none}
.pj-stats-hist-row strong{font-weight:800;color:var(--ink)}
/* Avatar do titular (mostrado em vista Backups: quem se está a cobrir) */
.pj-proj-owner{
width:22px;height:22px;border-radius:50%;flex-shrink:0;
background:rgba(255,255,255,0.95);border:1.5px solid var(--border);
display:inline-flex;align-items:center;justify-content:center;
overflow:hidden;font-size:9px;font-weight:700;color:var(--ink);
cursor:help;
transition:transform .12s, border-color .12s;
}
.pj-proj-owner:hover{transform:scale(1.15);border-color:var(--accent)}
.pj-proj-owner img{width:100%;height:100%;object-fit:cover;display:block}
/* Botão Backups quando activo */
#pjBackupsToggle.is-active{
background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border);
}
/* Avatar a cobrir (em vista projects quando titular está de férias) */
.pj-proj-owner.is-covering{
background:#fef3c7;border-color:#f59e0b;
box-shadow:0 0 0 2px rgba(245,158,11,.15);
}
/* Botão Férias + badge */
.pj-ferias-badge{
display:inline-flex;align-items:center;justify-content:center;
background:#f59e0b;color:#fff;font-size:9px;font-weight:800;font-family:var(--mono);
padding:1px 6px;border-radius:8px;margin-left:4px;letter-spacing:.3px;
}
#pjFeriasBtn:has(.pj-ferias-badge[style*="inline-flex"]){
border-color:#f59e0b;color:#92400e;
}
/* Popover Férias */
.pj-ferias-pop{
position:absolute;top:calc(100% + 6px);left:0;z-index:100;
background:var(--surface);border:1px solid var(--border);border-radius:10px;
box-shadow:0 8px 28px rgba(0,0,0,.12);padding:0;min-width:340px;
overflow:hidden;
}
.pj-ferias-hdr{padding:12px 14px;border-bottom:1px solid var(--border);background:var(--s2)}
.pj-ferias-title{font-size:13px;font-weight:700;color:var(--ink)}
.pj-ferias-sub{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4}
.pj-ferias-form{display:flex;gap:10px;padding:14px}
.pj-ferias-field{flex:1;display:flex;flex-direction:column;gap:4px}
.pj-ferias-field label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono)}
.pj-ferias-field input[type=date]{
border:1px solid var(--border);border-radius:6px;padding:7px 9px;
font-family:var(--mono);font-size:12px;color:var(--ink);
background:var(--surface);outline:none;width:100%;
transition:border-color .12s, box-shadow .12s;
}
.pj-ferias-field input[type=date]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.pj-ferias-foot{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:10px 14px;border-top:1px solid var(--border);background:var(--s2);
}
.pj-ferias-status-wrap{flex:1;min-width:0}
.pj-ferias-status{
font-size:11px;font-family:var(--mono);color:var(--muted);
text-transform:uppercase;letter-spacing:.4px;
}
.pj-ferias-status.is-active{color:#92400e;font-weight:700}
.pj-ferias-status.is-scheduled{color:#1d4ed8;font-weight:600}
.pj-ferias-status.is-past{color:var(--muted2)}
/* Coluna do colab em férias */
.pj-col.is-on-vacation .pj-col-hdr{opacity:.7;filter:saturate(.6)}
.pj-col.is-on-vacation .pj-col-body{opacity:.5}
.pj-vac-badge{
display:inline-flex;align-items:center;
background:#fef3c7;color:#92400e;border:1px solid #fde68a;
font-size:9px;font-weight:700;font-family:var(--mono);
padding:2px 7px;border-radius:7px;letter-spacing:.3px;
margin-left:6px;text-transform:uppercase;white-space:nowrap;
}
/* Em vista backups, drag&drop sempre activo para editar backup */
.pj-grid.is-backups-view .pj-proj{cursor:grab}
.pj-grid.is-backups-view .pj-proj:active{cursor:grabbing}
.pj-grid.is-backups-view .pj-proj:hover{background:var(--accent-bg);border-color:var(--accent-border)}
.pj-grid.is-backups-view .pj-proj-del{display:none}
/* Em-pausa não tem backup — esconder esse painel em vista backups */
.pj-grid.is-backups-view .pj-col-aux{display:none}
/* Dica visual ao topo da vista backups */
.pj-grid.is-backups-view::before{
content:'💡 Arrasta um projecto para outra coluna para mudar o backup';
display:block;grid-column:1/-1;
background:var(--accent-bg);color:var(--accent);
font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;
padding:8px 14px;border-radius:8px;margin-bottom:6px;
border:1px dashed var(--accent-border);
}
/* Sininho por projecto */
.pj-proj-bell{
position:relative;background:transparent;border:none;color:var(--muted);
cursor:pointer;padding:2px 4px;border-radius:5px;font-size:12px;line-height:1;
display:inline-flex;align-items:center;gap:3px;flex-shrink:0;
transition:background .12s, color .12s;
}
.pj-proj-bell:not(.is-empty):hover{background:var(--accent-bg);color:var(--accent)}
.pj-proj-bell.is-empty{opacity:.25;cursor:default}
.pj-proj-bell.is-warn .pj-bell-ico{color:#dc2626;filter:saturate(1.3)}
.pj-bell-badge{
font-size:8px;font-weight:800;font-family:var(--mono);
background:var(--accent);color:#fff;padding:1px 5px;border-radius:7px;
letter-spacing:.3px;line-height:1.2;
}
.pj-proj-bell.is-warn .pj-bell-badge{background:#dc2626}
/* Popover de notificações */
.pj-notif-pop{
background:var(--surface);border:1px solid var(--border);border-radius:10px;
box-shadow:0 8px 28px rgba(0,0,0,.12);width:320px;max-height:380px;
display:flex;flex-direction:column;overflow:hidden;z-index:200;
}
.pj-notif-hdr{
display:flex;align-items:center;justify-content:space-between;
padding:10px 12px;border-bottom:1px solid var(--border);background:var(--s2);
}
.pj-notif-title{font-size:12.5px;font-weight:700;color:var(--ink)}
.pj-notif-close{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:16px;width:22px;height:22px;border-radius:4px}
.pj-notif-close:hover{background:var(--s3);color:var(--ink)}
.pj-notif-list{flex:1;overflow-y:auto;padding:6px}
.pj-notif-empty{padding:24px 12px;text-align:center;color:var(--muted);font-size:11px;font-family:var(--mono)}
.pj-notif-row{
display:flex;align-items:flex-start;gap:8px;padding:8px 10px;
border-radius:6px;margin-bottom:3px;font-family:var(--font);
}
.pj-notif-row:hover{background:var(--s2)}
.pj-notif-info{background:var(--s3)}
.pj-notif-warn{background:#fef3c7;border-left:3px solid #d97706}
.pj-notif-alert{background:#fee2e2;border-left:3px solid #dc2626}
.pj-notif-ico{font-size:13px;line-height:1.2;flex-shrink:0}
.pj-notif-body{flex:1;min-width:0}
.pj-notif-text{font-size:12px;font-weight:600;color:var(--ink);line-height:1.35;word-wrap:break-word}
.pj-notif-desc{font-size:11px;color:var(--muted);line-height:1.4;margin-top:3px;word-wrap:break-word}
.pj-notif-meta{font-size:9.5px;color:var(--muted2);font-family:var(--mono);margin-top:4px;text-transform:uppercase;letter-spacing:.3px}
.pj-col-body{padding:9px;display:flex;flex-direction:column;gap:5px;min-height:120px;transition:background .12s}
.pj-col-body.drop-target{background:var(--accent-bg);outline:2px dashed var(--accent);outline-offset:-4px;border-radius:6px}
/* —— PROJECT ROW —— */
.pj-proj{
display:flex;align-items:center;gap:8px;padding:8px 11px;
background:var(--s2);border:1px solid var(--border);border-radius:7px;
cursor:default;font-family:var(--font);transition:all .12s;
position:relative;
}
.pj-proj:hover{background:var(--surface);border-color:var(--border2)}
.pj-proj.dragging{opacity:.4;transform:rotate(1.5deg)}
.pj-grid.is-editing .pj-proj{cursor:grab}
.pj-grid.is-editing .pj-proj:active{cursor:grabbing}
.pj-grid.is-editing .pj-proj:hover{background:var(--accent-bg);border-color:var(--accent-border)}
.pj-proj-name{
flex:1;font-size:12.5px;font-weight:600;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Status (cor do nome) */
.pj-proj[data-status="prioritaria"] .pj-proj-name{color:#2563eb}
.pj-proj[data-status="a-comecar"] .pj-proj-name{color:#16a34a}
.pj-proj[data-status="a-terminar"] .pj-proj-name{color:#dc2680}
.pj-proj[data-status="partilhada"] .pj-proj-name{color:#c87827}
.pj-proj[data-status="em-pausa"] .pj-proj-name{color:#dc2626}
.pj-proj-types{display:flex;gap:3px;flex-shrink:0}
.pj-chip{
display:inline-flex;align-items:center;padding:2px 6px;border-radius:4px;
font-size:9.5px;font-weight:700;font-family:var(--mono);letter-spacing:.4px;
border:1px solid transparent;
}
.pj-chip.t-cpa{background:#fef3c7;color:#92400e;border-color:#fde68a}
.pj-chip.t-cpl{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.pj-chip.t-cpc{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.pj-chip.t-ie {background:#ede9fe;color:#6d28d9;border-color:#ddd6fe}
.pj-chip.t-seo{background:#cffafe;color:#0e7490;border-color:#a5f3fc}
.pj-proj-del{
display:none;background:none;border:none;cursor:pointer;font-size:16px;color:var(--muted);
width:20px;height:20px;border-radius:4px;line-height:1;padding:0;
}
.pj-proj-del:hover{background:var(--red-bg);color:var(--red)}
.pj-grid.is-editing .pj-proj-del,.is-editing .pj-proj-del{display:flex;align-items:center;justify-content:center}
/* Slot vazio + adicionar */
.pj-add-slot{padding:6px 4px 2px}
.pj-add-btn{
width:100%;padding:7px;border:1.5px dashed var(--border2);border-radius:7px;
background:transparent;color:var(--muted2);font-size:11.5px;font-weight:600;
cursor:pointer;font-family:var(--font);transition:all .12s;
}
.pj-add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
/* —— LINHA SECUNDÁRIA —— */
.pj-secondary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.pj-col-aux .pj-col-body{min-height:90px}
.pj-legends-col{display:flex;flex-direction:column;gap:10px}
.pj-legend{
padding:10px 14px;background:var(--surface);
border:1px solid var(--border);border-radius:9px;
}
.pj-legend-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted2);margin-bottom:7px;font-family:var(--mono)}
.pj-legend-row{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink);padding:2px 0}
.pj-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.pj-dot.s-partilhada{background:#c87827}
.pj-dot.s-a-terminar{background:#dc2680}
.pj-dot.s-prioritaria{background:#2563eb}
.pj-dot.s-a-comecar{background:#16a34a}
.pj-dot.s-em-pausa{background:#dc2626}
.pj-chip-mini{
display:inline-flex;padding:2px 6px;border-radius:4px;
font-size:9.5px;font-weight:700;font-family:var(--mono);letter-spacing:.4px;
min-width:30px;justify-content:center;
}
.pj-chip-mini.t-cpa{background:#fef3c7;color:#92400e}
.pj-chip-mini.t-cpl{background:#dcfce7;color:#15803d}
.pj-chip-mini.t-cpc{background:#dbeafe;color:#1d4ed8}
.pj-chip-mini.t-ie {background:#ede9fe;color:#6d28d9}
.pj-chip-mini.t-seo{background:#cffafe;color:#0e7490}
/* —— MODAL EDITAR —— */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WIZARD · Novo projeto (6 fases)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pj-wiz-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:200}
.pj-wiz{
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(800px, calc(100vw - 40px));max-height:calc(100vh - 60px);
background:var(--surface);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);
z-index:201;flex-direction:column;overflow:hidden;
}
/* Wizard embutido na página Configurações (não-modal). */
.pj-wiz.pj-wiz-inline{
position:static;transform:none;width:100%;max-width:none;max-height:none;
border-radius:12px;box-shadow:none;border:1px solid var(--border);z-index:auto;
}
/* Favicon / logótipo no passo Identificação do wizard. */
.pj-wiz-favicon{display:flex;align-items:center;gap:10px}
.pj-wiz-fav-prev{width:44px;height:44px;border:1px solid var(--border);border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--s2);overflow:hidden;flex-shrink:0;color:var(--muted)}
.pj-wiz-fav-prev img{width:100%;height:100%;object-fit:contain}
.pj-wiz-fav-btn{font-size:12px;padding:6px 11px}
/* Picker "Ligar com Google" no passo Plataformas do wizard. */
.pj-wiz-gpick{margin-top:6px}
.pj-wiz-gpick-btn{font-size:11.5px;font-weight:600;padding:5px 10px;border:1px solid var(--accent);border-radius:7px;background:rgba(37,99,235,.06);color:var(--accent);cursor:pointer}
.pj-wiz-gpick-btn:hover{background:rgba(37,99,235,.12)}
.pj-wiz-gpick-btn:disabled{opacity:.7;cursor:default}
.pj-wiz-gpick-sel{margin-top:6px;width:100%;padding:7px 9px;border:1px solid var(--accent);border-radius:7px;background:var(--surface);color:var(--ink);font-size:12.5px}
/* Plataforma com ligação (pick) simplificada — chip da conta escolhida */
.pj-wiz-account-pick{align-items:center}
.pj-wiz-pick-chip{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--ink);background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.35);border-radius:8px;padding:6px 10px}
.pj-wiz-pick-ok{color:#16a34a;font-weight:800}
.pj-wiz-pick-id{font-family:var(--mono);font-size:11px;color:var(--muted)}
.pj-wiz-pick-change{border:none;background:transparent;color:var(--accent);font-size:11px;font-weight:600;cursor:pointer;text-decoration:underline;padding:0 2px}
.pj-wiz-pick-change:hover{opacity:.8}
.pj-wiz-hdr{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 22px 14px;border-bottom:1px solid var(--border)}
.pj-wiz-title{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.2px}
.pj-wiz-sub{font-size:11px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
/* Step indicator */
.pj-wiz-steps{
display:flex;align-items:center;gap:0;padding:14px 22px;
background:var(--s2);border-bottom:1px solid var(--border);
}
.pj-wiz-step{
flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
cursor:not-allowed;opacity:.4;font-family:var(--font);position:relative;
}
.pj-wiz-step:not(:last-child)::after{
content:'';position:absolute;top:13px;left:55%;right:-45%;height:2px;
background:var(--border);z-index:0;
}
.pj-wiz-step.is-done:not(:last-child)::after{background:var(--accent)}
.pj-wiz-step.is-clickable{opacity:.8;cursor:pointer}
.pj-wiz-step.is-clickable:hover{opacity:1}
.pj-wiz-step.is-active{opacity:1}
.pj-wiz-step-n{
width:26px;height:26px;border-radius:50%;background:var(--surface);
border:1.5px solid var(--border);
display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:800;color:var(--muted);
z-index:1;position:relative;
transition:all .15s;
}
.pj-wiz-step.is-done .pj-wiz-step-n{background:var(--accent);border-color:var(--accent);color:#fff}
.pj-wiz-step.is-active .pj-wiz-step-n{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-bg)}
.pj-wiz-step-lbl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-family:var(--mono)}
.pj-wiz-step.is-active .pj-wiz-step-lbl{color:var(--accent)}
/* Email Marketing · página provider-agnóstica */
.em-empty{
padding:40px 20px;text-align:center;font-size:13px;color:var(--muted);
background:var(--accent-bg);border:1px dashed var(--accent-border);border-radius:10px;
font-family:var(--mono)
}
.em-loading{padding:40px 20px;text-align:center;font-size:13px;color:var(--muted);font-family:var(--mono)}
.em-provider-badge{
display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;
font-family:var(--mono);letter-spacing:.3px;margin-right:6px
}
.em-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.em-kpi{
background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;
display:flex;flex-direction:column;gap:4px
}
.em-kpi-lbl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono)}
.em-kpi-val{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.em-kpi-delta{font-size:11px;font-family:var(--mono);color:var(--muted)}
.em-kpi-delta.is-good{color:#2D9B5C}
.em-kpi-delta.is-bad{color:#C24545}
.em-card{
background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:16px
}
.em-card-title{
font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;
letter-spacing:.5px;font-family:var(--mono);margin-bottom:12px;display:flex;align-items:center;gap:8px
}
.em-card-count{
font-size:10px;background:var(--accent-bg);color:var(--accent);padding:1px 6px;border-radius:8px;font-weight:700
}
.em-chart{display:block;margin:0 auto}
.em-chart-xaxis{
display:flex;justify-content:space-between;margin-top:6px;
font-size:10px;font-family:var(--mono);color:var(--muted)
}
.em-table{width:100%;border-collapse:collapse;font-size:12px}
.em-table th{
text-align:left;font-size:10px;font-weight:700;color:var(--muted);
text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono);
padding:8px 10px;border-bottom:1px solid var(--border)
}
.em-table th.em-num,.em-table td.em-num{text-align:right;font-variant-numeric:tabular-nums}
.em-table td{padding:10px;border-bottom:1px solid var(--border-soft, #f0f0f0);vertical-align:top}
.em-table tbody tr:last-child td{border-bottom:0}
.em-camp-name{font-weight:700;color:var(--ink);font-size:12.5px}
.em-camp-subject{font-size:11px;color:var(--muted);margin-top:2px}
.em-lists{display:flex;flex-wrap:wrap;gap:8px}
.em-list-pill{
display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:18px;
background:var(--accent-bg);border:1px solid var(--accent-border);font-size:12px
}
.em-list-name{font-weight:700;color:var(--ink)}
.em-list-count{font-family:var(--mono);font-size:11px;color:var(--muted)}
/* ─────────────────────────────────────────────────────────────────
Social Insights · Facebook + Instagram (orgânico)
Segue o design system do GSC: hero gradient, KPI cards com accent,
table cards com sticky header, hover effects, sparklines.
───────────────────────────────────────────────────────────────── */
/* Layout da página — usa toda a largura disponível como as outras páginas */
#page-social-insights{padding:18px 28px}
#page-social-insights .page-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
#page-social-insights .page-title{font-size:18px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.2px}
#page-social-insights .page-title em{font-style:normal;color:var(--muted);font-weight:400}
#page-social-insights .page-sub{display:none}
#page-social-insights .page-actions{display:flex;gap:8px;align-items:center}
/* Tabs FB / IG */
.si-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.si-tab{
background:transparent;border:0;cursor:pointer;padding:10px 16px;
font-size:12.5px;font-weight:600;color:var(--muted);font-family:inherit;
border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:7px;
transition:color .15s, border-color .15s;
}
.si-tab:hover{color:var(--ink)}
.si-tab.is-active{color:var(--ink);border-bottom-color:currentColor;font-weight:700}
.si-tab[data-network="facebook"].is-active{color:#1877F2}
.si-tab[data-network="instagram"].is-active{color:#E1306C}
.si-tab-ic{font-size:14px}
/* ── HERO ── */
.si-hero{
position:relative;overflow:hidden;
background:var(--surface);border:1px solid var(--border);border-radius:16px;
margin-bottom:14px;padding:22px 26px;
box-shadow:0 1px 3px rgba(0,0,0,0.02);
}
.si-hero-bg{
position:absolute;inset:0;
background:
radial-gradient(ellipse 700px 260px at 100% 0%, color-mix(in srgb, var(--si-net) 14%, transparent), transparent 65%),
radial-gradient(ellipse 500px 220px at 0% 100%, color-mix(in srgb, var(--si-net) 8%, transparent), transparent 60%);
pointer-events:none;
}
.si-hero-content{position:relative;display:flex;align-items:center;gap:18px;z-index:1}
.si-hero-icon{
width:56px;height:56px;flex-shrink:0;
background:var(--si-net);
color:#fff;border-radius:14px;font-size:24px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 18px color-mix(in srgb, var(--si-net) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.25);
}
.si-hero-text{flex:1;min-width:0}
.si-hero-eyebrow{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--si-net);margin-bottom:4px}
.si-hero-title{font-size:20px;font-weight:700;color:var(--ink);line-height:1.2;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si-hero-sub{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.si-hero-link{color:var(--muted);text-decoration:none;font-family:var(--mono)}
.si-hero-link:hover{color:var(--si-net)}
.si-hero-pill{
display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;
background:var(--s2);border:1px solid var(--border);
font-family:var(--mono);font-size:10.5px;color:var(--ink);font-weight:600;
}
.si-hero-sep{color:var(--border);font-weight:400}
/* ── KPI cards (4 cols, accent per metric) ── */
.si-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.si-kpi{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:16px 18px 14px;position:relative;overflow:hidden;
transition:transform .15s, box-shadow .15s, border-color .15s;
}
.si-kpi::before{
content:'';position:absolute;left:0;top:0;right:0;height:3px;
background:var(--kpi-accent, var(--accent));
}
.si-kpi:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.06);border-color:color-mix(in srgb,var(--kpi-accent) 40%,var(--border))}
.si-kpi-followers{--kpi-accent:#4285F4}
.si-kpi-reach {--kpi-accent:#9333EA}
.si-kpi-eng {--kpi-accent:#10B981}
.si-kpi-rate {--kpi-accent:#F59E0B}
.si-kpi-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;margin-top:4px}
.si-kpi-ico{
width:26px;height:26px;display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--kpi-accent) 12%,var(--surface));
color:var(--kpi-accent);
border-radius:7px;font-size:14px;
}
.si-kpi-label{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.si-kpi-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.si-kpi-value{font-size:26px;font-weight:800;color:var(--ink);font-family:var(--mono);line-height:1;letter-spacing:-0.6px}
.si-kpi-spark{color:var(--kpi-accent);opacity:.85;margin-top:2px;height:28px}
.si-kpi-spark svg{display:block;width:100%;height:28px}
.si-kpi-sub-stats{
display:flex;justify-content:space-between;gap:8px;
font-size:10.5px;font-family:var(--mono);color:var(--muted);
padding-top:6px;border-top:1px dashed var(--border);
}
.si-kpi-sub-stats strong{color:var(--ink);font-weight:700}
/* Trend badges */
.si-trend{
display:inline-flex;align-items:center;gap:3px;
font-size:11px;font-weight:700;font-family:var(--mono);
padding:3px 7px;border-radius:6px;flex-shrink:0;
}
.si-trend-up{background:rgba(16,185,129,0.12);color:#059669}
.si-trend-down{background:rgba(239,68,68,0.12);color:#DC2626}
.si-trend-neutral{background:var(--s2);color:var(--muted)}
.si-trend-arr{font-size:13px;line-height:1}
/* ── Cards genéricos ── */
.si-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:14px}
.si-card-head{
padding:14px 20px;border-bottom:1px solid var(--border);
display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;
}
.si-card-title{font-size:13px;font-weight:700;color:var(--ink)}
.si-card-sub{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.si-card-body{padding:18px 20px}
.si-card-legend{display:flex;gap:14px;font-size:11px;color:var(--muted);font-family:var(--mono)}
.si-legend-item{display:inline-flex;align-items:center;gap:5px}
.si-legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
/* Reach chart */
.si-chart{display:block;width:100%;height:auto}
/* ── Post types breakdown ── */
.si-types{display:flex;flex-direction:column;gap:10px}
.si-type-row{display:grid;grid-template-columns:160px 1fr 90px;gap:14px;align-items:center}
.si-type-label{font-size:12.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
.si-type-ico{font-size:14px;font-family:var(--mono);width:18px;text-align:center}
.si-type-count{font-size:10.5px;font-family:var(--mono);color:var(--muted);font-weight:400}
.si-type-bar{background:var(--s2);height:18px;border-radius:6px;overflow:hidden}
.si-type-bar-fill{height:100%;border-radius:6px;transition:width .3s}
.si-type-val{text-align:right}
.si-type-val-main{font-size:13px;font-weight:700;font-family:var(--mono);color:var(--ink);line-height:1.1}
.si-type-val-sub{font-size:10.5px;font-family:var(--mono);color:var(--muted);margin-top:2px}
/* ── Best hour ── */
.si-hours{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;height:60px;margin-bottom:8px}
.si-hour{
border-radius:4px;height:100%;cursor:default;position:relative;
transition:transform .15s;
}
.si-hour:hover{transform:scaleY(1.1)}
.si-hour.is-peak{box-shadow:0 0 0 2px var(--ink) inset}
.si-hours-axis{display:flex;justify-content:space-between;font-size:10px;font-family:var(--mono);color:var(--muted)}
/* ── Two-column section ── */
.si-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:0}
.si-two-col > .si-card{margin-bottom:14px}
@media (max-width:1100px){
.si-two-col{grid-template-columns:1fr}
}
/* ── Top posts table ── */
.si-table-wrap{overflow-x:auto}
.si-table{width:100%;border-collapse:collapse;font-size:12.5px}
.si-table thead{background:var(--s2)}
.si-table th{
text-align:left;padding:10px 16px;font-weight:700;font-size:10px;
color:var(--muted);text-transform:uppercase;letter-spacing:.6px;
border-bottom:1px solid var(--border);background:var(--s2);
}
.si-table th.si-num{text-align:right;font-variant-numeric:tabular-nums}
.si-table td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.si-table tbody tr:last-child td{border-bottom:0}
.si-table tbody tr{transition:background .12s}
.si-table tbody tr:hover{background:var(--s2)}
.si-num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.si-post-cell{display:flex;gap:12px;align-items:flex-start;max-width:520px}
.si-post-thumb-wrap{
position:relative;width:56px;height:56px;flex-shrink:0;
border-radius:8px;overflow:hidden;background:var(--s2);
display:flex;align-items:center;justify-content:center;
}
.si-post-thumb{width:100%;height:100%;object-fit:cover;display:block}
.si-post-thumb-fallback{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:22px;font-family:var(--mono);
}
.si-post-thumb-wrap img+.si-post-thumb-fallback{display:none}
.si-post-thumb-wrap.no-img .si-post-thumb-fallback{display:flex}
.si-post-info{flex:1;min-width:0}
.si-post-text{
display:block;font-size:12.5px;font-weight:500;color:var(--ink);
line-height:1.4;text-decoration:none;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.si-post-text:hover{color:var(--accent)}
.si-post-meta{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.si-post-type-pill{
display:inline-flex;align-items:center;gap:4px;
padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;
font-family:var(--mono);letter-spacing:.3px;
}
.si-post-date{font-size:10.5px;font-family:var(--mono);color:var(--muted)}
.si-engrate-badge{
display:inline-block;padding:2px 8px;border-radius:6px;
background:rgba(16,185,129,0.12);color:#059669;
font-family:var(--mono);font-weight:700;font-size:11.5px;
}
/* ── Demographics ── */
.si-demo-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}
@media (max-width:900px){.si-demo-grid{grid-template-columns:1fr}}
.si-demo-sub{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-family:var(--mono);margin-bottom:10px}
.si-demo-row{display:grid;grid-template-columns:60px 1fr 40px;gap:8px;align-items:center;margin-bottom:7px}
.si-demo-lbl{font-size:11.5px;font-family:var(--mono);color:var(--muted)}
.si-demo-bar{background:var(--s2);height:8px;border-radius:4px;overflow:hidden}
.si-demo-bar-fill{height:100%;border-radius:4px;transition:width .3s}
.si-demo-val{font-size:11px;font-family:var(--mono);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
/* ── Ver mais posts ── */
.si-more-wrap{padding:14px 20px;border-top:1px solid var(--border);text-align:center;background:var(--s2)}
.si-more-btn{
background:transparent;border:1px solid var(--border);border-radius:8px;
padding:8px 18px;font-size:12px;font-weight:600;color:var(--ink);font-family:inherit;
cursor:pointer;transition:all .15s;
}
.si-more-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}
/* ── Sugestões de criativos ── */
.si-sug-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:12px}
.si-sug-card{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:16px;position:relative;overflow:hidden;
transition:transform .15s, box-shadow .15s, border-color .15s;
display:flex;flex-direction:column;gap:8px;
}
.si-sug-card::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sug-color, var(--accent));
}
.si-sug-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.06);border-color:var(--sug-color, var(--accent))}
.si-sug-head{display:flex;justify-content:space-between;align-items:center}
.si-sug-kind{
display:inline-flex;align-items:center;gap:5px;
font-size:10px;font-weight:800;font-family:var(--mono);
text-transform:uppercase;letter-spacing:.6px;
color:var(--sug-color);
}
.si-sug-kind-ico{font-size:13px}
.si-sug-title{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.si-sug-body{font-size:12px;color:var(--muted);line-height:1.5;flex:1}
.si-sug-foot{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.si-sug-type{
display:inline-flex;align-items:center;gap:4px;
padding:3px 8px;border-radius:99px;font-size:10.5px;font-weight:700;
font-family:var(--mono);
}
.si-sug-hour{
display:inline-flex;align-items:center;gap:4px;
padding:3px 8px;border-radius:99px;font-size:10.5px;font-weight:700;
background:var(--s2);color:var(--muted);font-family:var(--mono);
}
/* ── Banner data source (mock/real warning) ── */
.si-banner{
display:flex;align-items:flex-start;gap:12px;
padding:12px 16px;border-radius:10px;margin-bottom:14px;
font-size:12.5px;
}
.si-banner-warn{background:rgba(245,158,11,0.10);border:1px solid rgba(245,158,11,.35);color:#92400e}
.si-banner-info{background:var(--accent-bg);border:1px solid var(--accent-border);color:var(--muted)}
.si-banner-ico{font-size:18px;line-height:1;flex-shrink:0;margin-top:1px}
.si-banner-body{flex:1;min-width:0}
.si-banner-title{font-weight:700;margin-bottom:2px}
.si-banner-text{font-size:11.5px;opacity:.85;line-height:1.5}
/* ── Análise final (callout) ── */
.si-analysis-card{position:relative;overflow:hidden;padding:22px 26px;border-radius:14px;border:1px solid var(--border)}
.si-analysis-bg{
position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 500px 200px at 100% 0%, color-mix(in srgb, var(--si-net) 12%, transparent), transparent 70%),
radial-gradient(ellipse 400px 180px at 0% 100%, color-mix(in srgb, var(--si-net) 6%, transparent), transparent 60%);
}
.si-analysis-content{position:relative;z-index:1}
.si-analysis-eyebrow{
font-size:10px;font-weight:800;font-family:var(--mono);
text-transform:uppercase;letter-spacing:.8px;color:var(--si-net);
margin-bottom:8px;
}
.si-analysis-text{
font-size:13.5px;color:var(--ink);line-height:1.65;
max-width:920px;
}
.si-analysis-text strong{font-weight:700;color:var(--ink)}
/* ── Hover preview popup ── */
.si-preview{
position:absolute;z-index:2000;
width:380px;background:var(--surface);
border:1px solid var(--border);border-radius:14px;
box-shadow:0 12px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.06);
opacity:0;transform:translateY(4px) scale(.98);
transition:opacity .12s ease, transform .12s ease;
pointer-events:auto;
overflow:hidden;
}
.si-preview.is-visible{opacity:1;transform:translateY(0) scale(1)}
.si-preview-img-wrap{
position:relative;width:100%;aspect-ratio:1/1;
background:var(--s2);overflow:hidden;
}
.si-preview-img{width:100%;height:100%;object-fit:cover;display:block}
.si-preview-fallback{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:48px;font-family:var(--mono);
}
.si-preview-type-pill{
position:absolute;top:10px;left:10px;
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;border-radius:99px;font-size:10.5px;font-weight:800;
font-family:var(--mono);letter-spacing:.4px;
box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.si-preview-body{padding:14px 16px}
.si-preview-meta{font-size:10.5px;font-family:var(--mono);color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.si-preview-text{
font-size:12.5px;color:var(--ink);line-height:1.5;margin-bottom:14px;
display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.si-preview-stats{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 12px;
padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
margin-bottom:12px;
}
.si-preview-stat{display:flex;flex-direction:column;gap:1px}
.si-preview-stat-lbl{font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono)}
.si-preview-stat-val{font-size:13px;font-weight:700;color:var(--ink);font-family:var(--mono)}
.si-preview-cta{
display:flex;align-items:center;justify-content:center;gap:5px;
width:100%;padding:9px 12px;border-radius:8px;
color:#fff;text-decoration:none;font-size:12px;font-weight:700;
letter-spacing:.2px;
transition:filter .15s;
}
.si-preview-cta:hover{filter:brightness(1.08)}
/* Hover hint na row do post (cursor + leve background) */
.si-table tbody tr{cursor:default}
.si-table tbody tr:hover .si-post-thumb-wrap{box-shadow:0 0 0 2px var(--accent), 0 0 0 4px var(--accent-bg, rgba(0,0,0,0.05));transition:box-shadow .15s}
/* ── Sparkline ── */
.si-spark{display:block;width:100%;height:28px}
/* ── Empty / loading ── */
.si-empty{
padding:40px 24px;text-align:center;font-size:13px;color:var(--muted);
background:var(--surface);border:1px dashed var(--border);border-radius:12px;
line-height:1.6;
}
.si-loading{padding:60px 24px;text-align:center;font-size:13px;color:var(--muted);font-family:var(--mono)}
/* Parceiros · modal */
.pj-partners-modal{max-width:680px}
.pj-wiz-inline-link{
background:transparent;border:0;cursor:pointer;color:var(--accent);
font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;
padding:0 0 0 8px;font-weight:700
}
.pj-wiz-inline-link:hover{text-decoration:underline}
.pj-partners-list{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;max-height:260px;overflow-y:auto}
.pj-partners-empty{
padding:18px;text-align:center;font-size:12px;color:var(--muted);font-family:var(--mono);
background:var(--accent-bg);border:1px dashed var(--accent-border);border-radius:8px
}
.pj-partner-row{
display:flex;align-items:center;gap:10px;padding:10px 12px;
background:#fff;border:1px solid var(--border);border-radius:8px
}
.pj-partner-info{flex:1;min-width:0}
.pj-partner-name{font-size:13px;font-weight:700;color:var(--ink)}
.pj-partner-meta{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.pj-partner-actions{display:flex;gap:6px}
.btn-mini{
width:28px;height:28px;border-radius:6px;border:1px solid var(--border);
background:#fff;cursor:pointer;font-size:13px;line-height:1;color:var(--ink);
display:inline-flex;align-items:center;justify-content:center
}
.btn-mini:hover{border-color:var(--accent);color:var(--accent)}
.btn-mini-danger:hover{border-color:#d33;color:#d33}
/* —— Página Clientes (gestão / soft-delete) —— */
#page-clientes .page-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
#page-clientes .page-title{font-size:18px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.2px}
#page-clientes .page-title em{font-style:normal;color:var(--muted);font-weight:400}
#page-clientes .page-sub{font-size:12px;color:var(--muted);margin-top:3px}
.cl-table{width:100%;border-collapse:collapse;font-size:13px}
.cl-table th{text-align:left;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--border);font-family:var(--mono)}
.cl-table td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.cl-table tr:last-child td{border-bottom:none}
.cl-row-off{opacity:.62}
.cl-name{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink)}
.cl-fav{width:20px;height:20px;border-radius:5px;object-fit:cover;flex:none}
.cl-fav-ph{background:var(--border)}
.cl-url{color:var(--muted);font-size:12px}
.cl-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.cl-badge.on{background:rgba(22,163,74,.12);color:#16a34a}
.cl-badge.off{background:var(--border);color:var(--muted)}
.cl-acoes{text-align:right;white-space:nowrap}
.cl-acoes .btn-mini{width:auto;height:auto;padding:5px 11px;font-size:12px;font-weight:600;margin-left:6px}
.cl-acoes .btn-mini:disabled{opacity:.4;cursor:not-allowed}
.cl-acoes .cl-off:hover{border-color:#d33;color:#d33}
.cl-acoes .cl-on:hover{border-color:#16a34a;color:#16a34a}
.cl-acoes .cl-del:hover{border-color:#dc2626;color:#dc2626;background:rgba(220,38,38,.05)}
.cl-acct{font-family:var(--mono);font-size:11px;color:var(--ink)}
.cl-drive{font-size:12px;color:var(--accent,#2563eb);text-decoration:none;font-weight:600}
.cl-drive:hover{text-decoration:underline}
/* —— Página Configurações —— */
.cfg-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.cfg-header .page-title{font-size:18px;font-weight:700;color:var(--ink);margin:0}
.cfg-header .page-title em{font-style:normal;color:var(--muted);font-weight:400}
.cfg-header .page-sub{font-size:12px;color:var(--muted);margin-top:3px}
.cfg-sections{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:900px){.cfg-sections{grid-template-columns:1fr}}
.cfg-card{padding:16px 18px}
.cfg-card-h{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-family:var(--mono);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.cfg-card-sub{font-weight:500;color:var(--muted2,#94a3b8);letter-spacing:0;text-transform:none}
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.cfg-kv{display:flex;flex-direction:column;gap:2px;min-width:0}
.cfg-k{font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-family:var(--mono)}
.cfg-v{font-size:13px;color:var(--ink);word-break:break-word}
.cfg-v a{color:var(--accent,#2563eb);text-decoration:none}
.cfg-v a:hover{text-decoration:underline}
.cfg-chip{display:inline-block;padding:2px 8px;border-radius:20px;background:var(--s2,#f1f5f9);font-size:11px;font-weight:600;color:var(--ink)}
.cfg-chip.ok{background:rgba(22,163,74,.12);color:#16a34a}
.cfg-mono{font-family:var(--mono);font-size:12px}
.cfg-empty{color:var(--muted);font-size:13px;padding:8px 0}
.cfg-plat-list{display:flex;flex-direction:column;gap:9px}
.cfg-plat-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px dashed var(--border);padding-bottom:8px}
.cfg-plat-row:last-child{border-bottom:none;padding-bottom:0}
.cfg-plat-name{font-size:13px;font-weight:600;color:var(--ink)}
.cfg-plat-ids{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.cfg-acct{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--s2,#f1f5f9);padding:2px 7px;border-radius:6px}
.cfg-table{width:100%;border-collapse:collapse;font-size:12px}
.cfg-table th{text-align:left;font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--border);font-family:var(--mono)}
.cfg-table td{padding:6px 8px;border-bottom:1px solid var(--border)}
.cfg-table tr:last-child td{border-bottom:none}
.cfg-obj{margin-bottom:12px}
.cfg-obj:last-child{margin-bottom:0}
.cfg-obj-h{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:7px}
.cfg-notes{margin-top:10px;font-size:12px;color:var(--muted);background:var(--s2,#f8fafc);border-radius:8px;padding:9px 11px;white-space:pre-wrap}
/* —— Utilizadores: clientes agrupados por projecto —— */
.usr-group-sep{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-family:var(--mono);margin:16px 0 8px;padding-top:12px;border-top:1px dashed var(--border)}
.usr-group{margin-bottom:10px}
.usr-group-h{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink);margin:0 0 4px 2px}
.usr-group-n{font-size:10px;font-weight:600;color:var(--muted);background:var(--s2,#f1f5f9);border-radius:10px;padding:1px 7px;font-family:var(--mono)}
.usr-group .usr-row{margin-left:8px}
/* —— Insights automáticos (página GA) —— */
.ga-ins-wrap{display:flex;flex-direction:column;gap:7px}
.ga-ins{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-left-width:3px;border-radius:9px;padding:9px 12px}
.ga-ins-ico{font-weight:700;line-height:1.3}
.ga-ins-good{border-left-color:#16a34a}
.ga-ins-good .ga-ins-ico{color:#16a34a}
.ga-ins-warn{border-left-color:#d97706}
.ga-ins-warn .ga-ins-ico{color:#d97706}
.ga-ins-info{border-left-color:#2563eb}
.ga-ins-info .ga-ins-ico{color:#2563eb}
.pj-partners-form{
border-top:1px dashed var(--border);padding-top:16px;margin-top:6px
}
.pj-partners-form-title{
font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;
letter-spacing:.5px;font-family:var(--mono);margin-bottom:10px
}
.pj-partners-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
/* Body */
.pj-wiz-body{flex:1;overflow-y:auto;padding:22px 26px;min-height:320px;max-height:55vh}
.pj-wiz-step-title{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.3px;margin-bottom:3px}
.pj-wiz-step-sub{font-size:12px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;margin-bottom:18px}
.pj-wiz-grid{
display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;
}
.pj-wiz-col-2{grid-column:1/-1}
.pj-wiz-field{display:flex;flex-direction:column;gap:5px}
.pj-wiz-field label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono)}
.pj-wiz-field .req{color:var(--accent);margin-left:2px}
.pj-wiz-field input[type=text]{
border:1px solid var(--border);border-radius:7px;padding:9px 11px;
font-family:var(--font);font-size:13px;color:var(--ink);outline:none;
transition:border-color .12s, box-shadow .12s;
}
.pj-wiz-field input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.pj-wiz-toggle-group{display:flex;flex-wrap:wrap;gap:6px}
.pj-wiz-toggle{
padding:6px 12px;font-size:11.5px;font-weight:700;
border:1.5px solid var(--border);background:var(--surface);color:var(--muted);
border-radius:7px;cursor:pointer;font-family:var(--font);letter-spacing:.2px;
transition:all .12s;
}
.pj-wiz-toggle:hover{border-color:var(--accent-border);color:var(--ink)}
.pj-wiz-toggle.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
/* FASE 2 · Plataformas */
.pj-wiz-plats{display:flex;flex-direction:column;gap:12px}
.pj-wiz-plat{
border:1px solid var(--border);border-radius:10px;background:var(--surface);overflow:hidden;
}
.pj-wiz-plat-hdr{
display:flex;justify-content:space-between;align-items:center;gap:14px;
padding:11px 14px;background:var(--s2);border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.pj-wiz-plat-title{font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.pj-wiz-plat-ico{font-size:15px}
.pj-wiz-plat-modes{display:flex;gap:14px;font-size:11.5px;color:var(--muted);font-family:var(--font)}
.pj-wiz-plat-modes label{display:flex;align-items:center;gap:5px;cursor:pointer}
.pj-wiz-plat-modes input[type=radio]{accent-color:var(--accent);cursor:pointer;margin:0}
.pj-wiz-plat-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.pj-wiz-plat-unused{font-size:11.5px;color:var(--muted);font-style:italic;padding:6px 0}
.pj-wiz-plat-row{display:flex;gap:10px;align-items:flex-end}
.pj-wiz-plat-id{flex:1;display:flex;flex-direction:column;gap:4px}
.pj-wiz-plat-id label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono)}
.pj-wiz-plat-id input{
border:1px solid var(--border);border-radius:6px;padding:7px 10px;
font-family:var(--mono);font-size:12px;color:var(--ink);outline:none;width:100%;
}
.pj-wiz-plat-id input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.pj-wiz-sync-btn{flex-shrink:0;white-space:nowrap}
.pj-wiz-plat-ok{font-size:11px;color:#16a34a;font-weight:700;font-family:var(--mono);padding:8px 12px;background:#dcfce7;border-radius:6px}
/* Lista de campanhas */
.pj-wiz-camps{margin-top:6px;border-top:1px dashed var(--border);padding-top:10px}
.pj-wiz-camps-hdr{
font-size:11.5px;color:var(--muted);margin-bottom:8px;
font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;
}
.pj-wiz-camps-hdr strong{color:var(--accent);font-weight:800}
.pj-wiz-camps-filters{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;align-items:center}
.pj-wiz-camps-search{
flex:1;min-width:140px;
border:1px solid var(--border);border-radius:6px;padding:5px 9px;
font-size:11.5px;color:var(--ink);outline:none;font-family:var(--font);
}
.pj-wiz-camps-search:focus{border-color:var(--accent)}
.pj-wiz-camps-quick{
font-size:10.5px;padding:4px 9px;background:var(--s2);
border:1px solid var(--border);border-radius:5px;cursor:pointer;
font-family:var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.3px;
}
.pj-wiz-camps-quick:hover{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent)}
.pj-wiz-camps-list{display:flex;flex-direction:column;gap:3px;max-height:200px;overflow-y:auto}
.pj-wiz-camp{
display:grid;grid-template-columns:18px 1fr auto auto;align-items:center;gap:8px;
padding:6px 8px;border-radius:5px;cursor:pointer;
background:var(--s2);transition:background .1s;
}
.pj-wiz-camp:hover{background:var(--accent-bg)}
.pj-wiz-camp.is-paused{opacity:.55}
.pj-wiz-camp input[type=checkbox]{accent-color:var(--accent);cursor:pointer;margin:0}
.pj-wiz-camp-name{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font)}
.pj-wiz-camp-status{
font-size:9px;font-weight:700;font-family:var(--mono);letter-spacing:.4px;
padding:2px 6px;border-radius:4px;background:#dcfce7;color:#15803d;
}
.pj-wiz-camp.is-paused .pj-wiz-camp-status{background:#fef3c7;color:#92400e}
.pj-wiz-camp-spend{
font-size:11px;font-family:var(--mono);color:var(--muted);font-weight:600;
font-variant-numeric:tabular-nums;min-width:60px;text-align:right;
}
/* Aviso plataformas em construção */
.pj-wiz-plats-soon{
margin-top:14px;padding:12px 14px;
font-size:11.5px;color:var(--muted);background:var(--s3);border-radius:8px;
border-left:3px solid #94a3b8;line-height:1.5;
}
/* Placeholder das fases ainda por implementar */
.pj-wiz-todo{
display:flex;align-items:flex-start;gap:14px;padding:18px;
background:var(--s2);border:1.5px dashed var(--border2);border-radius:10px;
}
.pj-wiz-todo-ico{font-size:28px;line-height:1}
.pj-wiz-todo-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px}
.pj-wiz-todo-desc{font-size:12px;color:var(--muted);line-height:1.4}
/* Revisão */
.pj-wiz-review{display:flex;flex-direction:column;gap:6px;background:var(--s2);border-radius:9px;padding:14px 16px;font-family:var(--font)}
.pj-wiz-review-row{
display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:6px 0;font-size:12.5px;color:var(--muted);
border-bottom:1px solid var(--border);
}
.pj-wiz-review-row:last-child{border-bottom:none}
.pj-wiz-review-row strong{color:var(--ink);font-weight:700;text-align:right;max-width:60%;word-wrap:break-word}
.pj-wiz-review-hint{margin-top:14px;font-size:11.5px;color:var(--muted);line-height:1.5}
/* Footer */
.pj-wiz-foot{
display:flex;align-items:center;gap:10px;padding:14px 22px;
background:var(--s2);border-top:1px solid var(--border);
}
.pj-wiz-foot .btn{min-width:110px}
.pj-wiz-draft{
flex:1;text-align:center;font-size:10px;font-family:var(--mono);
color:var(--muted2);text-transform:uppercase;letter-spacing:.4px;
transition:color .3s, transform .3s;
}
.pj-wiz-draft.is-saved{color:#16a34a;transform:scale(1.05)}
.pj-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:160}
.pj-modal{
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(480px,calc(100vw - 40px));max-height:calc(100vh - 60px);overflow-y:auto;
background:var(--surface);border-radius:12px;box-shadow:0 14px 50px rgba(0,0,0,.18);
z-index:161;display:flex;flex-direction:column;
}
.pj-modal-hdr{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.pj-modal-title{font-size:15px;font-weight:700;color:var(--ink)}
.pj-modal-close{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1;padding:2px 7px;border-radius:5px}
.pj-modal-close:hover{background:var(--s2)}
.pj-modal-body{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.pj-modal-foot{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--border)}
.pj-field{display:flex;flex-direction:column;gap:5px}
.pj-field label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-family:var(--mono)}
.pj-field input,.pj-field select{
border:1px solid var(--border);border-radius:7px;padding:8px 11px;
font-size:13px;font-family:var(--font);color:var(--text);background:var(--s2);outline:none;
}
.pj-field input:focus,.pj-field select:focus{border-color:var(--accent)}
.pj-types-toggle,.pj-status-toggle{display:flex;flex-wrap:wrap;gap:6px}
.pj-type-btn,.pj-status-btn{
padding:6px 11px;border:1px solid var(--border);background:var(--surface);
border-radius:6px;cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:600;
color:var(--muted2);transition:all .12s;
}
.pj-type-btn:hover,.pj-status-btn:hover{border-color:var(--border2);background:var(--s2)}
.pj-type-btn.active{color:var(--ink);font-weight:700}
.pj-type-btn.t-cpa.active{background:#fef3c7;border-color:#fde68a;color:#92400e}
.pj-type-btn.t-cpl.active{background:#dcfce7;border-color:#bbf7d0;color:#15803d}
.pj-type-btn.t-cpc.active{background:#dbeafe;border-color:#bfdbfe;color:#1d4ed8}
.pj-type-btn.t-ie.active {background:#ede9fe;border-color:#ddd6fe;color:#6d28d9}
.pj-type-btn.t-seo.active{background:#cffafe;border-color:#a5f3fc;color:#0e7490}
.pj-status-btn.active{color:#fff;font-weight:700}
.pj-status-btn.s-none.active{background:#525252;border-color:#525252}
.pj-status-btn.s-prioritaria.active{background:#2563eb;border-color:#2563eb}
.pj-status-btn.s-a-comecar.active{background:#16a34a;border-color:#16a34a}
.pj-status-btn.s-a-terminar.active{background:#dc2680;border-color:#dc2680}
.pj-status-btn.s-partilhada.active{background:#c87827;border-color:#c87827}
.pj-status-btn.s-em-pausa.active{background:#dc2626;border-color:#dc2626}
/* —— PERSPECTIVE SWITCHER —— */
.pj-user-switch{
display:flex;align-items:center;gap:6px;padding:5px 11px 5px 11px;
background:var(--surface);border:1px solid var(--border);border-radius:7px;
}
.pj-user-lbl{font-size:10px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.6px}
.pj-user-switch select{
border:none;background:none;outline:none;
font-family:var(--font);font-size:12.5px;font-weight:700;color:var(--ink);
cursor:pointer;padding:0 18px 0 0;
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 2px center;background-size:10px;
}
/* —— PARTILHAS PANEL —— */
.pj-shares{margin-bottom:14px;background:var(--surface);border:1px solid var(--border);border-radius:11px;overflow:hidden}
.pj-shares-hdr{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--s2)}
.pj-shares-title{font-size:12px;font-weight:700;color:var(--ink);font-family:var(--font)}
.pj-shares-toggle{
font-size:11px;color:var(--accent);background:none;border:none;cursor:pointer;
font-family:var(--font);font-weight:600;padding:0;
}
.pj-shares-toggle:hover{text-decoration:underline}
.pj-shares-list{padding:8px 10px;display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
.pj-share-row{
display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
padding:8px 12px;background:var(--s2);border:1px solid var(--border);border-radius:8px;
}
.pj-share-row.is-active{background:var(--accent-bg);border-color:var(--accent-border)}
.pj-share-row.is-scheduled{background:var(--blue-bg);border-color:var(--blue-border)}
.pj-share-row.is-expired{opacity:.6}
.pj-share-state{
font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
padding:3px 8px;border-radius:5px;font-family:var(--mono);
background:var(--s3);color:var(--muted2);min-width:78px;text-align:center;
}
.pj-share-row.is-active .pj-share-state{background:var(--accent);color:#fff}
.pj-share-row.is-scheduled .pj-share-state{background:var(--blue);color:#fff}
.pj-share-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.pj-share-name{font-size:13px;font-weight:600;color:var(--ink);font-family:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-share-meta{font-size:11px;color:var(--muted2);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-share-actions{display:flex;gap:5px}
.pj-share-btn{
background:none;border:1px solid var(--border);border-radius:6px;
padding:4px 9px;font-size:11px;font-family:var(--font);color:var(--muted2);
cursor:pointer;transition:all .12s;
}
.pj-share-btn:hover{background:var(--surface);border-color:var(--border2);color:var(--ink)}
.pj-share-btn.danger:hover{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.pj-share-empty{padding:14px;text-align:center;font-size:11px;color:var(--muted);font-family:var(--mono)}
/* Badge ↗ em cartão de projecto quando partilhado activamente */
.pj-proj-shared{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:50%;
background:var(--accent);color:#fff;font-size:10px;font-weight:700;
margin-right:2px;cursor:help;
}
.pj-proj.is-shared-out .pj-proj-name{opacity:.55;font-style:italic}
/* —— BULK SHARE —— */
.pj-modal-lg{width:min(640px,calc(100vw - 40px))}
.pj-bulk-list{
display:flex;flex-direction:column;gap:5px;max-height:260px;overflow-y:auto;
border:1px solid var(--border);border-radius:8px;padding:6px;background:var(--s2);
}
.pj-bulk-row{
display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;
padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-radius:7px;
transition:border-color .12s;
}
.pj-bulk-row.is-checked{border-color:var(--accent);background:var(--accent-bg)}
.pj-bulk-row input[type="checkbox"]{width:15px;height:15px;cursor:pointer;accent-color:var(--accent)}
.pj-bulk-row-name{font-size:12.5px;font-weight:600;color:var(--ink);font-family:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-bulk-row select{
border:1px solid var(--border);border-radius:6px;padding:5px 9px;font-size:12px;
font-family:var(--font);background:var(--surface);min-width:130px;outline:none;
}
.pj-bulk-row select:focus{border-color:var(--accent)}
.pj-bulk-row.is-checked select{border-color:var(--accent-border);background:#fff}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* —— AGÊNCIA · LEADS —— */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ld-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ld-selectors{display:flex;gap:9px}
.ld-sel{display:flex;align-items:center;gap:6px;padding:5px 11px;background:var(--surface);border:1px solid var(--border);border-radius:7px}
.ld-sel label{font-size:10px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.6px}
.ld-sel select{
border:none;background:none;outline:none;
font-family:var(--font);font-size:12.5px;font-weight:700;color:var(--ink);
cursor:pointer;padding:0 18px 0 0;appearance:none;min-width:130px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 2px center;background-size:10px;
}
.ld-actions{display:flex;gap:7px}
.ld-analysis-badge{
display:flex;align-items:center;gap:9px;padding:6px 12px;
background:var(--surface);border:1px solid var(--border);border-radius:8px;
transition:all .15s;
}
.ld-analysis-badge.is-stale{
background:#fffbeb;border-color:var(--amber-border);
animation:ld-pulse 2.5s ease-in-out infinite;
}
@keyframes ld-pulse{
0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,0)}
50%{box-shadow:0 0 0 4px rgba(217,119,6,.12)}
}
.ld-ab-icon{font-size:15px;line-height:1}
.ld-ab-text{display:flex;flex-direction:column;gap:0;line-height:1.15}
.ld-ab-lbl{font-size:9px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.7px;font-weight:600}
.ld-ab-date{font-size:12.5px;color:var(--ink);font-weight:700;letter-spacing:-.2px}
.ld-analysis-badge.is-stale .ld-ab-date{color:#a16207}
.ld-ab-frac{font-size:10.5px;color:var(--muted2);font-weight:500;font-family:var(--mono);margin-left:3px}
.ld-sync-btn{font-size:11.5px;padding:5px 12px;font-weight:600}
.ld-sync-btn:hover{background:#dbeafe;border-color:#3b82f6;color:#1d4ed8}
.ld-sync-yesterday{border-color:#3b82f6;color:#1d4ed8;background:#eff6ff}
.ld-sync-yesterday:hover{background:#dbeafe}
.ld-sync-btn:disabled{opacity:.6;cursor:wait}
.ld-spinner{display:inline-block;animation:ld-spin 1s linear infinite}
@keyframes ld-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* Nota editável (em edit mode) */
.ld-note-input{
display:block;margin-top:3px;width:100%;
background:transparent;border:none;border-bottom:1px dashed transparent;
padding:2px 0;font-size:10.5px;color:var(--muted2);font-family:var(--mono);
font-style:italic;outline:none;
}
.ld-note-input::placeholder{color:var(--muted);opacity:.6}
.ld-note-input:hover,.ld-note-input:focus{
border-bottom-color:var(--accent);color:var(--ink);background:#fff;
}
.ld-table-wrap{
background:var(--surface);border:1px solid var(--border);border-radius:11px;
overflow:auto;max-height:calc(100vh - 220px);
box-shadow:0 1px 2px rgba(0,0,0,.02);
}
.ld-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:12px;font-family:var(--font);color:var(--ink)}
/* Header de grupo (1ª linha) — agrupa colunas por tema */
.ld-table thead th{
position:sticky;top:0;z-index:3;
background:var(--s2);color:var(--muted2);font-weight:600;font-size:9.5px;
padding:7px 10px;text-align:center;border-bottom:1px solid var(--border);
white-space:nowrap;font-family:var(--mono);letter-spacing:.8px;text-transform:uppercase;
}
.ld-table thead .ld-grp-obj{background:#fce8d7;color:#7a2e10;border-bottom:2px solid #f5b594}
.ld-table thead .ld-grp-progress{background:#fcf0d0;color:#7a5810;border-bottom:2px solid #f5d894}
.ld-table thead .ld-grp-metrics{background:#ededed;color:#303030;border-bottom:2px solid #c8c8c8}
.ld-table thead .ld-grp-derived{background:#dbe9fc;color:#143a99;border-bottom:2px solid #93c5fd}
.ld-table thead .ld-grp-signal{background:#dcf5e2;color:#0f6630;border-bottom:2px solid #86efac}
/* Sub-header (linha com nomes das colunas) — herda tom mais claro do grupo */
.ld-table thead .ld-subhdr th{
background:#fafaf9;color:var(--muted2);font-size:9.5px;font-weight:700;
top:31px;border-bottom:1.5px solid var(--border2);padding:6px 10px;
}
/* Tom mais claro do grupo nos sub-headers (mantém legibilidade do nome) */
.ld-table thead .ld-subhdr th.ld-c-obj{background:#fdf3e8}
.ld-table thead .ld-subhdr th.ld-c-day{background:#fdf8e2}
.ld-table thead .ld-subhdr th.ld-c-met,
.ld-table thead .ld-subhdr th.ld-c-leads{background:#f4f4f4}
.ld-table thead .ld-subhdr th.ld-c-auto{background:#ecf2fc}
.ld-table thead .ld-subhdr th.ld-c-signal{background:#ebf7ee}
.ld-table th.ld-col-cat{
position:sticky;left:0;z-index:4;text-align:left;min-width:260px;max-width:300px;
background:var(--s2);border-right:1.5px solid var(--border2);padding-left:14px;
text-transform:none;letter-spacing:0;
}
.ld-table thead .ld-subhdr th.ld-col-cat{background:#fafaf9}
.ld-table th.ld-col-actions{width:30px;background:var(--s2)}
/* Body cells base */
.ld-table tbody td{
padding:9px 10px;text-align:center;
border-bottom:1px solid var(--border);white-space:nowrap;
font-variant-numeric:tabular-nums;
background:var(--surface);
}
/* —— Tons de fundo por GRUPO DE COLUNAS ——
Versões mais claras das cores do header para guiar a leitura visual.
Header: tom escuro · Sub-header: tom médio · Células: tom claro. */
.ld-table tbody td.ld-c-obj { background:#fbeede }
.ld-table tbody td.ld-c-day { background:#fbf3d4 }
.ld-table tbody td.ld-c-met { background:#f4f4f4 }
.ld-table tbody td.ld-c-leads { background:#ededed }
.ld-table tbody td.ld-c-auto { background:#e6eefb }
.ld-table tbody td.ld-c-signal { background:#e6f5ec }
.ld-num-eur{font-variant-numeric:tabular-nums;font-feature-settings:'tnum';letter-spacing:-.2px}
.ld-table td.ld-col-cat{
position:sticky;left:0;z-index:2;text-align:left;
border-right:1.5px solid var(--border);font-weight:600;padding-left:14px;
}
.ld-cat-wrap{display:flex;flex-direction:column;gap:1px;min-width:0}
.ld-cat-label{font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
/* Hierarchical levels — fundo subtil em vez de bandas saturadas */
.ld-row[data-level="1"] td{background:#f0f7ec;font-weight:700}
.ld-row[data-level="1"] td.ld-col-cat{background:#dceac8;font-size:13px;border-left:3px solid #5d8b4d}
.ld-row[data-level="1"] .ld-cat-label{color:#2c4a1d;text-transform:none;letter-spacing:.1px}
.ld-row[data-level="2"] td{background:#f5faf2;font-weight:600}
.ld-row[data-level="2"] td.ld-col-cat{background:#e8f2dc;padding-left:24px;border-left:3px solid #7baa5d}
.ld-row[data-level="2"] .ld-cat-label{color:#3a5e25;text-transform:uppercase;font-size:11.5px;letter-spacing:.6px;font-weight:700}
.ld-row[data-level="3"] td{background:#fafdf7;font-weight:600}
.ld-row[data-level="3"] td.ld-col-cat{background:#eef6e3;padding-left:34px;border-left:3px solid #a8c587}
.ld-row[data-level="3"] .ld-cat-label{color:#4d6a30;font-size:12px}
.ld-row[data-level="4"] td.ld-col-cat{padding-left:50px;background:var(--surface);border-left:3px solid transparent}
.ld-row[data-level="4"] .ld-cat-label{font-weight:500;color:var(--muted2);font-size:11.5px}
.ld-row[data-level="4"] td{color:var(--muted2);font-weight:500}
.ld-row[data-level="4"] td:not(.ld-col-cat):not(.ld-c-signal):empty::before{content:'—';color:var(--border2)}
/* Hover */
.ld-table tbody tr.ld-row:hover td{background:#fffdfb}
.ld-table tbody tr.ld-row[data-level="1"]:hover td{background:#e9f2e3}
.ld-table tbody tr.ld-row[data-level="2"]:hover td{background:#eef6e9}
.ld-table tbody tr.ld-row[data-level="3"]:hover td{background:#f4f9ee}
/* Edit mode */
.ld-table.is-editing td[data-field]{cursor:cell;position:relative}
.ld-table.is-editing td[data-field]::after{
content:'';position:absolute;inset:3px;border:1.5px dashed transparent;border-radius:4px;pointer-events:none;
}
.ld-table.is-editing td[data-field]:hover::after{border-color:var(--accent)}
/* Mês column — pill */
.ld-c-mes{color:var(--accent);font-weight:700;font-size:10.5px;letter-spacing:.6px;font-family:var(--mono)}
/* Objectivos cells (sem fundo agressivo) */
.ld-c-obj{color:#1a1a18}
.ld-row[data-level="1"] .ld-c-obj,.ld-row[data-level="2"] .ld-c-obj{color:#1a1a18}
.ld-row[data-level="4"] .ld-c-obj{color:var(--muted2)}
/* Dia/Dias — quietos */
.ld-c-day{color:var(--muted2);font-family:var(--mono);font-size:11px}
.ld-row[data-level="1"] .ld-c-day,.ld-row[data-level="2"] .ld-c-day{color:var(--ink)}
/* Métricas (clicks, gasto, sessoes) */
.ld-c-met{color:var(--ink)}
.ld-row[data-level="4"] .ld-c-met{color:var(--muted2)}
/* Leads */
.ld-c-leads{color:#1d4ed8;font-weight:700}
.ld-row[data-level="4"] .ld-c-leads{color:#2563eb;font-weight:600}
/* Auto-calc (cinzentos subtis) */
.ld-c-auto{color:var(--muted2)}
.ld-row[data-level="1"] .ld-c-auto,.ld-row[data-level="2"] .ld-c-auto,.ld-row[data-level="3"] .ld-c-auto{color:var(--ink)}
/* —— SIGNAL CELLS (pills) —— */
.ld-c-signal{padding:6px 8px}
.ld-pill{
display:inline-flex;align-items:center;gap:4px;
padding:3px 9px;border-radius:11px;
font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
font-family:var(--font);min-width:60px;justify-content:center;
border:1px solid transparent;letter-spacing:-.2px;
}
.ld-pill-icon{font-size:8px;line-height:1;opacity:.9}
.ld-pill-good{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.ld-pill-warn{background:#fef9c3;color:#92400e;border-color:#fde68a}
.ld-pill-bad {background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.ld-pill-info{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.ld-pill-mute{background:var(--s3);color:var(--muted);border-color:var(--border)}
/* Linha "Falta Gastar" — banner subtil */
.ld-falta-row td{
background:linear-gradient(90deg, rgba(220,38,38,0.05) 0%, transparent 50%);
padding:8px 14px 8px 16px;
font-size:11px;color:var(--muted2);font-family:var(--mono);text-transform:uppercase;letter-spacing:.6px;
border-bottom:none;border-top:1px solid var(--border);
text-align:left;font-weight:600;
}
.ld-falta-lbl{color:var(--muted)}
.ld-falta-val{color:#dc2626;font-weight:700;font-family:var(--font);font-size:12.5px;margin-left:8px;letter-spacing:-.2px;text-transform:none}
/* Nota livre */
.ld-note{
display:inline-block;font-size:9.5px;font-weight:700;color:#dc2626;background:#fee2e2;
padding:1px 6px;border-radius:4px;margin-top:2px;letter-spacing:.3px;
font-family:var(--mono);
}
/* Cell input em edit mode */
.ld-cell-input{
width:100%;border:1.5px solid var(--accent);border-radius:5px;padding:5px 7px;
font-family:var(--font);font-size:12px;text-align:center;outline:none;
background:#fff;color:var(--ink);font-variant-numeric:tabular-nums;
}
/* Input quando se edita o label — alinhamento à esquerda + max-width controlado */
.ld-cell-input-label{text-align:left;max-width:280px;font-weight:600}
/* Hint visual no label editável em edit mode (aplica-se LEADS + IE) */
.ld-cat-label[data-field]{cursor:pointer;border-radius:3px;padding:1px 3px;margin-left:-3px;transition:background .12s}
.ld-cat-label[data-field]:hover{background:rgba(234,70,42,0.08);outline:1px dashed rgba(234,70,42,0.4)}
/* Popover ao clicar ＋ — escolher entre "Sub-linha" ou "Canal" */
.ld-add-menu{
position:absolute;z-index:10000;width:240px;
background:var(--surface);border:1px solid var(--border);border-radius:8px;
box-shadow:0 8px 28px rgba(0,0,0,0.18);
padding:6px;display:flex;flex-direction:column;gap:2px;
animation:ldAddMenuIn .12s ease-out;
}
@keyframes ldAddMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ld-add-menu-opt{
display:flex;align-items:flex-start;gap:10px;padding:9px 11px;
border:none;background:transparent;border-radius:6px;cursor:pointer;
font-family:var(--font);text-align:left;color:var(--text);
transition:background .1s;
}
.ld-add-menu-opt:hover{background:var(--s2)}
.ld-add-menu-ico{
flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
font-size:14px;color:var(--accent);background:rgba(234,70,42,0.10);border-radius:5px;
}
.ld-add-menu-lbl{font-size:12.5px;line-height:1.35}
.ld-add-menu-lbl strong{font-weight:600;color:var(--text)}
.ld-add-menu-lbl small{color:var(--muted);font-size:11px}
/* Coluna acções */
.ld-col-actions{width:30px;background:var(--surface)}
.ld-row[data-level="1"] .ld-col-actions{background:#f0f7ec}
.ld-row[data-level="2"] .ld-col-actions{background:#f5faf2}
.ld-row[data-level="3"] .ld-col-actions{background:#fafdf7}
.ld-row-del{
width:22px;height:22px;border:none;background:none;cursor:pointer;
color:var(--muted);font-size:16px;border-radius:4px;line-height:1;
}
.ld-row-del:hover{background:var(--red-bg);color:var(--red)}
.ld-row-cfg{
width:22px;height:22px;border:none;background:none;cursor:pointer;
color:var(--muted);font-size:13px;border-radius:4px;line-height:1;margin-right:2px;
}
.ld-row-cfg:hover{background:var(--surface-2,#f0f1f3);color:var(--ink)}
.ld-row-addchild{
width:22px;height:22px;border:none;background:none;cursor:pointer;
color:var(--muted);font-size:14px;font-weight:700;border-radius:4px;line-height:1;
}
.ld-row-addchild:hover{background:var(--green-bg,#dcfce7);color:var(--green,#15803d)}
.ld-row-drag{
display:inline-block;cursor:grab;color:var(--muted);font-size:14px;padding:0 4px;
border-radius:4px;line-height:1;user-select:none;
}
.ld-row-drag:hover{background:var(--surface-2,#f0f1f3);color:var(--ink)}
.ld-row-drag:active{cursor:grabbing}
.ld-row.is-dragging{opacity:.4}
.ld-row.is-drop-target{border-top:2px solid var(--brand,#ea462a) !important}
.ld-row.is-drop-into{background:var(--blue-bg,#dbeafe) !important;outline:1.5px dashed var(--blue,#2563eb);outline-offset:-2px}
.ld-cfg-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;margin-left:6px;font-size:10px;background:var(--surface-2,#f1f3f5);border:1px solid var(--border);border-radius:10px;color:var(--ink);font-weight:500;white-space:nowrap}
/* Badge "→ Linha Performance" nas tabelas Google Ads / Meta Ads */
.perf-line-badge{
display:inline-flex;align-items:center;padding:1px 7px;font-size:9.5px;font-weight:600;
background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;color:#c2410c;
white-space:nowrap;letter-spacing:.2px;
}
/* ━ Modal de configuração de linha (editor inline Performance) ━ */
.ld-cfg-back{position:fixed;inset:0;background:rgba(20,20,22,.5);display:flex;align-items:center;justify-content:center;z-index:9000;backdrop-filter:blur(2px)}
.ld-cfg-modal{background:var(--surface);border-radius:12px;width:min(560px,92vw);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.25);overflow:hidden}
.ld-cfg-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.ld-cfg-title{font-size:14px;font-weight:700;color:var(--ink)}
.ld-cfg-close{border:none;background:none;font-size:22px;cursor:pointer;color:var(--muted);width:28px;height:28px;border-radius:6px;line-height:1}
.ld-cfg-close:hover{background:var(--surface-2,#f1f3f5);color:var(--ink)}
.ld-cfg-body{padding:18px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.ld-cfg-field{display:flex;flex-direction:column;gap:5px}
.ld-cfg-lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.ld-cfg-field input,.ld-cfg-field select{border:1px solid var(--border);border-radius:7px;padding:8px 12px;font-size:13px;font-family:var(--font);background:var(--surface);outline:none;color:var(--ink)}
.ld-cfg-field input:focus,.ld-cfg-field select:focus{border-color:var(--brand)}
.ld-cfg-preview{background:var(--surface-2,#fafbfc);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12px;min-height:60px}
.ld-cfg-preview-hdr{margin-bottom:6px;font-size:12px;color:var(--ink)}
.ld-cfg-preview-hdr code{background:var(--surface);padding:1px 5px;border-radius:4px;font-size:11px;border:1px solid var(--border)}
.ld-cfg-preview-list{list-style:none;margin:0;padding:0;max-height:180px;overflow-y:auto}
.ld-cfg-preview-list li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed var(--border);font-size:11px}
.ld-cfg-preview-list li:last-child{border-bottom:none}
.ld-cfg-pv-name{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-cfg-pv-spend{font-family:var(--mono);color:var(--muted);font-size:10px;white-space:nowrap}
.ld-cfg-pv-more{justify-content:center !important;color:var(--muted);font-style:italic}
.ld-cfg-preview-empty,.ld-cfg-preview-loading,.ld-cfg-preview-hint{color:var(--muted);font-style:italic;text-align:center;padding:8px 0;font-size:11px}
.ld-cfg-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--border)}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Visão Geral · OBJETIVOS — tabela cross-cliente
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.obj-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.obj-info{font-size:11px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px}
.obj-table-wrap{
background:var(--surface);border:1px solid var(--border);border-radius:10px;
overflow:auto;box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.obj-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:12px;font-family:var(--font);color:var(--ink)}
.obj-table thead th{
padding:11px 12px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
color:var(--muted2);background:var(--s2);border-bottom:1px solid var(--border);
white-space:nowrap;text-align:center;position:sticky;top:0;z-index:2;
}
.obj-table thead .obj-th-label{
text-align:left;background:#fef9e8;color:#856404;border-bottom:2px solid #f4d674;
position:sticky;left:0;z-index:3;min-width:200px;
}
.obj-table thead .obj-th-avatar{background:var(--s2);width:42px;padding:0}
.obj-table thead .obj-th-channel{background:var(--surface);color:var(--ink);font-weight:600;min-width:110px}
.obj-table thead .obj-th-target{background:#fde2e2;color:#b91c1c;border-bottom:2px solid #f3bdbd;min-width:110px}
.obj-table thead .obj-th-actual{background:#fafaf9;color:var(--ink);min-width:110px}
.obj-table tbody td{
padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface);
vertical-align:middle;
}
.obj-table tbody tr:hover td{background:#fffdfb}
.obj-c-label{
font-weight:600;color:var(--ink);text-align:left;
position:sticky;left:0;background:var(--surface);z-index:1;
border-right:1px solid var(--border);min-width:200px;
}
.obj-table tbody tr:hover .obj-c-label{background:#fffdfb}
.obj-c-avatar{width:42px;text-align:center;padding:6px 0}
.obj-avatar{
width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--s3);
display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--surface);
box-shadow:0 0 0 1px var(--border);
}
.obj-avatar img{width:100%;height:100%;object-fit:cover}
.obj-avatar.tone-blue{box-shadow:0 0 0 1px #93c5fd}
.obj-avatar.tone-green{box-shadow:0 0 0 1px #86efac}
.obj-avatar.tone-pink{box-shadow:0 0 0 1px #f9a8d4}
.obj-avatar.tone-grey{box-shadow:0 0 0 1px var(--border)}
.obj-c-num{text-align:center;font-variant-numeric:tabular-nums;color:var(--ink)}
/* Colunas de OBJETIVO (Investimento, Obj Leads/Vendas, Receita, Obj Interações,
CPL, CPA, CPR) — fundo vermelho leve. Specificity acima de `.obj-table tbody td`. */
.obj-table tbody td.obj-c-target{background:#fdecec}
/* Input editável de objetivo (guardado por mês) */
.obj-edit{width:100%;max-width:88px;box-sizing:border-box;text-align:center;font:inherit;font-variant-numeric:tabular-nums;
color:var(--ink);background:transparent;border:1px solid transparent;border-radius:5px;padding:3px 4px;cursor:text}
.obj-edit:hover{border-color:var(--border)}
.obj-edit:focus{outline:none;border-color:var(--accent,#5B86E5);background:#fff;box-shadow:0 0 0 2px rgba(91,134,229,.15)}
.obj-edit::placeholder{color:var(--muted)}
.obj-table tbody tr:hover td.obj-c-target{background:#fbdada}
.obj-c-actual{background:#fafafa}
.obj-table tbody tr:hover .obj-c-actual{background:#f5f5f4}
.obj-pct-green{color:#15803d;font-weight:700}
.obj-pct-green-strong{
background:#bbf7d0;color:#14532d;font-weight:800;
padding:2px 8px;border-radius:5px;display:inline-block;
}
.obj-pct-amber{color:#a16207;font-weight:700}
.obj-pct-red{color:#b91c1c;font-weight:700}
.obj-row-empty .obj-c-num{color:var(--muted)}
.obj-row-empty .obj-c-label{color:var(--ink)}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Performance · Tabela INTERAÇÃO (por baixo da tabela LEADS)
Herda completamente o styling da .ld-table; só adiciona o título da secção.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ld-ie-wrap{margin-top:28px;display:flex;flex-direction:column;gap:10px}
/* ROAS na tabela e-commerce: verde se saudável, vermelho se fraco */
.ld-c-auto.ld-roas-good{color:#15803d;font-weight:700}
.ld-c-auto.ld-roas-bad{color:#b91c1c;font-weight:700}
.ld-ie-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 4px;border-bottom:2px solid var(--accent)}
.ld-ie-header #ldAddRowIe{min-height:36px}
.ld-ie-empty{padding:32px 20px;text-align:center;color:var(--muted);font-size:13px;background:var(--s2);border-radius:8px;border:1px dashed var(--border)}
.ld-ie-empty strong{color:var(--text)}
/* Banner amarelo de erros de API — aparece sob a toolbar quando o sync
apanhou erros (Meta sem permissão, GA quota, etc). */
.ld-api-errors{background:rgba(245,158,11,0.10);border:1px solid rgba(245,158,11,0.40);border-radius:8px;padding:12px 16px;margin-bottom:14px;color:var(--text)}
.ld-api-errors-hdr{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:6px}
.ld-api-errors-icon{font-size:16px}
.ld-api-errors-list{margin:0;padding-left:22px;font-size:12px;line-height:1.55;color:var(--muted)}
.ld-api-errors-list li{margin:2px 0}
.ld-api-errors-list strong{color:var(--text)}
.ld-ie-title{
font-size:18px;font-weight:800;letter-spacing:.5px;
font-family:var(--brand, var(--font));color:var(--accent);text-transform:uppercase;
}
.ld-ie-sub{font-size:11px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px}
/* Ritmo coluna (mesmas semânticas verde/laranja/vermelho da tabela LEADS) */
.ld-ritmo-good{color:#15803d;font-weight:700}
.ld-ritmo-warn{background:#fef3c7;color:#92400e;font-weight:700;padding:2px 8px;border-radius:5px;display:inline-block}
.ld-ritmo-bad{background:#fef0ec;color:#b91c1c;font-weight:700;padding:2px 8px;border-radius:5px;display:inline-block}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SEARCH BAR GLOBAL (header)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.global-search{position:relative;flex:1;max-width:420px;min-width:240px}
.global-search-icon{
position:absolute;left:12px;top:50%;transform:translateY(-50%);
font-size:13px;pointer-events:none;opacity:.6;
}
.global-search-input{
width:100%;padding:8px 12px 8px 34px;
font-size:13px;font-family:var(--font);font-weight:500;
background:var(--s2);border:1px solid var(--border);border-radius:8px;
color:var(--ink);outline:none;
transition:border-color .15s, box-shadow .15s, background .15s;
}
.global-search-input::placeholder{color:var(--muted);font-weight:400}
.global-search-input:focus{
background:var(--surface);border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-bg);
}
.global-search-results{
display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;
background:var(--surface);border:1px solid var(--border);border-radius:10px;
box-shadow:0 8px 24px rgba(0,0,0,.08);
max-height:480px;overflow:auto;z-index:100;
}
.gs-loading,.gs-empty{padding:14px;font-size:12px;color:var(--muted);text-align:center;font-family:var(--mono)}
.gs-group{padding:8px 0;border-bottom:1px solid var(--border)}
.gs-group:last-child{border-bottom:none}
.gs-group-title{
font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;
letter-spacing:.6px;font-family:var(--mono);
padding:4px 14px 6px;display:flex;justify-content:space-between;align-items:center;
}
.gs-count{
font-size:9px;background:var(--s3);color:var(--muted);
padding:1px 6px;border-radius:9px;font-weight:600;
}
.gs-item{
display:flex;align-items:center;gap:11px;padding:8px 14px;cursor:pointer;
transition:background .1s;
}
.gs-item:hover{background:var(--accent-bg)}
.gs-icon{font-size:16px;width:24px;text-align:center}
.gs-meta{flex:1;min-width:0}
.gs-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.gs-sub{font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-item mark{background:var(--accent-bg);color:var(--accent);font-weight:700;padding:0 1px;border-radius:2px}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PAGE TOOLBAR (data + Exportar por página)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-toolbar{
display:flex;justify-content:space-between;align-items:center;gap:10px;
margin:0 0 14px;padding:8px 12px;
background:var(--s2);border:1px solid var(--border);border-radius:10px;
flex-wrap:wrap;
}
.page-toolbar .pt-left,.page-toolbar .pt-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pt-date-wrap{position:relative}
.pt-date-pill{
display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
background:var(--surface);border:1px solid var(--border);border-radius:8px;
font-size:12px;font-weight:600;font-family:var(--font);color:var(--ink);
cursor:pointer;outline:none;transition:border-color .15s, box-shadow .15s;
}
.pt-date-pill:hover{border-color:var(--accent-border)}
.pt-date-icon{font-size:13px}
.pt-date-text{font-variant-numeric:tabular-nums}
.pt-date-caret{font-size:10px;opacity:.6}
.pt-date-pop{
position:absolute;top:calc(100% + 6px);left:0;
background:var(--surface);border:1px solid var(--border);border-radius:10px;
box-shadow:0 8px 24px rgba(0,0,0,.08);padding:12px;min-width:260px;z-index:50;
}
.pt-date-lbl{
font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;
letter-spacing:.6px;font-family:var(--mono);margin-bottom:8px;
}
.pt-date-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-bottom:6px}
.pt-date-row input[type=date]{
border:1px solid var(--border);border-radius:6px;padding:5px 8px;
font-family:var(--mono);font-size:11px;color:var(--ink);
}
.pt-date-presets{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.pt-preset{
font-size:11px;padding:4px 8px;background:var(--s2);border:1px solid var(--border);
border-radius:6px;cursor:pointer;color:var(--ink);font-family:var(--font);
transition:background .12s, border-color .12s;
}
.pt-preset:hover{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent)}
.pt-date-actions{display:flex;gap:6px;margin-top:10px}
.pt-date-actions .btn{flex:1}
.pt-export{font-weight:600}
.pt-export-wrap{position:relative}
.pt-export-menu{
position:absolute;top:calc(100% + 4px);right:0;z-index:120;
background:var(--surface);border:1px solid var(--border);
border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.08);
min-width:260px;overflow:hidden;
animation:ptExportIn .14s ease;
}
@keyframes ptExportIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pt-export-opt{
display:flex;width:100%;align-items:center;gap:10px;
padding:10px 14px;background:transparent;border:0;cursor:pointer;
text-align:left;font-family:inherit;
border-bottom:1px solid var(--border);
}
.pt-export-opt:last-child{border-bottom:0}
.pt-export-opt:hover{background:var(--s2)}
.pt-export-opt-ico{font-size:18px;flex-shrink:0}
.pt-export-opt-body{flex:1;min-width:0}
.pt-export-opt-t{font-size:13px;font-weight:600;color:var(--ink)}
.pt-export-opt-d{font-size:11px;color:var(--muted);margin-top:1px}
/* Botão "↗ Abrir no Platform" — usado nas páginas Google Ads, Meta, GA */
.plat-open-btn{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;font-size:12px;font-weight:600;
background:#fff;border:1px solid var(--border);border-radius:7px;
color:var(--ink);cursor:pointer;font-family:inherit;
text-decoration:none;transition:all .12s;
}
.plat-open-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.plat-open-btn .plat-open-ico{font-size:13px}
/* Toast para confirmar copy do customer ID quando abre Google Ads */
.plat-toast{
position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;
font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.2);
opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
z-index:10000;max-width:520px;
}
.plat-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.plat-toast strong{color:var(--accent-bg);font-family:var(--mono)}
/* —— Print styles para Exportar PDF —— */
@media print {
body.is-printing .sidebar,
body.is-printing .topbar,
body.is-printing .gchat-fab,
body.is-printing #gchatDrawer,
body.is-printing .page-toolbar,
body.is-printing .pt-export-menu,
body.is-printing .global-search,
body.is-printing .ai-chat-btn,
body.is-printing .bell-wrap,
body.is-printing .tb-nav-btn{
display:none !important;
}
body.is-printing .app{grid-template-columns:1fr !important;display:block !important}
body.is-printing .main{margin:0 !important;width:100% !important;overflow:visible !important;height:auto !important;max-height:none !important}
body.is-printing .page{padding:0 !important}
body.is-printing .page.active{display:block !important}
body.is-printing{background:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
@page{margin:1cm}
}
/* Comparativos (mês anterior / ano anterior) */
.pt-date-lbl-cmp{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);display:flex;align-items:center;gap:4px}
.pt-cmp-help{color:var(--muted);cursor:help;font-size:11px}
.pt-cmp-row{
display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);
padding:5px 0;cursor:pointer;user-select:none;
}
.pt-cmp-row input[type=checkbox]{cursor:pointer;accent-color:var(--accent);margin:0}
.pt-cmp-hint{
margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted);
background:var(--s2);padding:1px 6px;border-radius:5px;
}
.pt-cmp-badge{
display:inline-flex;align-items:center;gap:5px;padding:5px 10px;
font-size:11px;font-weight:600;font-family:var(--mono);
background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);
border-radius:8px;cursor:pointer;letter-spacing:.2px;
transition:background .12s;
}
.pt-cmp-badge:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SINO DE NOTIFICAÇÕES — análise automática da Performance
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ld-bell-wrap{position:relative;display:inline-flex}
.ld-bell-btn{
position:relative;background:var(--surface);border:1px solid var(--border);
border-radius:8px;width:36px;height:36px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
font-size:15px;transition:border-color .15s, box-shadow .15s, background .12s;
}
.ld-bell-btn:hover{border-color:var(--accent-border);background:var(--accent-bg)}
.ld-bell-ico{line-height:1}
.ld-bell-badge{
position:absolute;top:-5px;right:-5px;
min-width:18px;height:18px;border-radius:9px;
background:#fef3c7;color:#92400e;
font-size:10px;font-weight:800;font-family:var(--mono);
display:inline-flex;align-items:center;justify-content:center;
padding:0 5px;border:1.5px solid var(--surface);
line-height:1;letter-spacing:-.3px;
}
.ld-bell-badge-critical{background:#ef4444;color:#fff}
.ld-bell-pop{
position:absolute;top:calc(100% + 8px);right:0;
width:420px;max-height:520px;
background:var(--surface);border:1px solid var(--border);border-radius:12px;
box-shadow:0 12px 32px rgba(0,0,0,.1);
overflow:hidden;z-index:100;
display:flex;flex-direction:column;
}
.ld-bell-hdr{
padding:14px 16px;border-bottom:1px solid var(--border);background:var(--s2);
}
.ld-bell-hdr-title{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.1px}
.ld-bell-hdr-sub{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px;text-transform:uppercase;letter-spacing:.4px}
.ld-bell-list{flex:1;overflow:auto;padding:6px 0}
.ld-bell-group{padding:6px 0}
.ld-bell-group-title{
font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
padding:4px 16px 6px;display:flex;align-items:center;gap:8px;font-family:var(--mono);
}
.ld-bell-group-critical .ld-bell-group-title{color:#b91c1c}
.ld-bell-group-warning .ld-bell-group-title{color:#a16207}
.ld-bell-group-info .ld-bell-group-title{color:#1d4ed8}
.ld-bell-group-count{
font-size:9px;font-weight:600;padding:1px 6px;border-radius:9px;
}
.ld-bell-group-critical .ld-bell-group-count{background:#fee2e2;color:#b91c1c}
.ld-bell-group-warning .ld-bell-group-count{background:#fef3c7;color:#a16207}
.ld-bell-group-info .ld-bell-group-count{background:#dbeafe;color:#1d4ed8}
.ld-bell-item{
display:flex;gap:10px;padding:10px 16px;cursor:pointer;
border-left:3px solid transparent;transition:background .12s;
}
.ld-bell-item:hover{background:var(--s2)}
.ld-bell-item-critical{border-left-color:#ef4444}
.ld-bell-item-warning {border-left-color:#f59e0b}
.ld-bell-item-info {border-left-color:#3b82f6}
.ld-bell-item-ico{font-size:16px;width:20px;text-align:center;line-height:1.2;flex-shrink:0}
.ld-bell-item-body{flex:1;min-width:0}
.ld-bell-item-title{
font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.35;
letter-spacing:-.1px;
}
.ld-bell-item-desc{
font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.4;
}
.ld-bell-empty{padding:36px 20px;text-align:center}
.ld-bell-empty-ico{
font-size:24px;width:48px;height:48px;margin:0 auto 10px;
background:#dcfce7;color:#15803d;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;font-weight:700;
}
.ld-bell-empty-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px}
.ld-bell-empty-desc{font-size:11px;color:var(--muted);font-family:var(--mono)}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
REUNIÕES — atas semanais
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rn-wrap{display:flex;flex-direction:column;gap:18px}
.rn-list-hdr{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.rn-page-title{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.rn-page-sub{font-size:12px;color:var(--muted);font-family:var(--mono);margin-top:3px;text-transform:uppercase;letter-spacing:.4px}
.rn-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.rn-card{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:14px 16px;display:flex;flex-direction:column;gap:8px;
transition:border-color .12s, box-shadow .12s;
}
.rn-card:hover{border-color:var(--accent-border);box-shadow:0 4px 14px rgba(0,0,0,.04)}
.rn-card-hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.rn-card-title{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.1px;line-height:1.3}
.rn-status{font-size:9px;font-weight:700;padding:2px 8px;border-radius:9px;letter-spacing:.4px;text-transform:uppercase;font-family:var(--mono);flex-shrink:0}
.rn-status-draft{background:#fef3c7;color:#92400e}
.rn-status-published{background:#dcfce7;color:#166534}
.rn-card-meta{font-size:11px;color:var(--muted);font-family:var(--mono);display:flex;align-items:center;gap:6px}
.rn-card-actions{display:flex;gap:6px;margin-top:auto;padding-top:6px}
.rn-avatar{width:18px;height:18px;border-radius:50%;object-fit:cover;vertical-align:middle;border:1px solid var(--border)}
.rn-empty{
background:var(--surface);border:1px dashed var(--border);border-radius:14px;
padding:48px 24px;text-align:center;
}
.rn-empty-ico{font-size:42px;margin-bottom:10px}
.rn-empty-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}
.rn-empty-desc{font-size:12px;color:var(--muted);max-width:380px;margin:0 auto}
/* Editor */
.rn-editor-hdr{
display:flex;align-items:center;gap:10px;padding:10px 14px;
background:var(--s2);border:1px solid var(--border);border-radius:10px;flex-wrap:wrap;
}
.rn-editor-meta{
display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;
background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;
}
.rn-field{display:flex;flex-direction:column;gap:5px}
.rn-field label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-family:var(--mono)}
.rn-input{
border:1px solid var(--border);border-radius:7px;padding:8px 11px;
font-size:13px;font-family:var(--font);color:var(--ink);background:var(--surface);
outline:none;transition:border-color .12s, box-shadow .12s;
}
.rn-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.rn-sections{display:flex;flex-direction:column;gap:14px}
.rn-section{
background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
}
.rn-section-hdr{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.rn-section-title{
flex:1;border:none;border-bottom:2px solid var(--border);background:transparent;
font-size:16px;font-weight:800;color:var(--accent);padding:5px 2px;
font-family:var(--brand, var(--font));text-transform:uppercase;letter-spacing:.4px;outline:none;
}
.rn-section-title:focus{border-bottom-color:var(--accent)}
.rn-section-del{color:var(--muted);background:transparent;border:1px solid var(--border)}
.rn-section-del:hover{color:var(--red);border-color:var(--red)}
.rn-projects{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.rn-project{
background:#f0fdf4;border:1px solid #bbf7d0;border-radius:9px;padding:10px 12px;
display:flex;flex-direction:column;gap:6px;
}
.rn-project-hdr{display:flex;align-items:center;gap:8px}
.rn-project-hash{color:#15803d;font-weight:800;font-size:14px}
.rn-project-name{
flex:1;border:none;background:transparent;font-size:13px;font-weight:700;color:#15803d;
padding:4px 2px;outline:none;font-family:var(--font);
}
.rn-project-name:focus{background:#fff;border-radius:5px;padding-left:6px}
.rn-project-colab{display:flex;align-items:center;gap:5px}
.rn-project-colab-sel{padding:4px 24px 4px 8px;font-size:11px;background-position:right 6px center}
.rn-project-del{background:transparent;border:1px solid var(--border);color:var(--muted);padding:2px 8px;font-size:14px;border-radius:5px;cursor:pointer}
.rn-project-del:hover{color:var(--red);border-color:var(--red)}
.rn-tasks{display:flex;flex-direction:column;gap:6px;margin-left:18px}
.rn-task{display:flex;align-items:center;gap:8px;padding:4px 0;min-width:0}
.rn-task .rn-task-text{min-width:0}
.rn-task-bullet{color:var(--muted);font-weight:700}
.rn-task-text{
flex:1;border:none;background:transparent;font-size:12.5px;color:var(--ink);
padding:4px 0;outline:none;font-family:var(--font);
}
.rn-task-text:focus{background:var(--s2);border-radius:5px;padding-left:8px}
.rn-task-del{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:14px;width:22px;height:22px;border-radius:4px;line-height:1}
.rn-task-del:hover{background:var(--red-bg);color:var(--red)}
.rn-add-task,.rn-add-project,.rn-add-section{
background:transparent;border:1px dashed var(--border);color:var(--muted);
font-size:11px;font-weight:600;padding:6px 12px;font-family:var(--mono);
text-transform:uppercase;letter-spacing:.4px;
}
.rn-add-task{margin-left:18px;margin-top:4px}
.rn-add-section{align-self:flex-start;padding:9px 16px;font-size:12px}
.rn-add-task:hover,.rn-add-project:hover,.rn-add-section:hover,.rn-add-team-task:hover{
border-color:var(--accent);color:var(--accent);background:var(--accent-bg);
}
/* Secção Tarefas Equipa — tarefas livres, colab por tarefa */
.rn-section-team{background:#fafbf7;border-color:#e5e7d8}
.rn-section-team .rn-section-title{color:#15803d}
.rn-section-badge{
font-size:9px;font-weight:700;color:#15803d;background:#dcfce7;
padding:3px 8px;border-radius:9px;letter-spacing:.4px;text-transform:uppercase;
font-family:var(--mono);white-space:nowrap;
}
.rn-team-tasks{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.rn-team-task{
display:grid;grid-template-columns:14px 1fr auto auto auto;align-items:center;gap:8px;
padding:6px 8px;background:#fff;border:1px solid var(--border);border-radius:6px;
}
.rn-team-task-text{
border:none;background:transparent;font-size:13px;color:var(--ink);
padding:4px 0;outline:none;width:100%;font-family:var(--font);
}
.rn-team-task-text:focus{background:var(--s2);border-radius:5px;padding-left:8px}
.rn-team-task-colab{display:flex;align-items:center;gap:5px}
.rn-team-task-colab-sel{padding:4px 24px 4px 8px;font-size:11px;background-position:right 6px center}
.rn-team-task-del{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:14px;width:22px;height:22px;border-radius:4px;line-height:1}
.rn-team-task-del:hover{background:var(--red-bg);color:var(--red)}
.rn-add-team-task{
align-self:flex-start;background:transparent;border:1px dashed var(--border);
color:var(--muted);padding:6px 14px;font-size:12px;border-radius:6px;cursor:pointer;
font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;
}
/* Pseudo-avatar "Todos" (quando colab === 'todos') */
.rn-avatar-all{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:50%;
background:var(--accent-bg);color:var(--accent);
border:1px solid var(--accent-border);font-size:11px;vertical-align:middle;
}
/* Tarefa concluída — strikethrough + ✓ verde */
.rn-task.is-done .rn-task-text,
.rn-team-task.is-done .rn-team-task-text,
.rn-subtask.is-done .rn-subtask-text{
text-decoration:line-through;color:var(--muted);
}
.rn-task.is-done, .rn-team-task.is-done, .rn-subtask.is-done{opacity:.75}
.rn-task-check{
display:inline-flex;align-items:center;justify-content:center;
width:14px;height:14px;border-radius:50%;
background:#10b981;color:#fff;font-size:9px;font-weight:700;
flex-shrink:0;
}
/* "previouslyDone" = concluída na ata anterior, trazida pela duplicação.
Distinguir visualmente do ✓ verde activo: cinza com cursor clicável. */
.rn-task-check.is-prev{
background:var(--muted);cursor:pointer;
}
.rn-task-check.is-prev:hover{
background:var(--accent);
}
.rn-task.is-prev-done .rn-task-text,
.rn-team-task.is-prev-done .rn-team-task-text,
.rn-subtask.is-prev-done .rn-subtask-text{
color:var(--muted);
}
/* Botão "+ sub" para adicionar sub-tarefa */
.rn-task-addsub{
background:transparent;border:1px dashed var(--border);
color:var(--muted);font-size:9.5px;font-weight:700;
padding:2px 7px;border-radius:5px;cursor:pointer;
font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;
white-space:nowrap;
}
.rn-task-addsub:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
/* Sub-tarefas — indentadas, parecidas com team task mas mais leves */
.rn-task-wrap, .rn-team-task-wrap{display:flex;flex-direction:column;gap:3px}
.rn-subtasks{
display:flex;flex-direction:column;gap:3px;
margin-left:22px;padding-left:8px;
border-left:2px solid var(--border);
}
.rn-subtask{
display:grid;grid-template-columns:14px 1fr auto auto;align-items:center;gap:8px;
padding:4px 8px;background:#fafafa;border:1px dashed var(--border);border-radius:6px;
}
.rn-subtask-bullet{color:var(--muted);font-size:11px}
.rn-subtask-text{
border:none;background:transparent;font-size:12px;color:var(--ink);
padding:3px 0;outline:none;width:100%;font-family:var(--font);
}
.rn-subtask-text:focus{background:var(--s2);border-radius:4px;padding-left:6px}
.rn-subtask-colab{display:flex;align-items:center;gap:4px}
.rn-subtask-colab-sel{padding:3px 22px 3px 6px;font-size:10.5px;background-position:right 5px center}
.rn-subtask-del{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:12px;width:20px;height:20px;border-radius:3px;line-height:1}
.rn-subtask-del:hover{background:var(--red-bg);color:var(--red)}
/* Botão "👁 Preview" no projecto da ata */
.rn-project-preview{
background:transparent;border:1px solid var(--border);color:var(--muted);
padding:2px 8px;font-size:13px;border-radius:5px;cursor:pointer;
margin-right:4px;
}
.rn-project-preview:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}
/* Modal de preview do dashboard */
.rn-preview-overlay{
position:fixed;inset:0;background:rgba(15,15,15,.65);
z-index:1000;display:none;align-items:center;justify-content:center;
padding:24px;
}
.rn-preview-overlay.open{display:flex;animation:rnPreviewIn .2s ease}
@keyframes rnPreviewIn{from{opacity:0}to{opacity:1}}
.rn-preview{
background:var(--surface);border-radius:14px;
width:100%;max-width:1500px;height:100%;max-height:92vh;
display:flex;flex-direction:column;overflow:hidden;
box-shadow:0 24px 64px rgba(0,0,0,.3);
}
.rn-preview-h{
display:flex;align-items:center;gap:14px;
padding:12px 18px;border-bottom:1px solid var(--border);
background:var(--s2);
}
.rn-preview-title{
font-size:14px;font-weight:700;color:var(--ink);
display:flex;align-items:center;gap:8px;
}
.rn-preview-title-ico{
width:22px;height:22px;border-radius:5px;background:var(--accent);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
}
.rn-preview-tabs{display:flex;gap:2px;flex:1;overflow-x:auto}
.rn-preview-tab{
background:transparent;border:0;cursor:pointer;
padding:6px 12px;font-size:12px;color:var(--muted2);
border-radius:6px;font-family:inherit;white-space:nowrap;
transition:all .12s;
}
.rn-preview-tab:hover{background:rgba(0,0,0,.04);color:var(--ink)}
.rn-preview-tab.is-active{background:var(--accent);color:#fff;font-weight:600}
.rn-preview-close{
background:transparent;border:0;cursor:pointer;font-size:24px;
color:var(--muted);width:32px;height:32px;border-radius:6px;line-height:1;
}
.rn-preview-close:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.rn-preview-body{flex:1;min-height:0;position:relative;background:var(--s2)}
.rn-preview-iframe{width:100%;height:100%;border:0;display:block;position:relative;z-index:1}
.rn-preview-loading{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
flex-direction:column;gap:10px;color:var(--muted);font-size:13px;
pointer-events:none;z-index:0;
transition:opacity .2s;
}
.rn-preview-loading.is-hidden{opacity:0}
/* Preview mode: esconder chrome quando o dashboard corre dentro do iframe.
Layout LOCKED ao viewport do iframe para .main poder fazer scroll interno
(senão .main cresce com o conteúdo e o overflow:auto não funciona). */
body.is-preview{overflow:hidden}
body.is-preview .sidebar,
body.is-preview .topbar,
body.is-preview .gchat-fab,
body.is-preview #gchatDrawer{
display:none !important;
}
body.is-preview .app{
grid-template-columns:1fr !important;
height:100vh;min-height:0 !important;
}
body.is-preview .main{
margin:0;width:100%;
height:100vh;min-height:0;max-height:100vh;
overflow-y:auto;overflow-x:hidden;
}
body.is-preview .page{padding-top:14px}
/* Progresso na lista de atas — barra fina + label */
.rn-card-progress{
height:5px;background:var(--s2);border-radius:3px;overflow:hidden;
margin-top:6px;
}
.rn-card-progress-bar{
height:100%;background:linear-gradient(90deg, #10b981, #34d399);
transition:width .25s ease;
}
.rn-card-progress-lbl{
font-size:10px;color:var(--muted);font-family:var(--mono);margin-top:4px;
}
/* Secções (LEADS / E-COMMERCE / TRÁFEGO) */
.obj-sections{display:flex;flex-direction:column;gap:28px}
.obj-section{display:flex;flex-direction:column;gap:10px}
.obj-section-header{
display:flex;align-items:baseline;gap:14px;padding:6px 4px;
border-bottom:2px solid var(--accent);
}
.obj-section-title{
font-size:18px;font-weight:800;letter-spacing:.5px;
font-family:var(--brand, var(--font));color:var(--accent);text-transform:uppercase;
}
.obj-section-sub{
font-size:11px;color:var(--muted);font-family:var(--mono);
text-transform:uppercase;letter-spacing:.5px;
}
.obj-section[data-section="ecommerce"] .obj-section-header{border-bottom-color:#3b82f6}
.obj-section[data-section="ecommerce"] .obj-section-title{color:#1d4ed8}
.obj-section[data-section="trafego"] .obj-section-header{border-bottom-color:#10b981}
.obj-section[data-section="trafego"] .obj-section-title{color:#047857}
.obj-section[data-section="ecommerce"] .obj-table thead .obj-th-label{background:#eff6ff;color:#1d4ed8;border-bottom:2px solid #bfdbfe}
.obj-section[data-section="trafego"] .obj-table thead .obj-th-label{background:#ecfdf5;color:#047857;border-bottom:2px solid #a7f3d0}
/* Objetivos · edição da tabela (renomear colunas, linhas manuais, apagar) */
.obj-section-header{justify-content:space-between;align-items:center}
.obj-add-row{font-size:11px;font-weight:600;padding:4px 11px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--accent);cursor:pointer;white-space:nowrap}
.obj-add-row:hover{background:var(--s2)}
.obj-th-edit{cursor:pointer}
.obj-th-edit:hover{outline:1px dashed var(--muted);outline-offset:-2px}
.obj-th-act,.obj-c-act{width:30px;text-align:center;padding:0 2px!important}
.obj-row-del{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;opacity:0;transition:opacity .12s;padding:2px 5px;border-radius:4px;line-height:1}
.obj-table tbody tr:hover .obj-row-del{opacity:.6}
.obj-row-del:hover{opacity:1!important;background:#fee2e2;color:#991b1b}
.obj-row-manual td{background:rgba(124,58,237,.05)}
.obj-manual-edit{width:100%;border:1px solid transparent;border-radius:5px;padding:3px 5px;font-size:12px;background:transparent;color:var(--text,var(--ink));font-variant-numeric:tabular-nums;text-align:center}
.obj-manual-edit.obj-manual-label{text-align:left;font-weight:600}
.obj-manual-edit:hover{border-color:var(--border)}
.obj-manual-edit:focus{outline:none;border-color:var(--accent);background:var(--surface)}
/* ─────────────────────────────────────────────────────────────────────────
TO DO · Kanban board
───────────────────────────────────────────────────────────────────────── */
.kb-board {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
align-items: start;
}
.kb-col {
background: var(--s2);
border: 1px solid var(--border);
border-radius: 12px;
display: flex; flex-direction: column;
min-height: 200px;
}
.kb-col[data-col="alertas"] { border-top: 3px solid var(--amber); }
.kb-col[data-col="nao-iniciado"]{ border-top: 3px solid var(--muted); }
.kb-col[data-col="em-curso"] { border-top: 3px solid var(--blue); }
.kb-col[data-col="concluido"] { border-top: 3px solid var(--green); }
/* Alertas Automáticos: 4 colunas por severidade + cliente (placeholder) */
.kb-col[data-alert-col="critical"] { border-top: 3px solid var(--red); }
.kb-col[data-alert-col="warning"] { border-top: 3px solid var(--amber); }
.kb-col[data-alert-col="positive"] { border-top: 3px solid var(--green); }
.kb-col[data-alert-col="client"] { border-top: 3px solid var(--blue); background: var(--s3); }
.kb-col[data-alert-col="client"] .kb-card-alert { opacity: .85; }
/* Bulk actions no topo de cada coluna */
.kb-bulk-bar {
display: flex; gap: 6px; margin-bottom: 6px;
padding: 6px; background: var(--surface);
border: 1px solid var(--border); border-radius: 8px;
}
.kb-bulk-bar .btn {
flex: 1; padding: 5px 8px; font-size: 11px; font-weight: 600;
justify-content: center;
}
/* Botão "Adicionar" — cor da coluna; "Ignorar" — sempre cinza */
.kb-btn-ignore, .kb-btn-ignore-bulk {
background: var(--s2); border: 1px solid var(--border);
color: var(--muted);
}
.kb-btn-ignore:hover, .kb-btn-ignore-bulk:hover {
background: var(--s3); color: var(--ink); border-color: var(--border2);
}
.kb-btn-add, .kb-btn-add-bulk { color: #fff; font-weight: 600; }
/* Aplica a cor por coluna ao botão "+ Adicionar" e ao bulk "+ Todos" */
.kb-col[data-alert-col="critical"] .kb-btn-add,
.kb-bulk-critical {
background: var(--red); border: 1px solid var(--red);
}
.kb-col[data-alert-col="critical"] .kb-btn-add:hover,
.kb-bulk-critical:hover { background: #b91c1c; border-color: #b91c1c; }
.kb-col[data-alert-col="warning"] .kb-btn-add,
.kb-bulk-warning {
background: var(--amber); border: 1px solid var(--amber);
}
.kb-col[data-alert-col="warning"] .kb-btn-add:hover,
.kb-bulk-warning:hover { background: #b45309; border-color: #b45309; }
.kb-col[data-alert-col="positive"] .kb-btn-add,
.kb-bulk-positive {
background: var(--green); border: 1px solid var(--green);
}
.kb-col[data-alert-col="positive"] .kb-btn-add:hover,
.kb-bulk-positive:hover { background: #15803d; border-color: #15803d; }
/* Card actions layout — Ignorar à esquerda, Adicionar à direita */
.kb-card-alert .kb-card-actions {
display: flex; gap: 6px; margin-top: 8px;
border-top: 1px dashed var(--border); padding-top: 8px;
}
.kb-card-alert .kb-card-actions .btn {
flex: 1; padding: 5px 10px; font-size: 11px; justify-content: center;
}
.kb-col.kb-drag-over { background: var(--accent-bg); border-color: var(--accent); }
.kb-col-hdr { padding: 12px 14px 8px; }
.kb-col-title {
font-size: 12px; font-weight: 700; color: var(--ink);
display: flex; align-items: center; gap: 6px;
font-family: var(--mono); text-transform: uppercase; letter-spacing: .5px;
}
.kb-col-count {
background: var(--surface); border: 1px solid var(--border);
border-radius: 9px; padding: 1px 8px;
font-size: 10px; font-weight: 600; color: var(--muted);
}
.kb-col-sub {
font-size: 10px; color: var(--muted); margin-top: 3px;
font-family: var(--mono);
}
.kb-col-body {
padding: 6px 10px 12px;
display: flex; flex-direction: column; gap: 8px;
min-height: 100px;
flex: 1;
}
.kb-col-empty {
font-size: 11px; color: var(--muted); font-style: italic;
padding: 18px 6px; text-align: center;
}
/* Grupos de mês dentro das colunas do Kanban */
.kb-month-group { display: flex; flex-direction: column; gap: 6px; }
.kb-month-group + .kb-month-group { margin-top: 4px; }
.kb-month-hdr {
display: flex; align-items: center; gap: 6px;
padding: 5px 8px; cursor: pointer;
background: var(--surface); border: 1px solid var(--border);
border-radius: 7px; font-size: 11px; font-weight: 600;
color: var(--ink); user-select: none;
transition: background .12s;
}
.kb-month-hdr:hover { background: var(--s2); }
.kb-month-chev { font-size: 9px; color: var(--muted); width: 10px; display: inline-block; }
.kb-month-name { flex: 1; }
.kb-month-count {
background: var(--s2); border-radius: 9px; padding: 1px 7px;
font-size: 10px; color: var(--muted); font-weight: 600;
font-family: var(--mono);
}
.kb-month-body { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.kb-month-group.is-collapsed .kb-month-hdr { opacity: .75; }
/* Toggle Pessoal / Clientes na To do */
.td-mode-toggle {
display: inline-flex; gap: 0;
background: var(--s2); border: 1px solid var(--border); border-radius: 8px;
padding: 2px; overflow: hidden;
}
.td-mode-btn {
background: transparent; border: none; cursor: pointer;
padding: 5px 14px; font-size: 12px; font-weight: 600;
color: var(--muted); font-family: var(--font); border-radius: 6px;
transition: all .12s;
}
.td-mode-btn:hover { color: var(--ink); }
.td-mode-btn.is-active {
background: var(--surface); color: var(--ink);
box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
/* Em modo pessoal: esconde a coluna Alertas e reorganiza o grid em 3 colunas */
#todoKanban.is-personal-mode .kb-col[data-col="alertas"] { display: none; }
#todoKanban.is-personal-mode { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Em modo arquivo: só mostra Concluído (renomeado para Arquivo), full-width */
#todoKanban.is-archive-mode .kb-col[data-col="alertas"],
#todoKanban.is-archive-mode .kb-col[data-col="nao-iniciado"],
#todoKanban.is-archive-mode .kb-col[data-col="em-curso"] { display: none; }
#todoKanban.is-archive-mode { grid-template-columns: minmax(0, 1fr); }
#todoKanban.is-archive-mode .kb-col[data-col="concluido"] { border-top-color: var(--muted); }
/* Card com checkbox + sub-tarefas */
.kb-card-row { display: flex; gap: 8px; align-items: flex-start; position: relative; }
/* Botão "⋯" no canto superior direito do card */
.kb-card-menu-btn {
background: transparent; border: none; cursor: pointer;
color: var(--muted); font-size: 16px; line-height: 1;
width: 22px; height: 22px; padding: 0; flex-shrink: 0;
border-radius: 5px; display: flex; align-items: center; justify-content: center;
transition: all .12s;
}
.kb-card-menu-btn:hover { background: var(--s2); color: var(--ink); }
/* Popover do menu "⋯" */
.kb-card-menu {
position: absolute; z-index: 1000;
min-width: 150px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 6px 22px rgba(0,0,0,.12);
padding: 4px;
display: flex; flex-direction: column; gap: 2px;
}
.kb-card-menu button {
background: transparent; border: none; cursor: pointer;
padding: 7px 11px; font-size: 12px; font-family: var(--font);
color: var(--ink); text-align: left; border-radius: 5px;
transition: background .12s;
}
.kb-card-menu button:hover { background: var(--s2); }
.kb-card-menu button.is-danger { color: var(--red); }
.kb-card-menu button.is-danger:hover { background: #fee2e2; }
/* Modal — par data + hora opcional */
.ff .td-datetime { display: flex; gap: 6px; align-items: stretch; }
.ff .td-datetime input[type="date"] { flex: 1; min-width: 0; }
.ff .td-datetime input[type="time"] { width: 100px; flex: 0 0 100px; }
.td-hora-btn {
padding: 0 10px; font-size: 11px; font-weight: 600;
background: var(--s2); color: var(--muted);
white-space: nowrap;
}
.td-hora-btn:hover { background: var(--s3); color: var(--ink); }
/* Personalização da repetição */
.td-repeat-custom {
display: flex; gap: 6px; align-items: center;
margin-top: 6px; padding: 8px 10px;
background: var(--s2); border: 1px solid var(--border); border-radius: 7px;
}
.td-repeat-custom .td-repeat-lbl {
font-size: 12px; color: var(--muted); font-family: var(--font);
}
.td-repeat-custom input[type="number"] {
width: 64px; padding: 5px 8px;
border: 1px solid var(--border); border-radius: 6px;
background: var(--surface); font-size: 13px; font-family: var(--mono);
text-align: center; outline: none;
}
.td-repeat-custom input[type="number"]:focus { border-color: var(--accent); }
.td-repeat-custom select {
flex: 1; padding: 5px 8px;
border: 1px solid var(--border); border-radius: 6px;
background: var(--surface); font-size: 12px; font-family: var(--font);
outline: none;
}
.td-repeat-custom select:focus { border-color: var(--accent); }
/* Badge "Repete" no card */
.kb-card-repeat {
background: #eff6ff; color: var(--blue);
border: 1px solid #bfdbfe; border-radius: 6px;
padding: 1px 7px; font-size: 9px; font-weight: 600;
font-family: var(--mono); letter-spacing: .3px;
}
.kb-card-check {
appearance: none; -webkit-appearance: none;
width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
border: 1.5px solid var(--border2); border-radius: 4px;
background: var(--surface); cursor: pointer; position: relative;
transition: all .12s;
}
.kb-card-check:hover { border-color: var(--green); }
.kb-card-check:checked {
background: var(--green); border-color: var(--green);
}
.kb-card-check:checked::after {
content: '✓'; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: white; font-size: 11px; font-weight: 700;
}
.kb-card-body { flex: 1; min-width: 0; }
.kb-card-subs {
margin-top: 8px; padding-top: 6px;
border-top: 1px dashed var(--border);
display: flex; flex-direction: column; gap: 3px;
}
.kb-card-subs-hdr {
font-size: 10px; color: var(--muted); font-family: var(--mono);
text-transform: uppercase; letter-spacing: .3px;
display: flex; gap: 6px; align-items: center; margin-bottom: 2px;
}
.kb-card-subs-count {
background: var(--s2); border-radius: 8px; padding: 0 6px;
font-size: 9px; color: var(--muted); font-weight: 600;
}
.kb-sub-row {
display: flex; align-items: center; gap: 6px;
font-size: 11px; cursor: pointer; user-select: none;
padding: 2px 0;
}
.kb-sub-check {
appearance: none; -webkit-appearance: none;
width: 13px; height: 13px; flex-shrink: 0;
border: 1.5px solid var(--border2); border-radius: 3px;
background: var(--surface); cursor: pointer; position: relative;
transition: all .12s;
}
.kb-sub-check:hover { border-color: var(--green); }
.kb-sub-check:checked { background: var(--green); border-color: var(--green); }
.kb-sub-check:checked::after {
content: '✓'; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: white; font-size: 9px; font-weight: 700;
}
.kb-sub-text { flex: 1; color: var(--ink); line-height: 1.3; }
.kb-sub-row.is-done .kb-sub-text {
text-decoration: line-through; color: var(--muted);
}
/* Sub-tarefas no modal — selectores específicos a vencer .ff input{...} */
.td-subs-list {
display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
max-height: 200px; overflow-y: auto;
}
.td-subs-empty {
font-size: 11px; color: var(--muted); font-style: italic;
padding: 12px 8px; text-align: center;
border: 1px dashed var(--border); border-radius: 7px;
background: var(--s2);
}
.td-subs-list .td-sub-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 10px; background: var(--surface);
border: 1px solid var(--border); border-radius: 7px;
}
.td-subs-list .td-sub-row:focus-within { border-color: var(--accent); }
/* Override .ff input para o checkbox da sub-tarefa */
.td-subs-list input.td-sub-check {
appearance: none; -webkit-appearance: none;
width: 16px !important; height: 16px; flex-shrink: 0;
border: 1.5px solid var(--border2); border-radius: 4px;
background: var(--surface); cursor: pointer; position: relative;
padding: 0 !important; margin: 0; transition: all .12s;
}
.td-subs-list input.td-sub-check:hover { border-color: var(--green); }
.td-subs-list input.td-sub-check:checked { background: var(--green); border-color: var(--green); }
.td-subs-list input.td-sub-check:checked::after {
content: '✓'; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: white; font-size: 11px; font-weight: 700;
}
/* Input de texto inline — sem o estilo global do .ff input */
.td-subs-list input.td-sub-text {
flex: 1; width: auto !important;
border: none !important; background: transparent !important;
font-size: 13px; font-family: var(--font); color: var(--ink);
outline: none; padding: 2px 0 !important; border-radius: 0;
}
.td-subs-list input.td-sub-text::placeholder { color: var(--muted); font-style: italic; }
.td-subs-list .td-sub-rm {
background: transparent; border: none; cursor: pointer;
color: var(--muted); font-size: 18px; line-height: 1;
width: 24px; height: 24px; padding: 0; flex-shrink: 0;
border-radius: 4px; transition: all .12s;
display: flex; align-items: center; justify-content: center;
}
.td-subs-list .td-sub-rm:hover { background: var(--s2); color: var(--red); }
/* Cards */
.kb-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
cursor: grab;
transition: all .15s;
user-select: none;
}
.kb-card:hover { border-color: var(--border2); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.kb-card.kb-dragging { opacity: 0.4; cursor: grabbing; }
.kb-card.kb-overdue { border-left: 3px solid var(--red); }
.kb-card.kb-today { border-left: 3px solid var(--amber); }
.kb-card.kb-done { opacity: 0.7; }
.kb-card-meta {
font-size: 10px; color: var(--muted); font-family: var(--mono);
display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
flex-wrap: wrap;
}
.kb-card-meta .kb-cliente {
background: var(--s3); border-radius: 6px; padding: 2px 7px;
color: var(--ink); font-weight: 600; font-family: var(--font); font-size: 10px;
}
.kb-card-title {
font-size: 12px; font-weight: 500; color: var(--ink);
line-height: 1.35;
word-break: break-word;
}
.kb-card.kb-done .kb-card-title { text-decoration: line-through; color: var(--muted); }
.kb-card-notas {
font-size: 10px; color: var(--muted); margin-top: 6px;
line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.kb-card-actions {
display: flex; gap: 6px; margin-top: 8px;
border-top: 1px dashed var(--border); padding-top: 8px;
}
.kb-card-actions .btn { padding: 4px 10px; font-size: 10px; flex: 1; justify-content: center; }
.kb-card-date-overdue { color: var(--red); font-weight: 700; }
.kb-card-date-today { color: var(--amber); font-weight: 700; }
/* Alert cards têm aspecto ligeiramente diferente */
.kb-card-alert {
cursor: default;
border-left: 3px solid var(--amber);
background: linear-gradient(180deg, #fffaf0 0%, var(--surface) 100%);
}
.kb-card-alert.kb-sev-critical { border-left-color: var(--red); background: linear-gradient(180deg, #fef2f2 0%, var(--surface) 100%); }
.kb-card-alert.kb-sev-warning { border-left-color: var(--amber); background: linear-gradient(180deg, #fffaf0 0%, var(--surface) 100%); }
.kb-card-alert.kb-sev-positive { border-left-color: var(--green); background: linear-gradient(180deg, #f0fdf4 0%, var(--surface) 100%); }
.kb-card-alert.kb-sev-info { border-left-color: var(--blue); background: linear-gradient(180deg, #eff6ff 0%, var(--surface) 100%); }
.kb-card-alert.is-promoted { opacity: .85; }
.kb-alert-promoted {
display: block;
width: 100%;
margin-top: 8px;
padding: 8px 0 0;
border: none;
border-top: 1px dashed var(--border);
background: transparent;
font-size: 11px;
font-weight: 600;
color: var(--green);
text-align: center;
font-family: var(--mono);
letter-spacing: .3px;
cursor: pointer;
transition: color .15s;
}
.kb-alert-promoted:hover { color: #047857; }
/* Flash de destaque quando uma task é focada pela navegação do alerta */
@keyframes kb-card-flash-anim {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
50% { box-shadow: 0 0 0 6px rgba(34,197,94,.18); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.kb-card.kb-card-flash {
animation: kb-card-flash-anim 1.1s ease-out 2;
border-color: var(--green);
}
.kb-alert-icon { font-size: 14px; margin-right: 4px; }
.kb-alert-desc {
font-size: 11px; color: var(--muted2); margin-top: 4px;
line-height: 1.4;
}
/* Modal de alertas ignorados */
.kb-ign-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 10px; border-bottom: 1px solid var(--border);
gap: 10px;
}
.kb-ign-row:last-child { border-bottom: none; }
.kb-ign-title { font-size: 12px; flex: 1; }
.kb-ign-meta { font-size: 10px; color: var(--muted); font-family: var(--mono); }
/* ─────────────────────────────────────────────────────────────────────────
WIZARD · novas plataformas (em construção) + step3 (selecção campanhas)
───────────────────────────────────────────────────────────────────────── */
.pj-wiz-plat.is-soon { opacity: 0.85; }
.pj-wiz-plat-soon-badge {
font-size: 9px; font-family: var(--mono); font-weight: 700;
background: var(--amber-bg); color: var(--amber);
border: 1px solid var(--amber-border); border-radius: 6px;
padding: 1px 6px; letter-spacing: .5px; text-transform: uppercase;
margin-left: 8px;
}
.pj-wiz-plat-soon-body {
padding: 10px 14px;
background: var(--amber-bg);
border-top: 1px solid var(--amber-border);
color: var(--amber);
font-size: 11px;
font-family: var(--mono);
}
.pj-wiz-camps-sections {
display: flex; flex-direction: column; gap: 14px;
}
.pj-wiz-camp-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.pj-wiz-camp-section-hdr {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px;
background: var(--s2);
border-bottom: 1px solid var(--border);
}
.pj-wiz-camp-section-title {
font-size: 13px; font-weight: 600; color: var(--ink);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pj-wiz-camp-section-id {
font-size: 10px; color: var(--muted); font-family: var(--mono);
margin-left: 4px; font-weight: 400;
}
.pj-wiz-camp-section .pj-wiz-camps { border: none; }
.pj-wiz-empty-sub {
padding: 16px; text-align: center; color: var(--muted); font-size: 12px;
font-style: italic;
}
.pj-wiz-empty {
padding: 32px 20px; text-align: center;
background: var(--s2); border: 1px dashed var(--border);
border-radius: 10px;
color: var(--ink); font-size: 13px;
}
.pj-wiz-soon-list {
display: flex; flex-direction: column; gap: 6px;
}
.pj-wiz-soon-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
background: var(--amber-bg); border: 1px solid var(--amber-border);
border-radius: 7px; font-size: 12px;
color: var(--ink);
}
/* ─────────────────────────────────────────────────────────────────────────
WIZARD · multi-account (Fase 2)
───────────────────────────────────────────────────────────────────────── */
.pj-wiz-plat-accounts {
display: flex; flex-direction: column; gap: 8px;
}
.pj-wiz-account {
display: grid;
grid-template-columns: 1fr 1.4fr auto;
gap: 10px;
align-items: flex-end;
padding: 8px 10px;
background: var(--s2);
border: 1px solid var(--border);
border-radius: 7px;
}
.pj-wiz-account-label label,
.pj-wiz-account-id label {
display: block;
font-size: 9px; font-family: var(--mono); font-weight: 600;
color: var(--muted);
letter-spacing: .5px; text-transform: uppercase;
margin-bottom: 3px;
}
.pj-wiz-account input[type=text] {
width: 100%;
font-size: 12px;
padding: 6px 9px;
border: 1px solid var(--border);
border-radius: 5px;
font-family: var(--font);
background: var(--surface);
}
.pj-wiz-account input[type=text]:focus {
border-color: var(--accent);
outline: none;
}
.pj-wiz-account-actions {
display: flex; align-items: center; gap: 6px;
margin-bottom: 1px;
}
.pj-wiz-acc-del {
padding: 5px 9px;
font-size: 12px;
color: var(--red);
background: var(--surface);
border: 1px solid var(--red-border);
}
.pj-wiz-acc-del:hover {
background: var(--red-bg);
}
.pj-wiz-add-account {
margin-top: 10px;
font-size: 11px;
padding: 6px 14px;
color: var(--accent);
background: var(--surface);
border: 1px dashed var(--accent-border);
align-self: flex-start;
}
.pj-wiz-add-account:hover {
background: var(--accent-bg);
border-style: solid;
}
/* ─────────────────────────────────────────────────────────────────────────
WIZARD · Fases 4 (Objectivos), 5 (Qualificação), 6 (Comunicação)
───────────────────────────────────────────────────────────────────────── */
.pj-wiz-obj-blocks {
display: flex; flex-direction: column; gap: 14px;
}
.pj-wiz-obj-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
}
.pj-wiz-obj-title {
font-size: 13px; font-weight: 600; color: var(--ink);
margin-bottom: 10px;
}
.pj-wiz-obj-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
}
.pj-wiz-obj-field {
display: flex; flex-direction: column; gap: 4px;
}
.pj-wiz-obj-lbl {
font-size: 10px; font-family: var(--mono); font-weight: 600;
color: var(--muted); letter-spacing: .4px; text-transform: uppercase;
}
.pj-wiz-obj-lbl small { text-transform: none; letter-spacing: 0; }
.pj-wiz-obj-field input {
padding: 7px 10px;
border: 1px solid var(--border); border-radius: 6px;
font-size: 13px; font-family: var(--font);
background: var(--surface);
}
.pj-wiz-obj-field input:focus { border-color: var(--accent); outline: none; }
.pj-wiz-section-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 12px;
}
.pj-wiz-section-title {
font-size: 13px; font-weight: 600; color: var(--ink);
margin-bottom: 4px;
}
.pj-wiz-section-sub {
font-size: 11px; color: var(--muted); margin-bottom: 10px;
}
.pj-wiz-section-ok {
font-size: 12px; color: var(--green);
background: var(--green-bg); border: 1px solid var(--green-border);
padding: 8px 10px; border-radius: 6px;
}
.pj-wiz-section-warn {
font-size: 12px; color: var(--amber);
background: var(--amber-bg); border: 1px solid var(--amber-border);
padding: 8px 10px; border-radius: 6px;
}
.pj-wiz-states-list {
display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px;
}
.pj-wiz-state-row {
display: flex; gap: 8px; align-items: center;
}
.pj-wiz-state-row input {
flex: 1;
padding: 6px 10px;
border: 1px solid var(--border); border-radius: 6px;
font-size: 12px; font-family: var(--font);
background: var(--surface);
}
.pj-wiz-channels {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.pj-wiz-channel {
display: flex; flex-direction: column; gap: 4px;
}
.pj-wiz-channel input, .pj-wiz-channel select {
padding: 7px 10px;
border: 1px solid var(--border); border-radius: 6px;
font-size: 12px; font-family: var(--font);
background: var(--surface);
}
.pj-wiz-review-section {
margin-bottom: 16px;
}
.pj-wiz-review-section .sec-lbl {
margin-bottom: 6px;
}
/* ─────────────────────────────────────────────────────────────────────────
WIZARD · Fase 5 (sheet tabs + N/A) + Fase 6 (responsáveis)
───────────────────────────────────────────────────────────────────────── */
.pj-wiz-sheet-block {
background: var(--s2);
border: 1px solid var(--border);
border-radius: 7px;
padding: 10px 12px;
margin-bottom: 10px;
}
.pj-wiz-sheet-block-hdr {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 4px;
}
.pj-wiz-tabs-list {
display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px;
}
.pj-wiz-tab-row {
display: grid;
grid-template-columns: 1fr auto 1.5fr auto;
gap: 8px;
align-items: center;
}
.pj-wiz-tab-row input {
padding: 6px 10px;
border: 1px solid var(--border); border-radius: 5px;
font-size: 12px; font-family: var(--font);
background: var(--surface);
}
.pj-wiz-na-toggle {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--muted);
background: var(--s2); border: 1px solid var(--border);
border-radius: 6px; padding: 5px 10px;
cursor: pointer;
}
.pj-wiz-na-toggle input { margin: 0; }
.pj-wiz-na-toggle:has(input:checked) {
background: var(--accent-bg);
border-color: var(--accent-border);
color: var(--accent);
font-weight: 600;
}
.pj-wiz-resp-list {
display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
}
.pj-wiz-resp-row {
display: grid;
grid-template-columns: 1fr 1.4fr 1fr auto;
gap: 8px;
align-items: center;
background: var(--s2);
border: 1px solid var(--border);
border-radius: 7px;
padding: 8px 10px;
}
.pj-wiz-resp-row input {
padding: 6px 10px;
border: 1px solid var(--border); border-radius: 5px;
font-size: 12px; font-family: var(--font);
background: var(--surface);
}
/* ─────────────────────────────────────────────────────────────────────────
WIZARD · Fase 7 Revisão — visual distinto (hero + grid de cards)
───────────────────────────────────────────────────────────────────────── */
.pj-wiz-rv-hero {
display: flex; gap: 14px; align-items: center;
padding: 14px 18px;
background: linear-gradient(135deg, var(--green-bg) 0%, var(--accent-bg) 100%);
border: 1px solid var(--green-border);
border-radius: 12px;
margin-bottom: 14px;
}
.pj-wiz-rv-hero-icon {
width: 42px; height: 42px;
background: var(--green); color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 700;
flex-shrink: 0;
}
.pj-wiz-rv-hero-title {
font-size: 16px; font-weight: 700; color: var(--ink);
margin-bottom: 2px;
}
.pj-wiz-rv-hero-sub {
font-size: 12px; color: var(--muted2);
line-height: 1.4;
}
.pj-wiz-rv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.pj-wiz-rv-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.pj-wiz-rv-card-wide {
grid-column: 1 / -1;
}
.pj-wiz-rv-card-hdr {
display: flex; align-items: center; gap: 8px;
padding: 9px 14px;
background: var(--s2);
border-bottom: 1px solid var(--border);
font-size: 12px; font-weight: 600;
color: var(--ink);
font-family: var(--mono); text-transform: uppercase; letter-spacing: .5px;
}
.pj-wiz-rv-num {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
background: var(--accent); color: #fff;
border-radius: 50%;
font-size: 10px; font-weight: 700;
font-family: var(--font);
}
.pj-wiz-rv-body {
padding: 8px 14px;
}
.pj-wiz-rv-row {
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
padding: 6px 0;
border-bottom: 1px dashed var(--border);
font-size: 12px;
}
.pj-wiz-rv-row:last-child { border-bottom: none; }
.pj-wiz-rv-row > span {
color: var(--muted);
font-family: var(--mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .3px;
flex-shrink: 0;
}
.pj-wiz-rv-row > strong {
color: var(--ink);
font-weight: 600;
text-align: right;
word-break: break-word;
}
.pj-wiz-rv-cta {
padding: 12px 16px;
background: var(--accent-bg);
border: 1px solid var(--accent-border);
border-radius: 10px;
font-size: 12px;
color: var(--ink);
}
.pj-wiz-rv-bullets {
display: flex; flex-wrap: wrap; gap: 10px 18px;
margin-top: 6px;
font-size: 11px; color: var(--muted2);
}
/* ─────────────────────────────────────────────────────────────────────────
WIZARD · Fase 4 (distribuição por plataforma) + Fase 5 (botão fetch tabs)
───────────────────────────────────────────────────────────────────────── */
.pj-wiz-obj-distrib {
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--border);
}
.pj-wiz-obj-distrib-hdr {
display: flex; align-items: center; justify-content: space-between;
font-size: 10px; font-family: var(--mono); font-weight: 600;
color: var(--muted); letter-spacing: .4px; text-transform: uppercase;
margin-bottom: 8px;
}
.pj-wiz-obj-distrib-sum {
padding: 2px 8px;
border-radius: 5px;
font-size: 10px;
font-family: var(--mono);
background: var(--s3);
color: var(--ink);
}
.pj-wiz-obj-distrib-sum.is-ok {
background: var(--green-bg);
color: var(--green);
border: 1px solid var(--green-border);
}
.pj-wiz-obj-distrib-sum.is-warn {
background: var(--amber-bg);
color: var(--amber);
border: 1px solid var(--amber-border);
}
.pj-wiz-distrib-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
padding: 6px 0;
}
.pj-wiz-distrib-plat {
font-size: 12px;
color: var(--ink);
}
.pj-wiz-distrib-pct {
display: flex; align-items: center; gap: 4px;
}
.pj-wiz-distrib-pct input {
width: 60px;
padding: 5px 8px;
border: 1px solid var(--border);
border-radius: 5px;
font-size: 12px;
text-align: right;
}
.pj-wiz-distrib-pct span {
font-size: 11px; color: var(--muted);
}
.pj-wiz-distrib-eur {
font-size: 11px;
color: var(--muted2);
font-family: var(--mono);
text-align: right;
min-width: 70px;
}
.pj-wiz-fetch-tabs {
color: var(--accent);
border-color: var(--accent-border);
}
.pj-wiz-fetch-tabs:hover {
background: var(--accent-bg);
}
/* Dropdown de tab no mapping da Fase 5 */
.pj-wiz-tab-row .pj-wiz-tab-name.fsel {
padding: 6px 28px 6px 10px;
font-size: 12px;
width: 100%;
}
/* ─── Fase 3 · Segmentos ──────────────────────────────────────────── */
.pj-wiz-seg-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 14px;
}
.pj-wiz-seg-empty {
border: 1px dashed var(--border);
border-radius: 10px;
padding: 28px 22px;
text-align: center;
background: var(--card-soft, #fafafa);
}
.pj-wiz-seg-empty strong {
font-size: 13px;
color: var(--ink);
}
.pj-wiz-seg-row {
display: flex;
align-items: stretch;
gap: 10px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
}
.pj-wiz-seg-fields {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 10px;
flex: 1;
}
.pj-wiz-seg-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.pj-wiz-seg-lbl {
font-size: 11px;
color: var(--muted);
font-weight: 500;
}
.pj-wiz-seg-field input {
padding: 7px 10px;
font-size: 13px;
border: 1px solid var(--border);
border-radius: 7px;
background: #fff;
}
.pj-wiz-seg-field input:focus {
outline: none;
border-color: var(--accent);
}
.pj-wiz-seg-del {
align-self: center;
width: 30px;
height: 30px;
padding: 0;
border-radius: 6px;
border: 1px solid var(--border);
background: #fff;
color: var(--muted);
font-size: 13px;
cursor: pointer;
}
.pj-wiz-seg-del:hover {
background: var(--red-bg, #fee2e2);
color: var(--red, #dc2626);
border-color: var(--red-border, #fecaca);
}
/* ─── Fase 2 · Plataformas agrupadas por categoria ─────────────────── */
.pj-wiz-plat-group{
margin-bottom: 22px;
padding-bottom: 4px;
}
.pj-wiz-plat-group:last-child{margin-bottom: 0}
.pj-wiz-plat-group-hdr{
display:flex;align-items:center;gap:10px;
padding:8px 10px;margin-bottom:8px;
background:linear-gradient(180deg, #f8f9fb, #f1f3f7);
border:1px solid var(--border);
border-radius:10px;
}
.pj-wiz-plat-group-ico{
font-size:16px;line-height:1;width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:#fff;border-radius:8px;border:1px solid var(--border);
}
.pj-wiz-plat-group-text{flex:1;min-width:0}
.pj-wiz-plat-group-title{font-size:13px;font-weight:600;color:var(--ink)}
.pj-wiz-plat-group-sub{font-size:11px;color:var(--muted);margin-top:1px}
/* Hint discreto no topo de uma fase (informa restrições condicionais) */
.pj-wiz-step-hint{
padding:9px 12px;margin-bottom:14px;
background:#fdf6e3;color:#7a5a0e;
border:1px solid #f0d97a;border-radius:8px;
font-size:12px;line-height:1.5;
}
.pj-wiz-step-hint strong{color:#5e4609;font-weight:600}
/* ─── Fase 3 · Concorrência · linhas e sugestões ───────────────────── */
.pj-wiz-comp-row{
display:flex;align-items:stretch;gap:10px;padding:12px;
border:1px solid var(--border);border-radius:10px;background:#fff;
margin-bottom:8px;
}
.pj-wiz-comp-fields{
display:grid;
grid-template-columns:1.3fr 1fr 1fr 1fr;
gap:10px;flex:1;
}
.pj-wiz-comp-field{display:flex;flex-direction:column;gap:4px}
.pj-wiz-comp-field input{
padding:7px 10px;font-size:13px;
border:1px solid var(--border);border-radius:7px;background:#fff;
}
.pj-wiz-comp-field input:focus{outline:none;border-color:var(--accent)}
.pj-wiz-comp-suggest{
margin-bottom:12px;padding:10px 12px;
background:#f3f8ff;border:1px solid #cfe1fb;border-radius:8px;
}
.pj-wiz-comp-suggest-lbl{
font-size:11px;color:#1e4690;font-weight:600;
text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;
}
.pj-wiz-comp-chips{display:flex;flex-wrap:wrap;gap:6px}
.pj-wiz-comp-chip{
padding:5px 10px;font-size:12px;
background:#fff;color:#1e4690;
border:1px solid #b6d0f5;border-radius:14px;cursor:pointer;
transition:background .15s ease, border-color .15s ease;
}
.pj-wiz-comp-chip:hover{background:#e7f0fd;border-color:#7faae5}
/* ═══════════════════════════════════════════════════════════════════
PÁGINA · Concorrência
═══════════════════════════════════════════════════════════════════ */
.cnc-tabs{
display:flex;gap:6px;
background:#f5f5f7;border:1px solid var(--border);border-radius:12px;
padding:5px;margin-bottom:14px;
}
.cnc-tab{
flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
padding:9px 12px;background:transparent;border:none;border-radius:8px;
cursor:pointer;color:var(--muted);
transition:background .15s ease, color .15s ease;
}
.cnc-tab:hover{background:#fff;color:var(--ink)}
.cnc-tab.is-active{
background:#fff;color:var(--ink);
box-shadow:0 1px 3px rgba(0,0,0,0.05);
}
.cnc-tab-ico{font-size:16px;line-height:1}
.cnc-tab-lbl{font-size:13px;font-weight:600}
.cnc-tab-sub{font-size:10px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.3px}
.cnc-tab.is-active .cnc-tab-sub{color:var(--accent, #2563eb)}
.cnc-tab-panel{display:none}
.cnc-tab-panel.is-active{display:block}
.cnc-panel-hdr{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
margin-bottom:12px;flex-wrap:wrap;
}
.cnc-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:40px 20px;background:#fff;
border:1px dashed var(--border);border-radius:12px;color:var(--ink);
}
.cnc-inline-empty{padding:20px 14px;background:#fafafa;border-style:solid}
.cnc-loading{padding:18px;text-align:center;color:var(--muted);font-size:12px;font-family:var(--mono)}
/* ── Meta: blocos por concorrente + grelha de criativos ── */
.cnc-meta-grid{display:flex;flex-direction:column;gap:14px}
.cnc-comp-block{
background:#fff;border:1px solid var(--border);border-radius:12px;
padding:14px 16px;
}
.cnc-comp-block-hdr{
display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border);
}
.cnc-comp-block-name{font-size:14px;font-weight:600;color:var(--ink)}
.cnc-comp-block-meta{font-size:11px;color:var(--muted);font-family:var(--mono)}
.cnc-comp-block-link{
font-size:11px;color:var(--accent, #2563eb);text-decoration:none;
padding:3px 8px;border:1px solid var(--accent, #2563eb);border-radius:6px;
}
.cnc-comp-block-link:hover{background:var(--accent, #2563eb);color:#fff}
.cnc-creatives-meta{
font-size:11px;color:var(--muted);font-family:var(--mono);margin-bottom:10px;
}
.cnc-creatives-grid{
display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
gap:12px;
}
.cnc-ad-card{
background:#fafafa;border:1px solid var(--border);border-radius:10px;
overflow:hidden;display:flex;flex-direction:column;
}
.cnc-ad-media{
width:100%;aspect-ratio:1/1;object-fit:cover;background:#eee;
display:block;
}
.cnc-ad-media-empty{
display:flex;align-items:center;justify-content:center;font-size:32px;color:#ccc;
}
.cnc-ad-body{padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:6px}
.cnc-ad-text{font-size:12px;line-height:1.45;color:var(--ink);min-height:36px}
.cnc-ad-meta{
display:flex;justify-content:space-between;gap:8px;
font-size:10px;color:var(--muted);font-family:var(--mono);
}
.cnc-ad-link{
font-size:11px;color:var(--accent, #2563eb);text-decoration:none;margin-top:2px;
}
.cnc-ad-link:hover{text-decoration:underline}
/* ── Google: layout 2-col (lista + iframe) ── */
.cnc-google-host{
display:grid;grid-template-columns:240px 1fr;gap:12px;
height:calc(100vh - 280px);min-height:420px;
}
.cnc-google-side{
background:#fff;border:1px solid var(--border);border-radius:10px;
padding:8px;overflow-y:auto;
}
.cnc-google-side-lbl{
font-size:10px;color:var(--muted);font-family:var(--mono);
text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;
}
.cnc-google-side-item{
display:flex;flex-direction:column;align-items:flex-start;gap:2px;
width:100%;padding:8px 10px;
background:transparent;border:none;border-radius:7px;cursor:pointer;
text-align:left;color:var(--ink);
}
.cnc-google-side-item:hover{background:#f5f5f7}
.cnc-google-side-item.is-active{background:#e7f0fd;color:#1e4690}
.cnc-google-side-name{font-size:12px;font-weight:600}
.cnc-google-side-dom{font-size:10px;color:var(--muted);font-family:var(--mono)}
.cnc-google-main{
background:#fff;border:1px solid var(--border);border-radius:10px;
display:flex;flex-direction:column;overflow:hidden;min-width:0;
}
.cnc-google-toolbar{
padding:10px 12px;border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.cnc-google-iframe{flex:1;width:100%;border:none;background:#fff}
.cnc-google-placeholder{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:40px 24px;text-align:center;background:var(--s2);
}
/* Meta Ads Library · bloqueado (App em Development mode) */
.cnc-meta-blocked{
padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:12px;
text-align:center;display:flex;flex-direction:column;align-items:center;
}
.cnc-mb-ico{
width:54px;height:54px;border-radius:50%;
background:linear-gradient(135deg, #F59E0B 0%, #DC2626 100%);
color:#fff;font-size:24px;
display:flex;align-items:center;justify-content:center;
margin-bottom:12px;
}
.cnc-mb-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px}
.cnc-mb-desc{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:520px;margin-bottom:14px}
.cnc-mb-steps{
text-align:left;font-size:12px;color:var(--text);line-height:1.6;
padding-left:24px;margin:0 0 14px;max-width:560px;
}
.cnc-mb-steps li{margin-bottom:6px}
.cnc-mb-steps a{color:var(--accent);text-decoration:underline}
.cnc-mb-foot{font-size:11.5px;color:var(--muted);margin-bottom:10px}
.cnc-mb-btn{padding:9px 22px;font-size:12.5px}
/* Google Transparency · v3 redesign agência-grade */
.compg-hero{
position:relative;overflow:hidden;
border-bottom:1px solid var(--border);
}
.compg-hero-bg{
position:absolute;inset:0;
background:
radial-gradient(ellipse 700px 220px at 100% 0%, rgba(66,133,244,0.10), transparent 65%),
radial-gradient(ellipse 500px 200px at 0% 100%, rgba(234,67,53,0.06), transparent 60%);
pointer-events:none;
}
.compg-hero-content{
position:relative;z-index:1;
padding:20px 24px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;
}
.compg-hero-text{min-width:0;flex:1}
.compg-hero-eyebrow{
font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
color:var(--accent);margin-bottom:4px;font-family:var(--mono);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:540px;
}
.compg-hero-title{
font-size:22px;font-weight:700;color:var(--ink);line-height:1.2;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:540px;
}
.compg-hero-sub{font-size:12px;color:var(--muted);margin-top:4px}
.compg-hero-sub strong{color:var(--ink);font-weight:600}
.compg-hero-actions{display:flex;gap:6px;flex-shrink:0}
.compg-spin{
display:inline-block;width:11px;height:11px;border-radius:50%;
border:2px solid var(--border);border-top-color:var(--accent);
animation:kw-spin 0.7s linear infinite;vertical-align:middle;margin-left:4px;
}
/* Hint banner para configurar Advertiser ID */
.compg-hint{
display:flex;align-items:flex-start;gap:12px;
padding:14px 20px;margin:0 24px;margin-top:16px;
background:linear-gradient(135deg, rgba(245,158,11,0.10), rgba(245,158,11,0.04));
border:1px solid rgba(245,158,11,0.30);border-radius:12px;
}
.compg-hint-ico{font-size:22px;line-height:1}
.compg-hint-text{font-size:12.5px;color:var(--ink);line-height:1.55}
.compg-hint-text strong{font-weight:700}
.compg-hint-text code{font-family:var(--mono);background:rgba(245,158,11,0.18);padding:1px 6px;border-radius:4px;font-size:11.5px;color:#92400E}
/* Filter chips */
.compg-filters{
display:flex;gap:6px;padding:12px 24px;
border-bottom:1px solid var(--border);background:var(--s2);
}
.compg-chip{
display:inline-flex;align-items:center;gap:8px;
padding:6px 12px;border-radius:18px;
background:var(--surface);border:1px solid var(--border);
font-size:12px;font-weight:600;color:var(--text);cursor:pointer;
transition:all .15s;
}
.compg-chip:hover{border-color:var(--accent);color:var(--accent)}
.compg-chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.compg-chip-count{
font-size:10.5px;font-weight:700;
padding:1px 7px;border-radius:10px;
background:var(--s2);color:var(--muted2);
}
.compg-chip.is-active .compg-chip-count{background:rgba(255,255,255,0.22);color:#fff}
/* Grid */
.compg-grid{
padding:20px 24px;display:grid;
grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
gap:18px;overflow-y:auto;
}
.compg-card{
display:flex;flex-direction:column;
text-decoration:none;color:var(--text);
background:var(--surface);border:1px solid var(--border);border-radius:14px;
overflow:hidden;
box-shadow:0 1px 2px rgba(0,0,0,0.03);
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.compg-card:hover{
transform:translateY(-4px);
box-shadow:0 14px 32px rgba(0,0,0,0.10);
border-color:var(--accent);
}
.compg-thumb{
position:relative;aspect-ratio:1/1;
background:#fff;
display:flex;align-items:center;justify-content:center;overflow:hidden;
border-bottom:1px solid var(--border);
}
.compg-thumb::before{
content:'';position:absolute;inset:0;
background:repeating-linear-gradient(45deg, var(--s2) 0 6px, transparent 6px 12px);
opacity:0.4;z-index:0;
}
.compg-thumb img{
position:relative;z-index:1;
width:100%;height:100%;
object-fit:contain;background:#fff;display:block;
}
.compg-noimg{
position:relative;z-index:1;
font-size:36px;color:var(--muted);text-align:center;line-height:1.2;
}
.compg-noimg span{display:block;font-size:11px;margin-top:6px;font-weight:600}
.compg-fmt{
position:absolute;top:10px;right:10px;z-index:2;
background:rgba(15,23,42,0.85);color:#fff;
padding:4px 10px;border-radius:14px;
font-size:10px;font-weight:700;letter-spacing:.3px;
box-shadow:0 4px 10px rgba(0,0,0,0.25);
backdrop-filter:blur(6px);
}
.compg-fmt.is-video{background:rgba(220,38,38,0.92)}
.compg-foot{
padding:11px 14px;
display:flex;align-items:center;gap:8px;
background:var(--surface);
}
.compg-foot-text{flex:1;min-width:0}
.compg-foot-name{
font-size:12.5px;font-weight:600;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
display:flex;align-items:center;gap:5px;
}
.compg-foot-id{
font-size:10px;color:var(--muted2);font-family:var(--mono);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.compg-foot-arrow{
font-size:14px;color:var(--muted);
width:26px;height:26px;border-radius:50%;
background:var(--s2);display:flex;align-items:center;justify-content:center;
transition:all .15s;flex-shrink:0;
}
.compg-card:hover .compg-foot-arrow{background:var(--accent);color:#fff;transform:translate(2px, -2px)}
.compg-verified{
display:inline-flex;align-items:center;justify-content:center;
background:#10B981;color:#fff;
width:16px;height:16px;border-radius:50%;
font-size:10px;font-weight:700;flex-shrink:0;
}
/* Loading skeleton */
.compg-skeleton{
padding:20px 24px;display:grid;
grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:18px;
}
.compg-skel-card{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
overflow:hidden;
}
.compg-skel-thumb{
aspect-ratio:1/1;
background:linear-gradient(90deg, var(--s2) 0%, var(--s3) 50%, var(--s2) 100%);
background-size:200% 100%;
animation:compg-shimmer 1.5s infinite linear;
}
.compg-skel-foot{
height:46px;
background:linear-gradient(90deg, var(--s2) 0%, var(--s3) 50%, var(--s2) 100%);
background-size:200% 100%;
animation:compg-shimmer 1.5s infinite linear;
animation-delay:0.2s;
}
@keyframes compg-shimmer{
from{background-position:200% 0}
to{background-position:-200% 0}
}
/* Empty / Error */
.compg-empty,.compg-error{
padding:64px 24px;text-align:center;color:var(--muted);
display:flex;flex-direction:column;align-items:center;gap:8px;
}
.compg-empty-ico,.compg-err-ico{font-size:42px;opacity:.5;margin-bottom:6px}
.compg-empty-title{font-size:14px;font-weight:600;color:var(--ink)}
.compg-err-title{font-size:14px;font-weight:700;color:var(--red);margin-top:4px}
.compg-err-msg{font-size:12px;color:var(--muted);max-width:500px;line-height:1.5}
.compg-err-hint{font-size:11px;color:var(--muted2);margin-top:6px}
/* Dark theme */
[data-theme="dark"] .compg-thumb{background:#1a1a1a}
[data-theme="dark"] .compg-thumb img{background:#fff}
[data-theme="dark"] .compg-thumb::before{opacity:0.2}
/* ── Keywords: tabela + inputs inline ── */
.cnc-kw-card{
background:#fff;border:1px solid var(--border);border-radius:12px;
overflow:hidden;
}
.cnc-kw-table{width:100%;border-collapse:collapse}
.cnc-kw-table th{
font-size:11px;color:var(--muted);font-family:var(--mono);
text-transform:uppercase;letter-spacing:.3px;
padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;
background:#fafafa;
}
.cnc-kw-table td{padding:7px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.cnc-kw-table tr:last-child td{border-bottom:none}
.cnc-kw-inp, .cnc-kw-sel{
width:100%;padding:6px 9px;font-size:12px;
border:1px solid transparent;border-radius:6px;background:transparent;
}
.cnc-kw-inp:hover, .cnc-kw-sel:hover{border-color:var(--border);background:#fff}
.cnc-kw-inp:focus, .cnc-kw-sel:focus{border-color:var(--accent, #2563eb);background:#fff;outline:none}
.cnc-kw-inp-num{text-align:right;font-family:var(--mono)}
.cnc-kw-del{
width:26px;height:26px;padding:0;border-radius:6px;
border:1px solid transparent;background:transparent;color:var(--muted);
font-size:13px;cursor:pointer;
}
.cnc-kw-del:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca}
/* ── Keywords v2 · Research via Google Keyword Planner ──────────── */
.kw-search-card{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:18px 20px;margin-bottom:14px;
background-image:
radial-gradient(ellipse 500px 200px at 100% 0%, rgba(66,133,244,0.08), transparent 65%),
radial-gradient(ellipse 400px 180px at 0% 100%, rgba(52,168,83,0.05), transparent 60%);
}
.kw-search-row{display:flex;gap:8px;align-items:stretch}
.kw-search-input-wrap{flex:1;position:relative;display:flex;align-items:center}
.kw-search-ico{position:absolute;left:14px;font-size:14px;color:var(--muted);pointer-events:none}
.kw-search-input{
width:100%;padding:11px 14px 11px 38px;
border:1px solid var(--border);border-radius:10px;
font-size:13px;background:var(--surface);color:var(--text);
font-family:inherit;transition:border-color .15s, box-shadow .15s;
}
.kw-search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(66,133,244,0.12)}
.kw-search-btn{padding:0 22px;font-size:13px;font-weight:600;white-space:nowrap}
.kw-search-extra{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
.kw-search-url{
flex:1;min-width:280px;padding:8px 12px;
border:1px solid var(--border);border-radius:8px;
font-size:12px;background:var(--surface);color:var(--text);
}
.kw-search-sel{padding:8px 10px;font-size:12px;border-radius:8px}
.kw-search-meta{font-size:10.5px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:4px}
/* Loading state */
.kw-loading{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:60px 24px;text-align:center;color:var(--muted);font-size:13px;
display:flex;flex-direction:column;align-items:center;gap:14px;
}
.kw-spinner{
width:32px;height:32px;border-radius:50%;
border:3px solid var(--border);border-top-color:var(--accent);
animation:kw-spin 0.7s linear infinite;
}
@keyframes kw-spin { to { transform:rotate(360deg) } }
/* Empty / Prompt state */
.kw-prompt,.kw-empty{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:48px 24px;text-align:center;color:var(--muted);font-size:13px;
display:flex;flex-direction:column;align-items:center;
}
.kw-error{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:32px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.kw-error-ico{font-size:30px;opacity:.7}
.kw-error-msg{font-weight:600;color:var(--red);font-size:13px;max-width:600px;line-height:1.5}
.kw-error-hint{font-size:11.5px;color:var(--muted);max-width:520px;line-height:1.55;margin-top:4px}
/* Results card */
.kw-results-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px}
.kw-results-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:10px}
.kw-results-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.kw-results-meta{font-size:11px;color:var(--muted)}
.kw-results-wrap{overflow-x:auto}
.kw-results-table{width:100%;border-collapse:collapse;font-size:12.5px}
.kw-results-table thead{background:var(--s2)}
.kw-results-table th{
text-align:left;padding:10px 14px;font-weight:700;font-size:10px;
color:var(--muted);text-transform:uppercase;letter-spacing:.6px;
border-bottom:1px solid var(--border);
}
.kw-results-table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.kw-results-table tbody tr:hover{background:var(--s2)}
.kw-results-table tbody tr:last-child td{border-bottom:none}
.kw-rank-cell{width:48px;text-align:center}
.kw-rank{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;border-radius:50%;
background:var(--s2);color:var(--muted);
font-size:11px;font-weight:700;font-family:var(--mono);
}
.kw-kw-cell{min-width:200px;max-width:380px}
.kw-kw-text{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;display:block;white-space:nowrap}
.kw-num-cell{text-align:right;font-family:var(--mono);width:140px;min-width:120px}
.kw-act-cell{text-align:center;width:130px}
.kw-mono{font-family:var(--mono)}
/* Volume bar */
.kw-vol-wrap{
position:relative;display:flex;align-items:center;justify-content:flex-end;
height:24px;padding:0 8px;border-radius:6px;background:var(--s2);overflow:hidden;
}
.kw-vol-bar{
position:absolute;left:0;top:0;bottom:0;opacity:.35;border-radius:6px 0 0 6px;
transition:width .25s;
}
.kw-vol-xl{background:linear-gradient(90deg, #DC2626 0%, #EF4444 100%)}
.kw-vol-lg{background:linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%)}
.kw-vol-md{background:linear-gradient(90deg, #4285F4 0%, #5B9CFF 100%)}
.kw-vol-sm{background:linear-gradient(90deg, #6B7280 0%, #9CA3AF 100%)}
.kw-vol-val{position:relative;font-weight:600;color:var(--ink);font-size:12px;z-index:1}
/* Competition pills */
.kw-pill{
display:inline-flex;align-items:center;
padding:3px 10px;border-radius:8px;
font-size:11.5px;font-weight:700;
}
.kw-comp-high{background:rgba(239,68,68,0.12);color:#DC2626}
.kw-comp-mid{background:rgba(245,158,11,0.14);color:#D97706}
.kw-comp-low{background:rgba(16,185,129,0.14);color:#059669}
.kw-comp-unk{background:var(--s3);color:var(--muted2)}
/* Save button */
.kw-save-btn{
padding:5px 12px;border-radius:8px;font-size:11.5px;font-weight:600;
border:1px solid var(--border);background:var(--surface);color:var(--ink);
cursor:pointer;transition:all .15s;
display:inline-flex;align-items:center;gap:4px;
}
.kw-save-btn:hover:not(:disabled){background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.kw-save-btn.is-saved{background:rgba(16,185,129,0.12);color:#059669;border-color:rgba(16,185,129,0.3);cursor:default}
.kw-save-btn:disabled{opacity:.7;cursor:default}
/* Saved list card */
.kw-saved-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.kw-saved-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.kw-saved-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.kw-saved-meta{font-size:11px;color:var(--muted)}
.kw-saved-wrap{overflow-x:auto}
.kw-saved-table{width:100%;border-collapse:collapse;font-size:12.5px}
.kw-saved-table thead{background:var(--s2)}
.kw-saved-table th{
text-align:left;padding:10px 14px;font-weight:700;font-size:10px;
color:var(--muted);text-transform:uppercase;letter-spacing:.6px;
border-bottom:1px solid var(--border);
}
.kw-saved-table td{padding:8px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.kw-saved-table tbody tr:last-child td{border-bottom:none}
.kw-saved-q{min-width:200px;max-width:320px}
.kw-saved-text{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;display:block;white-space:nowrap}
.kw-saved-num{text-align:right;font-family:var(--mono);width:120px}
.kw-saved-sel,.kw-saved-notes{
width:100%;padding:5px 8px;font-size:12px;
border:1px solid transparent;border-radius:6px;background:transparent;
font-family:inherit;
}
.kw-saved-sel:hover,.kw-saved-notes:hover{border-color:var(--border);background:var(--surface)}
.kw-saved-sel:focus,.kw-saved-notes:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.kw-saved-del{
width:26px;height:26px;padding:0;border-radius:6px;
border:1px solid transparent;background:transparent;color:var(--muted);
font-size:13px;cursor:pointer;
}
.kw-saved-del:hover{background:rgba(239,68,68,0.10);color:var(--red);border-color:rgba(239,68,68,0.2)}
/* Dark adjustments */
[data-theme="dark"] .kw-vol-bar{opacity:.5}
/* Responsive */
@media (max-width:900px) {
.kw-search-row{flex-direction:column}
.kw-search-btn{width:100%}
.kw-search-extra{flex-direction:column}
.kw-search-url{min-width:0;width:100%}
}
/* ─── Fase 5 · Objectivos · agrupamento por segmento ──────────────── */
.pj-wiz-obj-segment {
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px 16px;
margin-bottom: 14px;
background: #fff;
}
.pj-wiz-obj-segment-hdr {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.pj-wiz-obj-segment-name {
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.pj-wiz-obj-segment-nom {
font-family: var(--mono);
font-size: 11px;
color: var(--muted);
background: var(--card-soft, #f5f5f5);
padding: 2px 7px;
border-radius: 5px;
}
/* ─── Tabs de Sheet na página Qualificação ────────────────────────── */
.qual-sheet-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.qual-sheet-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
font-size: 12px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.qual-sheet-tab:hover {
background: var(--card-soft, #fafafa);
border-color: var(--ink-soft, #c7c7c7);
}
.qual-sheet-tab.is-active {
background: var(--accent, #ea462a);
color: #fff;
border-color: var(--accent, #ea462a);
}
.qual-sheet-tab-count {
font-family: var(--mono);
font-size: 10px;
background: rgba(0,0,0,0.08);
padding: 1px 6px;
border-radius: 4px;
}
.qual-sheet-tab.is-active .qual-sheet-tab-count {
background: rgba(255,255,255,0.25);
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* EMAIL · Gmail */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.email-layout{
display:flex;flex-direction:column;height:calc(100vh - 120px);min-height:560px;
background:var(--surface);border:1px solid var(--border);border-radius:11px;overflow:hidden;
}
.email-toolbar{
display:flex;align-items:center;gap:12px;padding:10px 14px;
border-bottom:1px solid var(--border);background:var(--s2);
}
.email-tb-btn{
width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:var(--surface);
display:flex;align-items:center;justify-content:center;cursor:pointer;
font-size:14px;color:var(--ink);font-family:var(--font);transition:all .12s;
}
.email-tb-btn:hover{background:var(--s2);border-color:var(--border2)}
.email-tb-title{
font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.2px;
min-width:140px;
}
.email-search{
flex:1;max-width:380px;position:relative;
}
.email-search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none}
.email-search-input{
width:100%;padding:7px 30px 7px 28px;border:1px solid var(--border);border-radius:7px;
background:var(--surface);font-size:12px;color:var(--ink);font-family:var(--font);
}
.email-search-input:focus{outline:none;border-color:var(--accent)}
.email-search-clear{
position:absolute;right:6px;top:50%;transform:translateY(-50%);
background:transparent;border:0;cursor:pointer;font-size:14px;color:var(--muted);
width:20px;height:20px;border-radius:50%;
}
.email-search-clear:hover{background:var(--s2);color:var(--ink)}
.email-tb-meta{margin-left:auto;font-size:11px;color:var(--muted);font-family:var(--mono)}
.email-panes{
display:grid;grid-template-columns:200px 520px 1fr;flex:1;overflow:hidden;
}
/* —— Sidebar de pastas —— */
.email-sidebar{
border-right:1px solid var(--border);background:var(--s2);overflow-y:auto;
padding:10px 0;display:flex;flex-direction:column;
}
.email-side-section{display:flex;flex-direction:column;gap:1px;padding:0 8px}
.email-side-sep{height:1px;background:var(--border);margin:10px 14px}
.email-side-h{
font-size:9px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;
font-family:var(--mono);padding:6px 6px 6px;
}
.email-side-row{
display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;cursor:pointer;
font-size:12px;color:var(--ink);transition:all .1s;
}
.email-side-row:hover{background:var(--surface)}
.email-side-row.is-active{background:var(--accent-bg);color:var(--accent);font-weight:600}
.email-side-row.is-drop-target{
background:var(--accent-bg) !important;outline:2px dashed var(--accent);outline-offset:-2px;
}
.email-side-ico{font-size:13px;width:16px;text-align:center;flex-shrink:0}
.email-side-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-side-cnt{
font-size:10px;font-weight:700;background:var(--accent);color:#fff;
padding:1px 6px;border-radius:8px;font-family:var(--mono);flex-shrink:0;
}
.email-side-row.is-active .email-side-cnt{background:#fff;color:var(--accent)}
/* —— Lista de mensagens —— */
.email-list-wrap{
display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden;background:var(--surface);
}
.email-list-header{
display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);
background:var(--s2);font-size:11px;color:var(--muted2);font-family:var(--mono);
}
.email-check-all{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.email-check-all input{cursor:pointer}
.email-list{flex:1;overflow-y:auto}
/* —— Bulk actions bar — wraps quando a coluna é estreita —— */
.email-bulkbar{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:8px 12px;background:var(--accent-bg);border-bottom:1px solid var(--accent-border);
font-size:12px;color:var(--accent);flex-wrap:wrap;row-gap:6px;
}
.email-bulkbar strong{color:var(--accent);font-weight:700}
.email-bulkbar-l{display:flex;align-items:center;gap:10px;flex-shrink:0}
.email-bulk-clear{
background:transparent;border:0;color:var(--accent);font-size:11px;text-decoration:underline;
cursor:pointer;font-family:var(--font);
}
.email-bulk-clear:hover{color:var(--accent-hover)}
.email-bulkbar-r{display:flex;align-items:center;gap:5px;position:relative;flex-wrap:wrap;row-gap:5px}
.email-bulk-btn{
padding:5px 9px;border:1px solid var(--accent-border);border-radius:6px;background:var(--surface);
font-size:11px;color:var(--accent);cursor:pointer;font-family:var(--font);font-weight:500;
transition:all .12s;white-space:nowrap;
}
.email-bulk-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.email-bulk-move-wrap{position:relative}
.email-bulk-move-popover{
position:absolute;top:30px;right:0;z-index:30;
background:var(--surface);border:1px solid var(--border);border-radius:9px;
padding:5px;min-width:200px;max-height:260px;overflow-y:auto;
box-shadow:0 6px 20px rgba(0,0,0,.1);
}
/* Linha de mensagem — layout 2 linhas para o assunto ter espaço.
Linha 1: checkbox · ícones · remetente · hora
Linha 2: ────────── · assunto + snippet (full width) */
.email-row{
display:grid;
grid-template-columns:24px 30px 1fr 60px;
grid-template-rows:auto auto;
grid-template-areas:
"check icons sender time"
"check icons body body";
gap:2px 10px;align-items:center;
padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;
transition:background .1s;
}
.email-row .email-row-check{grid-area:check}
.email-row .email-row-icons{grid-area:icons}
.email-row .email-row-sender{grid-area:sender}
.email-row .email-row-time{grid-area:time;text-align:right}
.email-row .email-row-body{grid-area:body;margin-top:1px}
.email-row:hover{background:var(--s2)}
.email-row.is-selected{background:var(--accent-bg) !important;border-left:3px solid var(--accent);padding-left:9px}
.email-row.is-checked{background:#fff7f4}
.email-row.is-checked.is-selected{background:var(--accent-bg) !important}
.email-row.is-read{opacity:.7}
.email-row.is-unread .email-row-sender{font-weight:700;color:var(--ink)}
.email-row.is-unread .email-row-subj{font-weight:700}
.email-row.is-read .email-row-sender{font-weight:500;color:var(--muted2)}
.email-row.is-dragging{opacity:.4}
.email-row-check{
display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.email-row-check input{cursor:pointer;width:14px;height:14px;accent-color:var(--accent)}
.email-row-icons{display:flex;align-items:center;gap:3px;justify-content:center}
.email-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(234,70,42,.15)}
.email-imp{color:var(--amber);font-weight:700;font-size:14px;line-height:1}
.email-star{color:var(--amber);font-size:11px;line-height:1}
.email-row-sender{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Body usa flex — subject tem prioridade (cresce até ao seu conteúdo, depois trunca);
snippet trunca primeiro (flex:1 + min-width:0). */
.email-row-body{font-size:12.5px;min-width:0;display:flex;align-items:baseline;gap:6px;overflow:hidden}
.email-row-subj{color:var(--ink);white-space:nowrap;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;min-width:60px}
.email-row-snip{color:var(--muted);font-weight:400;white-space:nowrap;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.email-row-time{font-size:10px;color:var(--muted);font-family:var(--mono);text-align:right}
/* Drag ghost para multi-select */
.email-drag-ghost{
position:absolute;top:-1000px;background:var(--accent);color:#fff;
padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;
box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.email-reader{
overflow-y:auto;padding:0;background:var(--surface);display:flex;flex-direction:column;
}
.email-state{
font-size:12px;color:var(--muted);font-family:var(--mono);
display:flex;align-items:center;justify-content:center;padding:30px;
text-align:center;
}
.email-state-big{
flex:1;font-size:13px;font-family:var(--font);
display:flex;flex-direction:column;gap:10px;
}
.email-state-emoji{font-size:48px;opacity:.3}
.email-reader-h{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:18px 22px 8px;
}
.email-reader-subj{
font-size:18px;font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.3px;
flex:1;min-width:0;
}
.email-reader-actions{display:flex;gap:4px;flex-shrink:0;position:relative}
.email-act-btn{
width:32px;height:32px;border-radius:7px;border:1px solid var(--border);background:var(--surface);
cursor:pointer;font-size:14px;color:var(--muted2);font-family:var(--font);
display:flex;align-items:center;justify-content:center;transition:all .12s;padding:0;
}
.email-act-btn:hover{background:var(--s2);color:var(--ink);border-color:var(--border2)}
.email-act-btn.is-active{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-border)}
.email-act-btn.email-act-danger:hover{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}
.email-bulk-btn.email-bulk-danger{color:var(--red);border-color:var(--red-border)}
.email-bulk-btn.email-bulk-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
/* —— Compose button no toolbar —— */
.email-compose-btn{
display:inline-flex;align-items:center;gap:6px;
padding:6px 13px;border-radius:8px;border:1px solid var(--accent);
background:var(--accent);color:#fff;font-size:12px;font-weight:600;
cursor:pointer;font-family:var(--font);transition:all .14s;
}
.email-compose-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
/* —— Compose modal —— */
.email-compose-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.4);
display:none;align-items:center;justify-content:center;z-index:9999;
backdrop-filter:blur(2px);
}
.email-compose-overlay.open{display:flex}
.email-compose{
background:var(--surface);border-radius:14px;width:min(640px, 95vw);max-height:90vh;
display:flex;flex-direction:column;overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.email-compose-h{
display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;border-bottom:1px solid var(--border);
}
.email-compose-title{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.email-compose-close{
width:26px;height:26px;border-radius:6px;border:0;background:transparent;cursor:pointer;
font-size:16px;color:var(--muted);transition:all .12s;
}
.email-compose-close:hover{background:var(--s2);color:var(--ink)}
.email-compose-body{padding:14px 18px;overflow-y:auto;flex:1}
.email-compose-field{margin-bottom:10px}
.email-compose-field label{
font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;
font-family:var(--mono);display:block;margin-bottom:4px;
}
.email-recip-row{
display:flex;flex-wrap:wrap;align-items:center;gap:4px;
padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface);
transition:border-color .12s;
}
.email-recip-row:focus-within{border-color:var(--accent)}
.email-recip-chips{display:contents}
.email-recip-chip{
display:inline-flex;align-items:center;gap:5px;
background:var(--s2);border:1px solid var(--border);
padding:2px 4px 2px 8px;border-radius:11px;
font-size:11px;color:var(--ink);font-family:var(--mono);
}
.email-recip-chip-close{
background:transparent;border:0;cursor:pointer;color:var(--muted);
font-size:13px;line-height:1;padding:0;width:16px;height:16px;
display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.email-recip-chip-close:hover{background:var(--red-bg);color:var(--red)}
.email-recip-row input{
flex:1;min-width:120px;border:0;background:transparent;outline:none;
padding:4px 4px;font-size:12px;color:var(--ink);font-family:var(--font);
}
.email-compose-field input[type="text"]{
width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;
font-size:13px;color:var(--ink);background:var(--surface);font-family:var(--font);
}
.email-compose-field input[type="text"]:focus{outline:none;border-color:var(--accent)}
.email-compose-cc-toggles{display:flex;gap:8px;margin-bottom:10px}
.email-compose-cc-toggles button{
background:transparent;border:0;color:var(--accent);font-size:11px;cursor:pointer;
font-family:var(--font);padding:2px 0;
}
.email-compose-cc-toggles button:hover{text-decoration:underline}
.email-compose-textarea{
width:100%;min-height:220px;resize:vertical;padding:12px 14px;
border:1px solid var(--border);border-radius:8px;background:var(--surface);
font-size:13px;color:var(--ink);font-family:var(--font);line-height:1.55;
}
.email-compose-textarea:focus{outline:none;border-color:var(--accent)}
.email-compose-footer{
display:flex;align-items:center;gap:8px;
padding:12px 18px;border-top:1px solid var(--border);background:var(--s2);
}
/* —— Anexos no compose —— */
.email-attachments{
margin-top:12px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;
background:var(--s2);
}
.email-att-h{
display:flex;align-items:center;justify-content:space-between;gap:8px;
font-size:11px;color:var(--muted2);font-family:var(--mono);font-weight:600;
margin-bottom:6px;
}
.email-att-size{color:var(--muted)}
.email-att-size.is-over{color:var(--red);font-weight:700}
.email-att-list{display:flex;flex-direction:column;gap:4px}
.email-att-chip{
display:flex;align-items:center;gap:8px;padding:6px 10px;
background:var(--surface);border:1px solid var(--border);border-radius:7px;
font-size:12px;
}
.email-att-icon{font-size:14px;flex-shrink:0}
.email-att-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.email-att-fsize{font-size:10px;color:var(--muted);font-family:var(--mono);flex-shrink:0}
.email-att-remove{
background:transparent;border:0;cursor:pointer;color:var(--muted);
font-size:14px;line-height:1;padding:0;width:18px;height:18px;
display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;
}
.email-att-remove:hover{background:var(--red-bg);color:var(--red)}
/* Drag-over visual no modal compose */
.email-compose.is-drag-over{
outline:3px dashed var(--accent);outline-offset:-2px;
}
/* —— Painel de Triagem IA (no modal Preferências do Email) —— */
.email-triage-panel{
background:var(--s2);border-radius:8px;padding:12px;font-size:12px;
}
.email-triage-toggle{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);cursor:pointer}
.email-triage-toggle input{cursor:pointer;width:14px;height:14px;accent-color:var(--accent)}
.email-triage-stats{
display:flex;gap:14px;margin:10px 0 6px;font-size:11px;color:var(--muted2);
font-family:var(--mono);
}
.email-triage-stats strong{color:var(--ink);font-family:var(--font);font-weight:700}
.email-triage-bylabel{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.email-triage-h{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono);margin-right:6px}
.email-triage-chip{
font-size:10px;background:var(--surface);border:1px solid var(--border);
padding:2px 8px;border-radius:10px;color:var(--muted2);font-family:var(--mono);
}
.email-triage-chip strong{color:var(--accent);font-weight:700;margin-left:3px}
.email-triage-actions{display:flex;gap:6px;margin-top:8px}
.email-triage-actions .btn{font-size:11px;padding:5px 11px}
.email-triage-summary{
font-size:11px;color:var(--muted2);font-family:var(--mono);
padding:6px 10px;background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:6px;margin-bottom:6px;
}
.email-triage-summary strong{color:var(--accent)}
.email-triage-results{max-height:200px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:6px}
.email-triage-row{
padding:4px 6px;font-size:11px;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.55;
}
.email-triage-row + .email-triage-row{border-top:1px dashed var(--border)}
.email-triage-subj{font-weight:500}
/* —— Preview da assinatura HTML no compose —— */
.email-sig-preview{
margin-top:10px;padding:8px 12px;
background:var(--green-bg);border:1px solid var(--green-border);border-radius:7px;
font-size:11px;color:var(--green);
}
.email-sig-preview-h{
display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.email-sig-toggle{
background:transparent;border:0;cursor:pointer;color:var(--green);
font-size:11px;font-family:var(--font);text-decoration:underline;
}
.email-sig-toggle:hover{color:#118030}
.email-sig-preview-body{
margin-top:8px;background:var(--surface);border-radius:5px;overflow:hidden;
}
.email-sig-iframe{width:100%;border:0;display:block;min-height:60px;background:var(--surface)}
/* —— Anexos no leitor (incoming) —— */
.email-reader-attachments{
padding:12px 22px;border-bottom:1px solid var(--border);background:var(--s2);
}
.email-reader-att-h{
font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px;
font-family:var(--mono);margin-bottom:6px;
}
.email-reader-att-list{display:flex;flex-wrap:wrap;gap:6px}
.email-reader-att-chip{
display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
background:var(--surface);border:1px solid var(--border);border-radius:8px;
font-size:12px;color:var(--ink);text-decoration:none;transition:all .12s;
max-width:260px;
}
.email-reader-att-chip:hover{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent)}
.email-reader-att-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-reader-att-dl{font-size:13px;color:var(--accent);flex-shrink:0}
.email-move-wrap{position:relative}
.email-move-popover{
position:absolute;top:36px;right:0;z-index:30;
background:var(--surface);border:1px solid var(--border);border-radius:9px;
padding:5px;min-width:200px;max-height:280px;overflow-y:auto;
box-shadow:0 6px 20px rgba(0,0,0,.1);
}
.email-move-h{
font-size:9px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px;
font-family:var(--mono);padding:5px 10px 4px;
}
.email-move-opt{
display:block;width:100%;text-align:left;padding:6px 10px;border:0;background:transparent;
font-size:12px;color:var(--ink);cursor:pointer;border-radius:5px;font-family:var(--font);
}
.email-move-opt:hover{background:var(--accent-bg);color:var(--accent)}
.email-reader-meta{
padding:0 22px 14px;border-bottom:1px solid var(--border);
font-size:12px;color:var(--muted2);line-height:1.6;
}
.email-reader-meta strong{color:var(--ink);font-weight:600}
.email-reader-email{font-family:var(--mono);color:var(--muted);font-size:11px}
.email-reader-to{font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--mono)}
.email-reader-date{font-size:10px;color:var(--muted);font-family:var(--mono);margin-top:3px}
.email-reader-body{padding:14px 22px 22px;flex:1}
.email-iframe{width:100%;border:0;display:block;min-height:200px;background:var(--surface)}
.email-body-text{
white-space:pre-wrap;font-family:var(--font);font-size:13px;color:var(--ink);
line-height:1.55;margin:0;
}
/* ────────────────────────────────────────────────────────────────
Autocomplete de contactos (partilhado Email composer + Calendar)
──────────────────────────────────────────────────────────────── */
.contact-ac-pop{
position:absolute;z-index:10000;display:none;
background:var(--surface);border:1px solid var(--border);border-radius:9px;
box-shadow:0 8px 24px rgba(0,0,0,.12);
padding:4px;max-height:260px;overflow-y:auto;
min-width:240px;
}
.contact-ac-item{
padding:6px 10px;border-radius:6px;cursor:pointer;font-family:var(--font);
}
.contact-ac-item:hover,.contact-ac-item.is-highlighted{background:var(--accent-bg)}
.contact-ac-name{font-size:13px;color:var(--ink);font-weight:500;line-height:1.2}
.contact-ac-email{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px}
/* ────────────────────────────────────────────────────────────────
Modal de mover em massa (substitui o popover)
──────────────────────────────────────────────────────────────── */
.email-move-modal-overlay{
position:fixed;inset:0;z-index:10000;background:rgba(20,20,18,.4);
display:none;align-items:center;justify-content:center;
}
.email-move-modal-overlay.open{display:flex}
.email-move-modal{
width:min(440px,90vw);max-height:80vh;background:var(--surface);
border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);
display:flex;flex-direction:column;overflow:hidden;
}
.email-move-modal-h{
display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;border-bottom:1px solid var(--border);
}
.email-move-modal-h-title{font-size:14px;font-weight:600;color:var(--ink)}
.email-move-modal-close{
width:28px;height:28px;border:0;background:transparent;cursor:pointer;
font-size:18px;color:var(--muted);border-radius:6px;
}
.email-move-modal-close:hover{background:var(--s2);color:var(--ink)}
.email-move-modal-search{
padding:10px 14px;border-bottom:1px solid var(--border);
}
.email-move-modal-search input{
width:100%;border:1px solid var(--border);border-radius:7px;
padding:8px 10px;font-size:13px;font-family:var(--font);outline:none;
}
.email-move-modal-search input:focus{border-color:var(--accent)}
.email-move-modal-list{
flex:1;overflow-y:auto;padding:6px;
}
.email-move-modal-item{
display:flex;align-items:center;gap:10px;padding:8px 12px;
border-radius:7px;cursor:pointer;font-size:13px;color:var(--ink);
}
.email-move-modal-item:hover{background:var(--accent-bg);color:var(--accent)}
.email-move-modal-item-ico{font-size:14px}
.email-move-modal-item-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-move-modal-empty{
padding:30px 16px;text-align:center;color:var(--muted);font-size:12px;font-family:var(--mono);
}
/* ────────────────────────────────────────────────────────────────
Modal "Agendar envio" — picker de data + hora
──────────────────────────────────────────────────────────────── */
.email-schedule-modal-overlay{
position:fixed;inset:0;z-index:10100;background:rgba(20,20,18,.55);
display:none;align-items:center;justify-content:center;
}
.email-schedule-modal-overlay.open{display:flex}
.email-schedule-modal{
width:min(420px,92vw);background:var(--surface);
border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);
display:flex;flex-direction:column;overflow:hidden;
}
.email-schedule-presets{
display:grid;grid-template-columns:repeat(2,1fr);gap:6px;
padding:12px 14px 0;
}
.email-schedule-preset-btn{
border:1px solid var(--border);background:var(--bg);
padding:10px;border-radius:8px;cursor:pointer;text-align:left;
font-family:var(--font);font-size:12px;color:var(--ink);
}
.email-schedule-preset-btn:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.email-schedule-preset-time{
display:block;font-size:10px;color:var(--muted);font-family:var(--mono);margin-top:3px;
}
.email-schedule-custom{
padding:14px;border-top:1px solid var(--border);margin-top:12px;
}
.email-schedule-custom-row{
display:flex;gap:8px;align-items:center;margin-top:8px;
}
.email-schedule-custom-row input{
border:1px solid var(--border);border-radius:7px;padding:8px 10px;font-size:13px;
font-family:var(--font);outline:none;flex:1;
}
.email-schedule-custom-row input:focus{border-color:var(--accent)}
/* ────────────────────────────────────────────────────────────────
Página de agendados (entry na sidebar de pastas + lista)
──────────────────────────────────────────────────────────────── */
.email-scheduled-list{padding:8px}
.email-scheduled-item{
display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;
padding:10px 12px;border:1px solid var(--border);border-radius:9px;
background:var(--bg);margin-bottom:8px;
}
.email-scheduled-item-subj{font-size:13px;color:var(--ink);font-weight:600;line-height:1.3}
.email-scheduled-item-to{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:3px}
.email-scheduled-item-when{
font-size:11px;color:var(--accent);font-family:var(--mono);font-weight:600;
background:var(--accent-bg);padding:3px 7px;border-radius:5px;white-space:nowrap;
}
.email-scheduled-item-cancel{
font-size:11px;color:var(--red);background:transparent;border:0;cursor:pointer;
padding:4px 8px;font-family:var(--font);
}
.email-scheduled-item-cancel:hover{text-decoration:underline}
/* ════════════════════════════════════════════════════════════════
Página Criativos (repositório Drive) — grid de cards com preview
════════════════════════════════════════════════════════════════ */
.crit-breadcrumb{
display:flex;align-items:center;flex-wrap:wrap;gap:4px;
padding:8px 0 14px;font-size:13px;color:var(--muted);font-family:var(--mono);
}
.crit-bc-link{
color:var(--accent);text-decoration:none;font-weight:500;
padding:3px 7px;border-radius:5px;
}
.crit-bc-link:hover{background:var(--accent-bg)}
.crit-bc-sep{color:var(--muted);user-select:none;opacity:.5}
.crit-bc-current{
color:var(--ink);font-weight:600;padding:3px 7px;
}
.crit-drive-folder .crit-drive-thumb{
background:linear-gradient(135deg, #fef3c7, #fde68a);
}
.crit-drive-folder .crit-drive-icon{font-size:54px;opacity:.85}
.crit-drive-folder:hover .crit-drive-thumb{
background:linear-gradient(135deg, #fde68a, #fcd34d);
}
.crit-drive-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:14px;
}
.crit-drive-card{
background:var(--surface);border:1px solid var(--border);border-radius:11px;
overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
transition:all .15s;position:relative;
}
.crit-drive-card:hover{
border-color:var(--accent);box-shadow:0 6px 18px rgba(0,0,0,.08);
transform:translateY(-1px);
}
.crit-drive-thumb{
height:160px;background:var(--s2);display:flex;align-items:center;justify-content:center;
overflow:hidden;position:relative;
}
.crit-drive-thumb.is-preview{background:#1a1a18}
.crit-drive-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.crit-drive-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.crit-drive-icon{font-size:54px;opacity:.55}
.crit-drive-vid-badge{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
background:rgba(0,0,0,.6);color:#fff;width:48px;height:48px;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:18px;pointer-events:none;
}
.crit-drive-body{padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:4px}
.crit-drive-name{
font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;text-overflow:ellipsis;
/* min-height para evitar saltos quando o nome é curto */
min-height:32px;
}
.crit-drive-meta{
display:flex;align-items:center;gap:5px;
font-size:10px;color:var(--muted);font-family:var(--mono);
}
.crit-drive-actions{
position:absolute;top:8px;right:8px;display:flex;gap:4px;
opacity:0;transition:opacity .15s;
}
.crit-drive-card:hover .crit-drive-actions{opacity:1}
.crit-drive-act{
background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:6px;
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
font-size:13px;color:var(--ink);cursor:pointer;text-decoration:none;
backdrop-filter:blur(4px);
}
.crit-drive-act:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.crit-drive-act-del:hover{background:var(--red);color:#fff;border-color:var(--red)}
/* Drag-and-drop estado */
.crit-drive-dropzone.is-drag-over,
#criativosContent.is-drag-over{
background:var(--accent-bg) !important;outline:2px dashed var(--accent);outline-offset:-4px;
}
/* Modal de preview (fullscreen) */
.crit-drive-preview-overlay{
position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.88);
display:none;flex-direction:column;
}
.crit-drive-preview-overlay.open{display:flex}
.crit-drive-preview-h{
display:flex;align-items:center;justify-content:space-between;
padding:12px 18px;background:rgba(0,0,0,.6);color:#fff;
}
.crit-drive-preview-name{font-size:13px;font-weight:600;flex:1;min-width:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.crit-drive-preview-actions{display:flex;gap:6px;align-items:center}
.crit-drive-preview-act{
background:rgba(255,255,255,.1);border:0;border-radius:6px;
width:34px;height:34px;display:flex;align-items:center;justify-content:center;
font-size:14px;color:#fff;cursor:pointer;text-decoration:none;
}
.crit-drive-preview-act:hover{background:rgba(255,255,255,.2)}
.crit-drive-preview-close{
background:transparent;border:0;color:#fff;font-size:24px;cursor:pointer;
width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:6px;
}
.crit-drive-preview-close:hover{background:rgba(255,255,255,.2)}
.crit-drive-preview-body{
flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:20px;
}
.crit-drive-preview-body img{max-width:100%;max-height:100%;object-fit:contain}
.crit-drive-preview-body video,
.crit-drive-preview-body audio{max-width:100%;max-height:100%}
@media (max-width: 1400px){
.email-panes{grid-template-columns:180px 440px 1fr}
}
@media (max-width: 1100px){
.email-panes{grid-template-columns:160px 360px 1fr}
}
@media (max-width: 900px){
.email-panes{grid-template-columns:1fr}
.email-sidebar, .email-list-wrap{display:none}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* CALENDÁRIO · Google Calendar */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* — Layout geral — */
.cal-layout{display:grid;grid-template-columns:220px 1fr;gap:16px;height:calc(100vh - 120px);min-height:560px}
.cal-side{
background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:14px;
display:flex;flex-direction:column;gap:14px;overflow:hidden;
}
.cal-main{
background:var(--surface);border:1px solid var(--border);border-radius:11px;
display:flex;flex-direction:column;overflow:hidden;
}
/* — Header da página — */
.cal-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 16px;border-bottom:1px solid var(--border);
flex-wrap:wrap;
}
.cal-tb-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cal-tb-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-today-btn{
padding:6px 12px;border-radius:7px;border:1px solid var(--border);background:var(--surface);
font-size:12px;font-weight:500;color:var(--ink);cursor:pointer;font-family:var(--font);
}
.cal-today-btn:hover{background:var(--s2);border-color:var(--border2)}
.cal-nav-arrow{
width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--surface);
display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--ink);
transition:all .12s;
}
.cal-nav-arrow:hover{background:var(--s2);border-color:var(--border2)}
.cal-title-range{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.3px;min-width:180px}
.cal-view-toggle{display:inline-flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:var(--s2)}
.cal-view-btn{
padding:6px 14px;font-size:12px;font-weight:500;background:transparent;border:0;
color:var(--muted2);cursor:pointer;font-family:var(--font);
}
.cal-view-btn:hover{color:var(--ink)}
.cal-view-btn.is-active{background:var(--surface);color:var(--ink);font-weight:600}
.cal-new-btn{
padding:7px 14px;border-radius:7px;background:var(--accent);border:1px solid var(--accent);color:#fff;
font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);
}
.cal-new-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
/* — Sidebar de calendários — */
.cal-side-h{
font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;
font-family:var(--mono);margin-bottom:4px;
}
.cal-side-list{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.cal-side-row{
display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;
font-size:12px;color:var(--ink);transition:background .1s;
}
.cal-side-row:hover{background:var(--s2)}
.cal-side-check{
width:14px;height:14px;border-radius:3px;flex-shrink:0;
border:1.5px solid transparent;display:flex;align-items:center;justify-content:center;
color:#fff;font-size:9px;font-weight:700;
}
.cal-side-row.is-off .cal-side-check{background:transparent !important;border-color:var(--border2)}
.cal-side-row.is-off .cal-side-name{color:var(--muted);text-decoration:line-through}
.cal-side-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-side-role{font-size:9px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px}
/* — Month view — */
.cal-month{display:flex;flex-direction:column;flex:1;overflow:hidden}
.cal-month-weekheader{
display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--border);
}
.cal-mw-day{
padding:8px 10px;font-size:10px;font-weight:600;color:var(--muted);
text-transform:uppercase;letter-spacing:.7px;font-family:var(--mono);
border-right:1px solid var(--border);
}
.cal-mw-day:last-child{border-right:0}
.cal-mw-day.is-weekend{color:var(--muted)}
.cal-month-grid{
display:grid;grid-template-columns:repeat(7,1fr);
flex:1;overflow-y:auto;
}
.cal-cell{
border-right:1px solid var(--border);border-bottom:1px solid var(--border);
min-height:100px;padding:5px 6px;display:flex;flex-direction:column;gap:2px;
cursor:pointer;transition:background .1s;
overflow:hidden;
}
.cal-cell:hover{background:var(--s2)}
.cal-cell:nth-child(7n){border-right:0}
.cal-cell.is-off-month{background:var(--s3);opacity:.5}
.cal-cell.is-today{background:var(--accent-bg)}
.cal-cell.is-today .cal-cell-num{color:var(--accent);font-weight:700}
.cal-cell-num{font-size:12px;font-weight:600;color:var(--ink);align-self:flex-start;line-height:1;margin-bottom:2px}
.cal-cell-events{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.cal-event-chip{
font-size:10px;padding:2px 6px;border-radius:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
color:#fff;font-weight:500;cursor:pointer;line-height:1.4;
display:flex;align-items:center;gap:4px;
}
.cal-event-chip:hover{filter:brightness(1.1)}
.cal-event-chip.is-allday{font-weight:600}
.cal-event-chip-time{font-family:var(--mono);font-size:9px;opacity:.9}
.cal-event-chip.is-past{opacity:.55}
.cal-cell-more{
font-size:10px;color:var(--muted);font-family:var(--mono);
padding:2px 6px;cursor:pointer;
}
.cal-cell-more:hover{color:var(--accent)}
/* — Week / Day views — */
.cal-week{display:flex;flex-direction:column;flex:1;overflow:hidden}
.cal-week-header{
display:grid;border-bottom:1px solid var(--border);
}
.cal-week-corner{
border-right:1px solid var(--border);width:56px;flex-shrink:0;
}
.cal-wh-day{
padding:8px 6px;text-align:center;border-right:1px solid var(--border);
font-size:11px;color:var(--muted);font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;
}
.cal-wh-day:last-child{border-right:0}
.cal-wh-day .cal-wh-num{font-size:18px;font-weight:700;color:var(--ink);display:block;line-height:1;letter-spacing:-.5px;margin-top:2px}
.cal-wh-day.is-today .cal-wh-num{color:var(--accent)}
.cal-wh-day.is-today{background:var(--accent-bg)}
.cal-week-allday{
display:grid;border-bottom:1px solid var(--border);min-height:32px;
background:var(--s2);
}
.cal-week-allday-corner{
font-size:9px;color:var(--muted);font-family:var(--mono);
display:flex;align-items:center;justify-content:flex-end;padding:0 6px;
border-right:1px solid var(--border);
}
.cal-week-allday-col{border-right:1px solid var(--border);padding:3px;display:flex;flex-direction:column;gap:2px;min-height:32px}
.cal-week-allday-col:last-child{border-right:0}
.cal-week-grid{
display:grid;flex:1;overflow-y:auto;position:relative;
}
.cal-week-hours{
border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface);
}
.cal-week-hours .cal-week-hour{
height:48px;font-size:9px;color:var(--muted);font-family:var(--mono);
text-align:right;padding:2px 6px;border-bottom:1px solid var(--border);
}
.cal-week-col{
border-right:1px solid var(--border);position:relative;
}
.cal-week-col:last-child{border-right:0}
.cal-week-col .cal-hour-slot{height:48px;border-bottom:1px solid var(--border)}
.cal-week-col.is-today{background:rgba(234,70,42,0.025)}
.cal-event-box{
position:absolute;left:2px;right:2px;border-radius:5px;
padding:4px 6px;color:#fff;font-size:11px;line-height:1.25;cursor:pointer;
box-shadow:0 1px 2px rgba(0,0,0,.1);
overflow:hidden;
}
.cal-event-box:hover{filter:brightness(1.1);z-index:5}
.cal-event-box-t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-event-box-time{font-size:9px;font-family:var(--mono);opacity:.9}
.cal-event-box.is-past{opacity:.6}
/* ── Drag & drop visual feedback ─────────────────────────────────── */
.cal-event-chip, .cal-event-box{cursor:grab}
.cal-event-chip:active, .cal-event-box:active{cursor:grabbing}
.cal-event-chip.is-dragging, .cal-event-box.is-dragging{
opacity:.4; cursor:grabbing;
}
.cal-cell.cal-drop-hover{
outline:2px dashed var(--accent, #2563eb);
outline-offset:-2px;
background:rgba(37,99,235,.06);
}
.cal-week-col.cal-drop-hover{
background:rgba(37,99,235,.05);
box-shadow:inset 0 0 0 2px rgba(37,99,235,.4);
}
/* Snap-line: linha horizontal durante D&D que mostra onde o topo do evento
vai aterrar + chip com a hora do snap (15 min). */
.cal-drop-preview{
position:absolute;left:0;right:0;height:0;
border-top:2px solid var(--accent, #2563eb);
z-index:6;pointer-events:none;
}
.cal-drop-preview-time{
position:absolute;top:-9px;left:6px;
background:var(--accent, #2563eb);color:#fff;
font-family:var(--mono);font-size:10px;font-weight:600;
padding:2px 6px;border-radius:4px;line-height:1;
}
/* Linha do "agora" no Week/Day view */
.cal-now-line{
position:absolute;left:0;right:0;height:0;border-top:2px solid var(--accent);
z-index:4;pointer-events:none;
}
.cal-now-line::before{
content:'';position:absolute;left:-5px;top:-5px;width:10px;height:10px;
background:var(--accent);border-radius:50%;
}
/* — Modal de evento — */
.cal-modal-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.4);
display:none;align-items:center;justify-content:center;z-index:9999;
backdrop-filter:blur(2px);
}
.cal-modal-overlay.open{display:flex}
.cal-modal{
background:var(--surface);border-radius:14px;padding:22px;width:min(540px, 92vw);max-height:90vh;overflow-y:auto;
box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.cal-modal-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.cal-modal-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.3px}
.cal-modal-close{
width:26px;height:26px;border-radius:6px;border:0;background:transparent;cursor:pointer;
font-size:16px;color:var(--muted);transition:all .12s;
}
.cal-modal-close:hover{background:var(--s2);color:var(--ink)}
.cal-field{margin-bottom:12px}
.cal-field-l{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px;font-family:var(--mono);margin-bottom:4px;display:block}
.cal-input, .cal-textarea, .cal-select{
width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:7px;
font-size:13px;color:var(--ink);background:var(--surface);font-family:var(--font);
}
.cal-input:focus, .cal-textarea:focus, .cal-select:focus{outline:none;border-color:var(--accent)}
.cal-textarea{resize:vertical;min-height:60px;font-family:var(--font)}
.cal-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cal-allday-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted2)}
/* — Date/Time pills no formulário — */
.cal-dt-group{margin-bottom:14px}
.cal-dt-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end}
.cal-dt-side{min-width:0}
.cal-dt-h{
font-size:10px;color:var(--muted);font-weight:600;
text-transform:uppercase;letter-spacing:.6px;font-family:var(--mono);
margin-bottom:5px;display:flex;align-items:center;gap:5px;
}
.cal-dt-arrow{
font-size:14px;color:var(--muted);padding-bottom:18px;font-family:var(--mono);
user-select:none;
}
.cal-dt-pill{
display:flex;align-items:stretch;
border:1px solid var(--border);border-radius:8px;background:var(--surface);
overflow:hidden;transition:all .14s;
}
.cal-dt-pill:focus-within{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(234,70,42,.08);
}
.cal-dt-pill input{
border:0;background:transparent;padding:9px 11px;
font-size:13px;color:var(--ink);font-family:var(--mono);outline:none;
min-width:0;
}
.cal-dt-pill input[type="date"]{flex:1.5}
.cal-dt-pill input[type="time"]{flex:1;border-left:1px solid var(--border);text-align:center}
.cal-dt-pill input[type="date"]:only-child{flex:1;width:100%}
.cal-dt-label{
font-size:10px;color:var(--muted);font-family:var(--mono);
margin-top:4px;text-transform:lowercase;letter-spacing:.2px;
}
@media (max-width: 540px){
.cal-dt-row{grid-template-columns:1fr;gap:6px}
.cal-dt-arrow{display:none}
}
/* — Attendees chips no formulário — */
.cal-attendees{display:flex;flex-direction:column;gap:6px}
.cal-att-chips{display:flex;flex-wrap:wrap;gap:4px;min-height:24px}
.cal-att-chip{
display:inline-flex;align-items:center;gap:6px;
background:var(--s2);border:1px solid var(--border);
padding:3px 8px 3px 8px;border-radius:12px;
font-size:11px;color:var(--ink);font-family:var(--mono);
line-height:1.4;white-space:nowrap;
}
.cal-att-chip.is-organizer{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent)}
.cal-att-chip-close{
background:transparent;border:0;cursor:pointer;color:var(--muted);
font-size:14px;line-height:1;padding:0;width:14px;height:14px;
display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.cal-att-chip-close:hover{background:var(--red-bg);color:var(--red)}
.cal-att-chip-status{
display:inline-flex;align-items:center;justify-content:center;
width:13px;height:13px;border-radius:50%;font-size:9px;font-weight:700;
background:var(--border);color:var(--muted);
}
.cal-att-chip-status.is-yes{background:var(--green);color:#fff}
.cal-att-chip-status.is-no{background:var(--red);color:#fff}
.cal-att-chip-status.is-maybe{background:var(--amber);color:#fff}
.cal-att-chip-role{
font-size:8px;opacity:.7;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
}
/* — Meet toggle button — */
.cal-meet-toggle{
width:100%;padding:10px 14px;border:1px dashed var(--border2);border-radius:8px;
background:var(--surface);color:var(--muted2);font-size:13px;cursor:pointer;
display:flex;align-items:center;gap:10px;font-family:var(--font);font-weight:500;
transition:all .14s;
}
.cal-meet-toggle:hover{border-style:solid;background:var(--s2);color:var(--ink)}
.cal-meet-toggle .cal-meet-ico{font-size:13px}
.cal-meet-toggle.is-active{
background:linear-gradient(135deg,#1a73e8 0%,#1557b0 100%);
color:#fff;border-color:#1a73e8;border-style:solid;
box-shadow:0 1px 3px rgba(26,115,232,.25);
}
.cal-meet-toggle.is-active .cal-meet-ico{
background:#fff;color:#1a73e8;padding:3px 7px;border-radius:4px;font-size:10px;font-weight:700;
}
.cal-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.cal-modal-actions .cal-act-del{margin-right:auto;background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.cal-modal-actions .cal-act-del:hover{background:#fee2e2}
.cal-view-meta{
background:var(--s2);border-radius:8px;padding:10px 12px;margin-bottom:14px;
font-size:12px;color:var(--muted2);line-height:1.6;
}
.cal-view-meta strong{color:var(--ink);font-weight:600}
.cal-view-meta .cal-vm-row{display:flex;align-items:flex-start;gap:8px}
.cal-view-meta .cal-vm-row + .cal-vm-row{margin-top:5px}
.cal-view-meta .cal-vm-ico{flex-shrink:0;width:18px;text-align:center}
@media (max-width: 900px){
.cal-layout{grid-template-columns:1fr;height:auto}
.cal-side{display:none}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* INÍCIO · Boas-vindas */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* —— Hero —— */
.inicio-hero{
display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:26px 28px;margin-bottom:18px;border-radius:18px;
background:linear-gradient(135deg, #fffaf6 0%, #fdf2ec 60%, #fbe9df 100%);
border:1px solid rgba(234,70,42,0.12);
position:relative;overflow:hidden;
animation:inicioFadeUp .45s ease both;
}
.inicio-hero::before{
content:'';position:absolute;top:-60px;right:-40px;width:320px;height:320px;
background:radial-gradient(circle at center, rgba(234,70,42,0.18) 0%, transparent 65%);
pointer-events:none;
}
.inicio-hero::after{
content:'';position:absolute;bottom:-80px;left:30%;width:260px;height:260px;
background:radial-gradient(circle at center, rgba(251,191,36,0.14) 0%, transparent 70%);
pointer-events:none;
}
.inicio-hero-bg{display:none}
.inicio-hero-l{position:relative;z-index:1;min-width:0;flex:1;display:flex;align-items:center;gap:18px}
.inicio-hero-avatar{
width:68px;height:68px;border-radius:50%;
background:#fff;
display:flex;align-items:center;justify-content:center;
overflow:hidden;flex-shrink:0;
border:3px solid #fff;
box-shadow:0 4px 16px rgba(234,70,42,0.18);
position:relative;
}
.inicio-hero-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.inicio-hero-avatar.is-fallback::after{
content:'R';color:#ea462a;font-weight:700;font-size:28px;
}
.inicio-hero-text{min-width:0;flex:1}
.inicio-greet{
font-size:32px;font-weight:700;color:var(--ink);
letter-spacing:-.7px;line-height:1.1;margin-bottom:6px;
font-family:'Georgia', 'Times New Roman', serif;
}
.inicio-greet .accent{color:var(--accent);font-style:italic}
.inicio-date{
font-size:12px;color:var(--muted2);font-family:var(--mono);
margin-bottom:14px;
}
.inicio-summary{display:flex;flex-wrap:wrap;gap:8px}
.inicio-chip{
display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
padding:5px 11px;border-radius:14px;border:1px solid var(--border);background:var(--surface);
color:var(--muted2);font-family:var(--mono);
}
.inicio-chip strong{color:var(--ink);font-weight:700;font-family:var(--font)}
.inicio-chip.crit{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.inicio-chip.crit strong{color:var(--red)}
.inicio-chip.warn{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber)}
.inicio-chip.warn strong{color:var(--amber)}
.inicio-chip.ok{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}
.inicio-chip.ok strong{color:var(--green)}
.inicio-hero-r{
position:relative;z-index:1;text-align:right;
font-family:var(--mono);color:var(--muted);
display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.inicio-clock{
font-size:38px;font-weight:600;color:var(--ink);
letter-spacing:-.8px;line-height:1;
font-variant-numeric:tabular-nums;
font-family:'Georgia', 'Times New Roman', serif;
}
.inicio-weather{
display:inline-flex;align-items:center;gap:8px;
padding:6px 12px;border-radius:20px;
background:rgba(255,255,255,0.6);backdrop-filter:blur(4px);
border:1px solid rgba(234,70,42,0.10);
font-size:12px;
}
.inicio-weather .iw-icon{font-size:16px;line-height:1}
.inicio-weather .iw-temp{font-weight:700;color:var(--ink);font-family:var(--font);font-size:13px}
.inicio-weather .iw-desc{color:var(--muted);font-family:var(--mono);text-transform:lowercase;letter-spacing:.3px}
.inicio-weather.is-loading{opacity:.7}
.inicio-weather.is-loading .iw-desc{text-transform:uppercase;letter-spacing:.8px;font-size:10px}
/* —— Animação fade-up reutilizável para os blocos —— */
@keyframes inicioFadeUp{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}
}
/* —— KPI strip —— */
.inicio-kpi-grid{
display:grid;grid-template-columns:repeat(4, 1fr);gap:12px;
animation:inicioFadeUp .5s ease .05s both;
}
.kpi-card{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:13px 15px;
transition:box-shadow .15s, border-color .15s, transform .15s;
}
.kpi-card:hover{
box-shadow:0 4px 14px rgba(0,0,0,.06);
border-color:var(--border2);
transform:translateY(-1px);
}
.kpi-card-top{
display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;
}
.kpi-label{
font-size:10.5px;font-weight:600;color:var(--muted);
text-transform:uppercase;letter-spacing:.7px;font-family:var(--mono);
}
.kpi-delta{
font-size:10px;font-weight:700;font-family:var(--mono);
padding:2px 7px;border-radius:8px;
background:var(--s2);color:var(--muted2);
letter-spacing:.3px;
}
.kpi-delta.is-up{background:rgba(16,185,129,0.10);color:#059669}
.kpi-delta.is-down{background:rgba(234,70,42,0.10);color:#dc2626}
.kpi-card-bottom{
display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
}
.kpi-value{
font-size:24px;font-weight:700;color:var(--ink);
letter-spacing:-.5px;line-height:1;
font-family:'Georgia', 'Times New Roman', serif;
font-variant-numeric:tabular-nums;
}
.kpi-spark{width:84px;height:26px;flex-shrink:0}
/* —— Layout Semana + Mini calendário —— */
.inicio-week-layout{
display:grid;grid-template-columns:1fr 230px;gap:14px;align-items:stretch;
animation:inicioFadeUp .5s ease .2s both;
}
.inicio-mini-month{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:12px 14px;
display:flex;flex-direction:column;
}
.mini-month-h{
display:flex;align-items:baseline;gap:6px;margin-bottom:10px;
padding-bottom:8px;border-bottom:1px solid var(--border);
}
.mini-month-name{
font-size:13px;font-weight:700;color:var(--ink);
text-transform:capitalize;
font-family:'Georgia', 'Times New Roman', serif;
}
.mini-month-year{font-size:10.5px;color:var(--muted);font-family:var(--mono)}
.mini-month-grid{
display:grid;grid-template-columns:repeat(7, 1fr);gap:2px;
flex:1;
}
.mini-wk{
font-size:9.5px;font-weight:700;color:var(--muted);text-align:center;
text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono);
padding:2px 0;
}
.mini-d{
position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
aspect-ratio:1;font-size:11px;color:var(--text);
border-radius:6px;cursor:pointer;
transition:background .12s;
font-family:var(--mono);
}
.mini-d.is-empty{cursor:default;opacity:0}
.mini-d:not(.is-empty):hover{background:var(--s2)}
.mini-d-num{line-height:1;font-variant-numeric:tabular-nums}
.mini-d.has-ev{font-weight:600;color:var(--ink)}
.mini-d.is-today{
background:var(--accent);color:#fff;font-weight:700;
}
.mini-d.is-today .mini-dot{background:#fff !important}
.mini-dots{
display:flex;gap:2px;position:absolute;bottom:3px;left:0;right:0;justify-content:center;
}
.mini-dot{width:3px;height:3px;border-radius:50%;background:var(--accent)}
/* —— Animação fade-in nos blocos restantes —— */
.inicio-sec{animation:inicioFadeUp .5s ease both}
.inicio-sec:nth-child(2){animation-delay:.05s}
.inicio-sec:nth-child(3){animation-delay:.1s}
.inicio-sec:nth-child(4){animation-delay:.15s}
.inicio-sec:nth-child(5){animation-delay:.2s}
@media (max-width:1100px){
.inicio-kpi-grid{grid-template-columns:repeat(2,1fr)}
.inicio-week-layout{grid-template-columns:1fr}
.inicio-mini-month{max-width:340px;width:100%}
}
/* —— Section label —— */
.inicio-sec{margin-bottom:22px}
.inicio-sec-h{
display:flex;align-items:center;gap:10px;margin-bottom:10px;
font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-family:var(--mono);
}
.inicio-sec-h::after{content:'';flex:1;height:1px;background:var(--border)}
.inicio-sec-h .inicio-sec-act{
text-transform:none;letter-spacing:0;font-family:var(--font);font-size:11px;
color:var(--accent);font-weight:500;cursor:pointer;
}
.inicio-sec-h .inicio-sec-act:hover{text-decoration:underline}
/* —— Block 2: Foco de hoje (3 cards) —— */
.inicio-focus-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.inicio-focus-card{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:14px 16px;display:flex;flex-direction:column;min-height:170px;
transition:box-shadow .15s, border-color .15s;
}
.inicio-focus-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.05);border-color:var(--border2)}
.inicio-focus-hdr{
display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;
font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-family:var(--mono);
}
.inicio-focus-hdr .ifh-ico{font-size:14px}
.inicio-focus-hdr .ifh-count{
background:var(--s2);color:var(--ink);font-weight:700;font-size:10px;
padding:1px 7px;border-radius:9px;letter-spacing:0;
}
.inicio-focus-empty{
flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;
font-size:12px;color:var(--muted);text-align:center;font-family:var(--mono);
}
.inicio-focus-empty .iemoji{font-size:22px;opacity:.5}
.inicio-focus-cta{
margin-top:10px;padding:7px 11px;font-size:11px;font-weight:500;color:var(--accent);
background:transparent;border:1px solid var(--border);border-radius:7px;cursor:pointer;
align-self:flex-start;font-family:var(--font);
}
.inicio-focus-cta:hover{background:var(--accent-bg);border-color:var(--accent-border)}
/* — Próxima reunião — */
.inicio-mtg-when{
display:inline-block;font-size:10px;font-weight:600;color:var(--blue);
background:var(--blue-bg);border:1px solid var(--blue-border);
padding:2px 8px;border-radius:9px;font-family:var(--mono);margin-bottom:8px;
}
.inicio-mtg-when.is-today{color:var(--accent);background:var(--accent-bg);border-color:var(--accent-border)}
.inicio-mtg-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:4px;line-height:1.3}
.inicio-mtg-meta{font-size:11px;color:var(--muted);font-family:var(--mono)}
/* — Tarefas de hoje — */
.inicio-task-list{display:flex;flex-direction:column;gap:4px;flex:1}
.inicio-task-group{display:flex;flex-direction:column;gap:1px;margin-bottom:6px}
.inicio-task-group:last-child{margin-bottom:0}
.inicio-task-group-h{
display:flex;align-items:center;gap:6px;
font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
color:var(--muted);font-family:var(--mono);margin-bottom:3px;padding:2px 0;
}
.inicio-task-group-h.is-overdue{color:var(--red)}
.inicio-task-group-h .itg-c{
background:var(--s2);color:var(--ink);font-weight:700;font-size:9px;
padding:0 6px;border-radius:7px;letter-spacing:0;
}
.inicio-task-group-h.is-overdue .itg-c{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.inicio-task-row{
display:flex;align-items:center;gap:9px;padding:6px 9px;
font-size:13px;border-radius:6px;
transition:background .12s;
}
.inicio-task-row:hover{background:var(--s2)}
.inicio-task-row.overdue{background:var(--red-bg);border:1px solid var(--red-border)}
.inicio-task-row.overdue:hover{background:#fee5e5}
.inicio-task-check{
width:15px;height:15px;border:1.5px solid var(--border2);border-radius:4px;cursor:pointer;flex-shrink:0;
display:flex;align-items:center;justify-content:center;background:var(--surface);transition:all .15s;
}
.inicio-task-check:hover{border-color:var(--accent);background:var(--accent-bg)}
.inicio-task-row.done .inicio-task-check{background:var(--green);border-color:var(--green);color:#fff;font-size:10px;font-weight:700}
.inicio-task-row.done .inicio-task-check::after{content:'✓'}
.inicio-task-row.done .inicio-task-t{text-decoration:line-through;color:var(--muted)}
.inicio-task-row.overdue .inicio-task-check{border-color:var(--red);background:var(--surface)}
.inicio-task-row.overdue .inicio-task-check:hover{background:#fee2e2}
.inicio-task-t{color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inicio-task-time{font-size:10px;color:var(--muted);font-family:var(--mono);flex-shrink:0}
.inicio-task-row.overdue .inicio-task-time{color:var(--red);font-weight:600}
/* — Footer do card de tarefas: CTA esquerda + badge concluídas à direita — */
.inicio-tasks-footer{
display:flex;align-items:center;justify-content:space-between;gap:8px;
margin-top:10px;
}
.inicio-tasks-footer .inicio-focus-cta{margin-top:0}
.inicio-concluidas-badge{
display:inline-flex;align-items:center;gap:5px;
font-size:10px;font-weight:500;color:var(--green);
background:var(--green-bg);border:1px solid var(--green-border);
padding:4px 9px;border-radius:11px;font-family:var(--mono);
white-space:nowrap;
}
.inicio-concluidas-badge strong{font-weight:700;color:var(--green);font-family:var(--font);font-size:11px}
/* — Alertas críticos — */
.inicio-alerts-list{display:flex;flex-direction:column;gap:7px;flex:1}
.inicio-alert-row{
display:flex;gap:8px;padding:8px 10px;border-radius:7px;
background:var(--red-bg);border:1px solid var(--red-border);cursor:pointer;
transition:transform .12s;
}
.inicio-alert-row:hover{transform:translateX(2px)}
.inicio-alert-ico{font-size:14px;flex-shrink:0;line-height:1.2}
.inicio-alert-body{min-width:0;flex:1}
.inicio-alert-t{font-size:12px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inicio-alert-d{font-size:10px;color:var(--muted2);font-family:var(--mono)}
/* —— Block 3: Performance —— */
.inicio-perf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.inicio-kpi{
background:var(--surface);border:1px solid var(--border);border-radius:11px;
padding:14px 16px;position:relative;overflow:hidden;
}
.inicio-kpi-lbl{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px;font-family:var(--mono)}
.inicio-kpi-v{font-size:26px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.5px;margin-bottom:6px}
.inicio-kpi-d{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:3px;font-family:var(--mono)}
.inicio-kpi-d.up{color:var(--green)}
.inicio-kpi-d.dn{color:var(--red)}
.inicio-kpi-d.nu{color:var(--muted)}
.inicio-kpi-sub{font-size:10px;color:var(--muted);margin-top:4px;font-family:var(--mono)}
.inicio-kpi-spark{position:absolute;right:10px;bottom:10px;width:64px;height:24px;opacity:.55}
.inicio-kpi.is-loading .inicio-kpi-v{color:var(--muted);font-weight:500;font-size:14px}
.inicio-kpi.is-empty .inicio-kpi-v{color:var(--muted);font-weight:500;font-size:14px}
/* —— Block 4: A precisar de ti —— */
.inicio-att-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inicio-att-card{
background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:14px 16px;
}
.inicio-att-h{
display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;
font-size:12px;font-weight:600;color:var(--ink);
}
.inicio-att-h .iah-c{font-size:10px;color:var(--muted);font-family:var(--mono)}
.inicio-att-list{display:flex;flex-direction:column;gap:8px}
.inicio-att-row{
display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink);
padding:7px 9px;border-radius:7px;background:var(--s2);cursor:pointer;
border:1px solid transparent;transition:all .12s;
}
.inicio-att-row:hover{background:var(--accent-bg);border-color:var(--accent-border)}
.inicio-att-ico{font-size:13px;flex-shrink:0}
.inicio-att-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inicio-att-meta{font-size:10px;color:var(--muted);font-family:var(--mono);flex-shrink:0}
.inicio-att-empty{
font-size:12px;color:var(--muted);text-align:center;padding:14px 0;font-family:var(--mono);
}
/* —— Chats favoritos (chips no Início) —— */
.inicio-chats-grid{
display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:8px;
}
.inicio-chat-chip{
display:flex;align-items:center;gap:10px;padding:10px 12px;
background:var(--surface);border:1px solid var(--border);border-radius:11px;
cursor:pointer;font-family:var(--font);text-align:left;
transition:all .14s;color:var(--ink);
}
.inicio-chat-chip:hover{
border-color:var(--accent-border);background:var(--accent-bg);
transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.inicio-chat-avatar{
width:34px;height:34px;border-radius:50%;flex-shrink:0;overflow:hidden;
display:flex;align-items:center;justify-content:center;
background:var(--s2);color:var(--muted2);font-size:13px;font-weight:700;
}
.inicio-chat-avatar.is-dm{background:var(--accent-bg);color:var(--accent);font-size:11px}
.inicio-chat-avatar.has-photo{background:transparent}
.inicio-chat-avatar.has-photo img{width:100%;height:100%;object-fit:cover}
.inicio-chat-name{
font-size:13px;font-weight:500;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* —— Emails importantes (placeholder Phase C) —— */
.inicio-sec-h{position:relative}
.inicio-emails-card{
background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;
}
.inicio-emails-card.is-empty{
text-align:center;
background:linear-gradient(180deg, var(--surface) 0%, var(--s2) 100%);
border:1px dashed var(--border2);
padding:32px 24px;
}
.inicio-emails-card.is-empty .iemoji{font-size:38px;margin-bottom:10px;opacity:.5}
.inicio-emails-empty-t{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.inicio-emails-empty-d{
font-size:12px;color:var(--muted2);max-width:540px;margin:0 auto 16px;
line-height:1.55;
}
.inicio-emails-cta{
font-size:12px;padding:8px 16px;border-radius:8px;font-weight:500;
background:var(--accent);border-color:var(--accent);color:#fff;
}
.inicio-emails-cta:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.inicio-emails-list{display:flex;flex-direction:column;gap:1px}
.inicio-email-row{
display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:8px;
cursor:pointer;transition:background .12s;position:relative;
}
.inicio-email-row:hover{background:var(--s2)}
.inicio-email-row + .inicio-email-row{border-top:1px solid var(--border)}
.inicio-email-dot{
width:7px;height:7px;border-radius:50%;background:var(--accent);
flex-shrink:0;box-shadow:0 0 0 2px rgba(234,70,42,.15);
}
.inicio-email-row.is-read{opacity:.68}
.inicio-email-row.is-read .inicio-email-sender{font-weight:500}
.inicio-email-row.is-read .inicio-email-subj strong{font-weight:500}
.inicio-email-row.is-unread .inicio-email-sender{font-weight:700;color:var(--ink)}
.inicio-email-row.is-unread .inicio-email-subj strong{font-weight:700}
.inicio-email-sender{font-size:12px;font-weight:600;color:var(--ink);width:160px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inicio-email-subj{font-size:13px;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inicio-email-preview{font-size:12px;color:var(--muted);font-weight:400}
.inicio-email-time{font-size:10px;color:var(--muted);font-family:var(--mono);flex-shrink:0}
/* —— Bloco Chats + Emails (2 colunas lado a lado) —— */
.inicio-comms-layout{
display:grid;grid-template-columns:1fr 1fr;gap:16px;
margin-bottom:22px;
animation:inicioFadeUp .5s ease .1s both;
}
.inicio-comms-col{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:14px 16px;
display:flex;flex-direction:column;
}
.inicio-comms-col .inicio-sec-h{margin-bottom:10px}
.inicio-comms-col .inicio-sec-h::after{display:none}
.inicio-comms-body{flex:1;min-width:0;display:flex;flex-direction:column}
.inicio-comms-body .inicio-emails-list{overflow:hidden}
.inicio-col-empty{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:24px 12px;gap:6px;
color:var(--muted);font-size:13px;font-family:var(--mono);
}
.inicio-col-empty .iemoji{font-size:30px;opacity:.55;margin-bottom:4px}
.inicio-col-empty-d{
font-size:11px;color:var(--muted);max-width:280px;line-height:1.5;
font-family:var(--font);
}
.inicio-col-sub{
margin-left:auto;font-size:9px;color:var(--muted);font-weight:600;
font-family:var(--mono);text-transform:none;letter-spacing:0;
}
.inicio-col-sub.is-warn{color:var(--accent)}
.inicio-col-sub.is-ok{color:var(--green)}
/* No layout de 2 colunas, encolher detalhes do email para caber */
.inicio-comms-col .inicio-email-row{padding:9px 10px;gap:8px}
.inicio-comms-col .inicio-email-sender{width:110px;font-size:11.5px}
.inicio-comms-col .inicio-email-subj{font-size:12px}
.inicio-comms-col .inicio-email-preview{display:none}
@media (max-width:900px){
.inicio-comms-layout{grid-template-columns:1fr}
}
/* —— Block: Semana à frente —— */
.inicio-week-grid{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;
min-width:0;
}
.inicio-day{
background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 11px;min-height:120px;
display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:all .12s;
}
.inicio-day:hover{border-color:var(--border2);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.inicio-day.is-today{border-color:var(--accent);background:linear-gradient(180deg, var(--accent-bg) 0%, var(--surface) 60%)}
.inicio-day.is-past{opacity:.55}
.inicio-day-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.inicio-day-name{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono)}
.inicio-day.is-today .inicio-day-name{color:var(--accent)}
.inicio-day-num{font-size:18px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.5px}
.inicio-day-items{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.inicio-day-item{
font-size:10px;padding:3px 6px;border-radius:5px;
background:var(--s3);color:var(--muted2);font-family:var(--mono);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
border-left:2px solid var(--border2);
}
.inicio-day-item.is-mtg{background:var(--blue-bg);color:var(--blue);border-left-color:var(--blue)}
.inicio-day-item.is-task{background:var(--s2);color:var(--ink);border-left-color:var(--muted)}
.inicio-day-item.is-overdue{background:var(--red-bg);color:var(--red);border-left-color:var(--red)}
.inicio-day-empty{font-size:10px;color:var(--muted);font-family:var(--mono);opacity:.5;font-style:italic;padding:2px 0}
/* —— Refresh icon button on hero —— */
.inicio-refresh{
display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;
padding:5px 10px;border-radius:7px;border:1px solid var(--border);background:var(--surface);
cursor:pointer;color:var(--muted2);font-family:var(--mono);
transition:all .12s;margin-top:10px;
}
.inicio-refresh:hover{background:var(--accent-bg);border-color:var(--accent-border);color:var(--accent)}
.inicio-refresh.is-loading{opacity:.6;pointer-events:none}
.inicio-refresh.is-loading .ir-ico{animation:irSpin 1s linear infinite}
@keyframes irSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (max-width: 1100px){
.inicio-focus-grid{grid-template-columns:1fr 1fr}
.inicio-perf-grid{grid-template-columns:1fr 1fr}
.inicio-att-grid{grid-template-columns:1fr}
.inicio-week-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width: 720px){
.inicio-hero{flex-direction:column;align-items:flex-start}
.inicio-hero-r{text-align:left;align-items:flex-start}
.inicio-focus-grid{grid-template-columns:1fr}
.inicio-perf-grid{grid-template-columns:1fr 1fr}
.inicio-week-grid{grid-template-columns:repeat(2,1fr)}
.inicio-kpi-grid{grid-template-columns:1fr}
.inicio-greet{font-size:24px}
.inicio-clock{font-size:30px}
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* NOTAS · Subpage Visão Geral + popover topbar */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* —— Cores das notas (paleta pastel) —— */
.is-color-yellow{--n-bg:#fff8c5;--n-bg-h:#fef3a0;--n-bd:#f0e08a;--n-ink:#3d3500}
.is-color-pink {--n-bg:#fde4f0;--n-bg-h:#fbd2e6;--n-bd:#f0bcd6;--n-ink:#4a1a32}
.is-color-blue {--n-bg:#dbeafe;--n-bg-h:#c5dbfb;--n-bd:#a8c5f4;--n-ink:#1e3a5f}
.is-color-green {--n-bg:#d8f5db;--n-bg-h:#c1edc6;--n-bd:#9ed8a7;--n-ink:#1a3d22}
.is-color-purple{--n-bg:#e8d9f5;--n-bg-h:#dac3ef;--n-bd:#bea6da;--n-ink:#2f1b50}
.is-color-orange{--n-bg:#ffe2c9;--n-bg-h:#ffd1ab;--n-bd:#f0b483;--n-ink:#4a2614}
/* —— Toolbar da página —— */
.notas-toolbar{
display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
margin-bottom:18px;flex-wrap:wrap;
}
.notas-title{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.5px;margin-bottom:2px}
.notas-subtitle{font-size:12px;color:var(--muted);font-family:var(--mono)}
.notas-tb-r{display:flex;align-items:center;gap:10px}
.notas-search{position:relative;width:240px}
.notas-search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none}
.notas-search-input{
width:100%;padding:8px 30px 8px 30px;border:1px solid var(--border);border-radius:8px;
background:var(--surface);font-size:13px;color:var(--ink);font-family:var(--font);
}
.notas-search-input:focus{outline:none;border-color:var(--accent)}
.notas-search-clear{
position:absolute;right:6px;top:50%;transform:translateY(-50%);
background:transparent;border:0;cursor:pointer;font-size:14px;color:var(--muted);
width:22px;height:22px;border-radius:50%;
}
.notas-search-clear:hover{background:var(--s2);color:var(--ink)}
.notas-new-btn{padding:8px 16px;font-size:13px}
/* —— Empty state —— */
.notas-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:50vh;text-align:center;gap:10px;padding:40px;
}
.notas-empty-emoji{font-size:54px;opacity:.35}
.notas-empty-t{font-size:14px;color:var(--muted2);font-weight:500;margin-bottom:6px}
/* —— Grid de cards —— */
.notas-grid{
display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:14px;
}
.nota-card{
background:var(--n-bg);
border:1px solid var(--n-bd);
border-radius:11px;
padding:14px 16px 12px;
display:flex;flex-direction:column;gap:8px;min-height:120px;
cursor:pointer;position:relative;
transition:all .16s cubic-bezier(.4,0,.2,1);
box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.nota-card:hover{
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,.08);
background:var(--n-bg-h);
}
.nota-card.is-pinned{box-shadow:0 1px 4px rgba(0,0,0,.08), inset 3px 0 0 var(--n-ink)}
.nota-pin-btn{
position:absolute;top:8px;right:8px;background:transparent;border:0;cursor:pointer;
width:24px;height:24px;display:flex;align-items:center;justify-content:center;
font-size:13px;opacity:.4;transition:opacity .12s;border-radius:5px;
}
.nota-pin-btn:hover{opacity:1;background:rgba(0,0,0,.06)}
.nota-card.is-pinned .nota-pin-btn{opacity:.95}
.nota-card-title{
font-size:14px;font-weight:700;color:var(--n-ink);line-height:1.3;
padding-right:24px;letter-spacing:-.2px;
white-space:normal;word-wrap:break-word;
}
.nota-card-body{
font-size:12.5px;color:var(--n-ink);line-height:1.5;
white-space:pre-wrap;word-wrap:break-word;
flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;
}
.nota-card-footer{
display:flex;align-items:center;justify-content:space-between;
margin-top:auto;padding-top:6px;
font-size:10px;color:var(--n-ink);opacity:.55;font-family:var(--mono);
}
.nota-card-actions{display:flex;gap:2px;opacity:0;transition:opacity .12s}
.nota-card:hover .nota-card-actions{opacity:1}
.nota-card-act{
background:transparent;border:0;cursor:pointer;color:var(--n-ink);
width:22px;height:22px;display:flex;align-items:center;justify-content:center;
border-radius:5px;font-size:12px;opacity:.7;
}
.nota-card-act:hover{background:rgba(0,0,0,.08);opacity:1}
.nota-card-del:hover{background:var(--red);color:#fff;opacity:1}
/* —— Modal de edição —— */
.notas-modal-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.4);
display:none;align-items:center;justify-content:center;z-index:9999;
backdrop-filter:blur(2px);
}
.notas-modal-overlay.open{display:flex}
.notas-modal{
background:var(--n-bg);border:1px solid var(--n-bd);border-radius:14px;
width:min(560px, 92vw);max-height:90vh;
display:flex;flex-direction:column;overflow:hidden;
box-shadow:0 24px 60px rgba(0,0,0,.3);
animation:notasModalIn .2s cubic-bezier(.4,0,.2,1);
}
@keyframes notasModalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.notas-modal-h{display:flex;align-items:center;gap:8px;padding:18px 18px 8px}
.notas-modal-title-input{
flex:1;border:0;background:transparent;outline:none;
font-size:18px;font-weight:700;color:var(--n-ink);font-family:var(--font);letter-spacing:-.3px;
}
.notas-modal-title-input::placeholder{color:var(--n-ink);opacity:.45}
.notas-modal-close{
width:32px;height:32px;border-radius:8px;border:0;background:transparent;cursor:pointer;
font-size:18px;color:var(--n-ink);opacity:.55;
}
.notas-modal-close:hover{background:rgba(0,0,0,.08);opacity:1}
.notas-modal-body{
flex:1;border:0;background:transparent;outline:none;resize:none;
padding:6px 18px 14px;min-height:240px;
font-size:14px;color:var(--n-ink);font-family:var(--font);line-height:1.6;
}
.notas-modal-body::placeholder{color:var(--n-ink);opacity:.45}
.notas-modal-footer{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 16px;border-top:1px solid var(--n-bd);background:rgba(255,255,255,.45);
flex-wrap:wrap;
}
/* —— Color picker —— */
.notas-color-picker{display:inline-flex;gap:5px;align-items:center}
.notas-color-swatch{
width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;
padding:0;transition:transform .12s;background-color:var(--n-bg);
}
.notas-color-swatch:hover{transform:scale(1.12)}
.notas-color-swatch.is-active{border-color:var(--n-ink);box-shadow:0 0 0 2px rgba(255,255,255,.5) inset}
.notas-modal-actions{display:flex;align-items:center;gap:8px}
.notas-pin-toggle{
display:flex;align-items:center;gap:5px;font-size:11px;color:var(--n-ink);cursor:pointer;
font-family:var(--mono);user-select:none;
}
.notas-pin-toggle input{accent-color:var(--n-ink)}
/* —— Popover topbar (nota rápida) —— */
.notes-tb-wrap{position:relative}
.notes-quick-popover{
position:absolute;top:calc(100% + 8px);right:0;
width:380px;max-width:calc(100vw - 32px);
z-index:300;
opacity:0;pointer-events:none;transform:translateY(-6px) scale(.97);
transition:opacity .16s, transform .16s cubic-bezier(.4,0,.2,1);
}
.notes-quick-popover.open{opacity:1;pointer-events:auto;transform:none}
.notes-quick{
background:var(--n-bg);border:1px solid var(--n-bd);border-radius:13px;
box-shadow:0 14px 40px rgba(0,0,0,.18);
padding:14px;display:flex;flex-direction:column;gap:8px;
}
.notes-quick-h{display:flex;align-items:center;justify-content:space-between}
.notes-quick-h-t{font-size:12px;font-weight:700;color:var(--n-ink);font-family:var(--mono);text-transform:uppercase;letter-spacing:.6px}
.notes-quick-close{
width:24px;height:24px;border:0;background:transparent;cursor:pointer;
font-size:16px;color:var(--n-ink);opacity:.55;border-radius:5px;
}
.notes-quick-close:hover{background:rgba(0,0,0,.08);opacity:1}
.notes-quick-title-input{
border:0;background:transparent;outline:none;
font-size:14px;font-weight:700;color:var(--n-ink);font-family:var(--font);
padding:2px 4px;
}
.notes-quick-title-input::placeholder{color:var(--n-ink);opacity:.45}
.notes-quick-body-input{
border:0;background:transparent;outline:none;resize:none;
font-size:13px;color:var(--n-ink);font-family:var(--font);line-height:1.55;
padding:4px;min-height:90px;
}
.notes-quick-body-input::placeholder{color:var(--n-ink);opacity:.45}
.notes-quick-footer{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding-top:6px;border-top:1px solid var(--n-bd);
}
.notes-quick-actions{display:flex;gap:6px}
.notes-quick-actions .btn{font-size:11px;padding:5px 11px}
/* —— Toast —— */
.notes-toast{
position:fixed;bottom:80px;right:24px;z-index:400;
background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;
font-size:12px;font-weight:500;font-family:var(--font);
box-shadow:0 6px 20px rgba(0,0,0,.2);
opacity:0;transform:translateY(8px);pointer-events:none;
transition:opacity .2s, transform .2s;
}
.notes-toast.show{opacity:1;transform:none;pointer-events:auto}
@media (max-width: 720px){
.notas-grid{grid-template-columns:1fr 1fr}
.notas-tb-r{width:100%}
.notas-search{flex:1;width:auto}
.notes-quick-popover{right:-90px}
}
/* —— SIDEBAR · cartão de perfil (rodapé) —— */
.sidebar-profile{
margin-top:auto;
display:flex;align-items:center;gap:10px;
padding:10px 12px;
border-top:1px solid var(--sidebar-border);
cursor:pointer;
transition:background .15s;
position:relative;
}
.sidebar-profile:hover{background:rgba(255,255,255,0.04)}
.sidebar-profile.is-active{background:rgba(234,70,42,0.10)}
.sidebar-profile.is-active::before{
content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;
background:#ea462a;border-radius:0 2px 2px 0;
}
.sb-prof-avatar{
width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,0.08);
display:flex;align-items:center;justify-content:center;
overflow:hidden;flex-shrink:0;
border:1px solid rgba(255,255,255,0.1);
}
.sb-prof-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sb-prof-avatar.is-fallback::after{
content:'R';color:#fff;font-weight:700;font-size:14px;
}
.sb-prof-meta{flex:1;min-width:0;line-height:1.25}
.sb-prof-name{
color:#fff;font-size:12.5px;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-prof-role{
color:var(--sidebar-muted);font-size:10.5px;font-weight:400;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
letter-spacing:.2px;
}
.sb-prof-chev{
color:var(--sidebar-muted);font-size:18px;line-height:1;
transition:transform .15s, color .15s;
}
.sidebar-profile:hover .sb-prof-chev{color:#fff;transform:translateX(2px)}
/* Ajustar footer: já não está colado ao fundo, perfil ocupa esse sítio */
.sidebar-profile + .sidebar-footer{margin-top:0;padding:8px 16px 10px}
/* —— Página de Perfil —— */
.perfil-hero{
display:flex;align-items:center;gap:20px;
padding:28px;
background:linear-gradient(135deg, #fff, #faf6f3);
border:1px solid var(--border);
border-radius:14px;
margin:24px 28px 0;
}
.perfil-avatar{
width:88px;height:88px;border-radius:50%;
background:#f0eae5;
display:flex;align-items:center;justify-content:center;
overflow:hidden;flex-shrink:0;
border:3px solid #fff;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
}
.perfil-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.perfil-avatar.is-fallback::after{
content:'R';color:#ea462a;font-weight:700;font-size:36px;
}
.perfil-meta{flex:1;min-width:0}
.perfil-name{font-size:22px;font-weight:700;color:var(--text);line-height:1.2}
.perfil-role{
display:inline-block;margin-top:6px;
padding:3px 10px;border-radius:10px;
background:rgba(234,70,42,0.10);color:#ea462a;
font-size:11px;font-weight:600;letter-spacing:.3px;
}
.perfil-email{
margin-top:8px;font-size:12px;color:var(--muted);font-family:var(--mono);
}
/* Cartão de notificações na página Perfil */
.perfil-card{
margin:18px 28px 0;background:var(--surface);border:1px solid var(--border);
border-radius:12px;padding:18px 22px;
}
.perfil-card-h{
display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-bottom:14px;
}
.perfil-card-t{font-size:14px;font-weight:700;color:var(--ink)}
.perfil-card-s{font-size:11.5px;color:var(--muted);margin-top:2px;max-width:560px}
.notif-status-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;
margin-bottom:10px;
}
.notif-status-item{
display:flex;justify-content:space-between;align-items:center;
padding:6px 10px;background:var(--s2);border-radius:6px;font-size:12px;
}
.notif-status-lbl{color:var(--muted);font-size:10.5px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px}
.notif-status-val{font-weight:700;font-size:11.5px}
.notif-status-val.is-ok{color:var(--green)}
.notif-status-val.is-warn{color:var(--amber)}
.notif-status-hint{
font-size:12px;color:var(--muted2);background:var(--s2);
padding:10px 14px;border-radius:8px;margin-top:6px;line-height:1.5;
}
.notif-status-hint.is-ok{background:rgba(16,185,129,0.06);color:#0f6630;border:1px solid rgba(16,185,129,0.2)}
.notif-status-hint.is-warn{background:rgba(245,158,11,0.06);color:#7a4f0a;border:1px solid rgba(245,158,11,0.2)}
/* ╔══════════════════════════════════════════════════════════╗
║ PERFIL · novo layout sidebar interna + secções ║
╚══════════════════════════════════════════════════════════╝ */
.perfil-layout{
display:grid;grid-template-columns:260px 1fr;gap:0;
min-height:calc(100vh - 90px);
}
.perfil-side{
border-right:1px solid var(--border);
background:linear-gradient(180deg, #fff, #faf7f4);
padding:24px 14px;
}
.perfil-side-hero{
display:flex;flex-direction:column;align-items:center;gap:8px;
padding:14px 8px 18px;border-bottom:1px solid var(--border);margin-bottom:14px;
}
.perfil-side-avatar{
width:74px;height:74px;border-radius:50%;
background:#f0eae5;overflow:hidden;
border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,0.08);
display:flex;align-items:center;justify-content:center;
}
.perfil-side-avatar img{width:100%;height:100%;object-fit:cover}
.perfil-side-avatar.is-fallback::after{content:'R';color:#ea462a;font-weight:700;font-size:30px}
.perfil-side-name{font-size:15px;font-weight:700;color:var(--text);text-align:center}
.perfil-side-role{
font-size:10.5px;color:#ea462a;background:rgba(234,70,42,0.10);
padding:2px 8px;border-radius:8px;font-weight:600;letter-spacing:.3px;
}
.perfil-side-email{font-size:10.5px;color:var(--muted);font-family:var(--mono);text-align:center;word-break:break-all}
.perfil-side-rh-btn{
display:flex;align-items:center;justify-content:center;gap:8px;
margin-top:12px;padding:8px 14px;
background:linear-gradient(135deg, #ea462a, #ff6a4a);color:#fff;
border:none;border-radius:20px;cursor:pointer;
font-size:12px;font-weight:600;letter-spacing:.2px;
box-shadow:0 4px 12px rgba(234,70,42,0.25);
transition:transform .15s, box-shadow .15s;
width:100%;
}
.perfil-side-rh-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(234,70,42,0.35)}
.perfil-side-rh-btn:active{transform:translateY(0)}
.perfil-side-rh-ext{font-size:10px;opacity:.8;margin-left:2px}
.perfil-side-nav{display:flex;flex-direction:column;gap:2px}
.perfil-side-item{
display:flex;align-items:center;gap:10px;
padding:10px 12px;border:none;background:transparent;
border-radius:8px;cursor:pointer;text-align:left;
font-size:13px;font-weight:500;color:var(--text);
transition:background .15s, color .15s;
}
.perfil-side-item:hover{background:var(--s2)}
.perfil-side-item.is-active{
background:rgba(234,70,42,0.10);color:#c93517;font-weight:600;
}
.perfil-side-ico{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.perfil-content{padding:28px 36px;max-width:920px;overflow-x:hidden}
.perfil-sec{display:none;animation:perfilFade .2s ease-out}
.perfil-sec.is-active{display:block}
@keyframes perfilFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.perfil-sec-head{margin-bottom:18px}
.perfil-sec-title{font-size:22px;font-weight:700;color:var(--ink);line-height:1.2}
.perfil-sec-sub{font-size:13px;color:var(--muted);margin-top:4px;max-width:640px}
.perfil-content .perfil-card{
margin:0 0 16px;
background:var(--surface);border:1px solid var(--border);
border-radius:12px;padding:18px 20px;
}
.perfil-content .perfil-card-h{
display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-bottom:12px;
}
.perfil-content .perfil-card-t{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.perfil-content .perfil-card-s{font-size:12px;color:var(--muted);max-width:560px;line-height:1.45}
.perfil-card-warn{background:linear-gradient(135deg, #fff8eb, #fff);border-color:#f5cd80}
.perfil-card-locked{opacity:.85}
/* Form grid (2 cols em desktop) */
.perfil-form-grid{
display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;
margin-bottom:14px;
}
@media (max-width:700px){.perfil-form-grid{grid-template-columns:1fr}}
.perfil-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.perfil-field-lbl{
font-size:10.5px;font-weight:600;color:var(--muted);
text-transform:uppercase;letter-spacing:.4px;font-family:var(--mono);
}
.perfil-input{
padding:9px 11px;border:1px solid var(--border);
border-radius:8px;font-size:13px;color:var(--text);
background:#fff;font-family:inherit;
transition:border-color .15s, box-shadow .15s;
width:100%;
}
.perfil-input:focus{
outline:none;border-color:#ea462a;
box-shadow:0 0 0 3px rgba(234,70,42,0.12);
}
.perfil-input:read-only{background:var(--s2);color:var(--muted);cursor:default}
.perfil-input:read-only:focus{box-shadow:none;border-color:var(--border)}
textarea.perfil-input{resize:vertical;min-height:110px;line-height:1.5;font-family:var(--mono);font-size:12.5px}
.perfil-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.perfil-saved-hint{
font-size:11.5px;color:transparent;font-weight:600;
transition:color .2s;
}
.perfil-saved-hint.is-on{color:var(--green)}
.perfil-hint{
font-size:11.5px;color:var(--muted2);background:var(--s2);
padding:8px 12px;border-radius:6px;margin-top:10px;line-height:1.5;
}
/* Pills */
.perfil-pill{
display:inline-flex;align-items:center;gap:4px;
padding:3px 9px;border-radius:10px;
font-size:10.5px;font-weight:600;letter-spacing:.3px;
text-transform:uppercase;
}
.perfil-pill.is-ok{background:rgba(16,185,129,0.12);color:#0f6630}
.perfil-pill.is-warn{background:rgba(245,158,11,0.14);color:#7a4f0a}
.perfil-pill.is-err{background:rgba(220,38,38,0.12);color:#9a1d1d}
/* Theme + radio rows */
.perfil-theme-row{display:flex;gap:8px;flex-wrap:wrap}
.perfil-theme-opt{
display:flex;align-items:center;gap:6px;
padding:8px 14px;border:1px solid var(--border);
border-radius:8px;cursor:pointer;
font-size:13px;color:var(--text);
transition:all .15s;
}
.perfil-theme-opt:hover{background:var(--s2)}
.perfil-theme-opt input{accent-color:#ea462a}
.perfil-theme-opt:has(input:checked){border-color:#ea462a;background:rgba(234,70,42,0.06);color:#c93517;font-weight:600}
/* Switch */
.perfil-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer}
.perfil-switch input{position:absolute;opacity:0;width:0;height:0}
.perfil-switch-track{
position:absolute;inset:0;
background:#d4d4d4;border-radius:24px;
transition:background .2s;
}
.perfil-switch-thumb{
position:absolute;top:2px;left:2px;
width:20px;height:20px;background:#fff;border-radius:50%;
box-shadow:0 1px 3px rgba(0,0,0,0.2);
transition:transform .2s;
}
.perfil-switch input:checked + .perfil-switch-track{background:#10b981}
.perfil-switch input:checked + .perfil-switch-track .perfil-switch-thumb{transform:translateX(18px)}
/* Email signature preview */
.perfil-sig{margin-bottom:10px}
.perfil-sig-preview{
background:var(--s2);border:1px dashed var(--border);
border-radius:8px;padding:12px 14px;
margin-bottom:12px;font-size:12.5px;color:var(--text);
min-height:60px;
}
.perfil-sig-preview pre{margin:0;font-family:var(--mono);white-space:pre-wrap;font-size:12px}
.perfil-sig-prev-lbl{
font-size:10px;font-weight:700;color:var(--muted);
text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-family:var(--mono);
}
/* Google scopes */
.perfil-scopes{display:flex;flex-direction:column;gap:6px}
.perfil-scope-row{
display:flex;justify-content:space-between;align-items:center;
padding:9px 12px;background:var(--s2);border-radius:6px;
font-size:13px;color:var(--text);
}
/* Atalhos */
.perfil-kbd-list{display:flex;flex-direction:column;gap:6px}
.perfil-kbd-row{
display:grid;grid-template-columns:180px 1fr auto;gap:14px;align-items:center;
padding:9px 12px;background:var(--s2);border-radius:6px;
}
.perfil-kbd-combo{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.perfil-kbd-combo kbd{
display:inline-block;padding:3px 8px;
background:#fff;border:1px solid var(--border);border-bottom-width:2px;
border-radius:5px;font-family:var(--mono);font-size:11px;font-weight:600;
color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,0.05);
}
.perfil-kbd-combo span{color:var(--muted);font-size:11px}
.perfil-kbd-desc{font-size:12.5px;color:var(--text);display:flex;flex-direction:column;gap:2px}
.perfil-kbd-desc small{color:var(--muted);font-size:11px;font-style:italic}
.perfil-kbd-custom-tag{
display:inline-block;margin-left:6px;
padding:1px 6px;border-radius:6px;
background:rgba(234,70,42,0.12);color:#c93517;
font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
vertical-align:middle;
}
.perfil-kbd-actions{display:flex;gap:6px;align-items:center}
.perfil-kbd-edit, .perfil-kbd-reset{
padding:5px 10px;font-size:11.5px;border-radius:6px;
}
.perfil-kbd-reset-all{
font-size:12px;background:transparent;border:1px solid var(--border);
}
/* Toast de feedback de atalho */
.sc-toast{
position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);
background:rgba(20,20,20,0.92);color:#fff;
padding:10px 18px;border-radius:30px;
font-size:13px;font-weight:500;letter-spacing:.2px;
box-shadow:0 8px 24px rgba(0,0,0,0.28);
-webkit-backdrop-filter:saturate(180%) blur(16px);
backdrop-filter:saturate(180%) blur(16px);
opacity:0;pointer-events:none;
transition:opacity .15s, transform .15s;
z-index:9700;
}
.sc-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
/* Capture modal */
.perfil-modal-narrow{max-width:420px}
.perfil-kbd-capture-lbl{
font-size:13.5px;font-weight:600;color:var(--ink);text-align:center;margin-bottom:8px;
}
.perfil-kbd-capture-hint{
font-size:12px;color:var(--muted);text-align:center;line-height:1.5;
}
.perfil-kbd-capture-hint kbd{
display:inline-block;padding:1px 6px;background:#fff;border:1px solid var(--border);
border-radius:4px;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink);
}
.perfil-kbd-capture-box{
margin-top:18px;padding:24px;
background:var(--s2);border:2px dashed var(--border);border-radius:10px;
text-align:center;font-size:18px;min-height:80px;
display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
}
.perfil-kbd-capture-box kbd{
display:inline-block;padding:6px 12px;background:#fff;border:1px solid var(--border);
border-bottom-width:3px;border-radius:8px;
font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink);
}
.perfil-kbd-capture-box span{color:var(--muted);font-size:13px;font-weight:600}
.perfil-kbd-capture-box em{color:var(--muted);font-size:13px;font-style:italic}
/* Notif toggles */
.perfil-toggle-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.perfil-toggle-row{
display:flex;justify-content:space-between;align-items:center;gap:14px;
padding:11px 14px;background:var(--s2);border-radius:8px;cursor:pointer;
}
.perfil-toggle-row strong{font-size:13px;color:var(--ink);font-weight:600}
.perfil-toggle-row small{font-size:11.5px;color:var(--muted);line-height:1.5;display:block;margin-top:2px}
.perfil-toggle-row span{flex:1;min-width:0}
/* RH KPIs */
.perfil-rh-kpis{
display:grid;grid-template-columns:repeat(4, 1fr);gap:12px;
margin-bottom:16px;
}
@media (max-width:700px){.perfil-rh-kpis{grid-template-columns:repeat(2, 1fr)}}
.perfil-rh-kpi{
background:var(--surface);border:1px solid var(--border);
border-radius:10px;padding:16px 18px;text-align:center;
}
.perfil-rh-kpi-v{font-size:30px;font-weight:700;color:var(--ink);line-height:1}
.perfil-rh-kpi-v.is-hi{color:#10b981}
.perfil-rh-kpi-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-top:6px;font-family:var(--mono)}
.perfil-rh-history{display:flex;flex-direction:column;gap:6px}
.perfil-rh-item{
display:grid;grid-template-columns:1fr 1.4fr auto auto;gap:12px;align-items:center;
padding:10px 14px;background:var(--s2);border-radius:8px;
font-size:12.5px;
}
.perfil-rh-item-dates{color:var(--text);font-weight:500}
.perfil-rh-item-dates small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:1px}
.perfil-rh-item-note{color:var(--muted);font-size:12px;font-style:italic}
.perfil-rh-del{
background:transparent;border:none;cursor:pointer;
color:var(--muted);font-size:18px;line-height:1;padding:2px 8px;border-radius:4px;
}
.perfil-rh-del:hover{background:rgba(220,38,38,0.1);color:#dc2626}
.perfil-empty{font-size:13px;color:var(--muted);font-style:italic;padding:8px 0}
/* Storage list */
.perfil-storage-list{margin-top:12px;display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}
.perfil-storage-h{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;font-family:var(--mono)}
.perfil-storage-row{
display:flex;justify-content:space-between;align-items:center;
padding:5px 10px;background:var(--s2);border-radius:5px;
font-size:11.5px;
}
.perfil-storage-row code{font-family:var(--mono);color:var(--text)}
.perfil-storage-row span{color:var(--muted);font-family:var(--mono);font-size:11px}
/* Modal RH */
.perfil-modal-overlay{
position:fixed;inset:0;background:rgba(0,0,0,0.4);
display:flex;align-items:center;justify-content:center;
z-index:9000;padding:20px;
}
.perfil-modal{
background:#fff;border-radius:14px;
width:100%;max-width:480px;
box-shadow:0 20px 60px rgba(0,0,0,0.25);
display:flex;flex-direction:column;
max-height:90vh;
}
.perfil-modal-h{
display:flex;justify-content:space-between;align-items:center;
padding:18px 22px;border-bottom:1px solid var(--border);
}
.perfil-modal-t{font-size:16px;font-weight:700;color:var(--ink)}
.perfil-modal-x{
background:transparent;border:none;cursor:pointer;
font-size:22px;color:var(--muted);line-height:1;padding:4px 10px;border-radius:6px;
}
.perfil-modal-x:hover{background:var(--s2)}
.perfil-modal-body{padding:18px 22px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.perfil-modal-f{
display:flex;justify-content:flex-end;gap:8px;
padding:14px 22px;border-top:1px solid var(--border);
}
/* /PERFIL */
/* ╔══════════════════════════════════════════════════════════╗
║ PRESENCE · pills de estado do colaborador ║
╚══════════════════════════════════════════════════════════╝ */
.presence-pill{
display:inline-flex;align-items:center;gap:6px;
padding:3px 9px;border-radius:12px;
background:var(--s2);border:1px solid var(--border);
font-size:11px;font-weight:600;color:var(--text);
cursor:default;line-height:1.2;
font-family:inherit;
}
.presence-pill.is-editable{cursor:pointer;transition:background .15s, border-color .15s}
.presence-pill.is-editable:hover{background:var(--s3);border-color:var(--border2)}
.presence-dot{
display:inline-block;width:8px;height:8px;border-radius:50%;
flex-shrink:0;box-shadow:0 0 0 2px var(--surface);
}
.presence-label{font-size:11px;letter-spacing:.2px}
.presence-chev{font-size:10px;color:var(--muted);margin-left:1px}
.inicio-presence{margin-top:6px;font-size:11.5px;padding:4px 11px}
.inicio-presence .presence-dot{width:9px;height:9px}
/* Pill compacta dentro de Projetos kanban — debaixo do role */
.pj-presence{
display:inline-flex;align-items:center;gap:5px;
margin-top:4px;padding:2px 7px;border-radius:8px;
background:rgba(0,0,0,0.05);font-size:10px;font-weight:600;
}
.pj-presence .presence-dot{width:7px;height:7px;box-shadow:none}
.pj-presence .presence-label{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.3px}
/* Picker */
.presence-picker{
position:fixed;z-index:9800;
background:var(--surface);border:1px solid var(--border);
border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.18);
padding:6px;min-width:180px;
animation:presence-pop .15s ease-out;
}
@keyframes presence-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.presence-picker-item{
display:flex;align-items:center;gap:10px;width:100%;
padding:7px 10px;background:transparent;border:none;
cursor:pointer;border-radius:6px;font-family:inherit;
font-size:12.5px;color:var(--text);text-align:left;
transition:background .12s;
}
.presence-picker-item:hover{background:var(--s2)}
.presence-picker-item.is-active{background:var(--accent-bg);color:var(--accent)}
.presence-picker-label{flex:1}
.presence-picker-check{color:var(--accent);font-weight:700}
[data-theme="dark"] .presence-pill{background:var(--s2);border-color:var(--border)}
[data-theme="dark"] .presence-picker{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .pj-presence{background:rgba(255,255,255,0.06)}
/* ╔══════════════════════════════════════════════════════════╗
║ FAB LAUNCHER · botão unificado WhatsApp + Chat ║
╚══════════════════════════════════════════════════════════╝ */
.gc-launcher{
position:fixed;bottom:24px;right:24px;z-index:8500;
display:flex;flex-direction:column;align-items:flex-end;gap:10px;
pointer-events:none;
}
.gc-launcher > *{pointer-events:auto}
.gc-launcher-main{
width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
background:linear-gradient(135deg, #ea462a, #ff6a4a);color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 14px rgba(234,70,42,0.35);
transition:transform .2s, box-shadow .2s;
position:relative;
}
.gc-launcher-main-badge{
position:absolute;top:-2px;right:-2px;
background:#ef4444;color:#fff;border:2px solid #fff;
border-radius:11px;min-width:20px;height:20px;
display:flex;align-items:center;justify-content:center;
font-size:10.5px;font-weight:700;padding:0 5px;line-height:1;
box-shadow:0 2px 6px rgba(239,68,68,0.4);
}
.gc-launcher-main:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(234,70,42,0.45)}
.gc-launcher-main-ico{
font-size:26px;line-height:1;font-weight:300;
transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.gc-launcher.is-open .gc-launcher-main-ico{transform:rotate(45deg)}
.gc-launcher-items{
display:flex;flex-direction:column;gap:8px;align-items:flex-end;
opacity:0;pointer-events:none;
transform:translateY(10px) scale(0.95);
transition:opacity .18s, transform .18s;
}
.gc-launcher.is-open .gc-launcher-items{
opacity:1;pointer-events:auto;transform:translateY(0) scale(1);
}
.gc-launcher-item{
display:flex;align-items:center;gap:8px;
padding:8px 16px 8px 14px;border-radius:24px;
border:none;cursor:pointer;
font-size:12.5px;font-weight:600;color:#fff;
box-shadow:0 4px 12px rgba(0,0,0,0.18);
transition:transform .15s, box-shadow .15s;
position:relative;
}
.gc-launcher-item:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,0.22)}
.gc-launcher-wa{background:linear-gradient(135deg, #25d366, #128c7e)}
.gc-launcher-chat{background:linear-gradient(135deg, #4f8cff, #3b82f6)}
.gc-launcher-ico{font-size:15px;line-height:1}
.gc-launcher-lbl{line-height:1}
.gc-launcher-badge{
position:absolute;top:-4px;right:-4px;
background:#ef4444;color:#fff;border:2px solid #fff;
border-radius:10px;min-width:18px;height:18px;
display:flex;align-items:center;justify-content:center;
font-size:9.5px;font-weight:700;padding:0 4px;line-height:1;
}
@media (max-width:600px){
.gc-launcher{bottom:16px;right:16px}
.gc-launcher-item{padding:7px 12px}
.gc-launcher-lbl{display:none}
}
/* ╔══════════════════════════════════════════════════════════╗
║ VOICE · mic inline (adjacente aos inputs) ║
║ + overlay de transcrição ║
╚══════════════════════════════════════════════════════════╝ */
/* Mic posicionado absolutamente sobre/junto ao input focado.
JS calcula left/top com base no rectangle do input. */
.voice-inline-mic{
position:absolute;z-index:9550;
width:24px;height:24px;border-radius:50%;
background:rgba(99,102,241,0.10);color:#6366f1;
border:1px solid rgba(99,102,241,0.25);cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-size:11px;line-height:1;padding:0;
transition:background .12s, transform .12s, box-shadow .12s;
}
.voice-inline-mic:hover{background:rgba(99,102,241,0.18);transform:scale(1.08);box-shadow:0 2px 6px rgba(99,102,241,0.25)}
@keyframes voice-mic-pulse{
0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.7)}
50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}
}
.voice-inline-mic.is-listening{
background:#ef4444;color:#fff;border-color:#ef4444;
animation:voice-mic-pulse 1.2s infinite;
}
[data-theme="dark"] .voice-inline-mic{background:rgba(99,102,241,0.18);border-color:rgba(99,102,241,0.4)}
.voice-overlay{
position:fixed;left:50%;bottom:92px;
transform:translateX(-50%) translateY(20px);
background:rgba(20,20,20,0.95);color:#fff;
-webkit-backdrop-filter:saturate(180%) blur(16px);
backdrop-filter:saturate(180%) blur(16px);
border-radius:18px;padding:18px 22px;
min-width:340px;max-width:560px;
box-shadow:0 18px 50px rgba(0,0,0,0.4);
display:flex;flex-direction:column;align-items:center;gap:10px;
opacity:0;pointer-events:none;
transition:opacity .2s, transform .2s;
z-index:9650;
}
.voice-overlay.is-on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
/* Mic animation bars */
.voice-mic-anim{display:flex;align-items:flex-end;gap:3px;height:24px}
.voice-mic-anim span{
width:3px;background:linear-gradient(180deg, #a5b4fc, #ef4444);
border-radius:2px;animation:voice-bar 0.9s infinite ease-in-out;
}
.voice-mic-anim span:nth-child(1){height:60%;animation-delay:0s}
.voice-mic-anim span:nth-child(2){height:90%;animation-delay:0.1s}
.voice-mic-anim span:nth-child(3){height:50%;animation-delay:0.2s}
.voice-mic-anim span:nth-child(4){height:80%;animation-delay:0.3s}
@keyframes voice-bar{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1)}}
.voice-lbl{font-size:11.5px;color:rgba(255,255,255,0.85);font-weight:600;letter-spacing:.3px}
.voice-lbl small{display:block;font-size:10.5px;color:rgba(255,255,255,0.5);font-weight:400;margin-top:2px}
.voice-transcript{
font-size:14px;line-height:1.5;color:#fff;
background:rgba(255,255,255,0.08);
padding:12px 14px;border-radius:10px;
min-height:42px;width:100%;text-align:center;
word-wrap:break-word;
}
.voice-stop{
background:#ef4444;color:#fff;border:none;
padding:7px 18px;border-radius:8px;cursor:pointer;
font-size:12px;font-weight:600;
transition:background .15s;
}
.voice-stop:hover{background:#dc2626}
/* ╔══════════════════════════════════════════════════════════╗
║ ONBOARDING · página guiada com progressão ║
╚══════════════════════════════════════════════════════════╝ */
.onb-layout{display:grid;grid-template-columns:300px 1fr;min-height:calc(100vh - 90px)}
.onb-side{
background:linear-gradient(180deg, #fff, #faf7f4);
border-right:1px solid var(--border);
padding:28px 16px;display:flex;flex-direction:column;gap:18px;
}
/* Embed dentro do Perfil — remove sidebar interna duplicada e padding outer */
.onb-layout-embed{grid-template-columns:260px 1fr;min-height:auto;gap:0;margin:-28px -36px 0}
.onb-side-embed{background:var(--s2);border-right:1px solid var(--border);border-radius:0}
.onb-main-embed{padding:28px 40px}
/* Fullscreen — quando user entra na secção Onboarding, esconder sidebar do Perfil */
#page-perfil.is-onb-fullscreen .perfil-layout{grid-template-columns:1fr}
#page-perfil.is-onb-fullscreen .perfil-side{display:none}
#page-perfil.is-onb-fullscreen .perfil-content{padding:0;max-width:none;width:100%}
#page-perfil.is-onb-fullscreen .perfil-sec[data-perfil-sec="onboarding"] .onb-layout-embed{margin:0;grid-template-columns:300px 1fr}
#page-perfil.is-onb-fullscreen .onb-main-embed{padding:36px 56px;max-width:1100px}
/* Botão "Voltar ao Perfil" só visível em fullscreen */
.onb-back-btn{
display:none;align-items:center;gap:6px;
background:transparent;border:1px solid var(--border);
padding:7px 12px;border-radius:8px;cursor:pointer;
font-size:12px;color:var(--text);font-weight:500;
margin-bottom:14px;
}
.onb-back-btn:hover{background:var(--s2)}
#page-perfil.is-onb-fullscreen .onb-back-btn{display:inline-flex}
/* Admin controls */
.onb-admin-bar{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 14px;background:var(--s2);border:1px solid var(--border);
border-radius:10px;margin-bottom:18px;
}
.onb-admin-info{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.onb-admin-info strong{color:var(--ink)}
.onb-admin-actions{display:flex;gap:6px;align-items:center}
.onb-admin-toggle{
padding:5px 11px;border-radius:6px;cursor:pointer;
font-size:11.5px;font-weight:600;border:1px solid var(--border);
background:var(--surface);color:var(--text);
}
.onb-admin-toggle.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}
.onb-admin-toggle:hover:not(.is-on){background:var(--s3)}
.onb-admin-reset{
background:transparent;border:1px solid var(--border);
padding:5px 11px;border-radius:6px;cursor:pointer;
font-size:11.5px;color:var(--muted);
}
.onb-admin-reset:hover{color:var(--red);border-color:var(--red)}
/* Modo edição — destaca campos editáveis */
.onb-editable{
outline:1px dashed transparent;outline-offset:3px;
transition:outline-color .15s;border-radius:4px;
}
.onb-edit-mode .onb-editable{outline-color:rgba(234,70,42,0.3)}
.onb-edit-mode .onb-editable:hover{outline-color:rgba(234,70,42,0.6);background:rgba(234,70,42,0.04)}
.onb-edit-mode .onb-editable:focus{outline:2px solid var(--accent);outline-offset:3px;background:rgba(234,70,42,0.06)}
/* Controlos por etapa em modo edit */
.onb-step-edit-bar{
display:none;align-items:center;gap:4px;
margin-bottom:10px;padding:6px 8px;
background:var(--s2);border:1px solid var(--border);border-radius:6px;
font-size:11px;color:var(--muted);
}
.onb-edit-mode .onb-step-edit-bar{display:flex}
.onb-step-edit-bar button{
background:transparent;border:none;cursor:pointer;
padding:3px 8px;border-radius:4px;font-size:12px;color:var(--text);
}
.onb-step-edit-bar button:hover{background:var(--s3)}
.onb-step-edit-bar button.is-danger:hover{background:rgba(220,38,38,0.12);color:var(--red)}
.onb-step-edit-bar .onb-step-id{font-family:var(--mono);color:var(--muted2);font-size:10.5px;margin-right:auto}
/* Video URL input em modo edit */
.onb-edit-video-row{
display:none;align-items:center;gap:6px;
margin-top:10px;padding:8px 12px;
background:var(--s2);border:1px dashed var(--border);border-radius:8px;
font-size:11.5px;
}
.onb-edit-mode .onb-edit-video-row{display:flex}
.onb-edit-video-row input{
flex:1;padding:5px 9px;border:1px solid var(--border);border-radius:5px;
font-family:var(--mono);font-size:11.5px;background:var(--surface);color:var(--text);
}
.onb-edit-video-row label{color:var(--muted);font-weight:600;font-family:var(--mono);text-transform:uppercase;letter-spacing:.3px;font-size:10px}
/* Botões + Etapa / + Secção */
.onb-add-step{
display:none;width:100%;
padding:14px;margin-top:6px;
background:transparent;border:2px dashed var(--border);border-radius:10px;
font-size:12.5px;color:var(--muted);font-weight:600;cursor:pointer;
transition:all .15s;
}
.onb-edit-mode .onb-add-step{display:block}
.onb-add-step:hover{border-color:var(--accent);color:var(--accent);background:rgba(234,70,42,0.04)}
.onb-add-section{
display:none;width:100%;
margin-top:10px;padding:10px;
background:transparent;border:2px dashed var(--border);border-radius:8px;
font-size:11.5px;color:var(--muted);font-weight:600;cursor:pointer;
}
.onb-edit-mode .onb-add-section{display:block}
.onb-add-section:hover{border-color:var(--accent);color:var(--accent)}
/* Item da sidebar tem botão de eliminar secção em modo edit */
.onb-side-item-del{
display:none;background:transparent;border:none;cursor:pointer;
color:var(--muted);font-size:14px;padding:2px 5px;border-radius:4px;
margin-left:4px;
}
.onb-edit-mode .onb-side-item-del{display:inline-flex}
.onb-side-item-del:hover{background:rgba(220,38,38,0.12);color:var(--red)}
/* Indicador % na sidebar interna do Perfil */
.perfil-side-item-onb{position:relative}
.perfil-side-onb-pct{
margin-left:auto;padding:2px 7px;border-radius:8px;
background:rgba(16,163,74,0.14);color:#0f6630;
font-size:10px;font-weight:700;font-family:var(--mono);
letter-spacing:.2px;
}
.perfil-side-onb-pct.is-done{background:#16a34a;color:#fff}
[data-theme="dark"] .perfil-side-onb-pct{background:rgba(34,197,94,0.18);color:#a8e5b8}
[data-theme="dark"] .perfil-side-onb-pct.is-done{background:#22c55e;color:#0a1a0e}
.onb-side-hero{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding-bottom:18px;border-bottom:1px solid var(--border)}
.onb-side-icon{
width:48px;height:48px;border-radius:14px;
background:linear-gradient(135deg, #ea462a, #ff6a4a);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:22px;font-weight:700;
box-shadow:0 6px 18px rgba(234,70,42,0.3);
}
.onb-side-title{font-size:17px;font-weight:700;color:var(--ink);margin-top:6px}
.onb-side-sub{font-size:11.5px;color:var(--muted);line-height:1.4;padding:0 8px}
.onb-side-global{margin-top:10px;width:100%}
.onb-side-global-lbl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-family:var(--mono);margin-bottom:6px}
.onb-side-progress{height:6px;background:var(--s2);border-radius:6px;overflow:hidden}
.onb-side-progress-fill{height:100%;background:linear-gradient(90deg, #16a34a, #22c55e);transition:width .3s ease}
.onb-side-global-pct{text-align:right;font-size:11px;font-weight:700;color:var(--green);margin-top:4px;font-family:var(--mono)}
.onb-side-nav{display:flex;flex-direction:column;gap:6px}
.onb-side-item{
display:flex;flex-direction:column;gap:6px;
background:transparent;border:1px solid transparent;
border-radius:9px;padding:10px 12px;cursor:pointer;text-align:left;
font-family:inherit;color:var(--text);
transition:background .15s, border-color .15s;
}
.onb-side-item:hover:not(:disabled){background:var(--s2)}
.onb-side-item.is-active{background:rgba(234,70,42,0.10);border-color:rgba(234,70,42,0.25)}
.onb-side-item.is-locked{opacity:.55;cursor:not-allowed}
.onb-side-item-row{display:flex;align-items:center;gap:8px}
.onb-side-item-ico{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.onb-side-item-title{flex:1;font-size:12.5px;font-weight:600;line-height:1.3}
.onb-side-item-pct{font-size:10px;font-weight:700;color:var(--muted);font-family:var(--mono)}
.onb-side-item.is-active .onb-side-item-pct{color:var(--accent)}
.onb-side-item-bar{height:3px;background:var(--s3);border-radius:2px;overflow:hidden}
.onb-side-item-fill{height:100%;background:var(--green);transition:width .3s ease}
.onb-side-item.is-active .onb-side-item-fill{background:var(--accent)}
.onb-main{padding:32px 40px;max-width:920px;overflow-x:hidden}
.onb-sec-head{
display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:24px;
}
.onb-sec-ico{font-size:34px}
.onb-sec-title{font-size:24px;font-weight:700;color:var(--ink);line-height:1.2}
.onb-sec-sub{font-size:13px;color:var(--muted);margin-top:4px;max-width:520px}
.onb-sec-pct{text-align:center}
.onb-sec-pct-v{font-size:28px;font-weight:700;color:var(--accent);line-height:1;font-family:var(--mono)}
.onb-sec-pct-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-top:4px;font-family:var(--mono)}
.onb-steps{display:flex;flex-direction:column;gap:18px}
.onb-step{
display:grid;grid-template-columns:48px 1fr;gap:18px;
padding:22px;border:1px solid var(--border);border-radius:14px;
background:var(--surface);
transition:border-color .2s, transform .15s;
}
.onb-step:hover{border-color:var(--border2)}
.onb-step.is-done{opacity:.7;background:linear-gradient(135deg, rgba(34,197,94,0.05), var(--surface));border-color:rgba(34,197,94,0.3)}
.onb-step-num{
width:38px;height:38px;border-radius:50%;
background:var(--s2);color:var(--muted);
display:flex;align-items:center;justify-content:center;
font-size:15px;font-weight:700;font-family:var(--mono);
flex-shrink:0;
}
.onb-step.is-done .onb-step-num{background:rgba(34,197,94,0.15);color:#16a34a}
.onb-step.is-done .onb-step-num::before{content:'✓';font-size:18px}
.onb-step.is-done .onb-step-num{font-size:0}
.onb-step-body{min-width:0}
.onb-step-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:10px;line-height:1.3}
.onb-step-text{font-size:13.5px;color:var(--text);line-height:1.65}
.onb-step-text p{margin:0 0 10px}
.onb-step-text ul, .onb-step-text ol{margin:6px 0 12px;padding-left:22px}
.onb-step-text li{margin:4px 0}
.onb-step-text kbd{
display:inline-block;padding:1px 6px;
background:var(--s2);border:1px solid var(--border);border-bottom-width:2px;
border-radius:4px;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink);
}
.onb-step-text code{font-family:var(--mono);font-size:12px;background:var(--s2);padding:1px 6px;border-radius:4px;color:var(--accent)}
.onb-step-text strong{color:var(--ink);font-weight:700}
.onb-step-text em{color:var(--muted2);font-style:normal;font-weight:500}
.onb-step-media{
margin-top:14px;border-radius:10px;overflow:hidden;
background:#000;aspect-ratio:16/9;
}
.onb-step-media iframe{width:100%;height:100%;border:0}
.onb-step-placeholder{
margin-top:14px;padding:18px;
background:var(--s2);border:1px dashed var(--border);border-radius:10px;
font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
.onb-step-placeholder span{font-size:18px}
.onb-step-placeholder small{font-size:11px;color:var(--muted2);line-height:1.5}
.onb-step-placeholder code{font-family:var(--mono);font-size:10.5px;background:var(--surface);padding:1px 5px;border-radius:3px}
.onb-step-image{margin-top:14px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.onb-step-image img{width:100%;height:auto;display:block}
.onb-step-action{margin-top:16px}
.onb-locked{
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:80px 40px;text-align:center;gap:14px;
min-height:50vh;
}
.onb-locked-ico{font-size:52px;opacity:.4}
.onb-locked-title{font-size:22px;font-weight:700;color:var(--ink)}
.onb-locked-sub{font-size:14px;color:var(--muted);max-width:480px;line-height:1.5}
.onb-locked-pct{
font-size:32px;font-weight:700;color:var(--amber);font-family:var(--mono);margin:10px 0;
}
.onb-nav-next{margin-top:24px;padding-top:18px;border-top:1px solid var(--border);text-align:right}
.onb-nav-locked{font-size:12.5px;color:var(--muted);font-style:italic}
.onb-finish{
margin-top:24px;padding:24px;text-align:center;
background:linear-gradient(135deg, rgba(34,197,94,0.1), rgba(22,163,74,0.05));
border:1px solid rgba(34,197,94,0.3);border-radius:14px;
font-size:16px;font-weight:600;color:#16a34a;
}
/* Badge verde da sidebar */
.nbadge.nbadge-ok{background:#16a34a;color:#fff}
/* Dark mode onboarding */
[data-theme="dark"] .onb-side{background:linear-gradient(180deg, var(--surface), var(--bg));border-color:var(--border)}
[data-theme="dark"] .onb-step{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .onb-step.is-done{background:linear-gradient(135deg, rgba(34,197,94,0.06), var(--surface));border-color:rgba(34,197,94,0.4)}
[data-theme="dark"] .onb-step-text strong{color:var(--ink)}
[data-theme="dark"] .onb-step-text kbd{background:var(--s3);border-color:var(--border2);color:var(--text)}
[data-theme="dark"] .onb-step-text code{background:var(--s3)}
[data-theme="dark"] .onb-step-placeholder{background:var(--s2);border-color:var(--border)}
[data-theme="dark"] .onb-step-image{border-color:var(--border)}
[data-theme="dark"] .onb-side-progress,
[data-theme="dark"] .onb-side-item-bar{background:var(--s3)}
/* —— In-app toast no estilo macOS Notification Center —— */
.notif-toast-container{
position:fixed;top:18px;right:18px;
display:flex;flex-direction:column;gap:10px;
z-index:9500;
pointer-events:none;
max-width:380px;
}
.notif-toast{
pointer-events:auto;
display:flex;align-items:flex-start;gap:12px;
padding:13px 14px;
background:rgba(245,245,247,0.92);
-webkit-backdrop-filter:saturate(180%) blur(28px);
backdrop-filter:saturate(180%) blur(28px);
border:1px solid rgba(0,0,0,0.06);
border-radius:14px;
box-shadow:0 8px 28px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
font-family:-apple-system,BlinkMacSystemFont,"SF Pro","Segoe UI",Roboto,sans-serif;
cursor:pointer;
opacity:0;
transform:translateX(20px) scale(.97);
transition:opacity .25s ease, transform .28s cubic-bezier(0.22, 1, 0.36, 1);
position:relative;
}
.notif-toast.is-visible{opacity:1;transform:translateX(0) scale(1)}
.notif-toast.is-leaving{opacity:0;transform:translateX(20px) scale(.97)}
.notif-toast:hover{background:rgba(250,250,252,0.96)}
.notif-toast-icon{
width:38px;height:38px;border-radius:8px;flex-shrink:0;
background:var(--accent-bg);
display:flex;align-items:center;justify-content:center;
overflow:hidden;font-size:18px;
border:1px solid rgba(0,0,0,0.05);
}
.notif-toast-icon.is-default{background:linear-gradient(135deg,#ff8a6f,#ea462a);color:#fff}
.notif-toast-icon img{width:100%;height:100%;object-fit:cover}
.notif-toast-body{flex:1;min-width:0;line-height:1.35}
.notif-toast-app{
font-size:10.5px;font-weight:600;
color:rgba(0,0,0,0.5);text-transform:none;letter-spacing:-.1px;
margin-bottom:2px;
}
.notif-toast-title{
font-size:13.5px;font-weight:600;color:#1a1a1a;
letter-spacing:-.2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.notif-toast-text{
font-size:12.5px;color:rgba(0,0,0,0.74);
margin-top:1px;letter-spacing:-.1px;
white-space:pre-line;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;
}
.notif-toast-close{
position:absolute;top:6px;right:6px;
width:18px;height:18px;border-radius:50%;
background:rgba(0,0,0,0.04);border:0;
color:rgba(0,0,0,0.5);font-size:14px;line-height:1;
cursor:pointer;display:none;align-items:center;justify-content:center;
padding:0;
}
.notif-toast:hover .notif-toast-close{display:flex}
.notif-toast-close:hover{background:rgba(0,0,0,0.08);color:#1a1a1a}
/* Dark mode (futuro) */
@media (prefers-color-scheme: dark){
.notif-toast{background:rgba(40,40,42,0.88);border-color:rgba(255,255,255,0.08)}
.notif-toast:hover{background:rgba(50,50,52,0.95)}
.notif-toast-title{color:#fff}
.notif-toast-text{color:rgba(255,255,255,0.78)}
.notif-toast-app{color:rgba(255,255,255,0.55)}
.notif-toast-close{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7)}
}
/* —— Banner de opt-in para notificações nativas —— */
.notif-optin-bar{
position:fixed;top:14px;left:50%;transform:translateX(-50%);
background:#fff;border:1px solid var(--border);border-radius:12px;
box-shadow:0 8px 24px rgba(0,0,0,.10);
padding:10px 14px;display:flex;align-items:center;gap:12px;
font-size:13px;z-index:9000;
animation:notifBarIn .25s ease;
}
@keyframes notifBarIn{from{opacity:0;transform:translate(-50%, -10px)}to{opacity:1;transform:translate(-50%, 0)}}
.notif-optin-ico{font-size:18px}
.notif-optin-txt{color:var(--ink);max-width:480px}
.notif-optin-bar .btn{padding:6px 12px;font-size:12px}
.notif-optin-yes{background:var(--accent);color:#fff;border-color:var(--accent)}
.notif-optin-yes:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
/* ╔══════════════════════════════════════════════════════════╗
║ SOPs · Standard Operating Procedures ║
╚══════════════════════════════════════════════════════════╝ */
.sop-layout{
display:grid;grid-template-columns:280px 1fr;
gap:0;height:calc(100vh - 200px);min-height:520px;
border:1px solid var(--border);border-radius:12px;overflow:hidden;
background:var(--surface);
}
.sop-side{
display:flex;flex-direction:column;
border-right:1px solid var(--border);
background:var(--s2);overflow:hidden;
}
.sop-side-h{
padding:14px;display:flex;flex-direction:column;gap:8px;
border-bottom:1px solid var(--border);
}
.sop-search{
width:100%;padding:8px 11px;border:1px solid var(--border);border-radius:8px;
font-size:12.5px;background:var(--surface);color:var(--text);
font-family:inherit;
}
.sop-search:focus{outline:none;border-color:var(--accent)}
.sop-new-btn{font-size:12px;padding:6px 12px}
.sop-side-nav{flex:1;overflow-y:auto;padding:8px 0}
.sop-side-foot{
padding:10px 14px;border-top:1px solid var(--border);
display:flex;justify-content:center;
}
.sop-basecamp-btn{font-size:11px;padding:5px 10px}
.sop-cat{padding:2px 0;transition:background .15s}
.sop-cat.is-drop-target{background:var(--accent-bg)}
.sop-cat.is-drop-target .sop-cat-h{color:var(--accent)}
.sop-cat-h{
display:flex;align-items:center;gap:6px;
padding:7px 12px 7px 8px;cursor:pointer;
font-size:11.5px;font-weight:600;color:var(--ink);
border-radius:6px;margin:0 6px;
user-select:none;
transition:background .12s;
}
.sop-cat-h:hover{background:var(--s3)}
.sop-cat-chev{
display:inline-block;width:12px;font-size:10px;color:var(--muted);
transition:transform .18s ease;
text-align:center;flex-shrink:0;
}
.sop-cat.is-collapsed .sop-cat-chev{transform:rotate(-90deg)}
.sop-cat.is-collapsed .sop-cat-list{display:none}
.sop-cat-name{flex:1;outline:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sop-cat-name[contenteditable]:focus{background:var(--surface);border-radius:4px;padding:2px 5px;margin:-2px -5px}
.sop-cat-count{
background:var(--s3);border-radius:10px;
padding:1px 8px;font-size:10px;font-weight:600;color:var(--muted2);font-family:var(--mono);
flex-shrink:0;
}
.sop-cat-h:hover .sop-cat-count{background:var(--surface)}
.sop-cat-del{
background:transparent;border:0;cursor:pointer;
color:var(--muted);font-size:13px;padding:0 4px;border-radius:4px;flex-shrink:0;
}
.sop-cat-del:hover{background:rgba(220,38,38,0.12);color:var(--red)}
.sop-cat-list{display:flex;flex-direction:column;padding:2px 0 4px}
.sop-item{
display:flex;align-items:center;gap:8px;
padding:7px 12px 7px 26px;background:transparent;border:0;cursor:pointer;
text-align:left;font-family:inherit;color:var(--text);
border-left:3px solid transparent;margin-right:6px;
border-top-right-radius:6px;border-bottom-right-radius:6px;
transition:background .12s, border-color .12s;
}
.sop-item:hover{background:var(--s3)}
.sop-item.is-active{
background:var(--accent-bg);border-left-color:var(--accent);
}
.sop-item.is-dragging{opacity:.4}
.sop-item-drag{
font-size:10px;color:var(--muted);opacity:0;cursor:grab;
transition:opacity .12s;letter-spacing:-1px;flex-shrink:0;
}
.sop-item:hover .sop-item-drag{opacity:.6}
.sop-item-drag:active{cursor:grabbing}
.sop-item-body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.sop-item-title{font-size:12.5px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sop-item.is-active .sop-item-title{font-weight:600;color:var(--ink)}
.sop-item-meta{font-size:10px;color:var(--muted);font-family:var(--mono)}
.sop-add-cat{
display:block;width:calc(100% - 28px);margin:8px 14px 0;
padding:8px;background:transparent;border:1px dashed var(--border);border-radius:6px;
cursor:pointer;font-size:11.5px;color:var(--muted);
}
.sop-add-cat:hover{border-color:var(--accent);color:var(--accent)}
.sop-main{
overflow-y:auto;padding:0;
background:var(--surface);
}
.sop-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;
height:100%;gap:8px;padding:60px 30px;text-align:center;
}
.sop-empty-ico{font-size:42px;opacity:.4}
.sop-empty-t{font-size:16px;font-weight:600;color:var(--ink)}
.sop-empty-s{font-size:13px;color:var(--muted);max-width:420px;line-height:1.5}
.sop-admin-bar{
display:flex;justify-content:flex-end;gap:8px;
padding:10px 24px;border-bottom:1px solid var(--border);background:var(--s2);
}
.sop-admin-toggle{
background:var(--surface);border:1px solid var(--border);color:var(--text);
padding:5px 12px;border-radius:6px;cursor:pointer;font-size:11.5px;font-weight:600;
}
.sop-admin-toggle.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}
.sop-admin-del{
background:transparent;border:1px solid var(--border);color:var(--red);
padding:5px 12px;border-radius:6px;cursor:pointer;font-size:11.5px;
}
.sop-admin-del:hover{background:rgba(220,38,38,0.08);border-color:var(--red)}
.sop-detail{padding:28px 36px;max-width:880px}
.sop-detail-meta{
display:flex;align-items:center;gap:12px;
font-size:11px;color:var(--muted);margin-bottom:10px;font-family:var(--mono);
}
.sop-detail-cat{
background:var(--accent-bg);color:var(--accent);
padding:3px 9px;border-radius:8px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;font-size:10px;
}
.sop-cat-select{
padding:3px 8px;border:1px solid var(--border);border-radius:6px;
font-size:11px;background:var(--surface);color:var(--text);
}
.sop-detail-updated{flex:1;color:var(--muted2)}
.sop-detail-title{
font-size:26px;font-weight:700;color:var(--ink);
margin:0 0 18px;line-height:1.2;outline:none;
}
.sop-detail-title[contenteditable]:focus{
background:var(--s2);border-radius:6px;padding:4px 8px;margin:-4px -8px 14px;
}
.sop-detail-content{
font-size:14px;line-height:1.65;color:var(--text);
outline:none;
}
.sop-detail-content[contenteditable]:focus{
background:var(--s2);border-radius:6px;padding:14px;
}
.sop-detail-content p{margin:0 0 12px}
.sop-detail-content ul,.sop-detail-content ol{margin:6px 0 14px;padding-left:24px}
.sop-detail-content li{margin:4px 0}
.sop-detail-content h1{font-size:22px;font-weight:800;color:var(--ink);margin:24px 0 12px}
.sop-detail-content h2{font-size:18px;font-weight:700;color:var(--ink);margin:22px 0 10px}
.sop-detail-content h3{font-size:15px;font-weight:700;color:var(--ink);margin:18px 0 8px}
.sop-detail-content code{font-family:var(--mono);background:var(--s2);padding:1px 6px;border-radius:4px;font-size:12.5px;color:var(--accent)}
.sop-detail-content pre{
background:var(--s2);border:1px solid var(--border);border-radius:8px;
padding:12px 14px;margin:10px 0 16px;overflow-x:auto;
font-family:var(--mono);font-size:12.5px;line-height:1.55;
}
.sop-detail-content pre code{background:transparent;padding:0;color:var(--text)}
.sop-detail-content blockquote{
border-left:3px solid var(--accent);background:var(--s2);
padding:8px 14px;margin:10px 0 16px;color:var(--text);font-style:italic;border-radius:0 6px 6px 0;
}
.sop-detail-content hr{border:none;border-top:1px solid var(--border);margin:18px 0}
.sop-detail-content strong{color:var(--ink);font-weight:700}
.sop-detail-content a{color:var(--accent);text-decoration:underline}
.sop-detail-content table.sop-table{
border-collapse:collapse;width:100%;margin:10px 0 18px;
border:1px solid var(--border);border-radius:6px;overflow:hidden;
}
.sop-detail-content table.sop-table th,
.sop-detail-content table.sop-table td{
border:1px solid var(--border);padding:7px 10px;text-align:left;font-size:13px;vertical-align:top;
}
.sop-detail-content table.sop-table th{background:var(--s2);font-weight:600;color:var(--ink)}
.sop-detail-content table.sop-table tr:nth-child(even) td{background:var(--s1)}
.sop-detail-content figure.sop-fig{
margin:14px 0;text-align:center;
}
.sop-detail-content figure.sop-fig img{
max-width:100%;border-radius:8px;border:1px solid var(--border);
}
.sop-detail-content figure.sop-fig figcaption{
font-size:11.5px;color:var(--muted);margin-top:6px;font-style:italic;
}
.sop-detail-content ul.sop-checklist{list-style:none;padding-left:0}
.sop-detail-content ul.sop-checklist li{display:flex;align-items:flex-start;gap:8px}
.sop-detail-content ul.sop-checklist input[type=checkbox]{margin-top:4px;cursor:pointer}
.sop-detail-content figure.sop-mermaid{
background:var(--s2);border:1px solid var(--border);border-radius:8px;
padding:14px;margin:14px 0;text-align:center;
}
.sop-detail-content figure.sop-mermaid svg{max-width:100%;height:auto}
.sop-detail-content figure.sop-mermaid .sop-mermaid-src{
margin-top:8px;text-align:left;font-size:11px;color:var(--muted);
}
.sop-detail-content figure.sop-mermaid .sop-mermaid-src pre{margin:6px 0 0;font-size:11px;background:transparent;border:none;padding:0}
[data-theme="dark"] .sop-detail-content code{background:var(--s3)}
[data-theme="dark"] .sop-detail-content pre{background:var(--s3)}
[data-theme="dark"] .sop-detail-content figure.sop-mermaid{background:var(--s3)}
/* —— Toolbar do editor rico —— */
.sop-toolbar{
position:sticky;top:0;z-index:30;
display:flex;flex-wrap:wrap;align-items:center;gap:4px;
background:var(--surface);border:1px solid var(--border);border-radius:10px;
padding:6px 8px;margin:6px 36px 0;
box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.sop-tb-group{display:flex;gap:2px;align-items:center}
.sop-tb-sep{width:1px;height:18px;background:var(--border);margin:0 4px}
.sop-tb-btn{
min-width:28px;height:28px;padding:0 8px;
display:inline-flex;align-items:center;justify-content:center;gap:4px;
background:transparent;border:1px solid transparent;border-radius:6px;
font-size:12px;color:var(--text);cursor:pointer;
transition:background .12s,border-color .12s;
user-select:none;
}
.sop-tb-btn:hover{background:var(--s2);border-color:var(--border)}
.sop-tb-btn:active{background:var(--s3)}
.sop-tb-btn.sop-tb-mono{font-family:var(--mono);font-size:11.5px}
.sop-tb-color{position:relative;padding:0 6px}
.sop-tb-color input[type=color]{
position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:none;
}
.sop-tb-color span{pointer-events:none;font-weight:700}
.sop-tb-hl span{background:linear-gradient(transparent 50%, var(--accent) 50%);padding:0 2px}
/* —— Modal picker de ícones —— */
.sop-icon-pop{
position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.45);
display:flex;align-items:center;justify-content:center;padding:20px;
}
.sop-icon-modal{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
width:min(560px, 100%);max-height:80vh;display:flex;flex-direction:column;
box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.sop-icon-hdr{
display:flex;justify-content:space-between;align-items:center;
padding:12px 16px;border-bottom:1px solid var(--border);
}
.sop-icon-hdr button{background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted)}
.sop-icon-hdr button:hover{color:var(--ink)}
.sop-icon-body{padding:12px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.sop-icon-group-h{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.sop-icon-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(38px, 1fr));gap:4px}
.sop-icon-cell{
background:transparent;border:1px solid var(--border);border-radius:6px;
font-size:18px;padding:8px;cursor:pointer;transition:all .12s;
display:flex;align-items:center;justify-content:center;
}
.sop-icon-cell:hover{background:var(--s2);border-color:var(--accent);transform:scale(1.08)}
/* ── Objetivos editáveis do Dashboard E-Commerce ───────────── */
.ecom-tgts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.ecom-tgts{grid-template-columns:1fr}}
.ecom-tgt{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--s2)}
.ecom-tgt-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:8px}
.ecom-tgt-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.ecom-tgt-cur{font-size:20px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.ecom-tgt-bar{height:8px;border-radius:5px;background:var(--surface);overflow:hidden;border:1px solid var(--border)}
.ecom-tgt-bar-fill{height:100%;border-radius:5px;transition:width .3s ease}
.ecom-tgt-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.ecom-tgt-msg{font-size:11px;font-weight:600}
.ecom-tgt-goal{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;white-space:nowrap}
.ecom-tgt-goal input{width:66px;padding:3px 6px;border:1px solid var(--border);border-radius:6px;font-size:12px;text-align:right;font-family:var(--mono);background:var(--surface);color:var(--ink)}
.ecom-tgt-goal input:focus{outline:none;border-color:var(--accent,#2563eb)}
/* ── Google Search Console ─────────────────────────────────── */
#page-gsc .page-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
#page-gsc .page-actions{display:flex;gap:8px;align-items:center}
/* A página GSC não usa o wrapper .content (que dá padding 22/28). Sem isto as
tabelas ficam coladas à sidebar — alinhamos o padding com as outras páginas. */
#page-gsc{padding:22px 28px}
/* — Ícones de plataforma (favicon de marca) — */
.plat-ico{display:inline-block;vertical-align:middle;border-radius:4px;object-fit:contain}
.plat-ico-fb{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
/* Badge no canto superior direito de um card/quadro de uma plataforma. */
.plat-badge{position:absolute;top:12px;right:14px;display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:7px;background:var(--s2);border:1px solid var(--border);z-index:2;opacity:.92}
.plat-badge .plat-ico{width:16px;height:16px}
/* Os cards precisam de contexto de posicionamento para o badge absoluto. */
.card.has-plat-badge,.cfg-card.has-plat-badge{position:relative}
/* Variante inline (ao lado de um título de tabela/secção). */
.plat-ico-inline{margin-right:6px}
/* — Hero header — */
.gsc-hero{
position:relative;overflow:hidden;
background:var(--surface);border:1px solid var(--border);border-radius:16px;
margin-bottom:14px;padding:24px 28px;
box-shadow:0 1px 3px rgba(0,0,0,0.02);
}
.gsc-hero-bg{
position:absolute;inset:0;
background:
radial-gradient(ellipse 700px 260px at 100% 0%, rgba(66,133,244,0.12), transparent 65%),
radial-gradient(ellipse 600px 240px at 0% 100%, rgba(52,168,83,0.08), transparent 60%),
radial-gradient(ellipse 400px 200px at 50% 100%, rgba(234,67,53,0.04), transparent 65%);
pointer-events:none;
}
.gsc-hero-content{position:relative;display:flex;align-items:center;gap:20px;z-index:1}
.gsc-hero-icon{
width:58px;height:58px;flex-shrink:0;
background:linear-gradient(135deg, #4285F4 0%, #34A853 100%);
color:#fff;border-radius:14px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 18px rgba(66,133,244,0.30), inset 0 1px 0 rgba(255,255,255,0.25);
}
.gsc-hero-text{flex:1;min-width:0}
.gsc-hero-eyebrow{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--accent);margin-bottom:4px}
.gsc-hero-title{font-size:20px;font-weight:700;color:var(--ink);line-height:1.2;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsc-hero-sub{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.gsc-hero-pill{
display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;
background:var(--s2);border:1px solid var(--border);
font-family:var(--mono);font-size:10.5px;color:var(--ink);font-weight:600;
}
.gsc-hero-sep{color:var(--border);font-weight:400}
.gsc-hero-vs{font-family:var(--mono);font-size:10.5px}
/* — KPI cards — */
.gsc-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.gsc-kpi{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:16px 18px 14px;position:relative;overflow:hidden;
transition:transform .15s, box-shadow .15s, border-color .15s;
}
.gsc-kpi::before{
content:'';position:absolute;left:0;top:0;right:0;height:3px;
background:var(--kpi-accent, var(--accent));
}
.gsc-kpi:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.06);border-color:color-mix(in srgb,var(--kpi-accent) 40%,var(--border))}
.gsc-kpi-clicks{--kpi-accent:#4285F4}
.gsc-kpi-impr{--kpi-accent:#9333EA}
.gsc-kpi-ctr{--kpi-accent:#10B981}
.gsc-kpi-pos{--kpi-accent:#F59E0B}
.gsc-kpi-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;margin-top:4px}
.gsc-kpi-ico{
width:26px;height:26px;display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--kpi-accent) 12%,var(--surface));
color:var(--kpi-accent);
border-radius:7px;font-size:13px;
}
.gsc-kpi-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.gsc-kpi-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.gsc-kpi-value{font-size:28px;font-weight:800;color:var(--ink);font-family:var(--mono);line-height:1;letter-spacing:-0.6px}
.gsc-kpi-spark{color:var(--kpi-accent);opacity:.85;margin-top:2px}
.gsc-kpi-spark svg{display:block;width:100%;height:28px}
/* — Sparklines (genérico) — */
.gsc-spark{display:block}
/* — Trend badge — */
.gsc-trend{
display:inline-flex;align-items:center;gap:3px;
font-size:11px;font-weight:700;font-family:var(--mono);
padding:3px 7px;border-radius:6px;flex-shrink:0;
}
.gsc-trend-up{background:rgba(16,185,129,0.12);color:#059669}
.gsc-trend-down{background:rgba(239,68,68,0.12);color:#DC2626}
.gsc-trend-neutral{background:var(--s2);color:var(--muted)}
.gsc-trend-arr{font-size:13px;line-height:1}
/* — Table card — */
.gsc-table-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.gsc-table-head{
padding:14px 18px;border-bottom:1px solid var(--border);
display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.gsc-table-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.gsc-table-meta{font-size:11px;color:var(--muted)}
.gsc-table-actions{display:flex;gap:8px;align-items:center}
.gsc-search-wrap{position:relative;display:flex;align-items:center}
.gsc-search-ico{position:absolute;left:10px;font-size:11px;color:var(--muted);pointer-events:none}
.gsc-search{
padding:6px 10px 6px 28px;border:1px solid var(--border);border-radius:8px;
font-size:12px;background:var(--surface);color:var(--text);width:200px;
font-family:inherit;transition:border-color .15s, box-shadow .15s;
}
.gsc-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(66,133,244,0.1)}
.gsc-table-wrap{overflow-x:auto}
.gsc-table{width:100%;border-collapse:collapse;font-size:12.5px}
.gsc-table thead{background:var(--s2)}
.gsc-table th{
text-align:left;padding:10px 14px;font-weight:700;font-size:10px;
color:var(--muted);text-transform:uppercase;letter-spacing:.6px;
border-bottom:1px solid var(--border);
position:sticky;top:0;background:var(--s2);
}
.gsc-table td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.gsc-table tbody tr{transition:background .12s}
.gsc-table tbody tr:hover{background:var(--s2)}
.gsc-table tbody tr:last-child td{border-bottom:none}
.gsc-rank-cell{width:48px;text-align:center}
.gsc-rank-badge{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;border-radius:50%;
background:var(--s2);color:var(--muted);
font-size:11px;font-weight:700;font-family:var(--mono);
}
.gsc-rank-badge.is-top{
background:linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
color:#fff;box-shadow:0 2px 4px rgba(245,158,11,0.3);
}
.gsc-query-cell{min-width:200px;max-width:380px}
.gsc-query-text{
color:var(--ink);font-weight:500;
overflow:hidden;text-overflow:ellipsis;display:block;white-space:nowrap;
}
.gsc-num-cell{text-align:right;font-family:var(--mono);width:130px;min-width:120px}
.gsc-num-cell .gsc-pill{display:inline-flex}
/* — Bars inline na tabela — */
.gsc-bar-wrap{
position:relative;display:flex;align-items:center;justify-content:flex-end;
height:24px;padding:0 8px;border-radius:6px;background:var(--s2);overflow:hidden;
}
.gsc-bar{
position:absolute;left:0;top:0;bottom:0;
opacity:.35;border-radius:6px 0 0 6px;
transition:width .25s;
}
.gsc-bar-clicks{background:linear-gradient(90deg, #4285F4 0%, #5B9CFF 100%)}
.gsc-bar-impr{background:linear-gradient(90deg, #9333EA 0%, #B373FF 100%)}
.gsc-bar-val{position:relative;font-weight:600;color:var(--ink);font-size:12px;z-index:1}
/* — Pills (CTR / Posição) — */
.gsc-pill{
display:inline-flex;align-items:center;
padding:3px 9px;border-radius:8px;
font-size:11.5px;font-weight:700;font-family:var(--mono);
}
.gsc-ctr-high{background:rgba(16,185,129,0.14);color:#059669}
.gsc-ctr-mid{background:rgba(245,158,11,0.14);color:#D97706}
.gsc-ctr-low{background:var(--s3);color:var(--muted2)}
.gsc-pos-top{background:rgba(16,185,129,0.14);color:#059669}
.gsc-pos-mid{background:rgba(245,158,11,0.14);color:#D97706}
.gsc-pos-low{background:rgba(239,68,68,0.10);color:#DC2626}
.gsc-pos-far{background:var(--s3);color:var(--muted2)}
/* — States — */
.gsc-loading{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:60px 24px;text-align:center;color:var(--muted);font-size:13px;
display:flex;flex-direction:column;align-items:center;gap:14px;
}
.gsc-spinner{
width:32px;height:32px;border-radius:50%;
border:3px solid var(--border);border-top-color:var(--accent);
animation:gsc-spin 0.7s linear infinite;
}
@keyframes gsc-spin { to { transform:rotate(360deg) } }
.gsc-empty,.gsc-table-empty,.gsc-error{
background:var(--surface);border:1px solid var(--border);border-radius:12px;
padding:48px 24px;text-align:center;color:var(--muted);font-size:13px;
display:flex;flex-direction:column;align-items:center;gap:8px;
}
.gsc-error-ico{font-size:32px;opacity:.6;margin-bottom:4px}
.gsc-error-msg{font-weight:600;font-size:13px;color:var(--red);max-width:600px;line-height:1.5}
.gsc-error-hint{font-size:11.5px;color:var(--muted);max-width:520px;line-height:1.55;margin-top:6px}
.gsc-error a{color:var(--accent);text-decoration:underline}
.gsc-error code{font-family:var(--mono);background:var(--s2);padding:1px 6px;border-radius:4px;font-size:11px;color:var(--ink)}
/* — Evolution chart — */
.gsc-chart-card{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:18px 20px 10px;margin-bottom:14px;
}
.gsc-chart-head{
display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
margin-bottom:10px;flex-wrap:wrap;
}
.gsc-chart-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.gsc-chart-meta{font-size:11px;color:var(--muted)}
.gsc-chart-tabs{display:inline-flex;background:var(--s2);border:1px solid var(--border);border-radius:99px;padding:3px}
.gsc-chart-tab{
appearance:none;border:0;background:transparent;cursor:pointer;
padding:5px 14px;border-radius:99px;
font-size:11.5px;font-weight:600;color:var(--muted2);font-family:var(--font);
transition:all .14s;
}
.gsc-chart-tab:hover{color:var(--ink)}
.gsc-chart-tab.is-active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.gsc-chart-wrap{position:relative;width:100%;overflow:hidden}
.gsc-chart-svg{display:block;width:100%}
/* — Opportunities (3 cards) — */
.gsc-opp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.gsc-opp-card{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:14px 16px 10px;position:relative;overflow:hidden;
transition:transform .15s, box-shadow .15s, border-color .15s;
}
.gsc-opp-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,0.05)}
.gsc-opp-card::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--opp-accent,var(--accent));
}
.gsc-opp-lowctr{--opp-accent:#F59E0B}
.gsc-opp-near{--opp-accent:#4285F4}
.gsc-opp-wins{--opp-accent:#10B981}
.gsc-opp-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;padding-left:6px}
.gsc-opp-ico{
width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:color-mix(in srgb,var(--opp-accent) 14%,var(--surface));border-radius:8px;font-size:16px;
}
.gsc-opp-title{font-size:13px;font-weight:700;color:var(--ink);line-height:1.2}
.gsc-opp-sub{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.gsc-opp-list{list-style:none;margin:0;padding:0 0 0 6px}
.gsc-opp-row{
display:flex;justify-content:space-between;align-items:center;gap:8px;
padding:6px 0;border-top:1px dashed var(--border);font-size:11.5px;
}
.gsc-opp-row:first-child{border-top:0}
.gsc-opp-q{
color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.gsc-opp-stat{font-family:var(--mono);font-size:10.5px;color:var(--opp-accent);font-weight:700;flex-shrink:0}
.gsc-opp-empty{font-size:11px;color:var(--muted);font-style:italic;padding:8px 0;text-align:center}
/* — Tabs (Queries / Pages / Countries / Devices) — */
.gsc-tabs{
display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--border);
border-radius:10px;padding:4px;margin-bottom:12px;
}
.gsc-tab{
appearance:none;border:0;background:transparent;cursor:pointer;
display:inline-flex;align-items:center;gap:7px;
padding:7px 14px;border-radius:7px;
font-size:12px;font-weight:600;color:var(--muted2);font-family:var(--font);
transition:all .14s;
}
.gsc-tab:hover{color:var(--ink);background:var(--s2)}
.gsc-tab.is-active{background:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(66,133,244,0.25)}
.gsc-tab-ico{font-size:14px}
.gsc-tab-count{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:16px;padding:0 5px;border-radius:99px;
background:var(--s2);color:var(--muted);
font-size:10px;font-weight:700;font-family:var(--mono);
}
.gsc-tab.is-active .gsc-tab-count{background:rgba(255,255,255,0.25);color:#fff}
/* — Pages: link styling — */
.gsc-page-link{text-decoration:none;color:inherit}
.gsc-page-link:hover .gsc-query-text{color:var(--accent);text-decoration:underline}
/* — Countries (geo) list — */
.gsc-geo-list{padding:6px 0}
.gsc-geo-row{
display:grid;grid-template-columns:32px 1fr 220px 70px 50px 56px;
align-items:center;gap:14px;
padding:9px 18px;border-bottom:1px solid var(--border);
}
.gsc-geo-row:last-child{border-bottom:0}
.gsc-geo-row:hover{background:var(--s2)}
.gsc-geo-flag{font-size:22px;line-height:1}
.gsc-geo-name{font-size:12.5px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsc-geo-bar{height:8px;background:var(--s2);border-radius:99px;overflow:hidden}
.gsc-geo-bar-fill{height:100%;background:linear-gradient(90deg,#4285F4 0%,#34A853 100%);border-radius:99px}
.gsc-geo-clicks{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);text-align:right}
.gsc-geo-pct{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}
.gsc-geo-pos{text-align:right}
/* — Devices grid — */
.gsc-dev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;padding:18px}
.gsc-dev-card{
background:var(--s2);border:1px solid var(--border);border-radius:12px;
padding:16px 18px;text-align:left;
}
.gsc-dev-ico{font-size:28px;margin-bottom:6px}
.gsc-dev-name{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.gsc-dev-big{font-size:26px;font-weight:800;color:var(--ink);font-family:var(--mono);line-height:1;letter-spacing:-0.5px}
.gsc-dev-cap{font-size:11px;color:var(--muted);margin-top:3px;margin-bottom:14px}
.gsc-dev-stats{display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--border);padding-top:10px}
.gsc-dev-stats > div{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.gsc-dev-stat-l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.gsc-dev-stat-v{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);margin-left:auto}
.gsc-dev-stat-pct{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:6px}
/* — Dark theme adjustments — */
[data-theme="dark"] .gsc-hero-bg{
background:
radial-gradient(ellipse 700px 260px at 100% 0%, rgba(66,133,244,0.22), transparent 65%),
radial-gradient(ellipse 600px 240px at 0% 100%, rgba(52,168,83,0.14), transparent 60%);
}
[data-theme="dark"] .gsc-bar-clicks{opacity:.45}
[data-theme="dark"] .gsc-bar-impr{opacity:.45}
[data-theme="dark"] .gsc-tab.is-active{box-shadow:0 2px 6px rgba(66,133,244,0.4)}
[data-theme="dark"] .gsc-chart-tab.is-active{background:var(--s3)}
/* — Responsive — */
@media (max-width: 1100px) {
.gsc-kpi-grid{grid-template-columns:repeat(2,1fr)}
.gsc-opp-grid{grid-template-columns:1fr}
}
@media (max-width: 640px) {
.gsc-kpi-grid{grid-template-columns:1fr}
.gsc-hero-content{flex-direction:column;text-align:center}
.gsc-search{width:140px}
.gsc-chart-tabs{flex-wrap:wrap}
.gsc-geo-row{grid-template-columns:28px 1fr 56px 56px;gap:8px;padding:8px 12px}
.gsc-geo-bar,.gsc-geo-pct{display:none}
}
/* —— Leads breakdown card (Dashboard topo) —— */
.leads-breakdown{
display:grid;grid-template-columns:200px 1fr;gap:14px;margin-bottom:14px;
}
.lbr-total{
background:linear-gradient(135deg,#4285F4 0%,#5B9CFF 100%);
color:#fff;border-radius:14px;padding:18px 22px;
display:flex;flex-direction:column;justify-content:center;
box-shadow:0 4px 14px rgba(66,133,244,0.22);
position:relative;overflow:hidden;
}
.lbr-total::before{
content:'';position:absolute;right:-30px;top:-30px;width:130px;height:130px;
background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,transparent 70%);
pointer-events:none;
}
.lbr-total-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;opacity:.85}
.lbr-total-val{font-size:42px;font-weight:800;line-height:1;font-family:var(--mono);letter-spacing:-1px;margin-top:6px}
.lbr-total-src{font-size:10px;opacity:.75;margin-top:8px;font-family:var(--mono)}
.lbr-breakdown{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:14px 18px 16px;display:flex;flex-direction:column;gap:10px;
}
.lbr-breakdown-hdr{
font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
display:flex;align-items:center;justify-content:space-between;
}
.lbr-breakdown-meta{font-size:10px;color:var(--muted2);text-transform:none;letter-spacing:0;font-family:var(--mono);font-weight:500}
.lbr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.lbr-item{
background:var(--s2);border:1px solid var(--border);border-radius:10px;
padding:10px 12px;display:flex;flex-direction:column;gap:4px;
transition:transform .14s, border-color .14s;
}
.lbr-item:hover{transform:translateY(-1px);border-color:var(--accent)}
.lbr-item-lbl{font-size:11px;font-weight:600;color:var(--muted2);text-transform:capitalize}
.lbr-item-val{font-size:22px;font-weight:800;color:var(--ink);font-family:var(--mono);line-height:1;letter-spacing:-0.4px}
@media (max-width: 900px) {
.leads-breakdown{grid-template-columns:1fr}
}
/* —— Início · Email drawer & Event popup —— */
.ie-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.20);z-index:160;display:none}
.ie-drawer-overlay.open{display:block}
.ie-drawer{
position:fixed;right:0;top:0;bottom:0;width:min(540px,100%);
background:var(--surface);border-left:1px solid var(--border);
z-index:161;display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
box-shadow:-10px 0 36px rgba(0,0,0,.10);
}
.ie-drawer.open{transform:translateX(0)}
.ie-drawer-hdr{
padding:16px 18px;border-bottom:1px solid var(--border);
display:flex;align-items:flex-start;gap:10px;
}
.ie-drawer-title{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ie-drawer-sub{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:4px}
.ie-drawer-act{
appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--ink);
padding:6px 10px;border-radius:7px;font-size:11.5px;font-weight:600;cursor:pointer;
transition:all .14s;font-family:inherit;
}
.ie-drawer-act:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.ie-drawer-close{
appearance:none;background:none;border:0;font-size:22px;line-height:1;
color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:5px;
}
.ie-drawer-close:hover{background:var(--s2);color:var(--ink)}
.ie-drawer-body{flex:1;overflow-y:auto;padding:18px 22px}
.ie-drawer-body .ie-email-from{font-size:12.5px;color:var(--muted2);margin-bottom:8px;font-family:var(--mono)}
.ie-drawer-body .ie-email-snippet{font-size:13px;color:var(--ink);line-height:1.55;background:var(--s2);padding:10px 14px;border-radius:8px;border-left:3px solid var(--accent);margin-bottom:14px}
.ie-drawer-body .ie-email-html{font-size:13.5px;line-height:1.6;color:var(--ink)}
.ie-drawer-body .ie-email-html img{max-width:100%;height:auto;border-radius:6px}
.ie-drawer-body .ie-email-html blockquote{border-left:3px solid var(--border);margin:8px 0;padding-left:12px;color:var(--muted2)}
.ie-drawer-body .ie-email-html a{color:var(--accent)}
.ie-drawer-loading{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}
/* Event mini-popup centro do ecrã */
.ie-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.40);z-index:170;display:none}
.ie-popup-overlay.open{display:block}
.ie-popup{
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);
width:min(440px,calc(100% - 30px));max-height:80vh;
background:var(--surface);border:1px solid var(--border);border-radius:14px;
z-index:171;display:none;flex-direction:column;
box-shadow:0 24px 80px rgba(0,0,0,.30);
opacity:0;transition:opacity .18s, transform .18s;
}
.ie-popup.open{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1)}
.ie-popup-hdr{padding:18px 22px 14px;border-bottom:1px solid var(--border);position:relative}
.ie-popup-eyebrow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--accent);margin-bottom:4px}
.ie-popup-title{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3;padding-right:32px}
.ie-popup-close{
position:absolute;top:14px;right:16px;background:none;border:0;font-size:22px;
line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:5px;
}
.ie-popup-close:hover{background:var(--s2);color:var(--ink)}
.ie-popup-body{padding:16px 22px;overflow-y:auto;flex:1;font-size:13px;color:var(--ink);line-height:1.55}
.ie-popup-body .ie-evt-row{display:flex;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:1px dashed var(--border)}
.ie-popup-body .ie-evt-row:last-child{border-bottom:0}
.ie-popup-body .ie-evt-row-l{flex-shrink:0;width:78px;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding-top:2px}
.ie-popup-body .ie-evt-row-v{flex:1;color:var(--ink);font-size:12.5px;min-width:0;word-break:break-word}
.ie-popup-body .ie-evt-row-v a{color:var(--accent)}
.ie-popup-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
/* —— Drag and drop: alerta → to-do —— */
.inicio-alert-row{cursor:grab;user-select:none}
.inicio-alert-row:active{cursor:grabbing}
.inicio-alert-row.is-dragging{opacity:.45}
.inicio-focus-tasks.is-drop-target{
outline:2px dashed var(--accent);outline-offset:-3px;
background:var(--accent-bg);
}
.inicio-focus-tasks.is-drop-target::after{
content:'Largar aqui para criar tarefa';
display:block;text-align:center;color:var(--accent);font-weight:700;font-size:11px;
padding:6px 8px;margin-top:6px;border-radius:7px;background:rgba(255,255,255,.5);
}
/* ── Sortable tables (sortable-tables.js) ─────────────────────────────── */
table.sortable thead th { cursor: pointer; user-select: none; white-space: nowrap; }
table.sortable thead th:hover { color: var(--ink); }
table.sortable thead th.sort-asc::after { content: ' ▲'; font-size: 8px; opacity: .65; }
table.sortable thead th.sort-desc::after { content: ' ▼'; font-size: 8px; opacity: .65; }