/* tres-d.css — Jerico 3D (Consumer Productions). ================================================================== O terceiro modo. Mesmo princípio do Private: NÃO é interface nova, é o mesmo Jerico com outra paleta. Fundo preto e o roxo trocado por VERDE esmeralda. Estrutura idêntica à do private.css, de propósito — quem souber ler um sabe ler o outro: 1. os tokens de cor sob html[data-modo="3d"]; 2. as regras que traziam o roxo cravado no valor, com o verde; 3. os componentes que só existem aqui (produtos, clientes, rateio). Carregar DEPOIS de app.css. Sem `data-modo="3d"` no , este arquivo não pinta um pixel. ------------------------------------------------------------------ AVISO DE MANUTENÇÃO — leia antes de mexer em base/components/app.css ------------------------------------------------------------------ A parte 2 é a TERCEIRA cópia das mesmas ~45 regras: elas estão em base.css/components.css/app.css (roxo), no private.css (dourado) e aqui (verde). Mudou uma delas na origem, mude nos três lugares — o sintoma de esquecer é visual e discreto, do tipo que ninguém abre chamado para relatar. Ver ARMADILHAS 18. As substituições, a partir do private.css: 212,175,55 → 16,185,129 · 240,214,122 → 110,231,183 176,137,40 → 5,150,105 · #d4af37 → #10b981 #f0d67a → #6ee7b7 · #b08928 → #059669 ================================================================== */ /* ============================================================ 1. TOKENS — a troca de paleta ============================================================ */ html[data-modo="3d"] { --bg: #000000; --surface: #030605; --surface-2: #050b09; --surface-3: #0a1410; /* os três roxos viram três verdes, na mesma ordem de intensidade */ --indigo: #059669; /* era #6366f1 — o mais fechado */ --violet: #10b981; /* era #8b5cf6 — o verde-base */ --purple-light: #6ee7b7; /* era #a78bfa — o claro, texto */ --border: rgba(16, 185, 129, .09); --border-2: rgba(16, 185, 129, .16); --border-neon: rgba(16, 185, 129, .50); --glow-purple: 0 0 40px rgba(16, 185, 129, .38), 0 0 80px rgba(5, 150, 105, .22); --grad-primary: linear-gradient(135deg, #046c4e 0%, #6ee7b7 100%); --grad-accent: linear-gradient(135deg, #10b981 0%, #a7f3d0 100%); /* vocabulário do 3D, não paleta: as três partes do preço. Custo é o que sai, taxa é o que o marketplace retém, lucro é o que sobra. São as cores das barras da tela de produto. */ --custo: #f87171; --taxa: #fbbf24; --lucro: #34d399; } html[data-modo="3d"] body { background: #000; } html[data-modo="3d"] .bg-blobs::after, html[data-modo="3d"] .bg-blobs::before { opacity: .30; } /* ============================================================ 2. AS REGRAS QUE TINHAM O ROXO CRAVADO Cópia do private.css com as seis substituições do cabeçalho. Nenhuma medida, sombra ou transição mudou. ============================================================ */ /* ---- de base.css ---- */ html[data-modo="3d"] ::selection { background: rgba(16, 185, 129, .35); color: #fff } html[data-modo="3d"] .bg-blobs::before { top: -200px; left: -150px; background: radial-gradient(circle, #059669 0, transparent 70%) } html[data-modo="3d"] .bg-blobs::after { bottom: -200px; right: -150px; background: radial-gradient(circle, #10b981 0, transparent 70%); animation-delay: -11s } html[data-modo="3d"] .bg-grid { position: fixed; inset: 0; background-image: linear-gradient(rgba(16, 185, 129, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 185, 129, .04) 1px, transparent 1px); background-size: 60px 60px; z-index: 0; pointer-events: none; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%) } html[data-modo="3d"] .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0, rgba(16, 185, 129, .6) 50%, transparent 100%) } html[data-modo="3d"] .btn-primary { background: var(--grad-primary); color: #fff; box-shadow: 0 4px 18px rgba(5, 150, 105, .45), 0 0 0 1px rgba(110, 231, 183, .3) inset } html[data-modo="3d"] .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(5, 150, 105, .7), 0 0 30px rgba(110, 231, 183, .4), 0 0 0 1px rgba(110, 231, 183, .5) inset } html[data-modo="3d"] .btn-neon { background: rgba(16, 185, 129, .06); border-color: rgba(16, 185, 129, .5); color: var(--purple-light) } html[data-modo="3d"] .btn-neon:hover { background: rgba(16, 185, 129, .14); border-color: var(--purple-light); box-shadow: 0 0 24px rgba(16, 185, 129, .5); color: #fff } html[data-modo="3d"] .input:focus, html[data-modo="3d"] .select:focus, html[data-modo="3d"] .textarea:focus { border-color: var(--purple-light); background: rgba(16, 185, 129, .04); box-shadow: 0 0 0 4px rgba(16, 185, 129, .1), 0 0 24px rgba(16, 185, 129, .2) } html[data-modo="3d"] .badge-pro { background: rgba(5, 150, 105, .1); color: var(--purple-light); border-color: rgba(110, 231, 183, .35) } html[data-modo="3d"] .toggle input:checked~.track { background: var(--grad-primary); border-color: transparent; box-shadow: 0 0 16px rgba(16, 185, 129, .5) } html[data-modo="3d"] .progress>.fill { height: 100%; background: var(--grad-primary); border-radius: 999px; transition: width .8s ease; box-shadow: 0 0 10px rgba(16, 185, 129, .5) } html[data-modo="3d"] .progress.cyan>.fill { background: linear-gradient(135deg, #38bdf8, #059669) } html[data-modo="3d"] .nav-logo .glyph { width: 32px; height: 32px; border-radius: 9px; background: var(--grad-primary); display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; color: #fff; box-shadow: 0 4px 14px rgba(5, 150, 105, .5); position: relative } html[data-modo="3d"] .toast.info { border-color: rgba(16, 185, 129, .4) } html[data-modo="3d"] .gradient-text { background: linear-gradient(135deg, #6ee7b7 0, #38bdf8 100%); -webkit-background-clip: text; background-clip: text; color: transparent } @media (max-width:860px) { html[data-modo="3d"] .nav-links a.active { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .4); color: var(--purple-light) } } html[data-modo="3d"] .nav-drawer a.active, html[data-modo="3d"] .nav-drawer a:hover { background: rgba(16, 185, 129, .1); color: var(--text) } html[data-modo="3d"] ::-webkit-scrollbar-thumb { background: rgba(16, 185, 129, .35); border-radius: 999px } html[data-modo="3d"] ::-webkit-scrollbar-thumb:hover { background: rgba(16, 185, 129, .65) } html[data-modo="3d"] * { scrollbar-width: thin; scrollbar-color: rgba(16, 185, 129, 0.35) transparent } html[data-modo="3d"] .footer-social a:hover { border-color: rgba(16, 185, 129, .55); background: rgba(16, 185, 129, .12); color: #6ee7b7 } html[data-modo="3d"] .footer-main-links a:hover { color: #fff; text-decoration-color: rgba(16, 185, 129, 0.85) } html[data-modo="3d"] .nav-dd { position: absolute; top: calc(100% + 10px); right: 0; min-width: 186px; background: rgba(3, 10, 8, .98); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 6px; z-index: 10000; box-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(16, 185, 129, .08); transform-origin: top right; animation: nav-dd-in .18s cubic-bezier(.16, 1, .3, 1) forwards } html[data-modo="3d"] .nav-dd-item:hover .nav-dd-icon { color: #6ee7b7 } /* ---- de components.css ---- */ html[data-modo="3d"] .kit-nav a.on { color: #fff; border-left-color: var(--purple-light); background: rgba(16, 185, 129, .1); } html[data-modo="3d"] .kit-sec > h2 .tag.herdado { background: rgba(16, 185, 129, .12); border-color: rgba(110, 231, 183, .35); color: var(--purple-light); } html[data-modo="3d"] .kit-note { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 12px; padding-left: 12px; border-left: 2px solid rgba(110, 231, 183,.3); line-height: 1.7; } html[data-modo="3d"] .kpi-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; background: rgba(16, 185, 129, .14); border: 1px solid rgba(16, 185, 129, .3); color: var(--purple-light); } html[data-modo="3d"] .quota { background: rgba(16, 185, 129, .05); border: 1px solid rgba(110, 231, 183, .25); border-radius: var(--radius); padding: 18px; max-width: 420px; } html[data-modo="3d"] .seg button.on { background: linear-gradient(135deg, rgba(16, 185, 129,.35), rgba(5, 150, 105,.3)); color: #fff; font-weight: 700; } html[data-modo="3d"] .tab.on { background: rgba(16, 185, 129, .16); border-color: rgba(110, 231, 183, .5); color: #fff; font-weight: 600; } html[data-modo="3d"] .tbl-chip.on { background: rgba(16, 185, 129, .18); border-color: rgba(110, 231, 183, .5); color: #fff; } html[data-modo="3d"] .derived { border: 1px solid var(--border-2); border-radius: var(--radius); padding: 18px; background: linear-gradient(160deg, rgba(16, 185, 129, .06), transparent 70%); } html[data-modo="3d"] .sig-kind.pre_venda { background: rgba(110, 231, 183,.14); color: var(--purple-light); border: 1px solid rgba(110, 231, 183,.35); } html[data-modo="3d"] .sig-acao { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-radius: 10px; font-size: 13px; line-height: 1.55; background: rgba(16, 185, 129, .08); border: 1px solid rgba(110, 231, 183, .25); color: #fff; } html[data-modo="3d"] .tl-item.abre_em::before { border-color: var(--purple-light); box-shadow: 0 0 10px rgba(110, 231, 183,.5); } html[data-modo="3d"] .tl-state.abre_em { background: rgba(110, 231, 183,.14); color: var(--purple-light); } html[data-modo="3d"] .crew-role.admin { background: rgba(110, 231, 183,.15); color: var(--purple-light); } html[data-modo="3d"] .crew-turno.plantao { background: rgba(110, 231, 183,.14); color: var(--purple-light); } html[data-modo="3d"] .fab { position: fixed; right: 24px; bottom: 24px; z-index: 300; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, rgba(16, 185, 129, .95), rgba(5, 150, 105, .95)); border: 1px solid rgba(110, 231, 183, .6); color: #fff; font-size: 21px; display: grid; place-items: center; box-shadow: var(--glow-purple); transition: transform .2s; } /* ---- de app.css ---- */ html[data-modo="3d"] .hd-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--violet), var(--indigo)); border: 1px solid rgba(110, 231, 183, .5); } html[data-modo="3d"] .sidenav a.on { color: #fff; background: rgba(16, 185, 129, .14); border-color: rgba(110, 231, 183, .32); } html[data-modo="3d"] .jan-card::-webkit-scrollbar-thumb { background: rgba(16, 185, 129, .25); border-radius: 6px; } /* a marca no header, no verde do modo (o componente .hd-brand em si mora no private.css, que o criou) */ html[data-modo="3d"] .hd-brand span { color: #6ee7b7; } html[data-modo="3d"] .hd-brand:hover { background: rgba(16, 185, 129, .10); } /* ============================================================ 3. O SELETOR DE MODO — com três Jericos, o interruptor virou lista ============================================================ Enquanto eram dois, clicar na marca alternava. Com três, alternar obrigaria a passar pelo controle financeiro pessoal para chegar na farm. O menu é da MARCA e vale nos três modos, por isso não está sob nenhum `data-modo`. ============================================================ */ /* a âncora do menu. Classe NOVA, num elemento novo — de propósito: pendurar `position:relative` em `.hd-left`, que já existe no app.css, seria reescrever regra do painel da empresa (invariante 8). */ .hd-marca { position: relative; } .hd-modos { position: absolute; top: calc(100% + 8px); left: 4px; min-width: 268px; padding: 6px; z-index: 10000; background: rgba(8, 8, 12, .98); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); transform-origin: top left; animation: hd-modos-in .16s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes hd-modos-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } .hd-modos button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--text); cursor: pointer; text-align: left; font-family: inherit; font-size: 13px; transition: background .15s, border-color .15s; } .hd-modos button:hover { background: rgba(255, 255, 255, .05); } .hd-modos button.on { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); } .hd-modos .d { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 10px currentColor; } .hd-modos .nm { font-weight: 600; } .hd-modos .sb { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: .06em; margin-top: 2px; } /* o ponto colorido de cada modo — é o mesmo vocabulário das telas */ .hd-modos .m-empresa { color: #8b5cf6; } .hd-modos .m-private { color: #d4af37; } .hd-modos .m-3d { color: #10b981; } /* ============================================================ 4. EMPRESTADO DO PRIVATE ============================================================ A barra de mês (`.pv-mes`) nasceu no private.css e é declarada SEM `data-modo` — então o 3D a reusa inteira, de graça. Só que uma das regras dela traz o dourado cravado no valor: .pv-mes-nav button:hover { background: rgba(212,175,55,.12) } Sem o escopo abaixo, a seta do mês pisca DOURADA dentro do 3D. Foi encontrado lendo o arquivo, não olhando a tela — é exatamente o tipo de defeito discreto que a ARMADILHAS 18 descreve. Se um dia a barra de mês virar componente de verdade, este bloco morre junto. ============================================================ */ html[data-modo="3d"] .pv-mes-nav button:hover { background: rgba(16, 185, 129, .12); color: #fff; } /* ============================================================ 5. O QUE SÓ EXISTE NO 3D ============================================================ */ /* ---- grade de produtos ---- */ .td-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .td-prod { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; position: relative; transition: transform .18s, border-color .18s, box-shadow .18s; } .td-prod:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } .td-prod-foto { aspect-ratio: 4 / 3; background: var(--surface-3); display: grid; place-items: center; overflow: hidden; } .td-prod-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* produto sem foto não mostra caixa quebrada nem placeholder de outro site: mostra o próprio vazio, com o nome dizendo o que é */ .td-prod-foto .sem { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: .12em; text-transform: uppercase; } .td-prod-corpo { padding: 13px 14px 15px; } .td-prod-nome { font-weight: 600; font-size: 14px; line-height: 1.35; } .td-prod-sku { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: .08em; margin-top: 3px; } .td-linha { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; margin-top: 9px; } .td-linha .k { color: var(--text-muted); } .td-linha .v { font-family: var(--font-mono); } .td-linha .v.custo { color: var(--custo); } .td-linha .v.taxa { color: var(--taxa); } .td-linha .v.lucro { color: var(--lucro); font-weight: 700; } /* "a definir" — nulo é ausência de dado, não R$ 0,00 (invariante 3) */ .td-adefinir { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); font-style: italic; } /* a barra que mostra do que o preço é feito: custo, taxa, frete, lucro */ .td-barra { display: flex; height: 6px; border-radius: 999px; overflow: hidden; margin-top: 12px; background: var(--surface-3); } .td-barra i { display: block; height: 100%; } .td-barra .b-custo { background: var(--custo); } .td-barra .b-taxa { background: var(--taxa); } .td-barra .b-frete { background: #94a3b8; } .td-barra .b-lucro { background: var(--lucro); } .td-legenda { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; } .td-legenda span { display: flex; align-items: center; gap: 4px; } .td-legenda i { width: 7px; height: 7px; border-radius: 2px; display: block; } .td-prod-acoes { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; } .td-prod:hover .td-prod-acoes { opacity: 1; } .td-prod-acoes button { width: 26px; height: 26px; border-radius: 7px; cursor: pointer; background: rgba(0, 0, 0, .7); border: 1px solid var(--border-2); color: var(--text-muted); font-size: 11px; } .td-prod-acoes button:hover { color: #fff; border-color: var(--border-neon); } /* a pílula de margem no canto da foto */ .td-margem { position: absolute; top: 8px; left: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .72); border: 1px solid currentColor; } .td-margem.boa { color: var(--lucro); } .td-margem.media { color: var(--taxa); } .td-margem.ruim { color: var(--custo); } /* ---- formulários ---- */ .td-form { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .td-f { display: flex; flex-direction: column; gap: 5px; } .td-f label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); } .td-inp { background: var(--surface-3); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; color: var(--text); font-family: inherit; font-size: 13px; width: 100%; } .td-inp:focus { outline: none; border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(16, 185, 129, .12); } .td-form-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .td-dica { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); line-height: 1.7; grid-column: 1 / -1; } /* ---- tabelas (clientes, vendas, itens) ---- */ .td-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .td-tbl th { text-align: left; padding: 9px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-2); white-space: nowrap; } .td-tbl td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .td-tbl tr:last-child td { border-bottom: none; } .td-tbl tr:hover td { background: rgba(16, 185, 129, .03); } .td-tbl .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; } .td-tbl .aberto { cursor: pointer; } .td-nome-cli { font-weight: 600; } .td-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; } .td-hist { background: var(--surface-3); } .td-hist td { padding: 0; } .td-hist-box { padding: 12px 14px 14px; } /* ---- rateio dos sócios ---- */ .td-socios { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .td-socio { border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; background: var(--surface-2); position: relative; } .td-socio-nome { font-weight: 600; font-size: 14px; } .td-socio-pct { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: .1em; margin-top: 2px; } .td-socio-val { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--lucro); margin-top: 10px; } .td-socio-sem { font-family: var(--font-mono); font-size: 10px; color: var(--taxa); margin-top: 8px; letter-spacing: .04em; } /* a chave "só o 3D" na linha do sócio */ .td-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } .td-check input { accent-color: var(--violet); cursor: pointer; } /* o aviso de que a soma das participações não fecha 100 */ .td-alerta { border-left: 2px solid var(--taxa); padding-left: 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.7; color: var(--text-muted); margin-top: 12px; } /* ---- a conta à vista, do jeito do painel da empresa ---- */ .td-formula { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); line-height: 1.8; margin-top: 10px; } .td-formula b { color: var(--purple-light); font-weight: 400; } /* ---- as duas portas da importação ---- Botão largo com título e explicação dentro, e não dois `btn` lado a lado: a escolha aqui não é "qual botão", é "qual formato de arquivo", e essa pergunta não cabe num rótulo de três palavras. */ .td-portas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .td-porta { display: flex; flex-direction: column; gap: 6px; text-align: left; border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; transition: border-color .15s, transform .15s, background .15s; } .td-porta:hover { border-color: rgba(16, 185, 129, .45); background: rgba(16, 185, 129, .05); transform: translateY(-1px); } .td-porta-tit { font-weight: 600; font-size: 13.5px; } .td-porta-sub { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.75; color: var(--text-muted); }