/* ================================================================ * GESTÃO FINANCE — LOGIN MOBILE * * Esconde o painel esquerdo (hero/dashboard mock) em telas <= 820px, * mostra apenas o formulário de login centralizado, com logo no topo. * * Também esconde alguns elementos em DESKTOP e MOBILE: * - Badge "🎁 Teste grátis 30 dias" do hero * - Trial notice (cartão "Ainda não tem conta?") * - Botão "Falar com suporte" * * Carrega como overlay no do login.html — não altera o original. * ================================================================ */ /* === REGRAS PRA DESKTOP E MOBILE (fora da @media) === */ /* Esconde elementos solicitados em qualquer tamanho de tela */ .badge-trial, .trial-notice, .suporte-quick { display: none !important; } @media (max-width: 820px) { html, body { height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; } body { padding: 0 !important; } /* Brilho de fundo mais sutil no mobile */ body::before { background: radial-gradient(circle at 50% 20%, rgba(91,141,239,0.15), transparent 50%), radial-gradient(circle at 50% 80%, rgba(61,214,140,0.08), transparent 50%) !important; } /* Container vira coluna única */ .container { grid-template-columns: 1fr !important; height: auto !important; min-height: 100vh !important; overflow: visible !important; align-items: stretch !important; } /* ESCONDE TOTAL o painel esquerdo */ .hero { display: none !important; } /* Lado direito (login) ocupa tela toda, centralizado verticalmente */ .login-side { border-left: none !important; box-shadow: none !important; padding: 32px 22px 24px !important; height: auto !important; min-height: 100vh !important; overflow: visible !important; display: flex !important; flex-direction: column !important; justify-content: center !important; background: transparent !important; } /* Caixa de login centralizada */ .login-box { max-width: 380px !important; width: 100% !important; margin: 0 auto !important; } /* === LOGO + NOME no topo (CSS-only, posicionados absolutamente) === */ .login-box { position: relative; padding-top: 76px !important; /* espaço pro logo+nome */ } /* Ícone do logo (quadrado gradient) */ .login-box::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-110px); width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(135deg, #5B8DEF, #3DD68C); box-shadow: 0 6px 18px rgba(91,141,239,0.30); } /* Nome "Gestão Finance" ao lado direito do ícone */ .login-box::after { content: 'Gestão Finance'; position: absolute; top: 0; left: 50%; transform: translateX(-56px); height: 44px; line-height: 44px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF; pointer-events: none; white-space: nowrap; } /* Título h2 (Bem-vindo) */ .login-box h2 { font-size: 18px !important; text-align: center; } .login-box .login-sub { text-align: center; font-size: 12px !important; margin-bottom: 18px !important; } /* ESCONDER banner "Teste grátis 30 dias" no mobile */ .login-box .trial-notice { display: none !important; } body .trial-notice { display: none !important; } /* Inputs maiores para touch */ .login-box input[type="email"], .login-box input[type="password"], .login-box input[type="text"] { padding: 13px 14px !important; font-size: 14px !important; min-height: 46px; border-radius: 10px !important; } .login-box .form-group { margin-bottom: 12px !important; } .login-box label { font-size: 11px !important; } /* Botão Entrar grande */ .login-box .btn-entrar { padding: 14px !important; font-size: 14px !important; min-height: 48px; border-radius: 10px !important; width: 100%; margin-top: 6px; } /* Divider 'ou' menor */ .login-box .divider { margin: 14px 0 !important; font-size: 10px !important; } /* Botão Criar conta */ .login-box .btn-criar { padding: 12px !important; font-size: 13px !important; min-height: 44px; border-radius: 10px !important; } /* Step esqueci senha */ .login-box .esqueci-icon { width: 56px !important; height: 56px !important; font-size: 26px !important; } .login-box .esqueci-header h2 { font-size: 18px !important; } .login-box .esqueci-header p { font-size: 12px !important; } .login-box .check-circle { width: 64px !important; height: 64px !important; font-size: 32px !important; } /* Botão de suporte */ .login-box .suporte-quick { margin-top: 12px !important; padding: 9px 14px !important; font-size: 11px !important; } /* Footer */ .login-box .login-footer { margin-top: 18px !important; padding-top: 12px !important; font-size: 10px !important; } } /* iPhone SE e telas muito pequenas */ @media (max-width: 360px) { .login-side { padding: 22px 18px !important; } .login-box::before { width: 56px; height: 56px; } .login-box::after { font-size: 20px !important; } .login-box h2 { font-size: 16px !important; } }