/* * ============================================================ * PLANÔVA — style.css * * ÍNDICE DE SEÇÕES: * 1. RESET / ZOOM RESPONSIVO * 2. SPLASH SCREEN — tela inicial animada * 3. TOPNAV — barra superior (logo, abas, badges) * 4. NAVEGAÇÃO DE MÊS — botões < > e título * 5. BANNER MÊS FECHADO — faixa somente leitura * 6. LAYOUT PRINCIPAL — grid de colunas + painel direito * 7. BLOCOS — bloco-wrap, gaveta de total * 8. LINHAS — .linha, inputs, selects, botões inline * 9. SELECTS CUSTOMIZADOS (bancos) — dropdown colorido * 10. TOOLTIP LIMPAR (×) — centralizado na mensal, direita no diário * 11. SUBCATEGORIA — ícone de tag e tooltip * 12. PAINEL DIREITO — salário, cards de previsão e reserva * 13. CIRCULO SUBTOTAL — barra circular SVG * 14. CARD RESERVA DE EMERGÊNCIA * 15. CARD META — pilha, barra de progresso, navegação * 16. POPUPS — overlays e modais * 17. TOASTS — aviso e fila de notificações * 18. FAB — botões flutuantes inferiores * 19. POPUP CONFIGURAÇÕES * 20. FECHAMENTO CONTÁBIL * 21. PÁGINA DIÁRIO * 22. TOUR GUIADO * 23. SIMULADOR ANUAL * 24. ANO FLASH OVERLAY * ============================================================ */ /* * ============================================================ * PLANÔVA — style.css * * ÍNDICE DE SEÇÕES: * 1. RESET e BASE — box-sizing, overflow, zoom responsivo * 2. SPLASH SCREEN — tela inicial animada * 3. TOPNAV — barra de navegação superior (logo, abas, badges) * 4. NAVEGAÇÃO DE MÊS — botões < > e título do mês * 5. BANNER MÊS FECHADO — faixa "somente leitura" * 6. LAYOUT PRINCIPAL — grid de 2 colunas + painel direito * 7. BLOCOS — bloco-wrap, bloco-header-wrap, gaveta de total * 8. LINHAS — .linha, inputs, selects, botões inline (×, ⟳, tag) * 9. SELECTS CUSTOMIZADOS (bancos) — dropdown com badge colorido * 10. TOOLTIP LIMPAR — tooltip do botão × nas linhas * 11. SUBCATEGORIA — tooltip e botão de subcategoria * 12. PAINEL DIREITO — salário total, cards de previsão, reserva, metas * 13. CIRCULO SUBTOTAL — barra circular SVG de progresso * 14. CARD RESERVA DE EMERGÊNCIA * 15. CARD META — pilha de cards, barra de progresso, navegação * 16. POPUPS (overlay + modal) — movimento, meta, replicar, conflito etc. * 17. TOASTS — aviso de orçamento e sistema de fila * 18. FAB (botões flutuantes) — engrenagem, dados, tour * 19. POPUP CONFIGURAÇÕES * 20. FECHAMENTO CONTÁBIL — banner, popup fechar/reabrir mês * 21. PÁGINA DIÁRIO — tabela diária, colunas, header * 22. TOUR GUIADO — overlay SVG com máscara e balão * 23. SIMULADOR ANUAL DE RESERVA * 24. ANO FLASH OVERLAY — animação de troca de ano/mês * 25. DROPDOWN ANO / MÊS na topnav * ============================================================ */ * { box-sizing: border-box; } html, body { overflow-x: hidden; height: 100%; } /* ── SCROLLBAR ESTILIZADO ── */ body::-webkit-scrollbar { width: 7px; } body::-webkit-scrollbar-track { background: #e8eef8; border-radius: 6px; } body::-webkit-scrollbar-thumb { background: #a0b4d6; border-radius: 6px; } body::-webkit-scrollbar-thumb:hover { background: #6e8ec4; } /* ── 1. RESET / ZOOM RESPONSIVO ──────────────────────────────────────── * Ajuste de zoom via CSS custom property --zoom (controlado por JS). * overflow-x:hidden no html impede scroll lateral indesejado. * ───────────────────────────────────────────────────────────────────── /* ── ZOOM RESPONSIVO ── O layout foi projetado para ~1440px. Em telas menores, reduzimos proporcionalmente para caber sem scroll. */ @media (min-width: 1600px) { html { zoom: 1.10; } } @media (max-width: 1599px) and (min-width: 1440px) { html { zoom: 1; } } @media (max-width: 1439px) and (min-width: 1280px) { html { zoom: 0.88; } } @media (max-width: 1279px) and (min-width: 1100px) { html { zoom: 0.78; } } @media (max-width: 1099px) and (min-width: 1024px) { html { zoom: 0.68; } } @media (max-width: 1023px) and (min-width: 900px) { html { zoom: 0.60; } } @media (max-width: 899px) and (min-width: 768px) { html { zoom: 0.52; } } @media (max-width: 767px) { html { zoom: 0.45; } } body { margin: 0; background: linear-gradient(135deg, #d6e4f7 0%, #f0f4fb 50%, #dce8f5 100%); background-attachment: fixed; font-family: "Century Gothic", "Segoe UI", Arial, sans-serif; font-size: 13px; } /* ── TOP NAV ── */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;600;700&display=swap'); /* ── 3. TOPNAV ────────────────────────────────────────────────────────── * Barra fixa no topo: logo + nome, abas Mensal/Diário, badge de ano, * indicador "✓ Salvo". * ────────────────────────────────────────────────────────────────────── */ .topnav { position: sticky; top: 0; z-index: 100; background: linear-gradient(to right, #0a1540 0%, #1c3f91 50%, #3a6edc 100%); padding: 0 32px; height: 52px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 24px rgba(28, 63, 145, 0.55); } /* Linha de brilho no topo */ .topnav::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.6) 70%, transparent 100%); } /* Reflexo de luz diagonal */ .topnav::after { content: ""; position: absolute; top: -60px; left: -80px; width: 260px; height: 160px; background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%); pointer-events: none; clip-path: inset(0); } .topnav-left { display: flex; align-items: center; gap: 12px; } .topnav-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.18); } .topnav h2 { margin: 0; font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 20px; font-weight: 700; color: white; letter-spacing: -0.3px; } .topnav h2 span { display: none; } .topnav h2 .planova-dot { display: none; /* decorativo sem função — lia como indicador de status sem ser um */ width: 7px; height: 7px; background: #3a6edc; border-radius: 50%; margin-left: 3px; vertical-align: middle; position: relative; top: -2px; box-shadow: 0 0 6px rgba(58,110,220,0.7); } .topnav-badge { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 20px; padding: 3px 12px; letter-spacing: 1.2px; text-transform: uppercase; display: flex; align-items: center; } /* Badges de presença (Camada 1, ver presenca.js) — roster fixo de até 3 apelidos por conta, sempre visíveis na topnav (mesmo estilo do badge de ano, clicável só o próprio — troca o apelido — e sem uppercase, nome próprio não deve ficar em caixa alta). Três estados, cor conta a história inteira: .online — conectado agora (verde) .colidindo — conectado E no mesmo recurso que este aparelho agora (âmbar, com pulso — inclusive o PRÓPRIO badge entra nesse estado, é simétrico) .offline — apelido existe na conta, ninguém conectado com ele agora (cinza, discreto) .self identifica o badge deste aparelho (cursor de clique). */ .presenca-badge { position: relative; text-transform: none; letter-spacing: 0.2px; cursor: default; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s ease; } .presenca-badge.self { cursor: pointer; user-select: none; /* Preenchimento SÓLIDO em vez de translúcido — o mesmo princípio que qualquer app de mensagem já ensinou (minha mensagem é a colorida e cheia, a do outro é neutra/vazada). Ninguém precisa ler nada pra saber "sólido = eu, translúcido = os outros" — é um padrão que a pessoa já traz de fora, não algo que esse app precisa explicar. Cor exata de cada estado definida abaixo (self.online/self. colidindo/self.offline), por cima do .online/.colidindo/.offline base (que continuam translúcidos pros badges dos outros). */ font-weight: 700; border-width: 1.5px; box-shadow: 0 1px 6px rgba(0,0,0,0.16); } .presenca-badge.self.online { background: #2fbf65; border-color: #2fbf65; color: #ffffff; box-shadow: 0 1px 8px rgba(47,191,101,0.35); } .presenca-badge.self.online .presenca-dot { background: #ffffff; } .presenca-badge.self.colidindo { background: #e0a324; border-color: #e0a324; color: #241a00; } .presenca-badge.self.colidindo .presenca-dot { background: #241a00; } .presenca-badge.self.offline { background: rgba(255,255,255,0.32); border-color: rgba(255,255,255,0.45); color: #16233f; } .presenca-badge.self.offline .presenca-dot { background: #16233f; } .presenca-badge .presenca-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; margin-right: 6px; background: rgba(255,255,255,0.4); transition: background 0.25s ease; } /* ONLINE (verde) */ .presenca-badge.online { background: rgba(74,222,128,0.15); border-color: rgba(74,222,128,0.4); color: #baf4cd; } .presenca-badge.online .presenca-dot { background: #4ade80; } .presenca-badge.self.online:hover { background: #29a858; border-color: #29a858; } /* COLIDINDO (âmbar, com pulso — único estado que precisa chamar atenção) */ @keyframes presenca-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,180,41,0.5); } 50% { box-shadow: 0 0 0 5px rgba(240,180,41,0); } } .presenca-badge.colidindo { background: rgba(240,180,41,0.2); border-color: rgba(240,180,41,0.6); color: #ffe6ab; animation: presenca-pulso 1.8s ease-in-out infinite; } .presenca-badge.colidindo .presenca-dot { background: #f0b429; } .presenca-badge.self.colidindo:hover { background: #c78e1c; border-color: #c78e1c; } /* OFFLINE (cinza, discreto — apelido existe mas ninguém conectado agora) */ .presenca-badge.offline { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.4); } .presenca-badge.offline .presenca-dot { background: rgba(255,255,255,0.28); } .presenca-badge.self.offline:hover { background: rgba(255,255,255,0.42); } /* Tooltip dos badges de presença (mesmo padrão .fab-tooltip do resto do app) — aponta pra BAIXO em vez de pra cima, igual foi feito pro botão de modo noturno (#btn-dark-mode), porque os dois ficam na topnav, perto do topo da tela, e um tooltip pra cima ali sairia cortado da viewport. */ .presenca-badge .fab-tooltip { white-space: nowrap; font-size: 10.5px; bottom: auto; top: calc(100% + 10px); transform: translateX(-50%) translateY(4px); } .presenca-badge .fab-tooltip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1a2f6e; } div:hover > .presenca-badge .fab-tooltip, .presenca-badge:hover .fab-tooltip { transform: translateX(-50%) translateY(0); } /* Alinhamento pela borda — aplicado via JS (_presencaAjustarTooltip) só quando o tooltip centralizado sairia da tela pela direita (comum nesses badges, que ficam perto da ponta direita da topnav). Cresce inteiramente pra esquerda a partir da borda direita do badge, em vez de centralizar. */ .presenca-badge .fab-tooltip.tooltip-ajustar-borda { left: auto; right: 0; transform: translateY(4px); } div:hover > .presenca-badge .fab-tooltip.tooltip-ajustar-borda, .presenca-badge:hover .fab-tooltip.tooltip-ajustar-borda { transform: translateY(0); } .presenca-badge .fab-tooltip.tooltip-ajustar-borda::after { left: auto; right: 14px; transform: none; } /* Entrada — mesmo "pop" de escala/overshoot do indicador de Salvo (ver @keyframes salvo-entrada mais abaixo), reaproveitado aqui de propósito pra ficar consistente com o resto do app. Só toca quando um apelido passa de OFFLINE (ou inexistente) pra ONLINE de verdade — nunca numa troca de recurso (online→online só muda de cor, sem "piscar"), ver _presencaRenderizarBadges. */ @keyframes presenca-badge-entrada { 0% { opacity: 0; transform: scale(0.88); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } .presenca-badge.entrando { animation: presenca-badge-entrada 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both; } /* Rastro/brilho depois de chegar — só quando chega em ONLINE, não em COLIDINDO (aí o pulso âmbar contínuo já cumpre esse papel sozinho, e com cor de aviso, não neutra). Roda só 2x (~1,5s) e some — dá uma janela mais generosa pra notar do que só o instante da entrada. */ @keyframes presenca-badge-chegou { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); } 50% { box-shadow: 0 0 0 5px rgba(255,255,255,0); } } .presenca-badge.entrando.chegou { animation: presenca-badge-entrada 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both, presenca-badge-chegou 0.75s ease-in-out 2; } /* Chegou já colidindo — soma o pop de entrada ao pulso âmbar. */ .presenca-badge.entrando.colidindo { animation: presenca-badge-entrada 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both, presenca-pulso 1.8s ease-in-out infinite; } /* Divisor sutil entre os grupos da topnav-right (modo noturno / Salvo / presença / ano) — elemento explícito em vez de ::before amarrado a um ID específico, pra não depender de qual elemento vem logo depois (já tivemos que reordenar os grupos uma vez — com isso, reordenar de novo não quebra nenhum divisor). Gradiente nas pontas em vez de linha sólida — mais discreto, sem criar uma borda dura entre os grupos. */ /* Cápsula de fundo suave — só o grupo de presença ganha isso (é o único cluster de VÁRIOS itens que precisa ler como uma unidade só; os demais controles da topnav-right já são unitários — badge/botão sozinho — então uma cápsula extra ali só duplicaria o contorno que já existe). Separação entre os grupos vem do espaçamento generoso do .topnav-right, não de linha nenhuma. :empty esconde o fundo antes do roster carregar, pra nunca aparecer como uma caixinha vazia. */ /* ── MES ── */ /* ── 4. NAVEGAÇÃO DE MÊS ─────────────────────────────────────────────── * Barra com botões < > para trocar o mês, título clicável (dropdown) * e botão de replicar mês (⟳) e fechar mês (cadeado). * ────────────────────────────────────────────────────────────────────── */ .mes-container { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 32px 0 4px; position: relative; } #mes-dropdown-wrap { position: relative; } #titulomes { font-size: 18px; font-weight: 700; color: #111; min-width: 140px; text-align: center; cursor: pointer; user-select: none; transition: color 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px; } #titulomes:hover { color: #1c3f91; } #titulomes::after { content: ""; display: inline-block; width: 13px; height: 13px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%231c3f91' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; transition: transform 0.22s ease, opacity 0.2s; opacity: 0.45; margin-top: 3px; flex-shrink: 0; } #titulomes:hover::after { opacity: 0.85; } #mes-dropdown-wrap.aberto #titulomes::after { transform: rotate(180deg); opacity: 1; } #mes-dropdown-wrap.aberto #titulomes { color: #1c3f91; } #mes-dropdown-list { display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid rgba(58, 110, 220, 0.35); border-radius: 8px; box-shadow: 0 6px 20px rgba(28, 63, 145, 0.13), 0 1px 4px rgba(28,63,145,0.08); z-index: 999; overflow: hidden; min-width: 140px; } #mes-dropdown-list.open { display: block; } .mes-dropdown-item { padding: 7px 18px; font-size: 12px; font-family: inherit; cursor: pointer; background: #fff; color: #1a2a5e; text-align: center; white-space: nowrap; transition: background 0.1s, color 0.1s; } .mes-dropdown-item:hover { background: #eef3fd; color: #1c3f91; } /* Reproduz o :hover acima via classe — usado só pelo tour, que não tem cursor real pra disparar o :hover de verdade (ver passo "Trocar de Mês" em tour.js). */ .mes-dropdown-item.tour-hover-sim { background: #eef3fd; color: #1c3f91; } .mes-dropdown-item.ativo { background: #d4e3fb; color: #1c3f91; font-weight: 700; border-left: 3px solid #3a6edc; padding-left: calc(16px - 3px); } .mes-dropdown-item.hoje:not(.ativo) { color: #3a6edc; font-weight: 600; border-left: 3px solid rgba(58,110,220,0.3); padding-left: calc(16px - 3px); } .btn-mes { width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255,255,255,0.95); color: #1c3f91; font-weight: 700; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,0.18), 0 1px 4px rgba(28,63,145,0.15); font-size: 13px; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.15s; } .btn-mes:hover { background: #1c3f91; color: white; box-shadow: 0 4px 16px rgba(28,63,145,0.35); transform: scale(1.08); } .btn-mes:active { transform: scale(0.95); } .btn-replicar-mes { width: 28px; height: 28px; border: none; border-radius: 50%; background: white; color: #3a6edc; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; position: relative; flex-shrink: 0; font-size: 18px; font-weight: 900; line-height: 1; } .btn-replicar-mes:hover { background: #3a6edc; color: white; } .btn-replicar-mes-tooltip { display: block; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #0a1a3a, #1a2f6e); color: #a8c4ff; border-radius: 10px; padding: 8px 12px; white-space: nowrap; box-shadow: 0 6px 24px rgba(0,0,0,0.35); border: 1px solid rgba(58,110,220,0.45); pointer-events: none; font-size: 11px; font-weight: 600; font-family: inherit; letter-spacing: 0.2px; z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; transition-delay: 0s; } .btn-replicar-mes-tooltip::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #1a2f6e; border-right: 1px solid rgba(58,110,220,0.45); border-bottom: 1px solid rgba(58,110,220,0.45); } .btn-replicar-mes:hover .btn-replicar-mes-tooltip { opacity: 1; visibility: visible; transition-delay: 0.5s; /* delay só na entrada */ } /* ── POPUP REPLICAR MÊS ── */ #popup-replicar-mes-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.38); z-index: 9998; backdrop-filter: blur(2px); } #popup-replicar-mes-overlay.visivel { display: block; } #popup-replicar-mes { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92); z-index: 9999; background: #fff; border: 1.5px solid #a3c0ef; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.22); padding: 28px 32px 24px; width: 360px; text-align: center; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } #popup-replicar-mes.visivel { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: all; } #popup-replicar-sal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.38); z-index: 9998; backdrop-filter: blur(2px); } #popup-replicar-sal-overlay.visivel { display: block; } #popup-replicar-sal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92); z-index: 9999; background: #fff; border: 1.5px solid #a3c0ef; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.22); padding: 28px 32px 24px; width: 360px; text-align: center; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } #popup-replicar-sal.visivel { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: all; } /* ── LAYOUT PRINCIPAL ── */ /* ── 6. LAYOUT PRINCIPAL ─────────────────────────────────────────────── * Flexbox horizontal: [Coluna 1] [sep] [Coluna 2] [sep] [Painel Direito] * .separador: linha vertical entre colunas * .coluna-wrapper: cada coluna de gastos (Pessoa 1 / Pessoa 2) * ────────────────────────────────────────────────────────────────────── */ .main-layout { display: flex; justify-content: space-between; gap: 0; padding: 10px 10px 20px; width: 100%; box-sizing: border-box; } /* ══════════════════════════════════════════════════════════════ PERFIL ÚNICO — usuário com uma única entrada de renda Esconde coluna 2 (sal2 travado em 0 pelo JS) e reorganiza o layout: 3 blocos lado a lado, previsões como cards grandes embaixo, painel direita reduzido (reserva + metas). Nenhum elemento é removido do DOM — só reposicionado via grid, preservando todos os ids/handlers usados pelo motor de cálculo. ══════════════════════════════════════════════════════════════ */ body.perfil-unico #coluna2-wrapper { display: none !important; } body.perfil-unico .main-layout > .separador { display: none !important; } /* Diário: escolha de "Entrada 1 / Entrada 2" ao vincular um período não faz sentido com uma única entrada de renda — o sistema já assume a entrada 1 automaticamente (ver _diarioAplicarEntradaUnica em diario.js), então só o rótulo + botões de escolha somem. #popup-diario-entrada-info FICA visível — é o aviso de saldo disponível/indisponível daquela entrada (calculado normalmente pra entrada 1), não faz parte da escolha em si. */ body.perfil-unico #popup-diario-entrada-escolha { display: none !important; } /* Depositar/Retirar (Reserva ou Meta): escolha de Bloco 1/Bloco 2 não faz sentido com uma única entrada de renda. Diferente do Diário, aqui o esconder é só via CSS — a lógica em _movimentoAtualizarDistribuicao() (mensal.js) precisa continuar rodando do jeito ORIGINAL (mostra sempre que há valor digitado, com o bloco sem espaço aparecendo desabilitado) porque é dela que sai o dataset.valor usado por confirmarMovimento() pra ajustar a previsão de saldo. Um corte por sal1/sal2 direto no JS (tentativa anterior) quebrou esse comportamento também no perfil 2 entradas — por isso a solução agora é só visual, restrita ao 1x. */ body.perfil-unico #popup-movimento-blocos { display: none !important; } /* Badge "!" ao lado do título "Previsão de Gastos" — substitui o aviso que em 2x fica no anel de subtotal (.circulo-diario-hint em #sub1-wrap), que não existe no perfil único (.subtotal-area é removida acima). Fica INLINE ao lado do texto (não flutuando no canto do card — colidia visualmente com o filete de topo). O elemento vive no MESMO card reaproveitado pelos dois perfis (appendChild em _aplicarPerfilRenda), então trava aqui via CSS — independente do que o JS marque como .visivel, só aparece em perfil-unico. Em 2x o aviso equivalente já existe no anel. */ .previsao-diario-hint { display: none !important; } body.perfil-unico .previsao-diario-hint.visivel { display: inline-flex !important; position: relative; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid #a3c0ef; box-shadow: 0 1px 4px rgba(28,63,145,0.15); color: #1c3f91; font-size: 9px; font-weight: 700; align-items: center; justify-content: center; cursor: default; line-height: 1; flex-shrink: 0; } body.dark.perfil-unico .previsao-diario-hint.visivel { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #a8c4ff; } body.perfil-unico .previsao-diario-hint.visivel::after { content: 'Há um período ativo na página Diário vinculado a esses gastos.'; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #0a1a3a, #1a2f6e); color: #a8c4ff; font-size: 11px; font-weight: 600; font-family: 'Outfit', 'Century Gothic', sans-serif; text-transform: none; letter-spacing: 0.2px; white-space: nowrap; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(58,110,220,0.45); box-shadow: 0 6px 24px rgba(0,0,0,0.35); pointer-events: none; z-index: 99999; opacity: 0; visibility: hidden; transition: opacity 0.15s ease 0.4s, visibility 0.15s ease 0.4s; } body.perfil-unico .previsao-diario-hint.visivel::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #1a2f6e; border-right: 1px solid rgba(58,110,220,0.45); border-bottom: 1px solid rgba(58,110,220,0.45); pointer-events: none; z-index: 99998; opacity: 0; visibility: hidden; transition: opacity 0.15s ease 0.4s, visibility 0.15s ease 0.4s; } body.perfil-unico .previsao-diario-hint.visivel:hover::after, body.perfil-unico .previsao-diario-hint.visivel:hover::before { opacity: 1; visibility: visible; } body.perfil-unico .main-layout { /* AJUSTE (v9): "!important" aqui vencia até o display:none que mudarAba() (mensal.js) aplica inline ao trocar de aba — por isso o conteúdo Mensal continuava visível por baixo do Anual/Diário. Removido o !important; mudarAba() agora aplica 'grid' (em vez de 'flex') ao voltar pra Mensal neste perfil, então não há mais disputa: quando visível, o valor já é 'grid' desde o JS; quando oculto, 'none' (inline) vence normalmente por não haver mais !important competindo. */ display: grid; grid-template-columns: 1fr 1fr 1fr 260px; /* AJUSTE (v8): "minmax(196px, auto)" tinha um piso, mas o "auto" deixava a linha CRESCER se algum conteúdo precisasse de mais espaço — e o estado "com meta cadastrada" da coluna Metas (nome+progresso+botões+pontinhos) é mais alto que o estado vazio (ícone+texto+link), então o painel inteiro mudava de altura ao cadastrar uma meta. Trocado por um valor fixo, calculado pra caber confortavelmente o estado mais alto (meta cadastrada) — agora a altura do painel não depende do conteúdo de nenhuma coluna, em nenhum estado. */ grid-template-rows: auto 220px; gap: 104px; padding: 14px 16px 24px; align-items: start; } /* Coluna 1 vira o conjunto dos 3 blocos. Ocupa as 4 colunas do grid (igual à linha de previsão/reserva embaixo) para não deixar a coluna da reserva (260px) vazia nesta linha — ver .blocos-area abaixo para como esse espaço extra é distribuído. */ body.perfil-unico #coluna1-wrapper { display: block !important; grid-column: 1 / 5; grid-row: 1; width: 100%; } body.perfil-unico #coluna1-wrapper .secao { width: 100%; } body.perfil-unico #coluna1-wrapper .secao-e-subtotal { width: 100%; gap: 0; } /* Em vez de 3 colunas de grid em "1fr" (que jogariam TODO o espaço extra para dentro da largura dos blocos), usamos flex com um teto de largura por bloco + justify-content: space-between. Resultado: os blocos crescem um pouco (até o teto) e o restante do espaço sobra distribuído de forma simétrica entre eles — sem espaço morto à direita e sem blocos esticados demais. */ body.perfil-unico #coluna1-wrapper .blocos-area { display: flex !important; justify-content: space-between; align-items: flex-start; gap: 100px; /* respiro mínimo — também o suficiente para a gaveta de total abrir (90px) sem cortar no bloco vizinho */ width: 100%; padding-right: 100px; /* o último bloco (Outros) não tem vizinho à direita — precisa do mesmo respiro */ box-sizing: border-box; } /* Sem subtotal no perfil único */ body.perfil-unico #coluna1-wrapper .subtotal-area { display: none !important; } /* Cada bloco cresce de forma flexível, mas com um teto — evita que vire a única válvula de escape do espaço extra (o respiro entre eles é que absorve o restante, via justify-content acima). */ body.perfil-unico .bloco-wrap { flex: 1 1 0; max-width: 440px; min-width: 0; } body.perfil-unico .bloco-header-wrap, body.perfil-unico .bloco-header-wrap > h3, body.perfil-unico .bloco-wrap > h3, body.perfil-unico .bloco { width: 100% !important; } body.perfil-unico .bloco-wrap { margin-bottom: 0 !important; } /* Separadores entre Residência/Cartões/Outros, injetados via JS (_aplicarPerfilRenda). Mesma classe .separador usada entre colunas — aqui só zeramos a margem inline porque o espaçamento já vem do gap do .blocos-area (flex), evitando dobrar o respiro. */ body.perfil-unico .blocos-area > .separador { margin: 0; } body.perfil-unico .bloco-wrap-inner { gap: 0; } /* Gaveta de total ancorada à direita do bloco (mesma lógica, só sem px fixo) */ body.perfil-unico .bloco-gaveta { left: calc(100% - 85px); } body.perfil-unico .bloco-header-wrap:not(.aberto):hover .bloco-gaveta { left: calc(100% - 58px); } body.perfil-unico .bloco-header-wrap.aberto .bloco-gaveta { left: 100%; } /* ── Painel direita ── O painel-direita original é escondido por completo. Seus filhos relevantes (previsões, reserva, metas) são MOVIDOS via JS (appendChild) para dentro de #pu-grid-extra, que é a célula real do grid responsável por essas posições. appendChild preserva o nó inteiro — ids, listeners, estado — só muda a posição no DOM. Essa abordagem é mais robusta que display:contents. */ body.perfil-unico .painel-direita { display: none !important; } #pu-grid-extra { display: none; } /* REDESENHO v10 (jul/2026) — 4 CARDS SEPARADOS Volta ao modelo do perfil 2 entradas: cada indicador (Saldo, Gastos, Reserva, Metas) é o seu próprio card — fundo, borda, sombra e raio próprios — em vez de um painel único com divisórias internas (v2–v9). #pu-grid-extra deixa de ser um card e vira só o container que distribui os 4 cards em linha, com gap entre eles (mesma lógica de espaçamento que .painel-direita já usa pra empilhar os cards no perfil 2 entradas — ver gap:12px lá, aqui 14px por ser fileira horizontal em vez de pilha). Motivo do experimento: comparar contra a v9 pra decidir qual fica mais perto da identidade do perfil 2 entradas — ver REDESENHO v4 mais abaixo pra as regras que precisaram ser neutralizadas porque pertenciam ao conceito de "painel único" (barra no topo, divisória em gradiente entre colunas). */ body.perfil-unico #pu-grid-extra { display: flex; flex-direction: row; align-items: stretch; align-self: stretch; grid-column: 1 / 5; grid-row: 2; gap: 14px; background: transparent; border: none; box-shadow: none; padding: 0; box-sizing: border-box; position: relative; overflow: visible; } /* Cada um dos 4 itens é um card com identidade própria — o mesmo fundo/borda/sombra que .previsao-card e .reserva-card já usam por padrão no perfil 2 entradas (ver regras-base mais abaixo no arquivo), só com padding maior porque aqui a coluna é bem mais larga que a sidebar estreita de lá. */ body.perfil-unico #pu-grid-extra > .previsao-card, body.perfil-unico #pu-grid-extra > .reserva-card, body.perfil-unico #pu-grid-extra > .metas-reserva-card-outer { flex: 1 1 0; min-width: 0; margin: 0 !important; background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%); border: 1.5px solid rgba(28,63,145,0.12); box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 2px 8px rgba(28,63,145,0.05), 0 14px 26px -18px rgba(28,63,145,0.20); border-radius: 14px; min-height: 0; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } /* Borda superior em destaque — antes era uma linha reta (::before) sobreposta ao topo do card, sem acompanhar o arredondamento dos cantos. Trocada por um border-top de verdade: como border-radius já vale pra todos os lados do border, essa cor "envolve" a curva dos dois cantos superiores automaticamente, em vez de ficar reta por cima. Mais fina que um destaque chamativo — é só um detalhe a mais, a borda normal (1.5px) continua nos outros 3 lados. */ body.perfil-unico #pu-grid-extra > .previsao-card, body.perfil-unico #pu-grid-extra > .reserva-card, body.perfil-unico #pu-grid-extra > .metas-reserva-card-outer { border-top: 2px solid var(--pu-brand-accent); } /* Sem divisória entre colunas — o gap + a borda de cada card já separam visualmente (ver REDESENHO v4 mais abaixo, onde a divisória em gradiente da v9 é neutralizada). */ /* Metas carrega texto + anel lado a lado — ganha um pouco mais de espaço do que as outras 3 colunas, que são só número centralizado. */ body.perfil-unico #pu-grid-extra > .metas-reserva-card-outer { flex: 1.3 1 0; } /* ── Saldo / Gastos ── */ body.perfil-unico #pu-grid-extra > .previsao-card { align-items: center; text-align: center; } body.perfil-unico #pu-grid-extra .previsao-card-titulo { font-size: 11.5px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Contrapeso invisível — quando o badge "!" está visível, ele entra no fluxo do flex e desloca o centro visual do texto pra esquerda (o grupo texto+badge centraliza como bloco, não o texto sozinho). Um ::before do mesmo tamanho do badge do lado oposto cancela isso, mesma técnica já usada pra centralizar a porcentagem em Previsão de Saldo. Só existe quando :has(.visivel) — sem período ativo no Diário, não há badge, e o texto já centraliza sozinho normalmente. */ body.perfil-unico #pu-grid-extra .previsao-card-titulo:has(.previsao-diario-hint.visivel)::before { content: ''; width: 14px; height: 1px; flex-shrink: 0; } body.perfil-unico #pu-grid-extra .previsao-card-valor, body.perfil-unico #pu-grid-extra .previsao-card-pct { font-size: 13px; /* sobrescrito abaixo por seletor mais específico pro valor */ display: block; } body.perfil-unico #pu-grid-extra .previsao-card-valor { font-size: 32px; margin-bottom: 8px; } /* AJUSTE (v5): isso era um CSS Grid (1fr | número | 1fr) pensado pra manter só o NÚMERO centralizado, isolado do prefixo "R$"/sufixo "%" — mas o efeito colateral é que o BLOCO INTEIRO ("R$ 0,00") fica descentralizado em relação ao título acima, que é centralizado do jeito simples (sem essa divisão). Pedido explícito agora é o valor INTEIRO alinhado com o título — então volta a ser texto normal: os spans (afixo-prefixo/numero/sufixo, criados via JS em _envolverAfixoNumero) fluem em sequência como texto comum, e o bloco todo é centralizado pelo align-items:center do card — o mesmo mecanismo que já deixa a Reserva certa, que nunca teve essa divisão em grid. */ body.perfil-unico #pu-grid-extra .afixo-prefixo { margin-right: 0.18em; } body.perfil-unico #pu-grid-extra .afixo-sufixo { margin-left: 0.05em; } /* Correção: o wrapper do % de Saldo (único que tem o ícone de info — Gastos não tem) usa display:flex + justify-content:center no próprio HTML, o que centraliza o GRUPO (texto + ícone) inteiro. Como o ícone só existe de um lado, isso empurra o texto do % pra fora do centro em relação ao valor acima. Em vez de brigar com o flex existente, adiciona um contrapeso invisível do mesmo tamanho do ícone ANTES do texto — daí centralizar o grupo [contrapeso][%][ícone] centraliza o texto também, já que os dois lados ficam com a mesma largura extra. */ body.perfil-unico #pu-grid-extra .previsao-card--saldo > div:has(> .previsao-pct-info-icon)::before { content: ""; width: 13.2px; /* mesma largura renderizada do ícone (medida via devtools) */ height: 1px; flex-shrink: 0; } /* Mesma correção acima, agora pro perfil 2 entradas — a estrutura HTML é a mesma (o elemento é reaproveitado nos dois perfis), e o mesmo desequilíbrio acontecia lá também: o texto "100,00%" ficava deslocado do centro em relação ao "R$ 0,00" por causa do ícone de info só existir de um lado. */ .previsao-card--saldo > div:has(> .previsao-pct-info-icon)::before { content: ""; width: 13.2px; height: 1px; flex-shrink: 0; } /* ── Reserva: sem barra/anel — não existe meta configurável pra ela, só valor acumulado + ações. ── */ body.perfil-unico #pu-grid-extra > .reserva-card { align-items: center; text-align: center; } body.perfil-unico #pu-grid-extra .reserva-card-header { justify-content: center; gap: 8px; margin-bottom: 4px; } body.perfil-unico #pu-grid-extra .reserva-card-titulo { font-size: 11.5px; display: flex; align-items: center; gap: 6px; } body.perfil-unico #pu-grid-extra .reserva-card-saldo { font-size: 27px; padding: 4px 0 10px; } body.perfil-unico #pu-grid-extra > .reserva-card .reserva-card-btns { max-width: 220px; width: 100%; } /* ── Metas: texto à esquerda (rótulo da coluna, nome da meta, valores, ações), anel de progresso à direita — usa grid pra manter o anel centralizado verticalmente ao lado do bloco de texto, sem depender da altura dele. ── */ body.perfil-unico #pu-grid-extra > .metas-reserva-card-outer { align-items: stretch; /* v7: era "center" — centralizava o BLOCO INTEIRO (título+conteúdo) junto, diferente do mecanismo usado por Saldo/Gastos/Reserva (título fixo no topo, conteúdo cresce por baixo). Trocado pra "flex-start" + o conteúdo (#res-ativo-state / .meta-vazio-card) ganhando flex:1 1 auto logo abaixo — mesmo mecanismo das outras 3 colunas, título sempre na mesma altura entre as 4. */ justify-content: flex-start; text-align: left; } body.perfil-unico .pu-metas-titulo { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #8a9cc8; margin-bottom: 10px; /* Só fica visível no estado vazio (sem meta) — quando há meta, a regra abaixo (:has #res-ativo-state[display:block]) esconde este título. Como o card vazio é todo centralizado (ícone + texto + CTA), o título "METAS" precisa acompanhar, não herdar o text-align:left do container (.metas-reserva-card-outer). */ text-align: center; } /* AJUSTE: com meta cadastrada, o NOME da meta vira o título único do card (centralizado, mesmo papel que "RESERVA DE EMERGÊNCIA" tem no card ao lado) — o rótulo genérico "METAS" fica redundante e some. #res-ativo-state só troca pra "block" via JS (mensal.js) quando há meta; não existe classe de estado dedicada, então o gancho aqui é o próprio style inline que o JS já define — sem tocar em JS. */ body.perfil-unico .metas-reserva-card-outer:has(#res-ativo-state[style*="display: block"]) .pu-metas-titulo { display: none; } /* Pilha física de cards (usada no perfil 2 entradas, onde Metas é o card inteiro) fica sempre oculta aqui — dentro de uma coluna estreita, cards ofertando "peek" um atrás do outro não cabem bem. Navegação entre metas continua pelas setas/contador do cabeçalho (.meta-card-nav, mais abaixo) em vez de empilhamento visual. */ body.perfil-unico #meta-stack-s1, body.perfil-unico #meta-stack-s2 { display: none !important; } body.perfil-unico .reserva-prog-track { display: none; } /* REDESENHO: anel removido — a caixa de preenchimento em volta do valor (.meta-valor-fill-wrap, mais abaixo) já comunica o progresso visualmente, sem precisar de um número de porcentagem competindo com o valor principal pela atenção. O elemento .reserva-prog-pct continua existindo no HTML (reaproveitado no perfil 2 entradas, onde a barra linear + % ainda fazem sentido) — aqui só escondemos. */ body.perfil-unico #pu-grid-extra .reserva-prog-pct { display: none; } /* Faixa de conteúdo (meta ativa): cresce pra preencher o espaço sobrando abaixo do título, igual à faixa de valor das outras 3 colunas — mantém o card (nome+progresso+ações) e o rodapé (pontinhos/"nova meta") centralizados como um grupo só. */ body.perfil-unico #res-ativo-state { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; } /* REDESENHO: o anel de porcentagem saiu — valor e progresso viraram UM elemento só (ver .meta-valor-fill-wrap mais abaixo: o valor tem uma borda que preenche da esquerda pra direita conforme o % da meta, até ficar 100% sólida ao bater a meta). Sem o anel, a grade volta a 3 colunas (1fr | conteúdo | 1fr) — os spacers nas pontas centralizam o bloco. A coluna do meio é "auto" de propósito agora (era largura fixa antes, pra não deslocar o anel ao lado): a caixa do valor PRECISA crescer com o texto — é o próprio conceito do redesenho (R$ 100 fica mais estreita que R$ 10.000). Header e botões continuam ocupando a largura toda (grid-column: 1 / 4). */ body.perfil-unico .meta-card { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 20px; row-gap: 8px; align-items: center; border: none; box-shadow: none; background: transparent; padding: 0; width: 100%; position: relative; } /* Sem prazo cadastrado, a linha "Prazo: ..." nem renderiza (display: none via mensal.js) — sobra um vão vazio entre a pílula do alvo e os botões, e o valor principal fica "puxado" pro topo do card junto com o título. Aqui só a linha do valor desce um pouco pra ocupar parte desse vão — o título/ícones do topo (grid-row:1) não são afetados, ficam exatamente onde já estavam. Com prazo, esse empurrão não é necessário (ver imagem 1, já bem distribuído). IMPORTANTE: o seletor verifica a AUSÊNCIA de "display: block" (não a presença de "display: none"). O HTML de origem já nasce com style="display:none;" SEM espaço depois dos dois-pontos — uma meta recém-criada sem prazo nunca bate com "display: none" (COM espaço) até o JS tocar o elemento via propriedade (que aí sim normaliza com espaço). Checar a ausência de "display: block" cobre os dois casos (HTML cru ou já tocado pelo JS), porque o JS sempre escreve "display: block" com espaço quando ativa a linha de prazo. */ body.perfil-unico #pu-grid-extra .meta-card:has(#res-prazo-row:not([style*="display: block"])) .reserva-prog-valores { margin-top: 20px !important; } /* AJUSTE: a versão anterior tirava o cluster de ícones do fluxo (position:absolute) pra ancorar no canto do card — não renderizou como esperado. Voltando pro fluxo normal pros ícones: ficam à direita, empurrados por justify-content:space-between. */ body.perfil-unico .meta-card-header { grid-column: 1 / 4; grid-row: 1; margin-bottom: 0; justify-content: flex-end; padding: 0; position: relative; min-height: 24px; } body.perfil-unico .meta-card-header > div:has(.res-lapis-btn) { flex-shrink: 0; gap: 8px; } /* AJUSTE: ícones ganham mais presença (eram pensados pro tamanho compacto do perfil 2 entradas, aqui têm mais espaço disponível). */ body.perfil-unico .meta-card-header .res-lapis-btn, body.perfil-unico .meta-card-header .res-delete-btn { padding: 5px; } body.perfil-unico .meta-card-header .res-lapis-btn svg, body.perfil-unico .meta-card-header .res-delete-btn svg { width: 13px; height: 13px; } body.perfil-unico .meta-card-header .meta-card-nav-btn { width: 20px; height: 20px; font-size: 12px; } body.perfil-unico .meta-card-header .meta-card-counter { font-size: 10px; } /* AJUSTE: o "flex:1 + text-align:center" anterior centralizava só dentro do espaço QUE SOBRAVA depois do cluster de ícones — como esse cluster muda de largura (a seta de navegação só aparece com 2+ metas), o centro visual do nome variava conforme o caso. Nome vira position:absolute, centralizado matematicamente no meio do cabeçalho (left:50% + transform) — centro real, independente de quantos ícones estiverem visíveis à direita. */ body.perfil-unico .meta-card-nome { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 700; letter-spacing: -0.1px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* REDESENHO: valor + alvo voltam pro fluxo normal do grid, numa coluna própria ao lado do anel — não mais espremidos dentro do círculo. Sem limite de largura: R$ 100.000,00 ou R$ 50,00 cabem igual, porque não dependem mais do diâmetro fixo de um círculo. */ body.perfil-unico .reserva-prog-valores { grid-column: 2; grid-row: 2; margin-top: 0 !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } body.perfil-unico .reserva-prog-atual { font-size: 19px; font-weight: 800; font-family: 'Outfit', 'Century Gothic', sans-serif; opacity: 1; letter-spacing: -0.2px; white-space: nowrap; } /* AJUSTE: o alvo (roxo) precisa centralizar embaixo da CAIXA (valor + preenchimento) só — sem contar o ícone de info, que fica ao lado e desequilibraria o centro. O ícone é IRMÃO da caixa, não descendente dela (precisa ficar fora do overflow:hidden da caixa — se ficasse dentro, mesmo "visualmente fora" ele seria cortado pelo overflow). ".meta-valor-linha" agrupa os dois lado a lado; o ícone sai do fluxo (position:absolute) e não conta na largura usada pra centralizar o alvo embaixo. Padronizado pros dois perfis — mesmo problema de centralização em ambos, desde que a caixa+pílula viraram o padrão também no perfil 2 entradas. */ .meta-valor-linha { position: relative; } .meta-valor-linha .saldo-info-icon { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 4px; } /* ══════════════════════════════════════════════════════════════ CAIXA DE PREENCHIMENTO — valor + progresso mesclados num só elemento (substitui a barra linear + %). A borda ao redor do valor preenche da esquerda pra direita conforme o progresso da meta, até ficar 100% sólida quando a meta é atingida. ══════════════════════════════════════════════════════════════ */ .meta-valor-linha { display: inline-flex; align-items: center; gap: 6px; } .meta-valor-fill-wrap { display: contents; } .meta-valor-fill, .meta-valor-fill-clip { display: none; } /* ══════════════════════════════════════════════════════════════ CAIXA DE PREENCHIMENTO — valor + progresso mesclados num só elemento (substitui a barra linear + %). A borda ao redor do valor preenche da esquerda pra direita conforme o progresso da meta, até ficar 100% sólida quando a meta é atingida. PADRONIZADO (jul/2026): mecânica única pros dois perfis — só o TAMANHO muda (ver bloco "1x maior" logo abaixo, que só ajusta padding/border-radius/font-size pro card mais largo de lá). ══════════════════════════════════════════════════════════════ */ .meta-valor-fill-wrap { display: inline-flex; align-items: center; justify-content: center; position: relative; border: 2px solid #3a6edc; border-radius: 10px; padding: 6px 14px; overflow: hidden; box-sizing: border-box; /* Tom suave de fundo — sem isso, vazio (0%) vira só um contorno em volta do texto, meio "esquecido". Fica por baixo da camada de preenchimento (z-index natural, sem precisar declarar). */ background: rgba(58,110,220,0.06); } /* Camada de preenchimento — cresce da esquerda pra direita (width em %, calculado em _renderizarMetaComSaldo() no mensal.js). Some por trás do texto (z-index). */ .meta-valor-fill { display: block; position: absolute; inset: 0; width: 0%; background: linear-gradient(135deg, #1c3f91, #3a6edc); transition: width 0.5s ease; z-index: 0; } /* O valor (texto escuro, cor original) fica ACIMA da camada de preenchimento — lê normal onde ainda não há fill. */ .meta-valor-fill-wrap > .reserva-prog-atual { position: relative; z-index: 1; } /* Cópia BRANCA do mesmo valor, recortada (overflow:hidden + width em %) exatamente na largura do preenchimento — como as duas camadas centralizam dentro do MESMO wrapper, o corte acompanha o fill pixel a pixel, sem ponto de transição visível nem precisar trocar cor num limiar fixo (%). */ .meta-valor-fill-clip { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; /* Padding igual ao .meta-valor-fill-wrap: esta camada é SEMPRE do tamanho da caixa inteira (nunca encolhe) — o texto dentro dela centraliza exatamente na mesma posição do texto escuro por baixo, sempre. Só a parte VISÍVEL é controlada, via clip-path (ver abaixo) — não o tamanho/posição do texto em si. É por isso que essa camada não "reflui"/recentraliza a cada mudança de %, ao contrário de uma versão anterior que usava width — aquela desalinhava os dois textos porque cada largura diferente centralizava o texto num ponto diferente. */ padding: 6px 14px; box-sizing: border-box; clip-path: inset(0 100% 0 0); transition: clip-path 0.5s ease; z-index: 2; pointer-events: none; } .reserva-prog-atual-clip { font-size: 16px; font-weight: 800; font-family: 'Outfit', 'Century Gothic', sans-serif; letter-spacing: -0.2px; white-space: nowrap; color: #fff; } /* Perfil 1 entrada: card bem mais largo, caixa cresce proporcionalmente (só tamanho — a mecânica acima já é idêntica pros dois perfis). */ body.perfil-unico #pu-grid-extra .meta-valor-fill-wrap { border-radius: 12px; padding: 8px 20px; } body.perfil-unico #pu-grid-extra .meta-valor-fill-clip { padding: 8px 20px; } body.perfil-unico #pu-grid-extra .reserva-prog-atual-clip { font-size: 19px; } body.perfil-unico #pu-grid-extra .reserva-prog-atual { font-size: 19px; } /* AJUSTE: "Meta:" repetia a palavra que já aparece no título da coluna ("METAS") duas linhas acima, e o "de" prefixado (tentativa anterior) ainda soava redundante — agora é só o número do alvo, sem nenhum rótulo, direto embaixo do valor principal. O texto literal "Meta:" continua no HTML (reaproveitado no perfil 2 entradas, sem esse problema) — aqui só escondemos. */ body.perfil-unico .reserva-prog-meta-label { display: none; } /* AJUSTE: virou pílula colorida, igual ao padrão que Saldo/Gastos já usam pra informação secundária (badge redondo com fundo suave) — antes era texto solto cinza, o único dos 4 cards que não seguia essa linguagem visual. Mesma cor de identidade de Metas (--pu-metas/--pu-metas-soft), já que aqui não é semântico (positivo/negativo) como em Saldo/Gastos — é só "o alvo fixo". */ body.perfil-unico .reserva-prog-meta-display { display: inline-block; font-size: 11px; font-weight: 700; color: var(--pu-metas); background: var(--pu-metas-soft); border-radius: 999px; padding: 3px 12px; white-space: nowrap; } /* AJUSTE: essa linha não tinha NENHUMA regra própria pro perfil 1 — sem grid-column/grid-row definidos, o grid a auto-posicionava na primeira célula livre (a coluna-espaçadora vazia à esquerda do valor), o que a jogava pro canto esquerdo do card, meio flutuando, fora do bloco de conteúdo. Ganha linha própria, centralizada, entre o valor e os botões — mesmo texto/emoji que já vem pronto do mensal.js, só reposicionado. */ body.perfil-unico .reserva-prog-prazo-row { grid-column: 1 / 4; grid-row: 3; margin-top: 2px; padding-top: 6px; border-top: 1px dashed rgba(58,110,220,0.14); width: 100%; max-width: 200px; margin-left: auto; margin-right: auto; text-align: center; } body.perfil-unico .reserva-prog-prazo-txt { font-size: 10px; display: inline-flex; align-items: center; gap: 4px; color: #8a9cc8; } body.perfil-unico .reserva-prog-prazo-txt::before { content: ""; width: 11px; height: 11px; flex-shrink: 0; background-color: #8a9cc8; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } body.perfil-unico .metas-reserva-card-outer .reserva-card-btns { grid-column: 1 / 4; grid-row: 4; width: 100%; max-width: 200px; margin: 2px auto 0; justify-content: center; } body.perfil-unico #pu-grid-extra .metas-reserva-card-outer .reserva-card-btn { font-size: 10px; padding: 7px 0; } /* AJUSTE: pontinhos de navegação e o botão "+ Adicionar Nova Meta" saem de dentro do card e ficam ABAIXO dele. .metas-reserva-card-outer já é position:relative (herda da regra-base compartilhada com Previsão/Reserva), então os dois ancoram nela via top:100% (topo exatamente na borda inferior do card) + um respiro fixo. */ body.perfil-unico #meta-nav-dots { position: absolute; left: 0; right: 0; top: calc(100% + 10px); margin-top: 0; } body.perfil-unico #res-ativo-state > button { text-align: center; position: absolute; left: 0; right: 0; top: calc(100% + 26px); margin-top: 0 !important; } /* ── Estado vazio (sem meta cadastrada) ── v7: antes ficava com texto alinhado à esquerda, sem nenhum "corpo" de card — o que fazia parecer um elemento estranho entre as outras 3 colunas (centralizadas). A identidade da versão 2 entradas (ícone + texto + CTA, tudo centralizado, convite visual) é mantida — só a MOLDURA do card (fundo/borda/sombra própria) sai, porque aqui quem já faz esse papel é o painel inteiro (#pu-grid-extra), e duplicar isso criaria um "card dentro de card". Cresce pra ocupar a mesma faixa que o número ocupa nas outras 3 colunas. */ body.perfil-unico #pu-grid-extra .meta-vazio-card { flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0; background: none; border: none; box-shadow: none; } body.perfil-unico #pu-grid-extra .meta-vazio-card:hover { /* sem card pra "levantar" — a base (2 entradas) usa translateY porque ali é um card físico; aqui só o link abaixo reage. */ box-shadow: none; transform: none; } body.perfil-unico .meta-vazio-icone { width: 42px; height: 30px; } body.perfil-unico .meta-vazio-texto { text-align: center; font-size: 11.5px; line-height: 1.4; } body.perfil-unico .meta-vazio-btn { font-size: 11.5px; } /* ══════════════════════════════════════════════════════════════ AJUSTE (v11) — espaçamento interno compacto A v3 forçava as 3 faixas (título/valor/ação) a terem altura IGUAL entre Saldo/Gastos/Reserva — útil enquanto os 4 indicadores viviam num painel único (v3–v9), onde qualquer diferença de altura entre eles ficava visível lado a lado no mesmo fundo. A peça central daquele mecanismo — flex:1 na faixa de valor — absorvia TODO o espaço sobrando do card, e é exatamente isso que deixava título/valor/badge esticados com vazio grande entre eles. Agora que cada indicador é um card independente (v10), essa precisão entre colunas deixou de ser necessária — uma pequena diferença de altura entre cards não fica lado a lado na mesma superfície como antes. Troca: título/valor/ação viram um grupo compacto (gaps pequenos e fixos, sem flex:1) centralizado como um todo no card — o mesmo ritmo interno que os cards do perfil 2 entradas já usam. ══════════════════════════════════════════════════════════════ */ /* Todas as 4 colunas com a mesma largura */ body.perfil-unico #pu-grid-extra > .metas-reserva-card-outer { flex: 1 1 0; } /* ── Saldo / Gastos ── */ /* AJUSTE (jul/2026): estava "center" — centraliza o BLOCO INTEIRO (título+valor+badge) dentro do card. Como os 4 cards do painel são estirados pra mesma altura (align-items:stretch no #pu-grid-extra), e cada um tem uma quantidade diferente de conteúdo por baixo do título, centralizar o bloco inteiro faz o título de cada card pousar numa altura DIFERENTE — o card com menos conteúdo abaixo (Gastos) sobra mais espaço, empurrando o título mais pra baixo; o card com mais conteúdo (Reserva) sobra menos espaço, título fica mais alto. É exatamente o mecanismo que a Metas já usa e documenta (ver comentário "v7" mais abaixo): título fixo no topo (flex-start), e só o conteúdo abaixo dele ganha a centralização, via margin-top:auto / margin-bottom:auto no primeiro/último filho (truque de "centralizar um subgrupo" em flex column, sem precisar de um wrapper novo no HTML). */ body.perfil-unico #pu-grid-extra > .previsao-card { justify-content: flex-start; } body.perfil-unico #pu-grid-extra .previsao-card-titulo { white-space: nowrap; margin-bottom: 10px; margin-top: 6px; } body.perfil-unico #pu-grid-extra .previsao-card-valor { display: block; margin-bottom: 10px; margin-top: auto; } body.perfil-unico #pu-grid-extra > .previsao-card > div:last-child { display: flex; align-items: center; justify-content: center; margin-bottom: auto; } /* ── Reserva ── */ /* Mesmo ajuste (jul/2026) e mesmo motivo do bloco Saldo/Gastos acima: título fixo no topo; margin-top:auto no 2º filho (bloco do saldo) e margin-bottom:auto nos botões centralizam o CONTEÚDO como subgrupo, sem mover o título. */ body.perfil-unico #pu-grid-extra > .reserva-card { justify-content: flex-start; } /* AJUSTE (v12/v13, histórico): título centralizado + "Simular" tirado do fluxo do cabeçalho, ancorado com position:absolute — a ideia nunca chegou a se ver, porque o cabeçalho tem style="justify-content:space-between" inline no HTML, e inline sempre vence classe. Ficava tudo escrito aqui, sem efeito nenhum. AJUSTE (jul/2026): a centralização do título e o ancoramento do botão agora são resolvidos pela regra-base .reserva-card-header / .reserva-card .btn-simulador-anual (mais acima no arquivo, com !important só na parte que precisa vencer o inline) — o MESMO elemento é só movido via JS pro #pu-grid-extra aqui no perfil 1, então a regra-base já cobre os dois perfis. position:relative e align-self:stretch saíram de propósito: eram necessários só porque antes o botão ancorava contra o CABEÇALHO; agora ele ancora direto contra o .reserva-card (containing block já correto, sem precisar esticar o cabeçalho pra "enxergar" a borda do card). */ body.perfil-unico #pu-grid-extra .reserva-card-header { justify-content: center; margin-bottom: 10px; } body.perfil-unico #pu-grid-extra .reserva-card-titulo { white-space: nowrap; margin-top: 6px; } body.perfil-unico #pu-grid-extra .reserva-card-saldo { font-size: 32px; padding: 0; margin: 0; } /* AJUSTE (v12): Reserva tem uma linha a mais que Saldo/Gastos (2 botões, em vez de um badge pequeno) — o mesmo respiro compacto (10px) usado lá deixava os botões colados no valor. Aqui o valor ganha mais respiro antes dos botões, e os botões em si ficam um pouco maiores (padding/fonte), só nesta coluna — sem copiar o espaçamento das outras duas nem afetar os botões de Metas, que usam a mesma classe .reserva-card-btn. */ body.perfil-unico #pu-grid-extra > .reserva-card > div:nth-child(2) { margin-bottom: 18px; margin-top: auto; } body.perfil-unico #pu-grid-extra > .reserva-card .reserva-card-btns { align-items: center; gap: 10px; margin-bottom: auto; } body.perfil-unico #pu-grid-extra > .reserva-card .reserva-card-btn { padding: 7px 0; font-size: 10px; } /* ── Metas: título na mesma altura das outras 3 colunas ── */ body.perfil-unico .pu-metas-titulo { min-height: 20px; white-space: nowrap; /* Saldo/Gastos/Reserva ganharam margin-top:6px (ver .previsao-card-titulo / .reserva-card-titulo acima) pra alinhar título na mesma altura entre os 4 cards — faltava aqui, o que deixava METAS mais alto que os outros 3. */ margin-top: 6px; } /* ══════════════════════════════════════════════════════════════ REDESENHO v4 (jul/2026) — visual premium / SaaS 100% visual: nenhuma regra de estrutura, alinhamento, largura ou disposição das v1–v3 acima foi tocada — o layout de 4 colunas lado a lado, a altura igual entre as 3 faixas (título/valor/ação) e a mecânica de centralização de R$/número/% continuam intactas. Este bloco só adiciona: paleta semântica por indicador, uma barra "espectro" no topo do painel (assinatura visual dos 4 números), divisórias em gradiente (em vez de linha sólida), badges em pílula pro %, bolinha de cor junto ao rótulo de cada coluna, e realce sutil no hover. Tudo dentro de body.perfil-unico — o perfil de 2 entradas não é afetado. ══════════════════════════════════════════════════════════════ */ /* ── Paleta semântica (um token por indicador) ── */ body.perfil-unico { --pu-saldo: #059669; --pu-saldo-soft: rgba(5,150,105,0.10); --pu-gastos: #dc2626; --pu-gastos-soft: rgba(220,38,38,0.09); --pu-reserva: #3a6edc; --pu-reserva-soft: rgba(58,110,220,0.09); /* Era roxo (#7c3aed) — fora da identidade do Planôva. Trocado pelo navy do próprio gradiente de marca (#1c3f91, a ponta escura de "linear-gradient(135deg,#1c3f91,#3a6edc)" usado em botões/header no app inteiro) — harmoniza com o resto, e ainda dá pra distinguir de --pu-reserva (azul mais claro) nos lugares que mostram os dois lado a lado (pontinho de cor por coluna etc). */ --pu-metas: #1c3f91; --pu-metas-soft: rgba(28,63,145,0.09); --pu-divider: rgba(28,63,145,0.16); --pu-brand-accent: rgba(58,110,220,0.5); /* usado só no filete do topo do painel */ } /* AJUSTE (v10): a casca (raio/sombra/fundo) do "painel único", o filete de topo (v6) e a divisória em gradiente entre colunas pertenciam ao conceito de painel único (v2–v9) — com 4 cards separados (ver bloco #pu-grid-extra mais acima), cada card já tem sua própria borda/sombra, e o espaço entre eles já separa visualmente. As três regras abaixo ficam desativadas (não removidas, pra facilitar voltar pra v9 se decidirem que o painel único ficava melhor). */ body.perfil-unico #pu-grid-extra::before, body.perfil-unico #pu-grid-extra::after { content: none; } body.perfil-unico #pu-grid-extra > *:not(:first-child)::after { content: none; } /* ── Sem efeito de hover nas colunas: a coluna Metas reaproveita .meta-card (usado empilhado no perfil 2 entradas, onde o hover ajuda a indicar a pilha clicável) — aqui é só um indicador, igual às outras 3 colunas, então o hover herdado é neutralizado. ── */ body.perfil-unico #pu-grid-extra .meta-card:hover { box-shadow: none; } /* ── Números: paleta semântica + tabular-nums (dígitos de largura fixa — o número não "treme" horizontalmente ao trocar de mês). ── */ body.perfil-unico #pu-grid-extra .previsao-card-valor, body.perfil-unico #pu-grid-extra .reserva-card-saldo, body.perfil-unico #pu-grid-extra .reserva-prog-atual { font-variant-numeric: tabular-nums; } body.perfil-unico #pu-grid-extra .previsao-card-valor.verde { color: var(--pu-saldo); } body.perfil-unico #pu-grid-extra .previsao-card-valor.vermelho { color: var(--pu-gastos); } body.perfil-unico #pu-grid-extra .reserva-card-saldo { /* !important necessário pois atualizarDisplayReserva() em mensal.js define a cor inline via JS — aqui só a COR muda; valor e lógica de cálculo continuam 100% intactos. */ color: var(--pu-reserva) !important; } /* ── % de Saldo/Gastos como badge em pílula (antes: texto solto). ── */ body.perfil-unico #pu-grid-extra .previsao-card-pct { border-radius: 999px; padding: 3px 12px; font-size: 11.5px; } body.perfil-unico #pu-grid-extra .previsao-card-pct.verde { background: var(--pu-saldo-soft); color: var(--pu-saldo); } body.perfil-unico #pu-grid-extra .previsao-card-pct.vermelho { background: var(--pu-gastos-soft); color: var(--pu-gastos); } /* ── Botões Depositar/Retirar (Reserva e Metas): formato pílula, leve elevação no hover. Mantém azul=depositar / vermelho=retirar, a mesma semântica já usada no resto do sistema. ── */ body.perfil-unico #pu-grid-extra .reserva-card-btn { border-radius: 999px; transition: background 0.15s, border-color 0.15s, transform 0.15s; } body.perfil-unico #pu-grid-extra .reserva-card-btn:hover { transform: translateY(-1px); } body.perfil-unico #pu-grid-extra .btn-simulador-anual { border-radius: 999px; padding: 3px 10px 3px 8px; } /* ── Metas: badge de categoria e navegação entre metas ── */ body.perfil-unico #pu-grid-extra .res-categoria-badge { background: var(--pu-metas-soft); color: var(--pu-metas); margin-right: 6px; } body.perfil-unico #pu-grid-extra .meta-nav-dot.ativo { background: var(--pu-metas); } /* ══════════════════════════════════════════════════════════════ REDESENHO v4/v6 — modo escuro Só os tokens e a casca do painel precisam de valores próprios; tudo que usa var(--pu-*) acima (badges, divisórias, filete de topo, anel de metas) se adapta sozinho porque os tokens são redefinidos aqui. ── */ body.dark.perfil-unico { --pu-saldo: #34d399; --pu-saldo-soft: rgba(52,211,153,0.14); --pu-gastos: #f87171; --pu-gastos-soft: rgba(248,113,113,0.14); --pu-reserva: #6f9fff; --pu-reserva-soft: rgba(111,159,255,0.14); /* Mesmo raciocínio do claro: sai o roxo, entra um azul — aqui um pouco mais frio/acinzentado que --pu-reserva (que já é o azul "vivo" do sistema no dark) pra manter os dois distinguíveis. */ --pu-metas: #8fa8f0; --pu-metas-soft: rgba(143,168,240,0.16); --pu-divider: rgba(255,255,255,0.12); --pu-brand-accent: rgba(111,159,255,0.55); } /* AJUSTE (v10): a casca escura era do painel único; agora cada um dos 4 cards precisa do próprio tratamento — mesmo usado pelos cards do perfil 2 entradas em modo escuro (body.dark .previsao-card etc., mais abaixo no arquivo), só reafirmado aqui com a especificidade de #pu-grid-extra > para vencer o gradiente branco fixo da regra v10 (clara) acima. */ body.dark.perfil-unico #pu-grid-extra > .previsao-card, body.dark.perfil-unico #pu-grid-extra > .reserva-card, body.dark.perfil-unico #pu-grid-extra > .metas-reserva-card-outer { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 20px rgba(0,0,0,0.28); } /* border-color acima reseta os 4 lados — reaplica só o topo, senão o destaque azul (border-top mais acima no arquivo) some no dark. */ body.dark.perfil-unico #pu-grid-extra > .previsao-card, body.dark.perfil-unico #pu-grid-extra > .reserva-card, body.dark.perfil-unico #pu-grid-extra > .metas-reserva-card-outer { border-top-color: var(--pu-brand-accent); } body.dark.perfil-unico .pu-metas-titulo { color: rgba(255,255,255,0.45); } /* Metas especificamente não deve ter contorno visível nos lados/base no dark — mas o topo mantém o mesmo destaque azul dos outros 3 cards (reaplicado logo acima). A largura da borda (1.5px) continua existindo nos dois modos, senão o card muda de tamanho ao trocar de tema (box de largura automática, sem `width` fixo) e empurra os outros 3 cards da linha — só a COR muda, não a caixa. */ body.dark.perfil-unico #pu-grid-extra > .metas-reserva-card-outer { border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } /* ── COLUNA WRAPPER (secao + subtotal lado a lado) ── */ .coluna-wrapper { display: flex; flex-direction: row; align-items: flex-start; flex: none; min-width: 0; } /* wrapper interno para alinhar subtotal ao centro dos blocos */ .secao-e-subtotal { display: flex; flex-direction: row; align-items: stretch; flex: none; width: fit-content; gap: 20px; } .blocos-area { flex: 1 1 0; min-width: 0; } /* ── SEÇÃO (pessoa 1 / pessoa 2) ── */ .secao { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; } .secao-header { font-size: 12px; font-weight: 700; color: #1f7a1f; margin-bottom: 6px; min-height: 28px; display: flex; align-items: center; } /* salário input acima de cada seção */ .salario-input { border: none; border-bottom: 1.5px solid transparent; border-image: linear-gradient(to right, transparent, rgba(0,0,0,0.22) 25%, rgba(0,0,0,0.22) 75%, transparent) 1; outline: none; background: transparent; font-size: 13px; font-weight: 700; color: #1f7a1f; text-align: center; width: 130px; font-family: inherit; margin-bottom: 0; padding-bottom: 2px; transition: border-image 0.2s; } .salario-input:focus { border-image: linear-gradient(to right, transparent, rgba(58,110,220,0.6) 20%, rgba(58,110,220,0.8) 50%, rgba(58,110,220,0.6) 80%, transparent) 1; outline: none; } .btn-confirmar-sal { width: 22px; height: 22px; border: none; border-radius: 50%; background: #1f7a1f; color: #fff; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: background 0.15s, transform 0.1s; padding: 0; line-height: 1; } .btn-confirmar-sal:hover { background: #155e15; transform: scale(1.1); } .btn-confirmar-sal:active { transform: scale(0.95); } .salario-input::placeholder { color: #1f7a1f; opacity: 1; } .salario-input[readonly] { color: #1f7a1f; cursor: not-allowed; } .salario-input.com-extras { cursor: not-allowed; } .salario-input.com-extras:focus { border-image: linear-gradient(to right, transparent, rgba(0,0,0,0.22) 25%, rgba(0,0,0,0.22) 75%, transparent) 1; } /* linha decorativa abaixo do salário — border-bottom direto no input */ .secao-header { position: relative; } .secao-header::after { display: none; } .sal-input-wrap { display: inline-flex; align-items: center; gap: 4px; } /* ── MENU ⋯ DO SALÁRIO ── */ .sal-menu-wrap { position: relative; display: flex; align-items: center; } .btn-sal-menu { width: 24px; height: 24px; border: none; background: none; color: #14245c; font-size: 21px; font-weight: 900; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: color 0.15s, background 0.15s; padding: 0; } .btn-sal-menu:hover { color: #0a1440; background: rgba(28,63,145,0.14); } .sal-menu-dropdown { display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #fff; border: 1.5px solid #a3c0ef; border-radius: 10px; box-shadow: 0 6px 24px rgba(28,63,145,0.14); padding: 4px; min-width: 132px; z-index: 9999; flex-direction: column; gap: 2px; } .sal-menu-dropdown.aberto { display: flex; animation: salMenuDropdownIn 0.16s ease-out; transform-origin: top center; } @keyframes salMenuDropdownIn { from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } .sal-menu-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; border-radius: 7px; padding: 7px 10px; font-size: 12px; font-family: inherit; font-weight: 500; color: #1a2a5e; cursor: pointer; text-align: left; white-space: nowrap; transition: background 0.12s, color 0.12s; } .sal-menu-dropdown button:hover { background: #f0f4fb; } .sal-menu-dropdown button svg { flex-shrink: 0; color: #8a9cc8; } .sal-menu-dropdown button.sal-menu-danger { color: #c0392b; } .sal-menu-dropdown button.sal-menu-danger svg { color: #c0392b; } .sal-menu-dropdown button.sal-menu-danger:hover { background: #fef2f2; } body.mes-fechado .sal-menu-wrap { display: none; } /* ── CÍRCULO DE AVISO (!) ── */ #aviso-icone { opacity: 0; pointer-events: none; position: relative; align-self: center; margin-left: 8px; z-index: 200; cursor: default; user-select: none; display: flex; align-items: center; justify-content: center; } #aviso-icone.visivel { opacity: 1; pointer-events: auto; } /* Círculo pulsante */ #aviso-circulo { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff; font-size: 14px; font-weight: 900; font-family: 'Outfit', 'Century Gothic', sans-serif; display: flex; align-items: center; justify-content: center; line-height: 1; position: relative; z-index: 1; transition: transform 0.15s; box-shadow: 0 2px 8px rgba(231,76,60,0.45); } /* Onda radar — pseudo-elemento que expande e some */ #aviso-circulo::before, #aviso-circulo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(231, 76, 60, 0.45); animation: radar-onda 1.6s ease-out infinite; z-index: -1; } #aviso-circulo::after { animation-delay: 0.8s; } @keyframes radar-onda { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.2); opacity: 0; } } #aviso-icone.visivel:hover #aviso-circulo { transform: scale(1.1); } #aviso-icone.visivel:hover #aviso-circulo::before, #aviso-icone.visivel:hover #aviso-circulo::after { animation-play-state: paused; opacity: 0; } #aviso-tooltip { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #2c0a0a, #4a1010); color: #fff; border-radius: 10px; padding: 10px 14px; min-width: 200px; box-shadow: 0 6px 24px rgba(0,0,0,0.35); border: 1px solid rgba(231,76,60,0.4); pointer-events: none; animation: none; font-size: 12px; text-align: left; white-space: nowrap; } #aviso-icone:hover #aviso-tooltip { pointer-events: auto; } #aviso-tooltip::before { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #2c0a0a; border-right: 1px solid rgba(231,76,60,0.4); border-bottom: 1px solid rgba(231,76,60,0.4); } #aviso-icone:hover #aviso-tooltip { display: flex; flex-direction: column; gap: 4px; animation: fadeInUp 0.18s ease; } #aviso-tooltip { animation: none !important; opacity: 1 !important; } .tooltip-titulo { font-weight: 700; font-size: 12px; color: #ff8a80; letter-spacing: 0.3px; } .tooltip-desc { font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 400; } #aviso-tooltip-btn { display: none; margin-top: 8px; background: linear-gradient(135deg, #1c3f91, #3a6edc); border: none; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 700; font-family: inherit; padding: 6px 12px; cursor: pointer; text-align: center; letter-spacing: 0.2px; box-shadow: 0 2px 8px rgba(58,110,220,0.35); transition: opacity 0.15s, transform 0.12s; width: 100%; box-sizing: border-box; } #aviso-tooltip-btn:hover { opacity: 0.88; transform: translateY(-1px); } @keyframes fadeInUp { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ── TOAST AVISO CANTO SUPERIOR DIREITO ── */ #toast-aviso { position: fixed; top: 64px; right: 20px; z-index: 10002; background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.18), 0 0 0 1px rgba(231,76,60,0.15); padding: 10px 14px 10px; display: flex; align-items: flex-start; gap: 10px; width: 320px; max-width: calc(100vw - 40px); opacity: 0; transform: translateX(110%); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.2,0.64,1); pointer-events: none; overflow: hidden; } /* toasts gerados dinamicamente pelo sistema de fila */ .toast-sistema { transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.2,0.64,1), top 0.25s ease !important; } #toast-aviso.visivel { opacity: 1; transform: translateX(0); pointer-events: auto; } #toast-aviso.saindo { opacity: 0; transform: translateX(110%); transition: opacity 0.25s ease, transform 0.25s ease; } .toast-icone-wrap { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #fee2e2; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .toast-icone-wrap span { font-size: 14px; font-weight: 900; color: #e74c3c; font-family: 'Outfit', 'Century Gothic', sans-serif; line-height: 1; } .toast-corpo { flex: 1; min-width: 0; } .toast-titulo { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 13px; font-weight: 700; color: #c0392b; margin-bottom: 2px; letter-spacing: 0.1px; } .toast-msg { font-size: 11px; color: #666; line-height: 1.45; } .toast-msg-row { display: flex; align-items: center; gap: 8px; margin-top: 1px; flex-wrap: nowrap; } .toast-fechar { background: none; border: none; cursor: pointer; color: #bbb; font-size: 16px; line-height: 1; padding: 0; margin-left: 4px; flex-shrink: 0; margin-top: -1px; transition: color 0.15s; } .toast-fechar:hover { color: #888; } #toast-timer-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(to right, #e74c3c, #ff8a80); border-radius: 0 0 10px 10px; width: 100%; transform-origin: left; } #toast-timer-bar.correndo { animation: timer-shrink var(--toast-duracao, 5000ms) linear forwards; } @keyframes timer-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes toast-shake { 0% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 100% { transform: translateX(0); } } .toast-shake { animation: toast-shake 0.38s ease !important; } /* Botão "Sacar para cobrir" dentro do toast */ .toast-btn-cobrir { display: inline-flex; align-items: center; flex-shrink: 0; gap: 4px; margin-top: 0; padding: 5px 11px; background: linear-gradient(135deg, #1c3f91, #3a6edc); color: #fff; border: none; border-radius: 7px; font-size: 11px; font-weight: 700; font-family: 'Outfit', 'Century Gothic', sans-serif; cursor: pointer; box-shadow: 0 1px 5px rgba(58,110,220,0.28); transition: opacity 0.15s, transform 0.15s; letter-spacing: 0.1px; line-height: 1.4; white-space: nowrap; } .toast-btn-cobrir:hover { opacity: 0.88; transform: translateY(-1px); } /* Badge no topo (navbar) — aparece após toast fechar sem ação */ #painel-cobrir-badge { display: none; animation: fadeInBadge 0.35s ease forwards; } @keyframes fadeInBadge { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } .painel-cobrir-badge-btn { display: inline-block; padding: 4px 13px; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,120,100,0.7); border-radius: 20px; font-size: 10.5px; font-weight: 600; font-family: 'Outfit', 'Century Gothic', sans-serif; color: #ffbcb2; cursor: pointer; letter-spacing: 0.1px; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; } .painel-cobrir-badge-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,120,100,1); color: #fff; } /* Opções de origem no popup cobrir */ .cobrir-opcao { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1.5px solid #e0e6f4; border-radius: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s; font-size: 12px; color: #2a3a6e; font-weight: 600; } .cobrir-opcao:hover { border-color: #3a6edc; background: #f3f6fd; } .cobrir-opcao.ativa { border-color: #3a6edc; background: #eef3fb; } .cobrir-opcao.bloqueada { cursor: default; pointer-events: none; } /* Esconde input nativo (radio e checkbox) */ .cobrir-opcao input[type=radio], .cobrir-opcao input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; min-width: 16px; border-radius: 50%; border: 2px solid #c0cce0; background: #fff; flex-shrink: 0; transition: border-color 0.15s, background 0.15s; position: relative; cursor: pointer; } .cobrir-opcao input[type=radio]:checked, .cobrir-opcao input[type=checkbox]:checked { border-color: #3a6edc; background: #3a6edc; box-shadow: inset 0 0 0 3px #fff; } .cobrir-opcao-info { flex: 1; } .cobrir-opcao-label { font-size: 12px; font-weight: 700; color: #0f1f5c; } .cobrir-opcao-saldo { font-size: 10.5px; color: #3a6edc; font-weight: 600; margin-top: 1px; } /* popup-aviso desativado — substituído pelo toast */ #popup-aviso, #popup-aviso-overlay { display: none !important; } /* ── DROPDOWN CUSTOMIZADO (cartões) ── */ /* ── 9. SELECTS CUSTOMIZADOS (BANCOS) ────────────────────────────────── * O em si não aceita filhos). Ocupa o mesmo espaço que o checkbox ocupava sozinho, sem alterar o alinhamento da linha. */ .chk-pagar-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .chk-pagar-tooltip { display: block; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #0a1a3a, #1a2f6e); color: #a8c4ff; border-radius: 10px; padding: 8px 12px; white-space: nowrap; box-shadow: 0 6px 24px rgba(0,0,0,0.35); border: 1px solid rgba(58,110,220,0.45); pointer-events: none; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; z-index: 500; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; transition-delay: 0s; } .chk-pagar-tooltip::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #1a2f6e; border-right: 1px solid rgba(58,110,220,0.45); border-bottom: 1px solid rgba(58,110,220,0.45); } .chk-pagar-wrap:hover .chk-pagar-tooltip { opacity: 1; visibility: visible; transition-delay: 0.5s; /* delay só na entrada */ } /* círculo total do bloco */ /* Círculos pequenos dos blocos */ /* Círculos pequenos dos blocos */ .total-bloco { display: none; } /* Círculos de Subtotal */ .circulo-subtotal-wrap { position: relative; width: 110px; height: 110px; flex-shrink: 0; } .circulo-progress-svg { position: absolute; top: 0; left: 0; width: 110px; height: 110px; pointer-events: none; z-index: 2; } .circulo-progress-bg { fill: none; stroke: #dce6f8; stroke-width: 3; } .circulo-progress-ring { fill: none; stroke: #3a6edc; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease; } .circulo-progress-ring.alerta { stroke: #E24B4A; } .circulo-diario-hint { display: none; position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #a3c0ef; box-shadow: 0 1px 4px rgba(28,63,145,0.15); color: #1c3f91; font-size: 10px; font-weight: 700; font-family: 'Outfit', 'Century Gothic', sans-serif; align-items: center; justify-content: center; z-index: 5; cursor: default; line-height: 1; } .circulo-diario-hint.visivel { display: flex; } .circulo-diario-hint::after { content: 'Há um período ativo na página Diário vinculado a esses gastos.'; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #0a1a3a, #1a2f6e); color: #a8c4ff; font-size: 11px; font-weight: 600; font-family: 'Outfit', 'Century Gothic', sans-serif; white-space: nowrap; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(58,110,220,0.45); box-shadow: 0 6px 24px rgba(0,0,0,0.35); pointer-events: none; z-index: 99999; opacity: 0; visibility: hidden; transition: opacity 0.15s ease 0.4s, visibility 0.15s ease 0.4s; letter-spacing: 0.2px; } .circulo-diario-hint::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #1a2f6e; border-right: 1px solid rgba(58,110,220,0.45); border-bottom: 1px solid rgba(58,110,220,0.45); pointer-events: none; z-index: 99998; opacity: 0; visibility: hidden; transition: opacity 0.15s ease 0.4s, visibility 0.15s ease 0.4s; } .circulo-diario-hint:hover::after, .circulo-diario-hint:hover::before { opacity: 1; visibility: visible; } .circulo-subtotal { position: absolute; top: 8.5px; left: 8.5px; width: 93px; height: 93px; background: #fff; border-radius: 50%; border: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: rgb(43, 40, 40); font-weight: 700; font-size: 10.5px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 1; } /* Círculos do Painel da Direita — definidos em .painel-circulo abaixo */ .separador { width: 1px; /* O primeiro valor (0) é em cima/baixo, o segundo (20px) é nas laterais */ margin: 0 20px; position: relative; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1), transparent); align-self: stretch; /* Faz a linha esticar de cima a baixo */ display: block; } /* Versão espelhada — sombra vai para a direita igual aos outros */ .separador.separador-direita::after { left: 1px; right: auto; background: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.01) 60%, transparent 100%); } /* A LINHA CENTRAL */ .separador::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; /* Aumentamos a área de transição (de 0 a 30%) para não haver quebra bruta */ background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.2) 70%, transparent 100%); } /* A SOMBRA (Versão ultra-diluída) */ .separador::after { content: ""; position: absolute; top: 0; bottom: 0; left: 1px; /* Aumentamos para 60px para o degradê ter mais espaço para "morrer" */ width: 60px; /* Gradiente com paradas intermediárias para diluição suave */ background: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, /* Começa suave na linha[cite: 1] */ rgba(0, 0, 0, 0.05) 20%, /* Já cai bastante a intensidade logo no início[cite: 1] */ rgba(0, 0, 0, 0.01) 60%, /* Quase invisível na metade[cite: 1] */ transparent 100%); /* Termina totalmente diluído */ /* Mantemos a máscara vertical suave que já ajustamos antes */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%); pointer-events: none; } /* ── SUBTOTAL ── */ .subtotal-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-left: 50px; flex-shrink: 0; width: 140px; } .circulo-livre-badge { font-size: 10.5px; font-weight: 600; color: #3a6a3a; background: rgba(46,125,50,0.09); border: 1px solid rgba(46,125,50,0.18); border-radius: 20px; padding: 3px 10px; white-space: nowrap; font-family: 'Outfit', 'Century Gothic', sans-serif; letter-spacing: 0.1px; visibility: visible; min-width: 130px; box-sizing: border-box; text-align: center; } .circulo-livre-badge.oculto { visibility: hidden; } .btn-subtotal { background: #cfe1f5; /* Um azul bem clarinho para destacar o fundo */ color: #1c3f91; /* Azul escuro para contraste no texto */ text-align: left; padding: 8px 12px; border-radius: 6px; font-size: 11px; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; /* O toque profissional: uma borda lateral grossa */ border-left: 4px solid #3a6edc; /* Uma sombra bem leve para "tirar" do papel */ box-shadow: 2px 2px 5px rgba(0,0,0,0.05); } .circulo-subtotal { position: absolute; top: 8.5px; left: 8.5px; width: 93px; height: 93px; background: #fff; border-radius: 50%; border: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: rgb(43, 40, 40); font-weight: 700; font-size: 10.5px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 1; } /* ── PAINEL DIREITA (Previsão de Saldo, Gastos, Reserva, etc.) ── */ /* ── 12. PAINEL DIREITO ──────────────────────────────────────────────── * Coluna fixa à direita com: * • Salário total (readonly, soma automática) * • Ícone de aviso (!) com tooltip "Orçamento estourado" * • Card "Previsão de Saldo" (verde/vermelho) * • Card "Previsão de Gastos" * • Card "Reserva de Emergência" * • Card(s) Meta em pilha * ────────────────────────────────────────────────────────────────────── */ .painel-direita { display: flex; flex-direction: column; align-items: stretch; gap: 12px; flex: 0 0 auto; width: 320px; margin-left: 0px; align-self: flex-start; } .painel-row { display: flex; gap: 14px; } .painel-btn-full { flex: 1; text-align: center; } .painel-btn { flex: 1; background: #cfe1f5; color: #1c3f91; border: none; border-left: 4px solid #3a6edc; border-radius: 6px; padding: 8px 12px; font-size: 11px; font-weight: 700; font-family: inherit; cursor: default; text-align: center; letter-spacing: 1px; text-transform: uppercase; box-shadow: 2px 2px 5px rgba(0,0,0,0.05); } .painel-circulo-row { display: flex; gap: 14px; justify-content: center; } .painel-circulo { width: 155px; height: 155px; flex: none; background: #fff; border-radius: 50%; border: 1.5px solid #a3c0ef; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 16px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .painel-circulo.verde { color: #1f7a1f; } .painel-circulo.vermelho { color: rgb(201, 0, 0); } .painel-reserva-btn { background: #cfe1f5; color: #1c3f91; border: none; border-left: 4px solid #3a6edc; border-radius: 6px; padding: 8px 12px; font-size: 11px; font-weight: 700; font-family: inherit; cursor: default; text-align: center; letter-spacing: 1px; text-transform: uppercase; box-shadow: 2px 2px 5px rgba(0,0,0,0.05); width: 100%; margin-top: 2px; box-sizing: border-box; } .reserva-linha-wrap { position: relative; margin: 2px 0; } .reserva-linha-wrap::after { content: ""; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.18) 70%, transparent); } .reserva-valor { text-align: center; font-size: 16px; font-weight: 700; padding: 8px 0 8px; width: 100%; border: none; outline: none; background: transparent; font-family: inherit; box-sizing: border-box; color: inherit; display: block; } .reserva-valor.verde::placeholder { color: #1f7a1f; opacity: 1; } .reserva-valor.vermelho::placeholder { color: rgb(201, 0, 0); opacity: 1; } .reserva-valor.verde { color: #1f7a1f; } .reserva-valor.vermelho { color: rgb(201, 0, 0); } .reserva-valor:focus { outline: none; } .reserva-linha-wrap:has(input:focus)::after { background: linear-gradient(to right, transparent, rgba(58,110,220,0.5) 30%, rgba(58,110,220,0.5) 70%, transparent); } .painel-sal-header { display: flex; justify-content: center; min-height: 28px; align-items: center; margin-bottom: 2px; position: relative; } .painel-sal-header #aviso-icone { position: absolute; left: 0; margin: 0; } /* ── TOPNAV RIGHT ── */ .topnav-right { display: flex; align-items: center; gap: 16px; } /* Divisor entre os 4 grupos da topnav-right (modo noturno / Salvo / presença / ano) — precisa ler como um elemento separador de propósito, não como uma linha residual quase invisível. Curto (não toca as bordas da barra), sólido (sem gradiente esmaecendo as pontas) e com cantos arredondados, pra combinar com a linguagem de pílula do resto da topnav em vez de parecer um traço técnico. */ .topnav-divisor { width: 1.5px; height: 18px; border-radius: 1px; flex-shrink: 0; background: rgba(255,255,255,0.32); } /* ── Divisor do "Salvo" — cresce a partir do centro, não aparece do * nada. transform-origin padrão de scaleY já é o centro (50% 50%), * então as duas pontas "nascem" de um ponto e se abrem pra cima/ * baixo ao mesmo tempo. Só este divisor — os outros da topnav * continuam sem transição, de propósito (pedido explícito). ── */ #salvo-indicator-divisor { transform: scaleY(0); transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1); } #salvo-indicator-divisor.divisor-visivel { transform: scaleY(1); } /* ── INDICADOR SALVO ── */ @keyframes salvo-entrada { 0% { opacity: 0; transform: translateY(6px) scale(0.92); } 60% { opacity: 1; transform: translateY(-1px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes salvo-saida { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-4px) scale(0.95); } } @keyframes check-pop { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } #salvo-indicator { display: none; align-items: center; gap: 6px; opacity: 0; pointer-events: none; font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; color: #fff; background: rgba(74, 222, 128, 0.18); border: 1px solid rgba(74, 222, 128, 0.45); border-radius: 8px; padding: 5px 11px 5px 9px; box-shadow: 0 0 12px rgba(74, 222, 128, 0.2); } #salvo-indicator.visivel { animation: salvo-entrada 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; } #salvo-indicator.saindo { animation: salvo-saida 0.3s ease forwards; } #salvo-indicator svg { flex-shrink: 0; stroke: #4ade80; } #salvo-indicator.visivel svg { animation: check-pop 0.35s cubic-bezier(0.34, 1.5, 0.64, 1) 0.1s both; } /* ── Indicador offline / sincronizando (Fase 2c) ── * Mesmo padrão visual do #salvo-indicator acima, só que em âmbar * (mesma cor de "colidindo" nos badges de presença — já é a cor de * "atenção" estabelecida no app) em vez de verde. Dois estados * possíveis, mesmo componente — sync.js troca ícone/texto direto via * JS (_syncAtualizarIndicadorOffline), sem classe CSS de estado: * "Sem internet" — ícone de wifi cortado * "Sincronizando…" — ícone giratório (@keyframes abaixo) */ #offline-indicator { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; color: #fff; background: rgba(240, 180, 41, 0.18); border: 1px solid rgba(240, 180, 41, 0.45); border-radius: 8px; padding: 5px 11px 5px 9px; box-shadow: 0 0 12px rgba(240, 180, 41, 0.18); animation: fade-up 0.3s ease both; } #offline-indicator svg { flex-shrink: 0; stroke: #f0b429; } #offline-indicator-icone-sync { animation: offline-indicator-girar 1.1s linear infinite; } @keyframes offline-indicator-girar { to { transform: rotate(360deg); } } /* ── ANIMAÇÃO TROCA DE ANO ── */ #ano-flash-overlay { position: fixed; inset: 0; z-index: 99998; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: 0; } #ano-flash-overlay.ativo { animation: ano-fade 700ms ease forwards; } @keyframes ano-fade { 0% { opacity: 0; background: rgba(28,63,145,0); } 25% { opacity: 1; background: rgba(28,63,145,0.07); } 100% { opacity: 0; background: rgba(28,63,145,0); } } #ano-flash-label { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 72px; font-weight: 700; color: rgba(28,63,145,0.12); letter-spacing: -2px; user-select: none; animation: ano-label-pop 700ms ease forwards; } @keyframes ano-label-pop { 0% { transform: scale(0.85); opacity: 0; } 30% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1.08); opacity: 0; } } /* ── BARRA DE PROGRESSO RESERVA ── */ .reserva-progresso-wrap { margin-top: 11px; background: linear-gradient(160deg, rgba(255,255,255,0.85) 0%, rgba(240,245,255,0.7) 100%); border: 1px solid rgba(58,110,220,0.13); border-radius: 14px; padding: 11px 13px 12px; box-shadow: 0 2px 10px rgba(28,63,145,0.07), inset 0 1px 0 rgba(255,255,255,0.9); position: relative; overflow: hidden; } /* Brilho decorativo no canto superior esquerdo */ .reserva-progresso-wrap::before { content: ""; position: absolute; top: -18px; left: -18px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, rgba(58,110,220,0.06) 0%, transparent 70%); pointer-events: none; } .reserva-prog-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; } .reserva-prog-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #8a9cc8; } .reserva-prog-pct { display: none; font-size: 15px; font-weight: 700; font-family: 'Outfit', 'Century Gothic', sans-serif; color: #c0392b; transition: color 0.5s ease; line-height: 1; } /* Wrapper sem classe (só inline style) ao redor do #res-prog-pct — escondido junto, senão sobra uma linha vazia com o margin-bottom inline dele. :has() aqui é estrutural (checa um filho por ID), não depende de casar texto de estilo inline — robusto. */ div:has(> #res-prog-pct) { display: none; } .reserva-prog-pct.amarelo { color: #b8820a; } .reserva-prog-pct.verde { color: #3a6edc; } /* Track — REDESENHO: escondido nos dois perfis. A caixa de preenchimento em volta do valor (.meta-valor-fill-wrap, mais abaixo) já comunica o progresso visualmente — mesmo motivo que já valia só pro perfil 1 entrada, agora padronizado pros dois. */ .reserva-prog-track { display: none; width: 100%; height: 8px; background: rgba(28,63,145,0.07); border-radius: 99px; margin-bottom: 9px; position: relative; overflow: hidden; } /* Traço interno sutil */ .reserva-prog-track::before { content: ""; position: absolute; inset: 0; border-radius: 99px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); } /* Fill */ .reserva-prog-fill { height: 100%; border-radius: 99px; width: 0%; transition: width 0.6s cubic-bezier(0.34,1.05,0.64,1), background-color 0.5s ease; position: relative; background: linear-gradient(90deg, #e05555 0%, #f07070 100%); } .reserva-prog-fill.amarelo { background: linear-gradient(90deg, #c98a0a 0%, #f0b429 100%); } .reserva-prog-fill.verde { background: linear-gradient(90deg, #197a19 0%, #34c85a 100%); } /* Reflexo interno da barra */ .reserva-prog-fill::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 45%; border-radius: 99px 99px 0 0; background: rgba(255,255,255,0.22); pointer-events: none; } /* Pulso ao atingir 100% */ .reserva-prog-fill.completo { animation: reserva-pulso 1.8s ease-in-out infinite; } @keyframes reserva-pulso { 0%, 100% { filter: brightness(1); box-shadow: none; } 50% { filter: brightness(1.12); box-shadow: 0 0 8px rgba(46,204,113,0.5); } } /* Valor + alvo empilhados e centralizados — o card cresce um pouco em altura pra acomodar, sem problema (mais espaço pra caixa de preenchimento respirar do que espremida lado a lado). */ .reserva-prog-valores { display: flex; flex-direction: column; align-items: center; gap: 8px; } .reserva-prog-atual { font-size: 16px; font-weight: 800; font-family: 'Outfit', 'Century Gothic', sans-serif; color: #1c3f91; letter-spacing: -0.2px; white-space: nowrap; } .reserva-prog-meta-wrap { display: flex; align-items: center; gap: 4px; } /* "Meta:" some — o valor sozinho na pílula já é autoexplicativo ao lado da caixa de preenchimento (mesmo motivo que já valia só pro perfil 1 entrada, agora padronizado pros dois). */ .reserva-prog-meta-label { display: none; font-size: 9.5px; font-weight: 600; color: #aab4cc; letter-spacing: 0.3px; white-space: nowrap; } .reserva-meta-input { border: none; border-bottom: 1.5px dashed rgba(58,110,220,0.28); background: transparent; font-size: 11px; font-weight: 700; color: #1c3f91; font-family: inherit; width: 82px; outline: none; text-align: right; padding: 0 0 1px; transition: border-color 0.2s, color 0.2s; } .reserva-meta-input:focus { border-bottom-style: solid; border-color: #3a6edc; color: #0f2a7a; } .reserva-meta-input::placeholder { color: rgba(58,110,220,0.28); font-weight: 400; } /* Botão excluir meta */ .res-delete-btn { background: none; border: none; cursor: pointer; color: #d0b8b8; display: flex; align-items: center; justify-content: center; padding: 3px; border-radius: 6px; transition: color 0.18s, background 0.18s; line-height: 1; position: relative; } .res-delete-btn:hover { color: #e74c3c; background: rgba(231,76,60,0.08); } /* Badge de categoria no card */ .res-categoria-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.3px; background: rgba(58,110,220,0.09); color: #3a6edc; border-radius: 20px; padding: 2px 7px; white-space: nowrap; } /* Estado vazio */ .res-vazio-state { display: flex; align-items: center; gap: 10px; padding: 6px 4px 4px; cursor: pointer; border-radius: 10px; transition: background 0.18s; } .res-vazio-state:hover { background: rgba(58,110,220,0.05); } /* Card convidativo sem meta */ .meta-vazio-card { background: linear-gradient(160deg, rgba(255,255,255,0.85) 0%, rgba(240,245,255,0.7) 100%); border: 1px solid rgba(58,110,220,0.13); border-radius: 14px; padding: 18px 16px 16px; box-shadow: 0 2px 10px rgba(28,63,145,0.07), inset 0 1px 0 rgba(255,255,255,0.9); display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; transition: box-shadow 0.2s, transform 0.15s; } .meta-vazio-card:hover { box-shadow: 0 6px 20px rgba(28,63,145,0.13); transform: translateY(-1px); } .meta-vazio-icone { width: 52px; height: 38px; flex-shrink: 0; opacity: 0.9; } .meta-vazio-texto { font-size: 11px; font-weight: 600; color: #5a6a9a; text-align: center; line-height: 1.5; letter-spacing: 0.1px; } .meta-vazio-btn { font-size: 11px; font-weight: 700; color: #3a6edc; letter-spacing: 0.3px; opacity: 0.85; transition: opacity 0.15s; } .meta-vazio-card:hover .meta-vazio-btn { opacity: 1; } .res-vazio-icon { flex-shrink: 0; line-height: 1; display: flex; align-items: center; } .res-vazio-corpo { flex: 1; min-width: 0; } .res-vazio-titulo { font-size: 11px; font-weight: 700; color: #1a2a5e; letter-spacing: 0.1px; margin-bottom: 2px; } .res-vazio-sub { font-size: 9.5px; color: #9aaac8; line-height: 1.4; } .res-vazio-seta { font-size: 18px; color: #c0ccdf; flex-shrink: 0; line-height: 1; transition: color 0.18s, transform 0.18s; } .res-vazio-state:hover .res-vazio-seta { color: #3a6edc; transform: translateX(2px); } /* Categoria no popup — chips */ .popup-meta-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .popup-cat-btn { background: #f4f6fb; border: 1.5px solid #e0e6f4; border-radius: 20px; padding: 5px 11px; font-size: 11px; font-family: inherit; color: #4a5a8a; cursor: pointer; transition: all 0.15s; font-weight: 600; } .popup-cat-btn:hover { border-color: #3a6edc; color: #1c3f91; background: #eef3fd; } .popup-cat-btn.ativo { background: #e8effe; border-color: #3a6edc; color: #1c3f91; } /* Botão lápis */ .res-lapis-btn { background: none; border: none; cursor: pointer; color: #b0bbdb; display: flex; align-items: center; justify-content: center; padding: 3px; border-radius: 6px; transition: color 0.18s, background 0.18s; line-height: 1; position: relative; } .res-lapis-btn:hover { color: #3a6edc; background: rgba(58,110,220,0.08); } .res-lapis-btn:hover .lapis-tooltip { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.5s; } .res-lapis-btn:hover .lapis-tooltip-center { transform: translateX(-50%) translateY(0); } /* Pílula colorida com o valor-alvo — mesmo padrão visual que Saldo/Gastos já usam pra informação secundária (badge redondo, fundo suave), agora também aqui em vez do texto solto cinza de antes. Cores literais equivalentes a --pu-metas/--pu-metas-soft (essas variáveis só existem dentro de body.perfil-unico — dark mode tem seu próprio ajuste logo abaixo, no bloco dark). */ .reserva-prog-meta-display { display: inline-block; font-size: 10.5px; font-weight: 700; color: #1c3f91; background: rgba(28,63,145,0.09); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } /* Linha de prazo */ .reserva-prog-prazo-row { margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(58,110,220,0.12); } .reserva-prog-prazo-txt { font-size: 9.5px; color: #8a9cc8; font-weight: 600; letter-spacing: 0.2px; } /* Popup meta — campos internos */ .popup-meta-group { display: flex; flex-direction: column; gap: 5px; } .popup-meta-label { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #8a9cc8; } .popup-meta-input { border: 1.5px solid #e0e6f4; border-radius: 9px; padding: 8px 12px; font-size: 13px; font-weight: 700; font-family: inherit; color: #0f1f5c; outline: none; transition: border-color 0.18s; width: 100%; box-sizing: border-box; } .popup-meta-input:focus { border-color: #3a6edc; } .popup-meta-input::placeholder { color: #ccd4ea; font-weight: 400; } /* ── CARDS RESERVA E META ── */ .reserva-card { background: #fff; border: 1.5px solid #a3c0ef; border-radius: 12px; padding: 11px 13px 12px; box-shadow: 0 2px 12px rgba(28,63,145,0.10); position: relative; overflow: visible; min-height: 90px; display: flex; flex-direction: column; justify-content: center; } /* AJUSTE (jul/2026): o próprio elemento no index.html tem style="justify-content:space-between" inline — inline sempre vence regra de classe, então nada abaixo tinha efeito visual até agora (nem aqui, nem no ajuste equivalente do perfil 1, mais abaixo no arquivo). !important é o único jeito de vencer o inline sem tocar no HTML. */ .reserva-card-header { display: flex; align-items: center; justify-content: center !important; margin-bottom: 8px; } /* Botão "Simular" sai do fluxo do cabeçalho (que agora só tem o título, livre pra centralizar) e ancora direto no canto superior direito do .reserva-card — que já é position:relative (ver regra da classe abaixo). Sem escopo de perfil de propósito: é o MESMO elemento reaproveitado nos dois perfis (movido via JS pro #pu-grid-extra no perfil 1), então uma regra só cobre os dois — ver o ajuste equivalente, hoje simplificado, no bloco "Reserva" de body.perfil-unico mais abaixo. */ .reserva-card .btn-simulador-anual { position: absolute; top: 11px; right: 13px; } .reserva-card-titulo { font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #8a9cc8; } .reserva-card-saldo { font-size: 20px; font-weight: 700; font-family: 'Outfit', 'Century Gothic', sans-serif; color: #1f7a1f; text-align: center; padding: 6px 0 10px; } .reserva-card-btns { display: flex; gap: 8px; } .reserva-card-btn { flex: 1; border: 1.5px solid #cfe1f5; border-radius: 6px; padding: 4px 0; font-size: 10px; font-weight: 700; font-family: inherit; cursor: pointer; background: #cfe1f5; color: #1c3f91; letter-spacing: 0.5px; text-transform: uppercase; transition: background 0.15s, border-color 0.15s; } .reserva-card-btn:hover { background: #b8d4ef; border-color: #3a6edc; } /* AJUSTE: Retirar era um botão cheio, mesmo peso visual que Depositar — os dois brigavam pela mesma atenção. Vira outline (sem preenchimento, só borda/texto) pra ler como ação secundária. Classe reaproveitada por Reserva e Metas nos dois perfis (1 e 2 entradas), então um ajuste aqui cobre os quatro lugares de uma vez — sem precisar de override por card/perfil. */ .reserva-card-btn.retirar { border-color: #f0b8b8; background: transparent; color: #c0392b; } .reserva-card-btn.retirar:hover { background: #fdecea; border-color: #e74c3c; } /* ── DROPDOWN CUSTOMIZADO POPUP META (padrão do sistema) ── */ .popup-meta-drop-display { width: 100%; height: 28px; border-radius: 6px; border: 1px solid #ccc; padding: 2px 26px 2px 8px; font-size: 11px; font-family: inherit; background-color: #fff; color: #222; cursor: pointer; box-sizing: border-box; display: flex; align-items: center; justify-content: center; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color 0.2s; position: relative; } .popup-meta-drop-display.vazio { color: rgba(0,0,0,0.35); border-color: #ddd; } .popup-meta-drop-display::after { content: ""; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%233a6edc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; } .popup-meta-drop-display:hover { border-color: #3a6edc; } .popup-meta-drop-list { display: none; position: absolute; top: 30px; left: 0; min-width: 100%; background: #fff; border: 1px solid rgba(58,110,220,0.35); border-radius: 8px; box-shadow: 0 6px 20px rgba(28,63,145,0.13), 0 1px 4px rgba(28,63,145,0.08); z-index: 10002; overflow-y: auto; max-height: 200px; } .popup-meta-drop-list::-webkit-scrollbar { width: 5px; } .popup-meta-drop-list::-webkit-scrollbar-track { background: #e8eef8; border-radius: 4px; } .popup-meta-drop-list::-webkit-scrollbar-thumb { background: #4a6fa5; border-radius: 4px; } .popup-meta-drop-list::-webkit-scrollbar-thumb:hover { background: #1c3f91; } .popup-meta-drop-list.open { display: block; } .popup-meta-drop-item { padding: 6px 10px; font-size: 11px; font-family: inherit; cursor: pointer; background: #fff; color: #1a2a5e; white-space: nowrap; transition: background 0.1s, color 0.1s; text-align: center; } .popup-meta-drop-item:hover { background: #eef3fd; color: #1c3f91; } .popup-meta-drop-item.ativo { background: #e8effe; color: #1c3f91; font-weight: 700; } /* ── Botões de entrada do popup diário ── */ .popup-diario-entrada-btn { flex: 1; padding: 6px 0; border-radius: 8px; border: 1.5px solid #a3c0ef; background: #fff; color: #5a6a8a; font-size: 11.5px; font-weight: 600; font-family: 'Outfit', 'Century Gothic', sans-serif; cursor: pointer; transition: all 0.15s; } .popup-diario-entrada-btn:hover { border-color: #3a6edc; color: #1c3f91; } .popup-diario-entrada-btn.ativo { background: linear-gradient(135deg, #1c3f91, #3a6edc); border-color: transparent; color: #fff; } body.dark .popup-diario-entrada-btn { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.13); color: rgba(255,255,255,0.7); } body.dark .popup-diario-entrada-btn.ativo { background: linear-gradient(135deg, #2a52b0, #4a7ed8) !important; border-color: transparent !important; color: #fff !important; } /* ── Input-dropdown do popup diário ── */ .popup-diario-input-drop { width: 100%; height: 28px; border-radius: 6px; border: 1px solid #ccc; padding: 2px 8px; font-size: 11px; font-family: inherit; background-color: #fff; color: #222; box-sizing: border-box; outline: none; transition: border-color 0.2s; } .popup-diario-input-drop::placeholder { color: rgba(0,0,0,0.35); } .popup-diario-input-drop:focus { border-color: #3a6edc; } /* ── DATE PICKER PERÍODO DIÁRIO ── */ /* ── DATE PICKER PERÍODO DIÁRIO — wrapper customizado ── */ .diario-date-wrap { flex: 1 1 0; min-width: 0; position: relative; height: 34px; border-radius: 8px; border: 1.5px solid #a3c0ef; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; gap: 6px; cursor: pointer; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; user-select: none; } .diario-date-wrap:hover { border-color: #b0c4ef; } .diario-date-wrap.aberto { border-color: #3a6edc; box-shadow: 0 0 0 3px rgba(58,110,220,0.12); } .diario-date-display { font-size: 12px; font-family: inherit; color: #1a2a5e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .diario-date-display.vazio { color: #aab8d8; } .diario-date-wrap svg { flex-shrink: 0; color: #aab8d8; } /* ── CALENDÁRIO CUSTOMIZADO DIÁRIO ── */ .dcal { position: fixed; z-index: 99999; background: #fff; border: 1.5px solid #a8c4f0; border-radius: 14px; box-shadow: 0 8px 40px rgba(28,63,145,0.18), 0 2px 8px rgba(0,0,0,0.08); padding: 14px 14px 12px; width: 240px; font-family: 'Century Gothic', 'Outfit', sans-serif; user-select: none; opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34,1.15,0.64,1); pointer-events: none; } .dcal.visivel { opacity: 1; transform: translateY(0); pointer-events: all; } .dcal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .dcal-mes-label { font-size: 13px; font-weight: 700; color: #0f1f5c; text-transform: capitalize; } .dcal-nav { display: flex; gap: 2px; } .dcal-nav button { background: none; border: none; cursor: pointer; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #8a9cc8; transition: background 0.15s, color 0.15s; padding: 0; } .dcal-nav button:hover { background: #f0f4fb; color: #1c3f91; } .dcal-nav button:disabled { opacity: 0.25; cursor: default; } .dcal-nav button:disabled:hover { background: none; color: #8a9cc8; } .dcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dcal-dow { font-size: 10px; font-weight: 700; color: #aab8d8; text-align: center; padding: 4px 0 6px; letter-spacing: 0.3px; } .dcal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #1a2a5e; border-radius: 8px; cursor: pointer; transition: background 0.12s, color 0.12s; } .dcal-day:hover { background: #f0f4fb; } .dcal-day.outro-mes { color: #ccd5e8; pointer-events: none; } .dcal-day.desabilitado { color: #dde3ef; pointer-events: none; cursor: default; } .dcal-day.desabilitado:hover { background: none; } .dcal-day.selecionado { background: #1c3f91; color: #fff; font-weight: 700; } .dcal-day.selecionado:hover { background: #2a52b0; } .dcal-day.hoje:not(.selecionado) { background: rgba(58,110,220,0.08); color: #3a6edc; font-weight: 700; } /* Dark mode */ body.dark .dcal { background: #0d1845; border-color: rgba(168,196,240,0.2); box-shadow: 0 8px 40px rgba(0,0,0,0.5); } body.dark .dcal-mes-label { color: rgba(255,255,255,0.9); } body.dark .dcal-nav button { color: rgba(255,255,255,0.4); } body.dark .dcal-nav button:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); } body.dark .dcal-dow { color: rgba(255,255,255,0.3); } body.dark .dcal-day { color: rgba(255,255,255,0.8); } body.dark .dcal-day:hover { background: rgba(255,255,255,0.1); } body.dark .dcal-day.outro-mes { color: rgba(255,255,255,0.15); } body.dark .dcal-day.desabilitado { color: rgba(255,255,255,0.15); } body.dark .dcal-day.selecionado { background: #3a6edc; color: #fff; } body.dark .dcal-day.hoje:not(.selecionado) { background: rgba(58,110,220,0.2); color: #6b9ef8; } /* ── CARDS PREVISÃO DE SALDO e GASTOS ── */ .previsao-card { background: #fff; border: 1.5px solid #a3c0ef; border-radius: 12px; padding: 13px 16px 14px; box-shadow: 0 2px 12px rgba(28,63,145,0.10); position: relative; overflow: visible; text-align: center; min-height: 90px; display: flex; flex-direction: column; justify-content: center; } .previsao-card::before { content: ""; position: absolute; top: -18px; left: -18px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, rgba(58,110,220,0.05) 0%, transparent 70%); pointer-events: none; } .previsao-card-titulo { font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #8a9cc8; margin-bottom: 8px; } .previsao-card-valor { font-size: 20px; font-weight: 700; font-family: 'Outfit', 'Century Gothic', sans-serif; line-height: 1; margin-bottom: 4px; } .previsao-card-pct { font-size: 13px; font-weight: 600; font-family: 'Outfit', 'Century Gothic', sans-serif; opacity: 0.8; line-height: 1; } .previsao-card-valor.verde, .previsao-card-pct.verde { color: #1f7a1f; } .previsao-card-valor.vermelho, .previsao-card-pct.vermelho { color: rgb(201,0,0); } /* input extra (campo vazio no topo da coluna 2) */ .input-extra { border: 1.5px solid #6699cc; border-radius: 3px; background: white; width: 90px; height: 20px; outline: none; font-size: 11px; font-family: inherit; padding: 2px 4px; margin-bottom: 6px; } /* ════════════════════════════════════════════════ SISTEMA DE PILHA DE METAS ════════════════════════════════════════════════ */ .metas-reserva-card-outer { position: relative; overflow: visible; min-height: 160px; } /* Título de coluna "Metas" — só existe pro perfil 1 entrada, onde os 4 indicadores (Saldo/Gastos/Reserva/Metas) vivem juntos num único painel e precisam do mesmo padrão de rótulo. No perfil 2 entradas essa coluna já tem identidade visual própria (pilha de cards) e não precisa do rótulo extra — por isso fica oculto por padrão. */ .pu-metas-titulo { display: none; } .metas-outer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 0 2px; } /* Wrapper da pilha — flex column, cartas de trás abaixo do principal */ .metas-stack-wrapper { display: flex; flex-direction: column; width: 100%; } /* Card principal — primeiro no DOM, na frente visualmente */ .meta-card { position: relative; z-index: 3; background: #fff; border-radius: 12px; border: 1.5px solid #a3c0ef; padding: 10px 12px 10px; box-shadow: 0 2px 12px rgba(28,63,145,0.10); transition: box-shadow 0.2s; } /* Borda superior em destaque — mesmo detalhe já aplicado nos cards do perfil 1 entrada (ver body.perfil-unico #pu-grid-extra acima): border-top de verdade, então acompanha a curva do border-radius nos dois cantos de cima, em vez de ficar reto por cima. Cor igual à var(--pu-brand-accent) do perfil único, só que aqui como valor literal — essa variável só existe dentro de body.perfil-unico. */ .previsao-card, .reserva-card { border-top: 2px solid rgba(58,110,220,0.5); } /* .meta-card e .meta-vazio-card escopados fora do perfil único: no 1x os dois são cards ANINHADOS dentro de .metas-reserva-card-outer (que já ganha essa mesma borda lá em cima) — sem o :not(), duplicava a linha azul nos dois estados (com meta / sem meta). */ body:not(.perfil-unico) .meta-card, body:not(.perfil-unico) .meta-vazio-card { border-top: 2px solid rgba(58,110,220,0.5); } .meta-card:hover { box-shadow: 0 4px 18px rgba(28,63,145,0.15); } /* Cartas de trás — interativas com hover e animação de clique */ .meta-card-stack { border-radius: 12px; pointer-events: auto; cursor: pointer; min-height: 40px; transition: margin-top 0.28s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.2s, transform 0.28s cubic-bezier(0.34,1.2,0.64,1); overflow: hidden; } .meta-card-stack.s1 { margin-top: -22px; /* mais visível, fácil de alcançar */ margin-left: 6px; margin-right: 6px; z-index: 2; background: #fff; border: 1.5px solid #a3c0ef; box-shadow: 0 4px 10px rgba(28,63,145,0.08); border-radius: 0 0 12px 12px; } .meta-card-stack.s1:hover { margin-top: -8px; /* puxa bastante no hover */ box-shadow: 0 8px 20px rgba(28,63,145,0.13); } .meta-card-stack.s2 { margin-top: -18px; margin-left: 12px; margin-right: 12px; z-index: 1; background: #f5f7fc; border: 1.5px solid #d0dcf0; box-shadow: 0 3px 6px rgba(28,63,145,0.05); border-radius: 0 0 12px 12px; } .meta-card-stack.s2:hover { margin-top: -6px; box-shadow: 0 6px 14px rgba(28,63,145,0.10); } /* Nome da meta — visível fraco em repouso (evita a carta de trás parecer uma caixa vazia/falsa atrás dos botões) e reforça no hover. */ .meta-card-stack .stack-preview-nome { position: absolute; bottom: 8px; left: 12px; font-size: 10px; font-weight: 700; color: #4a5a8a; opacity: 0.5; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s, color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); pointer-events: none; } .meta-card-stack:hover .stack-preview-nome { opacity: 1; transform: translateY(0); } body.dark .meta-card-stack .stack-preview-nome { color: rgba(255,255,255,0.35); } body.dark .meta-card-stack:hover .stack-preview-nome { color: rgba(255,255,255,0.8); } /* Pontinhos de navegação */ .meta-nav-dots { display: flex; justify-content: center; gap: 5px; margin-top: 7px; min-height: 10px; } .meta-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: #d0d8ef; cursor: pointer; border: none; padding: 0; transition: background 0.18s, transform 0.18s; } .meta-nav-dot.ativo { background: #3a6edc; transform: scale(1.3); } /* Header do card */ .meta-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .meta-card-nome { font-size: 11px; font-weight: 700; color: #1a2a5e; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.1px; } /* Controles de navegação dentro do card */ .meta-card-nav { display: flex; align-items: center; gap: 3px; } .meta-card-nav-btn { background: none; border: 1px solid #dce6f8; border-radius: 5px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #8a9cc8; font-size: 11px; padding: 0; line-height: 1; transition: color 0.15s, border-color 0.15s, background 0.15s; } .meta-card-nav-btn:hover { color: #3a6edc; border-color: #3a6edc; background: #eef3fd; } .meta-card-nav-btn:disabled { opacity: 0.25; cursor: default; pointer-events: none; } .meta-card-counter { font-size: 9px; font-weight: 700; color: #aab4cc; min-width: 22px; text-align: center; letter-spacing: 0.2px; } /* ── ÍCONE DE INFO NO SALDO DA RESERVA/META ── */ .saldo-info-icon { position: relative; display: inline-flex; align-items: center; cursor: default; flex-shrink: 0; opacity: 0.55; transition: opacity 0.15s; } .saldo-info-icon:hover { opacity: 1; } /* Tooltip sempre posicionado, invisível por padrão — evita flash de reflow */ .saldo-info-tooltip { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: #1a2a5e; color: #e8effe; font-size: 11px; font-weight: 400; line-height: 1.55; font-family: 'Outfit', 'Century Gothic', sans-serif; padding: 9px 12px; border-radius: 8px; width: 220px; border: 1px solid rgba(100,140,220,0.35); box-shadow: 0 4px 16px rgba(28,63,145,0.25); pointer-events: none; z-index: 9999; white-space: normal; /* Oculto via opacity+visibility para permitir delay e evitar flash */ opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s; transition-delay: 0s, 0s; } .saldo-info-tooltip::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(100,140,220,0.35); pointer-events: none; } .saldo-info-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a2a5e; } /* Variante alinhada à direita — já fixada antes do hover, sem reflow */ .saldo-info-tooltip--left { left: auto; right: -4px; transform: none; } .saldo-info-tooltip--left::before { left: auto; right: 6px; transform: none; } .saldo-info-tooltip--left::after { left: auto; right: 7px; transform: none; } /* Delay de 500ms antes de aparecer */ .saldo-info-icon:hover .saldo-info-tooltip { opacity: 1; visibility: visible; transition: opacity 0.18s ease 0.5s, visibility 0s linear 0.5s; } /* ── BOTÃO FECHAR MÊS ── */ .btn-fechar-mes { width: 28px; height: 28px; border: none; border-radius: 50%; background: white; color: #1c3f91; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; position: relative; flex-shrink: 0; } .btn-fechar-mes:hover { background: #1c3f91; color: white; } .btn-fechar-mes:hover .btn-replicar-mes-tooltip { opacity: 1; visibility: visible; transition-delay: 0.5s; /* delay só na entrada */ } /* Estado: mês fechado — botão vira cadeado aberto (reabrir) */ .btn-fechar-mes.mes-fechado { background: #e8effe; color: #3a6edc; box-shadow: 0 4px 10px rgba(58,110,220,0.25); } .btn-fechar-mes.mes-fechado:hover { background: #3a6edc; color: white; } /* Banner mês fechado */ #mes-fechado-banner { display: none; position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 200; pointer-events: none; } #mes-fechado-banner.visivel { display: flex; animation: bannerEntrada 0.35s cubic-bezier(0.34,1.15,0.64,1) both; } @keyframes bannerEntrada { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .mes-fechado-inner { pointer-events: auto; display: flex; align-items: center; gap: 8px; background: rgba(10, 16, 45, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.09); border-radius: 100px; padding: 6px 10px 6px 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.06) inset; color: rgba(200,210,240,0.7); font-size: 10.5px; font-weight: 500; letter-spacing: 0.4px; white-space: nowrap; } /* Overlay de bloqueio sobre o conteúdo do mês fechado */ #mes-fechado-overlay { display: none; position: fixed; inset: 0; z-index: 50; pointer-events: none; } #mes-fechado-overlay.visivel { display: block; } /* Inputs/selects bloqueados no mês fechado */ body.mes-fechado .val-input, body.mes-fechado .linha select, body.mes-fechado .salario-input, body.mes-fechado .linha input[type=checkbox] { pointer-events: none; opacity: 0.6; cursor: default; } body.mes-fechado .btn-limpar-linha, body.mes-fechado .btn-replicar-linha, body.mes-fechado .btn-subcategoria-linha, body.mes-fechado .btn-confirmar-sal, body.mes-fechado .btn-replicar-mes, body.mes-fechado .reserva-card-btn { pointer-events: none; opacity: 0.38; cursor: default; } body.mes-fechado .select-banco-display { pointer-events: none; opacity: 0.6; cursor: default; } /* ── ÍCONE INFO NA % DE PREVISÃO DE SALDO ── */ /* Posicionado absolutamente no canto do card para não quebrar o text-align:center */ /* Row inline que agrupa % + ícone, centralizado no card */ /* Ícone logo à direita do valor principal, dentro do flex */ .previsao-pct-info-icon { flex-shrink: 0; position: relative; display: inline-flex; align-items: center; } /* ── Badge de tendência nos widgets compactos ── */ .anual-tendencia-badge { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 100px; white-space: nowrap; } .anual-tendencia-badge.tendencia-pos { color: #15803d; background: rgba(22,163,74,0.10); } .anual-tendencia-badge.tendencia-neg { color: #b91c1c; background: rgba(220,38,38,0.10); } body.dark .anual-tendencia-badge.tendencia-pos { color: #4ade80; background: rgba(74,222,128,0.12); } body.dark .anual-tendencia-badge.tendencia-neg { color: #f87171; background: rgba(248,113,113,0.12); } /* ══ POPUP RESUMO MENSAL ══ */ .resumo-metrica { background: #f5f8fe; border-radius: 12px; padding: 12px 10px; text-align: center; border: 1.5px solid #e4eaf8; } .resumo-metrica-label { font-size: 10.5px; font-weight: 700; color: #8a9cc8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; } .resumo-metrica-val { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 15px; font-weight: 700; color: #0f1f5c; } .resumo-metrica-val.verde { color: #16a34a; } .resumo-metrica-val.vermelho { color: #c0392b; } .resumo-metrica-val.azul { color: #1c3f91; } body.dark #aviso-sessao-expirada > div { background: #1a2f6e !important; box-shadow: 0 16px 56px rgba(0,0,0,0.45); } body.dark #aviso-sessao-expirada [style*="color:#0f1f5c"] { color: rgba(255,255,255,0.92) !important; } body.dark #aviso-sessao-expirada [style*="color:#5a6a8a"] { color: rgba(255,255,255,0.6) !important; } body.dark #popup-resumo-mes { background: #1a2f6e !important; border: 1px solid rgba(255,255,255,0.22) !important; box-shadow: 0 16px 56px rgba(0,0,0,0.45) !important; } body.dark #popup-resumo-header { border-bottom-color: rgba(255,255,255,0.08) !important; } body.dark #resumo-titulo-mes { color: rgba(255,255,255,0.92) !important; } body.dark .resumo-metrica-val { color: rgba(255,255,255,0.92); } body.dark .resumo-metrica-val.verde { color: #4ade80; } body.dark .resumo-metrica-val.vermelho { color: #f87171; } body.dark .resumo-metrica-val.azul { color: #7ab0ff; } body.dark .resumo-metrica { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); } body.dark .resumo-metrica-label { color: rgba(255,255,255,0.35); } body.dark #resumo-comparacao, body.dark #resumo-reserva-row { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; } /* Antes batia na string inteira "font-size:11px;color:#8a9cc8" — quebrava sempre que outra propriedade (ex: font-weight) aparecia inline entre o tamanho e a cor. Casando só pela cor, fica resistente a essas variações. */ body.dark #popup-resumo-mes [style*="color:#8a9cc8"] { color: rgba(255,255,255,0.35) !important; } body.dark #popup-resumo-mes [style*="color:#5a6a8a"] { color: rgba(255,255,255,0.5) !important; } body.dark #resumo-barra-gasto + div span { color: rgba(255,255,255,0.45) !important; } body.dark #popup-resumo-mes button[onclick="fecharPopupResumoMes()"] { border-color: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.55) !important; } /* ══ TOPNAV TABS ══ */ .topnav-tabs { display: flex; align-items: center; gap: 2px; margin-left: 20px; height: 100%; } .topnav-tab { background: transparent; border: none; border-radius: 0; color: rgba(255,255,255,0.56); font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12px; font-weight: 600; padding: 4px 14px 0; cursor: pointer; letter-spacing: 0.5px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; position: relative; transition: color 0.22s ease, transform 0.12s ease; -webkit-tap-highlight-color: transparent; } /* Feedback tátil de clique — leve "afundada", sem pílula/fundo */ .topnav-tab:active { transform: scale(0.97); } /* Sublinhado — barra sólida com brilho suave, cresce do centro pra fora (opacity+scaleX, que interpola de verdade) em vez de trocar de background instantaneamente. No hover de uma aba inativa, uma prévia bem discreta da própria linha aparece — sem pílula de fundo, só ela reagindo. */ .tab-indicator { display: block; width: calc(100% - 22px); height: 2px; border-radius: 99px; background: rgba(255,255,255,0.92); flex-shrink: 0; opacity: 0; transform: scaleX(0.3); transform-origin: center; box-shadow: 0 0 6px rgba(160,200,255,0.55), 0 0 14px rgba(120,170,255,0.22); transition: opacity 0.32s cubic-bezier(0.22,1,0.36,1), transform 0.38s cubic-bezier(0.22,1,0.36,1), background 0.2s ease, box-shadow 0.2s ease; } .topnav-tab:hover { color: rgba(255,255,255,0.72); } .topnav-tab:hover .tab-indicator { opacity: 0.4; transform: scaleX(0.55); background: rgba(255,255,255,0.6); box-shadow: none; } .topnav-tab.ativo { color: #fff; text-shadow: 0 0 8px rgba(160,200,255,0.35); } .topnav-tab.ativo .tab-indicator { opacity: 1; transform: scaleX(1); background: rgba(255,255,255,0.95); } .topnav-tab.ativo:hover .tab-indicator { opacity: 1; transform: scaleX(1); background: rgba(255,255,255,0.95); box-shadow: 0 0 6px rgba(160,200,255,0.55), 0 0 14px rgba(120,170,255,0.22); } /* ══ TELA DIÁRIO ══ */ /* ── 21. PÁGINA DIÁRIO ────────────────────────────────────────────────────── * Nova arquitetura: períodos de gasto independentes do mês. * ────────────────────────────────────────────────────────────────────── */ .diario-container { width: 100%; padding: 18px 20px 30px; box-sizing: border-box; } .diario-header-row { display: flex; align-items: center; justify-content: space-between; margin-top: 23px; margin-bottom: 20px; gap: 16px; position: relative; } /* Centraliza o nav de mês exatamente como no Mensal */ .diario-mes-nav-wrapper { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; } .diario-titulo { font-size: 22px; font-weight: 700; color: #0f1f5c; margin: 0; font-family: 'Outfit', 'Century Gothic', sans-serif; } /* ── Navegação de mês no Diário (igual ao Mensal) ── */ .diario-mes-nav { display: flex; align-items: center; gap: 10px; } #diario-mes-dropdown-wrap { position: relative; } #diario-titulomes { font-size: 18px; font-weight: 700; color: #111; min-width: 140px; text-align: center; cursor: pointer; user-select: none; transition: color 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-family: 'Outfit', 'Century Gothic', sans-serif; } #diario-titulomes:hover { color: #1c3f91; } #diario-titulomes::after { content: ""; display: inline-block; width: 13px; height: 13px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%231c3f91' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; transition: transform 0.22s ease, opacity 0.2s; opacity: 0.45; margin-top: 3px; flex-shrink: 0; } #diario-titulomes:hover::after { opacity: 0.85; } #diario-mes-dropdown-wrap.aberto #diario-titulomes::after { transform: rotate(180deg); opacity: 1; } #diario-mes-dropdown-wrap.aberto #diario-titulomes { color: #1c3f91; } #diario-mes-dropdown-list { display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid rgba(58, 110, 220, 0.35); border-radius: 8px; box-shadow: 0 6px 20px rgba(28, 63, 145, 0.13), 0 1px 4px rgba(28,63,145,0.08); z-index: 999; overflow: hidden; min-width: 140px; } #diario-mes-dropdown-list.open { display: block; } .diario-mes-dropdown-item { padding: 7px 18px; font-size: 12px; font-family: inherit; cursor: pointer; background: #fff; color: #1a2a5e; text-align: center; white-space: nowrap; transition: background 0.1s, color 0.1s; } .diario-mes-dropdown-item:hover { background: #eef3fd; color: #1c3f91; } .diario-mes-dropdown-item.ativo { background: #d4e3fb; color: #1c3f91; font-weight: 700; border-left: 3px solid #3a6edc; padding-left: calc(16px - 3px); } .diario-mes-dropdown-item.hoje:not(.ativo) { color: #3a6edc; font-weight: 600; border-left: 3px solid rgba(58,110,220,0.3); padding-left: calc(16px - 3px); } .diario-nav-periodos { display: flex; gap: 6px; } .diario-data-atual { font-size: 12px; font-weight: 600; color: #8a9cc8; background: #f0f4fb; padding: 6px 14px; border-radius: 20px; border: 1px solid #dce6f8; } /* ── Estado vazio ── */ #diario-vazio-state { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 280px); } .diario-vazio-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; max-width: 380px; width: 100%; text-align: center; background: linear-gradient(160deg, rgba(255,255,255,0.92) 0%, rgba(236,243,255,0.75) 100%); border: 1px solid rgba(58,110,220,0.14); border-radius: 22px; padding: 44px 36px 40px; box-shadow: 0 4px 28px rgba(28,63,145,0.09), inset 0 1px 0 rgba(255,255,255,0.9); } .diario-vazio-icone { width: 80px; height: 80px; border-radius: 22px; background: linear-gradient(135deg, rgba(28,63,145,0.08), rgba(58,110,220,0.14)); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(58,110,220,0.13); } .diario-vazio-titulo { font-size: 16px; font-weight: 700; color: #0f1f5c; font-family: 'Outfit', 'Century Gothic', sans-serif; letter-spacing: 0.1px; } .diario-vazio-desc { font-size: 12.5px; color: #8a9cc8; line-height: 1.65; max-width: 260px; font-family: 'Outfit', 'Century Gothic', sans-serif; } .diario-vazio-btn { margin-top: 4px; padding: 11px 28px; border-radius: 12px; border: none; background: linear-gradient(135deg, #1c3f91, #3a6edc); color: #fff; font-size: 13px; font-weight: 700; font-family: 'Outfit', 'Century Gothic', sans-serif; cursor: pointer; box-shadow: 0 4px 16px rgba(58,110,220,0.32); transition: opacity 0.15s, transform 0.15s; letter-spacing: 0.2px; } .diario-vazio-btn:hover { opacity: 0.9; transform: translateY(-1px); } .diario-vazio-btn:active { transform: translateY(0); } /* ── Colunas ── */ .diario-ativo-state { display: flex; flex-direction: column; align-items: stretch; gap: 16px; width: 100%; } .diario-colunas { display: flex; flex-direction: row; gap: 24px; align-items: flex-start; width: 100%; } .diario-periodo-wrap { flex: 1 1 0; min-width: 0; transition: opacity 0.3s, filter 0.3s; } .diario-periodo-wrap.unico { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); margin: 0; } /* ── Header do período ── */ .diario-periodo-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 0 2px; } .diario-periodo-label { font-size: 12px; font-weight: 700; font-family: 'Outfit', 'Century Gothic', sans-serif; color: #1a2a5e; white-space: nowrap; } .diario-periodo-right-box { display: flex; align-items: center; gap: 6px; } .diario-periodo-valor { font-size: 12px; font-weight: 600; color: #5a6a8a; white-space: nowrap; } .diario-periodo-acoes { display: flex; gap: 2px; align-items: center; } .diario-periodo-btn-edit, .diario-periodo-btn-del { width: 24px; height: 24px; border-radius: 6px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; transition: background 0.15s, color 0.15s; } .diario-periodo-btn-edit { color: #c0c8d8 !important; } .diario-periodo-btn-edit:hover { background: rgba(58,110,220,0.12); color: #3a6edc !important; } .diario-periodo-btn-del { color: #c0c8d8 !important; } .diario-periodo-btn-del:hover { background: rgba(192,57,43,0.12); color: #c0392b !important; } /* ── Tabela ── */ .diario-table-wrap { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 16px rgba(28,63,145,0.08); border: 1px solid #dce6f8; margin-top: 0; } .diario-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: 'Outfit', 'Century Gothic', sans-serif; } .diario-table thead tr { background: linear-gradient(to right, #0a1540, #1c3f91, #3a6edc); } .diario-table th { background: transparent; color: rgba(255,255,255,0.9); font-weight: 700; font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase; padding: 8px 10px; text-align: center; white-space: nowrap; } .diario-table td { padding: 5px 8px; text-align: center; border-bottom: 1px solid #eef2fb; color: #1a2a5e; background: #fff; height: 34px; vertical-align: middle; } .diario-table tbody tr:last-child td { border-bottom: none; } .diario-table tbody tr:hover td { background: #f5f8ff; } /* Destaque do dia atual */ .diario-table tbody tr.diario-row-hoje td { background: #f5f8ff; } .diario-table tbody tr.diario-row-hoje td:first-child { border-left: 3px solid #1c3f91; font-weight: 700; color: #1c3f91; } .diario-table tbody tr.diario-row-hoje:hover td { background: #f5f8ff; } .diario-table th:nth-child(1), .diario-table td:nth-child(1) { width: 26%; } .diario-table th:nth-child(2), .diario-table td:nth-child(2) { width: 18%; } .diario-table th:nth-child(3), .diario-table td:nth-child(3) { width: 28%; } .diario-table th:nth-child(4), .diario-table td:nth-child(4) { width: 28%; } .diario-table td.diario-td-disponivel { font-weight: 600; color: #7aab7a; } .diario-table td.diario-td-disponivel.negativo { color: #c0392b; } .diario-total-row { background: linear-gradient(to right, #0a1540, #1c3f91, #3a6edc); } .diario-total-row td { background: transparent !important; color: #fff !important; font-weight: 700; font-size: 12px; } /* ── Célula saída: input + botão × lado a lado ── */ .diario-saida-cel { position: relative; display: flex; align-items: center; justify-content: center; } .diario-saida-input { width: 90px; padding: 3px 6px; border: 1.5px solid #a3c0ef; border-radius: 7px; font-size: 12px; font-family: inherit; text-align: center; color: #c0392b; font-weight: 600; background: #fff; transition: border-color 0.15s; outline: none; } .diario-saida-input:focus { border-color: #3a6edc; } .diario-limpar-saida { position: absolute; right: 4px; background: none; border: none; color: #c0c8e0; font-size: 14px; cursor: pointer; padding: 0 2px; line-height: 1; opacity: 0; transition: opacity 0.15s, color 0.15s; } .diario-saida-cel:hover .diario-limpar-saida { opacity: 1; } .diario-limpar-saida:hover { color: #c0392b; } /* ── Período encerrado ── */ .diario-periodo-encerrado { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 6px 12px; background: #f0f4fb; border-radius: 8px; font-size: 11.5px; color: #8a9cc8; font-weight: 600; } .diario-encerrado-sobrou { color: #1c6e1c; font-weight: 700; } /* ── Botão adicionar segundo período ── */ .diario-add-segundo { margin-top: 6px; width: 100%; background: none; border: none; padding: 6px 0; font-size: 11px; font-weight: 600; font-family: inherit; color: #8a9cc8; cursor: pointer; transition: color 0.15s; box-sizing: border-box; text-align: center; } .diario-add-segundo:hover { color: #3a6edc; } /* ══ BOTÃO SIMULADOR ANUAL ══ */ .btn-simulador-anual { display: flex; align-items: center; gap: 4px; background: none; border: 1.5px solid rgba(28,63,145,0.18); border-radius: 6px; color: #8a9cc8; font-size: 9px; font-weight: 700; font-family: inherit; letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 7px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; position: relative; overflow: visible; } .btn-simulador-anual-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #0a1a3a, #1a2f6e); color: #a8c4ff; border: 1px solid rgba(58,110,220,0.45); border-radius: 10px; padding: 8px 12px; font-size: 11px; font-weight: 600; font-family: "Century Gothic", "Segoe UI", Arial, sans-serif; letter-spacing: 0.2px; white-space: nowrap; box-shadow: 0 6px 24px rgba(0,0,0,0.35); pointer-events: none; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.12s ease, visibility 0.12s ease; transition-delay: 0s; text-transform: none; } .btn-simulador-anual-tooltip::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #1a2f6e; border-right: 1px solid rgba(58,110,220,0.45); border-bottom: 1px solid rgba(58,110,220,0.45); } .btn-simulador-anual:hover .btn-simulador-anual-tooltip { opacity: 1; visibility: visible; transition-delay: 0.5s; } .btn-simulador-anual:hover { background: rgba(28,63,145,0.07); color: #1c3f91; border-color: rgba(28,63,145,0.35); } /* ══ INPUTS DO SIMULADOR ══ */ .sim-input { border: none; outline: none; background: transparent; font-size: 12.5px; font-weight: 700; font-family: inherit; text-align: right; width: 90px; padding: 2px 4px; border-radius: 4px; transition: background 0.12s; } .sim-input-entrada { color: #1f7a1f; } .sim-input-saida { color: rgb(201,0,0); } /* ══ SIMULADOR — border-radius cabeçalho e total ══ */ #simulador-table thead tr th:first-child { border-radius: 10px 0 0 0; } #simulador-table thead tr th:last-child { border-radius: 0 10px 0 0; } #simulador-table tfoot tr td:first-child { border-radius: 0 0 0 10px; } #simulador-table tfoot tr td:last-child { border-radius: 0 0 10px 0; } /* ══ SIMULADOR — inputs estilo diário ══ */ .sim-input { border: none; outline: none; background: transparent; font-size: 12.5px; font-weight: 700; font-family: inherit; text-align: center; width: 90px; padding: 2px 4px; border-radius: 4px; } .sim-input-entrada { color: #1f7a1f; } .sim-input-entrada::placeholder { color: rgba(31,122,31,0.35); } .sim-input-saida { color: rgb(201,0,0); } .sim-input-saida::placeholder { color: rgba(201,0,0,0.35); } /* ══ SIMULADOR — colunas fixas ══ */ #simulador-table { table-layout: fixed; } /* Todas as células do simulador: padding lateral zerado, conteúdo centralizado */ #simulador-table th, #simulador-table td { padding-left: 0 !important; padding-right: 0 !important; text-align: center !important; } #simulador-table .sim-input { width: 80%; box-sizing: border-box; text-align: center; } /* ══ SIMULADOR — bordas das linhas ══ */ #simulador-tbody tr { border-bottom: 1px solid #eef3fd; transition: background 0.12s; } #simulador-tbody tr:last-child { border-bottom: none; } #simulador-tbody tr:hover { background: #f5f8fd; } .sim-cel-mes { color: #1a2a5e; } .sim-cel-inicial { color: #6a7aaa; } /* ══ SIMULADOR — célula: input centralizado, botões absolutos nos cantos ══ */ .sim-td-cel { padding: 4px 0 !important; overflow: visible; position: relative; } .sim-td-cel-inner { display: flex; align-items: center; justify-content: center; overflow: visible; width: 100%; } /* ══ SIMULADOR — botões ⟳ e × em position absolute, não afetam centralização ══ */ .sim-limpar-btn, .sim-replicar-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #aab8d8; font-size: 12px; cursor: pointer; line-height: 1; padding: 0 2px; margin: 0; overflow: visible; opacity: 0; pointer-events: none; transition: opacity 0.15s, color 0.15s; } .sim-replicar-btn { left: 2px; } .sim-limpar-btn { right: 2px; } /* variantes de entrada ficam nos mesmos cantos */ .sim-td-cel:hover .sim-limpar-btn, .sim-td-cel:hover .sim-replicar-btn { opacity: 1; pointer-events: all; } .sim-limpar-btn:hover { color: rgb(201,0,0); } .sim-replicar-btn:hover { color: #1c3f91; } .sim-limpar-entrada:hover { color: #1f7a1f !important; } .sim-replicar-entrada:hover { color: #1f7a1f !important; } /* ══ SIMULADOR — tooltips ══ */ .sim-tooltip { display: block; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); border-radius: 10px; padding: 8px 12px; white-space: nowrap; box-shadow: 0 6px 24px rgba(0,0,0,0.35); pointer-events: none; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.12s ease, visibility 0.12s ease; transition-delay: 0s; } .sim-tooltip::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; } .sim-tooltip-rep { background: linear-gradient(135deg, #0a1a3a, #1a2f6e); color: #a8c4ff; border: 1px solid rgba(58,110,220,0.45); } .sim-tooltip-rep::after { background: #1a2f6e; border-right: 1px solid rgba(58,110,220,0.45); border-bottom: 1px solid rgba(58,110,220,0.45); } .sim-tooltip-del { background: linear-gradient(135deg, #2c0a0a, #4a1010); color: #ff8a80; border: 1px solid rgba(231,76,60,0.4); } .sim-tooltip-del::after { background: #2c0a0a; border-right: 1px solid rgba(231,76,60,0.4); border-bottom: 1px solid rgba(231,76,60,0.4); } button:hover .sim-tooltip { opacity: 1; visibility: visible; transition-delay: 0.5s; } /* ══ SIMULADOR — thead overflow visible para tooltips não serem cortados ══ */ #simulador-table thead, #simulador-table thead tr, #simulador-table thead th { overflow: visible; } /* Botões do thead sempre visíveis */ #simulador-table thead button { position: relative !important; overflow: visible !important; opacity: 1 !important; pointer-events: all !important; } /* ══ TOOLTIP GLOBAL DO THEAD DO SIMULADOR ══ */ #sim-thead-tooltip { position: fixed; z-index: 99999; border-radius: 10px; padding: 6px 10px; white-space: nowrap; font-size: 11px; font-weight: 600; font-family: "Century Gothic", "Segoe UI", Arial, sans-serif; letter-spacing: 0.2px; pointer-events: none; box-shadow: 0 6px 24px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; transition: opacity 0.12s ease, visibility 0.12s ease; transform: none; /* posição calculada via JS — não usar translateX */ } #sim-thead-tooltip.show { opacity: 1; visibility: visible; } #sim-thead-tooltip.rep { background: linear-gradient(135deg, #0a1a3a, #1a2f6e); color: #a8c4ff; border: 1px solid rgba(58,110,220,0.45); } #sim-thead-tooltip.del { background: linear-gradient(135deg, #2c0a0a, #4a1010); color: #ff8a80; border: 1px solid rgba(231,76,60,0.4); } #sim-thead-tooltip::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; } #sim-thead-tooltip.rep::after { background: #1a2f6e; border-right: 1px solid rgba(58,110,220,0.45); border-bottom: 1px solid rgba(58,110,220,0.45); } #sim-thead-tooltip.del::after { background: #2c0a0a; border-right: 1px solid rgba(231,76,60,0.4); border-bottom: 1px solid rgba(231,76,60,0.4); } /* ══ DIÁRIO — mês fechado ══ */ .diario-bloqueado td { opacity: 0.55; } .diario-saida-input:disabled { cursor: not-allowed; background: transparent; color: inherit; pointer-events: none; } /* ══ DIÁRIO — banner mês fechado (mesmo visual do Mensal) ══ */ #diario-banner-fechado { display: none; position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 200; pointer-events: none; } #diario-banner-fechado.visivel { display: flex; animation: bannerEntrada 0.35s cubic-bezier(0.34,1.15,0.64,1) both; } /* ══ DIÁRIO — linhas bloqueadas ══ */ .diario-bloqueado td { opacity: 0.55; } .diario-saida-input:disabled { cursor: not-allowed; background: transparent; color: inherit; pointer-events: none; } /* ══ BANNER MÊS FECHADO — botão Reabrir ══ */ .banner-fechado-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 100px; color: rgba(200,210,240,0.85); font-size: 9.5px; font-weight: 600; font-family: inherit; letter-spacing: 0.5px; padding: 3px 11px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .banner-fechado-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.28); color: white; } /* ── TOUR: animação de entrada do highlight ── */ @keyframes tourHighlightIn { from { opacity: 0; } to { opacity: 1; } } .tour-dyn { animation: tourHighlightIn 0.22s ease forwards; } /* ── TOUR: crossfade do conteúdo do balão ── */ #tour-titulo, #tour-desc, #tour-progresso { transition: opacity 0.18s ease; } #tour-balao.conteudo-saindo #tour-titulo, #tour-balao.conteudo-saindo #tour-desc, #tour-balao.conteudo-saindo #tour-progresso { opacity: 0; } /* ── TOUR: bloqueia interação com tudo abaixo do overlay ── */ body.tour-ativo input, body.tour-ativo textarea, body.tour-ativo button:not(#tour-btn-ant):not(#tour-btn-prox):not(#tour-btn-pular):not(#tour-btn-indice):not(.tour-indice-item):not(.tour-indice-fechar), body.tour-ativo .select-banco-display, body.tour-ativo .select-banco-wrap { pointer-events: none !important; } /* Força dropdowns reais abaixo do overlay durante o tour */ body.tour-ativo .select-banco-list { z-index: 1 !important; pointer-events: none !important; display: none !important; } /* ══════════════════════════════════════ SPLASH SCREEN ══════════════════════════════════════ */ #splash-screen { position: fixed; inset: 0; /* Fundo navy — mesma cor da topnav do app */ background: linear-gradient(150deg, #0a1540 0%, #0f1f5c 40%, #1c3f91 100%); display: flex; align-items: center; justify-content: center; z-index: 999999; transition: opacity 0.6s ease, transform 0.6s ease; overflow: hidden; } #splash-screen.saindo { opacity: 0; transform: scale(1.04); pointer-events: none; } /* Canvas partículas */ #splash-canvas { position: absolute; inset: 0; pointer-events: none; } /* Glows — azul da paleta, mais intensos no escuro */ #splash-glow-1 { position: absolute; width: 650px; height: 650px; border-radius: 50%; background: radial-gradient(circle, rgba(58,110,220,0.22) 0%, transparent 65%); top: -180px; left: -180px; animation: splash-glow-pulse 5s ease-in-out infinite alternate; pointer-events: none; } #splash-glow-2 { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(28,63,145,0.30) 0%, transparent 65%); bottom: -140px; right: -120px; animation: splash-glow-pulse 5s ease-in-out infinite alternate-reverse; pointer-events: none; } @keyframes splash-glow-pulse { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.14); opacity: 1; } } /* ── LAYOUT SPLIT ── */ #splash-layout { position: relative; z-index: 2; display: flex; align-items: center; width: 100%; height: 100%; animation: card-enter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes card-enter { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } /* ── LADO ESQUERDO ── */ #splash-left { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; flex: 1 1 50%; padding: 60px 56px; height: 100%; box-sizing: border-box; position: relative; } /* ── SEPARADOR VERTICAL ── */ #splash-divider-v { width: 1px; height: 60%; background: linear-gradient(180deg, transparent, rgba(220,230,248,0.2) 20%, rgba(220,230,248,0.2) 80%, transparent); flex-shrink: 0; align-self: center; } /* ── LADO DIREITO: login ── */ #splash-right { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 60px 80px 60px 64px; height: 100%; box-sizing: border-box; } /* ── PAINÉIS DE AUTH ── */ .auth-panel { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 16px; animation: fade-up 0.4s cubic-bezier(0.22,1,0.36,1) both; } /* ── "Verificando sessão" — mesma largura/alinhamento do .auth-panel * (herda), só centraliza o conteúdo em vez de alinhar à esquerda como * o formulário de login. v1 (2026-08). ── */ #verificando-sessao-panel { align-items: center; text-align: center; padding: 40px 0; } #verificando-sessao-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.22); border-top-color: #fff; animation: verificando-sessao-girar 0.8s linear infinite; } #verificando-sessao-texto { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.75); margin: 0; letter-spacing: 0.2px; } @keyframes verificando-sessao-girar { to { transform: rotate(360deg); } } .auth-header { text-align: left; margin-bottom: 4px; } .auth-header::after { content: ''; display: block; width: 36px; height: 3px; background: linear-gradient(90deg, #3a6edc, rgba(58,110,220,0.3)); border-radius: 2px; margin-top: 10px; } .auth-titulo { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 26px; font-weight: 800; color: #fff; margin: 0 0 6px; letter-spacing: -0.5px; } .auth-subtitulo { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 13.5px; color: rgba(160,185,230,0.65); margin: 0; } /* Botão social (Google) */ .auth-btn-social { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(220,230,248,0.2); border-radius: 12px; color: rgba(220,232,255,0.9); font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.18s, border-color 0.18s, transform 0.15s; letter-spacing: 0.1px; } .auth-btn-social:hover { background: rgba(255,255,255,0.14); border-color: rgba(220,230,248,0.35); transform: translateY(-1px); } .auth-btn-social:active { transform: scale(0.98); } /* ── Escolha de perfil de renda (pós-cadastro) ── */ .perfil-renda-opcoes { display: flex; flex-direction: column; gap: 12px; } .perfil-renda-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(220,230,248,0.16); border-radius: 14px; cursor: pointer; text-align: left; transition: background 0.18s, border-color 0.18s, transform 0.15s; } .perfil-renda-card:hover { background: rgba(58,110,220,0.14); border-color: rgba(120,160,255,0.4); transform: translateY(-1px); } .perfil-renda-card:active { transform: scale(0.98); } .perfil-renda-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: rgba(58,110,220,0.18); color: #8ab0ff; display: flex; align-items: center; justify-content: center; } .perfil-renda-text { flex: 1; display: flex; flex-direction: column; gap: 3px; } .perfil-renda-text strong { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 14px; font-weight: 700; color: #fff; } .perfil-renda-text span { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12px; color: rgba(160,185,230,0.65); line-height: 1.4; } .perfil-renda-chevron { flex-shrink: 0; color: rgba(160,185,230,0.45); transition: transform 0.18s, color 0.18s; } .perfil-renda-card:hover .perfil-renda-chevron { color: #8ab0ff; transform: translateX(2px); } /* Divisor "ou" */ .auth-or { display: flex; align-items: center; gap: 10px; } .auth-or span { flex: 1; height: 1px; background: rgba(220,230,248,0.15); } .auth-or p { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 11px; font-weight: 600; color: rgba(160,185,230,0.5); white-space: nowrap; margin: 0; letter-spacing: 0.3px; } /* Campo */ .auth-field-wrap { display: flex; flex-direction: column; gap: 6px; } .auth-label { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 11.5px; font-weight: 700; color: rgba(180,205,245,0.7); letter-spacing: 0.4px; text-transform: uppercase; } .auth-input-wrap { position: relative; display: flex; align-items: center; } .auth-input-icon { position: absolute; left: 12px; color: rgba(160,185,230,0.45); pointer-events: none; flex-shrink: 0; } .auth-input { width: 100%; padding: 12px 12px 12px 38px; background: rgba(255,255,255,0.07); border: 1px solid rgba(220,230,248,0.15); border-radius: 11px; color: rgba(220,232,255,0.92); font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 13.5px; font-weight: 500; outline: none; transition: border-color 0.18s, background 0.18s; box-sizing: border-box; } .auth-input::placeholder { color: rgba(160,185,230,0.35); } .auth-input:focus { border-color: rgba(58,110,220,0.6); background: rgba(255,255,255,0.10); } /* ── Autofill (senha salva do Google/navegador) ── O navegador ignora "background"/"color"/"font-family" normais num campo autopreenchido e aplica o próprio estilo por cima (fundo branco/amarelo, fonte genérica do sistema) — é assim que ele sinaliza visualmente "isso foi preenchido automaticamente", e não dá pra desligar isso, só sobrescrever. O truque: "background-color" não pega em campo autofill, mas "box-shadow inset" gigante sim — pinta por cima do fundo que o navegador força, sem mudar a propriedade que ele está de olho. -webkit-text-fill-color faz o mesmo pro texto (cor normal também é ignorada em autofill). "transition" com delay enorme é outro truque clássico: atrasa a MUDANÇA de cor do autofill do navegador o suficiente pra nunca chegar a aparecer, nem por um instante, antes do nosso estilo entrar. */ .auth-input:-webkit-autofill, .auth-input:-webkit-autofill:hover, .auth-input:-webkit-autofill:focus, .auth-input:-webkit-autofill:active { -webkit-text-fill-color: rgba(220,232,255,0.92) !important; -webkit-box-shadow: 0 0 0 1000px #182552 inset !important; box-shadow: 0 0 0 1000px #182552 inset !important; caret-color: rgba(220,232,255,0.92); font-family: 'Outfit', 'Century Gothic', sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s; } .auth-toggle-senha { position: absolute; right: 10px; background: none; border: none; cursor: pointer; color: rgba(160,185,230,0.4); padding: 2px; display: flex; align-items: center; transition: color 0.15s; } .auth-toggle-senha:hover { color: rgba(160,185,230,0.8); } /* Link "Esqueci minha senha" */ .auth-link-inline { background: none; border: none; cursor: pointer; font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 11.5px; color: rgba(120,165,255,0.7); padding: 0; text-align: right; align-self: flex-end; transition: color 0.15s; } .auth-link-inline:hover { color: rgba(120,165,255,1); } /* Botão primário */ .auth-btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 0; background: linear-gradient(135deg, #1c3f91, #3a6edc); border: none; border-radius: 12px; color: #fff; font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: 0.2px; box-shadow: 0 4px 20px rgba(58,110,220,0.45); transition: filter 0.18s, transform 0.15s, box-shadow 0.18s; margin-top: 2px; } .auth-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 28px rgba(58,110,220,0.55); } .auth-btn-primary:active { transform: scale(0.98) translateY(0); } /* Rodapé do form */ .auth-footer-text { text-align: center; font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12.5px; color: rgba(160,185,230,0.6); margin: 0; } .auth-link { background: none; border: none; cursor: pointer; font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12.5px; font-weight: 700; color: rgba(100,160,255,0.9); padding: 0; transition: color 0.15s; } .auth-link:hover { color: #fff; } /* Erro de validação */ .auth-erro { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12px; color: #ff8a80; text-align: center; padding: 8px 12px; background: rgba(192,57,43,0.12); border: 1px solid rgba(192,57,43,0.25); border-radius: 8px; display: none; } .auth-erro.visivel { display: block; } /* Sucesso */ .auth-sucesso { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12.5px; color: #80ffb0; text-align: center; padding: 8px 12px; background: rgba(31,122,31,0.15); border: 1px solid rgba(31,122,31,0.3); border-radius: 8px; display: none; } .auth-sucesso.visivel { display: block; } /* ── RESPONSIVO: mobile ── */ @media (max-width: 720px) { #splash-layout { flex-direction: column; } #splash-divider-v { display: none; } #splash-left { flex: none; padding: 40px 32px 24px; gap: 14px; height: auto; } #splash-features { display: none; } #splash-right { flex: none; padding: 24px 32px 48px; height: auto; width: 100%; justify-content: flex-start; } } /* ── ANIMAÇÃO TROCA DE PAINÉIS ── */ @keyframes auth-panel-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } .auth-panel-entering { animation: auth-panel-in 0.3s cubic-bezier(0.22,1,0.36,1) both; } /* ══════════════════════════════════════════════════════════════ TELA DE APELIDO — "quem está usando?" (Netflix/Prime), tela cheia dentro do #splash-screen (mesmo fundo/partículas/glows da tela de login — ver #splash-screen mais abaixo). display:none por padrão; _presencaMostrarTelaApelido()/_presencaFecharTelaApelido() (presenca.js) alternam com #splash-layout, sempre um dos dois visível por vez, nunca os dois juntos. ══════════════════════════════════════════════════════════════ */ #apelido-panel-fechar { position: fixed; top: 28px; right: 32px; z-index: 3; background: none; border: none; color: rgba(255,255,255,0.4); font-size: 24px; cursor: pointer; line-height: 1; padding: 10px; transition: color 0.15s; } #apelido-panel-fechar:hover { color: rgba(255,255,255,0.85); } #apelido-panel { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 36px; width: 100%; max-width: 760px; padding: 40px 24px; box-sizing: border-box; position: relative; z-index: 2; animation: fade-up 0.5s cubic-bezier(0.22,1,0.36,1) both; } .apelido-panel-icone { display: flex; justify-content: center; } .apelido-panel-icone svg { width: 52px; height: 52px; } .apelido-panel-titulo { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -0.5px; text-align: center; } .apelido-panel-sub { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 15px; color: rgba(180,200,240,0.55); text-align: center; max-width: 400px; line-height: 1.55; margin-top: -20px; } .apelido-panel-erro { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 13.5px; color: #ff8a80; text-align: center; max-width: 400px; line-height: 1.55; background: rgba(192,57,43,0.14); border: 1px solid rgba(192,57,43,0.3); border-radius: 10px; padding: 10px 16px; } /* Grid de avatares — estilo "quem está usando?": um círculo com a inicial por perfil, cor fixa por nome (hash simples, ver _presencaCorParaApelido em presenca.js), sem precisar digitar nada pra reusar um perfil já existente. */ .apelido-panel-grid { display: none; align-items: flex-end; gap: 56px; flex-wrap: wrap; justify-content: center; } .apelido-avatar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; cursor: pointer; width: 132px; } .apelido-avatar-circulo { width: 128px; height: 128px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 46px; font-weight: 700; font-family: 'Outfit', 'Century Gothic', sans-serif; border: 4px solid transparent; box-shadow: 0 8px 30px rgba(0,0,0,0.35); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, filter 0.18s ease; } .apelido-avatar:hover .apelido-avatar-circulo { transform: translateY(-4px) scale(1.05); } .apelido-avatar.selecionado .apelido-avatar-circulo { border-color: rgba(255,255,255,0.85); } .apelido-avatar-nome { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.65); max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s ease; } .apelido-avatar.selecionado .apelido-avatar-nome, .apelido-avatar:hover .apelido-avatar-nome { color: #fff; } .apelido-avatar.selecionado .apelido-avatar-nome { font-weight: 700; } /* Avatar "+" — cadastrar um perfil novo (só existe se o roster tiver vaga; ver _presencaRenderizarGridApelido, que simplesmente não cria esse tile quando já tem 3). Peso visual bem menor que os avatares reais de propósito — precisa ler como "vaga vazia". */ .apelido-avatar-circulo-add { background: transparent; color: rgba(255,255,255,0.4); border: 2.5px dashed rgba(255,255,255,0.3); box-shadow: none; font-size: 40px; font-weight: 400; } .apelido-avatar-novo:hover .apelido-avatar-circulo-add { border-color: rgba(255,255,255,0.6); color: rgba(255,255,255,0.85); transform: translateY(-4px); } .apelido-avatar-novo .apelido-avatar-nome { color: rgba(255,255,255,0.45); } .apelido-avatar-novo:hover .apelido-avatar-nome { color: rgba(255,255,255,0.85); } /* Perfil ocupado — alguém (você ou outra pessoa) está conectado com esse apelido AGORA. Continua clicável (pra explicar o motivo, ver _presencaRenderizarGridApelido), mas visualmente apagado. Pontinho verde no canto = mesmo sinal de "online" já usado nos badges da topnav. */ .apelido-avatar.ocupado .apelido-avatar-circulo { opacity: 0.4; filter: grayscale(60%); } .apelido-avatar.ocupado:hover .apelido-avatar-circulo { transform: none; } .apelido-avatar.ocupado .apelido-avatar-nome { color: rgba(255,255,255,0.32); } .apelido-online-dot { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: #4ade80; border: 3px solid #0f1f5c; } /* Botão de excluir (×) no canto de cada avatar — some sozinho se esse apelido estiver "ocupado" (ver acima). Confirmação em 2 cliques: o primeiro clique vira um ✓ vermelho por alguns segundos, só o segundo clique de fato apaga. */ .apelido-excluir { position: absolute; top: -6px; left: -6px; width: 30px; height: 30px; border-radius: 50%; background: rgba(10,21,64,0.92); border: 1.5px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.55); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.3); opacity: 0; transform: scale(0.8); transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .apelido-avatar:hover .apelido-excluir { opacity: 1; transform: scale(1); } .apelido-excluir:hover { background: #c0392b; border-color: #c0392b; color: #fff; } .apelido-excluir.confirmando { opacity: 1; transform: scale(1); background: #c0392b; border-color: #c0392b; color: #fff; } /* Botão de editar (lápis) — mesmo padrão visual do × de excluir, no canto oposto (topo-direita). Disponível em QUALQUER avatar do roster, mesmo o seu ou de outra pessoa, mesmo online agora — diferente de excluir, editar não é destrutivo, não precisa da mesma trava de "ocupado". */ .apelido-editar { position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%; background: rgba(10,21,64,0.92); border: 1.5px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.3); opacity: 0; transform: scale(0.8); transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .apelido-avatar:hover .apelido-editar { opacity: 1; transform: scale(1); } .apelido-editar:hover { background: #3a6edc; border-color: #3a6edc; color: #fff; } /* Cadastro de perfil novo — só aparece pro primeiro uso da conta (roster vazio) ou ao clicar em "+". */ #apelido-panel-novo { display: none; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 360px; } /* Preview de cor — igual ao avatar de verdade (círculo com a letra dentro), com um "lápis" sobreposto no canto, no mesmo padrão visual de "editar foto de perfil" que a maioria dos apps usa — deixa claro que aquele círculo específico é a cor de fundo do avatar, e que dá pra tocar nele pra mudar. Mesmo formulário serve pra criar (_presencaMostrarNovo) e editar (_presencaMostrarEdicao). */ .apelido-cor-preview { width: 84px; height: 84px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.28); cursor: pointer; padding: 0; position: relative; display: flex; align-items: center; justify-content: center; font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 30px; font-weight: 700; color: #fff; transition: border-color 0.15s, transform 0.15s; } .apelido-cor-preview:hover { border-color: rgba(255,255,255,0.65); transform: scale(1.04); } .apelido-cor-preview-lapis { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%; background: #16233f; border: 2px solid rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.15s, border-color 0.15s; } .apelido-cor-preview:hover .apelido-cor-preview-lapis { background: #3a6edc; border-color: #3a6edc; } .apelido-cor-preview-dica { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12px; font-weight: 600; color: rgba(160,185,230,0.55); text-align: center; margin-top: -6px; } .apelido-panel-input { width: 100%; box-sizing: border-box; padding: 14px 16px; background: rgba(255,255,255,0.07); border: 1px solid rgba(220,230,248,0.2); border-radius: 12px; color: rgba(220,232,255,0.92); font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 16px; outline: none; text-align: center; transition: border-color 0.18s, background 0.18s; } .apelido-panel-input::placeholder { color: rgba(160,185,230,0.35); } .apelido-panel-input:focus { border-color: rgba(58,110,220,0.6); background: rgba(255,255,255,0.10); } .apelido-panel-confirmar { width: 100%; padding: 14px 0; background: linear-gradient(135deg, #1c3f91, #3a6edc); border: none; border-radius: 12px; color: #fff; font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px rgba(58,110,220,0.4); transition: filter 0.18s, transform 0.15s; } .apelido-panel-confirmar:hover { filter: brightness(1.1); transform: translateY(-1px); } .apelido-panel-link { background: none; border: none; color: rgba(160,185,230,0.6); font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px; transition: color 0.15s; } .apelido-panel-link:hover { color: #fff; } /* Headline de impacto */ #splash-headline { animation: fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.2s; opacity: 0; animation-fill-mode: forwards; } #splash-headline-text { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 34px; font-weight: 800; color: #ffffff; letter-spacing: -0.8px; margin: 0 0 8px; line-height: 1.18; } #splash-title-accent { color: #3a6edc; } #splash-headline-sub { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 13px; font-weight: 400; color: rgba(180,200,240,0.5); margin: 0; letter-spacing: 0.2px; } /* Mockup do app */ #splash-mockup { width: 100%; max-width: 500px; animation: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.32s; opacity: 0; animation-fill-mode: forwards; } #splash-mockup-svg { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 20px 60px rgba(5,12,40,0.6), 0 0 0 1px rgba(220,230,248,0.09); display: block; } /* ── ÍCONE (mantido igual) ── */ /* Ícone */ #splash-icon-wrap { position: relative; display: flex; align-items: center; justify-content: center; } #splash-icon { width: 120px; height: 120px; border-radius: 28px; overflow: hidden; box-shadow: 0 10px 36px rgba(5,12,40,0.5), 0 0 0 1.5px rgba(220,230,248,0.25); animation: icon-pop 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: 0.1s; opacity: 0; animation-fill-mode: forwards; position: relative; z-index: 1; } @keyframes icon-pop { from { opacity: 0; transform: scale(0.72) rotate(-5deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } #splash-icon-ring { position: absolute; width: 84px; height: 84px; border-radius: 36px; border: 1.5px solid rgba(58,110,220,0.35); animation: ring-pulse 2.6s ease-in-out infinite; animation-delay: 0.9s; pointer-events: none; } @keyframes ring-pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.07); opacity: 0.15; } 100% { transform: scale(1); opacity: 0.8; } } /* Brand */ /* Brand row: ícone + nome lado a lado */ #splash-brand-row { display: flex; align-items: center; gap: 14px; animation: fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.1s; opacity: 0; animation-fill-mode: forwards; } #splash-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; width: 100%; } #splash-title { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 32px; font-weight: 800; color: #ffffff; letter-spacing: -0.5px; margin: 0; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 6px; } #splash-dot { width: 9px; height: 9px; background: #3a6edc; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: 0 0 10px rgba(58,110,220,0.9), 0 0 20px rgba(58,110,220,0.4); } #splash-tagline { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 13px; font-weight: 400; color: rgba(180,200,240,0.55); margin: 0; letter-spacing: 0.3px; } #splash-cards { display: flex; gap: 8px; margin-top: 14px; width: 100%; max-width: 420px; animation: fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.38s; opacity: 0; animation-fill-mode: forwards; } .splash-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 11px 12px 12px; background: transparent; border: none; border-top: 2px solid rgba(58,110,220,0.35); border-radius: 0; transition: border-color 0.2s; min-width: 0; } .splash-card:hover { border-top-color: rgba(100,160,255,0.7); } .splash-card-badge { width: 30px; height: 30px; min-width: 30px; background: rgba(58,110,220,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #7aabff; transition: background 0.2s; } .splash-card:hover .splash-card-badge { background: rgba(58,110,220,0.32); } .splash-card-badge svg { width: 14px; height: 14px; min-width: 14px; min-height: 14px; display: block; } .splash-card-text { display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; } .splash-card-text strong { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12px; font-weight: 700; color: rgba(220,232,255,0.92); letter-spacing: 0.1px; line-height: 1.3; } .splash-card-text span { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 10.5px; font-weight: 400; color: rgba(160,185,230,0.55); line-height: 1.3; } /* Divisor */ #splash-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(220,230,248,0.2), transparent); animation: fade-up 0.6s ease both; animation-delay: 0.3s; opacity: 0; animation-fill-mode: forwards; } /* Features */ #splash-features { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 480px; border-top: 1px solid rgba(220,230,248,0.12); padding-top: 8px; animation: fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.35s; opacity: 0; animation-fill-mode: forwards; } .splash-feat { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(220,230,248,0.08); transition: opacity 0.2s; } .splash-feat:last-child { border-bottom: none; } .splash-feat:hover { opacity: 0.8; } .splash-feat-badge { width: 26px; height: 26px; min-width: 26px; background: rgba(58,110,220,0.18); border: 1px solid rgba(58,110,220,0.30); border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #7aabff; } .splash-feat-badge svg { width: 13px; height: 13px; } .splash-feat-text { display: flex; flex-direction: column; gap: 1px; } .splash-feat-text strong { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 11.5px; font-weight: 700; color: rgba(220,232,255,0.92); letter-spacing: 0.1px; } .splash-feat-text span { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 11px; font-weight: 400; color: rgba(160,185,230,0.78); } /* Botão — branco sobre o navy, destaque limpo */ #splash-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 13.5px; font-weight: 700; color: #0f1f5c; background: linear-gradient(135deg, #dce6f8 0%, #f0f4fb 100%); border: none; border-radius: 14px; padding: 14px 0; width: 100%; cursor: pointer; letter-spacing: 0.4px; box-shadow: 0 4px 20px rgba(5,12,40,0.4), 0 1px 0 rgba(255,255,255,0.8) inset; transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.2s ease; animation: fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.45s; opacity: 0; animation-fill-mode: forwards; } #splash-btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; } #splash-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 28px rgba(5,12,40,0.55), 0 1px 0 rgba(255,255,255,0.8) inset; transform: translateY(-1px); } #splash-btn:hover svg { transform: translateX(3px); } #splash-btn:active { transform: scale(0.98) translateY(0); } /* Versão */ #splash-version { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 10px; font-weight: 500; color: rgba(160,185,230,0.25); letter-spacing: 1.5px; text-transform: uppercase; position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); margin-top: 0; animation: fade-up 0.6s ease both; animation-delay: 0.52s; opacity: 0; animation-fill-mode: forwards; } @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ── FAB TOOLTIPS ── */ .fab-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: linear-gradient(135deg, #0a1a3a, #1a2f6e); color: #a8c4ff; font-size: 11px; font-weight: 600; font-family: 'Outfit', 'Century Gothic', sans-serif; white-space: nowrap; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(58,110,220,0.45); letter-spacing: 0.2px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s, transform 0.15s; transition-delay: 0s; box-shadow: 0 6px 24px rgba(0,0,0,0.35); } .fab-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a2f6e; } button:hover > .fab-tooltip, div:hover > .fab-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0.5s; /* delay só na entrada */ } /* Esconde o tooltip "Dados" enquanto o menu (Exportar/Importar) está aberto — sem isso, o mouse continuar sobre o botão (foi ele que abriu o menu) deixava o tooltip visível atrás/perto do próprio menu. */ #btn-dados.menu-aberto + .fab-tooltip { opacity: 0 !important; visibility: hidden !important; transition-delay: 0s !important; } /* ── Botão devolver sobrado à previsão ── */ .diario-btn-devolver { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #1c3f91, #3a6edc); border: none; border-radius: 7px; padding: 4px 10px; font-size: 10.5px; font-weight: 700; font-family: inherit; color: #fff; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; } .diario-btn-devolver:hover { opacity: 0.85; } /* ── Distribuição por bloco no popup movimento ── */ .popup-dist-bloco { transition: border-color 0.15s, background 0.15s; user-select: none; } .popup-dist-bloco:hover { opacity: 0.85; } .popup-dest-bloco { transition: background 0.15s, color 0.15s, border-color 0.15s; } .popup-dest-bloco:hover { opacity: 0.85; } /* ── BOTÃO FLUTUANTE TOUR ── */ @keyframes tourBtnPulse { 0% { box-shadow: 0 0 0 0 rgba(58,110,220,0.7), 0 4px 16px rgba(10,21,64,0.4); } 50% { box-shadow: 0 0 0 8px rgba(58,110,220,0), 0 4px 20px rgba(10,21,64,0.5); } 100% { box-shadow: 0 0 0 0 rgba(58,110,220,0.7), 0 4px 16px rgba(10,21,64,0.4); } } .tour-btn-indice-float { animation: tourBtnPulse 2.4s ease-in-out infinite !important; } .tour-btn-indice-float:hover { animation: none !important; box-shadow: 0 0 0 4px rgba(58,110,220,0.4), 0 6px 24px rgba(10,21,64,0.5) !important; transform: translateY(-2px); transition: transform 0.15s, box-shadow 0.15s; } /* ── TOUR ÍNDICE PAINEL ── */ /* Usa top+bottom em vez de height:100vh para funcionar corretamente com zoom CSS */ #tour-indice-painel { pointer-events: all !important; top: 0 !important; bottom: 0 !important; height: auto !important; overflow: hidden !important; } #tour-indice-lista { pointer-events: all !important; overflow-y: auto !important; overflow-x: hidden !important; flex: 1 !important; min-height: 0 !important; } .tour-indice-item { pointer-events: all !important; } /* Scrollbar da lista do tour */ #tour-indice-lista::-webkit-scrollbar { width: 5px; } #tour-indice-lista::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; } #tour-indice-lista::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; } #tour-indice-lista::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.45); } /* ══════════════════════════════════════════════════════════════════ 26. MODO NOTURNO — body.dark Fundo: gradiente azul profundo (igual ao tour/topnav). Regra central: tudo que era azul vira branco/translúcido, pois o fundo já é azul. Inputs/selects sem borda = menos poluição. ══════════════════════════════════════════════════════════════════ */ /* ── Botão lua/sol na topnav ── */ /* ── Toggle dark mode ── */ #btn-dark-mode { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; color: rgba(255,255,255,0.75); flex-shrink: 0; position: relative; transition: color 0.2s; } #btn-dark-mode:hover { color: rgba(255,255,255,1); } #btn-dark-mode:hover svg { /* sem rotate no hover agora */ } /* Trilho */ #dark-toggle-track { width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.25); position: relative; transition: background 0.28s, border-color 0.28s; flex-shrink: 0; } body.dark #dark-toggle-track { background: rgba(58,110,220,0.75); border-color: rgba(100,150,255,0.9); box-shadow: 0 0 0 1px rgba(100,150,255,0.35); } /* Bolinha */ #dark-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); transition: transform 0.28s cubic-bezier(0.34,1.2,0.64,1); } body.dark #dark-toggle-thumb { transform: translateX(18px); color: #1c3f91; } /* Ícone sol (esquerda) — visível no modo claro */ #dark-icon-sol { opacity: 0.8; transition: opacity 0.2s; } body.dark #dark-icon-sol { opacity: 0.45; } /* Ícone lua (direita) — visível no modo escuro */ #dark-icon-lua-right { opacity: 0.45; transition: opacity 0.2s; } body.dark #dark-icon-lua-right { opacity: 0.9; } #btn-dark-mode .fab-tooltip { white-space: nowrap; font-size: 10.5px; bottom: auto; top: calc(100% + 10px); transform: translateX(-50%) translateY(4px); } #btn-dark-mode .fab-tooltip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1a2f6e; } button:hover > #btn-dark-mode .fab-tooltip, #btn-dark-mode:hover .fab-tooltip { transform: translateX(-50%) translateY(0); } /* ── Fundo da página ── */ body.dark { background: linear-gradient(150deg, #060c1e 0%, #0a102d 35%, #0d1845 65%, #0f1f5c 100%); background-attachment: fixed; } /* ── Scrollbar ── */ body.dark::-webkit-scrollbar-track { background: rgba(6,13,40,0.8); } body.dark::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 6px; } body.dark::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); } /* ── Título do mês ── */ body.dark #titulomes, body.dark #diario-titulomes { color: rgba(255,255,255,0.92); } body.dark #titulomes:hover, body.dark #diario-titulomes:hover { color: #fff; } body.dark #mes-dropdown-wrap.aberto #titulomes, body.dark #diario-mes-dropdown-wrap.aberto #diario-titulomes { color: #fff; } body.dark #titulomes::after, body.dark #diario-titulomes::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* ── Dropdowns de mês ── */ body.dark #mes-dropdown-list, body.dark #diario-mes-dropdown-list { background: #0d1845; border-color: rgba(255,255,255,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.6); } body.dark .mes-dropdown-item, body.dark .diario-mes-dropdown-item { background: transparent; color: rgba(255,255,255,0.75); } body.dark .mes-dropdown-item:hover, body.dark .diario-mes-dropdown-item:hover { background: rgba(255,255,255,0.1); color: #fff; } body.dark .mes-dropdown-item.tour-hover-sim { background: rgba(255,255,255,0.1); color: #fff; } body.dark .mes-dropdown-item.ativo, body.dark .diario-mes-dropdown-item.ativo { background: rgba(58,110,220,0.25); color: #fff; font-weight: 700; border-left: 3px solid #7aaff0; padding-left: calc(16px - 3px); } body.dark .mes-dropdown-item.hoje:not(.ativo), body.dark .diario-mes-dropdown-item.hoje:not(.ativo) { color: #7aaff0; font-weight: 600; border-left: 3px solid rgba(122,175,240,0.35); padding-left: calc(16px - 3px); } /* ── Botões < > do mês ── */ body.dark .btn-mes { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.15); box-shadow: none; } body.dark .btn-mes:hover { background: rgba(255,255,255,0.22); color: #fff; box-shadow: none; } /* ── Botão replicar mês e fechar mês ── */ body.dark .btn-replicar-linha { color: rgba(255,255,255,0.4); } body.dark .btn-replicar-linha:hover { color: #7eb3ff; background: rgba(100,160,255,0.15); } body.dark .btn-sal-menu { color: rgba(255,255,255,0.8); font-weight: 900; } body.dark .btn-sal-menu:hover { color: #7eb3ff; background: rgba(100,160,255,0.15); } body.dark .sal-menu-dropdown { background: #0d1845; border-color: rgba(255,255,255,0.12); box-shadow: 0 6px 24px rgba(0,0,0,0.4); } body.dark .sal-menu-dropdown button { color: rgba(255,255,255,0.85); } body.dark .sal-menu-dropdown button:hover { background: rgba(255,255,255,0.08); } body.dark .sal-menu-dropdown button svg { color: rgba(255,255,255,0.35); } body.dark .sal-menu-dropdown button.sal-menu-danger { color: #e87070; } body.dark .sal-menu-dropdown button.sal-menu-danger svg { color: #e87070; } body.dark .sal-menu-dropdown button.sal-menu-danger:hover { background: rgba(220,50,50,0.1); } body.dark .replicar-tooltip { background: linear-gradient(135deg, #1a2f6e, #2a4a9e); color: #c8dcff; border-color: rgba(100,160,255,0.4); } body.dark .replicar-tooltip::after { background: #2a4a9e; border-color: rgba(100,160,255,0.4); } body.dark .chk-pagar-tooltip { background: linear-gradient(135deg, #1a2f6e, #2a4a9e); color: #c8dcff; border-color: rgba(100,160,255,0.4); } body.dark .chk-pagar-tooltip::after { background: #2a4a9e; border-color: rgba(100,160,255,0.4); } body.dark .btn-replicar-mes-tooltip { background: linear-gradient(135deg, #1a2f6e, #2a4a9e); color: #c8dcff; border-color: rgba(100,160,255,0.4); } body.dark .btn-replicar-mes-tooltip::after { background: #2a4a9e; border-color: rgba(100,160,255,0.4); } body.dark .fab-tooltip { background: linear-gradient(135deg, #1a2f6e, #2a4a9e); color: #c8dcff; border-color: rgba(100,160,255,0.4); } body.dark .fab-tooltip::after { border-top-color: #2a4a9e; } body.dark #btn-dark-mode .fab-tooltip::after, body.dark .presenca-badge .fab-tooltip::after { border-top-color: transparent; border-bottom-color: #2a4a9e; } body.dark .btn-replicar-mes, body.dark .btn-fechar-mes { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); box-shadow: none; border: 1px solid rgba(255,255,255,0.15); } body.dark .btn-replicar-mes:hover, body.dark .btn-fechar-mes:hover { background: rgba(255,255,255,0.22); color: #fff; } body.dark .btn-fechar-mes.mes-fechado { background: rgba(255,255,255,0.18); color: #fff; box-shadow: none; } /* ══ CABEÇALHOS DOS BLOCOS ══ h3 e gaveta fechada com mesma opacidade — gaveta some atrás do h3 */ /* h3 sólido escuro — tampa a gaveta. Gaveta fechada mais clara = aparece só a franjinha visível à direita, criando o detalhe cinza do header */ body.dark .bloco-header-wrap > h3, body.dark .bloco-wrap > h3 { background: #162554; color: rgba(255,255,255,0.7); border-left-color: rgba(255,255,255,0.3); box-shadow: none; } body.dark .bloco-header-wrap > h3:hover { background: #1c2f68; } body.dark .bloco-header-wrap.aberto > h3 { background: #1c2f68; } /* Gaveta fechada: mais clara que o h3 — a franjinha visível à direita cria o efeito do detalhe cinza */ body.dark .bloco-gaveta { background: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); } body.dark .bloco-header-wrap:not(.aberto):hover .bloco-gaveta { background: rgba(255,255,255,0.38); } /* Aberta: mesma cor cinza da fechada */ body.dark .bloco-header-wrap.aberto .bloco-gaveta { background: rgba(255,255,255,0.3); color: #fff; box-shadow: 4px 2px 8px rgba(0,0,0,0.3); } /* ══ LINHAS — sem bordas, só texto. Menos poluição visual ══ */ body.dark .salario-input { border-image: linear-gradient(to right, transparent, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0.25) 75%, transparent) 1; } body.dark .salario-input:focus { border-image: linear-gradient(to right, transparent, rgba(58,110,220,0.6) 20%, rgba(58,110,220,0.8) 50%, rgba(58,110,220,0.6) 80%, transparent) 1; } body.dark .salario-input.com-extras:focus { border-image: linear-gradient(to right, transparent, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0.25) 75%, transparent) 1; } /* ── ENTRADAS EXTRAS DE SALÁRIO ── */ /* ── ENTRADAS EXTRAS DE SALÁRIO — POPOVER ── */ .btn-extras-sal { width: 17px; height: 17px; border-radius: 50%; border: none; background: none; color: #999; font-size: 15px; font-weight: 400; line-height: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; padding-bottom: 1px; transition: color 0.15s, background 0.15s; position: relative; flex-shrink: 0; } .btn-extras-sal:hover { color: #1f7a1f; background: rgba(31,122,31,0.08); } .btn-extras-sal.ativo { color: #1f7a1f; background: rgba(31,122,31,0.12); } #extras-sal-popover { position: fixed; z-index: 9500; background: #fff; border: 1.5px solid #a8c4f0; border-radius: 16px; box-shadow: 0 12px 48px rgba(28,63,145,0.18); padding: 16px 18px 14px; width: 280px; display: none; flex-direction: column; gap: 0; } #extras-sal-popover.visivel { display: flex; animation: extrasSalPopoverIn 0.18s ease-out; transform-origin: top center; } @keyframes extrasSalPopoverIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .extras-sal-pop-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .extras-sal-pop-titulo { font-size: 14px; font-weight: 700; font-family: inherit; color: #1a2a5e; } .extras-sal-pop-fechar { background: none; border: none; color: #b0bbdb; font-size: 18px; cursor: pointer; padding: 0; line-height: 1; transition: color 0.15s; } .extras-sal-pop-fechar:hover { color: #3a6edc; } /* Salário base */ .extras-sal-base-wrap { display: flex; align-items: center; justify-content: space-between; background: rgba(58,110,220,0.055); border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; gap: 10px; } .extras-sal-base-label { font-size: 12px; font-weight: 700; color: #4a5a8a; white-space: nowrap; font-family: inherit; } .extras-sal-base-input { flex: 1; border: none; background: transparent; font-size: 13px; font-weight: 700; color: #1c3f91; font-family: inherit; text-align: right; outline: none; min-width: 0; } .extras-sal-base-input::placeholder { color: #b0bbdb; font-weight: 500; } body.dark .extras-sal-base-wrap { background: rgba(255,255,255,0.06); } body.dark .extras-sal-base-label { color: rgba(255,255,255,0.45); } body.dark .extras-sal-base-input { color: rgba(255,255,255,0.85); } body.dark .extras-sal-base-input::placeholder { color: rgba(255,255,255,0.2); } /* Lista de extras */ .extras-sal-lista { display: flex; flex-direction: column; gap: 0; } .extras-sal-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid rgba(58,110,220,0.06); } .extras-sal-row:last-child { border-bottom: none; } .extras-sal-nome { flex: 1; border: none; background: transparent; font-size: 12px; font-weight: 500; font-family: inherit; color: #6b7a9e; outline: none; padding: 0; min-width: 0; } .extras-sal-nome::placeholder { color: #c0c8e0; } .extras-sal-valor { width: 80px; border: none; background: transparent; font-size: 12px; font-weight: 600; font-family: inherit; color: #2d7a3a; outline: none; text-align: right; padding: 0; opacity: 0.85; } .extras-sal-valor::placeholder { color: #1f7a1f; opacity: 0.3; } .extras-sal-del { background: none; border: none; color: #d0d8ea; font-size: 13px; cursor: pointer; padding: 0 0 0 2px; line-height: 1; transition: color 0.15s; flex-shrink: 0; } .extras-sal-del:hover { color: #c0392b; } .extras-sal-enter { background: none; border: none; color: #3a6edc; font-size: 12px; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .extras-sal-row.val-focado .extras-sal-enter { opacity: 1; pointer-events: auto; } body.dark .extras-sal-enter { color: rgba(120,160,255,0.8); } /* Toggle informativo */ .extras-sal-info-wrap { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 10px; border-bottom: 1px solid rgba(58,110,220,0.08); margin-bottom: 8px; cursor: pointer; user-select: none; } .extras-sal-info-texto { display: flex; flex-direction: column; gap: 2px; } .extras-sal-info-label { font-size: 12px; font-weight: 600; font-family: inherit; color: #1a2a5e; } .extras-sal-info-desc { font-size: 10px; font-weight: 500; font-family: inherit; color: #a0aec8; } .extras-sal-toggle-track { width: 34px; height: 19px; border-radius: 10px; background: rgba(58,110,220,0.15); border: 1.5px solid rgba(58,110,220,0.2); position: relative; transition: background 0.25s, border-color 0.25s; flex-shrink: 0; } .extras-sal-toggle-track.ativo { background: #3a6edc; border-color: #3a6edc; } .extras-sal-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: transform 0.25s cubic-bezier(0.34,1.2,0.64,1); } body.dark .extras-sal-info-wrap { border-bottom-color: rgba(255,255,255,0.07); } body.dark .extras-sal-info-label { color: rgba(255,255,255,0.85); } body.dark .extras-sal-info-desc { color: rgba(255,255,255,0.3); } body.dark .extras-sal-toggle-track { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); } body.dark .extras-sal-toggle-track.ativo { background: #3a6edc; border-color: #4a7edc; } /* Botão nova entrada */ .extras-sal-add-btn { background: none; border: none; color: #3a6edc; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 8px 0 0; text-align: center; width: 100%; opacity: 0.6; transition: opacity 0.15s; } .extras-sal-add-btn:hover { opacity: 1; } /* Dark mode */ body.dark #extras-sal-popover { background: #1a2f6e; border-color: rgba(160,200,255,0.35); box-shadow: 0 12px 48px rgba(0,0,0,0.45); } body.dark .extras-sal-pop-titulo { color: rgba(255,255,255,0.92); } body.dark .extras-sal-pop-fechar { color: rgba(255,255,255,0.25); } body.dark .extras-sal-pop-fechar:hover { color: rgba(255,255,255,0.8); } body.dark .extras-sal-row { border-bottom-color: rgba(255,255,255,0.06); } body.dark .extras-sal-nome { color: rgba(255,255,255,0.75); } body.dark .extras-sal-nome::placeholder { color: rgba(255,255,255,0.25); } body.dark .extras-sal-valor { color: rgba(120,230,120,0.95); } body.dark .extras-sal-valor::placeholder { color: rgba(255,255,255,0.25); opacity: 1; } body.dark .extras-sal-del { color: rgba(255,255,255,0.3); } body.dark .extras-sal-del:hover { color: #ff8a80; } body.dark .extras-sal-add-btn { color: rgba(100,150,255,0.8); } body.dark .btn-extras-sal { color: rgba(255,255,255,0.25); } body.dark .btn-limpar-linha { color: rgba(255,255,255,0.25); } body.dark .btn-extras-sal:hover { color: rgba(80,200,120,0.9); background: rgba(100,200,100,0.1); } body.dark .btn-extras-sal.ativo { color: rgba(80,200,120,0.9); background: rgba(100,200,100,0.12); } body.dark .linha select { background-color: transparent; border-color: transparent; color: rgba(255,255,255,0.75); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } body.dark .linha select option { background: #0d1845; color: #fff; } body.dark .linha select:focus { border-color: rgba(255,255,255,0.3); box-shadow: none; background-color: rgba(255,255,255,0.06); } body.dark .linha .val-input { color: rgba(255,255,255,0.75); border-image: linear-gradient(to right, transparent, rgba(255,255,255,0.18) 25%, rgba(255,255,255,0.18) 75%, transparent) 1; border-bottom: 1.5px solid transparent; } body.dark .linha .val-input::placeholder { color: rgba(255,255,255,0.2); } body.dark .linha .val-input:focus { border-image: linear-gradient(to right, transparent, rgba(58,110,220,0.6) 20%, rgba(58,110,220,0.8) 50%, rgba(58,110,220,0.6) 80%, transparent) 1; border-bottom: 1.5px solid transparent; } /* ── Checkboxes das linhas: opacos para não chamar atenção ── */ body.dark .linha input[type="checkbox"] { background: linear-gradient(150deg, #060d28 0%, #0a1540 35%, #0f1f5c 65%, #1c3f91 100%); border-color: rgba(255,255,255,0.25); opacity: 1; } body.dark .linha input[type="checkbox"]:checked { background: linear-gradient(150deg, #060d28 0%, #0a1540 35%, #0f1f5c 65%, #1c3f91 100%); border-color: rgba(255,255,255,0.6); } body.dark .linha input[type="checkbox"]:checked::after { border-left-color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.85); } /* ── Select banco customizado — sem borda ── */ body.dark .select-banco-display { background-color: transparent; border-color: transparent; color: rgba(255,255,255,0.75); } body.dark .select-banco-display.vazio { color: rgba(255,255,255,0.3); } body.dark .select-banco-display:hover { background-color: rgba(255,255,255,0.06); border-color: transparent; } body.dark .select-banco-display::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } body.dark .select-banco-list { background: #0d1845; border-color: rgba(255,255,255,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.6); } body.dark .select-banco-list::-webkit-scrollbar-track { background: rgba(6,13,40,0.8); border-radius: 4px; } body.dark .select-banco-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; } body.dark .select-banco-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); } body.dark ._tour-fake-list-scroll::-webkit-scrollbar-track { background: rgba(6,13,40,0.8); border-radius: 4px; } body.dark ._tour-fake-list-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; } body.dark ._tour-fake-list-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); } body.dark .select-banco-item { background: transparent; color: rgba(255,255,255,0.75); } body.dark .select-banco-item:hover { background: rgba(255,255,255,0.1); color: #fff; } body.dark .select-banco-item.highlighted { background: rgba(255,255,255,0.15); color: #fff; } body.dark .select-banco-search { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.88); border-bottom-color: rgba(255,255,255,0.12); } body.dark .select-banco-search::placeholder { color: rgba(255,255,255,0.3); } /* ══ CÍRCULOS DE SUBTOTAL ══ */ body.dark .circulo-subtotal { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } body.dark .circulo-progress-bg { stroke: rgba(255,255,255,0.12); } body.dark .circulo-progress-ring.alerta { stroke: #b03a39; } body.dark .circulo-livre-badge { color: #5ee87a; background: rgba(46,125,50,0.2); border-color: rgba(46,125,50,0.35); } /* ══ PAINEL DIREITA ══ */ body.dark .painel-circulo { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } body.dark .painel-btn, body.dark .painel-reserva-btn { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); border-left-color: rgba(255,255,255,0.3); box-shadow: none; } /* ── Cards Previsão ── */ body.dark .previsao-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 20px rgba(0,0,0,0.32); } body.dark .previsao-card-titulo { color: rgba(255,255,255,0.45); } /* ── Cards Reserva e Meta ── .meta-card fica de fora no perfil-unico (:not) — lá ele é só o grid de conteúdo transparente por dentro de .metas-reserva-card-outer, que já tem seu próprio tratamento dark (mais acima, escopado a #pu-grid-extra). Sem o :not(), essa regra (mesma especificidade, declarada depois) vencia a de body.perfil-unico .meta-card e devolvia fundo+borda visíveis — o contorno duplicado reportado. Fundo OPACO (não rgba translúcido) é proposital aqui: o .meta-card (z-index:3) fica sobreposto por cima do topo da carta de trás da pilha (.meta-card-stack.s1, z-index:2, puxada pra cima com margin-top negativo) — com fundo translúcido, a borda/cor da carta de trás vazava através dessa faixa de sobreposição, entregando que ela não é um card inteiro, só uma tira decorativa. */ body.dark .reserva-card, body.dark:not(.perfil-unico) .meta-card { background: #1a2856; border-color: rgba(255,255,255,0.1); box-shadow: 0 2px 16px rgba(0,0,0,0.25); } /* border-color acima reseta os 4 lados dos 3 cards — reaplica só o topo, senão o destaque azul (border-top na regra-base acima) some no dark, mesmo ajuste já feito pro perfil 1 entrada. .meta-card e .meta-vazio-card ficam de fora daqui — são tratados junto com o dark de .meta-vazio-card mais abaixo, mesmo motivo do :not(). */ body.dark .previsao-card, body.dark .reserva-card { border-top-color: rgba(58,110,220,0.5); } body.dark .reserva-card-titulo { color: rgba(255,255,255,0.45); } body.dark .reserva-card-saldo { color: rgba(255,255,255,0.3) !important; } body.dark .reserva-card-saldo.verde { color: #1f7a1f !important; } body.dark .reserva-card-btn { background: rgba(34,139,230,0.22); color: #7ec8ff; border-color: rgba(34,139,230,0.35); } body.dark .reserva-card-btn:hover { background: rgba(34,139,230,0.38); border-color: rgba(34,139,230,0.6); } body.dark .reserva-card-btn.retirar { background: transparent; color: #ff9999; border-color: rgba(192,57,43,0.4); } body.dark .reserva-card-btn.retirar:hover { background: rgba(192,57,43,0.22); border-color: rgba(231,76,60,0.6); } body.dark .reserva-valor { color: rgba(255,255,255,0.5); } body.dark .reserva-valor.verde { color: #5ee87a; } body.dark .reserva-valor.verde::placeholder { color: #5ee87a; opacity: 1; } body.dark .reserva-valor.vermelho { color: #ff9999; } body.dark .reserva-valor.vermelho::placeholder { color: #ff9999; opacity: 1; } body.dark .painel-circulo.vermelho { color: #b03a39; } body.dark .previsao-card-valor.vermelho, body.dark .previsao-card-pct.vermelho { color: #b03a39; } /* ── Pilha de metas ── */ body.dark .meta-card-stack.s1 { background: #0d1a4e; border-color: rgba(255,255,255,0.09); } body.dark .meta-card-stack.s2 { background: #0b1640; border-color: rgba(255,255,255,0.06); } body.dark .meta-card-nome { color: rgba(255,255,255,0.9); } body.dark .meta-card-counter { color: rgba(255,255,255,0.35); } body.dark .meta-nav-dot { background: rgba(255,255,255,0.2); } body.dark .meta-nav-dot.ativo { background: rgba(255,255,255,0.75); } body.dark .meta-card-nav-btn { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); } body.dark .meta-card-nav-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); color: #fff; } /* ── Barra de progresso reserva ── */ body.dark .reserva-progresso-wrap { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); box-shadow: none; } body.dark .reserva-prog-track { background: rgba(255,255,255,0.1); } body.dark .reserva-prog-label, body.dark .reserva-prog-meta-label { color: rgba(255,255,255,0.4); } body.dark .reserva-prog-atual { color: rgba(255,255,255,0.7); } body.dark .reserva-meta-input { color: rgba(255,255,255,0.75); border-bottom-color: rgba(255,255,255,0.2); } body.dark .reserva-meta-input:focus { color: #fff; border-bottom-color: rgba(255,255,255,0.6); } body.dark .reserva-meta-input::placeholder { color: rgba(255,255,255,0.22); } body.dark .reserva-prog-meta-display { color: rgba(255,255,255,0.45); } /* 2x especificamente ganha o fundo da pílula no dark também — o perfil 1 entrada já resolve isso sozinho via --pu-metas-soft (redefinida em body.dark.perfil-unico mais acima), então aqui só cobre o caso que ainda não tinha nenhum fundo. */ body.dark:not(.perfil-unico) .reserva-prog-meta-display { color: #8fa8f0; background: rgba(143,168,240,0.16); } body.dark .reserva-prog-prazo-row { border-top-color: rgba(255,255,255,0.1); } body.dark .reserva-prog-prazo-txt { color: rgba(255,255,255,0.4); } /* ── Card vazio meta ── */ body.dark .meta-vazio-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); box-shadow: none; } body.dark:not(.perfil-unico) .meta-card, body.dark:not(.perfil-unico) .meta-vazio-card { border-top-color: rgba(58,110,220,0.5); } body.dark .meta-vazio-texto { color: rgba(255,255,255,0.5); } body.dark .meta-vazio-btn { color: rgba(255,255,255,0.7); } /* ── Separador vertical ── No claro, a sombra (::after) é escura sobre fundo claro — discreta. No dark, a mesma lógica com branco vira um halo BRANCO se espalhando sobre ícones/texto num fundo escuro — o oposto do efeito sutil pretendido, lê como "sobreposição" em vez de separação. Em vez de só trocar a cor pra branco (o que ainda ilumina 60px de conteúdo ao redor), o dark ganha opacidade bem mais baixa e um alcance bem mais curto (16px em vez de 60px) — só um leve "respiro" de luz coladinho na linha, sem virar glow. */ body.dark .separador::before { background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.14) 30%, rgba(255,255,255,0.14) 70%, transparent 100%); } body.dark .separador::after { width: 16px; background: linear-gradient(to right, rgba(255,255,255,0.05) 0%, transparent 100%); } /* ── Botão simulador anual (dark) ── */ body.dark .btn-simulador-anual:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.25); } body.dark .btn-simulador-anual-tooltip { background: linear-gradient(135deg, #1a2f6e, #2a4a9e); color: #e0ecff; border-color: rgba(120,160,255,0.5); } body.dark .btn-simulador-anual-tooltip::after { background: #2a4a9e; border-color: rgba(120,160,255,0.5); } /* ══ DIÁRIO ══ */ body.dark .diario-titulo { color: rgba(255,255,255,0.92); } body.dark .diario-periodo-label { color: rgba(255,255,255,0.85); } body.dark .diario-periodo-valor { color: rgba(255,255,255,0.5); } body.dark .diario-data-atual { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); } body.dark .diario-table-wrap { border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } body.dark .diario-table td { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.8); border-bottom-color: rgba(255,255,255,0.06); } body.dark .diario-table tbody tr:hover td { background: rgba(255,255,255,0.08); } body.dark .diario-table tbody tr.diario-row-hoje td { background: rgba(255,255,255,0.08); } body.dark .diario-table tbody tr.diario-row-hoje td:first-child { border-left-color: rgba(255,255,255,0.5); color: #fff; } body.dark .diario-saida-input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: #ff9999; } body.dark .diario-table td.diario-td-disponivel { color: #5ee87a; } body.dark .diario-table td.diario-td-disponivel.negativo { color: #ff9999; } body.dark .diario-vazio-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); box-shadow: none; } body.dark .diario-vazio-titulo { color: rgba(255,255,255,0.92); } body.dark .diario-vazio-desc { color: rgba(255,255,255,0.5); } /* ══ POPUPS ══ */ body.dark #popup-replicar, body.dark #popup-replicar-mes, body.dark #popup-replicar-sal, body.dark #popup-subcategoria, body.dark #popup-conflito, body.dark #popup-apagar-parcelas, body.dark #popup-cobrir, body.dark #popup-config, body.dark #popup-config-anual, body.dark #popup-fechar-mes, body.dark #popup-reabrir-mes, body.dark #popup-alterar-salario, body.dark #popup-movimento, body.dark #popup-meta, body.dark #popup-importar-confirm, body.dark #popup-excluir-meta, body.dark #popup-excluir-conta, body.dark #popup-conta-excluida, body.dark #popup-simulador, body.dark #popup-tour, body.dark #popup-sobrescrever-mes, body.dark #popup-diario, body.dark #popup-diario-excluir { background: #1e3a6e !important; border: 1px solid rgba(255,255,255,0.22) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.88); } /* Textos genéricos dentro de popups no dark */ body.dark #popup-fechar-mes *, body.dark #popup-reabrir-mes *, body.dark #popup-alterar-salario *, body.dark #popup-importar-confirm *, body.dark #popup-conflito *, body.dark #popup-apagar-parcelas *, body.dark #popup-sobrescrever-mes *, body.dark #popup-excluir-meta *, body.dark #popup-excluir-conta *, body.dark #popup-conta-excluida *, body.dark #popup-movimento *, body.dark #popup-diario *, body.dark #popup-diario-excluir * { color: rgba(255,255,255,0.88) !important; } /* SVG do ícone do popup-movimento no dark */ body.dark #popup-movimento-icone svg { stroke: rgba(255,255,255,0.85) !important; fill: none !important; } body.dark #popup-movimento-icone div { background: rgba(255,255,255,0.12) !important; } /* Botão sacar tudo no dark — vermelho legível */ body.dark #popup-movimento-sacar-tudo { color: #ff8a80 !important; background: rgba(255,100,80,0.12) !important; border-color: rgba(255,100,80,0.3) !important; } /* Botão depositar tudo no dark */ body.dark #popup-movimento-depositar-tudo { color: #90c8ff !important; background: rgba(90,160,255,0.12) !important; border-color: rgba(90,160,255,0.3) !important; } /* Ícone do cadeado: fundo e stroke nítidos no dark */ body.dark #popup-fechar-mes div[style*="border-radius:12px"], body.dark #popup-reabrir-mes div[style*="border-radius:12px"] { background: rgba(255,255,255,0.15) !important; } body.dark #popup-fechar-mes svg, body.dark #popup-reabrir-mes svg { stroke: rgba(255,255,255,0.9) !important; } /* Lista de meses no popup de apagar parcelas — dark mode */ body.dark #apagar-parcelas-lista { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.88) !important; } body.dark #apagar-parcelas-lista li, body.dark #apagar-parcelas-lista strong { color: rgba(255,255,255,0.88) !important; } /* Lista de meses no popup de sobrescrever mês (replicar) — dark mode. O resto do popup já tinha tratamento (fundo, texto genérico, strong, botões) — só essa lista ficava de fora, com o fundo creme claro original (#fff8f0) por baixo do texto já forçado pra branco pela regra genérica acima, ilegível. */ body.dark #sobrescrever-mes-lista { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.18) !important; } body.dark #popup-fechar-mes strong, body.dark #popup-reabrir-mes strong, body.dark #popup-conflito strong, body.dark #popup-apagar-parcelas strong, body.dark #popup-sobrescrever-mes strong, body.dark #popup-excluir-meta strong, body.dark #popup-excluir-conta strong, body.dark #popup-diario strong, body.dark #popup-diario-excluir strong { color: #fff !important; } /* Botões de confirmação azul nos popups — gradiente invertido no dark para não sumir */ body.dark #popup-fechar-mes button[style*="linear-gradient"], body.dark #popup-reabrir-mes button[style*="linear-gradient"], body.dark #popup-alterar-salario button[style*="linear-gradient"], body.dark #popup-importar-confirm button[style*="linear-gradient"], body.dark #popup-conflito button[style*="linear-gradient"], body.dark #popup-apagar-parcelas button[style*="linear-gradient"], body.dark #popup-sobrescrever-mes button[style*="linear-gradient"], body.dark #popup-excluir-meta button[style*="linear-gradient"], body.dark #popup-excluir-conta button[style*="linear-gradient"], body.dark #popup-conta-excluida button[style*="linear-gradient"], body.dark #popup-diario button[style*="linear-gradient"], body.dark #popup-diario-excluir button[style*="linear-gradient"], body.dark #popup-simulador button[style*="linear-gradient"], body.dark #popup-movimento button[style*="linear-gradient"], body.dark #popup-meta button[style*="linear-gradient"], body.dark #popup-tour button[style*="linear-gradient"] { background: linear-gradient(135deg, #2a52b0, #4a7ed8) !important; box-shadow: 0 3px 14px rgba(58,110,220,0.35) !important; } body.dark #popup-tour button[style*="linear-gradient"]:hover { opacity: 0.88 !important; } body.dark .btn-replicar-confirmar { background: linear-gradient(135deg, #2a52b0, #4a7ed8) !important; box-shadow: 0 3px 14px rgba(58,110,220,0.35) !important; } body.dark .btn-subcategoria-confirmar { background: linear-gradient(135deg, #2a52b0, #4a7ed8) !important; box-shadow: 0 3px 14px rgba(58,110,220,0.35) !important; } body.dark .replicar-mes-icone svg { stroke: #ffffff !important; } body.dark .replicar-mes-icone svg circle { fill: #ffffff !important; } body.dark .replicar-linha-icone svg { stroke: #ffffff !important; } body.dark .replicar-linha-icone svg circle { fill: #ffffff !important; } body.dark .replicar-titulo, body.dark .subcategoria-titulo { color: rgba(255,255,255,0.95); } body.dark .replicar-subtitulo, body.dark .subcategoria-subtitulo, body.dark .replicar-label, body.dark .parcela-custom-label { color: rgba(255,255,255,0.5); } body.dark .replicar-preview { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.78); } body.dark .replicar-preview strong { color: #fff; } body.dark .parcela-btn { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.8); } body.dark .parcela-btn:hover { border-color: rgba(255,255,255,0.35); color: #fff; } body.dark .parcela-btn.ativo { background: rgba(255,255,255,0.88); border-color: transparent; color: #0a1540; } body.dark .parcela-custom-input { background: transparent; border-color: transparent; color: rgba(255,255,255,0.88); } body.dark .parcela-stepper { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); } body.dark .parcela-stepper-btn { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); } body.dark .parcela-stepper-btn:hover { background: rgba(255,255,255,0.22); } body.dark .btn-replicar-cancelar, body.dark .btn-subcategoria-cancelar { border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.5); } body.dark .btn-replicar-cancelar:hover, body.dark .btn-subcategoria-cancelar:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); } body.dark .subcategoria-input { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); } body.dark .subcategoria-input:focus { border-color: rgba(255,255,255,0.45); } body.dark .cobrir-opcao { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); } body.dark #popup-cobrir-resumo { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; } body.dark #popup-cobrir-deficit { color: #b03a39 !important; } body.dark #popup-cobrir-valor { color: rgba(255,255,255,0.9) !important; } body.dark #popup-cobrir [style*="color:#0f1f5c"] { color: rgba(255,255,255,0.95) !important; } body.dark #popup-cobrir [style*="color:#8a9cc8"] { color: rgba(255,255,255,0.45) !important; } body.dark #popup-cobrir [style*="color:#b0bbdb"] { color: rgba(255,255,255,0.35) !important; } body.dark #popup-cobrir-confirmar { background: linear-gradient(135deg, #2a52b0, #4a7ed8) !important; box-shadow: 0 3px 14px rgba(58,110,220,0.35) !important; } body.dark #popup-cobrir-dest-b1, body.dark #popup-cobrir-dest-b2 { color: rgba(255,255,255,0.6) !important; border-color: rgba(255,255,255,0.15) !important; } body.dark .cobrir-opcao:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.28); } body.dark .cobrir-opcao.ativa { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.35); } body.dark .cobrir-opcao-label { color: rgba(255,255,255,0.92); } body.dark .cobrir-opcao-saldo { color: rgba(255,255,255,0.6); } body.dark .cobrir-opcao input[type=radio], body.dark .cobrir-opcao input[type=checkbox] { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); } body.dark .cobrir-opcao input[type=radio]:checked, body.dark .cobrir-opcao input[type=checkbox]:checked { background: rgba(255,255,255,0.85); border-color: transparent; box-shadow: inset 0 0 0 3px #0d1845; } body.dark .popup-meta-label { color: rgba(255,255,255,0.48); } /* SVG e título do popup-meta no dark */ body.dark #popup-meta svg { stroke: rgba(255,255,255,0.85) !important; } body.dark #popup-meta div[style*="background:linear-gradient"] { background: rgba(255,255,255,0.12) !important; } body.dark #popup-meta div[style*="color:#0f1f5c"] { color: rgba(255,255,255,0.92) !important; } body.dark #popup-meta div[style*="color:#8a9cc8"] { color: rgba(255,255,255,0.45) !important; } body.dark .popup-meta-input { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); } body.dark .popup-meta-input::placeholder { color: rgba(255,255,255,0.22); } body.dark .popup-meta-input:focus { border-color: rgba(255,255,255,0.4); } body.dark .popup-cat-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); } body.dark .popup-cat-btn:hover, body.dark .popup-cat-btn.ativo { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); color: #fff; } body.dark .popup-meta-drop-display { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.88); } body.dark .popup-meta-drop-display.vazio { color: rgba(255,255,255,0.28); } body.dark .popup-meta-drop-display::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } body.dark .popup-meta-drop-list { background: #0d1845; border-color: rgba(255,255,255,0.12); } body.dark .popup-meta-drop-item { background: transparent; color: rgba(255,255,255,0.72); } body.dark .popup-meta-drop-item:hover { background: rgba(255,255,255,0.1); color: #fff; } body.dark .popup-meta-drop-item.ativo { background: rgba(255,255,255,0.14); color: #fff; } body.dark .popup-diario-entrada-btn { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.13); color: rgba(255,255,255,0.7); } body.dark .popup-diario-entrada-btn:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.92); } body.dark .popup-diario-entrada-btn.ativo { background: linear-gradient(135deg, #2a52b0, #4a7ed8) !important; border-color: transparent !important; color: #fff !important; } body.dark .popup-diario-input-drop { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); } body.dark .popup-diario-input-drop::placeholder { color: rgba(255,255,255,0.28); } body.dark .popup-diario-input-drop:focus { border-color: rgba(255,255,255,0.4); } body.dark .diario-date-wrap { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); } body.dark .diario-date-wrap:hover { border-color: rgba(255,255,255,0.28); } body.dark .diario-date-wrap.aberto { border-color: rgba(255,255,255,0.4); box-shadow: 0 0 0 3px rgba(255,255,255,0.07); } body.dark .diario-date-display { color: rgba(255,255,255,0.9); } body.dark .diario-date-display.vazio { color: rgba(255,255,255,0.3); } body.dark .diario-date-wrap svg { color: rgba(255,255,255,0.35); } /* ── Dropdown de ano ── */ body.dark #ano-dropdown-list { background: #0d1845 !important; border-color: rgba(255,255,255,0.12) !important; box-shadow: 0 8px 28px rgba(0,0,0,0.6) !important; } /* ── Toast ── */ body.dark #toast-aviso, body.dark .toast-sistema { background: #0d1845 !important; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 24px rgba(0,0,0,0.5); } body.dark .toast-titulo { color: #b03a39; } body.dark .toast-msg { color: rgba(255,255,255,0.7); } body.dark .toast-icone-wrap { background: rgba(176,58,57,0.2); } body.dark .toast-icone-wrap span { color: #b03a39; } body.dark .toast-fechar { color: rgba(255,255,255,0.4); } body.dark .toast-fechar:hover { color: rgba(255,255,255,0.8); } /* ── Simulador ── */ /* Título e SVG do cabeçalho */ body.dark #popup-simulador div[style*="color:#0f1f5c"] { color: rgba(255,255,255,0.92) !important; } body.dark #popup-simulador div[style*="color:#8a9cc8"] { color: rgba(255,255,255,0.45) !important; } body.dark #popup-simulador div[style*="background:rgba(28,63,145,0.08)"] { background: rgba(255,255,255,0.10) !important; } body.dark #popup-simulador svg[stroke="#1c3f91"] { stroke: rgba(255,255,255,0.85) !important; } body.dark #popup-resumo-header svg[stroke="#1c3f91"] { stroke: rgba(255,255,255,0.85) !important; } /* Borda da tabela */ body.dark #popup-simulador div[style*="border-left:1.5px"] { border-color: rgba(255,255,255,0.12) !important; } /* Nomes dos meses e coluna inicial */ body.dark .sim-cel-mes { color: rgba(255,255,255,0.88) !important; } body.dark .sim-cel-inicial { color: rgba(255,255,255,0.50) !important; } /* Linhas do tbody */ body.dark #simulador-tbody tr { border-bottom-color: rgba(255,255,255,0.07); } body.dark #simulador-tbody tr:hover { background: rgba(255,255,255,0.06) !important; } /* Inputs de entrada/saída no dark */ body.dark .sim-input { background: transparent; color: rgba(255,255,255,0.75); } body.dark .sim-input-entrada { color: #5ecf7a !important; } body.dark .sim-input-entrada::placeholder { color: rgba(94,207,122,0.3) !important; } body.dark .sim-input-saida { color: #ff7f7f !important; } body.dark .sim-input-saida::placeholder { color: rgba(255,127,127,0.3) !important; } /* Linha do mês atual destacada */ body.dark #simulador-tbody tr.sim-row-atual { background: rgba(255,255,255,0.10) !important; } body.dark #simulador-tbody tr.sim-row-atual:hover { background: rgba(255,255,255,0.14) !important; } body.dark .btn-subtotal { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); border-left-color: rgba(255,255,255,0.3); box-shadow: none; } /* ── Transição suave ao ligar/desligar ── */ body, body *, body ::before, body ::after { transition-property: background-color, background, border-color, color, box-shadow, opacity; transition-duration: 0.22s; transition-timing-function: ease; } body .bloco-gaveta { transition: left 0.28s cubic-bezier(0.34, 1.15, 0.64, 1), background 0.22s, color 0.22s; } /* Restaura transições que o bloco global (body *) sobrescreveria */ body .circulo-progress-ring { transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease; } body #salvo-indicator, body #ano-flash-label { transition: unset; } body .meta-card-stack { transition: margin-top 0.28s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.2s, transform 0.28s cubic-bezier(0.34,1.2,0.64,1); } /* ── Dark mode: popup-config internos ── */ body.dark #popup-config *, body.dark #popup-config-anual * { color: rgba(255,255,255,0.88) !important; } body.dark #popup-config [style*="background:#f6f8fd"], body.dark #popup-config [style*="background: #f6f8fd"], body.dark #popup-config-anual [style*="background:#f6f8fd"], body.dark #popup-config-anual [style*="background: #f6f8fd"] { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; } body.dark #config-alerta-pct-input { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.2) !important; color: #fff !important; } body.dark #config-alerta-pct-wrap [style*="border-top"] { border-top-color: rgba(255,255,255,0.12) !important; } body.dark #config-alerta-pct-wrap [style*="border-left"] { border-left-color: rgba(255,255,255,0.15) !important; } /* Engrenagem e sino do popup-config no dark */ body.dark #popup-config svg, body.dark #popup-config-anual svg { stroke: rgba(255,255,255,0.85) !important; } body.dark .btn-config-salvar { background: linear-gradient(135deg, #2a52b0, #4a7ed8) !important; box-shadow: 0 3px 14px rgba(58,110,220,0.35) !important; } /* ── Botão Sair da conta — mesmo padrão outline vermelho do .reserva-card-btn.retirar, mas em tamanho de botão de verdade (não a versão compacta dos cards). O #popup-config na frente das regras dark é necessário pra vencer o "body.dark #popup-config * {color:...!important}" logo acima, que senão force toda cor pra branco, inclusive a deste botão. */ .btn-sair-conta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; background: #fdecea; border: 1.5px solid #f0b8b8; border-radius: 11px; padding: 11px 0; font-size: 13px; font-weight: 700; font-family: inherit; color: #c0392b; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn-sair-conta svg { flex-shrink: 0; } .btn-sair-conta:hover { background: #f8d7d4; border-color: #e74c3c; } body.dark #popup-config .btn-sair-conta { background: rgba(192,57,43,0.14) !important; border-color: rgba(192,57,43,0.4) !important; color: #ff9999 !important; } body.dark #popup-config .btn-sair-conta:hover { background: rgba(192,57,43,0.26) !important; border-color: rgba(231,76,60,0.6) !important; } body.dark #popup-config .btn-sair-conta svg { stroke: #ff9999 !important; } /* Botão-fantasma "Excluir minha conta" — de propósito menor e menos chamativo que "Sair da conta" (ver comentário no index.html sobre não facilitar clique acidental numa ação irreversível), mas com o mesmo vocabulário visual do resto do app (ícone + texto, pill de fundo só no hover) em vez de um link sublinhado genérico. */ .btn-excluir-conta-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 12px; border: none; border-radius: 20px; background: none; font-family: inherit; font-size: 11px; font-weight: 700; color: rgba(192,57,43,0.55); cursor: pointer; transition: background 0.15s, color 0.15s; } .btn-excluir-conta-link svg { flex-shrink: 0; } .btn-excluir-conta-link:hover { background: rgba(192,57,43,0.08); color: #c0392b; } /* O #popup-config na frente é necessário pra vencer o "body.dark #popup-config * {color:...!important}" (ver comentário perto do .btn-sair-conta, algumas linhas acima) — mesmo motivo, mesma solução. O ícone precisa da própria regra: SVG usa stroke="currentColor" no atributo, que tem prioridade mais baixa que QUALQUER CSS (mesmo sem !important) — por isso body.dark #popup-config svg (que já existe, força tudo pra branco) também vencia sozinho, sem nem precisar do *. */ body.dark #popup-config .btn-excluir-conta-link { color: #cc8585 !important; } body.dark #popup-config .btn-excluir-conta-link svg { stroke: #cc8585 !important; } body.dark #popup-config .btn-excluir-conta-link:hover { background: rgba(255,153,153,0.12) !important; color: #ff9999 !important; } body.dark #popup-config .btn-excluir-conta-link:hover svg { stroke: #ff9999 !important; } /* ── Dark mode: menu de dados ── */ body.dark #dados-menu { background: #1e3a6e !important; border-color: rgba(255,255,255,0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; } body.dark #btn-exportar-dados, body.dark #btn-importar-dados { color: rgba(255,255,255,0.88) !important; } body.dark #btn-exportar-dados:hover, body.dark #btn-importar-dados:hover { background: rgba(255,255,255,0.08) !important; } body.dark #dados-menu svg { stroke: rgba(255,255,255,0.75) !important; } /* ── Dark mode: popup-tour ── */ body.dark #popup-tour * { color: rgba(255,255,255,0.88) !important; } body.dark #popup-tour svg { stroke: rgba(255,255,255,0.85) !important; } body.dark #popup-tour [style*="background:rgba(58,110,220,0.1)"], body.dark #popup-tour [style*="background: rgba(58,110,220,0.1)"] { background: rgba(255,255,255,0.1) !important; } body.dark #popup-tour button[onclick="fecharPopupTour()"] { border-color: rgba(255,255,255,0.2) !important; color: rgba(255,255,255,0.7) !important; } body.dark #popup-tour button[onclick="fecharPopupTour()"]:hover { background: rgba(255,255,255,0.08) !important; } body.dark .btn-iniciar-tour { background: linear-gradient(135deg, #2a52b0, #4a7ed8) !important; box-shadow: 0 3px 14px rgba(58,110,220,0.35) !important; } body.dark .btn-iniciar-tour:hover { opacity: 0.88 !important; } .btn-iniciar-tour { flex: 1; background: linear-gradient(135deg, #1c3f91, #3a6edc) !important; border: none; border-radius: 10px; padding: 10px 0; font-size: 13px; font-weight: 700; font-family: inherit; color: #fff !important; cursor: pointer; box-shadow: 0 3px 12px rgba(58,110,220,0.28); transition: opacity 0.15s !important; } .btn-iniciar-tour:hover { opacity: 0.88 !important; } body.dark .btn-iniciar-tour:hover { opacity: 0.88 !important; } body.dark .diario-vazio-icone svg { stroke: rgba(255,255,255,0.85) !important; } body.dark .diario-vazio-icone { background: rgba(255,255,255,0.08); box-shadow: none; } /* ── Dark: popup-diario calendário e inputs ── */ body.dark #popup-diario svg { stroke: rgba(255,255,255,0.85) !important; } body.dark #popup-diario [style*="background:linear-gradient(135deg,rgba(28,63,145"] { background: rgba(255,255,255,0.1) !important; } /* Scrollbar dos dropdowns de dia/mês */ body.dark .popup-meta-drop-list::-webkit-scrollbar { width: 4px; } body.dark .popup-meta-drop-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; } body.dark .popup-meta-drop-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; } body.dark .popup-meta-drop-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.32); } /* Botão ativo igual ao modo claro */ body.dark .popup-diario-entrada-btn.ativo { background: linear-gradient(135deg, #2a52b0, #4a7ed8) !important; border-color: transparent !important; color: #fff !important; } /* ── Dark mode: mensagem de erro do popup diário (sobreposição de período) ── */ body.dark #popup-diario-erro { background: rgba(176, 58, 57, 0.18) !important; color: #ff9b9b !important; border: 1px solid rgba(176, 58, 57, 0.4); } /* ── Dark mode: barra de período encerrado ── */ body.dark .diario-periodo-encerrado { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.45); } body.dark .diario-encerrado-sobrou { color: #5ee87a; } /* ── Dark mode: botão Cancelar do popup excluir período ── */ body.dark #popup-diario-excluir button[onclick="fecharPopupDiarioExcluir()"] { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.14) !important; color: rgba(255,255,255,0.5) !important; } body.dark #popup-diario-excluir button[onclick="fecharPopupDiarioExcluir()"]:hover { border-color: rgba(255,255,255,0.3) !important; color: rgba(255,255,255,0.8) !important; } /* ── Dark mode: ícone X do popup excluir meta — vermelho mais vivo pra contrastar com o fundo escuro (#c0392b original ficava apagado contra o azul-marinho; mesmo tom de vermelho já usado em outros elementos de perigo no dark, ex: #popup-movimento-sacar-tudo) ── */ body.dark #popup-excluir-meta > div:first-child { background: rgba(255,100,80,0.18) !important; } body.dark #popup-excluir-meta > div:first-child svg { stroke: #ff8a80 !important; } /* ── Dark mode: ícone e campo de confirmação do popup excluir conta — mesmo tratamento do ícone do popup excluir meta (ver acima); o campo de texto é exclusivo deste popup (excluir-meta não tem input), por isso precisa de regra própria — sem ela, herdava o fundo branco do input original, ilegível contra o popup escurecido por cima. ── */ body.dark #popup-excluir-conta > div:first-child { background: rgba(255,100,80,0.18) !important; } body.dark #popup-excluir-conta > div:first-child svg { stroke: #ff8a80 !important; } /* ── Dark mode: ícone de sucesso do popup "Conta excluída" — verde mais vivo, mesmo raciocínio do ícone vermelho acima (o tom original fica apagado contra o azul-marinho de fundo). ── */ body.dark #popup-conta-excluida > div:first-child { background: rgba(60,200,120,0.18) !important; } body.dark #popup-conta-excluida > div:first-child svg { stroke: #5ee69a !important; } body.dark #excluir-conta-confirmacao { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.18) !important; color: #fff !important; } body.dark #excluir-conta-confirmacao:focus { border-color: #5a8ef0 !important; } /* ── Dark mode: tooltip de subcategoria — mais claro e visível ── */ body.dark .subcategoria-tooltip { background: linear-gradient(135deg, #4a7ed8, #7aaff0); color: #ffffff; border-color: rgba(255,255,255,0.35); box-shadow: 0 6px 24px rgba(0,0,0,0.55); } body.dark .subcategoria-tooltip::after { background: #7aaff0; border-color: rgba(255,255,255,0.35); } /* ── Dark mode: tooltip de subcategoria — tom intermediário ── */ body.dark .subcategoria-tooltip { background: linear-gradient(135deg, #2a52b0, #5a8ee0); color: #ffffff; border-color: rgba(255,255,255,0.28); box-shadow: 0 6px 24px rgba(0,0,0,0.55); } body.dark .subcategoria-tooltip::after { background: #5a8ee0; border-color: rgba(255,255,255,0.28); } /* ── Modo claro: ícone da etiqueta com stroke azul visível ── */ #popup-subcategoria .popup-icone svg { stroke: #1c3f91; } /* ── Dark mode: restaura stroke branco no popup subcategoria ── */ body.dark #popup-subcategoria .popup-icone svg { stroke: #ffffff; } /* ════════════════════════════════════════════════════════════════ CATEGORIAS PERSONALIZADAS — Popup + botão lápis no dropdown ════════════════════════════════════════════════════════════════ */ /* Botão lápis no rodapé do dropdown */ .select-banco-editar-cat { display: flex; justify-content: flex-end; align-items: center; padding: 4px 6px; border-top: 1px solid rgba(58,110,220,0.1); background: transparent; } .select-banco-lapis-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: none; cursor: pointer; color: #b0bbdb; border-radius: 5px; padding: 0; position: relative; transition: background 0.13s, color 0.13s; } .select-banco-lapis-btn:hover { background: rgba(58,110,220,0.1); color: #3a6edc; } body.dark .select-banco-editar-cat { border-top-color: rgba(255,255,255,0.08); } body.dark .select-banco-lapis-btn { color: rgba(255,255,255,0.3); } body.dark .select-banco-lapis-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); } .meta-delete-tooltip { display: block; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: linear-gradient(135deg, #2c0a0a, #4a1010); color: #ff8a80; border-radius: 10px; padding: 8px 12px; white-space: nowrap; box-shadow: 0 6px 24px rgba(0,0,0,0.35); border: 1px solid rgba(231,76,60,0.4); pointer-events: none; font-size: 11px; font-weight: 600; letter-spacing: 0.2px; z-index: 99999; opacity: 0; visibility: hidden; transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease; transition-delay: 0s; } .meta-delete-tooltip::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #2c0a0a; border-right: 1px solid rgba(231,76,60,0.4); border-bottom: 1px solid rgba(231,76,60,0.4); } .res-delete-btn:hover .meta-delete-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0.5s; } .lapis-tooltip { display: block; position: absolute; bottom: calc(100% + 8px); right: 0; background: linear-gradient(135deg, #0a1a3a, #1a2f6e); color: #a8c4ff; font-size: 11px; font-weight: 600; font-family: 'Outfit', 'Century Gothic', sans-serif; white-space: nowrap; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(58,110,220,0.45); letter-spacing: 0.2px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s, transform 0.15s; transition-delay: 0s; transform: translateY(4px); box-shadow: 0 6px 24px rgba(0,0,0,0.35); z-index: 99999; } .lapis-tooltip::after { content: ''; position: absolute; top: 100%; right: 6px; border: 5px solid transparent; border-top-color: #1a2f6e; } /* Variante centralizada — tooltip alinhado ao centro do botão */ .lapis-tooltip-center { right: auto; left: 50%; transform: translateX(-50%) translateY(4px); } .lapis-tooltip-center.visible, .res-lapis-btn:hover .lapis-tooltip-center { transform: translateX(-50%) translateY(0); } .lapis-tooltip-center::after { right: auto; left: 50%; transform: translateX(-50%); } .select-banco-lapis-btn:hover .lapis-tooltip { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.5s; /* delay só na entrada */ } body.dark .lapis-tooltip { background: linear-gradient(135deg, #1a2f6e, #2a4a9e); color: #c8dcff; border-color: rgba(100,160,255,0.4); box-shadow: 0 6px 24px rgba(0,0,0,0.4); } body.dark .lapis-tooltip::after { border-top-color: #2a4a9e; } /* Popup */ #popup-categorias { background: #fff; } body.dark #popup-categorias { background: #1e3a6e !important; border: 1px solid rgba(255,255,255,0.22) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.88); } .popup-cat-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; } .popup-cat-titulo-wrap { display: flex; align-items: center; gap: 10px; } .popup-cat-titulo { font-size: 15px; font-weight: 700; color: #1a2a5e; } body.dark .popup-cat-titulo { color: rgba(255,255,255,0.95); } .popup-cat-subtitulo { font-size: 11px; color: #8a9cc8; font-weight: 600; margin-top: 1px; } body.dark .popup-cat-subtitulo { color: rgba(255,255,255,0.45); } .popup-cat-fechar { background: none; border: none; cursor: pointer; color: #b0bbdb; font-size: 16px; padding: 0; line-height: 1; transition: color 0.15s; } .popup-cat-fechar:hover { color: #3a6edc; } body.dark .popup-cat-fechar { color: rgba(255,255,255,0.35); } body.dark .popup-cat-fechar:hover { color: rgba(255,255,255,0.8); } /* Lista */ .popup-cat-lista { min-height: 32px; margin-bottom: 14px; } .popup-cat-vazio { font-size: 11.5px; color: #a0aec8; text-align: center; padding: 10px 0 4px; } body.dark .popup-cat-vazio { color: rgba(255,255,255,0.35); } .popup-cat-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(58,110,220,0.08); } body.dark .popup-cat-row { border-bottom-color: rgba(255,255,255,0.07); } .popup-cat-badge { display: inline-block; border-radius: 5px; padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.2px; } .popup-cat-row-btns { display: flex; gap: 6px; } .popup-cat-row-btn { background: none; border: none; cursor: pointer; color: #8a9cc8; padding: 3px 5px; border-radius: 5px; transition: background 0.13s, color 0.13s; display: flex; align-items: center; position: relative; } .popup-cat-row-btn:hover { background: #eef3fd; color: #3a6edc; } .popup-cat-row-btn.excluir:hover { background: #fdeaea; color: #c0392b; } body.dark .popup-cat-row-btn:hover { background: rgba(255,255,255,0.1); color: #7aaff0; } body.dark .popup-cat-row-btn.excluir:hover { background: rgba(192,57,43,0.15); color: #ff8a80; } .lapis-tip-fixed { position: fixed; top: auto; transform: translateX(-50%); background: linear-gradient(135deg, #0a1a3a, #1a2f6e); color: #a8c4ff; font-size: 11px; font-weight: 600; font-family: 'Outfit', 'Century Gothic', sans-serif; white-space: nowrap; padding: 5px 10px; border-radius: 7px; border: 1px solid rgba(58,110,220,0.45); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; box-shadow: 0 3px 10px rgba(28,63,145,0.3); z-index: 99999; } .lapis-tip-fixed.visible { opacity: 1; visibility: visible; } .lapis-tip-fixed::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a2f6e; } .cat-row-tip-excluir { background: linear-gradient(135deg, #2c0a0a, #4a1010) !important; color: #ff8a80 !important; border-color: rgba(231,76,60,0.4) !important; } .cat-row-tip-excluir::after { border-top-color: #4a1010 !important; background: transparent !important; } .popup-cat-limite { font-size: 11px; color: #e07b00; text-align: center; padding: 6px 0 2px; } body.dark .popup-cat-limite { color: #ffbb55; } /* Formulário */ .popup-cat-form { background: none; border: none; border-radius: 0; padding: 0; margin-bottom: 0; position: relative; } body.dark .popup-cat-form { background: none; border-color: transparent; } /* Fechar (canto superior — mesmo padrão dos demais popups do app) */ .popup-cat-form-fechar { position: absolute; top: 0; right: 0; background: none; border: none; cursor: pointer; color: #b0bbdb; font-size: 16px; padding: 0; line-height: 1; transition: color 0.15s; } .popup-cat-form-fechar:hover { color: #3a6edc; } body.dark .popup-cat-form-fechar { color: rgba(255,255,255,0.35); } body.dark .popup-cat-form-fechar:hover { color: rgba(255,255,255,0.8); } /* Ícone — o fundo é atualizado via JS (_catAtualizarPreview) pra refletir a cor de fundo escolhida pra categoria, em vez de ficar um azul fixo genérico independente do que a pessoa está configurando. */ .popup-cat-icone-wrap { display: flex; justify-content: center; margin-bottom: 6px; } .popup-cat-icone { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(28,63,145,0.1), rgba(58,110,220,0.15)); display: flex; align-items: center; justify-content: center; transition: background 0.25s ease; } body.dark .popup-cat-icone { background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.14)); } /* Título + subtítulo do form */ .popup-cat-form-titulo { font-size: 15px; font-weight: 700; color: #1a2a5e; margin-bottom: 4px; font-family: inherit; text-align: center; } body.dark .popup-cat-form-titulo { color: rgba(255,255,255,0.95); } .popup-cat-form-subtitulo { font-size: 11.5px; color: #8a9cc8; text-align: center; margin-bottom: 20px; font-family: inherit; } body.dark .popup-cat-form-subtitulo { color: rgba(255,255,255,0.45); } /* Grupo nome (label + input) */ .popup-cat-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; } .popup-cat-label { font-size: 10px; font-weight: 700; color: #8a9cc8; text-transform: uppercase; letter-spacing: 0.6px; line-height: 1; font-family: inherit; } body.dark .popup-cat-label { color: rgba(255,255,255,0.4); } .popup-cat-label-espaco { visibility: hidden; } /* Input nome */ .popup-cat-input { width: 100%; box-sizing: border-box; border: 1.5px solid #dde3f0; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-family: inherit; outline: none; color: #1a2a5e; background: #fff; transition: border-color 0.15s; } .popup-cat-input:focus { border-color: #3a6edc; } .popup-cat-input.popup-cat-input-erro { border-color: #c0392b !important; animation: popup-cat-shake 0.3s; } @keyframes popup-cat-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } body.dark .popup-cat-input { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); } body.dark .popup-cat-input:focus { border-color: rgba(255,255,255,0.45); } /* Painel de cores — agrupa Fundo/Texto/Preview num bloco com fundo próprio (mesmo tom "informativo" já usado em .replicar-preview), em vez de deixar os três soltos direto no branco do popup. */ .popup-cat-cores-painel { background: #f0f5ff; border: 1px solid #dce6f8; border-radius: 12px; padding: 16px 12px 14px; margin-bottom: 20px; } body.dark .popup-cat-cores-painel { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); } /* Linha de cores + preview */ .popup-cat-cores-wrap { display: flex; align-items: flex-end; justify-content: center; gap: 14px; } .popup-cat-cor-grupo { display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Seta — mostra visualmente que Fundo+Texto formam o Preview ao lado; reaproveita a mesma coluna label+conteúdo (com label invisível) pra ficar alinhada com os círculos automaticamente, sem precisar acertar um deslocamento manual em pixels. */ .popup-cat-seta { width: 20px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #aebde3; } body.dark .popup-cat-seta { color: rgba(255,255,255,0.25); } /* Círculo de cor — esconde input nativo, mostra swatch clicável */ .popup-cat-cor-input { width: 0; height: 0; opacity: 0; position: absolute; pointer-events: none; } .popup-cat-swatch { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #dde3f0, 0 4px 12px rgba(28,63,145,0.13); cursor: pointer; transition: box-shadow 0.18s, transform 0.15s; flex-shrink: 0; display: block; } .popup-cat-swatch:hover { box-shadow: 0 0 0 2.5px #3a6edc, 0 6px 18px rgba(58,110,220,0.22); transform: scale(1.08); } body.dark .popup-cat-swatch { border-color: rgba(255,255,255,0.12); box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.3); } /* Preview */ .popup-cat-preview-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; } .popup-cat-preview { border-radius: 20px; padding: 7px 18px; font-size: 12px; font-weight: 700; min-width: 90px; height: 42px; box-sizing: border-box; text-align: center; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, box-shadow 0.2s; letter-spacing: 0.2px; box-shadow: 0 3px 12px rgba(0,0,0,0.13); font-family: inherit; } /* ── Color Picker customizado ── */ #cat-color-picker-overlay { display: none; position: fixed; inset: 0; /* Precisa ficar acima de #splash-screen (z-index:999999) — o seletor agora também abre de dentro da tela de apelido (ver presenca.js), que vive dentro do splash. Valor bem alto de propósito, folga grande pra continuar acima de qualquer coisa nova no futuro. */ z-index: 1000998; } #cat-color-picker { display: none; position: fixed; z-index: 1000999; background: #fff; border-radius: 20px; box-shadow: 0 12px 48px rgba(28,63,145,0.22), 0 2px 8px rgba(0,0,0,0.08); padding: 18px 18px 14px; width: 260px; user-select: none; border: 1px solid rgba(220,230,248,0.8); } body.dark #cat-color-picker { background: #1a2340; border-color: rgba(255,255,255,0.1); box-shadow: 0 12px 48px rgba(0,0,0,0.5); } #cat-cp-canvas { width: 224px; height: 160px; border-radius: 12px; display: block; cursor: crosshair; margin-bottom: 12px; } #cat-cp-hue { width: 224px; height: 14px; border-radius: 7px; cursor: pointer; display: block; margin-bottom: 12px; background: linear-gradient(to right, hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%), hsl(90,100%,50%), hsl(120,100%,50%), hsl(150,100%,50%), hsl(180,100%,50%), hsl(210,100%,50%), hsl(240,100%,50%), hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%), hsl(360,100%,50%)); border: none; outline: none; -webkit-appearance: none; appearance: none; } #cat-cp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2.5px solid rgba(255,255,255,0.9); box-shadow: 0 0 0 1.5px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.22); cursor: pointer; transition: transform 0.1s; } #cat-cp-hue::-webkit-slider-thumb:hover { transform: scale(1.15); } #cat-cp-hue::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2.5px solid rgba(255,255,255,0.9); box-shadow: 0 0 0 1.5px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.22); cursor: pointer; } .cat-cp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } #cat-cp-swatch-preview { width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px #dde3f0, 0 2px 8px rgba(0,0,0,0.12); flex-shrink: 0; transition: background 0.1s; } #cat-cp-hex { flex: 1; border: 1.5px solid #dde3f0; border-radius: 9px; padding: 6px 10px; font-size: 12px; font-family: 'Courier New', monospace; font-weight: 600; color: #1a2a5e; outline: none; background: #f4f6fc; text-transform: uppercase; transition: border-color 0.15s; } #cat-cp-hex:focus { border-color: #3a6edc; } body.dark #cat-cp-hex { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); } /* Botões */ .popup-cat-form-btns { display: flex; gap: 10px; } .popup-cat-btn-cancel { flex: 1; background: none; border: 1.5px solid #dde3f0; border-radius: 11px; padding: 11px 0; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; color: #8a9cc8; transition: border-color 0.15s, color 0.15s; } .popup-cat-btn-cancel:hover { border-color: #bbc6e0; color: #3a6edc; } body.dark .popup-cat-btn-cancel { border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.5); } body.dark .popup-cat-btn-cancel:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); } .popup-cat-btn-save { flex: 1; background: linear-gradient(135deg, #1c3f91, #3a6edc); border: none; border-radius: 11px; padding: 11px 0; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; color: #fff; box-shadow: 0 3px 12px rgba(58,110,220,0.28); transition: opacity 0.15s; } .popup-cat-btn-save:hover { opacity: 0.88; } body.dark .popup-cat-btn-save { background: linear-gradient(135deg, #2a52b0, #4a7ed8) !important; } /* Botão + Nova categoria */ .popup-cat-btn-add { width: 100%; background: none; border: none; padding: 6px 0; font-size: 11px; font-weight: 600; font-family: inherit; cursor: pointer; color: #8a9cc8; transition: color 0.15s; text-align: center; } .popup-cat-btn-add:hover { color: #3a6edc; } body.dark .popup-cat-btn-add { color: rgba(255,255,255,0.3); } body.dark .popup-cat-btn-add:hover { color: rgba(255,255,255,0.7); } /* ══ TELA ANUAL ══ */ /* ── 26. PÁGINA ANUAL ─────────────────────────────────────────────────── */ .anual-container { width: 100%; padding: 48px 60px 60px; box-sizing: border-box; } .anual-header-row { display: flex; align-items: center; justify-content: flex-end; width: 100%; padding: 0 0 36px; box-sizing: border-box; position: relative; } /* Badge "Dados até Mês/Ano" — some quando o filtro "Somar meses futuros" está desligado e o ano exibido é o ano corrente (único caso em que há algo de fato excluído). Fica à esquerda porque o header usa justify-content:flex-end (Personalizar + navegação de ano à direita); margin-right:auto empurra o badge pro lado oposto sem alterar o posicionamento dos elementos existentes. */ .anual-filtro-indicador { margin-right: auto; font-size: 11px; font-weight: 700; color: #6a7fb8; background: rgba(58,110,220,0.08); border: 1px solid rgba(58,110,220,0.16); border-radius: 99px; padding: 5px 12px; white-space: nowrap; } body.dark .anual-filtro-indicador { color: rgba(180,205,255,0.85); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); } .anual-titulo { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 22px; font-weight: 700; color: #0f1f5c; margin: 0; position: absolute; left: 50%; transform: translateX(-50%); } body.dark .anual-titulo { color: rgba(255,255,255,0.92); } .anual-ano-nav { display: flex; align-items: center; gap: 12px; } .anual-ano-label { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 16px; font-weight: 700; color: #1c3f91; min-width: 48px; text-align: center; } body.dark .anual-ano-label { color: rgba(255,255,255,0.85); } #view-anual { min-height: calc(100vh - 52px); display: flex; flex-direction: column; } body.pagina-anual { overflow: hidden; } /* ── Grid assimétrico: saldo à esquerda, 3 compactos à direita ── */ .anual-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: stretch; margin-top: 32px; } .anual-col-direita { display: flex; flex-direction: column; gap: 20px; } /* ── Card base ── */ .anual-widget { background: #fff; border-radius: 18px; border: 1.5px solid #a8c4f0; box-shadow: 0 4px 20px rgba(28,63,145,0.10); display: flex; flex-direction: column; cursor: pointer; user-select: none; transition: box-shadow 0.2s, transform 0.18s; } .anual-widget:hover { box-shadow: 0 6px 28px rgba(28,63,145,0.15); transform: translateY(-2px); } body.dark .anual-widget { background: rgba(255,255,255,0.04); border-color: rgba(160,200,255,0.32); box-shadow: 0 2px 16px rgba(0,0,0,0.25); } body.dark .anual-widget:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.38); } /* Gradiente diagonal suave */ #widget-faturado, #widget-gastos, #widget-saldo, #widget-reserva { background: linear-gradient(145deg, rgba(58,110,220,0.04) 0%, #fff 55%); } body.dark #widget-faturado, body.dark #widget-gastos, body.dark #widget-saldo, body.dark #widget-reserva { background: linear-gradient(145deg, rgba(58,110,220,0.10) 0%, rgba(255,255,255,0.03) 55%); } /* ── Card SALDO — protagonista ── */ .anual-widget--saldo { padding: 40px 40px 32px; gap: 0; } /* ── Cards compactos (Faturado / Gasto / Reserva) ── */ .anual-widget--sm { padding: 28px 32px; flex-direction: row; align-items: center; gap: 20px; flex: 1; } /* ── Topo: ícone + info ── */ .anual-widget-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .anual-widget--sm .anual-widget-top { display: contents; /* ícone e info ficam inline no flex row do card */ } .anual-widget-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } /* ── Ícone ── */ .anual-widget-icon { border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .anual-widget--saldo .anual-widget-icon { width: 60px; height: 60px; margin-top: 2px; } .anual-widget--sm .anual-widget-icon { width: 52px; height: 52px; } .anual-widget-icon--verde { background: rgba(34,197,94,0.12); color: #16a34a; } .anual-widget-icon--vermelho { background: rgba(239,68,68,0.10); color: #dc2626; } .anual-widget-icon--azul { background: rgba(58,110,220,0.10); color: #1c3f91; } .anual-widget-icon--dourado { background: rgba(202,138,4,0.12); color: #a16207; } body.dark .anual-widget-icon--verde { background: rgba(34,197,94,0.15); color: #4ade80; } body.dark .anual-widget-icon--vermelho { background: rgba(239,68,68,0.15); color: #f87171; } body.dark .anual-widget-icon--azul { background: rgba(100,160,255,0.15); color: #7ab0ff; } body.dark .anual-widget-icon--dourado { background: rgba(250,204,21,0.15); color: #fbbf24; } /* ── Labels e valores ── */ .anual-widget-label { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 12px; font-weight: 600; color: #8a9cc8; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 2px; } body.dark .anual-widget-label { color: rgba(255,255,255,0.38); } .anual-widget-total { font-family: 'Outfit', 'Century Gothic', sans-serif; font-weight: 700; line-height: 1.1; } .anual-widget--saldo .anual-widget-total { font-size: 52px; margin-bottom: 4px; } .anual-widget--sm .anual-widget-total { font-size: 30px; } .anual-widget-total.verde { color: #0f1f5c; } .anual-widget-total.vermelho { color: #0f1f5c; } .anual-widget-total.azul { color: #0f1f5c; } .anual-widget-total.dourado { color: #0f1f5c; } .anual-widget-total.vermelho-saldo { color: #dc2626; } body.dark .anual-widget-total.verde { color: rgba(255,255,255,0.92); } body.dark .anual-widget-total.vermelho { color: rgba(255,255,255,0.92); } body.dark .anual-widget-total.azul { color: rgba(255,255,255,0.92); } body.dark .anual-widget-total.dourado { color: rgba(255,255,255,0.92); } body.dark .anual-widget-total.vermelho-saldo { color: #f87171; } .anual-widget-desc { font-size: 12.5px; color: #b0bcd8; } body.dark .anual-widget-desc { color: rgba(255,255,255,0.22); } /* ── CTA ── */ .anual-widget-cta { font-size: 13px; font-weight: 600; font-family: 'Outfit', 'Century Gothic', sans-serif; color: #3a6edc; opacity: 0.55; transition: opacity 0.15s; margin-top: 22px; align-self: flex-end; } .anual-widget:hover .anual-widget-cta { opacity: 1; } body.dark .anual-widget-cta { color: rgba(100,160,255,0.65); } body.dark .anual-widget:hover .anual-widget-cta { color: rgba(100,160,255,1); opacity: 1; } /* ── Sparkline — versão grande (saldo) ── */ .anual-sparkline-wrap { } .anual-sparkline-wrap--lg { margin-top: auto; padding-top: 8px; } .anual-sparkline-wrap--mini { flex-shrink: 0; width: 110px; } .anual-sparkline { display: flex; align-items: flex-end; gap: 3px; width: 100%; } .anual-sparkline--lg { height: 130px; } .anual-sparkline--mini { height: 56px; gap: 2px; } .anual-spark-bar { flex: 1; border-radius: 3px 3px 0 0; min-height: 5px; transition: height 0.4s cubic-bezier(0.34,1.2,0.64,1); } .anual-spark-bar--verde { background: rgba(22,163,74,0.70); } .anual-spark-bar--vermelho { background: rgba(220,38,38,0.62); } .anual-spark-bar--azul-pos { background: rgba(28,63,145,0.65); } .anual-spark-bar--azul-neg { background: rgba(220,38,38,0.65); } .anual-spark-bar--dourado { background: rgba(161,98,7,0.62); } .anual-spark-bar--vazio { background: rgba(58,110,220,0.10); } .anual-spark-bar--destaque.anual-spark-bar--verde { background: #16a34a; } .anual-spark-bar--destaque.anual-spark-bar--vermelho { background: #dc2626; } .anual-spark-bar--destaque.anual-spark-bar--azul-pos { background: #1c3f91; } .anual-spark-bar--destaque.anual-spark-bar--azul-neg { background: #dc2626; } .anual-spark-bar--destaque.anual-spark-bar--dourado { background: #a16207; } body.dark .anual-spark-bar--verde { background: rgba(74,222,128,0.55); } body.dark .anual-spark-bar--vermelho { background: rgba(248,113,113,0.55); } body.dark .anual-spark-bar--azul-pos { background: rgba(100,160,255,0.58); } body.dark .anual-spark-bar--azul-neg { background: rgba(248,113,113,0.58); } body.dark .anual-spark-bar--dourado { background: rgba(251,191,36,0.52); } body.dark .anual-spark-bar--vazio { background: rgba(255,255,255,0.09); } body.dark .anual-spark-bar--destaque.anual-spark-bar--verde { background: #4ade80; } body.dark .anual-spark-bar--destaque.anual-spark-bar--vermelho { background: #f87171; } body.dark .anual-spark-bar--destaque.anual-spark-bar--azul-pos { background: #7ab0ff; } body.dark .anual-spark-bar--destaque.anual-spark-bar--azul-neg { background: #f87171; } body.dark .anual-spark-bar--destaque.anual-spark-bar--dourado { background: #fbbf24; } .anual-spark-meses { display: flex; gap: 3px; margin-top: 5px; } .anual-spark-mes { flex: 1; font-size: 9.5px; font-weight: 600; color: #c0cce8; font-family: 'Outfit', 'Century Gothic', sans-serif; text-align: center; line-height: 1; } .anual-spark-mes--destaque { color: #1c3f91; font-weight: 700; } body.dark .anual-spark-mes { color: rgba(255,255,255,0.18); } body.dark .anual-spark-mes--destaque { color: rgba(150,200,255,0.85); } /* ── Coluna + dot do mês atual no sparkline grande ── */ .anual-spark-col-destaque { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .anual-spark-col-destaque .anual-spark-bar { width: 100%; flex: none; } .anual-spark-dot-atual { width: 5px; height: 5px; border-radius: 50%; background: #1c3f91; margin-bottom: 4px; flex-shrink: 0; } body.dark .anual-spark-dot-atual { background: #7ab0ff; } /* ── Barra de proporção ── */ .anual-proporcao-wrap { margin-top: 2px; margin-bottom: 14px; } .anual-proporcao-track { width: 100%; height: 14px; border-radius: 8px; background: rgba(58,110,220,0.07); overflow: hidden; display: flex; } body.dark .anual-proporcao-track { background: rgba(255,255,255,0.07); } .anual-proporcao-gasto { height: 100%; background: linear-gradient(90deg, #c83232, #e05555); border-radius: 6px 0 0 6px; transition: width 0.55s cubic-bezier(0.34,1.1,0.64,1); } body.dark .anual-proporcao-gasto { background: linear-gradient(90deg, #dc2626, #f87171); } .anual-proporcao-saldo { height: 100%; background: linear-gradient(90deg, #1c3f91, #3a6edc); border-radius: 0 6px 6px 0; transition: width 0.55s cubic-bezier(0.34,1.1,0.64,1); } body.dark .anual-proporcao-saldo { background: linear-gradient(90deg, #2a5fd4, #5a9aff); } .anual-proporcao-legenda { display: flex; justify-content: space-between; margin-top: 7px; } .anual-prop-leg { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; font-family: 'Outfit', 'Century Gothic', sans-serif; } .anual-prop-leg--gasto { color: #c83232; } .anual-prop-leg--saldo { color: #1c3f91; } body.dark .anual-prop-leg--gasto { color: #f87171; } body.dark .anual-prop-leg--saldo { color: #7ab0ff; } .anual-prop-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .anual-prop-dot--gasto { background: #c83232; } .anual-prop-dot--saldo { background: #1c3f91; } body.dark .anual-prop-dot--gasto { background: #f87171; } body.dark .anual-prop-dot--saldo { background: #7ab0ff; } /* ── Insight inline (dentro do card saldo) ── */ .anual-insight-inline { display: flex; align-items: flex-start; gap: 9px; background: rgba(58,110,220,0.05); border: 1px solid rgba(58,110,220,0.11); border-radius: 12px; padding: 13px 18px; font-size: 13px; color: #4a5a8a; font-family: 'Outfit', 'Century Gothic', sans-serif; line-height: 1.55; margin-bottom: 6px; } body.dark .anual-insight-inline { background: rgba(100,160,255,0.07); border-color: rgba(100,160,255,0.14); color: rgba(200,220,255,0.65); } .anual-insight-icon { color: #3a6edc; flex-shrink: 0; opacity: 0.65; margin-top: 1px; } body.dark .anual-insight-icon { color: rgba(100,160,255,0.75); } /* ── Popup gráfico ── */ .anual-popup-header { display: flex; align-items: center; gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid rgba(58,110,220,0.09); background: linear-gradient(180deg, rgba(58,110,220,0.03) 0%, rgba(58,110,220,0.00) 100%); border-radius: 20px 20px 0 0; } body.dark #anual-popup { background: #1a2f6e !important; border: 1.5px solid rgba(160,200,255,0.35) !important; box-shadow: 0 12px 48px rgba(0,0,0,0.45) !important; } body.dark .anual-popup-header { border-bottom-color: rgba(255,255,255,0.07); } .anual-popup-header-left { display: flex; align-items: center; gap: 12px; flex: 1; } .anual-popup-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .anual-popup-titulo { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 16px; font-weight: 700; color: #0f1f5c; line-height: 1.2; } body.dark .anual-popup-titulo { color: rgba(255,255,255,0.92); } .anual-popup-subtitulo { font-size: 11px; color: #8a9cc8; margin-top: 1px; } body.dark .anual-popup-subtitulo { color: rgba(255,255,255,0.35); } .anual-popup-total { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 22px; font-weight: 700; color: #0f1f5c; margin-right: 8px; } body.dark .anual-popup-total { color: rgba(255,255,255,0.92); } .anual-popup-fechar { background: none; border: none; cursor: pointer; color: #b0bcd8; padding: 6px; border-radius: 8px; display: flex; align-items: center; transition: color 0.15s, background 0.15s; flex-shrink: 0; } .anual-popup-fechar:hover { color: #1c3f91; background: rgba(58,110,220,0.07); } body.dark .anual-popup-fechar { color: rgba(255,255,255,0.3); } body.dark .anual-popup-fechar:hover { color: #fff; background: rgba(255,255,255,0.08); } .anual-popup-body { padding: 28px 32px 32px; background: linear-gradient(180deg, rgba(58,110,220,0.03) 0%, #fff 35%); } body.dark .anual-popup-body { background: linear-gradient(180deg, rgba(58,110,220,0.10) 0%, #1a2f6e 40%); } /* ── Gráfico de barras (popup) ── */ .anual-chart-wrap { width: 100%; overflow-x: auto; } .anual-bars { display: flex; align-items: flex-end; gap: 10px; min-width: 500px; height: 240px; padding-bottom: 28px; position: relative; } .anual-bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; gap: 5px; position: relative; } .anual-bar-valor { font-size: 10.5px; font-weight: 700; font-family: 'Outfit', 'Century Gothic', sans-serif; color: #5a6a9a; white-space: nowrap; text-align: center; line-height: 1; } body.dark .anual-bar-valor { color: rgba(255,255,255,0.55); } .anual-bar-track { width: 100%; border-radius: 6px 6px 0 0; min-height: 4px; transition: height 0.45s cubic-bezier(0.34,1.2,0.64,1); } .anual-bar-track--verde { background: linear-gradient(to top, #0d7a34, #22a855); } .anual-bar-track--vermelho { background: linear-gradient(to top, #9b1c1c, #c83232); } .anual-bar-track--azul { background: linear-gradient(to top, #1c3f91, #3a6edc); } .anual-bar-track--negativo { background: linear-gradient(to top, #9b1c1c, #c83232); } .anual-bar-track--dourado { background: linear-gradient(to top, #92400e, #d97706); } .anual-bar-track--vazio { background: rgba(58,110,220,0.07); } body.dark .anual-bar-track--vermelho { background: linear-gradient(to top, #dc2626, #f87171); } body.dark .anual-bar-track--azul { background: linear-gradient(to top, #2a5fd4, #5a9aff); } body.dark .anual-bar-track--negativo { background: linear-gradient(to top, #dc2626, #f87171); } body.dark .anual-bar-track--dourado { background: linear-gradient(to top, #b45309, #fbbf24); } body.dark .anual-bar-track--vazio { background: rgba(255,255,255,0.06); } body.dark .anual-bar-track--verde { background: linear-gradient(to top, #16a34a, #4ade80); } .anual-bar-mes { position: absolute; bottom: -20px; font-size:10px; font-weight: 600; color: #9aabcc; font-family: 'Outfit', 'Century Gothic', sans-serif; text-align: center; white-space: nowrap; } body.dark .anual-bar-mes { color: rgba(255,255,255,0.3); } .anual-bar-col.destaque .anual-bar-track { filter: drop-shadow(0 0 6px rgba(58,110,220,0.25)); } .anual-bar-col.destaque .anual-bar-mes { color: #1c3f91; font-weight: 700; } body.dark .anual-bar-col.destaque .anual-bar-mes { color: rgba(255,255,255,0.8); } /* ── BOTÃO PERSONALIZAR VISÃO ANUAL ── */ .btn-anual-editar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid #a3c0ef; border-radius: 8px; background: #fff; color: #8a9cc8; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .btn-anual-editar:hover { border-color: #3a6edc; color: #3a6edc; background: rgba(58,110,220,0.04); } .btn-anual-editar.ativo { border-color: #3a6edc; color: #fff; background: linear-gradient(135deg,#1c3f91,#3a6edc); } .btn-anual-editar.ativo svg { stroke: #fff; } body.dark .btn-anual-editar { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.45); } body.dark .btn-anual-editar:hover { border-color: #7ab0ff; color: #7ab0ff; background: rgba(100,160,255,0.08); } body.dark .btn-anual-editar.ativo { background: linear-gradient(135deg,#2a52b0,#4a7ed8); border-color: transparent; color: #fff; } /* ── MODO EDIÇÃO — widgets arrastáveis ── */ /* ── Modo editar: widgets ── */ .anual-grid.modo-editar .anual-widget { cursor: grab; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; animation: widget-editar-in 0.25s ease both; } @keyframes widget-editar-in { from { transform: scale(0.985); opacity: 0.6; } to { transform: scale(1); opacity: 1; } } .anual-grid.modo-editar .anual-widget:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 32px rgba(58,110,220,0.18); z-index: 2; } .anual-grid.modo-editar .anual-widget.dragging { opacity: 0.25; cursor: grabbing; transform: scale(0.96); box-shadow: none; } .anual-grid.modo-editar .anual-widget.drag-over { transform: scale(1.02); box-shadow: 0 0 0 2.5px #3a6edc, 0 12px 36px rgba(58,110,220,0.18); background: rgba(58,110,220,0.03); } body.dark .anual-grid.modo-editar .anual-widget:hover { box-shadow: 0 10px 32px rgba(100,160,255,0.18); } body.dark .anual-grid.modo-editar .anual-widget.drag-over { box-shadow: 0 0 0 2.5px #7ab0ff, 0 12px 36px rgba(100,160,255,0.18); background: rgba(100,160,255,0.05); } /* Badge arrastar */ .anual-drag-hint { position: absolute; top: 10px; right: 12px; font-size: 10px; font-weight: 700; font-family: 'Outfit','Century Gothic',sans-serif; color: #3a6edc; background: rgba(58,110,220,0.10); border-radius: 6px; padding: 3px 8px; letter-spacing: 0.3px; pointer-events: none; display: flex; align-items: center; gap: 4px; opacity: 0; animation: hint-in 0.3s ease 0.15s both; } @keyframes hint-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } body.dark .anual-drag-hint { color: #7ab0ff; background: rgba(100,160,255,0.15); } .anual-widget { position: relative; } /* ── WINDOW CONTROLS OVERLAY — faixa fina de título ──────────────────── * Fica ao lado dos botões de minimizar/maximizar/fechar do próprio SO * (Windows/ChromeOS) quando o app está instalado e rodando nesse modo * específico. Bloco colocado no FIM do arquivo de propósito: as regras * de mesma especificidade (".topnav" aqui vs. ".topnav" lá em cima) * são decididas por ordem no arquivo — precisa vir depois pra vencer. * display:none fora da media query é o estado padrão: cobre aba de * navegador normal e PWA instalado sem suporte a WCO (macOS, Firefox, * Safari) — nesses casos nada aqui tem efeito nenhum. * ────────────────────────────────────────────────────────────────────── */ .wco-titlebar { display: none; } @media (display-mode: window-controls-overlay) { .wco-titlebar { display: flex; align-items: center; gap: 8px; position: fixed; top: 0; left: 0; right: 0; height: env(titlebar-area-height, 33px); padding-left: max(env(titlebar-area-x, 0px), 10px); background: #0a1540; -webkit-app-region: drag; app-region: drag; z-index: 101; } .wco-titlebar-icon { flex-shrink: 0; } .wco-titlebar-nome { font-family: 'Outfit', 'Century Gothic', sans-serif; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.2px; } /* Empurra a página pra baixo da faixa fixa — sem isso o topo do conteúdo (o .topnav, que é sticky) começava escondido debaixo dela. */ body { padding-top: env(titlebar-area-height, 33px); } /* .topnav é sticky no topo do scroll — precisa parar logo abaixo da faixa fixa, não embaixo dela (que ficaria por cima, encobrindo). */ .topnav { top: env(titlebar-area-height, 33px); } /* Logo + nome saem do topnav (viraram a faixa acima) — evita duplicar a marca duas vezes empilhada quando o modo overlay está ativo. */ .topnav-left .topnav-icon, .topnav-left h2 { display: none; } }