/* LEAD4B OS - Design system (cores oficiais do Manual de Normas Gráficas LEAD4B) */ :root{ color-scheme: light; /* faz o browser desenhar selects/options/scrollbars/date em modo claro */ --navy:#0A2F4B; /* primária - HEX oficial 0A2F4B (RGB 10/47/75) */ --navy-700:#0c3858; --navy-600:#16466a; --blue:#38618E; /* azul médio oficial - 38618E (RGB 56/97/142) - ação */ --blue-600:#2f5479; --blue-50:#eaf1f8; --blue-bright:#5087C7; /* azul claro oficial - 5087C7 (RGB 80/135/199) */ --gold:#5087C7; /* (sem dourado na marca: destaque = azul claro oficial) */ --gold-50:#e9f0f9; --bg:#F5F7FA; --surface:#FFFFFF; --line:#E5E9F0; --text:#1A2733; --muted:#5B6B7B; --green:#2E7D32; --green-50:#e7f3e8; --amber:#B7791F; --amber-50:#fbf1dd; --red:#C62828; --red-50:#fbe6e6; /* Tokens de badge/chip - contraste AA garantido em ambos os temas */ --bdg-green-bg:#e0f0e2; --bdg-green-fg:#1c6024; --bdg-amber-bg:#fbeecf; --bdg-amber-fg:#855107; --bdg-red-bg:#fbe0e0; --bdg-red-fg:#a51d1d; --bdg-blue-bg:#e6eff8; --bdg-blue-fg:#27517d; --bdg-gray-bg:#eef1f5; --bdg-gray-fg:#516274; --bdg-gold-bg:#e3edfa; --bdg-gold-fg:#1f4f86; /* "gold" da marca = destaque azul (sem dourado) */ --link:#2f5479; /* cor de links - adaptada por tema */ /* cores semânticas para TEXTO (health, deltas, %) com contraste AA nos dois temas */ --c-green:#1f7a34; --c-amber:#8a5a06; --c-red:#b32020; /* série de gráfico (donut de segmentos) - visível em ambos os temas */ --seg-1:#0A2F4B; --seg-2:#38618E; --seg-3:#5087C7; --radius:12px; --radius-sm:8px; --shadow:0 1px 2px rgba(10,47,75,.06), 0 4px 16px rgba(10,47,75,.07); --shadow-sm:0 1px 2px rgba(10,47,75,.08); --sidebar-w:248px; /* Fonte da UI = fonte NATIVA do sistema (Segoe UI no Windows): hinting nativo + ClearType, nitida e com corpo em qualquer tema. Evita o render fraco/cintilante das web fonts (Montserrat) no Windows, relatado pelo Rodrigo em claro e escuro. O wordmark/logo e imagem oficial. */ --font:"Segoe UI",system-ui,-apple-system,"Roboto","Helvetica Neue",Arial,sans-serif; --font-brand:"Segoe UI",system-ui,-apple-system,"Roboto","Helvetica Neue",Arial,sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--font);color:var(--text);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{margin:0;color:var(--navy);font-weight:700;line-height:1.25} h1{font-size:22px} h2{font-size:17px} h3{font-size:14px} p{margin:0} button{font-family:inherit;cursor:pointer} /* ---------- Foco visível por teclado (a11y) ---------- */ .skip-link{position:fixed;top:-60px;left:12px;z-index:100;background:var(--blue);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;font-size:13px;box-shadow:var(--shadow);transition:top .15s} .skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px;text-decoration:none} :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px} .nav a:focus-visible{outline:2px solid #fff;outline-offset:-2px} .topbar .search input:focus-visible,.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible, .filters input:focus-visible,.filters select:focus-visible,.cop-input input:focus-visible,.profile-sel:focus-visible{outline:2px solid var(--blue);outline-offset:1px} tr.clickable:focus-visible,.kcard:focus-visible,.feed-item:focus-visible,.orgnode:focus-visible, .sr-item:focus-visible,.np-item:focus-visible,.login-prof:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:8px} /* ---------- Layout ---------- */ .app{display:flex;min-height:100vh} .sidebar{width:var(--sidebar-w);background:var(--navy);color:#cdd8e3;flex-shrink:0;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:30} .main{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column} .content{padding:24px 28px;max-width:1320px;width:100%} /* ---------- Sidebar ---------- */ .brand{display:flex;align-items:center;gap:11px;padding:20px 18px 16px} .sidebar-close{display:none;margin-left:auto;background:transparent;border:0;color:#9fb3c6;font-size:16px;cursor:pointer;width:32px;height:32px;border-radius:8px} .sidebar-close:hover{background:var(--navy-600);color:#fff} .sidebar-foot{display:none;padding:10px 16px;border-top:1px solid var(--navy-600);gap:8px;align-items:center} .sidebar-foot .profile-sel{flex:1;max-width:none;background:var(--navy-600);border-color:var(--navy-600);color:#e7eef5} .sidebar-foot .logout-btn{background:transparent;border-color:var(--navy-600);color:#b8c6d4} .sidebar-foot .logout-btn:hover{color:#fff;border-color:var(--blue)} /* menu mobile (hambúrguer) + overlay */ .menu-btn{display:none;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:9px;width:40px;height:40px;font-size:18px;cursor:pointer;flex-shrink:0} .menu-btn:hover{background:var(--bg)} .scrim{position:fixed;inset:0;background:rgba(8,24,42,.55);z-index:25;border:0;animation:scrimIn .18s ease} .scrim[hidden]{display:none} @keyframes scrimIn{from{opacity:0}to{opacity:1}} .logo-mark{width:38px;height:38px;flex-shrink:0} .brand-logo{height:38px;width:auto;max-width:190px;flex-shrink:0;display:block} .brand .name{color:#fff;font-weight:700;font-size:19px;letter-spacing:.5px;font-family:var(--font-brand);line-height:1} .brand .os{font-size:8.5px;color:#9fb3c6;letter-spacing:3px;text-transform:uppercase;margin-top:3px;font-weight:500} .nav{padding:8px 12px;overflow-y:auto;flex:1} .nav .group{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#5f7790;margin:16px 12px 6px} .nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;color:#b8c6d4;font-weight:500;margin:2px 0;font-size:13.5px} .nav a:hover{background:var(--navy-600);color:#fff;text-decoration:none} .nav a.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(56,97,142,.4)} .nav a .ic{width:18px;text-align:center;font-size:15px;opacity:.9} .sidebar .partner{margin:10px 16px 16px;padding:10px 12px;border:1px solid var(--navy-600);border-radius:10px;display:flex;align-items:center;gap:9px} .sidebar .partner .dot{width:8px;height:8px;border-radius:50%;background:var(--blue-bright);box-shadow:0 0 0 3px rgba(80,135,199,.25)} .sidebar .partner small{color:#b3c2d2;font-size:11px;line-height:1.3} .sidebar .partner b{color:var(--blue-bright)} /* ---------- Topbar ---------- */ .topbar{height:60px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 28px;position:sticky;top:0;z-index:20} .topbar .crumb{font-size:13px;color:var(--muted)} .topbar .crumb b{color:var(--navy)} .topbar .search{flex:1;max-width:420px;position:relative} .topbar .search input{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:9px 12px 9px 34px;font-size:13px;color:var(--text)} .topbar .search input:focus{outline:none;border-color:var(--blue);background:#fff} .topbar .search .si{position:absolute;left:11px;top:8px;color:var(--muted)} .topbar .spacer{flex:1} .btn-copilot{display:flex;align-items:center;gap:7px;background:var(--navy);color:#fff;border:none;padding:9px 14px;border-radius:9px;font-weight:600;font-size:13px} .btn-copilot:hover{background:var(--navy-700)} .btn-copilot .sp{color:var(--gold)} .user{display:flex;align-items:center;gap:9px} .user .av{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px} .user .meta{line-height:1.15} .user .meta b{display:block;font-size:13px;color:var(--navy)} .user .meta small{color:var(--muted);font-size:11px} /* ---------- Cards / grid ---------- */ .page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;gap:16px;flex-wrap:wrap} .page-head .sub{color:var(--muted);font-size:13px;margin-top:4px} .grid{display:grid;gap:16px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px} .card.pad0{padding:0;overflow:hidden} .card h3{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;margin-bottom:12px} .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .card-head h3{margin:0} /* KPI cards */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;position:relative;overflow:hidden} .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue)} .kpi.gold::before{background:var(--gold)} .kpi.green::before{background:var(--green)} .kpi.red::before{background:var(--red)} .kpi .label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600} .kpi .val{font-size:26px;font-weight:800;color:var(--navy);margin:6px 0 2px} .kpi .delta{font-size:12px;font-weight:600} .kpi .delta.up{color:var(--c-green)} .kpi .delta.down{color:var(--c-red)} .kpi .foot{font-size:11.5px;color:var(--muted)} /* ---------- Tables ---------- */ .table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} @media(min-width:560px){.table-wrap>table{min-width:460px}} table{width:100%;border-collapse:collapse;font-size:13px} thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line);background:#fafbfd} tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr.clickable{cursor:pointer} tbody tr.clickable:hover{background:var(--blue-50)} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} /* ---------- Badges / chips ---------- */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap} .badge .d{width:7px;height:7px;border-radius:50%;flex-shrink:0} .badge.wrap{white-space:normal;line-height:1.35;align-items:flex-start;text-align:left} .badge.wrap .d{margin-top:5px} .b-green{background:var(--bdg-green-bg);color:var(--bdg-green-fg)} .b-green .d{background:var(--bdg-green-fg)} .b-amber{background:var(--bdg-amber-bg);color:var(--bdg-amber-fg)} .b-amber .d{background:var(--bdg-amber-fg)} .b-red{background:var(--bdg-red-bg);color:var(--bdg-red-fg)} .b-red .d{background:var(--bdg-red-fg)} .b-blue{background:var(--bdg-blue-bg);color:var(--bdg-blue-fg)} .b-blue .d{background:var(--bdg-blue-fg)} .b-gray{background:var(--bdg-gray-bg);color:var(--bdg-gray-fg)} .b-gray .d{background:var(--bdg-gray-fg)} .b-gold{background:var(--bdg-gold-bg);color:var(--bdg-gold-fg)} .b-gold .d{background:var(--bdg-gold-fg)} .chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--bdg-gray-bg);color:var(--bdg-gray-fg)} .chip.area{background:var(--bdg-blue-bg);color:var(--bdg-blue-fg)} /* landscape dots */ .land{display:inline-flex;align-items:center;gap:5px;font-size:12px} .land .b{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line);background:#fff} .land .b.on{background:var(--green);border-color:var(--green)} .land .b.plan{background:var(--amber);border-color:var(--amber)} .land .b.exp{background:var(--blue);border-color:var(--blue)} /* health bar */ .health{display:flex;align-items:center;gap:8px} .health .bar{flex:1;height:7px;border-radius:4px;background:#eef1f5;overflow:hidden;min-width:60px} .health .bar i{display:block;height:100%;border-radius:4px} .health b{font-variant-numeric:tabular-nums;font-size:13px} /* avatars */ .av-sm{width:26px;height:26px;border-radius:50%;background:var(--navy-600);color:#fff;display:inline-grid;place-items:center;font-size:10.5px;font-weight:700} .av-row{display:flex;align-items:center;gap:2px} .av-stack{display:flex} .av-stack .av-sm{margin-left:-7px;border:2px solid #fff} .av-stack .av-sm:first-child{margin-left:0} /* buttons */ .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--navy);padding:8px 13px;border-radius:8px;font-weight:600;font-size:13px} .btn:hover{background:var(--bg)} .btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)} .btn.primary:hover{background:var(--blue-600)} .btn.ghost{border-color:transparent;background:transparent;color:var(--blue)} .btn.danger{color:var(--red);border-color:#f0c4c4} .btn.danger:hover{background:var(--red-50)} .icon-btn{border:1px solid var(--line);background:#fff;border-radius:7px;width:30px;height:30px;cursor:pointer;font-size:13px;color:var(--muted);margin-left:4px} .icon-btn:hover{border-color:var(--blue);color:var(--blue)} .icon-btn.danger:hover{border-color:var(--red);color:var(--red)} .ms-check{border:none;background:transparent;font-size:17px;cursor:pointer;padding:0;line-height:1} /* progress */ .prog{height:8px;border-radius:5px;background:#eef1f5;overflow:hidden} .prog i{display:block;height:100%;background:var(--blue);border-radius:5px} /* ---------- Charts (SVG/CSS puros) ---------- */ .bars{display:flex;align-items:flex-end;gap:7px;height:140px;padding-top:6px} .bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end} .bars .col .bw{width:100%;max-width:26px;background:var(--blue);border-radius:4px 4px 0 0;transition:.2s} .bars .col .lbl{font-size:10px;color:var(--muted)} .areabars{display:flex;flex-direction:column;gap:11px} .areabars .row{display:grid;grid-template-columns:150px 1fr 96px;align-items:center;gap:10px;font-size:12.5px} .areabars .track{height:18px;background:#eef1f5;border-radius:5px;overflow:hidden;position:relative} .areabars .track i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#3b90ee);border-radius:5px} .areabars .g{font-weight:600;text-align:right;font-variant-numeric:tabular-nums} .areabars .g.up{color:var(--c-green)} .areabars .g.down{color:var(--c-red)} /* line chart wrap */ .linewrap{width:100%} .linewrap svg{width:100%;height:auto;display:block} /* funnel */ .funnel{display:flex;flex-direction:column;gap:9px;padding-top:4px} .frow{display:grid;grid-template-columns:84px 1fr auto;align-items:center;gap:9px;font-size:12px} .frow .flbl{color:var(--muted)} .fbar-wrap{background:#eef1f5;border-radius:5px;height:20px;overflow:hidden} .fbar{height:100%;background:linear-gradient(90deg,var(--navy),var(--blue));border-radius:5px} .frow .fval{font-variant-numeric:tabular-nums;font-weight:600;color:var(--navy);font-size:11.5px;white-space:nowrap} /* comparativo (atual vs homólogo) */ .cmp{display:flex;flex-direction:column;gap:11px} .crow{display:grid;grid-template-columns:120px 1fr 54px;align-items:center;gap:10px;font-size:12px} .crow .clbl{color:var(--muted)} .cbars{display:flex;flex-direction:column;gap:4px} .cbar{display:flex;align-items:center;gap:7px} .cb{height:11px;border-radius:3px;min-width:3px} .cb-now{background:var(--blue)} .cb-prev{background:#c5d2e2} .cbar span{font-size:10.5px;font-variant-numeric:tabular-nums} .cdelta{font-weight:700;text-align:right;font-size:11.5px} .cdelta.up{color:var(--c-green)} .cdelta.down{color:var(--c-red)} .lgd{display:inline-block;width:11px;height:9px;border-radius:2px;vertical-align:middle;margin-right:3px} /* swatches da marca */ .swatches{display:flex;gap:16px;flex-wrap:wrap} .swatch{display:flex;gap:11px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:12px;min-width:210px} .swatch .sw{width:54px;height:54px;border-radius:10px;flex-shrink:0;border:1px solid rgba(0,0,0,.06)} /* próxima melhor ação */ .nba{border-left:4px solid var(--blue);background:linear-gradient(90deg,var(--blue-50),#fff 60%)} /* donut */ .donut{display:flex;align-items:center;gap:14px} .donut-leg{display:flex;flex-direction:column;gap:6px;font-size:12px} .donut-leg>div{display:flex;align-items:center;gap:7px;color:var(--muted)} .donut-leg .dot{width:10px;height:10px;border-radius:3px} .donut-leg b{color:var(--navy)} /* ---------- Insight banner ---------- */ .insight{display:flex;align-items:flex-start;gap:12px;background:linear-gradient(110deg,var(--navy),var(--navy-700));color:#e7eef5;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)} .insight .sp{font-size:20px;color:#8fbdf0;flex-shrink:0} .insight b{color:#fff} .insight a{color:#8fbdf0;font-weight:600} .insight .ai-tag{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#8fbdf0;font-weight:700;display:block;margin-bottom:3px} /* ---------- Account 360 ---------- */ .acct-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .acct-head .title{display:flex;align-items:center;gap:14px} .acct-head .ico{width:48px;height:48px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px} .meta-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:6px} .meta-row .m{font-size:12px;color:var(--muted)} .meta-row .m b{color:var(--text);font-size:13px;display:block} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-2{grid-template-columns:repeat(2,1fr)} .list-clean{list-style:none;margin:0;padding:0} .list-clean li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px} .list-clean li:last-child{border-bottom:none} .list-clean li .grow{flex:1;min-width:0} .muted{color:var(--muted)} .tiny{font-size:11.5px} .right{margin-left:auto} /* org chart */ .org{display:flex;flex-direction:column;gap:8px} .org .node{border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:#fff;display:flex;align-items:center;gap:10px} .org .lv1{margin-left:0} .org .lv2{margin-left:26px} .org .lv3{margin-left:52px} .org .node small{color:var(--muted)} /* ---------- Copilot ---------- */ .copilot{display:flex;flex-direction:column;height:calc(100vh - 60px)} .cop-stream{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:16px} .msg{max-width:760px} .msg.me{align-self:flex-end} .msg .bubble{padding:13px 16px;border-radius:14px;font-size:14px} .msg.me .bubble{background:var(--blue);color:#fff;border-bottom-right-radius:4px} .msg.ai .bubble{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)} .msg.ai .who{font-size:11px;font-weight:700;color:var(--navy);letter-spacing:.5px;margin-bottom:6px;display:flex;align-items:center;gap:6px} .msg.ai .who .sp{color:var(--gold)} .msg .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .cop-suggest{display:flex;gap:8px;flex-wrap:wrap;padding:0 28px 12px} .cop-suggest .s{font-size:12.5px;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:7px 13px;color:var(--text)} .cop-suggest .s:hover{border-color:var(--blue);color:var(--link)} /* indicador de atividade (loading do Copilot) */ .typing{display:inline-flex;gap:5px;align-items:center} .typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);display:inline-block;animation:typing 1s infinite ease-in-out} .typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s} @keyframes typing{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} @media (prefers-reduced-motion: reduce){.typing i{animation:none}} .cop-input{display:flex;gap:10px;padding:14px 28px;border-top:1px solid var(--line);background:#fff} .cop-input input{flex:1;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px} .cop-input input:focus{outline:none;border-color:var(--blue)} .ai-table{font-size:13px;margin-top:8px;border:1px solid var(--line);border-radius:8px;overflow:hidden} /* filter bar */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .filters select,.filters input{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 11px;font-size:13px;color:var(--text)} .filters select:focus,.filters input:focus{outline:none;border-color:var(--blue)} /* pipeline kanban */ .kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start} .kcol{background:#eef1f5;border-radius:12px;padding:10px} .kcol h4{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:10px;padding:2px 4px} .kcard{background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px;margin-bottom:9px;box-shadow:var(--shadow-sm);cursor:grab} .kcard:hover{border-color:var(--blue)} .kcard:active{cursor:grabbing} .kcol.drop{background:var(--blue-50);outline:2px dashed var(--blue);outline-offset:-3px} .kcard .nm{font-weight:600;font-size:13px;color:var(--navy);margin-bottom:5px;line-height:1.3} .kcard .row{display:flex;align-items:center;justify-content:space-between;margin-top:7px} .kcard .amt{font-weight:700;color:var(--navy)} /* skill matrix */ .matrix td.lvl{text-align:center;font-weight:700} .dotlvl{display:inline-flex;gap:3px} .dotlvl i{width:8px;height:8px;border-radius:2px;background:#dfe5ec} .dotlvl i.on{background:var(--blue)} .gap-tag{background:var(--bdg-red-bg);color:var(--bdg-red-fg);font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px} /* misc */ .section-title{display:flex;align-items:center;gap:8px;margin:26px 0 12px;color:var(--navy);font-weight:700;font-size:15px} .back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;margin-bottom:12px;cursor:pointer} .back:hover{color:var(--blue)} .split{display:grid;grid-template-columns:1.6fr 1fr;gap:16px} .note-banner{background:var(--bdg-amber-bg);border:1px solid #ecd09a;color:var(--bdg-amber-fg);border-radius:10px;padding:10px 14px;font-size:12.5px;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;overflow-wrap:anywhere;min-width:0} /* profile selector (RBAC) */ .profile-sel{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:7px 9px;font-size:12px;color:var(--navy);font-weight:600;cursor:pointer;max-width:160px} .profile-sel:focus{outline:none;border-color:var(--blue)} /* global search results */ .search-results{position:absolute;top:44px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:420px;overflow-y:auto;z-index:40;padding:6px} .search-results[hidden]{display:none} .sr-group{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700;padding:8px 10px 4px} .sr-item{padding:8px 10px;border-radius:7px;cursor:pointer;display:flex;flex-direction:column;gap:1px} .sr-item:hover{background:var(--blue-50)} .sr-item b{font-size:13px;color:var(--navy)} .sr-item small{font-size:11.5px;color:var(--muted)} .sr-empty{padding:14px;font-size:13px;color:var(--muted)} .sr-empty a{cursor:pointer} /* notifications */ .bell-wrap{position:relative} .bell-btn{position:relative;border:1px solid var(--line);background:#fff;border-radius:9px;width:38px;height:38px;font-size:15px;cursor:pointer} .bell-btn:hover{background:var(--bg)} .bell-dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px} .notif-panel{position:absolute;top:46px;right:0;width:340px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:40;max-height:440px;overflow-y:auto;padding:6px} .notif-panel[hidden]{display:none} .np-head{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700;padding:9px 12px 6px} .np-item{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:8px;cursor:pointer} .np-item:hover{background:var(--blue-50)} .np-ic{font-size:15px;line-height:1.3} .np-item b{font-size:12.5px;color:var(--navy);display:block;line-height:1.3} .np-item small{font-size:11px;color:var(--muted)} .np-empty{padding:18px 12px;text-align:center;color:var(--muted);font-size:13px} .np-item .grow{flex:1;min-width:0} /* Inteligência proativa - Briefing */ .bsec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap} .bsec-head h3{margin:0;display:flex;align-items:center;gap:8px} .ai-pill{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--blue);color:#fff;font-size:12px;flex-shrink:0} .brief-list{display:flex;flex-direction:column} .brief-row{align-items:flex-start;border-left:3px solid transparent;border-radius:0;padding:11px 14px} .brief-row+.brief-row{border-top:1px solid var(--line)} .brief-row.sev-critical{border-left-color:var(--c-red)} .brief-row.sev-warning{border-left-color:var(--c-amber)} .brief-row.sev-opportunity{border-left-color:var(--blue)} .brief-row.sev-info{border-left-color:var(--line)} .brief-row .bact{display:block;margin-top:3px;color:var(--link);font-size:11px;line-height:1.35;overflow-wrap:anywhere} .brief-row .bval{align-self:center;flex-shrink:0;font-size:11px;font-weight:700;background:var(--bdg-gray-bg);color:var(--bdg-gray-fg);border-radius:6px;padding:3px 9px;white-space:nowrap} .rec-list{margin:0;padding:0;list-style:none;counter-reset:rec} .rec-list li{counter-increment:rec;display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-top:1px solid var(--line)} .rec-list li:first-child{border-top:0} .rec-list li::before{content:counter(rec);flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:1px} .rec-list li .grow{flex:1;min-width:0} .rec-team{display:flex;flex-direction:column;gap:8px} .rec-team .rt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--bg)} .rec-team .rt .grow{flex:1;min-width:0} .rec-team .rt-tags{margin-top:4px;display:flex;gap:5px;flex-wrap:wrap} /* logout + reset */ .logout-btn{border:1px solid var(--line);background:#fff;color:var(--muted);width:32px;height:32px;border-radius:8px;font-size:14px;cursor:pointer} .logout-btn:hover{color:var(--red);border-color:var(--red)} .reset-link{margin:0 16px 14px;background:transparent;border:1px dashed var(--navy-600);color:#7e94aa;border-radius:8px;padding:7px;font-size:11.5px;cursor:pointer} .reset-link:hover{color:#fff;border-color:var(--blue)} body.no-chrome .sidebar,body.no-chrome .topbar{display:none} body.no-chrome .main{margin-left:0} /* login */ .login{position:fixed;inset:0;background:linear-gradient(135deg,var(--navy),#06121f);display:grid;place-items:center;z-index:60;padding:20px} .login-card{background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.4);padding:34px;width:100%;max-width:460px} .login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px} .login-logo{height:54px;width:auto;max-width:300px;display:block} .login-brand .name{font-weight:700;font-size:23px;color:var(--navy);letter-spacing:.5px;font-family:var(--font-brand);line-height:1} .login-brand .os{font-size:9px;color:var(--muted);letter-spacing:2.5px;text-transform:uppercase;margin-top:3px;font-weight:500} .login h1{font-size:20px} .login-profiles{display:flex;flex-direction:column;gap:9px;margin-bottom:18px} .login-prof{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:11px;padding:12px 14px;cursor:pointer;transition:.15s} .login-prof:hover{border-color:var(--blue);background:var(--blue-50);transform:translateY(-1px)} .login-prof .av{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px} .login-prof b{display:block;font-size:14px;color:var(--navy)}.login-prof small{color:var(--muted);font-size:12px} .login-prof .arrow{margin-left:auto;color:var(--blue);font-size:18px} .login-foot{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px} .login-foot .dot{width:8px;height:8px;border-radius:50%;background:var(--blue-bright)}.login-foot b{color:var(--blue-600)} /* Gate de código de acesso (pré-visualização privada) */ .gate-form{display:flex;flex-direction:column;gap:10px;margin-bottom:18px} .gate-lbl{font-size:12.5px;font-weight:600;color:var(--navy)} .gate-input{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--navy);background:#fff;transition:.15s} .gate-input::placeholder{color:var(--muted)} .gate-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)} .gate-input.invalid{border-color:var(--c-red);box-shadow:0 0 0 3px rgba(197,48,48,.12)} .gate-err{color:var(--c-red);font-size:12.5px;margin:2px 0 0} .gate-btn{justify-content:center;width:100%;padding:12px;margin-top:2px} /* modal */ #modalHost:empty{display:none} .modal-back{position:fixed;inset:0;background:rgba(11,31,51,.5);display:grid;place-items:center;z-index:70;padding:20px} .modal{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)} .modal-head h2{font-size:16px} .modal-x{border:none;background:transparent;font-size:16px;color:var(--muted);cursor:pointer} .modal-x:hover{color:var(--navy)} .modal-body{padding:18px 20px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:13px} .modal-foot{display:flex;justify-content:flex-end;gap:9px;padding:14px 20px;border-top:1px solid var(--line)} .fld{display:flex;flex-direction:column;gap:5px;font-size:12px} .fld:first-child,.fld.full{grid-column:1 / -1} .fld>span{color:var(--muted);font-weight:600} .fld input,.fld select,.fld textarea{border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:13px;font-family:inherit;color:var(--text);background:#fff} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue)} .fld textarea{grid-column:1 / -1;resize:vertical} .fld .invalid,.invalid{border-color:var(--red) !important;background:var(--red-50)} /* toast */ #toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:11px 20px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:80} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* organograma interativo */ .orgtree{overflow-x:auto;padding:6px 2px} .orgtree ul{list-style:none;margin:0;padding:18px 0 0;display:flex;justify-content:center;gap:14px;position:relative} .orgtree li{position:relative;padding:18px 8px 0;display:flex;flex-direction:column;align-items:center} .orgtree li::before,.orgtree li::after{content:"";position:absolute;top:0;height:18px;width:50%;border-top:2px solid var(--line)} .orgtree li::before{left:0;border-right:2px solid var(--line)} .orgtree li::after{right:0} .orgtree li:only-child::before,.orgtree li:only-child::after{display:none} .orgtree li:first-child::before,.orgtree li:last-child::after{border:0} .orgtree li:last-child::before{border-right:2px solid var(--line)} .orgtree ul ul::before{content:"";position:absolute;top:0;left:50%;height:18px;border-left:2px solid var(--line)} .orgtree > ul{padding-top:0} .orgtree > ul > li{padding-top:0} .orgtree > ul > li::before,.orgtree > ul > li::after{display:none} .orgnode{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:var(--surface);box-shadow:var(--shadow-sm);min-width:190px;max-width:230px} .orgnode[onclick]{cursor:pointer} .orgnode[onclick]:hover{border-color:var(--blue)} .orgnode b{font-size:13px;color:var(--navy);display:block;line-height:1.2} .orgnode small{font-size:11px;color:var(--muted)} .orgnode .grow{min-width:0} .orgtog{font-size:11px;color:var(--blue);font-weight:700;white-space:nowrap} /* feed de atividade */ .feed{display:flex;flex-direction:column} .feed-item{display:flex;align-items:flex-start;gap:12px;padding:11px 6px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:8px} .feed-item:last-child{border-bottom:none} .feed-item:hover{background:var(--blue-50)} .feed-ic{font-size:17px;line-height:1.2;width:22px;text-align:center} .feed-item b{font-size:13px;color:var(--navy);display:block;line-height:1.3} /* print header (só visível na impressão) */ .print-header{display:none} /* ---------- Tema escuro (fiel à marca - navy) ---------- */ body.dark{ color-scheme: dark; /* selects/options/scrollbars/date pickers nativos em modo escuro */ --bg:#08182a; --surface:#0f2942; --line:#1d3d59; --text:#e7eef5; --muted:#b2c4d6; --blue-50:#143553; --gold-50:#143553; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.35); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --green-50:#13301a; --amber-50:#332811; --red-50:#3a1a1a; /* Badges/chips no escuro: texto claro sobre fundo escuro (AA) */ --bdg-green-bg:#16331c; --bdg-green-fg:#86d690; --bdg-amber-bg:#3a2e10; --bdg-amber-fg:#f0c673; --bdg-red-bg:#3d1a1a; --bdg-red-fg:#f5a8a8; --bdg-blue-bg:#173656; --bdg-blue-fg:#94c4f2; --bdg-gray-bg:#1d3a57; --bdg-gray-fg:#aec3d8; --bdg-gold-bg:#15395c; --bdg-gold-fg:#86baee; --link:#7db4ec; --c-green:#6ed47b; --c-amber:#e6b450; --c-red:#f08a8a; --seg-1:#6aa0d8; --seg-2:#4f86c4; --seg-3:#9cc4ee; } /* dark: dar corpo ao texto secundario pequeno (texto fino e claro sobre o escuro fica fraco e a cintilar) */ body.dark .muted,body.dark .kpi .foot,body.dark .kpi .label,body.dark .page-head .sub,body.dark small,body.dark .tiny,body.dark .meta-row .m,body.dark .frow .flbl,body.dark .crow .clbl,body.dark .donut-leg>div,body.dark .np-item small,body.dark .sr-item small,body.dark .login-foot,body.dark .topbar .crumb{font-weight:500} body.dark .topbar{background:var(--surface);border-bottom-color:var(--line)} body.dark .topbar .search input{background:#0a2138;border-color:var(--line);color:var(--text)} body.dark thead th{background:#0c2236;color:var(--muted)} body.dark .kcol{background:#0a2138} body.dark .kcard{background:var(--surface);border-color:var(--line)} body.dark .kcard .nm,body.dark .kcard .amt{color:var(--text)} body.dark .fld input,body.dark .fld select,body.dark .fld textarea,body.dark .filters input,body.dark .filters select,body.dark .profile-sel,body.dark .cop-input input{background:#0a2138;border-color:var(--line);color:var(--text)} /* fallback p/ Firefox/WebViews que ignoram color-scheme: