/* Reset & Base */ *{box-sizing:border-box;margin:0;padding:0} :root{ --primary:#2d6a2d;--primary-light:#4a9a4a;--primary-dark:#1a3d1a; --accent:#ff6f00;--accent-light:#ffa040; --bg:#f2f5f2;--surface:#fff;--surface2:#f5f9f5; --text:#1a2e1a;--text2:#5a6860;--text3:#96a89e; --border:#dde8dd;--shadow:0 2px 8px rgba(45,106,45,.08); --success:#2e7d32;--warn:#f57f17;--error:#c62828;--info:#388e3c; --sidebar-w:240px; } body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px} #app{display:flex;min-height:100vh} /* SIDEBAR — mini por padrão, expande no hover ou quando fixado */ .sidebar{ width:56px;background:var(--primary-dark);color:#fff; display:flex;flex-direction:column;position:fixed;top:0;left:0; height:100vh;z-index:100;overflow:hidden; transition:width .25s .18s ease; /* delay antes de colapsar */ } .sidebar:hover{width:var(--sidebar-w);transition:width .2s ease;overflow-y:auto} .sidebar.pinned{width:var(--sidebar-w);overflow-y:auto;transition:width .2s ease} /* Cabeçalho */ .sidebar-header{padding:13px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.1);min-height:62px;overflow:hidden;flex-shrink:0} .logo{flex-shrink:0;width:36px;height:36px;border-radius:50%;object-fit:cover} .logo-title{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;opacity:0;transition:opacity .12s;flex:1} .logo-sub{font-size:.63rem;opacity:0;white-space:nowrap;overflow:hidden;transition:opacity .12s} .sidebar:hover .logo-title,.sidebar.pinned .logo-title{opacity:1;transition:opacity .18s .12s} .sidebar:hover .logo-sub,.sidebar.pinned .logo-sub{opacity:.65;transition:opacity .18s .12s} /* Botão de fixar/desafixar */ .sidebar-pin-btn{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.45);cursor:pointer;font-size:.78rem;padding:4px 6px;border-radius:4px;flex-shrink:0;opacity:0;pointer-events:none;transition:.15s;line-height:1} .sidebar:hover .sidebar-pin-btn,.sidebar.pinned .sidebar-pin-btn{opacity:1;pointer-events:auto} .sidebar-pin-btn:hover{background:rgba(255,255,255,.15);color:#fff} .sidebar.pinned .sidebar-pin-btn{color:#ffd54f} /* Filtro do menu — só faz sentido com a sidebar expandida (hover/pinned/mobile) */ .sidebar-filter{padding:0 10px;max-height:0;opacity:0;overflow:hidden;transition:opacity .12s,max-height .12s;flex-shrink:0} .sidebar:hover .sidebar-filter,.sidebar.pinned .sidebar-filter{max-height:40px;opacity:1;padding:4px 10px 8px;transition:opacity .18s .1s,max-height .18s .1s} .sidebar-filter-input{width:100%;padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:.78rem;outline:none} .sidebar-filter-input::placeholder{color:rgba(255,255,255,.4)} .sidebar-filter-input:focus{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.13)} /* Nav menu — precisa rolar quando a lista não cabe na altura da tela */ .nav-menu{list-style:none;padding:6px 0;flex:1;overflow-y:auto;overflow-x:hidden;min-height:0} .nav-menu::-webkit-scrollbar{width:6px} .nav-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px} .nav-menu::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)} /* Enquanto o filtro tem texto, ignora o collapse dos grupos (accordion) pra mostrar qualquer item que bata, mesmo em grupo fechado */ .sidebar.filtro-ativo .nav-item.nav-group-hidden{display:flex} .nav-item.filtro-hidden,.nav-divider.filtro-hidden{display:none!important} .nav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;color:rgba(255,255,255,.75);font-size:.83rem;font-weight:500;border-left:3px solid transparent;white-space:nowrap;overflow:hidden;transition:background .12s,color .12s} .nav-item:hover{background:rgba(255,255,255,.09);color:#fff} .nav-item.active{background:rgba(255,255,255,.13);color:#fff;border-left-color:var(--accent)} .nav-label{opacity:0;transition:opacity .12s;white-space:nowrap} .sidebar:hover .nav-label,.sidebar.pinned .nav-label{opacity:1;transition:opacity .18s .1s} .nav-divider{padding:0 14px;font-size:.65rem;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;max-height:0;opacity:0;transition:max-height .2s,opacity .12s,padding .2s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none} .sidebar:hover .nav-divider,.sidebar.pinned .nav-divider{max-height:28px;opacity:1;padding:8px 14px 3px;transition:max-height .2s .1s,opacity .18s .1s,padding .2s .1s} .sidebar:hover .nav-divider:hover,.sidebar.pinned .nav-divider:hover{color:rgba(255,255,255,.7)} .nav-group-arrow{font-size:.6rem;opacity:.5;flex-shrink:0;transition:transform .2s;margin-left:4px} .nav-divider.nav-group-collapsed .nav-group-arrow{opacity:.8} .nav-div-icon{font-size:.9rem;flex-shrink:0;margin-right:5px;text-transform:none;letter-spacing:0} .nav-item.nav-group-hidden{display:none} .nav-icon{font-size:1rem;flex-shrink:0;width:28px;text-align:center} /* Footer */ .sidebar-footer{padding:6px 0 8px;border-top:1px solid rgba(255,255,255,.1);overflow:hidden;flex-shrink:0} /* Ícone compacto — visível quando sidebar colapsada, some quando expande */ .sidebar-user-icon{display:flex;align-items:center;justify-content:center;height:36px;font-size:1.2rem;cursor:default;opacity:1;transition:opacity .1s} .sidebar:hover .sidebar-user-icon,.sidebar.pinned .sidebar-user-icon{opacity:0;height:0;overflow:hidden;transition:opacity .06s,height .06s .06s} /* Conteúdo expandido — oculto quando colapsado, aparece no hover/pinned */ .sidebar-user-expanded{padding:0 14px;opacity:0;overflow:hidden;max-height:0;transition:opacity .12s,max-height .12s} .sidebar:hover .sidebar-user-expanded,.sidebar.pinned .sidebar-user-expanded{opacity:1;max-height:90px;transition:opacity .18s .1s,max-height .18s .1s} .sidebar-user-label{font-size:.7rem;color:rgba(255,255,255,.5);margin-bottom:1px;white-space:nowrap} .sidebar-user-nome{font-size:.82rem;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sidebar-sair-btn{margin-top:5px;width:100%;padding:4px 0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);border-radius:5px;cursor:pointer;font-size:.74rem} .sidebar-sair-btn:hover{background:rgba(255,255,255,.2)} /* Status API — oculto colapsado, visível no hover/pinned */ .api-badge{font-size:.65rem;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;padding:4px 14px 0;opacity:0;max-height:0;transition:opacity .12s,max-height .12s} .sidebar:hover .api-badge,.sidebar.pinned .api-badge{opacity:1;max-height:24px;transition:opacity .18s .1s,max-height .18s .1s} /* MAIN */ .main-content{margin-left:56px;flex:1;display:flex;flex-direction:column;min-height:100vh;transition:margin-left .2s} .sidebar.pinned~.main-content{margin-left:var(--sidebar-w);transition:margin-left .2s} .topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;height:56px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:50;box-shadow:var(--shadow)} .menu-toggle{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:4px 8px;border-radius:6px;color:var(--text2)} .menu-toggle:hover{background:var(--bg)} .topbar-title{font-weight:700;font-size:1rem;color:var(--primary);flex:1} .topbar-right{display:flex;align-items:center;gap:10px;font-size:.78rem} .status-badge{padding:3px 10px;border-radius:12px;background:#e8f5e9;color:var(--primary);font-weight:600} .status-badge.ok{background:#e8f5e9;color:var(--success)} .date-badge{color:var(--text2)} .page{display:none;padding:24px;animation:fadeIn .2s ease} .page.active{display:block} @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* CARDS */ .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px} /* Topo do Dashboard: Resultado do Mês (esquerda, maior) + Agenda Financeira (direita) — pedido do usuário 11/08/2026, agenda visível já na tela inicial sem entrar na página */ .dash-top-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px} .dash-top-grid>div{display:flex;flex-direction:column} .dash-top-grid>div>.card{flex:1} .card{background:var(--surface);border-radius:12px;padding:20px;box-shadow:var(--shadow);border:1px solid var(--border)} .card-kpi{text-align:center} .card-kpi .val{font-size:2rem;font-weight:800;color:var(--primary);line-height:1} .card-kpi .lbl{font-size:.75rem;color:var(--text2);margin-top:6px} .card-kpi .sub{font-size:.7rem;color:var(--text3);margin-top:2px} .card-title{font-weight:700;font-size:.9rem;color:var(--primary);margin-bottom:12px;display:flex;align-items:center;gap:6px} .card-accent-blue{border-left:4px solid var(--primary)} .card-accent-orange{border-left:4px solid var(--accent)} .card-accent-green{border-left:4px solid var(--success)} .card-accent-red{border-left:4px solid var(--error)} /* TABLES */ .table-wrapper{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden} .table-header{padding:14px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--border)} .table-header h3{font-size:.9rem;font-weight:700;color:var(--primary);flex:1} table{width:100%;border-collapse:collapse;font-size:.8rem} thead tr{background:var(--primary);color:#fff} thead th{padding:10px 8px;text-align:left;cursor:pointer;user-select:none;white-space:nowrap;font-weight:600} thead th:hover{background:var(--primary-light)} tbody tr:nth-child(even){background:var(--surface2)} tbody tr:hover{background:#e8f5e9} td{padding:7px 8px;border-bottom:1px solid #f0f2f8;vertical-align:middle} td.num{text-align:right;font-family:'Courier New',monospace;font-size:.78rem} .table-footer{padding:10px 16px;display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--text2);border-top:1px solid var(--border)} /* BADGES */ .badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:.72rem;font-weight:600;white-space:nowrap} .badge-ok{background:#e8f5e9;color:var(--success)} .badge-warn{background:#fff8e1;color:var(--warn)} .badge-err{background:#ffebee;color:var(--error)} .badge-info{background:#e8f5e9;color:var(--info)} .badge-purple{background:#f3e5f5;color:#6a1b9a} .badge-cliente{background:#f1f8e9;color:#33691e} .badge-fornecedor{background:#e8f5e9;color:#2e7d32} .badge-ambos{background:#fff3e0;color:#e65100} /* CONTROLS */ .controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center} .inp{padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:.83rem;outline:none;background:var(--surface);color:var(--text)} .inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(45,106,45,.12)} .btn{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:.82rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:.15s} .btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-light)} .btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:var(--accent-light)} .btn-outline{background:transparent;border:1px solid var(--primary);color:var(--primary)}.btn-outline:hover{background:#e8f5e9} .btn-sm{padding:5px 10px;font-size:.75rem} .btn-danger{background:var(--error);color:#fff} /* PAGINATION */ .pagination{display:flex;gap:4px;align-items:center;justify-content:flex-end} .pagination button{padding:5px 10px;border:1px solid var(--border);background:var(--surface);border-radius:6px;cursor:pointer;font-size:.78rem;color:var(--text2)} .pagination button:disabled{opacity:.35;cursor:default} .pagination button.active{background:var(--primary);color:#fff;border-color:var(--primary-light)} /* AGENT CARDS */ .agent-card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden} .agent-header{padding:16px 20px;display:flex;align-items:center;gap:12px} .agent-avatar{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0} .agent-av-blue{background:#e8f5e9} .agent-av-green{background:#e8f5e9} .agent-av-orange{background:#fff3e0} .agent-av-purple{background:#f3e5f5} .agent-name{font-weight:700;font-size:.95rem;color:var(--primary)} .agent-role{font-size:.75rem;color:var(--text2)} .agent-body{padding:0 20px 20px} .agent-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:.83rem;resize:vertical;min-height:80px;font-family:inherit;outline:none;background:var(--surface2)} .agent-input:focus{border-color:var(--primary-light)} .agent-output{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:14px;margin-top:12px;font-size:.82rem;line-height:1.6;white-space:pre-wrap;max-height:400px;overflow-y:auto} .agent-output.loading{color:var(--text3);font-style:italic} .agent-tokens{font-size:.7rem;color:var(--text3);margin-top:6px;text-align:right} /* INVENTARIO */ .scanner-area{background:var(--primary-dark);border-radius:16px;padding:30px;text-align:center;margin-bottom:20px;position:relative;overflow:hidden} .scanner-area::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;background:rgba(255,107,0,.7);box-shadow:0 0 10px rgba(255,107,0,.5);animation:scan 2s ease-in-out infinite} @keyframes scan{0%,100%{top:30%}50%{top:70%}} .scanner-input{font-size:1.8rem;background:transparent;border:none;border-bottom:2px solid rgba(255,255,255,.4);color:#fff;text-align:center;width:100%;outline:none;padding:8px;letter-spacing:.2em} .scanner-input::placeholder{color:rgba(255,255,255,.3);font-size:1rem;letter-spacing:0} .scanner-label{color:rgba(255,255,255,.7);font-size:.85rem;margin-bottom:12px} .product-found{background:var(--surface);border-radius:12px;padding:20px;box-shadow:var(--shadow);border:2px solid var(--success)} .product-found h3{color:var(--primary);font-size:1rem;margin-bottom:12px} .product-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .pinfo{background:var(--surface2);border-radius:8px;padding:12px;text-align:center} .pinfo .pval{font-size:1.4rem;font-weight:700;color:var(--primary)} .pinfo .plbl{font-size:.72rem;color:var(--text2);margin-top:4px} .inventory-log{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);overflow:hidden} /* DASHBOARD WIDGETS */ .section-title{font-size:1rem;font-weight:700;color:var(--primary);margin:0 0 14px;display:flex;align-items:center;gap:8px} .alert-box{border-left:4px solid;padding:12px 16px;border-radius:0 8px 8px 0;margin-bottom:8px;font-size:.83rem} .alert-warn{background:#fff8e1;border-color:var(--warn)} .alert-err{background:#ffebee;border-color:var(--error)} .alert-ok{background:#e8f5e9;border-color:var(--success)} .alert-info{background:#f1f8e9;border-color:var(--info)} /* TAGS */ .tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-family:monospace;background:#e8f5e9;color:var(--primary)} /* FORM */ .form-section{background:var(--surface);border-radius:12px;padding:20px;box-shadow:var(--shadow);margin-bottom:16px} .form-section h3{font-size:.9rem;font-weight:700;color:var(--primary);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)} .form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px} .form-group{display:flex;flex-direction:column;gap:4px} .form-group label{font-size:.75rem;font-weight:600;color:var(--text2)} .form-group .inp{width:100%} /* LOADING */ .spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(45,106,45,.2);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle} @keyframes spin{to{transform:rotate(360deg)}} .loading-overlay{text-align:center;padding:40px;color:var(--text3)} /* OVERLAY mobile */ .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199} .sidebar-overlay.active{display:block} /* Botão flutuante do menu — só aparece no mobile (ver @media 900px abaixo) */ .mobile-menu-fab{ display:none;position:fixed;right:16px;bottom:20px;z-index:250; width:52px;height:52px;border-radius:50%;border:none; background:var(--accent,#2d6a2d);color:#fff;font-size:1.3rem; box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer; } .mobile-menu-fab:active{transform:scale(.94)} /* ═══ MOBILE / TABLET ═══════════════════════════════════════════════════════ */ @media(max-width:900px){ /* ── Sidebar: drawer off-screen por padrão ── */ .sidebar{ transform:translateX(-100%); transition:transform .25s ease!important; width:var(--sidebar-w)!important; z-index:200; overflow-y:auto!important; } .sidebar.mobile-open{transform:translateX(0)!important} .mobile-menu-fab{display:flex;align-items:center;justify-content:center} /* Labels sempre visíveis quando drawer abre */ .sidebar .nav-label,.sidebar .logo-title,.sidebar .logo-sub, .sidebar .api-badge,.sidebar .sidebar-pin-btn{opacity:1!important;max-height:24px!important;transition:none!important;pointer-events:auto!important} .sidebar .sidebar-filter{opacity:1!important;max-height:40px!important;padding:4px 10px 8px!important;transition:none!important} .sidebar .sidebar-user-expanded{opacity:1!important;max-height:90px!important;transition:none!important} .sidebar .sidebar-user-icon{opacity:0!important;height:0!important;overflow:hidden!important} .sidebar .nav-divider{max-height:28px!important;opacity:1!important;padding:8px 14px 3px!important} /* Main sem margem (sidebar não ocupa espaço) */ .main-content{margin-left:0!important;transition:none} .sidebar.pinned~.main-content{margin-left:0!important} /* ── Topbar ── */ .topbar{padding:0 10px;gap:8px;height:52px} .topbar-title{font-size:.88rem} .date-badge{display:none} .status-badge{font-size:.7rem;padding:2px 8px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu-toggle{font-size:1.3rem;padding:8px 11px;min-width:44px;min-height:44px;border-radius:8px} /* ── Páginas ── */ .page{padding:10px} /* ── Cards / grids ── */ .cards-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px} .form-grid{grid-template-columns:1fr!important} .dash-top-grid{grid-template-columns:1fr!important} .card{padding:12px} .card-kpi .val{font-size:1.4rem} /* ── Tabelas ── */ .table-wrapper,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table{min-width:520px} th,td{padding:6px 8px;font-size:.78rem} } @media(max-width:600px){ .cards-grid{grid-template-columns:1fr!important} .topbar-title{font-size:.82rem} .status-badge{display:none} } /* ── PDV mobile ──────────────────────────────────────────────────────────── */ @media(max-width:900px){ .pdv-layout{grid-template-columns:1fr!important;gap:12px!important} .pdv-kpis{grid-template-columns:repeat(2,1fr)!important;gap:8px!important} .pdv-cart{position:static!important;top:auto!important} .pdv-tab-bar{display:flex!important} .pdv-panel{display:none} .pdv-panel.pdv-active{display:block!important} /* busca input grande */ #pdv-busca{font-size:1rem!important;padding:12px 14px!important} /* resultados menos espaço */ #pdv-resultados{max-height:340px!important} } /* Selects com fundo translúcido/branco sobre o header colorido (ex: #pdv-vendedor) usam texto branco pra combinar com o header — mas isso deixava as