:root { --bg: #F2F4EF; --paper: #FFFFFF; --ink: #1B2620; --ink-soft: #55645A; --primary: #1F3D2E; --primary-soft: #2E5A43; --accent: #C68A2E; --accent-soft: #E9C88A; --line: #D8DED4; --danger: #A23B2E; --danger-bg: #FBE9E5; --ok: #2E6A4A; --ok-bg: #E4F2E9; --warn: #9A6B12; --warn-bg: #FBF0DA; --info: #2E5A8A; --info-bg: #E6EEF7; --surface: #FBFCFA; --surface-hover: #F6F8F3; --sidebar-bg: #EAEFE6; --sidebar-hover: #DEE6D7; --badge-muted-bg: #EDEDED; --badge-muted-ink: #666666; --on-primary: #FFFFFF; --radius: 6px; --shadow: 0 1px 2px rgba(20,30,22,.06), 0 4px 14px rgba(20,30,22,.05); --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Tema escuro — mesma paleta de marca (verde + dourado), adaptada pra fundo escuro. Ativado via [data-theme="dark"] no , alternável em tempo real (ver toggleTema() no app.js) e persistido no localStorage do navegador. */ [data-theme="dark"] { --bg: #141F19; --paper: #1C2921; --ink: #E7ECE7; --ink-soft: #9FAEA4; --primary: #4C8468; --primary-soft: #6BA484; --accent: #D9A857; --accent-soft: #7A6335; --line: #2E3D33; --danger: #E0685A; --danger-bg: #3A2420; --ok: #5CAF83; --ok-bg: #1E3327; --warn: #E0B558; --warn-bg: #3A3319; --info: #74A8DC; --info-bg: #1E2E3D; --surface: #202E26; --surface-hover: #263A2E; --sidebar-bg: #182720; --sidebar-hover: #22322A; --badge-muted-bg: #2A3830; --badge-muted-ink: #A9B6AD; --on-primary: #F2F4EF; --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; } #app { min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; } button { font-family: inherit; cursor: pointer; } /* ---------- Login ---------- */ .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--primary) 0%, #14261C 100%); } .login-card { width: 380px; background: var(--paper); border-radius: 10px; padding: 40px 36px; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .login-brand { display:flex; align-items:center; gap:10px; margin-bottom: 6px; } .login-brand .mark { width: 34px; height: 34px; border-radius: 8px; background: var(--accent); display:flex; align-items:center; justify-content:center; color:#fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; } .login-brand .name { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--primary); } .login-sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 26px; } .login-card label { display:block; font-size: 12.5px; font-weight:600; color: var(--ink-soft); margin: 14px 0 5px; text-transform: uppercase; letter-spacing: .03em;} .login-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; background: var(--surface); } .login-card input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } .btn-primary { margin-top: 22px; width: 100%; background: var(--primary); color: #fff; border: none; padding: 11px 14px; border-radius: var(--radius); font-weight: 600; font-size: 14.5px; } .btn-primary:hover { background: var(--primary-soft); } .login-error { color: var(--danger); font-size: 13px; margin-top: 10px; } .login-ok { color: var(--ok); font-size: 13px; margin-top: 10px; background: var(--ok-bg); border: 1px solid var(--ok); border-radius: 6px; padding: 8px 10px; } /* ---------- Rodapé institucional (login e sidebar) ---------- */ .app-footer { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); display:flex; align-items:center; gap:10px; } .app-footer .footer-logo { height: 26px; width:auto; opacity:.85; } .app-footer .footer-text { font-size: 10.5px; line-height:1.5; color: var(--ink-soft); } .sidebar-footer { margin-top: auto; padding: 14px 12px 4px; border-top: 1px solid var(--line); display:flex; align-items:center; gap:9px; } .sidebar-footer .footer-logo { height: 24px; width:auto; opacity:.8; flex-shrink:0; } .sidebar-footer .footer-text { font-size: 9.5px; line-height:1.4; color: var(--ink-soft); } /* ---------- Shell ---------- */ .topbar { position: sticky; top: 0; z-index: 900; height: 56px; background: var(--primary); color: #fff; display:flex; align-items:center; padding: 0 20px; gap: 18px; flex-shrink:0; } .topbar .brand { font-family: var(--font-display); font-weight:700; font-size: 17px; display:flex; align-items:center; gap:8px;} .topbar .brand .mark { width:26px;height:26px;border-radius:6px;background:var(--accent); display:flex;align-items:center;justify-content:center; font-size:14px; font-weight:700;} .topbar .spacer { flex:1; } .topbar .who { font-size: 13px; opacity:.92; text-align:right; } .topbar .who b { display:block; font-size: 13.5px; } .topbar .logout { background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; padding:7px 12px; border-radius: var(--radius); font-size:12.5px;} .topbar .logout:hover { background: rgba(255,255,255,.22); } .body-row { display:flex; flex:1; min-height:0; } .sidebar { width: 208px; background: var(--sidebar-bg); border-right: 1px solid var(--line); padding: 16px 10px 0; flex-shrink:0; display:flex; flex-direction:column; overflow-y:auto; } .sidebar-nav { flex-shrink:0; } .sidebar .nav-item { display:flex; align-items:center; gap:9px; padding: 9px 12px; border-radius: var(--radius); color: var(--ink); text-decoration:none; font-size: 13.6px; margin-bottom: 2px; cursor:pointer; } .sidebar .nav-item:hover { background: var(--sidebar-hover); } .sidebar .nav-item.active { background: var(--primary); color:#fff; font-weight:600; } .sidebar .nav-section { font-size: 10.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); margin: 16px 10px 6px; } .main { flex:1; overflow-y:auto; padding: 26px 32px 60px; } .page-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap: 16px; flex-wrap:wrap;} .page-title { font-family: var(--font-display); font-size: 24px; font-weight:700; color: var(--primary); margin:0; } .page-sub { color: var(--ink-soft); font-size: 13px; margin-top:4px; } /* ---------- Components ---------- */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 18px; } .card h3 { margin: 0 0 14px; font-family: var(--font-display); font-size: 16px; color: var(--primary); } .grid { display:grid; gap: 16px; } .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: repeat(3,1fr); } .grid.cols-4 { grid-template-columns: repeat(4,1fr); } @media (max-width: 900px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } } table { width:100%; border-collapse: collapse; font-size: 13.5px; } th { text-align:left; color: var(--ink-soft); font-weight:600; font-size: 11.5px; text-transform:uppercase; letter-spacing:.03em; padding: 8px 10px; border-bottom: 2px solid var(--line); } td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } tr.clickable { cursor:pointer; } tr.clickable:hover td { background: var(--surface-hover); } .badge { display:inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;} .badge.st-RASCUNHO { background:var(--badge-muted-bg); color:var(--badge-muted-ink); } .badge.st-EM_ANALISE_GERENTE, .badge.st-EM_TRIAGEM_SUPRIMENTOS, .badge.st-EM_COTACAO, .badge.st-EM_APROVACAO_FINANCEIRA { background: var(--warn-bg); color: var(--warn); } .badge.st-AGUARDANDO_CORRECAO { background: var(--danger-bg); color: var(--danger); } .badge.st-APROVADA, .badge.st-EM_EXECUCAO { background: var(--info-bg); color: var(--info); } .badge.st-FINALIZADA { background: var(--ok-bg); color: var(--ok); } .badge.st-CANCELADA, .badge.st-NAO_ATENDIDA { background: var(--badge-muted-bg); color: var(--badge-muted-ink); } .kpi { background: var(--paper); border:1px solid var(--line); border-radius:8px; padding:16px 18px; box-shadow: var(--shadow); } .kpi .val { font-family: var(--font-display); font-size: 26px; font-weight:700; color: var(--primary); } .kpi .lbl { font-size: 12px; color: var(--ink-soft); margin-top: 2px; } .info-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 14px 24px; } .info-grid .campo .lbl { font-size: 10.5px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.4px; font-weight:600; } .info-grid .campo .val { font-size: 14px; color: var(--ink); margin-top: 2px; } @media (max-width: 900px) { .info-grid { grid-template-columns: 1fr 1fr; } } label.f { display:block; font-size: 12px; font-weight:600; color: var(--ink-soft); margin: 10px 0 4px; } input.f, select.f, textarea.f { width:100%; padding: 8px 10px; border:1px solid var(--line); border-radius: var(--radius); font-size: 13.6px; font-family: inherit; background:var(--surface); } textarea.f { resize: vertical; min-height: 60px; } .row { display:flex; gap:10px; align-items:flex-end; } .row > * { flex:1; } .btn { padding: 8px 16px; border-radius: var(--radius); font-size: 13.4px; font-weight:600; border:1px solid var(--line); background:var(--paper); color: var(--ink); } .btn:hover { background:var(--surface-hover); } .btn.primary { background: var(--primary); color:#fff; border-color: var(--primary); } .btn.primary:hover { background: var(--primary-soft); } .btn.accent { background: var(--accent); color:#fff; border-color: var(--accent); } .btn.accent:hover { filter: brightness(1.05); } .btn.danger { background: var(--danger); color:#fff; border-color: var(--danger); } .btn.ghost { background: transparent; border-color: transparent; color: var(--primary-soft); } .btn.small { padding: 5px 10px; font-size: 12.2px; } .btn:disabled { opacity:.45; cursor:not-allowed; } .btn-row { display:flex; gap:8px; flex-wrap:wrap; margin-top: 14px; } .item-row { display:grid; grid-template-columns: 3fr 1fr 1fr 1.6fr auto; gap:8px; margin-bottom:8px; /* align-items:end (nao center) -- a coluna Descricao tem uma linha extra acima do campo (checkbox "item nao esta no catalogo") que as outras colunas nao tem. Alinhando todas pela base, os campos de verdade (nao a coluna inteira) ficam no mesmo nivel -- testado: 0px de diferenca entre o campo Descricao e o campo Qtd. */ align-items:end; } /* Navegação por teclado nos combos de busca (item 8) -- mesmo destaque visual que .combo-item.active já usava, aplicado também aos resultados da busca global. */ .sr-item.active { background: var(--surface-hover); } .muted { color: var(--ink-soft); } .empty { text-align:center; padding: 40px 20px; color: var(--ink-soft); } .empty .big { font-size: 34px; margin-bottom: 6px; } .timeline { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 16px; } .timeline .ev { position:relative; padding-bottom: 16px; } .timeline .ev::before { content:''; position:absolute; left:-21px; top:4px; width:9px; height:9px; border-radius:50%; background: var(--accent); } .timeline .ev .t { font-size:11px; color: var(--ink-soft); } .timeline .ev .a { font-weight:600; font-size:13.3px; } .timeline .ev .o { font-size:13px; color: var(--ink-soft); margin-top:2px; } .toast { position:fixed; bottom:22px; right:22px; background: var(--ink); color:#fff; padding:12px 18px; border-radius: 8px; font-size:13.5px; box-shadow: var(--shadow); z-index: 999; max-width: 360px; } .toast.error { background: var(--danger); } .toast.ok { background: var(--ok); } .pill-group { display:flex; gap:6px; flex-wrap:wrap; } .section-divider { border:none; border-top:1px solid var(--line); margin: 18px 0; } .difal-note { background: var(--info-bg); color: var(--info); padding:10px 12px; border-radius: var(--radius); font-size:12.6px; margin-top:10px;} .totals-box { background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:14px 16px; margin-top: 10px;} .totals-box .line { display:flex; justify-content:space-between; padding: 3px 0; font-size:13.6px;} .totals-box .line.total { font-weight:700; border-top:1px solid var(--line); margin-top:6px; padding-top:8px; font-size:15px; color: var(--primary);} /* ---------- Busca global (topbar) ---------- */ .search-box { position:relative; width: 340px; margin-left: 14px; } .search-box input { width:100%; padding: 7px 12px; border-radius: 100px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color:#fff; font-size:13px; } .search-box input::placeholder { color: rgba(255,255,255,.65); } .search-box input:focus { outline:none; background:var(--paper); color: var(--ink); } .search-box input:focus::placeholder { color: var(--ink-soft); } .search-results { position:absolute; top: 38px; left:0; width:100%; background:var(--paper); border:1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); max-height: 360px; overflow-y:auto; z-index: 500; display:none; } .sr-item { padding: 9px 14px; cursor:pointer; border-bottom:1px solid var(--line); color: var(--ink); } .sr-item:last-child { border-bottom:none; } .sr-item:hover { background:var(--surface-hover); } .sr-empty { padding: 12px 14px; color: var(--ink-soft); font-size: 13px; } /* ---------- Combo-box (campo único de busca + seleção, tipo Select2) ---------- */ .combo-wrap { position: relative; } .combo-dropdown { position:absolute; top: calc(100% + 2px); left:0; width:100%; background:var(--paper); border:1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); max-height: 260px; overflow-y:auto; z-index: 60; } .combo-item { padding: 9px 12px; cursor:pointer; font-size: 13.5px; color: var(--ink); border-bottom:1px solid var(--line); } .combo-item:last-child { border-bottom:none; } .combo-item:hover, .combo-item.active { background:var(--surface-hover); } .combo-empty { padding: 10px 12px; color: var(--ink-soft); font-size: 13px; } /* ---------- Notificações (sino) ---------- */ .topbar-back { background:transparent; border:none; color:#fff; font-size:19px; padding:6px 10px; border-radius: var(--radius); cursor:pointer; flex-shrink:0; } .topbar-back:hover { background: rgba(255,255,255,.15); } .theme-toggle { background:transparent; border:none; color:#fff; font-size:16px; padding:6px 9px; border-radius: var(--radius); cursor:pointer; margin-right:4px; } .theme-toggle:hover { background: rgba(255,255,255,.15); } .theme-toggle.push-ativo { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } .bell-wrap { position:relative; } .bell { position:relative; background:transparent; border:none; color:#fff; font-size:18px; padding:6px 8px; border-radius: var(--radius); } .bell:hover { background: rgba(255,255,255,.15); } .bell-count { position:absolute; top:0; right:0; background: var(--danger); color:#fff; font-size:10px; font-weight:700; border-radius:100px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 3px; } .notif-panel { position:absolute; top:44px; right:0; width: 340px; max-height: 420px; overflow-y:auto; background:var(--paper); border:1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); z-index: 500; } .notif-head { padding: 12px 14px; font-weight:700; font-size:13px; color: var(--primary); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; } .notif-head a { font-size:11.5px; font-weight:500; color: var(--accent); text-decoration:none; } .notif-item { padding: 10px 14px; border-bottom:1px solid var(--line); cursor:pointer; font-size:13px; color: var(--ink); } .notif-item:hover { background:var(--surface-hover); } .notif-item.unread { background:var(--warn-bg); } .notif-item:last-child { border-bottom:none; } /* ---------- Tabs (dashboard / administração) ---------- */ .tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom: 16px; border-bottom: 1px solid var(--line); } .tab { padding: 9px 16px; font-size:13.2px; font-weight:600; color: var(--ink-soft); cursor:pointer; border-bottom: 2px solid transparent; } .tab:hover { color: var(--primary); } .tab.active { color: var(--primary); border-bottom-color: var(--accent); } /* ---------- Chips (seleção de perfis / níveis) ---------- */ .chip-group { display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0 4px; } .chip { display:flex; align-items:center; gap:5px; padding: 6px 12px; border:1px solid var(--line); border-radius:100px; font-size:12.6px; cursor:pointer; background:var(--surface); } .chip:hover { border-color: var(--accent-soft); } .chip input { margin:0; } /* ---------- Filtros / paginação (fornecedores etc.) ---------- */ .filter-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .filter-row .f { margin:0; } .pagination { display:flex; align-items:center; justify-content:center; gap:14px; padding: 14px; border-top:1px solid var(--line); } .row-actions { display:flex; gap:6px; flex-wrap:wrap; } /* ---------- KPI grande / badges extras ---------- */ .kpi-big { font-family: var(--font-display); font-size: 30px; font-weight:700; color: var(--primary); } .badge.urgente { background: var(--danger-bg); color: var(--danger); } /* ---------- Card recolhível (Histórico) ---------- */ .collapsible-header { cursor: pointer; user-select: none; display:flex; align-items:center; gap:6px; } .collapsible-header:hover { color: var(--accent); } #histArrow { font-size: 12px; display:inline-block; width: 12px; } /* ---------- Comparativo de cotações: linha recomendada em destaque ---------- */ tr.row-recomendado td { background: var(--ok-bg); font-weight:600; } /* ---------- Tela de Início ---------- */ .hero-banner { background: linear-gradient(135deg, var(--primary) 0%, #2A4D3A 100%); border-radius: 12px; padding: 26px 30px; margin-bottom: 20px; display:flex; align-items:center; justify-content:space-between; border-bottom: 4px solid var(--accent); } .hero-greeting { font-family: var(--font-display); font-size: 24px; font-weight:700; color:#fff; } .hero-sub { color: rgba(255,255,255,.75); font-size: 13px; margin-top:4px; text-transform:capitalize; } .hero-logo { height: 40px; width:auto; opacity:.95; } .hero-shortcut { cursor:pointer; transition: transform .12s ease, box-shadow .12s ease; } .hero-shortcut:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(31,61,46,.12); border-color: var(--accent-soft); } .hero-shortcut-icon { font-size: 26px; margin-bottom: 8px; } .hero-shortcut-title { font-family: var(--font-display); font-weight:700; color: var(--primary); font-size:15px; margin-bottom:4px; } /* ---------- Menu-gaveta (mobile) ---------- */ .menu-toggle { display:none; background:transparent; border:none; color:#fff; font-size:20px; padding:6px 10px; border-radius: var(--radius); cursor:pointer; flex-shrink:0; } .menu-toggle:hover { background: rgba(255,255,255,.15); } .sidebar-backdrop { display:none; } /* Modais nunca ultrapassam a largura da tela, em qualquer tamanho */ .card { max-width: 94vw; } /* ---------- Breakpoint mobile/tablet estreito ---------- */ @media (max-width: 860px) { .menu-toggle { display:inline-flex; align-items:center; justify-content:center; } .topbar { padding: 0 10px; gap: 8px; } .topbar .brand-text { display:none; } .topbar .who { display:none; } .logout-text { display:none; } .topbar .logout { padding: 8px 11px; } .topbar .logout::after { content: '⎋'; font-size:15px; } .search-box { width:auto; flex:1 1 auto; min-width:0; margin-left:0; } .body-row { position: relative; } .sidebar { position: fixed; top:56px; left:0; bottom:0; z-index: 800; width: 240px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 4px 0 20px rgba(0,0,0,.18); } .sidebar.open { transform: translateX(0); } .sidebar-backdrop.open { display:block; position:fixed; top:56px; left:0; right:0; bottom:0; background:rgba(15,25,18,.4); z-index:790; } .main { padding: 18px 14px 50px; } .card { padding: 16px 16px; } .page-title { font-size: 20px; } .hero-banner { padding: 20px 18px; flex-wrap:wrap; gap:14px; } .hero-greeting { font-size: 19px; } .hero-logo { height: 32px; } table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } .item-row { grid-template-columns: 1fr; } .row { flex-direction: column; } .pagination { flex-wrap: wrap; } } @media (max-width: 480px) { .login-card { width: 92vw; padding: 30px 22px; } .search-box input { font-size: 12.6px; } }