/* ═══════════════════════════════════════════════════════════════════════ EXACTA.CSS — ExactaSales 2.0: casca do sistema e componentes compartilhados Carregar DEPOIS de styles.css e theme.css. O que mora aqui: 1. Fundo com luz (Moderno) e a barra lateral montada pelo nav.js 2. Topo (breadcrumb, ambiente, usuário, seletor de layout, sair) 3. Releitura dos componentes já existentes (cartões, botões, campos, tabelas, etiquetas, modais, toasts) usando os tokens de styles.css 4. Celular: barra lateral recolhida com botão ☰ Nada aqui cria tela nova: só veste o que já existe. ═══════════════════════════════════════════════════════════════════════ */ html { background: var(--bg); } /* O fundo fica no : com o body transparente, as luzes (.bgfx, z-index -1) aparecem entre o fundo e o conteúdo. */ body { background: transparent; font-family: var(--font); font-size: 13.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; padding-left: var(--sb-w); } body.sem-sidebar { padding-left: 0; } h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; } /* ── 1. Fundo com luz (só o Moderno acende: --fx) ────────────────────── */ .bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: var(--fx); } .bgfx .b1 { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(110px); opacity: .26; background: radial-gradient(circle, var(--accent), transparent 60%); top: -380px; left: -260px; mix-blend-mode: screen; } .bgfx .b2 { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: .22; background: radial-gradient(circle, #0b7cff, transparent 60%); bottom: -420px; right: -320px; mix-blend-mode: screen; } .bgfx .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 40% 20%, #000 20%, transparent 75%); } @media (prefers-reduced-motion: no-preference) { .bgfx .b1, .bgfx .b2 { transition: opacity .4s; } } /* ── Barra lateral (montada pelo nav.js) ─────────────────────────────── */ .sb { position: fixed; top: 0; left: 0; bottom: 0; z-index: 120; width: var(--sb-w); background: var(--sb-bg); border-right: 1px solid var(--border); backdrop-filter: var(--glass-blur); display: flex; flex-direction: column; gap: 2px; padding: 18px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .sb .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 8px 18px; } .sb .brand img { height: 22px; width: auto; display: block; } [data-theme="light"] .sb .brand img { filter: invert(1); } .sb .brand small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .sb .brand a { display: contents; } .sb .gl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text3); padding: 12px 10px 4px; display: flex; justify-content: space-between; cursor: pointer; user-select: none; border: 0; background: none; width: 100%; text-align: left; } .sb .gl.on { color: var(--accent); } .sb .gl i { font-style: normal; color: var(--text3); } .sb .gl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .sb .gi { display: flex; flex-direction: column; gap: 2px; } .sb .gi.fechado { display: none; } .sb a.it { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; color: var(--text2); font-size: 12.5px; font-weight: 600; text-decoration: none; } .sb a.it svg { opacity: .7; flex: none; } .sb a.it:hover { color: var(--text); background: var(--surface2); } .sb a.it.on { background: var(--sb-on); color: var(--text); box-shadow: inset 0 0 0 1px var(--sb-on-ring), var(--sb-on-glow); } .sb a.it.on svg { opacity: 1; color: var(--accent); } .sb a.it:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .sb a.it.novo::after { content: 'novo'; margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 1px 6px; border-radius: 20px; } [data-theme="light"] .sb a.it.novo::after { color: #fff; } .sb .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--border); cursor: pointer; } .sb .me b { display: block; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb .me small { display: block; color: var(--text3); font-size: 11px; } .sb .av { width: 32px; height: 32px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--accent2), var(--info)); color: var(--on-accent); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 12px; } [data-theme="escuro"] .sb .av, [data-theme="light"] .sb .av { background: var(--accent); } .sb .sb-fechar { display: none; } .sb-bd { display: none; } /* Selo de pendências ao lado do item (Aprovação) */ .sb .nav-badge { margin-left: auto; } .nav-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 6px; border-radius: 9px; background: var(--warn); color: #1a1207; font-family: var(--mono); font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; vertical-align: middle; } /* ── 2. Topo ─────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: 12px; min-height: var(--tb-h); padding: 0 30px; background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); backdrop-filter: var(--glass-blur); position: sticky; top: 0; z-index: 100; } .topbar-brand { display: none; } /* a marca vive na barra lateral */ .topbar > #topbar-nav { order: 0; margin-right: auto; justify-content: flex-start; gap: 8px; } .topbar-actions { order: 3; margin-left: auto; display: flex; align-items: center; gap: 8px; } .sb-toggle { display: none; width: 36px; height: 36px; border: 1px solid var(--border2); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; align-items: center; justify-content: center; flex: none; } .tb-crumb { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); white-space: nowrap; } .tb-crumb b { color: var(--accent-text); font-weight: 700; } .tb-crumb i { font-style: normal; color: var(--text3); } .tb-amb { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #c4b5fd; background: rgba(109,40,217,.18); border: 1px solid rgba(139,92,246,.45); border-radius: 20px; padding: 3px 9px; margin-left: 12px; white-space: nowrap; } [data-theme="light"] .tb-amb { color: #5b21b6; background: rgba(109,40,217,.08); } .topbar-user { color: var(--text2); font-size: 12px; } .topbar-user strong { color: var(--text); } .topbar-status { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); } .env-badge { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 20px; } .env-badge.test { background: rgba(255,181,69,.1); color: var(--warn); border: 1px solid rgba(255,181,69,.4); } [data-theme="light"] .env-badge.test { background: rgba(194,98,10,.08) !important; color: var(--warn) !important; border-color: rgba(194,98,10,.35) !important; } [data-theme="light"] .env-badge.prod { background: var(--accent-light) !important; color: var(--accent) !important; border-color: var(--sb-on-ring) !important; } .topbar .btn-danger { background: transparent; } .topbar .btn-danger:hover { background: var(--danger-bg); } /* Busca do topo (Ctrl K) e atalhos à direita, como no protótipo */ .tb-srch { display: flex; align-items: center; gap: 8px; width: min(380px, 100%); height: 36px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; color: var(--text3); background: var(--surface); backdrop-filter: var(--glass-blur); font: 500 12.5px var(--font); cursor: text; text-align: left; } .tb-srch span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tb-srch kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--border2); border-radius: 5px; padding: 1px 6px; color: var(--text2); } .tb-srch:hover { border-color: var(--border2); color: var(--text2); } .tb-atalhos { display: inline-flex; align-items: center; gap: 8px; } .tb-atalhos .tb-amb { margin-left: 0; } .ib { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: var(--text2); position: relative; text-decoration: none; } .ib:hover { color: var(--text); border-color: var(--border2); } .topbar .tema-sw, .topbar .btn-danger { display: none; } /* moraram para o rodapé da barra lateral */ .sb .sb-rod { margin-top: auto; padding: 0 4px 8px; } .sb .me { margin-top: 0; } .sb .sb-rod .tema-sw { background: var(--surface2); width: 100%; display: flex; } .sb .sb-rod .tema-sw button { flex: 1; padding: 6px 4px; font-size: 9.5px; text-align: center; } .sb .sb-sair { margin-left: auto; flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border2); border-radius: 8px; background: none; color: var(--text2); cursor: pointer; } .sb .sb-sair:hover { color: var(--danger); border-color: rgba(255,90,90,.4); } /* Folha de atalhos (?) */ .ib-ajuda { font-family: var(--mono); font-weight: 700; font-size: 13px; } .at-folha { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); padding: 6vh 16px 16px; overflow: auto; } .at-folha.aberta { display: flex; justify-content: center; align-items: flex-start; } .at-caixa { width: 100%; max-width: 760px; background: var(--surface-solid); border: 1px solid var(--border2); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px 22px; } .at-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .at-cab h2 { font-size: 20px; margin: 0; } .at-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px 24px; } .at-g h3 { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); margin: 0 0 6px; font-weight: 700; } .at-it { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .at-it kbd { font-family: var(--mono); font-size: 10.5px; border: 1px solid var(--border2); border-radius: 6px; padding: 2px 7px; color: var(--text); background: var(--surface2); white-space: nowrap; min-width: 78px; text-align: center; } .at-rod { margin-top: 14px; font-size: 11.5px; color: var(--text3); } /* Paleta de busca */ .bp-fundo { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); padding: 10vh 16px 16px; } .bp-fundo.aberta { display: flex; justify-content: center; align-items: flex-start; } .bp { width: 100%; max-width: 620px; background: var(--surface-solid); border: 1px solid var(--border2); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .bp-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text3); } .bp-in input { flex: 1; border: 0; background: none; padding: 4px 0; font-size: 15px; color: var(--text); outline: none; box-shadow: none; } .bp-in kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--border2); border-radius: 5px; padding: 1px 6px; color: var(--text2); } .bp-lista { max-height: 50vh; overflow: auto; padding: 6px; } .bp-it { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--text); } .bp-it .bp-tipo { grid-row: 1 / 3; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); } .bp-it b { font-size: 13.5px; font-weight: 700; } .bp-it small { font-size: 11.5px; color: var(--text3); } .bp-it.on { background: var(--sb-on); box-shadow: inset 0 0 0 1px var(--sb-on-ring); } .bp-vazio { padding: 18px; color: var(--text3); text-align: center; font-size: 13px; } .bp-rod { padding: 8px 14px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--text3); } @media (max-width: 640px) { .tb-srch span, .tb-srch kbd { display: none; } .tb-srch { width: 36px; padding: 0; justify-content: center; } .topbar > #topbar-nav { display: flex; margin-right: auto; } } /* Seletor de telas irmãs dentro da página (ex.: Clientes · Saúde da carteira) */ .pg-seg { display: inline-flex; border: 1px solid var(--border2); border-radius: 10px; overflow: hidden; background: var(--surface); margin: 0 0 14px; } .pg-seg a { padding: 8px 16px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text2); text-decoration: none; border-right: 1px solid var(--border); } .pg-seg a:last-child { border-right: 0; } .pg-seg a.on { background: var(--surface3); color: var(--text); } .pg-seg a:hover:not(.on) { color: var(--text); } /* Cabeçalho padrão das telas redesenhadas: eyebrow + título + ações */ .ph-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); font-weight: 700; margin-bottom: 6px; } .page-header.pg-cab .ph-title h1 { font-size: 30px; } .page-header.pg-cab .ph-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .page-header.pg-cab .ph-acoes .btn { min-height: 38px; padding: 8px 16px; font-size: 13px; } /* tabela no estilo do protótipo (cabeçalho mono, linhas finas) */ .tbl-p { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl-p th { text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); font-weight: 700; padding: 0 12px 10px 0; border-bottom: 1px solid var(--border2); background: transparent; } .tbl-p td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; color: var(--text); } .tbl-p tbody tr:last-child td { border-bottom: 0; } .tbl-p tbody tr:hover td { background: var(--surface2); } .tbl-p td .sub { display: block; font-size: 11.5px; color: var(--text3); } .card-ct { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .card-ct h2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--text2); margin: 0; } .card-ct small { font-size: 12px; color: var(--text3); } /* Seletor dos 3 layouts (theme.js) */ .tema-sw { display: inline-flex; border: 1px solid var(--border2); border-radius: 10px; overflow: hidden; background: var(--surface); } .tema-sw button { border: 0; background: none; cursor: pointer; padding: 7px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--text2); border-right: 1px solid var(--border); line-height: 1; } .tema-sw button:last-child { border-right: 0; } .tema-sw button.on { background: var(--surface3); color: var(--text); } .tema-sw button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .btn-theme { display: none; } /* botão antigo (🌙) — substituído pelo seletor */ /* Faixas de ambiente / demonstração (nav.js) */ #app-env-banner, #demo-banner { position: sticky; top: 0; z-index: 110; /* acima do topo (100), abaixo da barra lateral (120) */ text-align: center; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; color: #fff; } #app-env-banner { background: #6d28d9; } #demo-banner { background: #b45309; } /* Cabeçalho fixo da página */ .page-header { padding: 14px 30px 12px; gap: .5rem 1.25rem; } /* No Moderno o cabeçalho não pode virar uma caixa preta sobre o fundo com luz: fica transparente e só desfoca o que passa por baixo ao rolar. */ :root:not([data-theme]) .page-header { background: transparent; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .ph-title h1 { font-size: 24px; font-weight: 700; line-height: 1.05; } .ph-title p { font-size: 12.5px; color: var(--text2); margin-top: 4px; } .ph-totals { border-radius: var(--radius); } .ph-total-label { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; } .ph-total-value { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.02em; } .ph-total-highlight .ph-total-value { color: var(--accent-text); } .ph-total-sub { font-family: var(--font); } .kb-header h1 { font-size: 24px; font-weight: 700; } .layout, .admin-layout { padding-left: 30px; padding-right: 30px; } .admin-layout.largo { max-width: 1600px; } /* telas largas: Início, listas, Clientes */ /* ── 3. Componentes ──────────────────────────────────────────────────── */ label, .form-group > label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--label-color); font-weight: 700; } /* Rótulos que são caixas de escolha (não etiquetas de campo) voltam à fonte de texto */ .entrega-op, .entrega-op b, .entrega-op em, .ms-panel label, label.check, label.chk, label.opcao, label:has(> input[type=checkbox]), label:has(> input[type=radio]) { font-family: var(--font); letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 13px; color: var(--text); } .entrega-op b { font-weight: 700; } .entrega-op em { font-size: 11.5px; color: var(--text3); } input, select, textarea { border-radius: var(--radius); } input:focus, select:focus, textarea:focus { background: var(--input-bg); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } input::placeholder, textarea::placeholder { color: var(--placeholder); } .btn { font-family: var(--font); font-weight: 700; font-size: 12.5px; min-height: 34px; padding: 6px 14px; border-radius: var(--radius); background: var(--surface); border-color: var(--border2); color: var(--text); backdrop-filter: var(--glass-blur); } .btn:hover { background: var(--surface2); } a.btn, a.btn:hover { text-decoration: none; } .btn-sm { min-height: 30px; padding: 4px 10px; font-size: 11.5px; border-radius: calc(var(--radius) - 2px); } .btn-icon { min-height: 0; padding: 5px; } .btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); } .btn-primary:hover { background: var(--accent2); border-color: transparent; } [data-theme="light"] .btn-primary, [data-theme="light"] .btn-primary:hover { color: #fff !important; } .btn-danger { background: transparent; color: var(--danger); border-color: rgba(255,90,90,.4); } [data-theme="light"] .btn-danger { border-color: rgba(220,38,38,.35); } .btn-danger:hover { background: var(--danger-bg); } .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; } .section-card, .pn-card, .pn-kpi, .config-panel, .pedido-group, .hub-card, .kb-col { border-radius: var(--radius-lg); backdrop-filter: var(--glass-blur); } .section-card { padding: 18px 20px; } .section-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--text2); } .section-title::after { background: var(--border); } .pn-kpi .rot { font-family: var(--mono); letter-spacing: .16em; color: var(--text2); } .pn-kpi .val { font-family: var(--display); font-size: 22px; letter-spacing: -.03em; } .pn-card h2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); font-weight: 700; } .user-table th { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; background: transparent; color: var(--th-color); border-bottom: 1px solid var(--border2); } [data-theme="light"] .user-table th { background: transparent !important; } .user-table td { font-size: 13px; } .user-table tbody tr:hover td { background: var(--surface2); } .items-table th { font-family: var(--mono); letter-spacing: .06em; color: var(--th-color); } .items-table th, .items-table td { border-bottom-color: var(--border); } .items-table input, .items-table select { border-radius: calc(var(--radius) - 2px); } .status-badge, .role-badge, .aba-cnt, .pedido-group-header .badge { font-family: var(--mono); letter-spacing: .04em; border-radius: 8px; } .pedido-group { overflow: hidden; } .pedido-group-header { background: var(--surface2); } .computed-val { font-family: var(--mono); } .receita-btn, .receita-del, .picker-btn { border-radius: calc(var(--radius) - 2px); } .picker-btn { background: var(--input-bg); } /* Popups: sempre com fundo sólido (o vidro deixaria a tela de trás aparecer) */ /* Painéis que abrem por cima da tela (detalhe do orçamento, Conta Azul, checkout, visualizador de arquivos, modais montados em linha nas telas): fundo sólido. */ .det-panel, .ca-modal, .mcx, .vz-caixa, [class*="overlay"] > [class], [class*="-modal"]:not([class*="overlay"]):not(.modal-actions):not(.ca-modal-actions), [style*="position:fixed"] > div, [style*="position: fixed"] > div { background-color: var(--surface-solid) !important; /* vence o