/* ════════════════════════════════════════════════════════════════════════════ RELVA DESIGN SYSTEM v1.0 Sistema visual para PCP, Qualidade, Estoque e BI da Relva Verde. Drop-in CSS — não depende de Tailwind nem build step. USO: (ou "dark") Princípios: • Sóbrio: cor forte só onde importa (urgente real) • Tablet-first: alvos de toque ≥ 36px, números tabulares, sem scroll-x • Sem ícones inventados: SVG inline simples; imagem placeholder se ausente • Tokens em OKLCH para harmonia perceptual ════════════════════════════════════════════════════════════════════════════ */ /* ─── TOKENS ─── light (default) ──────────────────────────────────────────── */ :root{ /* Brand — verde Relva, sóbrio */ --brand-50: oklch(97.5% 0.025 145); --brand-100: oklch(94% 0.05 145); --brand-200: oklch(88% 0.09 145); --brand-500: oklch(58% 0.14 145); --brand-600: oklch(50% 0.135 145); /* primary */ --brand-700: oklch(42% 0.115 145); --brand-900: oklch(28% 0.07 145); /* Neutros — slate ligeiramente quente (não cinza puro) */ --ink-950: oklch(20% 0.018 230); --ink-900: oklch(28% 0.018 230); --ink-800: oklch(36% 0.016 230); --ink-700: oklch(46% 0.014 230); --ink-600: oklch(54% 0.012 230); --ink-500: oklch(66% 0.012 230); --ink-400: oklch(76% 0.010 230); --ink-300: oklch(86% 0.008 230); --ink-200: oklch(92% 0.006 230); --ink-150: oklch(95.5% 0.005 230); --ink-100: oklch(97.5% 0.004 230); --ink-50: oklch(99% 0.003 230); /* Superfícies */ --surface: #ffffff; --canvas: oklch(98.5% 0.005 145); --border: oklch(92% 0.008 145); --border-strong: oklch(86% 0.012 145); /* Status — dessaturados; só urgente vibra */ --st-urgent-bg: oklch(94% 0.05 25); --st-urgent-fg: oklch(48% 0.20 25); /* ÚNICA cor forte */ --st-warn-bg: oklch(96% 0.035 85); --st-warn-fg: oklch(48% 0.07 85); /* planejar */ --st-mp-bg: oklch(95% 0.04 55); --st-mp-fg: oklch(50% 0.08 55); /* sem MP */ --st-info-bg: oklch(96% 0.025 235); --st-info-fg: oklch(48% 0.07 235); /* em prod */ --st-ok-bg: oklch(96% 0.025 150); --st-ok-fg: oklch(42% 0.07 150); /* ok */ --st-purple-bg: oklch(95% 0.035 310); --st-purple-fg: oklch(48% 0.10 310); /* qualidade */ --st-mute-bg: var(--ink-150); --st-mute-fg: var(--ink-600); /* neutro */ /* Sombras suaves */ --sh-sm: 0 1px 2px 0 oklch(20% 0.018 230 / 0.04); --sh-md: 0 1px 3px oklch(20% 0.018 230 / 0.04), 0 4px 12px oklch(20% 0.018 230 / 0.05); --sh-lg: 0 4px 16px oklch(20% 0.018 230 / 0.06), 0 16px 40px oklch(20% 0.018 230 / 0.08); /* Raios */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; /* Alvos de toque */ --tap: 44px; --tap-sm: 36px; } /* ─── TOKENS ─── dark mode ────────────────────────────────────────────────── */ html.dark, [data-theme="dark"]{ --brand-50: oklch(24% 0.04 145); --brand-100: oklch(28% 0.05 145); --brand-200: oklch(34% 0.08 145); --brand-500: oklch(70% 0.16 145); --brand-600: oklch(74% 0.16 145); --brand-700: oklch(82% 0.13 145); --brand-900: oklch(92% 0.07 145); --ink-950: oklch(98% 0.005 230); --ink-900: oklch(94% 0.006 230); --ink-800: oklch(86% 0.008 230); --ink-700: oklch(72% 0.010 230); --ink-600: oklch(62% 0.012 230); --ink-500: oklch(50% 0.012 230); --ink-400: oklch(40% 0.012 230); --ink-300: oklch(34% 0.012 230); --ink-200: oklch(28% 0.012 230); --ink-150: oklch(25% 0.012 230); --ink-100: oklch(22% 0.012 230); --ink-50: oklch(20% 0.012 230); --surface: oklch(22% 0.014 230); --canvas: oklch(17% 0.012 230); --border: oklch(28% 0.012 230); --border-strong: oklch(36% 0.014 230); --st-urgent-bg: oklch(30% 0.08 25); --st-urgent-fg: oklch(80% 0.14 25); --st-warn-bg: oklch(28% 0.06 85); --st-warn-fg: oklch(82% 0.12 85); --st-mp-bg: oklch(30% 0.07 55); --st-mp-fg: oklch(80% 0.12 55); --st-info-bg: oklch(28% 0.05 235); --st-info-fg: oklch(82% 0.10 235); --st-ok-bg: oklch(28% 0.05 150); --st-ok-fg: oklch(80% 0.13 150); --st-purple-bg: oklch(28% 0.06 310); --st-purple-fg: oklch(82% 0.12 310); --st-mute-bg: var(--ink-150); --st-mute-fg: var(--ink-600); --sh-sm: 0 1px 2px 0 oklch(0% 0 0 / 0.30); --sh-md: 0 1px 3px oklch(0% 0 0 / 0.30), 0 4px 12px oklch(0% 0 0 / 0.35); --sh-lg: 0 4px 16px oklch(0% 0 0 / 0.40), 0 16px 40px oklch(0% 0 0 / 0.50); color-scheme: dark; } /* ─── BASE / RESET ────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing: border-box; } html,body{ margin:0; padding:0; } body{ font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--canvas); color: var(--ink-900); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01", "ss03"; } button{ font: inherit; cursor: pointer; border: none; background: none; color: inherit; } input,select,textarea{ font: inherit; color: inherit; } a{ color: inherit; } [x-cloak]{ display: none !important; } /* ─── UTILITIES ───────────────────────────────────────────────────────────── */ .num{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } .eyebrow{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-600); } .muted{ color: var(--ink-600); } .divider{ height: 1px; background: var(--border); margin: 12px 0; } .divider-v{ width: 1px; background: var(--border); align-self: stretch; } /* ─── APP SHELL ───────────────────────────────────────────────────────────── */ .app{ display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; } .main{ display: flex; flex-direction: column; min-width: 0; } .page{ padding: 24px 28px 40px; max-width: 1680px; margin: 0 auto; width: 100%; } .page.has-actions{ padding-bottom: 96px; } .page-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .page-title{ font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-950); margin: 0; } .page-sub{ font-size: 13.5px; color: var(--ink-600); margin-top: 4px; } .page-actions{ display: flex; gap: 8px; align-items: center; } /* ─── SIDEBAR ─────────────────────────────────────────────────────────────── */ .sidebar{ background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .sb-brand{ padding: 18px 18px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); } .sb-mark{ width: 28px; height: 28px; border-radius: 8px; background: var(--brand-600); color: #fff; display: grid; place-items: center; flex-shrink: 0; } .sb-mark svg{ width: 18px; height: 18px; } .sb-brand-name{ font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink-950); } .sb-brand-sub{ font-size: 11px; color: var(--ink-600); margin-top: 1px; letter-spacing: 0.02em; text-transform: uppercase; } .sb-search{ padding: 12px; border-bottom: 1px solid var(--border); } .sb-search-box{ display: flex; align-items: center; gap: 8px; background: var(--ink-100); border: 1px solid transparent; border-radius: var(--r-md); padding: 0 10px; height: 36px; transition: border-color .15s, background .15s; } .sb-search-box:focus-within{ background: var(--surface); border-color: var(--brand-500); box-shadow: 0 0 0 3px oklch(58% 0.14 145 / 0.12); } .sb-search-box svg{ width: 14px; height: 14px; color: var(--ink-500); flex-shrink: 0; } .sb-search-box input{ border: none; background: none; outline: none; width: 100%; font-size: 13px; color: var(--ink-900); } .sb-search-box input::placeholder{ color: var(--ink-500); } .kbd{ font-size: 10.5px; font-family: ui-monospace, monospace; color: var(--ink-500); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } .sb-nav{ flex: 1; overflow-y: auto; padding: 6px 8px 16px; } .sb-section-label{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); padding: 14px 10px 6px; } .sb-group-head{ display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); width: 100%; font-size: 12.5px; font-weight: 600; color: var(--ink-700); transition: background .12s, color .12s; } .sb-group-head:hover{ background: var(--ink-100); color: var(--ink-900); } .sb-group-head .chev{ width: 12px; height: 12px; color: var(--ink-500); transition: transform .15s; } .sb-group.open .chev{ transform: rotate(90deg); } .sb-group-head .ico{ width: 16px; height: 16px; color: var(--ink-600); flex-shrink: 0; } .sb-group-head .count{ margin-left: auto; font-size: 11px; color: var(--ink-500); font-weight: 500; } .sb-group-head .dot{ margin-left: auto; min-width: 18px; height: 18px; border-radius: 99px; background: var(--st-urgent-fg); color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; padding: 0 5px; } .sb-items{ padding: 2px 0 6px; } .sb-group:not(.open) .sb-items{ display: none; } .nav-link{ display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 34px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; color: var(--ink-700); position: relative; text-decoration: none; } .nav-link:hover{ background: var(--ink-100); color: var(--ink-900); } .nav-link.active{ background: var(--brand-50); color: var(--brand-700); font-weight: 600; } .nav-link.active::before{ content: ''; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 99px; background: var(--brand-600); } .nav-link .badge-num{ margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--st-urgent-fg); background: var(--st-urgent-bg); border-radius: 99px; padding: 1px 6px; } .sb-user{ padding: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .sb-user-text{ flex: 1; min-width: 0; } .sb-user-name{ font-size: 13px; font-weight: 600; color: var(--ink-950); } .sb-user-role{ font-size: 11px; color: var(--ink-600); } /* ─── TOPBAR ──────────────────────────────────────────────────────────────── */ .topbar{ position: sticky; top: 0; z-index: 30; background: oklch(98.5% 0.005 145 / 0.82); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 16px; } [data-theme="dark"] .topbar{ background: oklch(20% 0.012 230 / 0.82); } .crumbs{ display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-600); } .crumbs a{ color: var(--ink-600); text-decoration: none; } .crumbs a:hover{ color: var(--ink-900); } .crumbs .sep{ color: var(--ink-400); } .crumbs .cur{ color: var(--ink-900); font-weight: 600; } .tb-spacer{ flex: 1; } .tb-date{ font-size: 12.5px; color: var(--ink-600); display: flex; align-items: center; gap: 6px; } .tb-date .dotg{ width: 6px; height: 6px; border-radius: 99px; background: var(--brand-600); } .btn-cmd{ display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 10px 0 12px; height: 34px; font-size: 12.5px; color: var(--ink-600); min-width: 220px; transition: border-color .15s; } .btn-cmd:hover{ border-color: var(--border-strong); } .btn-cmd svg{ width: 14px; height: 14px; } .btn-cmd .ktip{ margin-left: auto; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--ink-500); background: var(--ink-100); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } .bell{ position: relative; width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--ink-700); } .bell:hover{ background: var(--ink-100); } .bell svg{ width: 17px; height: 17px; } .bell .pulse{ position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 99px; background: var(--st-urgent-fg); box-shadow: 0 0 0 3px oklch(48% 0.20 25 / 0.18); } /* ─── BUTTONS ─────────────────────────────────────────────────────────────── */ .btn{ display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .12s, color .12s, border-color .12s, box-shadow .12s, transform .08s; } .btn:active{ transform: scale(.97); } .btn svg{ width: 15px; height: 15px; } .btn-primary{ background: var(--brand-600); color: #fff; box-shadow: 0 1px 2px oklch(28% 0.07 145 / 0.18), 0 1px 0 oklch(35% 0.11 145 / 0.6) inset; } .btn-primary:hover{ background: var(--brand-700); } .btn-secondary{ background: var(--surface); color: var(--ink-800); border: 1px solid var(--border); } .btn-secondary:hover{ background: var(--ink-100); border-color: var(--border-strong); } .btn-ghost{ background: transparent; color: var(--ink-700); } .btn-ghost:hover{ background: var(--ink-100); color: var(--ink-900); } .btn-danger{ background: var(--st-urgent-bg); color: var(--st-urgent-fg); border: 1px solid oklch(48% 0.20 25 / 0.18); } .btn-danger:hover{ background: oklch(48% 0.20 25 / 0.12); } .btn-sm{ height: 32px; padding: 0 12px; font-size: 12.5px; } .btn-lg{ height: 44px; padding: 0 18px; font-size: 14px; } .icon-btn{ width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-600); transition: background .12s, color .12s; } .icon-btn:hover{ background: var(--ink-100); color: var(--ink-900); } .icon-btn svg{ width: 15px; height: 15px; } /* Segmented control */ .seg{ display: inline-flex; background: var(--ink-100); border-radius: var(--r-md); padding: 3px; gap: 2px; } .seg button{ height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 500; color: var(--ink-700); border-radius: 7px; transition: background .12s, color .12s; display: inline-flex; align-items: center; gap: 6px; } .seg button.on{ background: var(--surface); color: var(--ink-950); font-weight: 600; box-shadow: var(--sh-sm); } .seg button svg{ width: 14px; height: 14px; } /* ─── INPUTS ──────────────────────────────────────────────────────────────── */ .input{ width: 100%; height: 40px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: 14px; color: var(--ink-950); outline: none; transition: border-color .15s, box-shadow .15s; } .input:focus{ border-color: var(--brand-600); box-shadow: 0 0 0 3px oklch(58% 0.14 145 / 0.14); } .input::placeholder{ color: var(--ink-500); } .input-sm{ height: 32px; padding: 0 10px; font-size: 13px; } textarea.input{ height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; } .field{ display: block; } .field label{ display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-600); margin-bottom: 6px; } .field-row{ display: flex; gap: 12px; margin-bottom: 14px; } .field-row .field{ flex: 1; } /* Search input inline (no label) */ .search-input{ display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--ink-100); border: 1px solid transparent; border-radius: var(--r-md); min-width: 240px; transition: background .15s, border-color .15s; } .search-input:focus-within{ background: var(--surface); border-color: var(--brand-500); box-shadow: 0 0 0 3px oklch(58% 0.14 145 / 0.12); } .search-input svg{ width: 14px; height: 14px; color: var(--ink-500); } .search-input input{ border: none; outline: none; background: none; width: 100%; font-size: 13px; } /* ─── KPI STRIP ───────────────────────────────────────────────────────────── */ .kpi-strip{ display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); margin-bottom: 14px; overflow: hidden; } .kpi{ padding: 14px 18px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } .kpi:last-child{ border-right: none; } .kpi-label{ font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-600); display: flex; align-items: center; gap: 6px; } .kpi-label .dotk{ width: 6px; height: 6px; border-radius: 99px; } .kpi-value{ font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-950); display: flex; align-items: baseline; gap: 6px; } .kpi-value .unit{ font-size: 12px; font-weight: 500; color: var(--ink-500); } .kpi-trend{ font-size: 11.5px; color: var(--ink-600); } .kpi-trend .up{ color: var(--brand-600); font-weight: 600; } .kpi-trend .down{ color: var(--st-urgent-fg); font-weight: 600; } /* ─── TOOLBAR ─────────────────────────────────────────────────────────────── */ .toolbar{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; box-shadow: var(--sh-sm); } .toolbar.flush-bottom{ border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: none; margin-bottom: 0; } /* ─── CARDS ───────────────────────────────────────────────────────────────── */ .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); } .card-pad{ padding: 16px 18px; } .card-head{ padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-title{ font-size: 14px; font-weight: 600; color: var(--ink-950); letter-spacing: -0.005em; } .card-body{ padding: 16px 18px; } /* ─── TABLE ───────────────────────────────────────────────────────────────── */ .tbl-wrap{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; } .tbl-wrap.flush-top{ border-radius: 0 0 var(--r-lg) var(--r-lg); } .tbl-head{ display: grid; grid-template-columns: minmax(280px, 2fr) minmax(180px, 1.3fr) minmax(150px, 1.1fr) 84px 110px minmax(120px, 1fr) 44px; gap: 0; padding: 0 14px; height: 40px; align-items: center; background: var(--ink-50); border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-600); } .tbl-head > div{ padding: 0 10px; } .tbl-head .num-h{ text-align: right; } .tbl-row{ display: grid; grid-template-columns: minmax(280px, 2fr) minmax(180px, 1.3fr) minmax(150px, 1.1fr) 84px 110px minmax(120px, 1fr) 44px; gap: 0; padding: 14px; align-items: flex-start; border-bottom: 1px solid var(--border); transition: background .1s; } .tbl-row:last-child{ border-bottom: none; } .tbl-row:hover{ background: oklch(98% 0.008 145); } [data-theme="dark"] .tbl-row:hover{ background: oklch(25% 0.014 230); } .tbl-row > div{ padding: 0 10px; min-width: 0; } .tbl-row.expanded{ background: var(--ink-50); } .tbl-row.clickable{ cursor: pointer; } /* ─── BADGES ──────────────────────────────────────────────────────────────── */ .badge{ display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .badge .bd{ width: 6px; height: 6px; border-radius: 99px; } .badge-sm{ height: 20px; padding: 0 7px; font-size: 10.5px; } .badge-urgent{ background: var(--st-urgent-bg); color: var(--st-urgent-fg); box-shadow: 0 0 0 1px oklch(48% 0.20 25 / 0.18); } .badge-urgent .bd{ background: var(--st-urgent-fg); box-shadow: 0 0 0 3px oklch(48% 0.20 25 / 0.18); animation: pulse 2s ease-in-out infinite; } @keyframes pulse{ 50%{ opacity: 0.55; } } .badge-warn{ background: var(--st-warn-bg); color: var(--st-warn-fg); } .badge-warn .bd{ background: var(--st-warn-fg); } .badge-mp{ background: var(--st-mp-bg); color: var(--st-mp-fg); } .badge-mp .bd{ background: var(--st-mp-fg); } .badge-info{ background: var(--st-info-bg); color: var(--st-info-fg); } .badge-info .bd{ background: var(--st-info-fg); } .badge-ok{ background: var(--st-ok-bg); color: var(--st-ok-fg); } .badge-ok .bd{ background: var(--st-ok-fg); } .badge-purple{ background: var(--st-purple-bg); color: var(--st-purple-fg); } .badge-purple .bd{ background: var(--st-purple-fg); } .badge-mute{ background: var(--st-mute-bg); color: var(--st-mute-fg); } .badge-mute .bd{ background: var(--st-mute-fg); } /* ─── TAGS (mini-labels para metadata) ────────────────────────────────────── */ .tag{ display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; background: var(--ink-100); color: var(--ink-700); white-space: nowrap; } .tag.tag-loc{ background: oklch(96% 0.025 270); color: oklch(45% 0.08 270); } .tag.tag-mist{ background: oklch(96% 0.04 320); color: oklch(45% 0.1 320); } [data-theme="dark"] .tag.tag-loc{ background: oklch(28% 0.06 270); color: oklch(85% 0.10 270); } [data-theme="dark"] .tag.tag-mist{ background: oklch(28% 0.08 320); color: oklch(85% 0.10 320); } /* ─── ALERTS / CALLOUTS ───────────────────────────────────────────────────── */ .alert{ display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.5; border: 1px solid; } .alert-info{ background: var(--st-info-bg); border-color: oklch(48% 0.07 235 / 0.25); color: var(--st-info-fg); } .alert-warn{ background: var(--st-warn-bg); border-color: oklch(48% 0.07 85 / 0.25); color: var(--st-warn-fg); } .alert-urgent{ background: var(--st-urgent-bg); border-color: oklch(48% 0.20 25 / 0.25); color: var(--st-urgent-fg);} .alert-ok{ background: var(--st-ok-bg); border-color: oklch(42% 0.07 150 / 0.25); color: var(--st-ok-fg); } .alert svg{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; } /* ─── AVATARS ─────────────────────────────────────────────────────────────── */ .avatar{ width: 32px; height: 32px; border-radius: 99px; background: linear-gradient(135deg, var(--brand-600), var(--brand-900)); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; } .avatar-sm{ width: 22px; height: 22px; font-size: 9.5px; border: 2px solid var(--surface); } .avatar-lg{ width: 40px; height: 40px; font-size: 14px; } .avatar.quality{ background: linear-gradient(135deg, oklch(50% 0.12 270), oklch(35% 0.10 270)); } .avatar-stack{ display: flex; } .avatar-stack > .avatar-sm{ margin-left: -6px; } .avatar-stack > .avatar-sm:first-child{ margin-left: 0; } /* ─── PROGRESS BAR ────────────────────────────────────────────────────────── */ .progress{ position: relative; height: 6px; border-radius: 99px; background: var(--ink-150); overflow: hidden; } .progress > span{ position: absolute; inset: 0; background: var(--brand-500); border-radius: 99px; } .progress.thin{ height: 4px; } .progress.thick{ height: 8px; } .progress.urgent > span{ background: var(--st-urgent-fg); } .progress.warn > span{ background: var(--st-warn-fg); } .progress.ok > span{ background: var(--st-ok-fg); } /* Coverage bar with zone markers */ .cov-bar{ position: relative; height: 6px; border-radius: 99px; background: var(--ink-150); overflow: hidden; width: 100%; } .cov-bar > .cov-fill{ position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; } .cov-zone{ position: absolute; top: -1px; bottom: -1px; width: 1px; background: var(--ink-300); } /* ─── STATUS PIPELINE (5-step workflow visualization) ─────────────────────── */ .pipeline{ display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 4px 0; } .pipe-step{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; } .pipe-step::before{ content: ''; position: absolute; top: 19px; left: 50%; right: -50%; height: 2px; background: var(--ink-200); z-index: 0; } .pipe-step:last-child::before{ display: none; } .pipe-step.done::before{ background: var(--brand-500); } .pipe-dot{ width: 22px; height: 22px; border-radius: 99px; background: var(--surface); border: 2px solid var(--ink-300); display: grid; place-items: center; position: relative; z-index: 1; font-size: 11px; color: var(--ink-500); font-weight: 600; } .pipe-step.done .pipe-dot{ background: var(--brand-500); border-color: var(--brand-500); color: #fff; } .pipe-step.done .pipe-dot svg{ width: 12px; height: 12px; } .pipe-step.current .pipe-dot{ background: var(--surface); border-color: var(--brand-600); color: var(--brand-700); box-shadow: 0 0 0 4px oklch(58% 0.14 145 / 0.18); } .pipe-step.reprovado .pipe-dot{ background: var(--st-urgent-bg); border-color: var(--st-urgent-fg); color: var(--st-urgent-fg); } .pipe-label{ font-size: 10.5px; font-weight: 600; color: var(--ink-700); text-align: center; line-height: 1.25; max-width: 80px; } .pipe-step.current .pipe-label{ color: var(--brand-700); } .pipe-step.done .pipe-label{ color: var(--ink-900); } /* ─── METRICS GRID (compact stat cards) ───────────────────────────────────── */ .metrics{ display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .metric{ padding: 12px 14px; border-right: 1px solid var(--border); } .metric:last-child{ border-right: none; } .metric-lbl{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-600); } .metric-val{ font-size: 19px; font-weight: 700; color: var(--ink-950); letter-spacing: -0.015em; margin-top: 2px; font-variant-numeric: tabular-nums; } .metric-val .un{ font-size: 11px; font-weight: 500; color: var(--ink-500); margin-left: 2px; } .metric-sub{ font-size: 11px; color: var(--ink-600); margin-top: 2px; } /* ─── TIMELINE ────────────────────────────────────────────────────────────── */ .tline{ position: relative; padding-left: 28px; } .tline::before{ content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--ink-200); } .tline-item{ position: relative; padding: 0 0 14px; } .tline-item:last-child{ padding-bottom: 0; } .tline-item::before{ content: ''; position: absolute; left: -25px; top: 5px; width: 8px; height: 8px; border-radius: 99px; background: var(--ink-300); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--ink-300); } .tline-item.brand::before{ background: var(--brand-600); box-shadow: 0 0 0 2px var(--brand-600); } .tline-item.warn::before{ background: var(--st-warn-fg); box-shadow: 0 0 0 2px var(--st-warn-fg); } .tline-item.urgent::before{ background: var(--st-urgent-fg); box-shadow: 0 0 0 2px var(--st-urgent-fg); } .tline-time{ font-size: 11px; color: var(--ink-500); font-variant-numeric: tabular-nums; font-weight: 500; } .tline-text{ font-size: 13px; color: var(--ink-900); margin-top: 2px; } .tline-text b{ color: var(--ink-950); font-weight: 600; } /* ─── SLIDE-OVER DRAWER (padrão de modal) ─────────────────────────────────── */ .scrim{ position: fixed; inset: 0; background: oklch(20% 0.018 230 / 0.4); backdrop-filter: blur(2px); z-index: 50; opacity: 0; animation: scrim-in .2s ease-out forwards; } [data-theme="dark"] .scrim{ background: oklch(8% 0.008 230 / 0.55); } @keyframes scrim-in{ to{ opacity: 1; } } .drawer{ position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--surface); z-index: 51; display: flex; flex-direction: column; box-shadow: -16px 0 48px oklch(20% 0.018 230 / 0.18); transform: translateX(100%); animation: drawer-in .28s cubic-bezier(.22,1,.36,1) forwards; } .drawer.size-md{ width: min(560px, 100vw); } .drawer.size-lg{ width: min(720px, 100vw); } @keyframes drawer-in{ to{ transform: translateX(0); } } .drawer-head{ padding: 18px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; } .drawer-head-text{ flex: 1; min-width: 0; } .drawer-eyebrow{ font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-600); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .drawer-title{ font-size: 19px; font-weight: 700; color: var(--ink-950); letter-spacing: -0.015em; margin: 0; line-height: 1.25; word-break: break-word; } .drawer-sub{ font-size: 13px; color: var(--ink-600); margin-top: 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .drawer-sub .sep{ width: 3px; height: 3px; border-radius: 99px; background: var(--ink-400); } .drawer-body{ flex: 1; overflow-y: auto; padding: 0; } .drawer-section{ padding: 20px 24px; border-bottom: 1px solid var(--border); } .drawer-section:last-child{ border-bottom: none; } .section-label{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-600); margin-bottom: 12px; } .drawer-tabs{ display: flex; gap: 2px; padding: 4px; background: var(--ink-100); margin: 16px 24px 0; border-radius: var(--r-md); } .drawer-tabs button{ flex: 1; height: 32px; font-size: 12.5px; font-weight: 500; color: var(--ink-700); border-radius: 7px; transition: background .12s, color .12s; } .drawer-tabs button.on{ background: var(--surface); color: var(--ink-950); font-weight: 600; box-shadow: var(--sh-sm); } .drawer-foot{ padding: 14px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; background: var(--ink-50); } .drawer-foot .spacer{ flex: 1; } /* ─── FIXED ACTION BAR (rodapé persistente) ───────────────────────────────── */ .action-bar{ position: fixed; left: 260px; right: 0; bottom: 0; background: var(--ink-950); color: #fff; border-top: 1px solid oklch(35% 0.02 230); padding: 12px 24px; display: flex; align-items: center; gap: 14px; box-shadow: 0 -8px 28px oklch(20% 0.018 230 / 0.10); z-index: 40; } [data-theme="dark"] .action-bar{ color: var(--ink-950); background: oklch(14% 0.012 230); } .action-bar .ab-count{ display: flex; align-items: center; gap: 8px; font-size: 13px; } .action-bar .ab-count strong{ font-size: 15px; background: oklch(35% 0.018 230); border-radius: var(--r-sm); padding: 3px 10px; font-weight: 700; } .action-bar .ab-sep{ width: 1px; height: 24px; background: oklch(40% 0.02 230); } .action-bar .ab-detail{ font-size: 12.5px; color: oklch(78% 0.012 230); } .action-bar .ab-spacer{ flex: 1; } .btn-on-dark{ background: oklch(35% 0.018 230); color: #fff; } .btn-on-dark:hover{ background: oklch(42% 0.02 230); } .btn-on-dark.primary{ background: var(--brand-500); color: oklch(15% 0.05 145); } .btn-on-dark.primary:hover{ background: var(--brand-600); color: #fff; } [data-theme="dark"] .btn-on-dark{ background: oklch(30% 0.014 230); } [data-theme="dark"] .btn-on-dark:hover{ background: oklch(36% 0.016 230); } /* ─── ACTION BAR PCP (rodapé fixo do flex de planejamento) ───────────────── */ .action-bar-pcp{ flex-shrink: 0; background: var(--surface); border-top: 2px solid var(--border); padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; overflow: hidden; box-shadow: 0 -2px 12px oklch(20% 0.018 230 / 0.06); } [data-theme="dark"] .action-bar-pcp{ background: var(--surface); border-top-color: var(--border); } .action-bar-pcp .flex-1{ flex: 1; } /* ─── KANBAN ──────────────────────────────────────────────────────────────── */ .kanban-wrap{ position: relative; margin: 0 -28px; padding: 0 28px; } .kanban{ display: grid; grid-template-columns: repeat(5, minmax(260px, 1fr)); gap: 14px; align-items: start; } .k-col{ background: var(--ink-50); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 8px; min-height: 320px; position: relative; } .k-col-head{ display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; border-bottom: 1px dashed var(--border); } .k-col-head .dot{ width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; } .k-col-head .title{ font-size: 12.5px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.005em; flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; } .k-col-head .count{ font-size: 11.5px; font-weight: 600; color: var(--ink-600); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px; font-variant-numeric: tabular-nums; } .k-col-head .wip{ font-size: 10.5px; color: var(--ink-500); font-weight: 500; } .k-col-head .wip.over{ color: var(--st-urgent-fg); font-weight: 700; } .k-cards{ display: flex; flex-direction: column; gap: 8px; } .k-card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 9px; text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .08s; position: relative; width: 100%; } .k-card:hover{ border-color: var(--border-strong); box-shadow: var(--sh-md); } .k-card:active{ transform: scale(.99); } .k-card .accent{ position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; } /* ─── PCP TABLE COLUMNS (7-COLUMN HIERARCHICAL DESIGN) ────────────────────── */ /* Col 1: Produto */ .col-prod{ display: flex; gap: 12px; align-items: flex-start; min-width: 0; } .prod-thumb{ width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--ink-100); border: 1px solid var(--border); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--ink-700); flex-shrink: 0; position: relative; overflow: hidden; margin-top: 1px; } .prod-thumb::before{ content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent 0 6px, oklch(92% 0.008 145) 6px 7px); opacity: 0.6; } .prod-thumb span{ position: relative; z-index: 1; } .prod-info{ min-width: 0; flex: 1; } .prod-name{ font-size: 13.5px; font-weight: 600; color: var(--ink-950); letter-spacing: -0.005em; line-height: 1.32; text-wrap: balance; word-break: break-word; overflow-wrap: anywhere; } .prod-meta{ display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: var(--ink-600); flex-wrap: wrap; } .prod-meta .ean{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; } .prod-meta .dot{ width: 3px; height: 3px; border-radius: 99px; background: var(--ink-400); } .tag{ display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; background: var(--ink-100); color: var(--ink-700); white-space: nowrap; } .tag.tag-loc{ background: oklch(96% 0.025 270); color: oklch(45% 0.08 270); } .tag.tag-mist{ background: oklch(96% 0.04 320); color: oklch(45% 0.1 320); } /* Col 2: Demanda (labeled rows + cobertura bar) */ .demand{ display: flex; flex-direction: column; gap: 8px; } .stat-row{ display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: 8px; font-size: 12px; } .stat-row .stat-lbl{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); } .stat-row .stat-val{ font-weight: 600; color: var(--ink-950); font-variant-numeric: tabular-nums; font-size: 13.5px; } .stat-row .stat-unit{ font-size: 11px; color: var(--ink-500); font-weight: 500; margin-left: 2px; } .cov-block{ margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--border); } .cov-bar{ position: relative; height: 5px; border-radius: 99px; background: var(--ink-150); overflow: hidden; width: 100%; margin-top: 5px; } .cov-fill{ position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; } .cov-zone{ position: absolute; top: -1px; bottom: -1px; width: 1px; background: var(--ink-300); } .cov-zone-7{ left: 33.3%; } .cov-zone-14{ left: 66.6%; } /* Col 3: Matéria-prima */ .mp-cell{ display: flex; flex-direction: column; gap: 6px; min-width: 0; } .mp-row{ display: grid; grid-template-columns: 60px 1fr; align-items: baseline; gap: 8px; font-size: 12px; } .mp-row .mp-lbl{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); } .mp-row .mp-val{ font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-950); font-size: 13.5px; } .mp-row .mp-val .u{ font-size: 11px; color: var(--ink-500); font-weight: 500; margin-left: 2px; } .mp-row.insuf .mp-val{ color: var(--st-urgent-fg); } .mp-row.insuf .mp-lbl{ color: var(--st-urgent-fg); } .mp-empty{ font-size: 12px; color: var(--ink-500); font-style: italic; } .mp-bar{ position: relative; height: 4px; border-radius: 99px; background: var(--ink-150); overflow: hidden; margin-top: 2px; } .mp-bar > span{ position: absolute; inset: 0; border-radius: 99px; background: var(--brand-500); } .mp-bar.insuf > span{ background: var(--st-urgent-fg); } /* Col 4: Sugerido */ .col-num{ text-align: right; font-variant-numeric: tabular-nums; } .suggest-val{ font-size: 14px; color: var(--ink-700); font-weight: 500; } .suggest-unit{ font-size: 11px; color: var(--ink-500); margin-left: 2px; } /* Col 5: Produzir input */ .prod-input-wrap{ position: relative; display: flex; align-items: center; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md); height: 40px; padding: 0 8px; transition: border-color .15s, box-shadow .15s; } .prod-input-wrap.has-val{ border-color: var(--brand-500); background: var(--brand-50); } .prod-input-wrap:focus-within{ border-color: var(--brand-600); box-shadow: 0 0 0 3px oklch(58% 0.14 145 / 0.14); background: var(--surface); } .prod-input-wrap input{ border: none; outline: none; background: none; width: 100%; font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-950); padding-right: 2px; } .prod-input-wrap .unit{ font-size: 11px; color: var(--ink-500); font-weight: 500; } /* Col 6: Status badge */ .col-status{ display: flex; align-items: center; justify-content: flex-start; gap: 4px; } .badge{ display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap; } .badge .bd{ width: 6px; height: 6px; border-radius: 99px; } .badge-urgent{ background: var(--st-urgent-bg); color: var(--st-urgent-fg); box-shadow: 0 0 0 1px oklch(48% 0.20 25 / 0.18); } .badge-urgent .bd{ background: var(--st-urgent-fg); box-shadow: 0 0 0 3px oklch(48% 0.20 25 / 0.18); animation: pulse 2s ease-in-out infinite; } @keyframes pulse{ 50%{ opacity: 0.55; } } .badge-warn{ background: var(--st-warn-bg); color: var(--st-warn-fg); } .badge-warn .bd{ background: var(--st-warn-fg); } .badge-mp{ background: var(--st-mp-bg); color: var(--st-mp-fg); } .badge-mp .bd{ background: var(--st-mp-fg); } .badge-info{ background: var(--st-info-bg); color: var(--st-info-fg); } .badge-info .bd{ background: var(--st-info-fg); } .badge-ok{ background: var(--st-ok-bg); color: var(--st-ok-fg); } .badge-ok .bd{ background: var(--st-ok-fg); } .badge-mute{ background: var(--st-mute-bg); color: var(--st-mute-fg); } .badge-mute .bd{ background: var(--st-mute-fg); } /* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */ @media (max-width: 1280px){ .app{ grid-template-columns: 220px 1fr; } .kanban{ grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 10px; } .kpi-strip{ grid-template-columns: repeat(2, 1fr); } .kpi:nth-child(2){ border-right: none; } .kpi:nth-child(1), .kpi:nth-child(2){ border-bottom: 1px solid var(--border); } .action-bar{ left: 220px; padding: 12px 16px; } } @media (max-width: 1100px){ .app{ grid-template-columns: 1fr; } .sidebar{ display: none; } .page{ padding: 16px 14px 40px; } .page-head{ flex-direction: column; align-items: stretch; gap: 12px; } .topbar{ padding: 0 12px; gap: 8px; } .btn-cmd{ display: none; } .tb-date{ display: none; } .crumbs{ font-size: 12px; } .kanban-wrap{ margin: 0 -14px; padding: 0 14px; } .kanban{ grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 280px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 14px; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } .k-col{ scroll-snap-align: start; } .metrics{ grid-template-columns: repeat(2, 1fr); } .metric:nth-child(2){ border-right: none; } .metric:nth-child(1), .metric:nth-child(2){ border-bottom: 1px solid var(--border); } .action-bar{ left: 0; padding: 10px 14px; flex-wrap: wrap; row-gap: 8px; } .action-bar .ab-sep, .action-bar .ab-detail{ display: none; } .action-bar .ab-spacer{ flex-basis: 100%; } } @media (max-width: 560px){ .page{ padding: 12px 10px 40px; } .kpi-strip{ grid-template-columns: 1fr; } .kpi{ border-right: none; border-bottom: 1px solid var(--border); } .kpi:last-child{ border-bottom: none; } }