/* ============================================================ KinGpan · CSS PADRÃO Design system base — usado por TODAS as páginas Fontes: Hanken Grotesk (texto) + JetBrains Mono (números) ============================================================ */ :root{ /* ---- Tipografia ---- */ --kg-font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --kg-mono: 'JetBrains Mono', ui-monospace, monospace; /* ---- Superfícies / neutros ---- */ --kg-app: #EBEDF1; /* fundo app */ --kg-bg: #FBFBFC; /* fundo conteúdo */ --kg-surface: #ffffff; /* cards */ --kg-dark: #13161D; /* cards escuros / painéis */ --kg-ink: #11151C; /* texto principal */ --kg-ink-2: #6B7484; /* texto secundário */ --kg-ink-3: #9AA3B2; /* texto muted / placeholder */ --kg-ink-4: #AEB6C2; /* labels de tabela */ --kg-line: #ECEEF2; /* borda card */ --kg-line-2: #EEF0F4; /* divisórias */ --kg-line-3: #E6E9EF; /* borda input */ --kg-row: #FAFBFC; /* hover de linha */ --kg-scroll: #CDD3DC; /* barra de rolagem */ --kg-neutral-tint: #F1F3F6; /* selo/chip sem cor */ /* Papel do cupom do pedido: branco levemente quente, como bobina térmica */ --kg-papel: #FFFDF6; --kg-papel-tinta: #23282F; --kg-papel-linha: #C6C9CF; color-scheme: light; /* ---- Cores de marca / status ---- */ --kg-primary: #3B5BDB; --kg-primary-600:#3450C4; --kg-primary-tint:#EEF1FE; --kg-primary-line:#D9E0FB; --kg-success: #1F9D6B; --kg-success-ink:#157C53; --kg-success-tint:#E7F6EF; --kg-teal: #0E9F8E; --kg-teal-tint:#E4F6F2; --kg-amber: #DE8A1E; --kg-amber-ink:#B57A12; --kg-amber-tint:#FBF3E3; --kg-violet: #7C5BE8; --kg-violet-tint:#F1ECFB; --kg-danger: #E1574A; --kg-danger-600:#CF4636; --kg-danger-ink:#C0392B; --kg-danger-tint:#FCEDEB; --kg-indigo: #6E86FF; --kg-sky: #2F86C5; --kg-sky-tint:#EAF4FB; --kg-pink: #EC5B8A; --kg-pink-tint:#FBEFF5; /* ---- Raios ---- */ --kg-r-lg: 18px; --kg-r-md: 13px; --kg-r-sm: 11px; --kg-r-xs: 9px; /* ---- Sombras ---- */ --kg-shadow-card: 0 1px 2px rgba(17,21,28,.03); --kg-shadow-pop: 0 16px 32px -20px rgba(17,21,28,.40); --kg-shadow-btn: 0 6px 16px -6px rgba(59,91,219,.55); --kg-shadow-frame:0 1px 2px rgba(17,21,28,.04), 0 30px 70px -38px rgba(17,21,28,.30); } /* ------------------------------------------------------------------ Tema escuro ------------------------------------------------------------------ So troca token: as regras dos componentes ja leem tudo de var(--kg-*). Nao mexe nas cores de marca (primary, success, amber...) -- elas identificam estado e valem nos dois temas; o que muda sao os neutros e os tints, que no claro sao pastel e aqui viram fundos escuros da propria cor. O tema fica em data-tema no , escolhido no menu do usuario e guardado no navegador. Sem escolha, segue o sistema operacional. Fora do tema, de proposito: a etiqueta (sempre impressa em papel branco), o cartao de impressao do pedido, e as telas de login e bloqueio, que tem arte propria com foto. ------------------------------------------------------------------ */ :root[data-tema="escuro"]{ color-scheme: dark; --kg-app: #0C1017; --kg-bg: #10151D; --kg-surface: #171D26; --kg-dark: #0A0E14; --kg-ink: #E8EBF0; --kg-ink-2: #A7B0BF; --kg-ink-3: #7B8698; --kg-ink-4: #69748A; --kg-line: #242C38; --kg-line-2: #1E252F; --kg-line-3: #2C3540; --kg-row: #1C232E; --kg-scroll: #39424F; --kg-neutral-tint: #242C38; /* O cupom nao vira papel branco no escuro: cegaria dentro do modal. */ --kg-papel: #1B2129; --kg-papel-tinta: #D5DAE2; --kg-papel-linha: #3B4551; /* Tints: a cor da marca sobre o fundo escuro, nao o pastel do claro. */ --kg-primary-tint: #1B2547; --kg-primary-line: #2C3A6B; --kg-success-tint: #12291F; --kg-teal-tint: #0F2723; --kg-amber-tint: #2B2113; --kg-violet-tint: #211A38; --kg-danger-tint: #2E1A18; --kg-sky-tint: #14232E; --kg-pink-tint: #2B1722; /* Tons de texto sobre os tints escuros: os do claro sao escuros demais. */ --kg-success-ink: #4FD296; --kg-amber-ink: #E9A94A; --kg-danger-ink: #F0796B; --kg-shadow-card: 0 1px 2px rgba(0,0,0,.5); --kg-shadow-pop: 0 16px 32px -20px rgba(0,0,0,.8); --kg-shadow-frame:0 1px 2px rgba(0,0,0,.5), 0 30px 70px -38px rgba(0,0,0,.7); } /* A foto do login e do bloqueio ja tem veu escuro proprio; e o cartao de impressao sai em papel. Nenhum dos dois segue o tema. */ :root[data-tema="escuro"] .kg-auth__card{ background:#fff; color:#11151C; } /* ---- Reset / base ---- */ *{ box-sizing:border-box; } /* O atributo hidden precisa ganhar de qualquer classe. A regra do navegador ([hidden]{display:none}) tem a mesma especificidade de um seletor de classe, e regra de autor sempre vence a do navegador -- entao .kg-trow{display:grid} ou .kg-alerta{display:flex} anulavam o hidden em silencio. Foi o que deixou o mapa em branco: uma tarja de aviso com position:absolute e fundo opaco cobria o mapa inteiro, marcada como hidden mas visivel. O mesmo anulava o esconder das linhas na busca e na paginacao das listagens. */ [hidden]{ display:none!important; } html,body{ margin:0; padding:0; } body{ font-family:var(--kg-font); color:var(--kg-ink); -webkit-font-smoothing:antialiased; } .kg-mono{ font-family:var(--kg-mono); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar{ height:10px; width:10px; } ::-webkit-scrollbar-thumb{ background:var(--kg-scroll); border-radius:8px; border:2px solid transparent; background-clip:content-box; } /* ---- Foco de formulário ---- */ input:focus, select:focus, textarea:focus, .kg-input:focus{ outline:none; border-color:var(--kg-primary)!important; box-shadow:0 0 0 3px rgba(59,91,219,.12); } select, input, button{ font-family:inherit; } /* ============================================================ LAYOUT — shell de página (tela cheia) ============================================================ */ .kg-app{ height:100vh; width:100vw; overflow:hidden; display:flex; background:var(--kg-surface); } .kg-shell{ flex:1; min-width:0; display:flex; overflow:hidden; background:var(--kg-surface); } .kg-main{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; } .kg-content{ flex:1; min-height:0; overflow-y:auto; background:var(--kg-bg); } .kg-page{ padding:26px 30px 40px; display:flex; flex-direction:column; gap:20px; } /* ---- Sidebar (expandida, com seções SISTEMA/SITE e submenus) ---- */ .kg-sidebar{ width:250px; flex:0 0 auto; min-height:100%; background:var(--kg-surface); border-right:1px solid var(--kg-line-2); padding:16px 14px 24px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; } .kg-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 16px; } .kg-brand__logo{ width:38px; height:38px; border-radius:11px; background:linear-gradient(150deg,#3B5BDB,#5B73E8); display:flex; align-items:center; justify-content:center; font-family:var(--kg-mono); font-weight:700; color:#fff; font-size:16px; box-shadow:0 6px 16px -4px rgba(59,91,219,.5); flex:0 0 auto; } .kg-brand__name{ font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--kg-ink); } .kg-side-sec{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--kg-ink-4); padding:16px 10px 6px; } .kg-group{ border-radius:var(--kg-r-sm); } .kg-group > summary{ list-style:none; display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--kg-r-sm); cursor:pointer; color:var(--kg-ink-2); font-weight:600; font-size:13.5px; transition:.15s; user-select:none; } .kg-group > summary::-webkit-details-marker{ display:none; } .kg-group > summary:hover{ background:var(--kg-row); color:var(--kg-ink); } .kg-group.is-active > summary{ background:var(--kg-primary-tint); color:var(--kg-primary); } .kg-group__ic{ width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; } .kg-group__chev{ margin-left:auto; color:var(--kg-ink-4); transition:transform .2s ease; flex:0 0 auto; } .kg-group[open] .kg-group__chev{ transform:rotate(180deg); } .kg-submenu{ display:flex; flex-direction:column; gap:1px; padding:3px 0 6px 41px; } .kg-sublink{ display:block; padding:7px 11px; border-radius:8px; font-size:12.5px; font-weight:500; color:var(--kg-ink-2); text-decoration:none; transition:.14s; cursor:pointer; } .kg-sublink:hover{ background:var(--kg-row); color:var(--kg-ink); } .kg-sublink.is-active{ color:var(--kg-primary); font-weight:700; background:var(--kg-primary-tint); } /* ---- Sidebar · recolher / expandir + flyout lateral ---- */ .kg-sidebar{ transition:width .2s ease; } .kg-group{ position:relative; } .kg-group__head{ list-style:none; display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--kg-r-sm); cursor:pointer; color:var(--kg-ink-2); font-weight:600; font-size:13.5px; transition:.15s; user-select:none; } .kg-group__head:hover{ background:var(--kg-row); color:var(--kg-ink); } .kg-group.is-active > .kg-group__head{ background:var(--kg-primary-tint); color:var(--kg-primary); } .kg-submenu{ display:none; } .kg-group.is-open > .kg-submenu{ display:flex; } .kg-group.is-open > .kg-group__head .kg-group__chev{ transform:rotate(180deg); } .kg-side-toggle{ margin-top:auto; display:flex; align-items:center; gap:11px; padding:10px; border-radius:var(--kg-r-sm); cursor:pointer; color:var(--kg-ink-2); font-weight:600; font-size:13px; border:1px solid var(--kg-line-2); background:#fff; transition:.15s; } .kg-side-toggle:hover{ background:var(--kg-row); color:var(--kg-ink); } .kg-side-toggle__chev{ flex:0 0 auto; transition:transform .2s ease; } /* estado recolhido — trilho de ícones */ .kg-sidebar.is-collapsed{ width:76px; padding-left:12px; padding-right:12px; } .kg-sidebar.is-collapsed .kg-brand{ justify-content:center; padding:6px 0 16px; } .kg-sidebar.is-collapsed .kg-brand__name{ display:none; } .kg-sidebar.is-collapsed .kg-side-sec{ color:transparent; height:1px; padding:0; margin:14px 10px 10px; background:var(--kg-line-2); overflow:hidden; } .kg-sidebar.is-collapsed .kg-group__head{ justify-content:center; gap:0; padding:8px; } .kg-sidebar.is-collapsed .kg-group__label, .kg-sidebar.is-collapsed .kg-group__chev{ display:none; } .kg-sidebar.is-collapsed .kg-submenu{ display:none!important; } .kg-sidebar.is-collapsed .kg-side-toggle{ justify-content:center; padding:10px 0; } .kg-sidebar.is-collapsed .kg-side-toggle__txt{ display:none; } .kg-sidebar.is-collapsed .kg-side-toggle__chev{ transform:rotate(180deg); } /* flyout — submenu que aparece ao lado quando recolhido */ .kg-fly{ position:fixed; z-index:80; min-width:194px; background:var(--kg-surface); border:1px solid var(--kg-line); border-radius:var(--kg-r-md); box-shadow:var(--kg-shadow-pop); padding:8px; opacity:1; } .kg-fly__title{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--kg-ink-4); padding:6px 11px 9px; } .kg-fly .kg-sublink{ padding:8px 11px; font-size:13px; } @keyframes kgflyin{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:translateX(0); } } /* ---- Topbar ---- */ .kg-topbar{ height:66px; flex:0 0 auto; padding:0 26px; border-bottom:1px solid var(--kg-line-2); display:flex; align-items:center; gap:16px; background:var(--kg-surface); } .kg-search{ flex:1; max-width:430px; display:flex; align-items:center; gap:10px; background:var(--kg-row); border:1px solid var(--kg-line-3); border-radius:var(--kg-r-sm); padding:10px 14px; font-size:13.5px; color:var(--kg-ink-3); } .kg-iconbtn{ position:relative; width:38px; height:38px; border-radius:10px; border:1px solid var(--kg-line-3); display:flex; align-items:center; justify-content:center; color:var(--kg-ink-2); cursor:pointer; transition:.16s; background:#fff; } .kg-iconbtn:hover{ background:var(--kg-row); } /* ============================================================ TIPOGRAFIA ============================================================ */ .kg-h1{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; } .kg-h2{ margin:0; font-size:21px; font-weight:800; letter-spacing:-.02em; } .kg-h3{ margin:0; font-size:16px; font-weight:700; } .kg-sub{ font-size:13.5px; color:var(--kg-ink-2); } .kg-eyebrow{ font-family:var(--kg-mono); font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--kg-ink-2); } .kg-label{ font-size:11px; font-weight:700; color:var(--kg-ink-3); text-transform:uppercase; letter-spacing:.05em; } .kg-crumb{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--kg-ink-3); } .kg-crumb .sep{ color:#CFD5DE; } .kg-crumb .cur{ color:var(--kg-primary); font-weight:700; } /* ============================================================ CARDS ============================================================ */ .kg-card{ background:var(--kg-surface); border:1px solid var(--kg-line); border-radius:var(--kg-r-lg); box-shadow:var(--kg-shadow-card); } .kg-card--pad{ padding:18px 22px; } .kg-card--dark{ background:var(--kg-dark); color:#fff; border:none; border-radius:var(--kg-r-lg); } .kg-frame{ background:var(--kg-surface); border:1px solid #E3E7ED; border-radius:22px; box-shadow:var(--kg-shadow-frame); overflow:hidden; } /* KPI */ .kg-kpi{ border-radius:var(--kg-r-lg); padding:18px; display:flex; flex-direction:column; gap:13px; min-width:0; transition:transform .18s ease, box-shadow .18s ease; } .kg-kpi:hover{ transform:translateY(-3px); box-shadow:var(--kg-shadow-pop); } .kg-kpi__top{ display:flex; align-items:center; justify-content:space-between; } .kg-kpi__val{ font-family:var(--kg-mono); font-size:clamp(18px,1.6vw,26px); font-weight:700; letter-spacing:-.025em; line-height:1; white-space:nowrap; } .kg-kpi__label{ font-size:12.5px; font-weight:600; color:#6B6B73; } /* chip de ícone (sólido) */ .kg-chip{ width:36px; height:36px; flex:0 0 auto; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; } .kg-chip--soft{ width:34px; height:34px; border-radius:10px; } /* delta */ .kg-delta{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; border-radius:7px; padding:3px 8px; } .kg-delta--pos{ color:var(--kg-success-ink); background:rgba(31,157,107,.13); } .kg-delta--warn{ color:var(--kg-amber-ink); background:rgba(222,138,30,.14); } .kg-delta--neu{ color:var(--kg-ink-2); background:rgba(124,134,150,.13); } /* ============================================================ GRIDS RESPONSIVOS · tabelas com rolagem ============================================================ */ .kg-grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; } /* Duas colunas que viram uma sozinhas. O auto-fit dispensa media query: abaixo de 340px por coluna nao cabe formulario nenhum. */ .kg-grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:15px; align-items:start; } .kg-split{ display:grid; grid-template-columns:minmax(0,1fr) 332px; gap:18px; align-items:start; } .kg-split--wide{ grid-template-columns:minmax(0,1fr) 360px; } /* tabelas de largura fixa rolam na horizontal em vez de recortar colunas */ .kg-tablewrap{ overflow-x:auto; overflow-y:hidden; } /* Linha de tabela. O grid-template-columns vem do modificador (--prod, --order, --line) ou do style da propria linha, quando as colunas sao especificas daquela tela. Espacamento, respiro e divisor sao daqui: sem eles a linha cola no texto do vizinho e encosta na borda do card. */ .kg-trow{ display:grid; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--kg-line); } .kg-trow:last-child{ border-bottom:none; } /* Cabecalho da tabela, no mesmo grid das linhas. Antes so existia .kg-th, que e a tipografia da celula: usado como container ele nao tinha display:grid, entao os titulos saiam emendados num paragrafo so ("CLIENTEEMPRESADOCUMENTO..."). */ .kg-thead{ display:grid; align-items:center; gap:14px; padding:11px 18px; background:var(--kg-row); border-bottom:1px solid var(--kg-line); font-size:10.5px; font-weight:700; color:var(--kg-ink-4); text-transform:uppercase; letter-spacing:.06em; } .kg-thead > *{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kg-trow--prod{ grid-template-columns:minmax(170px,1fr) 132px 78px 64px 78px; gap:12px; min-width:580px; padding:10px 6px; } .kg-trow--order{ grid-template-columns:84px 96px minmax(150px,1.3fr) 78px minmax(150px,1.5fr) 162px 138px 96px 128px; gap:14px; min-width:1190px; padding:13px 6px; } .kg-trow--line{ grid-template-columns:minmax(180px,1fr) 110px 130px 150px; gap:14px; min-width:620px; } .kg-chartscroll{ overflow-x:auto; } .kg-chartscroll > *{ min-width:620px; } @media (max-width:1400px){ .kg-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:1200px){ .kg-split, .kg-split--wide{ grid-template-columns:minmax(0,1fr)!important; } } @media (max-width:1000px){ } @media (max-width:760px){ .kg-grid-4{ grid-template-columns:minmax(0,1fr); } .kg-page{ padding:20px 16px 32px; } .kg-topbar{ padding:0 14px; } } /* ============================================================ BOTÕES ============================================================ */ .kg-btn{ display:inline-flex; align-items:center; gap:8px; border-radius:var(--kg-r-sm); padding:11px 18px; font-family:var(--kg-font); font-size:13.5px; font-weight:700; cursor:pointer; border:1px solid transparent; transition:.16s; } .kg-btn--sm{ padding:8px 13px; font-size:12.5px; border-radius:var(--kg-r-xs); } .kg-btn--primary{ background:var(--kg-primary); color:#fff; box-shadow:var(--kg-shadow-btn); } .kg-btn--primary:hover{ background:var(--kg-primary-600); } .kg-btn--success{ background:var(--kg-success); color:#fff; box-shadow:0 6px 16px -6px rgba(31,157,107,.6); } .kg-btn--success:hover{ background:#198A5D; } .kg-btn--ghost{ background:var(--kg-surface); color:var(--kg-ink); border-color:var(--kg-line-3); } .kg-btn--ghost:hover{ background:var(--kg-row); } .kg-btn--danger{ background:var(--kg-danger); color:#fff; } .kg-btn--danger:hover{ background:var(--kg-danger-600); } .kg-btn--outline{ background:var(--kg-surface); color:var(--kg-primary); border-color:var(--kg-primary-line); } .kg-btn--outline:hover{ background:var(--kg-primary); color:#fff; border-color:var(--kg-primary); } /* ============================================================ FORM ============================================================ */ .kg-field{ display:flex; flex-direction:column; gap:6px; } .kg-input, .kg-select{ border:1px solid var(--kg-line-3); border-radius:10px; padding:10px 13px; font-size:13.5px; font-weight:600; color:var(--kg-ink); background:var(--kg-surface); width:100%; } .kg-select{ cursor:pointer; } .kg-input--ro{ background:var(--kg-row); border-color:var(--kg-line-2); color:var(--kg-ink-2); font-family:var(--kg-mono); } /* ============================================================ BADGES / PILLS / TABELA ============================================================ */ .kg-badge{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em; color:#fff; border-radius:6px; padding:4px 9px; } .kg-badge--dark{ background:var(--kg-ink); } .kg-badge--violet{ background:var(--kg-violet); } .kg-pill{ display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; } .kg-pill--primary{ background:var(--kg-primary-tint); border:1px solid var(--kg-primary-line); color:var(--kg-primary); } .kg-statusdot{ width:18px; height:18px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; } .kg-row-hover{ transition:background .14s; } .kg-row-hover:hover{ background:var(--kg-row); } /* ============================================================ ANIMAÇÕES ============================================================ */ @keyframes kgpulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} } @keyframes kgring{ 0%{transform:scale(.55);opacity:.55;} 100%{transform:scale(2.6);opacity:0;} } /* ============================================================ SIDEBAR · estilo WMS (trilho de ícones ⇄ menu expandido) ============================================================ */ .kgsb{ width:96px; flex:0 0 auto; background:var(--kg-surface); border-right:1px solid var(--kg-line-2); padding:16px 0 20px; display:flex; flex-direction:column; align-items:center; gap:3px; font-family:var(--kg-font,'Hanken Grotesk',sans-serif); overflow-y:auto; overflow-x:hidden; transition:width .18s ease; } .kgsb.is-open{ width:232px; align-items:stretch; padding:16px 14px 20px; gap:2px; } .kgsb__top{ position:relative; display:flex; align-items:center; justify-content:center; margin-bottom:14px; } .kgsb.is-open .kgsb__top{ justify-content:flex-start; gap:11px; padding:0 2px; } .kgsb__logo{ width:42px; height:42px; flex:0 0 auto; border-radius:13px; background:linear-gradient(150deg,#3B5BDB,#5B73E8); display:flex; align-items:center; justify-content:center; font-family:var(--kg-mono,'JetBrains Mono',monospace); font-weight:700; color:#fff; font-size:17px; box-shadow:0 6px 16px -4px rgba(59,91,219,.5); } .kgsb__brand{ display:none; flex:1; min-width:0; flex-direction:column; line-height:1.12; } .kgsb.is-open .kgsb__brand{ display:flex; } .kgsb__brand b{ font-size:15px; font-weight:800; color:var(--kg-ink); letter-spacing:-.01em; } .kgsb__brand span{ font-size:11px; color:var(--kg-ink-3); } .kgsb__toggle{ position:absolute; right:-13px; top:50%; transform:translateY(-50%); width:22px; height:22px; flex:0 0 auto; border-radius:50%; background:#fff; border:1px solid #E3E7ED; display:flex; align-items:center; justify-content:center; color:var(--kg-ink-3); cursor:pointer; box-shadow:0 2px 6px rgba(17,21,28,.08); transition:color .14s,border-color .14s; } .kgsb__toggle:hover{ color:var(--kg-primary,#3B5BDB); border-color:var(--kg-primary-line,#C9D4F7); } .kgsb.is-open .kgsb__toggle{ position:static; transform:none; } .kgsb__sec{ display:none; } .kgsb.is-open .kgsb__sec{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--kg-ink-4); padding:14px 12px 6px; } .kgsb__sec--rail{ width:42px; height:1px; background:var(--kg-line-2); margin:9px 0; } .kgsb.is-open .kgsb__sec--rail{ display:none; } .kgsb__item{ position:relative; width:66px; padding:9px 0; border-radius:14px; color:var(--kg-ink-2); display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; transition:background .14s,color .14s; } .kgsb__item:hover{ background:var(--kg-row); } /* No escuro o rotulo do menu vai a branco: o cinza do claro se perde no fundo. */ :root[data-tema="escuro"] .kgsb__item{ color:var(--kg-ink); } .kgsb__item.is-active{ background:var(--kg-primary-tint,var(--kg-primary-tint)); color:var(--kg-primary,#3B5BDB); } .kgsb__item.is-active:hover{ background:var(--kg-primary-tint,var(--kg-primary-tint)); } .kgsb__lbl{ font-size:9.5px; font-weight:600; letter-spacing:.01em; text-align:center; line-height:1.15; } .kgsb__item.is-active .kgsb__lbl{ font-weight:700; } .kgsb__bar{ display:none; } .kgsb__item.is-active .kgsb__bar{ display:block; position:absolute; left:-15px; top:50%; transform:translateY(-50%); width:3px; height:22px; border-radius:3px; background:var(--kg-primary,#3B5BDB); } .kgsb.is-open .kgsb__item{ width:100%; box-sizing:border-box; flex-direction:row; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; } .kgsb.is-open .kgsb__lbl{ font-size:13.5px; text-align:left; white-space:nowrap; } .kgsb.is-open .kgsb__item.is-active .kgsb__bar{ display:none; } /* grupos (item + submenu) */ .kgsb__group{ display:flex; flex-direction:column; align-items:center; } .kgsb.is-open .kgsb__group{ align-items:stretch; width:100%; } /* chevron do item (só no expandido) */ .kgsb__chev{ display:none; } .kgsb.is-open .kgsb__chev{ display:flex; align-items:center; margin-left:auto; color:var(--kg-ink-4); transition:transform .16s ease; } .kgsb__group.is-open .kgsb__chev{ transform:rotate(180deg); } .kgsb__item.is-active .kgsb__chev{ color:var(--kg-primary,#3B5BDB); } /* dropdown (expandido) */ .kgsb__drop{ display:none; } .kgsb.is-open .kgsb__group.is-open .kgsb__drop{ display:flex; flex-direction:column; gap:1px; padding:3px 0 6px 44px; } .kgsb__sublink{ font-size:12.5px; font-weight:600; color:#7A8497; text-decoration:none; padding:7px 11px; border-radius:8px; cursor:pointer; transition:background .14s,color .14s; } .kgsb__sublink:hover{ background:var(--kg-row); color:var(--kg-ink); } .kgsb__sublink.is-active{ color:var(--kg-primary,#3B5BDB); background:var(--kg-primary-tint,var(--kg-primary-tint)); font-weight:700; } /* flyout (recolhido) */ .kgsb__fly{ position:fixed; z-index:80; min-width:190px; background:var(--kg-surface); border:1px solid var(--kg-line,var(--kg-line-3)); border-radius:13px; box-shadow:0 20px 48px -18px rgba(17,21,28,.34); padding:8px; } .kgsb__fly b{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--kg-ink-4); padding:6px 11px 8px; } .kgsb__fly .kgsb__sublink{ display:block; } /* ============================================================ COMPONENTES DO PAINEL ------------------------------------------------------------ Nascidos na Visao Geral, mas nenhum e exclusivo dela — todos valem para qualquer tela do painel: .kg-selo selo de texto com quatro tons .kg-ind linha de indicador (rotulo a esquerda, valor a direita) .kg-proj numero grande de projecao .kg-saude barra de progresso contra meta, no card escuro .kg-alerta cartao de recomendacao .kg-notify notificacao flutuante .kg-pager paginacao do Pager .num-stepper input numerico com setas .modal-* modais empilhaveis .ss-* SearchableSelect .autocomplete-* autocomplete Os quatro tons — is-bom, is-ok, is-atencao, is-ruim — seguem a paleta de status ja definida no topo deste arquivo. ============================================================ */ /* ---- Notificações ---- */ .kg-notify{position:fixed;right:20px;bottom:20px;z-index:2000;opacity:0;transform:translateY(12px); transition:opacity .22s ease,transform .22s ease;pointer-events:none} .kg-notify.is-on{opacity:1;transform:none;pointer-events:auto} .kg-notify__box{display:flex;align-items:center;gap:11px;min-width:270px;max-width:380px;cursor:pointer; padding:13px 16px;border-radius:var(--kg-r-lg,14px);background:var(--kg-surface);color:var(--kg-ink); border:1px solid var(--kg-line-3);box-shadow:var(--kg-shadow-pop);font-size:13.5px;line-height:1.45} .kg-notify__box i{flex:0 0 auto;font-size:16px} .kg-notify__box.is-success i{color:var(--kg-success)} .kg-notify__box.is-warning i{color:var(--kg-amber)} .kg-notify__box.is-danger i{color:var(--kg-danger)} .kg-notify__box.is-info i{color:var(--kg-primary)} .kg-notify__box.is-success{border-left:3px solid var(--kg-success)} .kg-notify__box.is-warning{border-left:3px solid var(--kg-amber)} .kg-notify__box.is-danger {border-left:3px solid var(--kg-danger)} .kg-notify__box.is-info {border-left:3px solid var(--kg-primary)} /* ---- Botão em carregamento (ApiService trava o botão da chamada) ---- */ .kg-btn.is-loading{position:relative;color:transparent!important;pointer-events:none} .kg-btn.is-loading > *{visibility:hidden} .kg-btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:15px;height:15px; margin:-7.5px 0 0 -7.5px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%; color:#fff;animation:kgGira .6s linear infinite;visibility:visible} .kg-btn--ghost.is-loading::after,.kg-btn--outline.is-loading::after{color:var(--kg-ink-2)} @keyframes kgGira{to{transform:rotate(360deg)}} /* ---- Modais ---- */ .modal-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:22px; background:color-mix(in oklab,var(--kg-dark),transparent 25%);backdrop-filter:blur(3px)} .modal-overlay.show{display:flex} .modal-box{width:100%;max-width:520px;max-height:calc(100dvh - 44px);overflow:hidden;display:flex; flex-direction:column;background:var(--kg-surface);border-radius:var(--kg-r-lg,16px); box-shadow:var(--kg-shadow-frame);animation:kgModalIn .2s ease} .modal-box.lg{max-width:760px} .modal-box.sm{max-width:400px} @keyframes kgModalIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.modal-box{animation:none}} .modal-box-header{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:16px 20px;border-bottom:1px solid var(--kg-line)} .modal-box-header h3{margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:9px} .modal-box-close{width:32px;height:32px;border:0;border-radius:9px;background:transparent;cursor:pointer; color:var(--kg-ink-3);display:flex;align-items:center;justify-content:center;transition:.16s} .modal-box-close:hover{background:var(--kg-row);color:var(--kg-ink)} .modal-box-body{padding:18px 20px;overflow-y:auto} .modal-box-footer{display:flex;justify-content:flex-end;gap:9px;padding:14px 20px; border-top:1px solid var(--kg-line);background:var(--kg-row)} /* ---- Number stepper ---- */ .num-stepper{display:inline-flex;align-items:stretch;border:1.5px solid var(--kg-line-3); border-radius:10px;overflow:hidden;background:var(--kg-surface)} .num-stepper input[type="number"]{width:70px;border:0;text-align:center;font-family:var(--kg-mono); font-size:13.5px;font-weight:600;background:transparent;color:var(--kg-ink); -moz-appearance:textfield;appearance:textfield} .num-stepper input[type="number"]::-webkit-outer-spin-button, .num-stepper input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .num-stepper input:focus{outline:none} .num-stepper-btn{width:32px;border:0;background:var(--kg-row);color:var(--kg-ink-2);cursor:pointer; font-size:11px;display:flex;align-items:center;justify-content:center;transition:.14s} .num-stepper-btn:hover{background:var(--kg-line);color:var(--kg-ink)} /* ---- Autocomplete ---- */ .autocomplete-wrapper{position:relative} .autocomplete-dropdown{display:none;position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:70; max-height:250px;overflow-y:auto;background:var(--kg-surface);border:1px solid var(--kg-line-3); border-radius:12px;box-shadow:var(--kg-shadow-pop);padding:5px} .autocomplete-dropdown.show{display:block} .autocomplete-item{padding:9px 11px;border-radius:8px;font-size:13px;cursor:pointer;line-height:1.35} .autocomplete-item:hover,.autocomplete-item.active{background:var(--kg-row)} .autocomplete-loading,.autocomplete-no-results{padding:13px;font-size:12.5px;color:var(--kg-ink-3);text-align:center} /* ---- Pedido: anexos ---- */ .kg-anexo { display: flex; align-items: center; gap: 10px; cursor: pointer; border: 1.5px dashed #DDE2EA; border-radius: 11px; padding: 11px 13px; transition: .15s; } .kg-anexo:hover { border-color: var(--kg-primary); background: var(--kg-row); } .kg-anexo.is-cheio { border-style: solid; border-color: #1F9D6B; background: #F1FAF5; } .kg-anexo__txt { font-size: 12px; color: var(--kg-ink-4); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kg-anexo.is-cheio .kg-anexo__txt { color: var(--kg-ink); font-weight: 600; } /* ---- SearchableSelect ---- */ /* Enquanto um dropdown esta aberto dentro de um contêiner com overflow hidden (a tabela de itens do pedido, o card), o contêiner solta o overflow. O !important vence o style="overflow:hidden" inline do card. */ .ss-aberto-dentro { overflow: visible !important; } .ss-produto { min-width: 0; } .ss-component{position:relative;display:block} .ss-wrap{position:relative} .ss-trigger{display:flex;align-items:center;gap:9px;width:100%;min-height:42px;padding:10px 12px;cursor:pointer; border:1.5px solid var(--kg-line-3);border-radius:10px;background:var(--kg-surface);font-size:13.5px;transition:.16s} .ss-trigger:hover{border-color:var(--kg-ink-4)} .ss-trigger:focus-visible,.ss-trigger.ss-open{outline:none;border-color:var(--kg-primary); box-shadow:0 0 0 4px color-mix(in oklab,var(--kg-primary),transparent 88%)} .ss-trigger-icon{color:var(--kg-ink-3);flex:0 0 auto;font-size:13px} .ss-trigger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .ss-trigger-text.ss-placeholder{color:var(--kg-ink-3);font-weight:400} .ss-trigger-badge{flex:0 0 auto;font-family:var(--kg-mono);font-size:11px;font-weight:700;padding:2px 8px; border-radius:6px;background:var(--kg-row);color:var(--kg-ink-2)} .ss-trigger-arrow{flex:0 0 auto;color:var(--kg-ink-3);font-size:11px;transition:transform .18s} .ss-trigger.ss-open .ss-trigger-arrow{transform:rotate(180deg)} .ss-disabled .ss-trigger{opacity:.55;cursor:not-allowed;background:var(--kg-row)} .ss-multi-tags{flex:1;display:flex;flex-wrap:wrap;gap:5px;min-width:0} .ss-multi-placeholder{color:var(--kg-ink-3)} .ss-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 5px 3px 9px; border-radius:7px;background:var(--kg-row);border:1px solid var(--kg-line)} .ss-tag-remove{border:0;background:transparent;cursor:pointer;color:var(--kg-ink-3);font-size:10px;padding:2px} .ss-tag-remove:hover{color:var(--kg-danger)} .ss-dropdown{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;overflow:hidden; background:var(--kg-surface);border:1px solid var(--kg-line-3);border-radius:12px;box-shadow:var(--kg-shadow-pop)} .ss-dropdown.ss-show{display:block} .ss-search-wrap{padding:9px;border-bottom:1px solid var(--kg-line)} .ss-search-input-wrap{position:relative;display:flex;align-items:center} .ss-search-icon{position:absolute;left:10px;color:var(--kg-ink-3);font-size:12px;pointer-events:none} .ss-search-input{width:100%;padding:9px 30px 9px 30px;border:1.5px solid var(--kg-line-3);border-radius:9px; font-family:inherit;font-size:13px;background:var(--kg-bg);color:var(--kg-ink)} .ss-search-input:focus{outline:none;border-color:var(--kg-primary)} .ss-search-spinner{position:absolute;right:30px;color:var(--kg-ink-3);font-size:12px} .ss-search-clear{display:none;position:absolute;right:8px;border:0;background:transparent;cursor:pointer; color:var(--kg-ink-3);font-size:11px;padding:4px} .ss-search-clear.ss-visible{display:block} .ss-results{overflow-y:auto;padding:5px} .ss-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;transition:.12s} .ss-item:hover,.ss-item.ss-focused{background:var(--kg-row)} .ss-item.ss-active{background:color-mix(in oklab,var(--kg-primary),transparent 92%)} .ss-item-icon,.ss-item-check{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:flex; align-items:center;justify-content:center;background:var(--kg-row);color:var(--kg-ink-3);font-size:11px} .ss-item.ss-checked .ss-item-check{background:var(--kg-primary);color:#fff} .ss-item-check i{opacity:0} .ss-item.ss-checked .ss-item-check i{opacity:1} .ss-item-content{flex:1;min-width:0;line-height:1.3} .ss-item-main{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ss-item-sub{font-size:11.5px;color:var(--kg-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ss-item-badge{flex:0 0 auto;font-family:var(--kg-mono);font-size:10.5px;font-weight:700;padding:2px 7px; border-radius:6px;background:var(--kg-row);color:var(--kg-ink-2)} .ss-empty,.ss-loading{display:flex;flex-direction:column;align-items:center;gap:7px;padding:22px 14px; font-size:12.5px;color:var(--kg-ink-3);text-align:center} .ss-empty i,.ss-loading i{font-size:16px;opacity:.6} .ss-empty.ss-error{color:var(--kg-danger)} .ss-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px; border-top:1px solid var(--kg-line);background:var(--kg-row);font-size:11px;color:var(--kg-ink-3)} .ss-footer kbd{font-family:var(--kg-mono);font-size:10px;padding:1px 4px;border-radius:4px; background:var(--kg-surface);border:1px solid var(--kg-line-3)} /* ---- Paginação (Pager do app/Models) ---- */ .kg-pager{display:flex;align-items:center;gap:5px;flex-wrap:wrap} .kg-pager a,.kg-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px; padding:0 9px;border-radius:9px;font-size:12.5px;font-weight:700;text-decoration:none; border:1px solid var(--kg-line-3);background:var(--kg-surface);color:var(--kg-ink-2);transition:.14s} .kg-pager a:hover{border-color:var(--kg-ink-4);color:var(--kg-ink)} .kg-pager .paginator_item.active,.kg-pager .active{background:var(--kg-primary);border-color:var(--kg-primary);color:#fff} /* ---- Sidebar: o item virou quando leva direto para a tela ---- */ a.kgsb__item{text-decoration:none;color:#454545} a.kgsb__item.is-active{color:var(--kg-primary,#3B5BDB)} a.kgsb__item:hover{color:var(--kg-ink,var(--kg-ink))} /* ---- Indicadores financeiros da Visão Geral ---- */ .kg-ind{display:flex;align-items:center;justify-content:space-between;gap:12px} /* O "i" de cada card de indicador: abre o modal que explica o dado. */ .kg-info{margin-left:auto;width:22px;height:22px;flex:0 0 auto;border-radius:50%;border:1px solid var(--kg-line-3); background:var(--kg-surface);color:var(--kg-ink-3);font:700 11px/1 var(--kg-mono);cursor:pointer; display:inline-flex;align-items:center;justify-content:center;transition:color .14s,border-color .14s,background .14s} .kg-info:hover{color:var(--kg-primary);border-color:var(--kg-primary);background:var(--kg-primary-tint)} .kg-card--dark .kg-info{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#C9D1DE} .kg-card--dark .kg-info:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)} /* Opcao do modal "Imprimir" da lista de pedidos. */ .kg-opcao{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--kg-line);border-radius:var(--kg-r-md); background:var(--kg-surface);color:var(--kg-ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer;width:100%; transition:border-color .14s,background .14s} .kg-opcao:hover{border-color:var(--kg-primary);background:var(--kg-primary-tint)} .kg-opcao__ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px} .kg-opcao__txt{display:flex;flex-direction:column;gap:1px;min-width:0} .kg-opcao__nome{font-size:13.5px;font-weight:700} .kg-opcao__sub{font-size:11.5px;color:var(--kg-ink-3)} .kg-opcao[disabled]{opacity:.5;cursor:not-allowed} .kg-opcao[disabled]:hover{border-color:var(--kg-line);background:var(--kg-surface)} /* Blocos do resumo do pedido. */ .kg-resumo-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .kg-resumo-num{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:var(--kg-r-md);background:var(--kg-row);border:1px solid var(--kg-line)} .kg-resumo-num__lbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--kg-ink-3)} .kg-resumo-num__val{font-size:16px;font-weight:700;font-family:var(--kg-mono)} .kg-info-bloco{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border:1px solid var(--kg-line); border-radius:var(--kg-r-md);background:var(--kg-row)} .kg-info-bloco__top{display:flex;justify-content:space-between;gap:12px;align-items:baseline} .kg-info-bloco__formula{font-family:var(--kg-mono);font-size:11.5px;color:var(--kg-ink-2); background:var(--kg-surface);border:1px solid var(--kg-line-2);border-radius:8px;padding:6px 9px;overflow-wrap:anywhere} .kg-ind__lbl{font-size:12.5px;color:var(--kg-ink-2);line-height:1.35} .kg-ind__val{font-size:14px;font-weight:700;white-space:nowrap} .kg-proj{font-size:19px;font-weight:700;letter-spacing:-.02em} /* Ficha tecnica (produto): custo travado quando calculado, linhas da receita. */ .kg-input.is-calculado[readonly]{background:var(--kg-success-tint);border-color:var(--kg-success);font-weight:700;cursor:default} .kg-ficha .kg-trow{align-items:center;padding-top:8px;padding-bottom:8px} .kg-ficha .kg-trow .kg-input,.kg-ficha .kg-trow .kg-select{height:34px;padding-top:0;padding-bottom:0;font-size:13px} .kg-ficha .kg-trow input[type=number]{-moz-appearance:textfield;appearance:textfield} .kg-ficha .kg-trow input[type=number]::-webkit-inner-spin-button{opacity:1} /* Itens do resumo do pedido: o fundo de papel e as linhas tracejadas do cupom do mercado. O formato das linhas e o mesmo de antes. */ .kg-itens{ background:var(--kg-papel); color:var(--kg-papel-tinta); border:1px solid var(--kg-line); border-radius:var(--kg-r-md); padding:4px 14px; } .kg-itens__l{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 0; border-bottom:1px dashed var(--kg-papel-linha); } .kg-itens__l:last-child{ border-bottom:0; } /* Linhas do modal de canhotos: caixa, numero, cliente, data, envio, valor, nota. */ .kg-canhoto-item{display:grid;grid-template-columns:18px 64px minmax(0,1fr) 78px 104px 96px 150px;gap:10px;align-items:center; padding:8px 6px;border-bottom:1px solid var(--kg-line-2);cursor:pointer} .kg-canhoto-item:hover{background:var(--kg-row)} .kg-canhoto-item input{width:16px;height:16px;accent-color:var(--kg-primary);cursor:pointer;margin:0} /* Selo de estado do pedido. Clicavel vira