/* private.css — Jerico Private. ================================================================== O Private NÃO é uma interface nova: é o mesmo Jerico com outra paleta. Toda a identidade continua de pé — blobs de fundo, grade, card com a linha de luz no topo, hover que levanta o bloco, janelas, toasts, tabelas. O que muda aqui são as CORES: fundo preto e o roxo trocado por dourado. Por isso este arquivo NÃO redefine componente nenhum do painel da empresa. Ele: 1. sobrescreve os tokens de cor sob html[data-modo="private"]; 2. repete só as regras que traziam o roxo cravado no valor (rgba(139,92,246,…) e amigos), com o dourado no lugar; 3. acrescenta os componentes que só existem no Private (calendário, lançamentos, cartões). Carregar DEPOIS de app.css. Sem `data-modo="private"` no , este arquivo não pinta um pixel — o Jerico Empresa fica intacto. ================================================================== */ /* ============================================================ 1. TOKENS — a troca de paleta ============================================================ */ html[data-modo="private"] { --bg: #000000; --surface: #060504; --surface-2: #0b0906; --surface-3: #14100a; /* os três roxos viram três dourados, na mesma ordem de intensidade */ --indigo: #b08928; /* era #6366f1 — o mais fechado */ --violet: #d4af37; /* era #8b5cf6 — o dourado-base */ --purple-light: #f0d67a; /* era #a78bfa — o claro, texto */ --border: rgba(212, 175, 55, .09); --border-2: rgba(212, 175, 55, .16); --border-neon: rgba(212, 175, 55, .50); --glow-purple: 0 0 40px rgba(212, 175, 55, .38), 0 0 80px rgba(176, 137, 40, .22); --grad-primary: linear-gradient(135deg, #8a6a12 0%, #f0d67a 100%); --grad-accent: linear-gradient(135deg, #d4af37 0%, #f7ecbe 100%); /* cor de escopo — laranja é pessoal, verde é empresa. Elas vivem aqui porque são vocabulário do Private, não da paleta. */ --pessoal: #fb923c; --empresa: #4ade80; } html[data-modo="private"] body { background: #000; } /* o preto pede o blob um pouco mais discreto: no fundo escuro o dourado espalha mais que o roxo espalhava */ html[data-modo="private"] .bg-blobs::after, html[data-modo="private"] .bg-blobs::before { opacity: .30; } /* ============================================================ 2. AS REGRAS QUE TINHAM O ROXO CRAVADO Gerado a partir de base.css, components.css e app.css: são as mesmas regras, com rgba(139,92,246) → rgba(212,175,55), rgba(167,139,250) → rgba(240,214,122) e rgba(99,102,241) → rgba(176,137,40). Nenhuma medida, sombra ou transição mudou. Se alguma delas mudar no arquivo de origem, mude aqui também. ============================================================ */ /* ---- de base.css ---- */ html[data-modo="private"] ::selection { background: rgba(212, 175, 55, .35); color: #fff } html[data-modo="private"] .bg-blobs::before { top: -200px; left: -150px; background: radial-gradient(circle, #b08928 0, transparent 70%) } html[data-modo="private"] .bg-blobs::after { bottom: -200px; right: -150px; background: radial-gradient(circle, #d4af37 0, transparent 70%); animation-delay: -11s } html[data-modo="private"] .bg-grid { position: fixed; inset: 0; background-image: linear-gradient(rgba(212, 175, 55, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 175, 55, .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="private"] .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0, rgba(212, 175, 55, .6) 50%, transparent 100%) } html[data-modo="private"] .btn-primary { background: var(--grad-primary); color: #fff; box-shadow: 0 4px 18px rgba(176, 137, 40, .45), 0 0 0 1px rgba(240, 214, 122, .3) inset } html[data-modo="private"] .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(176, 137, 40, .7), 0 0 30px rgba(240, 214, 122, .4), 0 0 0 1px rgba(240, 214, 122, .5) inset } html[data-modo="private"] .btn-neon { background: rgba(212, 175, 55, .06); border-color: rgba(212, 175, 55, .5); color: var(--purple-light) } html[data-modo="private"] .btn-neon:hover { background: rgba(212, 175, 55, .14); border-color: var(--purple-light); box-shadow: 0 0 24px rgba(212, 175, 55, .5); color: #fff } html[data-modo="private"] .input:focus, html[data-modo="private"] .select:focus, html[data-modo="private"] .textarea:focus { border-color: var(--purple-light); background: rgba(212, 175, 55, .04); box-shadow: 0 0 0 4px rgba(212, 175, 55, .1), 0 0 24px rgba(212, 175, 55, .2) } html[data-modo="private"] .badge-pro { background: rgba(176, 137, 40, .1); color: var(--purple-light); border-color: rgba(240, 214, 122, .35) } html[data-modo="private"] .toggle input:checked~.track { background: var(--grad-primary); border-color: transparent; box-shadow: 0 0 16px rgba(212, 175, 55, .5) } html[data-modo="private"] .progress>.fill { height: 100%; background: var(--grad-primary); border-radius: 999px; transition: width .8s ease; box-shadow: 0 0 10px rgba(212, 175, 55, .5) } html[data-modo="private"] .progress.cyan>.fill { background: linear-gradient(135deg, #38bdf8, #b08928) } html[data-modo="private"] .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(176, 137, 40, .5); position: relative } html[data-modo="private"] .toast.info { border-color: rgba(212, 175, 55, .4) } html[data-modo="private"] .gradient-text { background: linear-gradient(135deg, #f0d67a 0, #f472b6 100%); -webkit-background-clip: text; background-clip: text; color: transparent } @media (max-width:860px) { html[data-modo="private"] .nav-links a.active { background: rgba(212, 175, 55, .12); border-color: rgba(212, 175, 55, .4); color: var(--purple-light) } } html[data-modo="private"] .nav-drawer a.active, html[data-modo="private"] .nav-drawer a:hover { background: rgba(212, 175, 55, .1); color: var(--text) } html[data-modo="private"] ::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, .35); border-radius: 999px } html[data-modo="private"] ::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, .65) } html[data-modo="private"] * { scrollbar-width: thin; scrollbar-color: rgba(212, 175, 55, 0.35) transparent } html[data-modo="private"] .footer-social a:hover { border-color: rgba(212, 175, 55, .55); background: rgba(212, 175, 55, .12); color: #f0d67a } html[data-modo="private"] .footer-main-links a:hover { color: #fff; text-decoration-color: rgba(212, 175, 55, 0.85) } html[data-modo="private"] .nav-dd { position: absolute; top: calc(100% + 10px); right: 0; min-width: 186px; background: rgba(8, 5, 18, .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(212, 175, 55, .08); transform-origin: top right; animation: nav-dd-in .18s cubic-bezier(.16, 1, .3, 1) forwards } html[data-modo="private"] .nav-dd-item:hover .nav-dd-icon { color: #f0d67a } /* ---- de components.css ---- */ html[data-modo="private"] .kit-nav a.on { color: #fff; border-left-color: var(--purple-light); background: rgba(212, 175, 55, .1); } html[data-modo="private"] .kit-sec > h2 .tag.herdado { background: rgba(212, 175, 55, .12); border-color: rgba(240, 214, 122, .35); color: var(--purple-light); } html[data-modo="private"] .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(240, 214, 122,.3); line-height: 1.7; } html[data-modo="private"] .kpi-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; background: rgba(212, 175, 55, .14); border: 1px solid rgba(212, 175, 55, .3); color: var(--purple-light); } html[data-modo="private"] .quota { background: rgba(212, 175, 55, .05); border: 1px solid rgba(240, 214, 122, .25); border-radius: var(--radius); padding: 18px; max-width: 420px; } html[data-modo="private"] .seg button.on { background: linear-gradient(135deg, rgba(212, 175, 55,.35), rgba(176, 137, 40,.3)); color: #fff; font-weight: 700; } html[data-modo="private"] .tab.on { background: rgba(212, 175, 55, .16); border-color: rgba(240, 214, 122, .5); color: #fff; font-weight: 600; } html[data-modo="private"] .tbl-chip.on { background: rgba(212, 175, 55, .18); border-color: rgba(240, 214, 122, .5); color: #fff; } html[data-modo="private"] .derived { border: 1px solid var(--border-2); border-radius: var(--radius); padding: 18px; background: linear-gradient(160deg, rgba(212, 175, 55, .06), transparent 70%); } html[data-modo="private"] .sig-kind.pre_venda { background: rgba(240, 214, 122,.14); color: var(--purple-light); border: 1px solid rgba(240, 214, 122,.35); } html[data-modo="private"] .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(212, 175, 55, .08); border: 1px solid rgba(240, 214, 122, .25); color: #fff; } html[data-modo="private"] .tl-item.abre_em::before { border-color: var(--purple-light); box-shadow: 0 0 10px rgba(240, 214, 122,.5); } html[data-modo="private"] .tl-state.abre_em { background: rgba(240, 214, 122,.14); color: var(--purple-light); } html[data-modo="private"] .crew-role.admin { background: rgba(240, 214, 122,.15); color: var(--purple-light); } html[data-modo="private"] .crew-turno.plantao { background: rgba(240, 214, 122,.14); color: var(--purple-light); } html[data-modo="private"] .fab { position: fixed; right: 24px; bottom: 24px; z-index: 300; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, rgba(212, 175, 55, .95), rgba(176, 137, 40, .95)); border: 1px solid rgba(240, 214, 122, .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="private"] .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(240, 214, 122, .5); } html[data-modo="private"] .sidenav a.on { color: #fff; background: rgba(212, 175, 55, .14); border-color: rgba(240, 214, 122, .32); } html[data-modo="private"] .jan-card::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, .25); border-radius: 6px; } /* ============================================================ 3. O QUE SÓ EXISTE NO PRIVATE Componentes novos. Todos herdam o mesmo vocabulário visual do painel da empresa: borda fina, fundo quase transparente, hover que levanta 2px e acende a borda. ============================================================ */ /* ---- marca clicável no header ---- */ .hd-brand { display: flex; align-items: baseline; gap: 12px; background: none; border: none; padding: 4px 10px 4px 4px; border-radius: 10px; cursor: pointer; transition: background .18s, box-shadow .18s; } .hd-brand b { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: #fff; } .hd-brand span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--purple-light); transition: color .18s; } .hd-brand:hover { background: rgba(255, 255, 255, .04); } .hd-brand:hover span { color: #fff; } /* a seta só aparece para quem pode alternar — quem não é admin vê a marca como sempre foi, sem sugerir uma porta que não abre */ .hd-brand .sw { font-size: 11px; color: var(--text-muted); opacity: 0; transition: opacity .18s; margin-left: -4px; } .hd-brand.pode:hover .sw { opacity: 1; } html[data-modo="private"] .hd-brand span { color: #f0d67a; } html[data-modo="private"] .hd-brand:hover { background: rgba(212, 175, 55, .10); } /* ---- barra de mês ---- */ .pv-mes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pv-mes-nav { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border-2); border-radius: 10px; overflow: hidden; } .pv-mes-nav button { padding: 6px 12px; font-size: 14px; color: var(--text-dim); background: none; transition: background .15s, color .15s; } .pv-mes-nav button:hover { background: rgba(212, 175, 55, .12); color: #fff; } .pv-mes-lbl { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; min-width: 132px; text-align: center; text-transform: capitalize; } /* ---- resumo do que existe fora do mês visível ---- A tela mostra um mês por vez. Sem este aviso, conta que vence noutro mês não existe para quem olha — e já custou quatro salários lançados em duplicidade, porque a pessoa achou que não tinha salvado. Mas doze pílulas idênticas de uma conta fixa são ruído, e o aviso que importa (o lançamento AVULSO noutro mês) sumia entre elas. A conta fixa virou uma linha de texto; as pílulas ficaram para o avulso. */ .pv-resumo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(212, 175, 55, .05); border: 1px solid rgba(212, 175, 55, .16); } .pv-resumo-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; } .pv-resumo-l b { color: #f0d67a; font-weight: 600; } .pv-fixa-ico { color: #d4af37; font-size: 14px; } /* botão que se lê como texto: leva a um mês, não é ação de peso */ .pv-lnk { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; font-weight: 600; color: #f0d67a; text-decoration: underline; text-decoration-color: rgba(240, 214, 122, .35); text-underline-offset: 3px; text-transform: capitalize; } .pv-lnk:hover { color: #fff; text-decoration-color: #fff; } .pv-ver-meses { text-transform: none; font-size: 12px; } .pv-estender { text-transform: none; } .pv-outros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .pv-outros-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); } .pv-outro-mes { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600; text-transform: capitalize; background: rgba(212, 175, 55, .10); border: 1px solid rgba(212, 175, 55, .28); color: #f0d67a; transition: background .15s, border-color .15s; } .pv-outro-mes:hover { background: rgba(212, 175, 55, .20); border-color: rgba(212, 175, 55, .5); } /* mês que já passou não é novidade — mesma informação, menos apelo */ .pv-outro-mes.passado { background: rgba(255, 255, 255, .04); border-color: var(--border-2); color: var(--text-dim); } .pv-outro-mes .qt { opacity: .7; font-weight: 500; font-size: 11px; } /* ---- conta fixa ---- */ .pv-rec { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-2); } .pv-rec-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-dim); user-select: none; } .pv-rec-check input { width: 15px; height: 15px; accent-color: #d4af37; cursor: pointer; } .pv-rec-dica { font-size: 11.5px; color: var(--text-muted); line-height: 1.7; } .pv-rec-aviso { margin-top: 14px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); background: rgba(212, 175, 55, .08); border-left: 2px solid rgba(212, 175, 55, .5); } /* marca discreta na linha que pertence a uma conta fixa */ .pv-serie { margin-left: 7px; font-size: 12px; color: #d4af37; opacity: .75; cursor: help; } /* ---- bônus e multa ---- O mesmo par de campos serve aos dois: um texto e um valor que soma ao da conta naquele mês. Fica fechado por padrão — a maioria dos lançamentos não tem ajuste. */ .pv-ajuste { margin-top: 14px; } .pv-aj-abrir { font-size: 12.5px; text-transform: none; } .pv-aj-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; } /* o ! na linha: é a diferença entre o valor da conta e o que foi pago, e precisa ser lida junto com a descrição, não no rodapé */ .pv-aj { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; background: rgba(212, 175, 55, .12); border: 1px solid rgba(212, 175, 55, .3); color: #f0d67a; cursor: help; } /* ---- valor ainda não definido ---- Invariante 3: sem dado não vira R$ 0,00. Conta fixa de valor variável (luz, gás, condomínio) nasce sem valor, e a tela diz isso em vez de afirmar que a conta custou nada. */ .pv-adefinir { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); letter-spacing: .04em; } /* ---- chips de escopo ---- */ .pv-esc { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 9px; border-radius: 20px; } .pv-esc .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pv-esc.pessoal { color: var(--pessoal); background: rgba(251, 146, 60, .12); border: 1px solid rgba(251, 146, 60, .3); } .pv-esc.empresa { color: var(--empresa); background: rgba(74, 222, 128, .12); border: 1px solid rgba(74, 222, 128, .3); } /* ---- cartões ---- */ .pv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; } .pv-card { position: relative; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--border-2); background: rgba(255, 255, 255, .02); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; overflow: hidden; } .pv-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0, currentColor 50%, transparent 100%); opacity: .5; } .pv-card:hover { transform: translateY(-2px); border-color: var(--border-neon); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); } .pv-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .pv-card-nome { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #fff; } .pv-card-final { font-family: var(--font-code); font-size: 11px; color: var(--text-muted); letter-spacing: .1em; } .pv-card-val { font-family: var(--font-num); font-size: 23px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; } .pv-card-sub { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 4px; } .pv-card-datas { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); } .pv-card-datas b { color: #fff; font-weight: 600; } .pv-card-x { position: absolute; top: 10px; right: 10px; font-size: 13px; color: rgba(255, 255, 255, .22); padding: 2px 6px; border-radius: 6px; opacity: 0; transition: opacity .18s, color .18s; } .pv-card:hover .pv-card-x { opacity: 1; } .pv-card-x:hover { color: var(--red); } /* ---- tabela de lançamentos ---- */ .pv-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .pv-tbl thead th { text-align: left; padding: 10px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-2); white-space: nowrap; } .pv-tbl thead th.num { text-align: right; } .pv-tbl tbody td { padding: 11px 12px; border-bottom: 1px solid rgba(255, 255, 255, .035); vertical-align: middle; } .pv-tbl tbody td.num { text-align: right; font-family: var(--font-num-tbl); font-variant-numeric: tabular-nums; color: #fff; } .pv-tbl tbody tr { transition: background .15s; } .pv-tbl tbody tr:hover { background: rgba(212, 175, 55, .05); } .pv-tbl tbody tr.pago td { color: var(--text-muted); } .pv-tbl tbody tr.pago td.num { color: var(--text-dim); } .pv-tbl tbody tr.vencido td.venc { color: var(--red); } .pv-tbl .desc { color: #fff; font-weight: 500; } .pv-tbl .cat { font-family: var(--font-mono); font-size: 11px; } /* o check é o gesto principal da tela: marcar que a conta foi paga */ .pv-check { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; border: 1px solid var(--border-2); background: rgba(255, 255, 255, .03); color: transparent; font-size: 13px; line-height: 1; transition: all .18s; } .pv-check:hover { border-color: var(--empresa); color: rgba(74, 222, 128, .5); } .pv-check.on { background: rgba(74, 222, 128, .16); border-color: rgba(74, 222, 128, .5); color: var(--empresa); box-shadow: 0 0 14px rgba(74, 222, 128, .28); } .pv-pago-em { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--empresa); margin-top: 3px; letter-spacing: .04em; } /* ---- calendário ---- */ .pv-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; } .pv-cal-h { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); text-align: center; padding-bottom: 4px; } .pv-day { min-height: 96px; border: 1px solid var(--border); border-radius: 12px; padding: 7px 8px 8px; background: rgba(255, 255, 255, .015); display: flex; flex-direction: column; gap: 4px; cursor: pointer; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; } .pv-day:hover { transform: translateY(-2px); border-color: var(--border-neon); background: rgba(212, 175, 55, .05); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } .pv-day.fora { opacity: .26; } .pv-day.hoje { border-color: rgba(212, 175, 55, .55); box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .18); } .pv-day.sel { border-color: rgba(240, 214, 122, .75); background: rgba(212, 175, 55, .09); } .pv-day-n { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; } .pv-day.hoje .pv-day-n { color: #f0d67a; } .pv-ev { font-size: 10px; line-height: 1.35; border-left: 2px solid; padding: 2px 4px; border-radius: 0 5px 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-ev.pessoal { color: var(--pessoal); border-color: var(--pessoal); background: rgba(251, 146, 60, .10); } .pv-ev.empresa { color: var(--empresa); border-color: var(--empresa); background: rgba(74, 222, 128, .10); } .pv-ev.pago { opacity: .55; } .pv-ev-mais { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); letter-spacing: .06em; } .pv-cal-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .pv-cal-legend span { display: flex; align-items: center; gap: 7px; } .pv-cal-legend i { width: 12px; height: 3px; border-radius: 2px; display: block; } /* ---- formulário ---- */ .pv-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; } .pv-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pv-f label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .pv-inp { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-2); background: rgba(255, 255, 255, .03); color: var(--text); font-family: inherit; font-size: 13px; transition: border-color .18s, box-shadow .18s; color-scheme: dark; } .pv-inp:focus { outline: none; border-color: var(--border-neon); box-shadow: 0 0 0 4px rgba(212, 175, 55, .10); } .pv-inp::placeholder { color: #6b7280; } .pv-form-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } /* ---- resumo por categoria ---- */ .pv-catrow { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid rgba(255, 255, 255, .035); } .pv-catrow:last-child { border-bottom: none; } .pv-catrow .nm { font-size: 13px; color: var(--text); min-width: 116px; } .pv-catrow .tk { flex: 1; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .05); overflow: hidden; } .pv-catrow .tk i { display: block; height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.4, 0, .2, 1); } .pv-catrow .vl { font-family: var(--font-num-tbl); font-variant-numeric: tabular-nums; font-size: 13px; color: #fff; min-width: 92px; text-align: right; } @media (max-width: 760px) { .pv-cal { gap: 4px; } .pv-day { min-height: 66px; padding: 5px; } .pv-ev { font-size: 9px; } } /* ---- os dois menus convivem: só um aparece por vez ---- `hidden` sozinho não basta — abaixo de 900px o app.css redefine `.sidenav { display:flex }` e o menu escondido voltaria a aparecer. */ .sidenav[hidden] { display: none !important; }