:root{ --bg:#0f172a; --panel:#111827; --card:#ffffff; --muted:#64748b; --text:#0f172a; --primary:#2563eb; --primary-dark:#1d4ed8; --line:#e5e7eb; --soft:#f8fafc; --success:#16a34a; --danger:#dc2626; } *{box-sizing:border-box} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f1f5f9;color:var(--text)} a{color:inherit;text-decoration:none}.sidebar{position:fixed;inset:0 auto 0 0;width:280px;background:linear-gradient(180deg,#0f172a,#111827);color:#fff;padding:24px;display:flex;flex-direction:column;gap:28px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#2563eb,#38bdf8);display:grid;place-items:center;font-weight:800}.brand strong{display:block;font-size:18px}.brand small{color:#cbd5e1}.nav-link{display:block;padding:13px 14px;border-radius:14px;color:#cbd5e1;margin-bottom:8px}.nav-link:hover{background:rgba(255,255,255,.08);color:#fff}.user-box{margin-top:auto;padding:16px;border-radius:18px;background:rgba(255,255,255,.08);display:flex;flex-direction:column;gap:4px}.user-box small{color:#cbd5e1}.user-box a{margin-top:8px;color:#93c5fd}.main{margin-left:280px;padding:34px;min-height:100vh}.main-login{margin-left:0;padding:0}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.page-header h1{margin:6px 0 8px;font-size:32px;letter-spacing:-.04em}.page-header p{margin:0;color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--primary);font-size:12px;font-weight:800}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;color:#111827;border-radius:12px;padding:11px 15px;font-weight:700;cursor:pointer}.btn:hover{box-shadow:0 10px 25px rgba(15,23,42,.08)}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary-dark)}.btn.ghost{background:transparent}.btn.full{width:100%}.actions{display:flex;gap:10px;flex-wrap:wrap}.card,.kpi{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 16px 35px rgba(15,23,42,.06)}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.kpi-grid.small{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi{padding:22px}.kpi span{display:block;color:var(--muted);font-size:13px;margin-bottom:10px}.kpi strong{font-size:26px;letter-spacing:-.04em}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.card{padding:22px}.card h2{margin:0 0 16px;font-size:20px}.table-wrap{overflow:auto}.table-wrap.wide{max-width:100%}table{border-collapse:collapse;width:100%;min-width:720px}th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#475569;background:#f8fafc;position:sticky;top:0}tr:hover td{background:#f8fafc}.link{color:var(--primary);font-weight:800}.filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto auto;gap:12px;align-items:end;margin-bottom:18px}.filters label,.form-grid label,.form-stack label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;color:#334155}input,select,textarea{border:1px solid #d1d5db;border-radius:12px;padding:11px 12px;font:inherit;background:#fff;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}.pagination{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:18px;color:var(--muted)}.empty{text-align:center;color:var(--muted);padding:30px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.detail-item{padding:14px;border-radius:16px;background:#f8fafc;border:1px solid var(--line)}.detail-item span{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}.detail-item strong{white-space:pre-wrap;font-weight:650}.span-2{grid-column:span 2}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-actions{display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:18px;margin-top:8px}.flash-area{position:fixed;top:18px;right:18px;z-index:20}.flash{padding:12px 14px;border-radius:12px;color:#fff;margin-bottom:8px;box-shadow:0 12px 28px rgba(15,23,42,.2)}.flash.success{background:var(--success)}.flash.error{background:var(--danger)}.login-wrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#1d4ed8,#0f172a 38%,#020617)}.login-card{width:min(460px,92vw);background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.35);border-radius:28px;padding:34px;box-shadow:0 28px 80px rgba(0,0,0,.35)}.login-badge{display:inline-flex;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-weight:800;padding:8px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.login-card h1{font-size:34px;line-height:1;margin:18px 0 12px;letter-spacing:-.05em}.login-card p{color:var(--muted);margin-bottom:24px}.form-stack{display:flex;flex-direction:column;gap:14px}.hint{display:block;color:var(--muted);margin-top:14px;text-align:center} @media(max-width:1100px){.sidebar{position:relative;width:auto;inset:auto}.main{margin-left:0}.kpi-grid,.grid-2,.filters{grid-template-columns:1fr}.form-grid,.detail-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.page-header{flex-direction:column}.main{padding:20px}} .folder-card { margin-bottom: 18px; } .folder-card h3 { margin: 8px 0; } .muted { color: var(--muted); font-size: 0.92rem; } .actions form { margin: 0; } .hint { margin-top: 8px; color: #64748b; font-size: 0.92rem; } .field-note { display: block; margin-top: 6px; color: #64748b; font-size: 0.78rem; line-height: 1.35; } /* Cadastro de proposta organizado por blocos */ .form-page{ display:flex; flex-direction:column; gap:18px; } .form-section{ padding:0; overflow:hidden; } .section-title{ display:flex; gap:14px; align-items:flex-start; padding:20px 22px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#ffffff,#f8fafc); } .section-title span{ min-width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background:#dbeafe; color:#1d4ed8; font-weight:900; font-size:13px; } .section-title h2{ margin:0 0 5px; font-size:18px; letter-spacing:-.03em; } .section-title p{ margin:0; color:var(--muted); font-size:13px; line-height:1.35; } .section-grid{ padding:20px 22px 22px; } .highlight-section{ border-color:#bfdbfe; } .highlight-section .section-title{ background:linear-gradient(180deg,#eff6ff,#ffffff); } .form-sticky-actions{ display:flex; justify-content:flex-end; gap:10px; position:sticky; bottom:14px; z-index:5; padding:14px; border-radius:18px; } .form-sticky-actions.card{ box-shadow:0 18px 45px rgba(15,23,42,.12); } @media(max-width:1100px){ .section-title{padding:18px}.section-grid{padding:18px}.form-sticky-actions{position:static;flex-direction:column-reverse}.form-sticky-actions .btn{width:100%} } /* Filtro de status com múltipla seleção */ .filter-label{ display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:700; color:#334155; } .multi-select{ position:relative; min-width:180px; overflow:visible; } .multi-select-btn{ width:100%; min-height:43px; border:1px solid #d1d5db; border-radius:12px; padding:11px 12px; background:#fff; font:inherit; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; color:#111827; } .multi-select-btn:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); } .chevron{ color:#64748b; font-size:12px; } .multi-select-menu{ display:none; position:absolute; top:calc(100% + 6px); left:0; width:240px; max-height:280px; overflow:auto; background:#fff; border:1px solid #d1d5db; border-radius:14px; box-shadow:0 18px 45px rgba(15,23,42,.16); padding:8px; z-index:30; } .multi-select-menu.show{ display:block; } .check-row{ display:flex !important; flex-direction:row !important; align-items:center; gap:8px !important; padding:8px 9px; border-radius:10px; color:#111827 !important; font-size:13px !important; font-weight:650 !important; cursor:pointer; } .check-row:hover{ background:#f1f5f9; } .check-row input{ width:14px; height:14px; padding:0; border-radius:4px; } .check-row.strong{ font-weight:800 !important; } .check-divider{ height:1px; background:#e5e7eb; margin:5px 2px; } @media(max-width:1100px){ .multi-select-menu{position:static;width:100%;margin-top:6px;box-shadow:none;} } .clientes-filters{ grid-template-columns:minmax(260px, 1fr) auto auto; } .table-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; } .table-title-row h2{ margin:0 0 4px; } .table-title-row p{ margin:0; color:var(--muted); } .section-link{ display:inline-flex; margin-top:8px; color:var(--primary); font-weight:800; font-size:13px; } @media(max-width:1100px){ .clientes-filters{grid-template-columns:1fr;} } /* Dashboard com gráficos automáticos */ .dashboard-grid .chart-card{ min-height:360px; } .chart-title{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; } .chart-title h2{ margin:0 0 4px; } .chart-title p{ margin:0; color:var(--muted); font-size:13px; } .chart-card canvas{ width:100%; display:block; border-radius:16px; background:linear-gradient(180deg,#ffffff,#f8fafc); border:1px solid #eef2f7; } .badge{ display:inline-flex; border-radius:999px; background:#dbeafe; color:#1d4ed8; font-weight:800; padding:5px 9px; font-size:12px; } /* Dashboard com gráficos mais profissionais */ .dashboard-grid .chart-card{ min-height: 420px; } .chart-card-lg{ padding-bottom: 18px; } .chart-wrap{ position: relative; width: 100%; } .chart-wrap-md{ height: 320px; } .chart-wrap-lg{ height: 360px; } .chart-card canvas{ width: 100% !important; height: 100% !important; border-radius: 18px; background: linear-gradient(180deg,#ffffff,#fbfdff); border: 1px solid #edf2f7; padding: 12px; } @media(max-width:1100px){ .dashboard-grid .chart-card{min-height: 360px;} .chart-wrap-md,.chart-wrap-lg{height: 300px;} } /* Cores de status */ .status-pill, .status-option-tag{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:28px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.02em; line-height:1; border:1px solid transparent; white-space:nowrap; } .status-option-tag{ min-height:26px; } .multi-select-btn #statusButtonText{ display:flex; align-items:center; min-height:20px; } .check-row{ justify-content:flex-start; } .check-row .status-option-tag{ margin-left:2px; } .status-perdida, .status-perdido, .status-cancelada, .status-cancelado, .status-declinada, .status-declinado{ background:#fee2e2; border-color:#fecaca; color:#991b1b; } .status-perdida{ background:#7f1d1d; color:#fff; border-color:#7f1d1d; } .status-perdido{ background:#7f1d1d; color:#fff; border-color:#7f1d1d; } .status-ganho, .status-ganha, .status-entregue{ background:#dcfce7; border-color:#bbf7d0; color:#166534; } .status-emitida, .status-em-andamento, .status-produzindo{ background:#dbeafe; border-color:#bfdbfe; color:#1d4ed8; } .status-elaboracao, .status-postergada{ background:#fef3c7; border-color:#fde68a; color:#92400e; } .status-recuperando-dados.-aguarde-alguns-segundos-e-tente-cortar-ou-copiar-novamente., .status-sem-status{ background:#e5e7eb; border-color:#d1d5db; color:#374151; } /* Tela de legenda oficial de status */ .legend-flow-card{ margin-bottom:18px; } .status-flow{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; } .status-flow strong{ color:#64748b; font-size:18px; } .legend-table td{ vertical-align:middle; line-height:1.45; } .legend-list{ display:flex; flex-direction:column; gap:12px; } .legend-list p{ margin:0; color:#334155; line-height:1.5; } .kpi small{ display:block; color:#64748b; margin-top:8px; line-height:1.35; font-size:12px; } /* ========================================================= STATUS OFICIAL - CORES FORÇADAS V2 ========================================================= */ .status-pill, .status-option-tag{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; min-height:28px !important; padding:7px 11px !important; border-radius:999px !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.02em !important; line-height:1 !important; border:1px solid transparent !important; white-space:nowrap !important; } .status-option-tag::before, .status-pill::before{ content:"" !important; width:8px !important; height:8px !important; border-radius:999px !important; background:currentColor !important; opacity:.9 !important; } /* Azul - proposta viva/em fluxo */ .status-em-andamento, .status-produzindo, .status-emitida{ background:#DBEAFE !important; border-color:#BFDBFE !important; color:#1D4ED8 !important; } /* Azul claro - entregue ao cliente */ .status-entregue{ background:#E0F2FE !important; border-color:#BAE6FD !important; color:#0369A1 !important; } /* Verde - sucesso */ .status-ganha, .status-ganho{ background:#DCFCE7 !important; border-color:#BBF7D0 !important; color:#166534 !important; } /* Vermelho escuro - perda */ .status-perdida, .status-perdido{ background:#7F1D1D !important; border-color:#7F1D1D !important; color:#FFFFFF !important; } /* Vermelho claro - encerrada sem seguir */ .status-cancelada, .status-cancelado, .status-declinada, .status-declinado{ background:#FEE2E2 !important; border-color:#FECACA !important; color:#991B1B !important; } /* Amarelo/Laranja - atenção ou suspensa */ .status-elaboracao, .status-elaboração, .status-postergada{ background:#FEF3C7 !important; border-color:#FDE68A !important; color:#92400E !important; } /* Cinza - fallback */ .status-sem-status, .status-outros{ background:#E5E7EB !important; border-color:#D1D5DB !important; color:#374151 !important; } /* Garante visibilidade no filtro de múltipla seleção */ .multi-select-menu .check-row .status-option-tag{ width:auto !important; text-align:left !important; } .multi-select-btn .status-pill{ padding:5px 9px !important; min-height:24px !important; } /* ========================================================= CORES OFICIAIS DE STATUS - SOLICITAÇÃO JARVIS ========================================================= */ .status-pill, .status-option-tag{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; min-height:28px !important; padding:7px 11px !important; border-radius:999px !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.02em !important; line-height:1 !important; border:1px solid transparent !important; white-space:nowrap !important; } .status-pill::before, .status-option-tag::before{ content:"" !important; width:8px !important; height:8px !important; border-radius:999px !important; background:currentColor !important; opacity:.95 !important; } .status-elaboracao, .status-elaboração{ background:#FEF3C7 !important; border-color:#FDE68A !important; color:#92400E !important; } .status-emitida{ background:#DCFCE7 !important; border-color:#BBF7D0 !important; color:#166534 !important; } .status-ganho, .status-ganha{ background:#DBEAFE !important; border-color:#BFDBFE !important; color:#1D4ED8 !important; } .status-perdida, .status-perdido{ background:#FEE2E2 !important; border-color:#FCA5A5 !important; color:#991B1B !important; } .status-cancelada, .status-cancelado{ background:#FCE7F3 !important; border-color:#FBCFE8 !important; color:#9D174D !important; } .status-declinada, .status-declinado{ background:#E7D6C5 !important; border-color:#C9A27E !important; color:#6B3F1D !important; } .status-postergada{ background:#111827 !important; border-color:#111827 !important; color:#FFFFFF !important; } .status-em-andamento, .status-produzindo, .status-entregue, .status-sem-status, .status-outros{ background:#E5E7EB !important; border-color:#D1D5DB !important; color:#374151 !important; } /* Nova proposta - histórico de contatos */ .contact-history-box{ border:1px solid #e5e7eb; background:#f8fafc; border-radius:18px; padding:16px; } .contact-history-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; } .contact-history-header strong{ display:block; font-size:15px; } .contact-history-header small{ display:block; color:#64748b; margin-top:4px; line-height:1.35; } .contact-history-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; } .check-options{ display:flex; flex-direction:column; gap:6px; margin:8px 0; } .contact-choice{ display:flex !important; flex-direction:row !important; align-items:center; gap:8px !important; padding:8px 9px; border:1px solid #e5e7eb; background:#fff; border-radius:12px; font-size:12px !important; font-weight:700 !important; } .contact-choice input{ width:14px; height:14px; padding:0; } @media(max-width:1100px){ .contact-history-header{flex-direction:column;} .contact-history-grid{grid-template-columns:1fr;} } /* Cadastro de múltiplos contatos do cliente */ .contacts-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; } .contatos-container{ display:flex; flex-direction:column; gap:14px; } .contato-card{ border:1px solid #e5e7eb; background:#ffffff; border-radius:18px; padding:16px; box-shadow:0 10px 24px rgba(15,23,42,.04); } .contato-card-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .contato-card-header strong{ font-size:15px; } .principal-check{ display:flex !important; flex-direction:row !important; align-items:center; gap:8px !important; color:#334155 !important; font-size:13px !important; font-weight:800 !important; margin-left:auto; } .principal-check input{ width:15px; height:15px; padding:0; } .danger-light{ color:#991b1b !important; border-color:#fecaca !important; background:#fff5f5 !important; } @media(max-width:1100px){ .contacts-toolbar, .contato-card-header{ flex-direction:column; align-items:flex-start; } .principal-check{margin-left:0;} } /* Ajustes de fluxo comercial completo */ .contact-actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; } .proposal-sections{ display:flex; flex-direction:column; gap:18px; } .proposal-section{ padding:0; overflow:hidden; } .compact-title{ padding:18px 22px; } .commercial-summary{ margin-top:16px; } @media(max-width:1100px){ .contact-actions{align-items:flex-start;} } /* Navegação por abas da proposta */ .proposal-tabs-card{ margin-bottom:18px; padding:12px; } .proposal-tabs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .proposal-tab{ border:1px solid #dbe3ef; background:#fff; color:#334155; border-radius:16px; padding:14px 16px; font:inherit; font-weight:800; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:.2s ease; } .proposal-tab span{ width:28px; height:28px; display:grid; place-items:center; border-radius:10px; background:#eff6ff; color:#2563eb; font-size:12px; font-weight:900; } .proposal-tab:hover{ border-color:#93c5fd; box-shadow:0 10px 24px rgba(37,99,235,.08); } .proposal-tab.active{ background:#2563eb; border-color:#2563eb; color:#fff; box-shadow:0 14px 28px rgba(37,99,235,.25); } .proposal-tab.active span{ background:rgba(255,255,255,.18); color:#fff; } .proposal-tab-panel{ display:none; } .proposal-tab-panel.active{ display:flex; flex-direction:column; gap:18px; } .proposal-subtitle{ margin:4px 0 12px; } .proposal-subtitle h3{ margin:0 0 4px; font-size:18px; } .proposal-subtitle p{ margin:0; color:#64748b; font-size:13px; } .form-sticky-actions .btn:disabled{ opacity:.45; cursor:not-allowed; } @media(max-width:1100px){ .proposal-tabs{ grid-template-columns:1fr; } } /* Itens orçados e abas realmente funcionais */ .row-title{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; } .items-table input, .items-table select{ width:100%; min-width:120px; padding:9px 10px; border-radius:10px; } .items-table th:last-child, .items-table td:last-child{ width:110px; } .discipline-tags{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:14px 0 4px; } @media(max-width:1100px){ .row-title{flex-direction:column;} } /* ========================================================= TEMA TECNOLÓGICO - GRUPO APOIO ========================================================= */ :root{ --tech-bg:#eef3fa; --tech-sidebar:#07111f; --tech-sidebar-2:#0b1628; --tech-border:#dbe7f5; --tech-text:#0f172a; --tech-muted:#64748b; --tech-blue:#2563eb; --tech-cyan:#06b6d4; --tech-shadow:0 22px 55px rgba(15,23,42,.10); --tech-shadow-soft:0 12px 30px rgba(15,23,42,.07); } *{scrollbar-width:thin;scrollbar-color:#2563eb rgba(226,232,240,.75);} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:rgba(226,232,240,.75);border-radius:999px;} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2563eb,#0ea5e9);border-radius:999px;border:2px solid rgba(226,232,240,.75);} body{ background: radial-gradient(circle at 20% 0%, rgba(37,99,235,.12), transparent 34%), radial-gradient(circle at 90% 12%, rgba(6,182,212,.12), transparent 30%), linear-gradient(180deg,#f7fbff 0%,#edf3fb 48%,#e8eef7 100%) !important; color:var(--tech-text); letter-spacing:-.01em; } .app-shell,.layout,.main,.content,main{background:transparent !important;} .sidebar{ background: radial-gradient(circle at 20% 5%, rgba(37,99,235,.38), transparent 22%), linear-gradient(180deg,var(--tech-sidebar) 0%,var(--tech-sidebar-2) 100%) !important; border-right:1px solid rgba(148,163,184,.18); box-shadow:20px 0 55px rgba(2,6,23,.16); } .brand{border-bottom:1px solid rgba(148,163,184,.15);padding-bottom:22px;} .brand-logo,.logo-mark{ background:linear-gradient(135deg,#2563eb,#06b6d4) !important; box-shadow:0 16px 35px rgba(37,99,235,.42), inset 0 1px 0 rgba(255,255,255,.25); } .brand h1,.brand strong,.sidebar .brand-title{color:#f8fafc !important;letter-spacing:.01em;} .brand p,.sidebar .brand-subtitle{color:#9fb3d1 !important;} .nav-link,.sidebar a{position:relative;border:1px solid transparent;border-radius:16px !important;transition:.22s ease;} .nav-link:hover,.sidebar a:hover{ background:rgba(37,99,235,.13) !important; border-color:rgba(96,165,250,.22); color:#fff !important; transform:translateX(4px); } .nav-link.active,.sidebar a.active{ background:linear-gradient(135deg,rgba(37,99,235,.95),rgba(6,182,212,.75)) !important; color:#fff !important; box-shadow:0 14px 35px rgba(37,99,235,.35); } .sidebar-footer,.user-card{ background:rgba(255,255,255,.08) !important; border:1px solid rgba(148,163,184,.14) !important; backdrop-filter:blur(14px); } .page-header{margin-bottom:22px !important;padding:10px 2px;} .page-header .eyebrow,.eyebrow{color:#2563eb !important;font-weight:900 !important;letter-spacing:.24em !important;} .page-header h1{font-size:34px !important;line-height:1.05;letter-spacing:-.05em;color:#0f172a !important;} .page-header p{color:#64748b !important;font-size:15px !important;} .card,.kpi,.form-section,.table-card,.chart-card,.proposal-tabs-card,.form-sticky-actions{ background:rgba(255,255,255,.88) !important; border:1px solid rgba(188,210,238,.82) !important; border-radius:26px !important; box-shadow:var(--tech-shadow-soft) !important; backdrop-filter:blur(18px); } .card:hover,.kpi:hover{border-color:rgba(37,99,235,.24) !important;box-shadow:var(--tech-shadow) !important;} .kpi{overflow:hidden;position:relative;} .kpi:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,#2563eb,#06b6d4);} .kpi span{color:#64748b !important;font-weight:800 !important;text-transform:uppercase;letter-spacing:.08em;} .kpi strong{color:#0f172a !important;letter-spacing:-.03em;} .btn,button,input[type="submit"]{border-radius:14px !important;font-weight:800 !important;transition:.2s ease !important;} .btn.primary,button.primary,.primary{ background:linear-gradient(135deg,#2563eb,#0ea5e9) !important; border-color:#2563eb !important; color:#fff !important; box-shadow:0 12px 28px rgba(37,99,235,.30); } .btn.primary:hover,button.primary:hover,.btn:hover{transform:translateY(-1px);} input,select,textarea{ background:#fff !important; border:1px solid #cdd9ea !important; border-radius:14px !important; min-height:42px; transition:.18s ease !important; color:#0f172a !important; } input:focus,select:focus,textarea:focus{ border-color:#2563eb !important; box-shadow:0 0 0 4px rgba(37,99,235,.12) !important; outline:none !important; } label{color:#1e293b !important;font-weight:850 !important;letter-spacing:.01em;} .field-note,.muted,small{color:#64748b !important;} .proposal-tabs-card{position:sticky;top:12px;z-index:20;padding:12px !important;margin-bottom:18px !important;} .proposal-tabs{gap:12px !important;} .proposal-tab{ min-height:58px; border-radius:18px !important; border:1px solid #d8e4f4 !important; background:linear-gradient(180deg,#fff,#f8fbff) !important; color:#1e293b !important; box-shadow:0 8px 20px rgba(15,23,42,.04); } .proposal-tab span{ background:#eaf3ff !important; color:#2563eb !important; } .proposal-tab.active{ background:linear-gradient(135deg,#2563eb,#0ea5e9) !important; border-color:#2563eb !important; color:#fff !important; box-shadow:0 18px 40px rgba(37,99,235,.32); } .proposal-tab.active span{background:rgba(255,255,255,.18) !important;color:#fff !important;} .section-title{ background:linear-gradient(180deg,rgba(248,251,255,.92),rgba(255,255,255,.75)); border-bottom:1px solid rgba(203,213,225,.62); } .section-title > span,.compact-title > span{ background:linear-gradient(135deg,#dbeafe,#eff6ff) !important; color:#2563eb !important; border:1px solid rgba(96,165,250,.25); box-shadow:0 8px 18px rgba(37,99,235,.10); } .section-title h2{letter-spacing:-.03em;} .form-grid,.section-grid{gap:18px !important;} .form-sticky-actions{ position:sticky; bottom:12px; z-index:30; display:flex; justify-content:flex-end; gap:10px; padding:14px !important; } .table-wrap{ border-radius:20px !important; border:1px solid #dbe7f5; overflow:auto; background:#fff; } table{border-collapse:separate !important;border-spacing:0;} thead th{ background:linear-gradient(180deg,#f8fbff,#eef5ff) !important; color:#334155 !important; font-size:12px !important; letter-spacing:.10em !important; text-transform:uppercase; border-bottom:1px solid #dbe7f5 !important; } tbody tr{transition:.18s ease;} tbody tr:hover{background:#f8fbff !important;} td{border-bottom:1px solid #edf2f7 !important;} .status-pill,.status-option-tag{box-shadow:0 8px 18px rgba(15,23,42,.06);} .contact-history-box,.contato-card{ border-radius:22px !important; background:linear-gradient(180deg,#f8fbff,#fff) !important; border-color:#dbe7f5 !important; } .contact-choice{border-radius:14px !important;} .items-table input,.items-table select{background:#fff !important;border-radius:12px !important;} .danger-light{background:#fff1f2 !important;color:#be123c !important;border-color:#fecdd3 !important;} .chart-card canvas{ border-radius:22px !important; background:linear-gradient(180deg,#fff,#f8fbff) !important; border:1px solid #dbe7f5 !important; } .folder-card{ background: linear-gradient(135deg,rgba(37,99,235,.08),rgba(6,182,212,.06)), rgba(255,255,255,.90) !important; } .flash,.alert{ border-radius:18px !important; border:1px solid #bfdbfe !important; background:#eff6ff !important; color:#1d4ed8 !important; } @media(max-width:1100px){ .page-header h1{font-size:28px !important;} .proposal-tabs-card{position:relative;top:auto;} .card,.form-section{border-radius:22px !important;} } /* Dashboard clicável */ .chart-card canvas{ cursor:pointer; } .clickable-row{ cursor:pointer; } .clickable-row:hover{ background:#eff6ff !important; transform:translateX(2px); } .chart-card .chart-title p::after{ content:" • clique para filtrar"; color:#2563eb; font-weight:800; } /* ========================================================= CAMADA UX - SISTEMA FÁCIL DE COMPREENDER ========================================================= */ .nav-help{ display:flex !important; flex-direction:column; align-items:flex-start !important; gap:3px; padding-top:12px !important; padding-bottom:12px !important; } .nav-help strong{ font-size:14px; line-height:1.1; } .nav-help small{ font-size:11px; color:#9fb3d1 !important; line-height:1.25; font-weight:600; } .nav-help:hover small{ color:#dbeafe !important; } .quick-guide-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; } .guide-card, .help-panel{ background:rgba(255,255,255,.90); border:1px solid #dbe7f5; border-radius:22px; box-shadow:0 12px 28px rgba(15,23,42,.06); backdrop-filter:blur(16px); } .guide-card{ display:flex; gap:12px; padding:16px; } .guide-card > span{ min-width:32px; width:32px; height:32px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#2563eb,#0ea5e9); color:#fff; font-weight:900; box-shadow:0 10px 22px rgba(37,99,235,.24); } .guide-card strong, .help-panel strong{ display:block; color:#0f172a; font-size:14px; margin-bottom:4px; } .guide-card p, .help-panel p{ margin:0; color:#64748b; font-size:13px; line-height:1.45; } .help-panel{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px; margin-bottom:18px; } .help-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; } .help-chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:12px; font-weight:850; border:1px solid #bfdbfe; } .navigation-tip{ margin:4px 0 -4px; padding:12px 16px; border-radius:18px; background:#f8fbff; border:1px dashed #bcd2ee; color:#475569; font-size:13px; } .navigation-tip strong{ color:#1d4ed8; } .proposal-tab{ position:relative; } .proposal-tab.active:after{ content:"Você está aqui"; position:absolute; right:12px; bottom:-10px; font-size:10px; background:#0f172a; color:#fff; padding:3px 7px; border-radius:999px; box-shadow:0 8px 16px rgba(15,23,42,.18); } .form-section .section-title p, .chart-title p{ max-width:780px; } input[readonly]{ background:#f8fafc !important; color:#334155 !important; } .form-sticky-actions{ border:1px solid #bfdbfe !important; } .btn.primary::after{ content:""; } @media(max-width:1100px){ .quick-guide-grid{ grid-template-columns:1fr; } .help-panel{ flex-direction:column; align-items:flex-start; } .help-actions{ justify-content:flex-start; } } /* ========================================================= MENU LATERAL MINIMIZÁVEL AUTOMÁTICO ========================================================= */ :root{ --sidebar-expanded:280px; --sidebar-collapsed:88px; } .sidebar{ width:var(--sidebar-expanded) !important; transition:width .24s ease, box-shadow .24s ease; overflow:visible !important; } .main{ margin-left:var(--sidebar-expanded) !important; width:calc(100% - var(--sidebar-expanded)) !important; transition:margin-left .24s ease, width .24s ease; } .sidebar-toggle{ margin-left:auto; width:36px; height:36px; border:1px solid rgba(148,163,184,.24) !important; border-radius:12px !important; background:rgba(255,255,255,.08) !important; display:grid; place-items:center; gap:3px; cursor:pointer; padding:7px !important; box-shadow:none !important; } .sidebar-toggle span{ display:block; width:16px; height:2px; border-radius:99px; background:#dbeafe; } .brand-text, .nav-text, .user-box span, .user-box small, .user-box a{ transition:opacity .18s ease, transform .18s ease, width .18s ease; } .nav-link{ display:flex !important; align-items:center !important; gap:12px !important; white-space:nowrap; } .nav-icon{ min-width:34px; width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#dbeafe; font-weight:900; font-size:16px; } body.sidebar-collapsed .sidebar{ width:var(--sidebar-collapsed) !important; } body.sidebar-collapsed .main{ margin-left:var(--sidebar-collapsed) !important; width:calc(100% - var(--sidebar-collapsed)) !important; } body.sidebar-collapsed .brand{ justify-content:center; padding-left:12px; padding-right:12px; } body.sidebar-collapsed .brand-text, body.sidebar-collapsed .nav-text, body.sidebar-collapsed .user-box span, body.sidebar-collapsed .user-box small, body.sidebar-collapsed .user-box a{ opacity:0; width:0; max-width:0; overflow:hidden; transform:translateX(-8px); pointer-events:none; } body.sidebar-collapsed .sidebar-toggle{ position:absolute; top:18px; right:-18px; background:linear-gradient(135deg,#2563eb,#0ea5e9) !important; border-color:#2563eb !important; box-shadow:0 12px 28px rgba(37,99,235,.30) !important; } body.sidebar-collapsed .nav-link{ justify-content:center; padding-left:12px !important; padding-right:12px !important; } body.sidebar-collapsed .nav-icon{ background:rgba(37,99,235,.22); } body.sidebar-collapsed .user-box{ padding:12px !important; min-height:58px; } body.sidebar-collapsed .user-box:before{ content:"AP"; width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,#2563eb,#06b6d4); color:#fff; font-weight:900; } /* Tooltip no menu recolhido */ body.sidebar-collapsed .nav-link::after{ content:attr(data-title); position:absolute; left:calc(var(--sidebar-collapsed) - 8px); top:50%; transform:translateY(-50%); background:#0f172a; color:#fff; padding:8px 10px; border-radius:10px; font-size:12px; font-weight:800; opacity:0; pointer-events:none; white-space:nowrap; box-shadow:0 12px 28px rgba(15,23,42,.25); z-index:999; } body.sidebar-collapsed .nav-link:hover::after{ opacity:1; } /* O rótulo também aparece com o menu aberto por peek (mouse sobre o ícone). */ body.sidebar-collapsed.sidebar-peek .nav-link:hover::after{ opacity:1; } /* Ao passar o mouse, o menu abre temporariamente sem perder o estado salvo */ body.sidebar-collapsed.sidebar-peek .sidebar{ width:var(--sidebar-expanded) !important; box-shadow:24px 0 70px rgba(2,6,23,.24); } body.sidebar-collapsed.sidebar-peek .brand{ justify-content:flex-start; } body.sidebar-collapsed.sidebar-peek .brand-text, body.sidebar-collapsed.sidebar-peek .nav-text, body.sidebar-collapsed.sidebar-peek .user-box span, body.sidebar-collapsed.sidebar-peek .user-box small, body.sidebar-collapsed.sidebar-peek .user-box a{ opacity:1; width:auto; max-width:220px; transform:none; pointer-events:auto; } body.sidebar-collapsed.sidebar-peek .nav-link{ justify-content:flex-start; } body.sidebar-collapsed.sidebar-peek .user-box:before{ display:none; } @media(max-width:900px){ :root{ --sidebar-expanded:240px; --sidebar-collapsed:74px; } .main{ padding-left:18px !important; padding-right:18px !important; } } /* ========================================================= CORREÇÃO MENU LATERAL - SEM SOBREPOR O CONTEÚDO ========================================================= */ /* Quando o menu minimizado abre temporariamente no hover, a área principal também acompanha a largura do menu. Isso evita o bug do dashboard/propostas ficar por baixo da lateral. */ body.sidebar-collapsed.sidebar-peek .main{ margin-left:var(--sidebar-expanded) !important; width:calc(100% - var(--sidebar-expanded)) !important; } /* Mantém a expansão mais suave e sem "cortar" textos */ body.sidebar-collapsed.sidebar-peek .sidebar{ width:var(--sidebar-expanded) !important; z-index:1000; } /* Evita que cards fiquem embaixo do menu durante animação */ .main{ position:relative; z-index:1; } /* Botão do menu fica sempre visível e acima da lateral */ .sidebar-toggle{ z-index:1100; } /* Estado recolhido sem hover: conteúdo ganha espaço total liberado */ body.sidebar-collapsed:not(.sidebar-peek) .main{ margin-left:var(--sidebar-collapsed) !important; width:calc(100% - var(--sidebar-collapsed)) !important; } /* Em telas menores, mantém comportamento estável */ @media(max-width:900px){ body.sidebar-collapsed.sidebar-peek .main{ margin-left:var(--sidebar-expanded) !important; width:calc(100% - var(--sidebar-expanded)) !important; } } /* ========================================================= CORREÇÃO VISUAL DEFINITIVA DO MENU RECOLHIDO ========================================================= */ /* Menu recolhido mais limpo e estável */ :root{ --sidebar-expanded:280px; --sidebar-collapsed:76px; } /* Garante comportamento fixo: recolhido não abre sozinho no hover */ body.sidebar-collapsed.sidebar-peek .sidebar, body.sidebar-collapsed .sidebar{ width:var(--sidebar-collapsed) !important; } body.sidebar-collapsed.sidebar-peek .main, body.sidebar-collapsed .main{ margin-left:var(--sidebar-collapsed) !important; width:calc(100% - var(--sidebar-collapsed)) !important; } /* Quando expandir pelo botão, usa o estado normal, não hover */ body:not(.sidebar-collapsed) .sidebar{ width:var(--sidebar-expanded) !important; } body:not(.sidebar-collapsed) .main{ margin-left:var(--sidebar-expanded) !important; width:calc(100% - var(--sidebar-expanded)) !important; } /* Topo do menu recolhido */ body.sidebar-collapsed .sidebar{ padding-left:12px !important; padding-right:12px !important; overflow:hidden !important; } body.sidebar-collapsed .brand{ height:92px; padding:18px 0 22px !important; margin:0 0 18px !important; display:flex !important; justify-content:center !important; align-items:center !important; border-bottom:1px solid rgba(148,163,184,.16); } body.sidebar-collapsed .brand-mark, body.sidebar-collapsed .brand-logo, body.sidebar-collapsed .logo-mark{ width:42px !important; height:42px !important; min-width:42px !important; border-radius:16px !important; display:grid !important; place-items:center !important; margin:0 !important; } body.sidebar-collapsed .brand-text, body.sidebar-collapsed .brand > div:not(.brand-mark), body.sidebar-collapsed .brand strong, body.sidebar-collapsed .brand small{ display:none !important; } /* Botão azul do menu: não fica mais por cima da logo nem do conteúdo */ body.sidebar-collapsed .sidebar-toggle{ position:absolute !important; top:14px !important; right:-16px !important; width:34px !important; height:34px !important; border-radius:12px !important; z-index:1200 !important; background:linear-gradient(135deg,#2563eb,#0ea5e9) !important; box-shadow:0 12px 24px rgba(37,99,235,.32) !important; } body:not(.sidebar-collapsed) .sidebar-toggle{ position:static !important; } /* Ícones de navegação centralizados. Escopo restrito à sidebar: sem isso a regra empilhava qualquer