/* ============================================================================ Eitek · painel.css — DESIGN SYSTEM único do produto Todos os módulos incluem este arquivo. Zero estilo próprio por módulo. Identidade: teal #0ea2a7 + verde #12463d · Space Grotesk (títulos) + Archivo. Suporta tema claro/escuro (body.dark) e cor de marca por organização (sobrescreva --accent no a partir de organizacoes.cor_primaria). ============================================================================ */ /* ---- Tokens ---- */ :root{ --accent:#0ea2a7; --accent-soft:#e3f4f4; --accent-ring:rgba(14,162,167,.22); --green:#12463d; --good:#0f9d6b; --red:#e0554e; --amber:#e8992a; --indigo:#5b6cf0; --bg:#f4f7f6; --panel:#ffffff; --ink:#15332c; --muted:#5b6472; --line:#e4e9e8; --field:#c9d8d4; --field-bg:#fbfdfc; --sb-thumb:#cdd9d5; --grid:rgba(21,51,44,.08); --side-bg:#ffffff; --side-ink:#3c4a45; --side-mut:#86928f; --side-hover:#eef4f2; --side-active:var(--accent); --side-line:#e4e9e8; --side-brand:#12463d; --side-icon:var(--accent); --radius:14px; --radius-sm:9px; --fs:12.5px; --toph:48px; --side-w:246px; --rail:60px; --side-active-ink:#fff; } body.dark{ --accent-soft:#123536; --bg:#0e131c; --panel:#161d2a; --ink:#e6ebf2; --muted:#94a0b2; --line:#26303f; --field:#33404f; --field-bg:#121a26; --sb-thumb:#39465a; --grid:rgba(255,255,255,.07); --side-bg:#141a26; --side-ink:#c6cfdd; --side-mut:#7c8798; --side-hover:#1f2a3a; --side-line:#232d3e; --side-brand:#ffffff; --side-icon:#5fd6d3; color-scheme:dark; } /* Estilos alternativos de menu: body[data-side="cinza"|"eitek"] (claro = padrão) */ body[data-side="cinza"]{--side-bg:#eef2f1;--side-ink:#3c4a45;--side-mut:#7d8a85;--side-hover:#e3e9e7;--side-line:#e0e6e4;--side-brand:#12463d;--side-icon:var(--accent);--sb-thumb:#cdd9d5} body[data-side="eitek"]{--side-bg:#12463d;--side-ink:#bcd3ce;--side-mut:#6f938b;--side-hover:#17564b;--side-line:#1c574c;--side-brand:#fff;--side-icon:#5fd6d3;--sb-thumb:#1f6155} /* ---- Base ---- */ *{box-sizing:border-box} html{color-scheme:light} html,body{margin:0;height:100%;font-family:'Archivo',-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);font-size:13px} h1,h2,h3,.brand b,.h1,.kpi .v,.wordmark{font-family:'Space Grotesk','Archivo',sans-serif;letter-spacing:-.01em} *{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px;border:3px solid transparent;background-clip:content-box} /* ---- Layout / shell ---- */ .app{display:grid;grid-template-columns:var(--side-w) 1fr;grid-template-rows:var(--toph) 1fr;height:100vh} body.collapsed .app{grid-template-columns:var(--rail) 1fr} .topbar{grid-column:1/3;display:flex;align-items:center;gap:12px;background:var(--panel);border-bottom:1px solid var(--line);padding:0 14px;position:relative;z-index:65} .sidebar{background:var(--side-bg);color:var(--side-ink);overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--side-line);display:flex;flex-direction:column} .main{overflow-y:auto;padding:16px 20px} /* ---- Marca (logo do cliente) ---- */ .brand{display:flex;align-items:center;gap:9px;cursor:pointer} .logoemb{width:30px;height:30px;flex:none}.logoemb svg{width:100%;height:100%;display:block} .wordmark{font-size:18px;color:var(--ink)} /* Wordmark da marca (fallback sem logo-imagem): nome minúsculo + ponto teal */ .wm{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1;display:inline-flex;align-items:flex-end;text-transform:lowercase;color:inherit} .wm .wmdot{width:.28em;height:.28em;border-radius:50%;background:var(--accent);margin-left:.13em;margin-bottom:.12em;flex:none} /* Monograma compacto (rail recolhido / ícone quadrado) */ .wmini{width:30px;height:30px;border-radius:9px;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;position:relative;flex:none;text-transform:lowercase} .wmini i{position:absolute;right:5px;bottom:7px;width:5px;height:5px;border-radius:50%;background:var(--accent)} /* ---- Botões ---- */ .btn{padding:8px 13px;border:0;background:var(--accent);color:#fff;border-radius:var(--radius-sm);font-size:12.5px;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block} .btn:hover,.btn:focus{text-decoration:none} .btn:hover{filter:brightness(.96)} .btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line)} .btn.sm{padding:5px 10px;font-size:11.5px} .iconbtn{width:32px;height:32px;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;cursor:pointer;display:grid;place-items:center} .iconbtn:hover{background:var(--side-hover)} /* ---- Campos (afford. clara em qualquer monitor) ---- */ input,select,textarea{background:var(--field-bg);border:1px solid var(--field);border-radius:7px;padding:7px 9px;font-size:12.5px;color:var(--ink);box-shadow:inset 0 1px 1px rgba(16,24,40,.05);font-family:inherit} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)} label{font-size:11px;color:var(--muted);font-weight:600;display:block;margin-bottom:4px} .form{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .form .full{grid-column:1/-1} /* ---- Cartões ---- */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px} .pcard{scroll-margin-top:64px;transition:box-shadow .2s,border-color .2s} .pcard:target{box-shadow:0 0 0 2px var(--accent);border-color:var(--accent)} .h1{font-size:18px;margin:0 0 2px} .sub{color:var(--muted);font-size:12.5px;margin:0} /* carimbo de sincronização padrão (verde + pílula) — usar em qualquer tela */ .synctag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap} .dotlive{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(15,157,107,.15);flex:none} .crumb{color:var(--muted);font-size:12px;margin-bottom:10px}.crumb b{color:var(--ink)} .sec{display:flex;align-items:center;margin:20px 0 12px} .sec h2{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0;display:flex;align-items:center;gap:10px} .sec h2::before{content:'';width:26px;height:2px;background:var(--accent)} .sec .r{margin-left:auto} /* ---- KPI ---- */ /* ⚠ `margin-bottom` e `border-top` SAO DO COMPONENTE, nao de um modulo. Ate 10/09/2026 nao estavam aqui, e cada tela resolvia por conta: sete nao tinham respiro nenhum (a faixa encostava no conteudo de baixo) e tres nao tinham tarja. Quem desenhava tela nova comecava torto por omissao, nao por escolha. Os valores sao os do prototipo v15.1. ⚠ A TARJA E `border-top`, E SO ELA. Ate esta data tres telas (balancete, conversor, implantacao) desenhavam a mesma barra com `::before`. As duas tecnicas renderizam igual, mas somam: com a tarja aqui no global, quem mantivesse o pseudo-elemento mostraria SEIS pixels — tres neutros em cima e tres coloridos embaixo. As tres foram convertidas junto com esta mudanca. Estado de cartao se pinta com `border-top-color`. */ .kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:14px} .kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px;border-top:3px solid var(--line)} .kpi .l{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em} .kpi .v{font-size:26px;margin:6px 0 2px} .kpi .d{font-size:11.5px;color:var(--muted)}.kpi .d b{color:var(--good)} .bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin:8px 0 5px} .bar>i{display:block;height:100%;border-radius:4px;background:var(--good)} .bar>i.under{background:var(--amber)} /* ---- Abas ---- */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)} /* 8px 13px e o valor canonico do guia, e o que 3 dos 4 modulos ja usavam. O global estava em 7px 12px, entao aba dentro e fora de modulo tinha tamanho diferente na mesma tela. Unificado em 15/ago. */ .tab{padding:8px 13px;font-size:12.5px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px} .tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600} .tab.lock{color:#b45309} /* ---- Tabela ---- */ table{width:100%;border-collapse:collapse;font-size:12.5px} th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)} th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em} td{font-variant-numeric:tabular-nums} tr:hover td{background:var(--side-hover)} /* ---- Selos / status ---- */ .pill{display:inline-block;background:#e9f9f0;color:#067a46;border:1px solid #a7e8c6;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:600} .pill.warn{background:#fdecec;color:#b91c1c;border:1px solid #f4b8b8} .pill.amber{background:#fff6e5;color:#a86a00;border:1px solid #ffe0a3} body.dark .pill{background:#0f2a1c;color:#7fe0a6;border-color:#1f5b39} .badge{font-size:9px;font-weight:700;border-radius:5px;padding:1px 5px} .badge.novo{background:var(--good);color:#fff} .badge.trial{background:var(--amber);color:#3a2a00} /* ---- Toast ---- */ .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;padding:11px 16px;border-radius:10px;font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.28);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:80} .toast.on{opacity:1;transform:translateX(-50%) translateY(-4px)} /* ---- Diálogo do sistema (Dlg.confirmar / avisar / perguntar) ---- No lugar do confirm()/alert()/prompt() do navegador, que estampam "app.eitek.com.br diz", não têm a cara do painel e travam o JS enquanto estão abertos. Mora no shell: nenhum módulo precisa copiar isto. Estado é `.on` (e não `.hidden`, que aqui não é global). */ .dlgbg{position:fixed;inset:0;background:rgba(15,25,35,.45);display:none;align-items:center;justify-content:center;z-index:90;padding:16px} .dlgbg.on{display:flex} .dlgcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(440px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.3)} .dlghead{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px} .dlghead b{font-weight:600} .dlgx{margin-left:auto;border:0;background:none;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;font-family:inherit} .dlgbody{padding:14px 16px;overflow:auto} .dlgbody p{margin:0;white-space:pre-line;line-height:1.5;font-size:13px;color:var(--ink)} .dlgbody p:empty{display:none} .dlgbody .dlgcampo{width:100%;margin-top:11px;font-family:inherit;font-size:13px} .dlgfoot{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)} .btn.danger{background:var(--red)} /* ---- Rodapé da plataforma (único vestígio da Eitek) ---- */ .side-foot{padding:9px 14px;border-top:1px solid var(--side-line);color:var(--side-mut);font-size:10.5px;text-align:center} .side-foot b{font-family:'Space Grotesk',sans-serif;color:var(--side-icon)} /* ---- Topbar: busca + ações + avatar ---- */ .search{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;background:var(--field-bg);border:1px solid var(--field);color:var(--muted);border-radius:9px;padding:6px 10px;cursor:text;font-family:inherit;font-size:12.5px} .search svg{width:15px;height:15px;flex:none} .search .ph{flex:1;text-align:left} .search kbd{font-family:inherit;font-size:10px;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--muted)} .tb-right{display:flex;align-items:center;gap:8px;margin-left:auto} .iconbtn svg{width:17px;height:17px} .iconbtn .emo{font-size:15px;line-height:1} .bell{position:relative} .bell .dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--panel)} .bell .badge2{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;font-size:9px;font-weight:700;border-radius:999px;padding:0 4px;min-width:15px;height:15px;display:grid;place-items:center;border:2px solid var(--panel)} /* densidade (Compacto/Confortável) e estilo de menu */ .seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden} .seg button{border:0;background:var(--panel);padding:6px 9px;font-size:11px;color:var(--muted);cursor:pointer;font-family:inherit} .seg button.on{background:var(--accent);color:#fff} .ctl{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)} .ctl select{font-size:11.5px;padding:6px 8px} .theme{display:flex;gap:5px;align-items:center} .theme .sw{width:15px;height:15px;border-radius:50%;cursor:pointer;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line)} .theme .sw.on{box-shadow:0 0 0 2px var(--accent)} body[data-d="comfy"]{--toph:54px;font-size:14px} body[data-d="comfy"] .main{padding:20px 26px} body[data-d="comfy"] .card{padding:20px} body[data-d="comfy"] .mod .it,body[data-d="comfy"] .nav a.it{padding:9px 10px;font-size:13.5px} body[data-d="comfy"] .subs .lk,body[data-d="comfy"] .nav>.grp>a.lk{padding-top:8px;padding-bottom:8px;font-size:13px} body[data-d="comfy"] th,body[data-d="comfy"] td{padding:10px 12px} /* cabeçalho do menu lateral (marca + papel + recolher) */ .side-head{padding:10px 12px;border-bottom:1px solid var(--side-line);display:flex;align-items:center;gap:9px} .side-head .lg{width:30px;height:30px;flex:none;cursor:pointer} .side-head .lg svg{width:100%;height:100%;display:block} .side-head .who{cursor:pointer;overflow:hidden;line-height:1.15} .side-head .who b{color:var(--side-brand);font-size:13px;font-family:'Space Grotesk',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .side-head .who small{display:block;color:var(--side-mut);font-size:10.5px} .side-head .col{margin-left:auto;color:var(--side-mut);cursor:pointer;font-size:15px;flex:none;background:none;border:0;padding:0} body.collapsed .side-head{justify-content:center;padding:10px 0} body.collapsed .side-head .who,body.collapsed .side-head .col{display:none} .avatar{width:30px;height:30px;border-radius:50%;border:0;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;font-family:'Space Grotesk',sans-serif;display:grid;place-items:center} .only-mobile{display:none} /* ---- Sidebar: navegação por departamento → módulo → tarefa ---- */ .nav{padding:8px 8px 4px;flex:1} .grp{margin-bottom:6px} .grp-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--side-mut);padding:10px 10px 4px;font-weight:700} .mod .it,.nav a.it{width:100%;display:flex;align-items:center;gap:9px;padding:7px 10px;border:0;background:none;color:var(--side-ink);font-family:inherit;font-size:12.5px;cursor:pointer;border-radius:8px;text-align:left;text-decoration:none} .mod .it:hover,.nav a.it:hover{background:var(--side-hover)} .it .ic{width:18px;height:18px;flex:none;color:var(--side-icon);display:grid;place-items:center} .it .ic svg{width:18px;height:18px} .it .tx{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .it .chev{width:14px;height:14px;flex:none;color:var(--side-mut);transform:rotate(0);transition:transform .15s;opacity:.7} .it .chev svg{width:14px;height:14px} .mod.open .it .chev{transform:rotate(180deg)} .it.lock{color:var(--side-mut)} .it.lock .ic{color:var(--side-mut)} .subs{display:none;flex-direction:column;padding:2px 0 4px 0} .mod.open .subs{display:flex} .subs .lk,.nav>.grp>a.lk{display:block;color:var(--side-mut);text-decoration:none;font-size:12px;padding:6px 10px 6px 37px;border-radius:7px} .nav>.grp>a.lk{padding-left:10px} .subs .lk:hover,.nav>.grp>a.lk:hover{background:var(--side-hover);color:var(--side-ink)} .subs .lk.active,.nav>.grp>a.lk.active{color:#fff;background:var(--side-active);font-weight:600} .nav a.it.active{background:var(--side-active);color:var(--side-active-ink);font-weight:600} .nav a.it.active .ic{color:var(--side-active-ink)} /* menu do cliente: departamentos → tarefas + favoritos (padrão v15.1) */ .seclbl{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--side-mut);padding:8px 10px 3px} body.collapsed .seclbl{display:none} .dept{margin-bottom:1px} .dept-btn{width:100%;display:flex;align-items:center;gap:9px;padding:7px 8px;border:0;background:transparent;color:var(--side-ink);border-radius:7px;cursor:pointer;font-size:12.5px;text-align:left;font-family:inherit} .dept-btn:hover{background:var(--side-hover)} .dept-btn .ic{width:20px;height:20px;color:var(--side-icon);flex:none;display:grid;place-items:center} .dept-btn .ic svg{width:17px;height:17px} .dept-btn .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dept-btn .car{width:13px;height:13px;color:var(--side-mut);flex:none;transform:rotate(-90deg);transition:transform .15s} .dept-btn .car svg{width:13px;height:13px} .dept.open .dept-btn .car{transform:rotate(0)} .dept.open .dept-btn{color:var(--side-brand);font-weight:600} .tasks{display:none;padding:1px 0 4px} .dept.open .tasks{display:block} .task{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 39px;color:var(--side-mut);font-size:12.5px;cursor:pointer;border-radius:7px;text-decoration:none} .task .tnm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .task:hover{background:var(--side-hover);color:var(--side-ink)} /* MESMO TRATAMENTO DO LINK SOLTO (.dept.flat .dept-btn.active, mais abaixo): fundo suave, texto na cor de destaque e negrito. Antes esta era a única forma de "você está aqui" com fundo CHAPADO e texto branco — o mesmo estado dizia uma coisa no departamento de uma tarefa e gritava outra no submenu. Duas linguagens para a mesma informação, no mesmo menu. */ .task.active{background:var(--side-hover);color:var(--side-active);font-weight:600} .task .star{margin-left:auto;opacity:0;font-size:12px;color:#f0b400;flex:none} .task:hover .star{opacity:.5}.task .star.on{opacity:1} #favBox .task{padding-left:16px} #favBox .task .star{opacity:1} .dept.lock .dept-btn{opacity:.6} .dept.lock .dept-btn .ic{color:var(--side-mut)} .badge.lk{color:var(--side-mut);display:inline-grid;place-items:center} .badge.lk svg{width:12px;height:12px} body.collapsed .dept-btn{justify-content:center;padding:9px 0} body.collapsed .dept-btn .nm,body.collapsed .dept-btn .car,body.collapsed .badge{display:none} body.collapsed .tasks{display:none!important} body[data-d="comfy"] .dept-btn{padding:9px 8px;font-size:13.5px} body[data-d="comfy"] .task{padding:8px 8px 8px 44px;font-size:13px} body.collapsed .grp-l,body.collapsed .it .tx,body.collapsed .it .chev,body.collapsed .side-foot,body.collapsed .badge{display:none} body.collapsed .subs{display:none!important} body.collapsed .it{justify-content:center;padding:9px 0} /* ---- Overlay + painéis flutuantes (busca / notificações / perfil) ---- */ .overlay{position:fixed;inset:0;background:transparent;pointer-events:none;z-index:60;transition:background .16s} .overlay.on{pointer-events:auto} .overlay.dim{background:rgba(16,32,29,.38)} /* popup do cadeado (o que o módulo faz + pedir acesso / contratar) */ .modinfo{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.97);width:min(480px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.3);z-index:78;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;overflow:hidden} .modinfo.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)} .modinfo .mi-h{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line)} .modinfo .mi-ic{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none} .modinfo .mi-ic svg{width:19px;height:19px} .modinfo .mi-nm{font-size:15px;font-weight:600} .modinfo .mi-x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:14px} .modinfo .mi-b{padding:16px 18px} .modinfo .mi-desc{margin:0 0 14px;font-size:13px;color:var(--ink);line-height:1.55} .modinfo .mi-sobre{margin-top:16px} .modinfo .mi-sobre .mi-lista{margin-bottom:0} .modinfo .mi-lead{margin:0 0 12px;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45} .modinfo .mi-lista{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px} .modinfo .mi-lista li{position:relative;padding-left:22px;font-size:12.5px;color:var(--muted);line-height:1.5} .modinfo .mi-lista li b{color:var(--ink);font-weight:600} .modinfo .mi-lista li::before{content:"✓";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:700;display:grid;place-items:center;margin-top:1px} .modinfo .mi-cta{border-radius:11px;padding:12px 13px;border:1px solid var(--line)} .modinfo .mi-cta.acesso{background:var(--accent-soft);border-color:transparent} .modinfo .mi-cta.contratar{background:var(--field-bg)} .modinfo .mi-t{font-size:13px;font-weight:700} .modinfo .mi-s{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5} .modinfo .mi-foot{display:flex;justify-content:flex-end;margin-top:14px} .cmd{position:fixed;top:70px;left:50%;transform:translateX(-50%) scale(.98);width:min(560px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.28);z-index:70;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;overflow:hidden} .cmd.on{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)} .cmd input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:14px 16px;font-size:14px;box-shadow:none} .cmd input:focus{box-shadow:none;border-color:var(--line)} .cmd-list{max-height:340px;overflow:auto;padding:6px} .cmd .it{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;color:var(--ink);font-size:12.5px} .cmd .it:hover,.cmd .it.sel{background:var(--side-hover)} .cmd .it svg{width:18px;height:18px;flex:none;color:var(--accent)} .cmd .it .k{margin-left:auto;font-size:10.5px;color:var(--muted)} .cmd .it .lockt{margin-left:auto;font-size:10px;color:var(--amber)} .cmd .empty{padding:18px;text-align:center;color:var(--muted);font-size:12.5px} .popwrap{position:relative;display:flex;align-items:center} .pop{position:absolute;top:calc(100% + 9px);right:0;width:min(340px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:0 20px 50px rgba(0,0,0,.24);z-index:70;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .16s,transform .16s;overflow:hidden;max-height:min(74vh,520px);overflow-y:auto} .pop.on{opacity:1;pointer-events:auto;transform:translateY(0)} .pop-h{padding:12px 15px;font-weight:600;font-size:12.5px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);display:flex;align-items:center} .pop-a{margin-left:auto;color:var(--accent);font-size:11px;font-weight:500;cursor:pointer;text-decoration:none} .pop-a:hover{text-decoration:underline} .nitem.lida{opacity:.55} #notifl .nitem:not(.lida){background:var(--accent-soft)} /* não lida = destaque teal — SÓ na lista do sino */ .nitem .ndot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;align-self:center;margin-left:4px} .nitem.lida .ndot{visibility:hidden} .nitem{display:flex;gap:11px;align-items:flex-start;padding:11px 15px;border-bottom:1px solid var(--line);cursor:pointer;text-decoration:none;color:var(--ink)} #perfil .nitem{align-items:center} .acc-id{display:flex;gap:11px;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line)} .acc-meta{display:flex;flex-direction:column;min-width:0} .acc-meta>b{font-size:13px;line-height:1.25} .acc-meta>span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px} .acc-papel{margin-top:4px;align-self:flex-start;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:1px 9px;font-size:10.5px;font-weight:700;letter-spacing:.2px} body.dark .acc-papel{background:#17303a} .nitem:hover{background:var(--side-hover)} .nitem .ni{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none} .nitem .ni svg{width:16px;height:16px} .nitem .nt{font-size:12.5px;font-weight:600} .nitem .nd{font-size:11.5px;color:var(--muted);margin-top:1px} .nitem .ntime{font-size:10.5px;color:var(--muted);margin-top:3px} body.dark .nitem .ni{background:#17303a} /* ---- Barra de impersonação (super vendo cliente) ---- */ .impbar{display:flex;align-items:center;gap:8px;background:#12463d;color:#eafaf6;border-radius:10px;padding:9px 14px;margin-bottom:12px;font-size:12.5px} .impbar a{margin-left:auto;color:#fff;font-weight:600;text-decoration:underline;white-space:nowrap} /* ---- Banner de novidade (ann) ---- */ .ann{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,var(--accent-soft),transparent);border:1px solid var(--accent);border-radius:12px;padding:11px 14px;margin-bottom:12px;font-size:12.5px;color:var(--ink)} .ann .ann-tx{flex:1} .ann .ann-x{margin-left:2px;width:26px;height:26px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:7px;font-size:13px} .ann .ann-x:hover{background:rgba(0,0,0,.06)} .btn.light{background:#fff;color:var(--green);border:1px solid var(--line)} body.dark .ann{background:linear-gradient(120deg,#123536,transparent)} body.dark .btn.light{background:#17303a;color:#eaf3f1;border-color:#26454a} /* ---- Primeiros passos (onboarding) ---- */ .onb-h{display:flex;align-items:center;gap:12px;margin-bottom:12px} .onb-bar{flex:1;max-width:230px;margin:0} .onb-list{display:flex;flex-direction:column;gap:8px} .onbi{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:10px} .onbic{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);display:grid;place-items:center;font-size:16px;flex:none} body.dark .onbic{background:#12292b} .onbt{font-size:13px;font-weight:600} .onbd{font-size:11.5px;color:var(--muted);margin-top:1px} .onbi.done{opacity:.7} .onbi.done .onbgo{display:none} .onb-status{margin-left:auto} .onbi.done .onb-status::before{content:'✓ feito';color:var(--good);font-size:11.5px;font-weight:600} /* ---- Assistente (FAB + painel) ---- */ /* ---- barra de abas (módulos abertos como abas, estilo protótipo v15) ---- */ .tabbar{position:sticky;top:0;z-index:6;display:flex;gap:2px;margin:-16px -20px 22px;padding:6px 20px 0;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto} body[data-d="comfy"] .tabbar{margin:-20px -26px 22px;padding:6px 26px 0} .tabbar .tb{display:flex;align-items:center;gap:7px;padding:6px 11px;font-size:12px;color:var(--muted);border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;cursor:pointer;white-space:nowrap;max-width:230px} .tabbar .tb:hover{color:var(--ink)} .tabbar .tb.on{background:var(--bg);color:var(--ink);border-color:var(--line);font-weight:600} .tabbar .tb .tbl{overflow:hidden;text-overflow:ellipsis} .tabbar .tb .x{opacity:.45;font-size:11px;flex:none} .tabbar .tb .x:hover{opacity:1} .fab{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:22px;cursor:pointer;box-shadow:0 12px 30px rgba(14,162,167,.4);z-index:75} .fab:hover{filter:brightness(.96)} .aipanel{position:fixed;right:22px;bottom:86px;width:min(380px,92vw);height:min(520px,74vh);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);z-index:76;display:none;flex-direction:column;overflow:hidden} .aipanel.on{display:flex} .aihead{background:linear-gradient(120deg,#12463d,#0ea2a7);color:#fff;padding:13px 15px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px} .aihead .x{margin-left:auto;cursor:pointer;opacity:.85} .aihead .x:hover{opacity:1} .aibody{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg)} .aibody .msg{max-width:82%;padding:9px 12px;border-radius:12px;font-size:12.7px;line-height:1.45} .aibody .msg.a{background:var(--panel);border:1px solid var(--line);color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px} .aibody .msg.u{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px} .aisug{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;background:var(--bg)} .aisug .s{font-size:11.5px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 10px;cursor:pointer;color:var(--accent)} .aisug .s:hover{border-color:var(--accent)} .aifoot{display:flex;gap:7px;padding:11px 13px;border-top:1px solid var(--line)} .aifoot input{flex:1} /* ---- Hero de boas-vindas (entrada personalizada) ---- */ .hero{position:relative;overflow:hidden;border-radius:var(--radius);padding:24px 26px;color:#fff;background:linear-gradient(135deg,var(--green),var(--accent));margin-bottom:16px} .hero::after{content:'';position:absolute;right:-50px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.09)} .hero::before{content:'';position:absolute;right:60px;bottom:-90px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.06)} .hero>*{position:relative;z-index:1} .hero .greet{font-family:'Space Grotesk',sans-serif;font-size:23px;margin:0;letter-spacing:-.01em} .hero .msg{margin:7px 0 0;max-width:640px;font-size:13px;opacity:.94;line-height:1.55} .hero .hstats{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap} .hero .hstat b{font-family:'Space Grotesk',sans-serif;font-size:23px;line-height:1;display:block} .hero .hstat span{font-size:11px;opacity:.85;display:block;margin-top:4px} .hero .hact{margin-top:18px;display:flex;gap:9px;flex-wrap:wrap} .hero .btn.light{background:#fff;color:var(--green)} .hero .btn.light:hover{filter:brightness(.95)} .hero .btn.line{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.45)} .hero .btn.line:hover{background:rgba(255,255,255,.16)} /* ---- Lançamentos / novidades (discreto, informativo — não é venda) ---- */ .launch{display:flex;gap:13px;align-items:center;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:10px} .launch .li{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none} .launch .li svg{width:20px;height:20px} .launch .lt{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px} .launch .ld{font-size:12px;color:var(--muted);margin-top:2px} .launch .lr{margin-left:auto} .launch a.saiba{color:var(--accent);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap} .launch a.saiba:hover{text-decoration:underline} body.dark .launch .li{background:#17303a} /* controles do cabeçalho somem em telas médias pra não estourar a topbar */ @media(max-width:1080px){ .seg,.ctl{display:none} } /* ---- Responsivo ---- */ @media(max-width:820px){ .app{grid-template-columns:1fr} .sidebar{position:fixed;top:var(--toph);bottom:0;left:0;width:var(--side-w);z-index:40;transform:translateX(-100%);transition:transform .18s} body.drawer .sidebar{transform:translateX(0);box-shadow:0 10px 40px rgba(0,0,0,.3)} .only-mobile{display:grid} .search .ph,.search kbd{display:none} .search{max-width:44px;flex:none;justify-content:center;padding:6px} } /* Item de módulo com tarefa única (menu "solto", sem accordion) */ .dept.flat .dept-btn{text-decoration:none;cursor:pointer} .dept.flat .dept-btn.active{background:var(--side-hover)} .dept.flat .dept-btn.active .nm,.dept.flat .dept-btn.active .ic{color:var(--side-active)} .dept.flat .dept-btn.active .nm{font-weight:600} /* ---- Cartão de atenção (home) -------------------------------------------- Um cartão por módulo, na tela inicial, dizendo se aquele módulo pede atenção hoje. Não é relatório: é a lista do que fazer. Verde não é informação — é permissão para não olhar, e por isso módulo em dia sai da grade e vira uma linha em .emdia. Estrutura:
MÓDULO estado
16 …

…

(opcional)
…
(opcional) ver o Monitor → O ESTADO NUNCA VEM SÓ NA COR: a .pill traz a palavra ("parado", "em atraso", "em dia"). Quem não distingue vermelho de âmbar lê o texto. Não é enfeite. */ .grade-at{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .grade-at .card{margin-bottom:0} /* na grade quem espaça é o gap, não a margin */ @media(max-width:720px){ .grade-at{grid-template-columns:1fr} } .at{display:flex;flex-direction:column} .at .cab{display:flex;align-items:center;gap:9px;margin-bottom:13px} /* o mesmo traço de 26px do .sec h2, na cor do estado — é ele que dá a aresta e diz o estado sem precisar de tarja colorida no cartão inteiro */ .at .mod{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted); margin:0;display:flex;align-items:center;gap:9px;min-width:0;overflow-wrap:anywhere} .at .mod::before{content:'';width:26px;height:2px;flex:none} .at.r .mod::before{background:var(--red)} .at.a .mod::before{background:var(--amber)} .at.g .mod::before{background:var(--good)} .at .pill{margin-left:auto;flex:0 0 auto} .at .miolo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} /* Space Grotesk declarado aqui porque a regra de tipografia do v15.1 lista os elementos por nome (h1,h2,h3,.h1,.kpi .v,…) e um componente novo não está nela. Medido no navegador: sem esta linha o número saía em Archivo. */ .at .v{font-size:34px;line-height:.95;font-family:'Space Grotesk','Archivo',sans-serif; letter-spacing:-.01em} .at.r .v{color:var(--red)} .at.a .v{color:var(--amber)} .at.g .v{color:var(--good)} .at .frase{font-size:13.5px;line-height:1.35} .at .porque{color:var(--muted);font-size:12px;margin:7px 0 0} .at .linhas{margin-top:13px;border-top:1px solid var(--line)} .at .li{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12.5px} .at .li + .li{border-top:1px solid var(--line)} .at .li .d{width:7px;height:7px;border-radius:50%;flex:none} .at .li.r .d{background:var(--red)} .at .li.a .d{background:var(--amber)} .at .li.g .d{background:var(--good)} .at .li .n{flex:1;min-width:0;overflow-wrap:anywhere} .at .li .q{font-family:'Space Grotesk','Archivo',sans-serif;font-size:13.5px} .at .li.r .q{color:var(--red)} .at .li.a .q{color:var(--amber)} .at .li .u{color:var(--muted);font-size:11.5px} /* margin-top:auto empurra o link para o rodapé: como os dois cartões da mesma linha têm a mesma altura, o que sobra no mais curto vira respiro com o link embaixo, em vez de buraco no meio */ .at .ir{margin-top:auto;padding-top:13px;font-size:12.5px;color:var(--accent); text-decoration:none;align-self:flex-start} .at .ir:hover{text-decoration:underline} /* a linha dos que estão em dia, no rodapé da grade */ .emdia{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px; margin-top:12px;border:1px dashed var(--line);border-radius:var(--radius); font-size:12.5px;color:var(--muted)} .emdia b{color:var(--ink);font-weight:500} /* o dia sem nada a fazer. Tela vazia sem explicação parece defeito. */ .calmaria{text-align:center;padding:42px 20px} .calmaria .ic{font-size:30px;line-height:1} .calmaria .tt{font-size:17px;margin:12px 0 5px;font-family:'Space Grotesk','Archivo',sans-serif} .calmaria p{margin:0;color:var(--muted);font-size:13px} /* esqueleto enquanto o cartão carrega — cada um busca o seu, em paralelo */ .at.carregando .v,.at.carregando .frase{background:var(--line);color:transparent; border-radius:6px;animation:pulsa 1.2s ease-in-out infinite} .at.carregando .frase{display:inline-block;min-width:170px} @keyframes pulsa{0%,100%{opacity:.55}50%{opacity:.95}} /* ═══════════ IMPRESSÃO — o que é do painel não vai para o papel ═══════════ ⚠ REGRA DE TODO MÓDULO, NUM LUGAR SÓ (15/09/2026). O PDF do relatório do Simples/Híbrido saiu com a barra de abas do topo, o aviso de "você está vendo como super-admin" e o botão flutuante do assistente: cada módulo escondia o que lembrava (o Simples/Híbrido escondia topbar e sidebar, e só). Módulo nenhum precisa repetir isto — o que é dele, ele esconde na folha de estilo dele. */ @page{size:A4;margin:14mm 12mm} @media print{ html,body{background:#fff!important} .topbar,.sidebar,.tabbar,.impbar,.fab,.toast,#dlgBg{display:none!important} /* ⚠ SEM `!important` AQUI (16/09/2026): a tela que monta a própria folha — como o espelho de ponto — esconde `body > *` e precisa vencer esta regra. Com `!important`, o painel inteiro voltava e a lista saía impressa. */ .app{display:block} .main{padding:0;max-width:none} .card,.kpi{box-shadow:none!important} /* linha órfã no pé da página é o que mais estraga um relatório impresso */ p,li,td,blockquote{orphans:3;widows:3} a[href]{color:inherit;text-decoration:none} }