/* Login no CELULAR (sugestão A, 01/11/2026): sem cartão; a tela toda é preta com um brilho azul suave atrás do ícone, tudo centralizado,
   campos com ícone azul dentro e botão azul. No PC o cartão de sempre (app.css) continua. Só a tela /entrar usa este arquivo. */
@media (max-width: 720px) {
    body.login--tela { display: block; padding: 0; min-height: 100vh; min-height: 100dvh; background: #000; }
    body.login--tela .login__cartao {
        max-width: none; min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
        display: flex; flex-direction: column; align-items: center;
        padding: calc(env(safe-area-inset-top, 0px) + 96px) 28px calc(env(safe-area-inset-bottom, 0px) + 32px);
        border: none; border-radius: 0;
        background: radial-gradient(ellipse closest-side at 50% 50%, rgba(59, 130, 246, 0.32), rgba(59, 130, 246, 0)) no-repeat 50% -60px / 560px 440px, #000;
    }
    body.login--tela .login__marca { width: 76px; height: 76px; border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 30px -10px rgba(37, 99, 235, 0.8); }
    body.login--tela .login__marca .ico { width: 38px; height: 38px; }
    body.login--tela .login__cartao h1 { font-size: 28px; font-weight: 500; margin: 20px 0 4px; text-align: center; }
    body.login--tela .login__cartao p { font-size: 15px; color: rgba(255, 255, 255, 0.6); margin: 0 0 56px; text-align: center; }
    body.login--tela .aviso { width: 100%; box-sizing: border-box; margin: -28px 0 20px; }
    body.login--tela .campo { width: 100%; margin-bottom: 18px; }
    body.login--tela .campo label { font-size: 11px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 0 0 7px 2px; }
    body.login--tela .campo input {
        height: 50px; box-sizing: border-box; width: 100%; padding: 0 16px 0 46px; border-radius: 14px; font-size: 16px; color: #f5f5f5;
        background-color: #0d0d10; border: 1px solid #232328; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
        background-repeat: no-repeat; background-position: 15px center; background-size: 20px 20px;
    }
    body.login--tela .campo input::placeholder { color: rgba(255, 255, 255, 0.4); }
    body.login--tela .campo input[type="email"] {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%235b9bff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20width%3D'20'%20height%3D'16'%20x%3D'2'%20y%3D'4'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'm22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207'%2F%3E%3C%2Fsvg%3E");
    }
    body.login--tela .campo input[type="password"] {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%235b9bff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2.586%2017.414A2%202%200%200%200%202%2018.828V21a1%201%200%200%200%201%201h3a1%201%200%200%200%201-1v-1a1%201%200%200%201%201-1h1a1%201%200%200%200%201-1v-1a1%201%200%200%201%201-1h.172a2%202%200%200%200%201.414-.586l.814-.814a6.5%206.5%200%201%200-4-4z'%2F%3E%3Ccircle%20cx%3D'16.5'%20cy%3D'7.5'%20r%3D'.5'%20fill%3D'%235b9bff'%2F%3E%3C%2Fsvg%3E");
    }
    body.login--tela .btn--cheio { height: 54px; border-radius: 14px; font-size: 17px; font-weight: 500; margin-top: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px -8px rgba(37, 99, 235, 0.65); }
}