/* Identidade visual do Laboratório CRM aplicada ao UTMLab. Tudo aqui vale só com : tirar a classe (Configurações › Aparência › Clássica) devolve o visual anterior, que continua inteiro em style.css. Especificidade: `html.ident-crm` (0,1,1) vence `:root` (0,1,0); os blocos escuros usam `html.ident-crm:not([data-theme="light"])` (0,2,1) e `html.ident-crm[data-theme="dark"]` (0,2,1), que vencem os escuros clássicos (0,2,0). Token novo: declarar nos três. */ /* ---------- fontes locais ---------- */ @font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/nunito-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/nunito-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ---------- tokens ---------- */ html.ident-crm{ color-scheme:light; --brand-50:#fef3eb;--brand-100:#fde3d0;--brand-200:#fbc6a1;--brand-300:#f8a36b;--brand-400:#f5853f;--brand-500:#f37020;--brand-600:#e05a0e;--brand-700:#b8470c;--brand-800:#943912;--brand-900:#783112; --bg:#f6f5f3;--surface:#ffffff;--surface-2:#faf9f7;--surface-3:#f1efec;--border:#e7e4df;--border-2:#dcd8d2; --text:#1c1917;--text-2:#57534e;--muted:#8a847d;--muted-bg:#f1efec; --primary:#e05a0e;--primary-2:#b8470c;--primary-soft:#fef3eb;--primary-ink:#ffffff; --accent-soft:#fef3eb;--accent-fg:#b8470c;--ring:rgba(245,133,63,.22); --spend:#57534e;--revenue:#e05a0e; --radius:16px;--radius-sm:10px; --shadow:0 1px 2px rgba(28,25,23,.04),0 1px 3px rgba(28,25,23,.05); --shadow-lg:0 16px 48px rgba(28,25,23,.16),0 2px 6px rgba(28,25,23,.06); --dc-primary:#e05a0e;--dc-title:#57534e;--dc-value:#1c1917;--dc-shadow:0 1px 2px rgba(28,25,23,.04),0 1px 3px rgba(28,25,23,.05);--dc-radius:16px; --chart-1:#e05a0e;--chart-2:#0f8b73;--chart-3:#d99a1c;--chart-4:#c2413b;--fg-from:#f8a36b;--fg-to:#943912; --edit-bar:#1c1917;--code-bg:#1c1917;--code-fg:#f4f4f5; --font-head:Nunito,Inter,ui-sans-serif,system-ui,sans-serif; --logo-gap:var(--surface); } @media (prefers-color-scheme:dark){html.ident-crm:not([data-theme="light"]){ color-scheme:dark; --bg:#0e0e10;--surface:#17171a;--surface-2:#1c1c20;--surface-3:#242428;--border:#2a2a2f;--border-2:#35353b; --text:#f4f4f5;--text-2:#b4b4bb;--muted:#85858d;--muted-bg:#242428; --primary:#e8601a;--primary-2:#f37020;--primary-soft:rgba(243,112,32,.14);--primary-ink:#ffffff; --accent-soft:rgba(243,112,32,.14);--accent-fg:#f8a36b;--ring:rgba(245,133,63,.28); --spend:#b4b4bb;--revenue:#e8601a; --shadow:0 1px 2px rgba(0,0,0,.3);--shadow-lg:0 16px 48px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3); --dc-primary:#e8601a;--dc-title:#b4b4bb;--dc-value:#f4f4f5;--dc-shadow:0 1px 2px rgba(0,0,0,.3); --chart-1:#e8601a;--chart-2:#2fb89a;--chart-3:#e8b33c;--chart-4:#e0655f;--fg-from:#f8a36b;--fg-to:#b8470c; --edit-bar:#242428;--code-bg:#0b0b0d;--code-fg:#f4f4f5; }} html.ident-crm[data-theme="dark"]{ color-scheme:dark; --bg:#0e0e10;--surface:#17171a;--surface-2:#1c1c20;--surface-3:#242428;--border:#2a2a2f;--border-2:#35353b; --text:#f4f4f5;--text-2:#b4b4bb;--muted:#85858d;--muted-bg:#242428; --primary:#e8601a;--primary-2:#f37020;--primary-soft:rgba(243,112,32,.14);--primary-ink:#ffffff; --accent-soft:rgba(243,112,32,.14);--accent-fg:#f8a36b;--ring:rgba(245,133,63,.28); --spend:#b4b4bb;--revenue:#e8601a; --shadow:0 1px 2px rgba(0,0,0,.3);--shadow-lg:0 16px 48px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3); --dc-primary:#e8601a;--dc-title:#b4b4bb;--dc-value:#f4f4f5;--dc-shadow:0 1px 2px rgba(0,0,0,.3); --chart-1:#e8601a;--chart-2:#2fb89a;--chart-3:#e8b33c;--chart-4:#e0655f;--fg-from:#f8a36b;--fg-to:#b8470c; --edit-bar:#242428;--code-bg:#0b0b0d;--code-fg:#f4f4f5; } /* ---------- base ---------- */ html.ident-crm body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)} html.ident-crm h1,html.ident-crm h2,html.ident-crm h3{font-family:var(--font-head);letter-spacing:-.01em;text-wrap:balance} html.ident-crm h1{font-weight:800} html.ident-crm h2,html.ident-crm h3{font-weight:700} html.ident-crm h2{font-size:16px} html.ident-crm a:not([class]){color:var(--accent-fg)} html.ident-crm .linkish{color:var(--accent-fg)} html.ident-crm :focus-visible{outline:2px solid var(--brand-500);outline-offset:2px} html.ident-crm input[type=checkbox],html.ident-crm input[type=radio],html.ident-crm input[type=range]{accent-color:var(--brand-600)} html.ident-crm pre{background:var(--code-bg);color:var(--code-fg);border-color:transparent;border-radius:12px;padding:14px 16px} html.ident-crm pre code{background:transparent;color:inherit} html.ident-crm .logo-svg{display:block;height:30px;width:auto;color:var(--text)} /* ---------- componentes ---------- */ /* cabeçalho de página: sobrelinha laranja, título extrabold, descrição suave, ações à direita */ html.ident-crm .page-head{align-items:flex-end;margin-bottom:22px} html.ident-crm .ph-eyebrow{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-fg);margin-bottom:4px} html.ident-crm .page-head h1{font-size:28px;line-height:1.15;font-weight:800} html.ident-crm .page-head .sub{font-size:14px;color:var(--text-2);margin-top:4px;max-width:70ch} /* cartões */ html.ident-crm .card{border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow);padding:20px 22px} html.ident-crm .card>h2:first-child{font-size:16px} /* número de destaque */ html.ident-crm .kpi{padding:16px 18px} html.ident-crm .kpi::before{display:none} html.ident-crm .kpi .l{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--text-2)} html.ident-crm .kpi .v{font-size:26px;font-weight:600;letter-spacing:-.02em} /* botões: primário / secundário / fantasma / suave / perigo; alturas 32 · 40 (36 no desktop) · 44 */ html.ident-crm .btn{min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-family:inherit;font-size:14px;font-weight:600;justify-content:center;box-shadow:0 1px 1px rgba(28,25,23,.04)} html.ident-crm .btn:hover{background:var(--surface-3)} html.ident-crm .btn.primary{background:var(--brand-600);border-color:var(--brand-600);color:#fff} html.ident-crm .btn.primary:hover{background:var(--brand-700);border-color:var(--brand-700)} html.ident-crm .btn.ghost{background:transparent;border-color:transparent;box-shadow:none} html.ident-crm .btn.ghost:hover{background:var(--surface-3)} html.ident-crm .btn.soft{background:var(--accent-soft);border-color:transparent;color:var(--accent-fg);box-shadow:none} html.ident-crm .btn.danger{background:var(--bad);border-color:var(--bad);color:#fff} html.ident-crm .btn.sm{min-height:32px;padding:0 10px;font-size:13px;border-radius:8px} html.ident-crm .btn.lg{min-height:44px;padding:0 18px;font-size:15px} @media (min-width:1024px){html.ident-crm .btn{min-height:36px}html.ident-crm .btn.sm{min-height:32px}html.ident-crm .btn.lg{min-height:44px}} /* campos */ html.ident-crm input[type=text],html.ident-crm input[type=password],html.ident-crm input[type=number],html.ident-crm input[type=date],html.ident-crm input[type=email],html.ident-crm input[type=search],html.ident-crm select,html.ident-crm textarea{border:1px solid var(--border-2);background:var(--surface);color:var(--text);border-radius:10px;font-family:inherit} html.ident-crm textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} html.ident-crm input:focus,html.ident-crm select:focus,html.ident-crm textarea:focus{outline:0;border-color:var(--brand-400);box-shadow:0 0 0 3px var(--ring)} html.ident-crm label{color:var(--text-2)} html.ident-crm .combo-btn{border-radius:10px} html.ident-crm .combo.open .combo-btn,html.ident-crm .combo-btn:focus-visible{border-color:var(--brand-400);box-shadow:0 0 0 3px var(--ring)} html.ident-crm .combo.has-val .combo-btn{border-color:var(--brand-300);background:var(--accent-soft)} html.ident-crm .combo-pop{border-radius:14px;box-shadow:var(--shadow-lg)} html.ident-crm .combo-it .ck{color:var(--accent-fg)} /* segmentado em pílula: ativo com fundo de superfície */ html.ident-crm .seg{background:var(--surface-3);border:0;border-radius:12px;padding:3px;gap:2px;box-shadow:none} html.ident-crm .seg button{border-radius:9px;padding:6px 12px;color:var(--text-2);font-weight:600;min-height:32px} html.ident-crm .seg button+button{border-left:0} html.ident-crm .seg button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(28,25,23,.08),0 1px 3px rgba(28,25,23,.06)} /* abas */ html.ident-crm .tabs button.active{color:var(--accent-fg);border-bottom-color:var(--brand-500)} /* badges: pílula com anel interno do mesmo tom */ html.ident-crm .pill{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 22%,transparent);padding:2px 10px} html.ident-crm .chip:hover{border-color:var(--brand-400);color:var(--accent-fg)} /* avisos */ html.ident-crm .alert{border-radius:12px} html.ident-crm .callout{border-left-color:var(--brand-500);background:var(--accent-soft);border-radius:12px} html.ident-crm .empty{border:1px dashed var(--border-2);border-radius:16px;background:var(--surface-2)} /* tabelas */ html.ident-crm .table-wrap{border-radius:12px} html.ident-crm th{background:var(--surface-2);color:var(--muted)} /* modal: diálogo no desktop, folha inferior no celular */ html.ident-crm .modal-bg{z-index:90;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);animation:cx-fade 160ms ease} html.ident-crm .modal{border-radius:16px;box-shadow:var(--shadow-lg);position:relative} @media (max-width:1023px){ html.ident-crm .modal-bg{align-items:flex-end;padding:0} html.ident-crm .modal{border-radius:24px 24px 0 0;max-height:92dvh;padding:22px 16px calc(20px + env(safe-area-inset-bottom));animation:cx-up 220ms cubic-bezier(.2,.8,.2,1)} } /* toasts no topo */ html.ident-crm .toast{top:calc(14px + env(safe-area-inset-top));bottom:auto;border-radius:12px;z-index:100;animation:cx-fade 160ms ease} /* convite de notificações acima da barra inferior */ html.ident-crm .notif-invite{border-radius:16px} html.ident-crm .ni-ic{background:var(--accent-soft);color:var(--accent-fg)} @media (max-width:1023px){html.ident-crm .notif-invite{bottom:calc(76px + env(safe-area-inset-bottom))}} /* dashboard editável */ html.ident-crm .grid-stack-item-content{border:1px solid var(--border)} html.ident-crm .dcard{padding:12px 16px} html.ident-crm .dcard-head h6{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--text-2)} html.ident-crm .dc-ic,html.ident-crm .dcard-head .dc-ic[class*="t-"]{width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--accent-fg)} html.ident-crm .dc-ic svg{width:16px;height:16px} html.ident-crm .edit-bar{background:var(--edit-bar);border-radius:16px} html.ident-crm .edit-bar .eb-white{color:var(--edit-bar)} html.ident-crm .fbar-head .btn.primary{background:var(--brand-600);border-color:var(--brand-600)} /* ---------- casca ---------- */ html.ident-crm .cx{display:flex;min-height:100vh;min-height:100dvh;background:var(--bg)} html.ident-crm .cx-body{flex:1;min-width:0;display:flex;flex-direction:column} html.ident-crm .cx-body>.main{flex:1;padding:20px 16px calc(112px + env(safe-area-inset-bottom))} html.ident-crm .cx-body>.main>*{max-width:1680px;margin-left:auto;margin-right:auto} html.ident-crm .cx-body>.main>.tt-layout{max-width:1320px} html.ident-crm .cx-body>.main>.u-form{max-width:900px} @media (min-width:1024px){html.ident-crm .cx-body>.main{padding:28px 32px 64px}} /* sidebar (lg+) */ html.ident-crm .cx-side{display:none} @media (min-width:1024px){ html.ident-crm .cx-side{display:flex;flex-direction:column;flex:none;width:256px;height:100vh;height:100dvh;position:sticky;top:0;background:var(--surface);border-right:1px solid var(--border);transition:width 200ms cubic-bezier(.2,.8,.2,1)} } html.ident-crm .cx-brand{height:64px;display:flex;align-items:center;padding:0 20px;flex:none} html.ident-crm .cx-brand a{display:flex;align-items:center;color:var(--text)} html.ident-crm .cx-brand .logo-full{height:32px} html.ident-crm .cx-brand .logo-mark{display:none;height:34px} html.ident-crm .cx-nav{flex:1;overflow-y:auto;padding:4px 12px 12px;overscroll-behavior:contain} html.ident-crm .cx-group+.cx-group{margin-top:14px} html.ident-crm .cx-glabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 12px 6px} html.ident-crm .cx-link{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--text-2);font-size:14px;font-weight:500;min-height:44px;transition:background 120ms,color 120ms} html.ident-crm .cx-link svg{width:18px;height:18px;flex:none} html.ident-crm .cx-link span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.ident-crm .cx-link:hover{background:var(--surface-3);color:var(--text)} html.ident-crm .cx-link.active{background:var(--accent-soft);color:var(--accent-fg);font-weight:600} html.ident-crm .cx-link.active::before{content:'';position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--brand-500)} html.ident-crm .cx-side-foot{flex:none;border-top:1px solid var(--border);padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px} html.ident-crm .cx-usercard{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:12px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;min-height:48px} html.ident-crm .cx-usercard:hover{background:var(--surface-3)} html.ident-crm .cx-usercard svg{flex:none} html.ident-crm .cx-uname{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25} html.ident-crm .cx-uname b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.ident-crm .cx-uname small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.ident-crm .cx-uchev{color:var(--muted);font-size:16px} html.ident-crm .cx-collapse{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:12px;background:transparent;color:var(--text-2);font:inherit;font-size:13.5px;cursor:pointer} html.ident-crm .cx-collapse:hover{background:var(--surface-3);color:var(--text)} html.ident-crm .cx-collapse .ic{font-size:18px} /* recolhida: só ícones */ @media (min-width:1024px){ html.ident-crm .cx.collapsed .cx-side{width:76px} html.ident-crm .cx.collapsed .cx-brand{justify-content:center;padding:0} html.ident-crm .cx.collapsed .cx-brand .logo-full{display:none} html.ident-crm .cx.collapsed .cx-brand .logo-mark{display:block} html.ident-crm .cx.collapsed .cx-glabel{font-size:0;padding:0;height:1px;background:var(--border);margin:10px 8px} html.ident-crm .cx.collapsed .cx-link{justify-content:center;padding:10px 0} html.ident-crm .cx.collapsed .cx-link span,html.ident-crm .cx.collapsed .cx-uname,html.ident-crm .cx.collapsed .cx-uchev,html.ident-crm .cx.collapsed .cx-collapse span{display:none} html.ident-crm .cx.collapsed .cx-usercard,html.ident-crm .cx.collapsed .cx-collapse{justify-content:center;padding-left:0;padding-right:0} } /* barra de cima */ html.ident-crm .cx-top{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:12px;min-height:56px;padding:env(safe-area-inset-top) 12px 0 16px;background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);--logo-gap:var(--bg)} html.ident-crm .cx-mlogo{display:flex;align-items:center;color:var(--text);min-height:44px} html.ident-crm .cx-mlogo .logo-svg{height:26px} html.ident-crm .cx-search,html.ident-crm .cx-cta{display:none} html.ident-crm .cx-top-right{margin-left:auto;display:flex;align-items:center;gap:4px} html.ident-crm .cx-iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:0;border-radius:12px;background:transparent;color:var(--text-2);cursor:pointer;padding:0} html.ident-crm .cx-iconbtn:hover{background:var(--surface-3);color:var(--text)} html.ident-crm .cx-iconbtn>svg,html.ident-crm .cx-iconbtn>.ic{width:20px;height:20px;font-size:20px} html.ident-crm .cx-avatarbtn>svg{width:32px;height:32px} html.ident-crm .cx-badge{position:absolute;top:6px;right:5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--brand-500);color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--surface)} @media (min-width:1024px){ html.ident-crm .cx-top{min-height:64px;padding:0 28px 0 32px} html.ident-crm .cx-mlogo,html.ident-crm .cx-avatarbtn{display:none} html.ident-crm .cx-search{display:flex;align-items:center;gap:10px;width:min(420px,38vw);height:40px;padding:0 8px 0 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--muted);font:inherit;font-size:14px;cursor:pointer;text-align:left} html.ident-crm .cx-search:hover{border-color:var(--border-2);color:var(--text-2)} html.ident-crm .cx-search .ic{font-size:16px} html.ident-crm .cx-search span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.ident-crm .cx-search kbd{font:600 11px/1 Inter,sans-serif;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:4px 6px} html.ident-crm .cx-cta{display:inline-flex;margin-right:6px} html.ident-crm .cx-cta svg{width:16px;height:16px} html.ident-crm .cx-iconbtn{width:40px;height:40px} } /* barra de baixo (< 1024 px) */ html.ident-crm .cx-bottom{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:color-mix(in srgb,var(--surface) 95%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:0 4px env(safe-area-inset-bottom)} html.ident-crm .cx-bitem{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:8px 2px;border:0;background:transparent;color:var(--muted);font-family:inherit;font-size:11px;font-weight:500;line-height:1.2;cursor:pointer;-webkit-tap-highlight-color:transparent} html.ident-crm .cx-bitem svg{width:22px;height:22px;flex:none} html.ident-crm .cx-bitem span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.ident-crm .cx-bitem.active{color:var(--accent-fg);font-weight:600} html.ident-crm .cx-fab{position:fixed;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:29;width:56px;height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--brand-600);color:#fff;box-shadow:0 10px 28px rgba(224,90,14,.35),0 2px 6px rgba(28,25,23,.15)} html.ident-crm .cx-fab .ic{font-size:24px} @media (min-width:1024px){html.ident-crm .cx-bottom,html.ident-crm .cx-fab{display:none}} /* folha "Mais", conta, sino e busca */ html.ident-crm .cx-sheet-bg{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:cx-fade 160ms ease} html.ident-crm .cx-sheet{width:100%;max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);color:var(--text);border-radius:24px 24px 0 0;padding:6px 12px calc(16px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg);animation:cx-up 220ms cubic-bezier(.2,.8,.2,1);--logo-gap:var(--surface)} html.ident-crm .cx-handle{width:40px;height:4px;border-radius:999px;background:var(--border-2);margin:6px auto 6px} html.ident-crm .cx-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 6px 12px} html.ident-crm .cx-sheet-head h2{margin:0;font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.ident-crm .cx-sheet-body{display:flex;flex-direction:column;gap:2px} @media (min-width:1024px){ html.ident-crm .cx-sheet-bg{align-items:center;padding:24px} html.ident-crm .cx-sheet{width:min(520px,100%);max-height:80dvh;border-radius:16px;padding:10px 12px 14px;animation:cx-fade 160ms ease} html.ident-crm .cx-handle{display:none} html.ident-crm .cx-sheet-bg.is-pop{display:block;padding:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none} html.ident-crm .cx-sheet-bg.is-pop .cx-sheet{position:fixed;max-height:min(520px,80dvh);border:1px solid var(--border)} } html.ident-crm .cx-mitem{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:var(--text);font:inherit;font-size:14px;font-weight:500;text-align:left;cursor:pointer} html.ident-crm .cx-mitem svg{width:18px;height:18px;flex:none} html.ident-crm .cx-mitem .ic{font-size:18px} html.ident-crm .cx-mitem>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.ident-crm .cx-mitem:hover{background:var(--surface-3)} html.ident-crm .cx-mitem.active{background:var(--accent-soft);color:var(--accent-fg);font-weight:600} html.ident-crm .cx-mitem.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--brand-500)} html.ident-crm .cx-mitem.danger{color:var(--bad)} html.ident-crm .cx-sep{height:1px;background:var(--border);margin:6px 4px} html.ident-crm .cx-mlabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px 12px 6px} html.ident-crm .cx-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 4px 4px} html.ident-crm .cx-themes button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer} html.ident-crm .cx-themes .ic{font-size:18px} html.ident-crm .cx-themes button.on{border-color:var(--brand-400);background:var(--accent-soft);color:var(--accent-fg)} html.ident-crm .cx-acc-role{font-size:12.5px;color:var(--muted);padding:0 12px 8px;overflow-wrap:anywhere} html.ident-crm .cx-notifs{display:flex;flex-direction:column;gap:2px} html.ident-crm .cx-notif{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;color:var(--text)} html.ident-crm .cx-notif:hover{background:var(--surface-3)} html.ident-crm .cx-notif.new{background:var(--accent-soft)} html.ident-crm .cx-nic{flex:none;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px} html.ident-crm .cx-nic.sale{background:var(--good-bg);color:var(--good)} html.ident-crm .cx-nic.goal{background:var(--accent-soft);color:var(--accent-fg)} html.ident-crm .cx-ntxt{display:flex;flex-direction:column;min-width:0;gap:1px} html.ident-crm .cx-ntxt b{font-size:13.5px;font-weight:600} html.ident-crm .cx-ntxt small{font-size:12.5px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html.ident-crm .cx-ntxt em{font-style:normal;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums} html.ident-crm .cx-empty{margin:4px;padding:24px 16px;text-align:center;color:var(--muted);border:1px dashed var(--border-2);border-radius:12px;font-size:13.5px} html.ident-crm .cx-sinput{width:100%;height:44px;padding:0 14px;font-size:15px;margin:2px 0 8px} html.ident-crm .cx-sres{display:flex;flex-direction:column;gap:2px} html.ident-crm .cx-sgrp{flex:none;font-size:11.5px;color:var(--muted);font-weight:500} /* login */ html.ident-crm .login{background:var(--bg)} html.ident-crm .login .hero{background:radial-gradient(900px 520px at -10% -10%,rgba(243,112,32,.45) 0%,rgba(243,112,32,0) 60%),#1c1917;--logo-gap:#1c1917} html.ident-crm .login .hero p{color:#d6d3d1} html.ident-crm .login .hero li{color:#e7e5e4} html.ident-crm .login .hero li b{background:rgba(243,112,32,.22);color:#fbc6a1} html.ident-crm .brand-hero{background:transparent;width:auto;height:auto;padding:0;border-radius:0;justify-content:flex-start} html.ident-crm .login-hero-logo{height:52px;color:#fff} html.ident-crm .login .card{border-radius:20px;--logo-gap:var(--surface)} html.ident-crm .login-logo{height:36px;width:auto;margin:0 auto 18px;color:var(--text)} /* animações */ @keyframes cx-fade{from{opacity:0}to{opacity:1}} @keyframes cx-up{from{transform:translateY(100%)}to{transform:none}} @media (prefers-reduced-motion:reduce){ html.ident-crm .cx-sheet-bg,html.ident-crm .cx-sheet,html.ident-crm .modal-bg,html.ident-crm .modal,html.ident-crm .toast{animation:none} html.ident-crm .cx-side{transition:none} }