:root { --bg:#0f172a;--bg2:#1e293b;--bg3:#334155;--surface:#1e293b;--surface2:#2d3f55; --border:#334155;--border2:#475569;--text:#f1f5f9;--text2:#94a3b8;--text3:#64748b; --accent:#3b82f6;--accent2:#60a5fa;--success:#10b981;--warning:#f59e0b; --danger:#ef4444;--gold:#f59e0b;--silver:#94a3b8;--bronze:#cd7c3a;--diamond:#67e8f9; --radius:10px;--radius-lg:16px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TEMA CLARO — escopo limitado ao v2 (Pedidos de Compras) Ativado por data-pedv2-tema="light" no #pedv2-screen-root. Não afeta nenhum outro módulo do app. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ #pedv2-screen-root[data-pedv2-tema="light"] { --bg:#f8fafc; --bg2:#f1f5f9; --bg3:#e2e8f0; --surface:#ffffff; --surface2:#f1f5f9; --border:#e2e8f0; --border2:#cbd5e1; --text:#0f172a; --text2:#475569; --text3:#94a3b8; --accent:#2563eb; --accent2:#3b82f6; --success:#059669; --warning:#d97706; --danger:#dc2626; background:var(--bg) !important; color:var(--text); } /* Sombras mais suaves no tema claro */ #pedv2-screen-root[data-pedv2-tema="light"] .card { box-shadow:0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06); } /* Inputs no tema claro */ #pedv2-screen-root[data-pedv2-tema="light"] input, #pedv2-screen-root[data-pedv2-tema="light"] select, #pedv2-screen-root[data-pedv2-tema="light"] textarea { background:#fff !important; color:var(--text); border-color:var(--border) !important; } #pedv2-screen-root[data-pedv2-tema="light"] input::placeholder, #pedv2-screen-root[data-pedv2-tema="light"] textarea::placeholder { color:#94a3b8; } /* Botão secundário no tema claro */ #pedv2-screen-root[data-pedv2-tema="light"] .btn-secondary { background:#f1f5f9; color:#334155; border:1px solid #e2e8f0; } #pedv2-screen-root[data-pedv2-tema="light"] .btn-secondary:hover { background:#e2e8f0; } /* Modais do v2 (overlay mais leve no tema claro) */ #pedv2-screen-root[data-pedv2-tema="light"] { --modal-overlay:rgba(15,23,42,.45); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DESTAQUE DA LINHA (NF que o usuário está trabalhando) Aplicado nas células diretamente pra sobrepor styles inline. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ #nf-screen-root tr.nf-destacada > td { background: rgba(91,143,212,.40) !important; font-weight: 700 !important; } #nf-screen-root tr.nf-destacada { opacity: 1 !important; box-shadow: inset 6px 0 0 #5b8fd4; } #nf-screen-root[data-nf-tema="light"] tr.nf-destacada > td { background: rgba(37,99,235,.20) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TEMA CLARO — escopo limitado ao módulo Controle de NFs Ativado por data-nf-tema="light" no #nf-screen-root. Não afeta nenhum outro módulo do app. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ #nf-screen-root[data-nf-tema="light"] { --bg:#f8fafc; --bg2:#f1f5f9; --bg3:#e2e8f0; --surface:#ffffff; --surface2:#f1f5f9; --border:#e2e8f0; --border2:#cbd5e1; --text:#0f172a; --text2:#475569; --text3:#64748b; --accent:#2563eb; --accent2:#3b82f6; --success:#059669; --warning:#d97706; --danger:#dc2626; background:var(--bg) !important; color:var(--text); } #nf-screen-root[data-nf-tema="light"] table { background:var(--surface); } #nf-screen-root[data-nf-tema="light"] thead tr { background:var(--surface2) !important; } #nf-screen-root[data-nf-tema="light"] tbody tr { border-color:var(--border); } #nf-screen-root[data-nf-tema="light"] input, #nf-screen-root[data-nf-tema="light"] select, #nf-screen-root[data-nf-tema="light"] textarea { background:#fff !important; color:var(--text) !important; border-color:var(--border) !important; } #nf-screen-root[data-nf-tema="light"] input::placeholder, #nf-screen-root[data-nf-tema="light"] textarea::placeholder { color:#94a3b8; } #nf-screen-root[data-nf-tema="light"] .btn-secondary { background:#f1f5f9; color:#334155; border:1px solid #e2e8f0; } #nf-screen-root[data-nf-tema="light"] .btn-secondary:hover { background:#e2e8f0; } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.5} /* LAYOUT */ .app{display:flex;min-height:100vh} .sidebar{width:224px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .2s} .sidebar-brand{padding:18px 16px 14px;border-bottom:1px solid var(--border)} .logo{font-size:20px;font-weight:900;letter-spacing:-1px}.logo span{color:var(--accent2)} .logo-sub{font-size:11px;color:var(--text3);margin-top:2px} .sidebar-nav{flex:1;padding:10px 0;overflow-y:auto} .nav-section{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--text3);padding:12px 16px 4px;text-transform:uppercase} .nav-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;color:var(--text2);border-left:3px solid transparent;font-size:13px;font-weight:500;transition:all .15s} .nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)} .nav-item.active{background:rgba(59,130,246,.12);color:var(--accent2);border-left-color:var(--accent)} .nav-item .ico{font-size:16px;width:20px;text-align:center} .sidebar-footer{padding:12px 16px;border-top:1px solid var(--border);font-size:11px;color:var(--text3)} .main{margin-left:224px;flex:1;display:flex;flex-direction:column;min-height:100vh} /* TOPBAR */ .topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50} .topbar-left{display:flex;align-items:center;gap:12px} .topbar-title{font-size:16px;font-weight:700} .topbar-sub{font-size:12px;color:var(--text3);margin-top:1px} .month-selector{display:flex;align-items:center;gap:8px} .month-btn{background:var(--surface2);border:1px solid var(--border2);color:var(--text2);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s} .month-btn:hover{background:var(--bg3);color:var(--text)} .month-btn:disabled{opacity:.3;cursor:not-allowed} .month-label{font-size:13px;font-weight:700;color:var(--accent2);min-width:130px;text-align:center;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);border-radius:6px;padding:4px 12px} .content{padding:24px;flex:1} /* VIEWS */ .view{display:none}.view.active{display:block} /* CARDS */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px} .card-title{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;display:flex;align-items:center;gap:8px} .card-title .ico{color:var(--accent2)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} /* STAT CARDS */ .stat-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:16px} .stat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px} .stat-value{font-size:24px;font-weight:800;letter-spacing:-.5px} .stat-sub{font-size:11px;color:var(--text3);margin-top:4px} .stat-delta{font-size:11px;margin-top:4px} .delta-up{color:var(--success)}.delta-down{color:var(--danger)}.delta-neutral{color:var(--text3)} /* BUTTONS */ .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;transition:all .15s;white-space:nowrap} .btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#2563eb} .btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border2)}.btn-secondary:hover{background:var(--bg3)} .btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#059669} .btn-danger{background:var(--danger);color:#fff} .btn-sm{padding:5px 10px;font-size:12px} .btn:disabled{opacity:.4;cursor:not-allowed} /* UPLOAD ZONE */ .upload-zone{border:2px dashed var(--border2);border-radius:var(--radius-lg);padding:28px;text-align:center;cursor:pointer;transition:all .2s;background:rgba(255,255,255,.02)} .upload-zone:hover,.upload-zone.drag{border-color:var(--accent);background:rgba(59,130,246,.06)} .upload-zone .ico-big{font-size:32px;margin-bottom:10px} .upload-zone h3{font-size:14px;font-weight:700;margin-bottom:4px} .upload-zone p{font-size:12px;color:var(--text2)} .upload-zone input{display:none} /* BUSCA & FILTROS */ .filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap} .search-input{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:7px 12px 7px 34px;font-size:13px;outline:none;width:240px;transition:border-color .15s} .search-input:focus{border-color:var(--accent)} .search-wrap{position:relative} .search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px;pointer-events:none} select.filter-select{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:7px 12px;font-size:13px;outline:none;cursor:pointer} select.filter-select:focus{border-color:var(--accent)} select.filter-select option{background:var(--bg2)} /* TABLE */ .table-wrap{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:13px} thead tr{border-bottom:2px solid var(--border)} th{padding:9px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;cursor:pointer;user-select:none} th:hover{color:var(--text2)} th .sort-ico{font-size:10px;margin-left:4px;opacity:.5} td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle} tr:hover td{background:rgba(255,255,255,.02)} tr:last-child td{border-bottom:none} .td-name{font-weight:600} .td-mono{font-family:monospace;font-size:12px} .no-results{text-align:center;padding:32px;color:var(--text3);font-size:13px} /* BADGES */ .badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap} .badge-bronze{background:rgba(205,124,58,.18);color:#cd7c3a} .badge-prata{background:rgba(148,163,184,.18);color:#94a3b8} .badge-ouro{background:rgba(245,158,11,.18);color:#f59e0b} .badge-diamante{background:rgba(103,232,249,.18);color:#67e8f9} .badge-none{background:rgba(100,116,139,.15);color:var(--text3)} .badge-success{background:rgba(16,185,129,.15);color:var(--success)} .badge-warning{background:rgba(245,158,11,.15);color:var(--warning)} .badge-danger{background:rgba(239,68,68,.15);color:var(--danger)} .badge-info{background:rgba(59,130,246,.15);color:var(--accent2)} /* FORM */ .form-row{margin-bottom:14px} label.form-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px} input[type=text],input[type=number],input[type=tel],select,textarea{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:8px 12px;font-size:13px;outline:none;transition:border-color .15s} input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.15)} select option{background:var(--bg2)} /* PROGRESS */ .progress-bar{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin:4px 0} .progress-fill{height:100%;border-radius:4px;transition:width .5s ease} .fill-bronze{background:var(--bronze)}.fill-prata{background:var(--silver)} .fill-ouro{background:var(--gold)}.fill-diamante{background:var(--diamond)} .fill-none{background:var(--text3)} /* LOJA ACCORDION */ .loja-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:12px;overflow:hidden} .loja-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;transition:background .15s} .loja-header:hover{background:rgba(255,255,255,.03)} .loja-name{font-weight:800;font-size:14px} .loja-stats{display:flex;gap:16px;font-size:12px;color:var(--text2);align-items:center} .loja-body{display:none;border-top:1px solid var(--border)} .loja-body.open{display:block} .chevron{transition:transform .2s;font-size:12px;color:var(--text3)} .loja-header.open .chevron{transform:rotate(180deg)} /* TOAST */ #toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px} .toast{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:12px 16px;font-size:13px;font-weight:500;box-shadow:0 4px 24px rgba(0,0,0,.4);display:flex;align-items:center;gap:10px;min-width:280px;animation:slide-in .2s ease} .toast.success{border-left:3px solid var(--success)}.toast.error{border-left:3px solid var(--danger)} .toast.info{border-left:3px solid var(--accent)}.toast.warning{border-left:3px solid var(--warning)} @keyframes slide-in{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}} /* MODAL */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;display:none;align-items:center;justify-content:center} .modal-overlay.open{display:flex} .modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:24px;max-width:500px;width:90%;box-shadow:0 4px 24px rgba(0,0,0,.4);max-height:90vh;overflow-y:auto} .modal-title{font-size:16px;font-weight:800;margin-bottom:16px} .modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:20px} /* LOADING */ #loading-overlay{position:fixed;inset:0;background:rgba(15,23,42,.85);z-index:9998;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px} #loading-overlay.show{display:flex} #loading-overlay p{color:var(--text2);font-size:14px} .spinner{width:32px;height:32px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* EMPTY STATE */ .empty-state{text-align:center;padding:48px 24px;color:var(--text3)} .empty-state .ico{font-size:48px;margin-bottom:12px} .empty-state h3{font-size:16px;font-weight:700;color:var(--text2);margin-bottom:8px} /* RANK */ .rank-pos{font-size:18px;font-weight:900;color:var(--text3);width:32px;text-align:center} .rank-pos.p1{color:var(--gold)}.rank-pos.p2{color:var(--silver)}.rank-pos.p3{color:var(--bronze)} /* HISTORY */ .hist-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s} .hist-row:hover{background:rgba(255,255,255,.03)} .hist-row:last-child{border-bottom:none} /* UTILS */ .flex{display:flex}.flex-center{display:flex;align-items:center} .flex-between{display:flex;align-items:center;justify-content:space-between} .gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px} .mt-8{margin-top:8px}.mt-16{margin-top:16px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px} .text-sm{font-size:12px}.text-muted{color:var(--text2)}.text-success{color:var(--success)} .text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.text-accent{color:var(--accent2)} .bold{font-weight:700}.font-mono{font-family:monospace} .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px} .dot-green{background:var(--success)}.dot-red{background:var(--danger)}.dot-yellow{background:var(--warning)} /* MENU BTN MOBILE */ .menu-btn{display:none;background:none;border:none;color:var(--text);cursor:pointer;font-size:20px} /* ======================================== ADAPTAÇÃO MOBILE — Comissões Tudo até 900px de largura ======================================== */ @media(max-width:900px){ /* Sidebar vira off-canvas */ .sidebar{transform:translateX(-100%)} .sidebar.open{transform:translateX(0)} .main{margin-left:0} .menu-btn{display:flex} /* Topbar mais compacta */ .topbar{padding:10px 14px;flex-wrap:wrap;gap:8px} .topbar-title{font-size:14px} .topbar-sub{font-size:11px} .btn-hub{padding:4px 8px;font-size:11px} .btn-hub svg{width:11px;height:11px} /* Mês selector + Novo mês compactos */ .month-selector{gap:4px} .month-btn{width:30px;height:30px;font-size:11px} .month-label{font-size:12px;padding:4px 10px;min-width:auto} .topbar .btn-sm{padding:6px 10px;font-size:11px} /* Conteúdo menos padded */ .content{padding:14px 12px} /* KPI cards: 1 coluna em mobile, COMPACTOS */ .grid-4{grid-template-columns:1fr;gap:8px;margin-bottom:14px} .grid-3{grid-template-columns:1fr 1fr} .stat-card{padding:12px 14px} .stat-card .stat-label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px;color:var(--text3)} .stat-card .stat-value{font-size:20px;line-height:1.15;margin-top:0;font-weight:800;letter-spacing:-.3px} .stat-card .stat-sub, .stat-card .stat-delta{font-size:10px;margin-top:1px} /* Cards de Top Vendedores e Faixas: empilham */ .grid-2{grid-template-columns:1fr;gap:10px} /* Card geral: padding reduzido */ .card{padding:14px} .card-title{font-size:13px} /* Top vendedores em mobile — formato lista densa */ .ranking-item{padding:10px 8px !important;gap:8px !important} .ranking-pos{width:22px;height:22px;font-size:11px;flex-shrink:0} .ranking-info{min-width:0;flex:1;overflow:hidden} .ranking-info > div:first-child{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ranking-info > div:last-child{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ranking-value{font-size:13px;font-weight:700;flex-shrink:0;white-space:nowrap} /* Faixas com barras */ .faixa-bar-row{padding:6px 0} .faixa-bar-label{font-size:10px} .faixa-bar-count{font-size:10px} /* Tabela "Resumo por Loja" */ .table-loja-resumo{font-size:11px} .table-loja-resumo th{padding:6px 4px;font-size:9px} .table-loja-resumo td{padding:8px 4px;font-size:11px} .table-loja-resumo td:first-child{font-weight:700} /* =================== REL. PAGAMENTO mobile =================== */ /* Card por loja: padding reduzido */ #view-pagamento .card{padding:14px !important} /* Header da loja (flex-between): empilha em mobile */ #view-pagamento .flex-between{flex-direction:column;align-items:stretch !important;gap:10px} #view-pagamento .flex-between > .flex-center.gap-8{justify-content:flex-start} #view-pagamento .flex-between > .flex-center.gap-10{justify-content:space-between;flex-wrap:wrap;gap:8px} /* Botão WhatsApp/Copiar maior pro dedo */ #view-pagamento .btn-sm{padding:8px 12px;font-size:12px} /* Tabela de pagamento: vira lista vertical em mobile */ #view-pagamento .table-wrap{overflow:visible} #view-pagamento table{width:100%;display:block} #view-pagamento table thead{display:none} #view-pagamento table tbody{display:block} #view-pagamento table tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 4px;border-bottom:1px solid var(--border);align-items:center} #view-pagamento table tr:last-child{border-bottom:none} #view-pagamento table td{display:block;padding:0;border:none} /* Matrícula: pequena no canto superior esquerdo */ #view-pagamento table td:nth-child(1){grid-column:1;grid-row:1;font-size:10px;color:var(--text3)} /* Nome: maior abaixo */ #view-pagamento table td:nth-child(2){grid-column:1;grid-row:2;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} /* Faixa: badge no canto superior direito */ #view-pagamento table td:nth-child(3){grid-column:2;grid-row:1;text-align:right;font-size:10px} /* Comissão: valor grande à direita */ #view-pagamento table td:nth-child(4){grid-column:2;grid-row:2;text-align:right !important;font-size:14px !important;font-weight:800 !important;white-space:nowrap} /* Total (tfoot): só rótulo + valor */ #view-pagamento table tfoot{display:block} #view-pagamento table tfoot tr{grid-template-columns:1fr auto;background:rgba(16,185,129,.06)} #view-pagamento table tfoot tr td:first-child{grid-column:1;grid-row:1;display:block !important;padding:8px 4px !important;font-size:11px !important;text-transform:uppercase;letter-spacing:.05em} #view-pagamento table tfoot tr td:last-child{grid-column:2;grid-row:1;padding:8px 4px !important;font-size:14px !important} /* Summary bar do Pagamento: compacto */ #view-pagamento .summary-bar{flex-direction:column !important;gap:6px !important;padding:10px 14px !important} /* AVISO em telas que não estão otimizadas pra mobile */ .mobile-warning{display:none;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:14px;font-size:12px;color:var(--text2);line-height:1.5;align-items:flex-start;gap:10px} .mobile-warning .ico{font-size:18px;flex-shrink:0} /* Mostra o aviso quando estiver dentro de uma view "não-otimizada" */ #view-importar .mobile-warning, #view-metas .mobile-warning, #view-contatos .mobile-warning, #view-historico .mobile-warning{display:flex} } /* Regras genéricas (sempre ativas, não dependem de media query) */ .mobile-warning{display:none} /* ===== MÓDULO METAS GERAIS — responsivo ===== */ /* Wrapper de scroll horizontal pras tabelas largas (Meta Vendas/Receita, Comparativo, Históricas) */ .meta-table-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-radius:12px} .meta-table-scroll::-webkit-scrollbar{height:8px} .meta-table-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:4px} .meta-table-scroll::-webkit-scrollbar-thumb{background:rgba(91,143,212,.3);border-radius:4px} .meta-table-scroll::-webkit-scrollbar-thumb:hover{background:rgba(91,143,212,.5)} /* Indicador visual de que dá pra arrastar (gradient nas bordas em telas estreitas) */ @media (max-width:900px){ #meta-view{padding:12px !important} .meta-table-scroll{position:relative} .meta-table-scroll::after{content:'← deslize →';display:block;font-size:10px;color:var(--text3);text-align:center;padding:6px 0 2px;opacity:.7;letter-spacing:.1em} } /* SUPABASE CONFIG SCREEN */ .config-screen{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center} .config-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:32px;max-width:480px;width:90%;text-align:center} .config-box h2{font-size:20px;font-weight:900;margin-bottom:8px}.config-box .logo{font-size:28px;font-weight:900;margin-bottom:20px} .config-box p{font-size:13px;color:var(--text2);margin-bottom:20px;line-height:1.6} /* IMPORT STATUS */ .import-status{display:flex;flex-direction:column;gap:8px;margin-top:12px} .import-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface2);border-radius:8px;font-size:13px} .import-item .status-ico{font-size:16px;width:20px;text-align:center} /* MATCH ISSUE */ .match-issue{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:8px;margin-bottom:8px;font-size:12px} /* HUB DLELES APP — tela inicial com cards */ #screen-hub{position:fixed;inset:0;background:var(--bg);z-index:90;display:none;flex-direction:column;overflow:hidden} #screen-hub.active{display:flex} .hub-topbar{display:flex;align-items:center;gap:12px;padding:11px 24px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg2)} .hub-logo{font-size:18px;font-weight:900;letter-spacing:-.5px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;gap:6px} .hub-logo span{color:var(--accent2)} .hub-spacer{flex:1} .hub-userbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2)} .hub-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent2) 0%,var(--accent) 100%);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 1px 3px rgba(59,130,246,.25)} .hub-content{flex:1;overflow-y:auto;padding:32px 24px;max-width:1280px;width:100%;margin:0 auto} .hub-header{margin-bottom:32px} .hub-greeting{font-size:13px;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-weight:600} .hub-title{font-size:32px;font-weight:900;letter-spacing:-1px;color:var(--text)} .hub-title span{color:var(--accent2)} .hub-sub{color:var(--text2);font-size:14px;margin-top:6px} .module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} /* Cards escondidos por padrão — só aparecem após aplicarPermissoesHub liberar */ .module-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;display:none;opacity:0;animation:cardFadeIn .35s ease forwards;animation-delay:calc(var(--card-i, 0) * 60ms)} .module-card.is-visible{display:block} @keyframes cardFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .module-card:hover{transform:translateY(-2px);border-color:var(--accent2);box-shadow:0 8px 24px rgba(0,0,0,.3)} .module-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--module-color,var(--accent));opacity:0;transition:opacity .2s} .module-card:hover::before{opacity:1} .module-icon{width:48px;height:48px;border-radius:10px;background:var(--module-color-bg,rgba(59,130,246,.12));display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px} .module-name{font-size:16px;font-weight:700;margin-bottom:4px} .module-desc{font-size:12px;color:var(--text3);line-height:1.5} .module-status{position:absolute;top:14px;right:14px;font-size:10px;padding:3px 7px;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em} .status-ok{background:rgba(16,185,129,.12);color:var(--success)} .status-soon{background:rgba(59,130,246,.12);color:var(--accent2)} .status-disabled{background:rgba(100,116,139,.12);color:var(--text3)} .module-card.disabled{opacity:.5;cursor:default} .module-card.disabled:hover{transform:none;border-color:var(--border);box-shadow:none} .module-card.disabled:hover::before{opacity:0} /* Skeleton placeholder enquanto carrega permissões */ .module-skeleton{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;position:relative;overflow:hidden} .module-skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);animation:skelShimmer 1.5s infinite} .skel-icon{width:48px;height:48px;border-radius:10px;background:var(--surface2);margin-bottom:14px} .skel-line{height:13px;background:var(--surface2);border-radius:4px;margin-bottom:8px} .skel-line.skel-title{width:55%;height:16px;margin-bottom:10px} .skel-line.skel-short{width:80%} .skel-line.skel-medium{width:65%} @keyframes skelShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} /* Botão voltar pro hub no topo do app */ .btn-hub{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);border-radius:6px;color:var(--accent2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;margin-right:8px} .btn-hub:hover{background:rgba(59,130,246,.2)} .btn-sair-hub{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;padding:5px 10px;border:1px solid var(--border2);border-radius:6px;transition:all .15s;background:var(--surface2)} .btn-sair-hub:hover{color:var(--danger);border-color:var(--danger);background:rgba(239,68,68,.08)} @media(max-width:600px){ .hub-content{padding:20px 16px} .hub-title{font-size:24px} .module-grid{grid-template-columns:1fr} .hub-topbar{padding:10px 14px} .hub-userbox{display:none} } /* ===== MÓDULO PEDIDOS ===== */ #ped-screen-root{display:none;position:fixed;inset:0;z-index:80;background:#0f0f0f} #ped-screen-root.active{display:flex;flex-direction:column} #ped-screen-root{--bg:#0f0f0f;--bg2:#161616;--bg3:#1e1e1e;--bg4:#252525;--border:#2a2a2a;--border2:#363636;--ink:#e8e6e0;--ink2:#9a9790;--ink3:#5a5855;--shadow:rgba(0,0,0,.4)} #ped-screen-root[data-theme="light"]{--bg:#f4f2ed;--bg2:#ffffff;--bg3:#eceae4;--bg4:#e0ddd5;--border:#d8d4c8;--border2:#c8c4b8;--ink:#1a1916;--ink2:#5a5650;--ink3:#8a8680;--shadow:rgba(0,0,0,.12)} #ped-screen-root{--amber:#f0a500;--amber-dim:#a87200;--amber-bg:rgba(240,165,0,.09);--red:#d94f4f;--red-bg:rgba(217,79,79,.09);--green:#4caf7d;--green-bg:rgba(76,175,125,.09);--blue:#5b8fd4;--blue-bg:rgba(91,143,212,.09);--mono:'DM Mono',ui-monospace,monospace;--cond:'Inter',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;--r:3px} #ped-screen-root *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} #ped-screen-root{height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;overscroll-behavior:none;transition:background .2s,color .2s} #ped-screen-root button, #ped-screen-root input, #ped-screen-root select, #ped-screen-root textarea{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;outline:none;-webkit-appearance:none;appearance:none} #ped-screen-root .screen{display:none;position:fixed;inset:0;background:var(--bg);z-index:10;flex-direction:column} #ped-screen-root .screen.active{display:flex} #ped-screen-auth{align-items:center;justify-content:center;padding:32px} #ped-screen-root .auth-wrap{width:100%;max-width:360px;display:flex;flex-direction:column;gap:22px} #ped-screen-root .auth-logo{width:54px;height:54px;background:var(--amber);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:700;font-size:25px;color:#000} #ped-screen-root .auth-title{font-family:var(--cond);font-size:25px;font-weight:700;letter-spacing:.02em;line-height:1.1} #ped-screen-root .auth-title span{color:var(--amber)} #ped-screen-root .auth-tabs{display:flex;border-bottom:1px solid var(--border)} #ped-screen-root .auth-tab{flex:1;padding:10px;font-family:var(--cond);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);cursor:pointer;text-align:center;border-bottom:2px solid transparent;transition:all .15s} #ped-screen-root .auth-tab.active{color:var(--amber);border-bottom-color:var(--amber)} #ped-screen-root .auth-form{display:flex;flex-direction:column;gap:12px} #ped-screen-root .auth-form.hidden{display:none} #ped-screen-root .field{display:flex;flex-direction:column;gap:5px} #ped-screen-root .field label{font-family:var(--cond);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)} #ped-screen-root .field input{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;font-size:14px;color:var(--ink);transition:border-color .15s} #ped-screen-root .field input:focus{border-color:var(--amber)} #ped-screen-root .btn-auth{padding:13px;background:var(--amber);color:#000;font-family:var(--cond);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px} #ped-screen-root .btn-auth:disabled{opacity:.4;cursor:not-allowed} #ped-screen-root .auth-msg{font-size:13px;text-align:center;min-height:18px} #ped-screen-root .auth-msg.err{color:var(--red)}#ped-screen-root .auth-msg.ok{color:var(--green)} #ped-screen-app{flex-direction:column} #ped-topbar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);flex-shrink:0} #ped-topbar h1{font-family:var(--cond);font-size:16px;font-weight:800;letter-spacing:-.01em;flex-shrink:0} #ped-topbar h1 span{color:var(--amber)} #ped-screen-root .topbar-search{flex:1;max-width:420px;position:relative} #ped-screen-root .topbar-search input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:7px 12px 7px 32px;font-size:13px;color:var(--ink);transition:border-color .15s} #ped-screen-root .topbar-search input:focus{border-color:var(--amber);outline:none} #ped-screen-root .topbar-search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--ink3);pointer-events:none} @media(max-width:600px){#ped-screen-root .topbar-search{max-width:none}#ped-topbar h1{font-size:14px}} #ped-screen-root .icon-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);cursor:pointer;color:var(--ink2);transition:all .15s;flex-shrink:0;font-size:16px} #ped-screen-root .icon-btn:hover, #ped-screen-root .icon-btn:active{color:var(--ink);background:var(--bg3)} #ped-screen-root .user-bar{display:flex;align-items:center;gap:10px;padding:7px 16px;border-bottom:1px solid var(--border);flex-shrink:0} #ped-screen-root .avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--amber) 0%,#d68a00 100%);color:#1a1916;font-family:var(--cond);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 1px 3px rgba(240,165,0,.25)} #ped-screen-root .user-email{font-size:12px;color:var(--ink3);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #ped-screen-root .btn-sair{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-family:var(--body);font-weight:600;color:var(--ink2);cursor:pointer;padding:5px 10px;border:1px solid var(--border2);border-radius:var(--r);transition:all .15s;background:var(--bg2)} #ped-screen-root .btn-sair:hover{color:var(--red);border-color:var(--red);background:var(--red-bg)} #ped-nav{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg);overflow-x:auto;scrollbar-width:none} #ped-nav::-webkit-scrollbar{display:none} #ped-screen-root .nav-tab{flex:1;min-width:fit-content;padding:11px 12px 10px;font-family:var(--body);font-size:12px;font-weight:600;color:var(--ink3);cursor:pointer;text-align:center;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap} #ped-screen-root .nav-tab.active{color:var(--amber);border-bottom-color:var(--amber)} #ped-tab-dots{display:none !important} #ped-content{flex:1;overflow-y:auto;overflow-x:hidden} #ped-content{position:relative;overflow-x:hidden} #ped-screen-root .page{display:none;padding:16px} #ped-screen-root .page.active{display:block} #ped-screen-root .page.active{display:block} #ped-screen-root .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px} @media(max-width:900px){#ped-screen-root .kpi-grid{grid-template-columns:1fr 1fr}} @media(max-width:380px){#ped-screen-root .kpi-grid{grid-template-columns:1fr}} #ped-screen-root .kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:13px 13px 11px;position:relative;overflow:hidden} #ped-screen-root .kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px} #ped-screen-root .kpi.amber::before{background:var(--amber)}#ped-screen-root .kpi.red::before{background:var(--red)}#ped-screen-root .kpi.green::before{background:var(--green)}#ped-screen-root .kpi.blue::before{background:var(--blue)} #ped-screen-root .kpi-label{font-family:var(--cond);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px} #ped-screen-root .kpi-value{font-family:var(--mono);font-size:19px;font-weight:500;line-height:1;letter-spacing:-.02em} #ped-screen-root .kpi-sub{font-size:11px;color:var(--ink3);margin-top:3px} #ped-screen-root .slabel{font-family:var(--cond);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px;margin-top:18px} #ped-screen-root .slabel:first-child{margin-top:0} #ped-screen-root .loja-bar{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:11px 13px;margin-bottom:7px} #ped-screen-root .loja-bar-head{display:flex;justify-content:space-between;margin-bottom:6px;align-items:center} #ped-screen-root .loja-badge{display:inline-block;padding:2px 8px;background:var(--amber-bg);color:var(--amber);border-radius:2px;font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} #ped-screen-root .loja-valor{font-family:var(--mono);font-size:13px} #ped-screen-root .bar-track{height:3px;background:var(--border);border-radius:2px;overflow:hidden} #ped-screen-root .bar-fill{height:100%;background:var(--amber);border-radius:2px;transition:width .5s} #ped-screen-root .pedido-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;overflow:hidden;cursor:pointer;transition:border-color .15s,transform .1s} #ped-screen-root .pedido-card:active{transform:scale(.99)} #ped-screen-root .pedido-card:hover{border-color:var(--border2)} #ped-screen-root .pc-head{display:flex;align-items:center;gap:8px;padding:11px 13px} #ped-screen-root .pc-loja{font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);flex:1;min-width:0} #ped-screen-root .pc-valor{font-family:var(--mono);font-size:13px;font-weight:500;white-space:nowrap} #ped-screen-root .pc-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} #ped-screen-root .pc-dot.pendente{background:var(--amber)}#ped-screen-root .pc-dot.pago{background:var(--green)}#ped-screen-root .pc-dot.vencido{background:var(--red)} #ped-screen-root .pc-body{padding:0 13px 11px;display:grid;grid-template-columns:1fr 1fr;gap:3px 14px} #ped-screen-root .pc-f{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #ped-screen-root .pc-f em{color:var(--ink3);font-style:normal;margin-right:3px} #ped-screen-root .pc-prazos{font-size:11px;font-family:var(--mono);color:var(--ink2);grid-column:span 2} #ped-screen-root .chegada-badge{display:inline-block;padding:2px 6px;border-radius:2px;font-family:var(--cond);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;margin-left:4px} #ped-screen-root .chegada-badge.nao{background:var(--red-bg);color:var(--red)} #ped-screen-root .chegada-badge.parcial{background:var(--amber-bg);color:var(--amber)} #ped-screen-root .chegada-badge.total{background:var(--green-bg);color:var(--green)} #ped-screen-root .filter-bar{display:flex;gap:7px;margin-bottom:12px;overflow-x:auto;padding-bottom:2px;-ms-overflow-style:none;scrollbar-width:none} #ped-screen-root .filter-bar::-webkit-scrollbar{display:none} #ped-screen-root .fchip{padding:5px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:100px;font-family:var(--cond);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0} #ped-screen-root .fchip.active{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)} #ped-screen-root .search{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:9px 13px;font-size:13px;color:var(--ink);margin-bottom:11px;transition:border-color .15s} #ped-screen-root .search:focus{border-color:var(--amber)} #ped-screen-root .fgroup{margin-bottom:13px} #ped-screen-root .flabel{font-family:var(--cond);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px;display:block} #ped-screen-root .finput, #ped-screen-root .fselect, #ped-screen-root .ftextarea{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:11px 13px;font-size:14px;color:var(--ink);transition:border-color .15s} #ped-screen-root .finput:focus, #ped-screen-root .fselect:focus, #ped-screen-root .ftextarea:focus{border-color:var(--amber)} #ped-screen-root .fselect{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a5855' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer} #ped-screen-root .frow{display:grid;grid-template-columns:1fr 1fr;gap:10px} #ped-screen-root .prazo-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} #ped-screen-root .pchip{padding:5px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);font-family:var(--mono);font-size:12px;cursor:pointer;transition:all .15s;user-select:none} #ped-screen-root .pchip.on{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)} #ped-screen-root .prow{display:flex;gap:6px;margin-top:6px} /* Radios estilizados pro modal Exportar */ #ped-screen-root .exp-radio-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .15s;user-select:none} #ped-screen-root .exp-radio-item:hover{border-color:var(--border2)} #ped-screen-root .exp-radio-item input[type="radio"]{position:absolute;opacity:0;pointer-events:none} #ped-screen-root .exp-radio-check{flex-shrink:0;width:18px;height:18px;border:2px solid var(--border2);border-radius:50%;background:var(--bg);position:relative;margin-top:2px;transition:all .15s} #ped-screen-root .exp-radio-check::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--amber);transform:scale(0);transition:transform .15s} #ped-screen-root .exp-radio-item input[type="radio"]:checked ~ .exp-radio-check{border-color:var(--amber)} #ped-screen-root .exp-radio-item input[type="radio"]:checked ~ .exp-radio-check::after{transform:scale(1)} #ped-screen-root .exp-radio-item:has(input[type="radio"]:checked){background:var(--amber-bg);border-color:var(--amber)} #ped-screen-root .exp-radio-text{flex:1;font-size:13px;line-height:1.5;color:var(--ink)} #ped-screen-root .btn{width:100%;padding:13px;background:var(--amber);color:#000;font-family:var(--cond);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r);cursor:pointer;transition:opacity .15s;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px} #ped-screen-root .btn:disabled{opacity:.35;cursor:not-allowed} #ped-screen-root .btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--ink2)} #ped-screen-root .btn-ghost:hover{border-color:var(--ink2);color:var(--ink)} #ped-screen-root .btn-danger{background:var(--red)!important;color:#fff!important;border:none!important} #ped-screen-root .parcelas-list{display:flex;flex-direction:column;gap:5px;margin-top:6px;margin-bottom:12px} #ped-screen-root .parcela-row{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;background:var(--bg3);border-radius:var(--r);gap:6px} #ped-screen-root .parcela-num{font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--ink3);min-width:22px} #ped-screen-root .parcela-data{font-family:var(--mono);font-size:12px;flex:1} #ped-screen-root .parcela-valor{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--amber)} #ped-screen-root .parcela-status{font-family:var(--cond);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:2px} #ped-screen-root .parcela-status.vence{background:var(--amber-bg);color:var(--amber)} #ped-screen-root .parcela-status.vencida{background:var(--red-bg);color:var(--red)} #ped-screen-root .parcela-status.paga{background:var(--green-bg);color:var(--green)} #ped-screen-root .rgroup{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;overflow:hidden} #ped-screen-root .rgroup-head{padding:12px 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)} #ped-screen-root .rgroup-head h3{font-family:var(--cond);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} #ped-screen-root .rgroup-body{padding:11px 13px;display:flex;flex-direction:column;gap:7px} #ped-screen-root .rrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px} #ped-screen-root .rrow-label{font-size:12px;color:var(--ink2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #ped-screen-root .rrow-val{font-family:var(--mono);font-size:12px;font-weight:500;white-space:nowrap} #ped-screen-root .rdivider{height:1px;background:var(--border);margin:3px 0} #ped-screen-root .rtotal-bar{background:var(--amber-bg);border:1px solid var(--amber-dim);border-radius:var(--r);padding:12px 13px;margin-bottom:11px;display:flex;justify-content:space-between;align-items:center} #ped-screen-root .rtotal-label{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)} #ped-screen-root .rtotal-val{font-family:var(--mono);font-size:18px;color:var(--amber)} #ped-screen-root .cfg-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:11px} #ped-screen-root .cfg-item{display:flex;align-items:center;justify-content:space-between;padding:13px;border-bottom:1px solid var(--border);gap:10px} #ped-screen-root .cfg-item:last-child{border-bottom:none} #ped-screen-root .cfg-label{font-size:13px} #ped-screen-root .cfg-val{font-family:var(--mono);font-size:12px;color:var(--ink2);white-space:nowrap} #ped-screen-root .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;align-items:center;justify-content:center;padding:24px} #ped-screen-root .overlay.open{display:flex} #ped-screen-root .modal{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;padding:20px 16px 36px;margin:0 auto} @media(max-width:600px){ #ped-screen-root .overlay{align-items:flex-end;padding:0} #ped-screen-root .modal{border-radius:6px 6px 0 0;max-width:none;max-height:92vh} } #ped-screen-root .viewer{display:none;position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:300;flex-direction:column} #ped-screen-root .viewer.open{display:flex} #ped-screen-root .viewer-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg2);border-bottom:1px solid var(--border2);flex-shrink:0} #ped-screen-root .viewer-name{flex:1;font-family:var(--cond);font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #ped-screen-root .viewer-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);color:var(--ink);cursor:pointer;font-size:18px;flex-shrink:0;text-decoration:none} #ped-screen-root .viewer-btn:active{background:var(--bg4)} #ped-screen-root .viewer-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;background:#000;-webkit-overflow-scrolling:touch} #ped-screen-root .viewer-body.pdf-mode{align-items:flex-start;justify-content:flex-start;background:#1a1a1a;padding:8px 0} #ped-screen-root .viewer-body img{max-width:100%;max-height:100%;object-fit:contain;display:block;touch-action:pinch-zoom} #ped-screen-root .viewer-pdf{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:0 8px;box-sizing:border-box} #ped-screen-root .viewer-pdf canvas{max-width:100%;height:auto;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5);display:block} #ped-screen-root .viewer-loading{padding:40px 20px;text-align:center;color:var(--ink2);font-family:var(--cond);font-size:14px;letter-spacing:.04em} #ped-screen-root .viewer-loading .spin{display:inline-block;width:24px;height:24px;border:2px solid var(--border2);border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px} @keyframes spin{to{transform:rotate(360deg)}} #ped-screen-root .viewer-fallback{padding:30px 24px;text-align:center;color:var(--ink2);font-family:var(--body);font-size:14px;line-height:1.5} #ped-screen-root .viewer-fallback .big{font-size:48px;margin-bottom:14px} #ped-screen-root .viewer-fallback a{color:var(--amber);text-decoration:underline;display:inline-block;margin-top:14px;font-weight:600} /* ── Regras GLOBAIS do visualizador de anexos (também usado pelo FECH) ───── O
está no body raiz, fora de #ped-screen-root, então sem essas regras globais ele não aparece bem quando aberto de outro módulo. Replicamos as regras essenciais aqui. Usamos #ped-ov-viewer (ID) + !important pra vencer #ped-screen-root .viewer{display:none} quando o viewer é aberto a partir do FECH (com o módulo PED inativo). */ #ped-ov-viewer{display:none;position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:9999;flex-direction:column} #ped-ov-viewer.open{display:flex !important} #ped-ov-viewer .viewer-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#1a1a1a;border-bottom:1px solid #333;flex-shrink:0} #ped-ov-viewer .viewer-name{flex:1;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #ped-ov-viewer .viewer-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#2a2a2a;border:1px solid #444;border-radius:8px;color:#fff;cursor:pointer;font-size:18px;flex-shrink:0;text-decoration:none} #ped-ov-viewer .viewer-btn:active{background:#3a3a3a} #ped-ov-viewer .viewer-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;background:#000;-webkit-overflow-scrolling:touch} #ped-ov-viewer .viewer-body.pdf-mode{align-items:flex-start;justify-content:flex-start;background:#1a1a1a;padding:8px 0} #ped-ov-viewer .viewer-body img{max-width:100%;max-height:100%;object-fit:contain;display:block;touch-action:pinch-zoom} #ped-ov-viewer .viewer-pdf{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:0 8px;box-sizing:border-box} #ped-ov-viewer .viewer-pdf canvas{max-width:100%;height:auto;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5);display:block} #ped-ov-viewer .viewer-loading{padding:40px 20px;text-align:center;color:#ccc;font-size:14px} #ped-ov-viewer .viewer-loading .spin{display:inline-block;width:24px;height:24px;border:2px solid #444;border-top-color:#fbbf24;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px} #ped-ov-viewer .viewer-fallback{padding:30px 24px;text-align:center;color:#ccc;font-size:14px;line-height:1.5} #ped-ov-viewer .viewer-fallback .big{font-size:48px;margin-bottom:14px} #ped-ov-viewer .viewer-fallback a{color:#fbbf24;text-decoration:underline;display:inline-block;margin-top:14px;font-weight:600} @keyframes spin{to{transform:rotate(360deg)}} #ped-screen-root .modal-title{font-family:var(--cond);font-size:17px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between} #ped-screen-root .sbadge{padding:3px 9px;border-radius:2px;font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} #ped-screen-root .sbadge.pendente{background:var(--amber-bg);color:var(--amber)}#ped-screen-root .sbadge.pago{background:var(--green-bg);color:var(--green)}#ped-screen-root .sbadge.vencido{background:var(--red-bg);color:var(--red)} #ped-screen-root .det-grid{background:var(--bg3);border-radius:var(--r);padding:13px;display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px} #ped-screen-root .det-f .det-label{font-family:var(--cond);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:3px} #ped-screen-root .det-f .det-val{font-size:13px} #ped-screen-root .det-f.full{grid-column:span 2} #ped-screen-root .det-f .det-val.mono{font-family:var(--mono)} #ped-screen-root .det-f .det-val.amber{color:var(--amber)} #ped-screen-root .sdivider{height:1px;background:var(--border);margin:12px 0} #ped-screen-root .empty{text-align:center;padding:44px 16px;color:var(--ink3);font-size:13px} #ped-screen-root .loading{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink3);font-size:13px;padding:40px 0} #ped-screen-root .spin{width:16px;height:16px;border:2px solid var(--border2);border-top-color:var(--amber);border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} #ped-toast{position:fixed;bottom:76px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:9px 18px;font-size:13px;font-family:var(--cond);letter-spacing:.04em;opacity:0;transition:all .22s;pointer-events:none;z-index:200;white-space:nowrap;max-width:90vw;box-shadow:0 4px 16px var(--shadow)} #ped-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} #ped-toast.ok{border-color:var(--green);color:var(--green)} #ped-toast.err{border-color:var(--red);color:var(--red)} #ped-screen-root #fab{position:fixed;bottom:22px;right:18px;width:50px;height:50px;background:var(--amber);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 18px rgba(240,165,0,.3);font-size:26px;color:#000;z-index:90;transition:transform .12s;user-select:none} #ped-screen-root #fab:active{transform:scale(.9)} @media(max-width:380px){#ped-screen-root .kpi-value{font-size:16px}#ped-screen-root .nav-tab{font-size:10px;padding:10px 1px}} #ped-screen-root .seg-wrap{position:relative} #ped-screen-root .seg-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);z-index:100;max-height:200px;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,.15)} #ped-screen-root .seg-item{padding:9px 12px;font-size:13px;cursor:pointer;color:var(--ink);border-bottom:1px solid var(--border)} #ped-screen-root .seg-item:last-child{border-bottom:none} #ped-screen-root .seg-item:hover{background:var(--bg3)} #ped-screen-root .seg-item.new{color:var(--amber);font-style:italic} #ped-ov-busca .modal{max-width:560px;margin:0 auto} #ped-screen-root .busca-item{padding:11px 13px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s} #ped-screen-root .busca-item:last-child{border-bottom:none} #ped-screen-root .busca-item:hover{background:var(--bg3)} #ped-screen-root .busca-item-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:3px} #ped-screen-root .busca-item-loja{font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)} #ped-screen-root .busca-item-val{font-family:var(--mono);font-size:12px} #ped-screen-root .busca-item-sub{font-size:12px;color:var(--ink2)} #ped-screen-root .busca-highlight{background:var(--amber-bg);color:var(--amber);border-radius:2px;padding:0 2px} #ped-screen-root .hist-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)} #ped-screen-root .hist-item:last-child{border-bottom:none} #ped-screen-root .hist-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);flex-shrink:0;margin-top:4px} #ped-screen-root .hist-dot.edit{background:var(--blue)} #ped-screen-root .hist-dot.erp{background:var(--green)} #ped-screen-root .hist-dot.create{background:var(--amber)} #ped-screen-root .hist-body{flex:1;min-width:0} #ped-screen-root .hist-action{font-size:12px;color:var(--ink)} #ped-screen-root .hist-meta{font-size:11px;color:var(--ink3);margin-top:2px} #ped-screen-root .gecon-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:12px;border-radius:var(--r);border:1px solid var(--border)} #ped-screen-root .gecon-table{border-collapse:collapse;font-size:11px;min-width:500px;width:100%} #ped-screen-root .gecon-table th{background:var(--bg3);font-family:var(--cond);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding:7px 8px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:1} #ped-screen-root .gecon-table th:first-child{position:sticky;left:0;z-index:2;background:var(--bg3);min-width:60px} #ped-screen-root .gecon-table td{padding:6px 8px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);font-family:var(--mono);font-size:10px;text-align:right;white-space:nowrap;color:var(--ink2)} #ped-screen-root .gecon-table td:first-child{text-align:left;font-family:var(--cond);font-weight:600;font-size:10px;color:var(--ink);background:var(--bg2);position:sticky;left:0;z-index:1} #ped-screen-root .gecon-table td.val-pos{color:var(--red);font-weight:600} #ped-screen-root .gecon-table td.val-zero{color:var(--border2)} #ped-screen-root .gecon-table .total-row td{background:var(--bg3);font-weight:700;color:var(--amber);border-top:2px solid var(--amber-dim)} #ped-screen-root .gecon-table .total-row td:first-child{color:var(--amber)} #ped-screen-root .abat-list{display:flex;flex-direction:column;gap:5px;margin:8px 0} #ped-screen-root .abat-row{display:flex;align-items:center;gap:8px;padding:8px 11px;background:var(--bg3);border-radius:var(--r)} #ped-screen-root .abat-data{font-size:11px;color:var(--ink3);white-space:nowrap} #ped-screen-root .abat-obs{font-size:12px;flex:1;color:var(--ink2)} #ped-screen-root .abat-val{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--green);white-space:nowrap} #ped-screen-root .abat-del{cursor:pointer;color:var(--ink3);font-size:14px;padding:0 2px} #ped-screen-root .abat-del:hover{color:var(--red)} #ped-screen-root .saldo-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;background:var(--amber-bg);border:1px solid var(--amber-dim);border-radius:var(--r);margin-bottom:12px} #ped-screen-root .saldo-label{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)} #ped-screen-root .saldo-val{font-family:var(--mono);font-size:16px;color:var(--amber)} #ped-screen-root .vue-modal-resizer{ display: block; overflow: hidden; position: absolute; width: 12px; height: 12px; right: 0; bottom: 0; z-index: 9999999; background: transparent; cursor: se-resize; } #ped-screen-root .vue-modal-resizer::after{ display: block; position: absolute; content: ''; background: transparent; left: 0; top: 0; width: 0; height: 0; border-bottom: 10px solid #ddd; border-left: 10px solid transparent; } #ped-screen-root .vue-modal-resizer.clicked::after{ border-bottom: 10px solid #369be9; } #ped-screen-root .v--modal-block-scroll{ overflow: hidden; width: 100vw; } #ped-screen-root .v--modal-overlay{ position: fixed; box-sizing: border-box; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.2); z-index: 999; opacity: 1; } #ped-screen-root .v--modal-overlay.scrollable{ height: 100%; min-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } #ped-screen-root .v--modal-overlay .v--modal-background-click{ width: 100%; min-height: 100%; height: auto; } #ped-screen-root .v--modal-overlay .v--modal-box{ position: relative; overflow: hidden; box-sizing: border-box; } #ped-screen-root .v--modal-overlay.scrollable .v--modal-box{ margin-bottom: 2px; } #ped-screen-root .v--modal{ background-color: white; text-align: left; border-radius: 3px; box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4); padding: 0; } #ped-screen-root .v--modal.v--modal-fullscreen{ width: 100vw; height: 100vh; margin: 0; left: 0; top: 0; } #ped-screen-root .v--modal-top-right{ display: block; position: absolute; right: 0; top: 0; } #ped-screen-root .overlay-fade-enter-active, #ped-screen-root .overlay-fade-leave-active{ transition: all 0.2s; } #ped-screen-root .overlay-fade-enter, #ped-screen-root .overlay-fade-leave-active{ opacity: 0; } #ped-screen-root .nice-modal-fade-enter-active, #ped-screen-root .nice-modal-fade-leave-active{ transition: all 0.4s; } #ped-screen-root .nice-modal-fade-enter, #ped-screen-root .nice-modal-fade-leave-active{ opacity: 0; transform: translateY(-20px); } #ped-screen-root .vue-dialog div{ box-sizing: border-box; } #ped-screen-root .vue-dialog .dialog-flex{ width: 100%; height: 100%; } #ped-screen-root .vue-dialog .dialog-content{ flex: 1 0 auto; width: 100%; padding: 15px; font-size: 14px; } #ped-screen-root .vue-dialog .dialog-c-title{ font-weight: 600; padding-bottom: 15px; } #ped-screen-root .vue-dialog .dialog-c-text{ } #ped-screen-root .vue-dialog .vue-dialog-buttons{ display: flex; flex: 0 1 auto; width: 100%; border-top: 1px solid #eee; } #ped-screen-root .vue-dialog .vue-dialog-buttons-none{ width: 100%; padding-bottom: 15px; } #ped-screen-root .vue-dialog-button{ font-size: 12px !important; background: transparent; padding: 0; margin: 0; border: 0; cursor: pointer; box-sizing: border-box; line-height: 40px; height: 40px; color: inherit; font: inherit; outline: none; } #ped-screen-root .vue-dialog-button:hover{ background: rgba(0, 0, 0, 0.01); } #ped-screen-root .vue-dialog-button:active{ background: rgba(0, 0, 0, 0.025); } #ped-screen-root .vue-dialog-button:not(:first-of-type){ border-left: 1px solid #eee; } #ped-screen-root .app-download-modal .modal[data-v-7b358a25]{width:80%;height:80%;border-radius:4vmin;background:#272727;padding:3vmin;box-sizing:border-box}#ped-screen-root .app-download-modal .modal .items[data-v-7b358a25]{height:100%;width:100%;display:grid;gap:2vmin;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-auto-rows:calc(50% - 1.5vmin);overflow:auto}#ped-screen-root .app-download-modal .modal .items[data-v-7b358a25]::-webkit-scrollbar{width:0;height:0}#ped-screen-root .app-download-modal .modal .items[data-v-7b358a25]::-webkit-scrollbar-button{width:0px;height:0px}#ped-screen-root .app-download-modal .modal .items[data-v-7b358a25]::-webkit-scrollbar-thumb{background:var(--scroll-color);border-radius:50px}#ped-screen-root .app-download-modal .modal .items[data-v-7b358a25]::-webkit-scrollbar-track{background:rgba(0,0,0,0)}#ped-screen-root .app-download-modal .modal .items[data-v-7b358a25]::-webkit-scrollbar-track:hover{background:rgba(0,0,0,0)}#ped-screen-root .app-download-modal .modal .items[data-v-7b358a25]::-webkit-scrollbar-track:active{background:rgba(0,0,0,0)}#ped-screen-root .app-download-modal .modal .items[data-v-7b358a25] ::-webkit-scrollbar-corner{background:rgba(0,0,0,0)}#ped-screen-root .app-download-modal .modal .items .item[data-v-7b358a25]{overflow:hidden;display:flex;flex-direction:column;gap:1.5vmin;flex-shrink:0;height:100%;box-sizing:border-box;padding:1vmin;background:#3e3e3e;border-radius:2vmin}#ped-screen-root .app-download-modal .modal .items .item .preview[data-v-7b358a25]{width:100%;height:calc(100% - 7.5vmin);border-radius:1vmin;overflow:hidden;flex-shrink:0}#ped-screen-root .app-download-modal .modal .items .item .preview video[data-v-7b358a25], #ped-screen-root .app-download-modal .modal .items .item .preview img[data-v-7b358a25]{width:100%;height:100%;object-fit:cover}#ped-screen-root .app-download-modal .modal .items .item .button[data-v-7b358a25]{border-radius:1vmin;color:#fff;background:#7671fd;height:6vmin;cursor:pointer;transition:.2s ease;display:flex;align-items:center;justify-content:center;font-size:1.6vmin}#ped-screen-root .app-download-modal .modal .items .item .button[data-v-7b358a25]:hover{background:rgb(108.2958333333,102.9416666667,252.8583333333)} #ped-screen-root .v--modal{background:none !important;width:0 !important;height:0 !important}#ped-screen-root .v--modal-overlay{background:rgba(0,0,0,0) !important}#ped-screen-root .modal-enter-active, #ped-screen-root .modal-leave-active{transition:.2s ease}#ped-screen-root .modal-enter-active .default-modal .modal, #ped-screen-root .modal-leave-active .default-modal .modal{transition:.2s ease;transform:translateY(0px);opacity:1}#ped-screen-root .modal-enter, #ped-screen-root .modal-leave-to{transition:.2s ease}#ped-screen-root .modal-enter .default-modal .modal, #ped-screen-root .modal-leave-to .default-modal .modal{transform:translateY(3vmin);opacity:0}#ped-screen-root .sidebar-enter-active, #ped-screen-root .sidebar-leave-active{transition:.2s ease;background:var(--modal-overlay-bg)}#ped-screen-root .sidebar-enter-active .modal, #ped-screen-root .sidebar-leave-active .modal{transform:translateY(0px);transition:inherit}#ped-screen-root .sidebar-enter, #ped-screen-root .sidebar-leave-to{transition:.2s ease;background:rgba(0,0,0,0)}#ped-screen-root .sidebar-enter .modal, #ped-screen-root .sidebar-leave-to .modal{transform:translateX(100%);transition:inherit}#ped-screen-root .sidebar-overlay-enter-active, #ped-screen-root .sidebar-overlay-leave-active{transition:.2s ease}#ped-screen-root .sidebar-overlay-enter-active .default-modal, #ped-screen-root .sidebar-overlay-leave-active .default-modal{transition:.2s ease}#ped-screen-root .sidebar-overlay-enter, #ped-screen-root .sidebar-overlay-leave-to{transition:.2s ease}#ped-screen-root .sidebar-overlay-enter .default-modal, #ped-screen-root .sidebar-overlay-leave-to .default-modal{transition:.2s ease;background:rgba(0,0,0,0)}#ped-screen-root .overlay-enter-active, #ped-screen-root .overlay-leave-active{transition:.2s ease}#ped-screen-root .overlay-enter-active .default-modal, #ped-screen-root .overlay-leave-active .default-modal{transition:.2s ease;opacity:1}#ped-screen-root .overlay-enter, #ped-screen-root .overlay-leave-to{transition:.2s ease}#ped-screen-root .overlay-enter .default-modal, #ped-screen-root .overlay-leave-to .default-modal{transition:.2s ease;opacity:0}#ped-screen-root .modal-up-enter-active, #ped-screen-root .modal-up-leave-active{transition:.2s ease}#ped-screen-root .modal-up-enter-active .default-modal .modal, #ped-screen-root .modal-up-leave-active .default-modal .modal{transition:.2s ease;transform:translateY(0px);opacity:1}#ped-screen-root .modal-up-enter, #ped-screen-root .modal-up-leave-to{transition:.2s ease}#ped-screen-root .modal-up-enter .default-modal .modal, #ped-screen-root .modal-up-leave-to .default-modal .modal{transform:translateY(-3vmin);opacity:0}#ped-screen-root .default-modal{position:fixed;width:100%;height:100%;top:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10000;background:rgba(0,0,0,.5)}#ped-screen-root .default-modal .modal{height:auto;position:relative;box-sizing:border-box;background:#1e1e1e;border-radius:3vmin;color:var(--primary-text-color);display:flex;flex-direction:column;transition:all .2s ease-in;overflow:hidden;width:auto;padding:0vmin 4vmin;padding-top:4vmin}#ped-screen-root .default-modal .modal header{position:relative;flex-shrink:0;padding-bottom:4vmin}#ped-screen-root .default-modal .modal header .title{color:var(--primary-text-color);font-size:2.2vmin;font-weight:400}#ped-screen-root .default-modal .modal header .close-btn{position:absolute;top:20px;right:24px;padding:10px;display:flex;cursor:pointer}#ped-screen-root .default-modal .modal header .close-btn svg{width:16px;height:auto}#ped-screen-root .default-modal .modal header .close-btn svg path{fill:#000}#ped-screen-root .default-modal .modal main .controls{position:absolute;bottom:0px;left:0px;width:100%;display:flex;align-items:center;justify-content:flex-end;padding:0vmin 4vmin;padding-right:2.2vmin;padding-bottom:2.2vmin;box-sizing:border-box}#ped-screen-root .default-modal .modal main .controls .controls-btn{text-align:center;cursor:pointer}#ped-screen-root .default-modal .modal .close-btn{border:1px solid var(--secondary-btn-border-color);cursor:pointer;position:absolute;height:3.6vmin;width:3.6vmin;border-radius:1.2vmin;display:flex;align-items:center;justify-content:center;z-index:1;top:4vmin;right:4.5vmin}#ped-screen-root .default-modal .modal .close-btn svg{width:60%;height:auto;fill:#fff}#ped-screen-root .default-modal .modal .controls{display:flex;align-items:center;justify-content:flex-end;gap:2vmin;padding:4vmin 0;padding-top:4.5vmin;height:7vmin}#ped-screen-root .default-modal .modal .controls .controls{padding:0}#ped-screen-root .default-modal .modal .controls.space-between{justify-content:space-between}#ped-screen-root .default-modal .modal .controls .controls-wrapper{display:flex;align-items:center;justify-content:flex-end;gap:inherit}#ped-screen-root .default-modal .modal .controls .primary-btn, #ped-screen-root .default-modal .modal .controls .secondary-btn{padding:2.5vmin 6.5vmin;height:100%}#ped-screen-root .default-modal .modal .controls .controls-btn{height:100%}#ped-screen-root .default-modal .modal .controls .d-flex{height:100%}#ped-screen-root .default-modal .modal .controls .remove-btn{width:46px;min-width:unset;justify-self:start}#ped-screen-root .default-modal .modal .controls .remove-btn svg{width:16px;height:auto}#ped-screen-root .default-modal .modal .controls .remove{height:100%;flex-shrink:0}#ped-screen-root .default-modal .modal .controls .remove svg{height:35%;width:auto;fill:#fff}#ped-screen-root .default-modal .modal .controls .remove.round{aspect-ratio:1;padding:0}#ped-screen-root .default-modal .modal .modal-input-section{margin-bottom:15px}#ped-screen-root .default-modal .modal .modal-input-section .title{font-size:14px;font-weight:500}#ped-screen-root .default-modal .modal .modal-input-section input{margin-top:8px;font-size:13px;font-weight:100;width:100%}#ped-screen-root .default-modal .modal .modal-input-section:last-child{margin-bottom:0px}#ped-screen-root .default-modal .modal .textarea-wrapper{background:#242424;border-radius:1.8vmin;padding:2vmin;width:100%;border:1px solid #282828}#ped-screen-root .default-modal .modal textarea{background:#242424;color:#fff;border:none;outline:none;resize:none;font-size:1.8vmin;width:100%}#ped-screen-root .default-modal .modal textarea::-webkit-scrollbar{width:.5vmin;height:.5vmin}#ped-screen-root .default-modal .modal textarea::-webkit-scrollbar-button{width:0px;height:0px}#ped-screen-root .default-modal .modal textarea::-webkit-scrollbar-thumb{background:#626262;border-radius:50px}#ped-screen-root .default-modal .modal textarea::-webkit-scrollbar-track{background:rgba(0,0,0,0)}#ped-screen-root .default-modal .modal textarea::-webkit-scrollbar-track:hover{background:rgba(0,0,0,0)}#ped-screen-root .default-modal .modal textarea::-webkit-scrollbar-track:active{background:rgba(0,0,0,0)}#ped-screen-root .default-modal .modal textarea ::-webkit-scrollbar-corner{background:rgba(0,0,0,0)}#ped-screen-root .modal.modal-aside{display:flex;flex-direction:row;background:#f9faff;overflow:hidden}#ped-screen-root .modal.modal-aside aside{display:flex;flex-direction:column;width:22vmin;flex-shrink:0;padding:2vmin;box-shadow:.52671vmin 0px 2.48307vmin rgba(11,26,77,.03);background:#fff}#ped-screen-root .modal.modal-aside aside header{padding:0}#ped-screen-root .modal.modal-aside aside header .title{font-size:2vmin;font-weight:400;padding-left:1vmin;padding-bottom:3.6vmin;padding-top:2vmin}#ped-screen-root .modal.modal-aside aside .menu::-webkit-scrollbar{width:0px;height:0px}#ped-screen-root .modal.modal-aside aside .menu::-webkit-scrollbar-button{width:0px;height:0px}#ped-screen-root .modal.modal-aside aside .menu::-webkit-scrollbar-thumb{background:var(--scroll-color);border-radius:50px}#ped-screen-root .modal.modal-aside aside .menu::-webkit-scrollbar-track{background:rgba(0,0,0,0)}#ped-screen-root .modal.modal-aside aside .menu::-webkit-scrollbar-track:hover{background:rgba(0,0,0,0)}#ped-screen-root .modal.modal-aside aside .menu::-webkit-scrollbar-track:active{background:rgba(0,0,0,0)}#ped-screen-root .modal.modal-aside aside .menu ::-webkit-scrollbar-corner{background:rgba(0,0,0,0)}#ped-screen-root .modal.modal-aside aside .menu{display:flex;flex-direction:column;overflow:auto;flex-grow:1}#ped-screen-root .modal.modal-aside aside .menu .menu-item{margin-bottom:.6vmin;display:flex;align-items:center;padding:1.2vmin 2vmin;border-radius:1vmin;cursor:pointer;color:var(--primary-text-color)}#ped-screen-root .modal.modal-aside aside .menu .menu-item .menu-item-icon{margin-right:1.4vmin;height:2vmin;width:auto}#ped-screen-root .modal.modal-aside aside .menu .menu-item .menu-item-icon path{stroke:var(--icon-color)}#ped-screen-root .modal.modal-aside aside .menu .menu-item .menu-item-icon.fill{fill:var(--icon-color)}#ped-screen-root .modal.modal-aside aside .menu .menu-item .menu-item-icon.fill path{stroke:none}#ped-screen-root .modal.modal-aside aside .menu .menu-item .menu-item-title{font-size:1.6vmin;font-weight:400;line-height:2}#ped-screen-root .modal.modal-aside aside .menu .menu-item.active{color:var(--brand-color);background:var(--menu-selected-bg-color)}#ped-screen-root .modal.modal-aside aside .menu .menu-item.active .menu-item-icon path{stroke:var(--icon-color-active)}#ped-screen-root .modal.modal-aside aside .menu .menu-item.active .menu-item-icon.fill{fill:var(--icon-color-active)}#ped-screen-root .modal.modal-aside aside .menu .menu-item.active .menu-item-icon.fill path{stroke:none;fill:var(--icon-color-active)}#ped-screen-root .modal.modal-aside aside footer{margin-top:1vmin;flex-shrink:0}#ped-screen-root .modal.modal-aside main{display:flex;flex-direction:column;flex-grow:1;border-radius:inherit}#ped-screen-root .modal.modal-aside main header{height:auto;padding-top:1vmin}#ped-screen-root .modal.modal-aside main header .controls{padding:0;position:relative;top:unset;left:unset;right:unset;display:flex;align-items:center;gap:1vmin}#ped-screen-root .modal.modal-aside main header .controls .button{position:relative;top:unset;left:unset;right:unset;border:1px solid var(--secondary-btn-border-color);cursor:pointer;height:3.6vmin;width:3.6vmin;border-radius:1.2vmin}#ped-screen-root .modal.modal-aside main header .controls .button svg path{fill:#232b50;stroke:#232b50}#ped-screen-root .bookmark-modal .modal{width:auto;padding:0vmin 4vmin;padding-top:4vmin;position:relative;background:#1e1e1e}#ped-screen-root .bookmark-modal .modal header{padding-bottom:3vmin;display:flex;align-items:center;justify-content:space-between}#ped-screen-root .bookmark-modal .modal header .title.error{color:#ed405b}#ped-screen-root .bookmark-modal .modal header .header-controls{display:flex;align-items:center;gap:2vmin}#ped-screen-root .bookmark-modal .modal header .header-controls .button{height:5vmin;width:5vmin;padding:0;border-radius:1.2vmin;color:#444}#ped-screen-root .bookmark-modal .modal header .header-controls .button svg{fill:#444;height:40%;width:auto}#ped-screen-root .bookmark-modal .modal header .header-controls .button.close svg{height:30%;fill:#4f4f4f}#ped-screen-root .bookmark-modal .modal header .header-controls .pin-button.active{color:#3865ff}#ped-screen-root .bookmark-modal .modal header .header-controls .pin-button.disabled{pointer-events:none;opacity:.8}#ped-screen-root .bookmark-modal .modal a{color:#fff}#ped-screen-root .bookmark-modal .modal a:hover{text-decoration:underline}#ped-screen-root .bookmark-modal .modal .section-block:first-child{margin-top:0}#ped-screen-root .bookmark-modal .modal .form-input{margin-bottom:3.5vmin}#ped-screen-root .bookmark-modal .modal .preview-wrap{margin-bottom:50px}#ped-screen-root .bookmark-modal .modal .preview-wrap .preview-loader-wrap .preview-loader-controls{display:flex}#ped-screen-root .bookmark-modal .modal .preview-wrap .preview-loader-wrap .preview-loader-controls .load-btn{width:70px;display:flex;align-items:center;justify-content:center;margin-right:10px}#ped-screen-root .bookmark-modal .modal .preview-wrap .preview-image{display:flex;align-items:center;justify-content:center;border-radius:15px;overflow:hidden;background:var(--background-light-color)}#ped-screen-root .bookmark-modal .modal .preview-wrap .preview-image .icon{display:flex;justify-content:center;background-size:contain;background-repeat:no-repeat;background-position:center;width:100%;height:100%}#ped-screen-root .bookmark-modal .modal .preview-wrap .preview-image .fav{width:16px;height:auto}#ped-screen-root .bookmark-modal .modal .preview-select-wrap .section-block_controls{margin-top:2vmin;width:100%;justify-content:flex-start !important}#ped-screen-root .bookmark-modal .modal .section-block_title{padding-top:0vmin;font-size:1.6vmin;font-weight:400}#ped-screen-root .bookmark-modal .modal .controls{padding:4vmin 0;padding-top:7vmin}#ped-screen-root .bookmark-modal .modal .folder-picker{width:calc(100% - 8vmin);height:43vmin;background:inherit;position:absolute;top:12vmin;overflow:auto}#ped-screen-root .bookmark-modal .modal .folder-picker::-webkit-scrollbar{width:0;height:0}#ped-screen-root .bookmark-modal .modal .folder-picker::-webkit-scrollbar-button{width:0px;height:0px}#ped-screen-root .bookmark-modal .modal .folder-picker::-webkit-scrollbar-thumb{background:var(--scroll-color);border-radius:50px}#ped-screen-root .bookmark-modal .modal .folder-picker::-webkit-scrollbar-track{background:rgba(0,0,0,0)}#ped-screen-root .bookmark-modal .modal .folder-picker::-webkit-scrollbar-track:hover{background:rgba(0,0,0,0)}#ped-screen-root .bookmark-modal .modal .folder-picker::-webkit-scrollbar-track:active{background:rgba(0,0,0,0)}#ped-screen-root .bookmark-modal .modal .folder-picker ::-webkit-scrollbar-corner{background:rgba(0,0,0,0)}#ped-screen-root .bookmark-modal .modal .folder-picker .folders{display:flex;flex-direction:column;gap:2vmin}#ped-screen-root .bookmark-modal .modal .folder-picker .folders .folder{display:flex;align-items:center;gap:2.5vmin;padding:2vmin 2vmin 2vmin 2.5vmin;border-radius:2vmin;cursor:pointer;transition:.2s ease;background:#262626;border:.2vmin solid rgba(0,0,0,0)}#ped-screen-root .bookmark-modal .modal .folder-picker .folders .folder .logo{font-size:3vmin;display:flex}#ped-screen-root .bookmark-modal .modal .folder-picker .folders .folder .name{flex-grow:1;font-size:2vmin}#ped-screen-root .bookmark-modal .modal .folder-picker .folders .folder .items-count{background:#262626;border-radius:1vmin;padding:.6vmin 1vmin;min-width:3.4vmin;display:flex;align-items:center;justify-content:center;font-size:1.8vmin;transition:.2s ease}#ped-screen-root .bookmark-modal .modal .folder-picker .folders .folder.selected{border-color:#3d3d3d;background:#2a2a2a}#ped-screen-root .bookmark-modal .modal .folder-picker .folders .folder.selected .items-count{background:#303030}#ped-screen-root .folder-modal .modal{overflow:visible;width:59vmin}#ped-screen-root .folder-modal .row{display:flex;gap:1.5vmin}#ped-screen-root .folder-modal .row .form-input{flex-grow:1}#ped-screen-root .folder-modal .icon-wrap{aspect-ratio:1;height:8vmin;position:relative;transition:.1s ease;border-radius:1.8vmin;font-size:1.8vmin;box-sizing:border-box;font-weight:500;border:.1vmin solid #1b1b1b;color:#7a7a7a;background:#262626;font-size:3.7vmin;flex-shrink:0}#ped-screen-root .folder-modal .icon-wrap svg{height:30%;width:auto;display:none}#ped-screen-root .folder-modal .icon-wrap:hover span{display:none}#ped-screen-root .folder-modal .icon-wrap:hover svg{display:flex}#ped-screen-root .folder-modal .colors{display:grid;grid-template-columns:repeat(8, 1fr);gap:1.3vmin;margin-top:3.5vmin}#ped-screen-root .folder-modal .colors .color{width:100%;aspect-ratio:1;border-radius:50%;border:.4vmin solid rgba(0,0,0,0)}#ped-screen-root .folder-modal .colors .color.active{border-color:#fff}#ped-screen-root .folder-modal .colors input[type=color]{width:100%;height:100%}#ped-screen-root .folder-modal .colors .picker{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#3d3d3d;border-radius:50%;cursor:pointer;position:relative}#ped-screen-root .folder-modal .colors .picker input{position:absolute;opacity:0}#ped-screen-root .folder-modal .colors .picker svg{width:2vmin;height:auto;fill:#fff;opacity:.5}#ped-screen-root .folder-modal .colors .locked{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#3d3d3d;border-radius:50%;cursor:pointer}#ped-screen-root .folder-modal .colors .locked svg{width:2vmin;height:auto}#ped-screen-root .folder-modal .colors .app-color-picker{width:100%;height:100%}#ped-screen-root .folder-modal .colors .app-color-picker .wrapper{width:100%;aspect-ratio:1}#ped-screen-root .folder-modal .colors .app-color-picker .wrapper .color{height:100%;color:#000;width:100%;aspect-ratio:1;border-radius:50%;border:.4vmin solid rgba(0,0,0,0)}#ped-screen-root .folder-modal .colors .app-color-picker .wrapper .color svg{width:1.5vmin;height:auto;display:none}#ped-screen-root .folder-modal .colors .app-color-picker.locked{cursor:default;pointer-events:none}#ped-screen-root .folder-modal .colors .app-color-picker.locked .wrapper .color svg{display:flex}#ped-screen-root .folder-modal .controls{padding-top:3.5vmin}#ped-screen-root .folder-modal .controls .confirm{flex-grow:1}#ped-screen-root .app-root{font-family:Poppins,sans-serif}#ped-screen-root svg{outline:none} /* ============================================== */ /* MÓDULO FECHAMENTO MENSAL */ /* ============================================== */ #fech-screen-root { display: none; } #fech-screen-root.active { display: block; } .fech-app { display: flex; min-height: 100vh; } #fech-screen-root .nav-item.active { background: rgba(139, 92, 246, 0.12); color: #c4b5fd; border-left-color: #8b5cf6; } #fech-screen-root .logo span, #fech-screen-root .card-title .ico { color: #c4b5fd; } /* ===== Grid de KPIs dedicado do módulo Fechamento ===== */ /* Usa classe própria pra não conflitar com .grid-4 do CSS do Hub/Comissões. Desktop: 4 colunas. Tablet: 2. Mobile pequeno: 1. */ .fech-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 900px) { .fech-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 360px) { .fech-kpi-grid { grid-template-columns: 1fr; } } /* ===== Botão hambúrguer (só aparece em mobile) ===== */ .fech-hamburger { display: none; background: var(--surface2); border: 1px solid var(--border); color: var(--text); width: 40px; height: 40px; border-radius: 8px; cursor: pointer; font-size: 18px; align-items: center; justify-content: center; } .fech-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 49; backdrop-filter: blur(2px); } .fech-sidebar-backdrop.active { display: block; } /* ===== Tablet: 900px ou menos ===== */ @media (max-width: 900px) { #fech-screen-root .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .25s ease; z-index: 50; box-shadow: 4px 0 24px rgba(0,0,0,.4); } #fech-screen-root .sidebar.open { transform: translateX(0); } #fech-screen-root .main { width: 100%; } #fech-screen-root .fech-hamburger { display: inline-flex; } /* KPIs do dashboard: 2 colunas em telas até tablet (evita cortar conteúdo) */ #fech-screen-root .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } /* ===== Mobile: 600px ou menos ===== */ @media (max-width: 600px) { /* Topbar quebra em 2 linhas */ #fech-screen-root .topbar { flex-wrap: wrap; padding: 10px 14px; gap: 8px; align-items: flex-start; } #fech-screen-root .topbar-left { flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; align-items: flex-start; } #fech-screen-root .topbar-title { font-size: 16px; } #fech-screen-root .topbar-sub { font-size: 11px; } #fech-screen-root .month-selector { width: 100%; justify-content: center; margin-top: 4px; } /* Padding menor no conteúdo */ #fech-screen-root .content { padding: 10px !important; } #fech-screen-root .card { padding: 12px !important; } /* Cards do dashboard: 2 colunas em mobile, não 4 */ #fech-screen-root .grid-4, #fech-screen-root .view .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } /* Toda a parte de "grid-2" empilha em 1 coluna */ #fech-screen-root .grid-2 { grid-template-columns: 1fr !important; } /* Botões maiores e mais espaçados pro toque */ #fech-screen-root .btn { min-height: 40px; padding: 8px 14px; } #fech-screen-root .btn-sm { min-height: 36px; } /* Inputs maiores (>=16px evita zoom no iOS) */ #fech-screen-root input, #fech-screen-root textarea, #fech-screen-root select { font-size: 16px !important; } /* Sino dropdown vira modal fullscreen em mobile */ #fech-sino-dropdown { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; max-width: none !important; border-radius: 0 !important; z-index: 200 !important; } } /* ===== Mobile pequeno: 380px ou menos ===== */ @media (max-width: 380px) { /* KPIs dashboard 1 só coluna em telas mini */ #fech-screen-root .grid-4 { grid-template-columns: 1fr !important; } } /* ===== Suporte ao notch do iPhone ===== */ @supports (padding-top: env(safe-area-inset-top)) { #fech-screen-root .topbar { padding-top: calc(10px + env(safe-area-inset-top)); } #fech-screen-root .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } } /* ─── bloco ─── */ #nf-dropzone.drag-over { border-color: #10b981 !important; background: rgba(16,185,129,.05) !important; } /* ─── bloco ─── */ @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.7} }