/* Tela de entrar (Login_Layout), no padrão da tela de entrar do EVMWeb: fundo em movimento na tela
   inteira, véu escuro e cartão de vidro escuro no centro.
   Sempre escura. No lugar do filme do EVMWeb, manchas de luz roxas e amarelas que andam devagar. */

body.tela-login {
    margin: 0;
    min-height: 100vh;
    padding: 0 !important;
    background: #0f0812 !important;
    background-image: none !important;
    color: #f1ebf4;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    overflow-x: hidden;
}

/* ---------- Fundo em movimento ---------- */
.login-fundo,
.login-filme {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.login-fundo {
    background:
        radial-gradient(1200px 700px at 80% 10%, #2a1031 0%, transparent 60%),
        linear-gradient(160deg, #1a0b1e 0%, #120815 55%, #0b0610 100%);
}

.login-fundo span {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    will-change: transform;
}

.login-fundo span:nth-child(1) {
    width: 62vmax; height: 62vmax; left: -16vmax; top: -24vmax;
    background: radial-gradient(circle, rgba(122, 58, 112, .9), rgba(122, 58, 112, 0) 65%);
    animation: login-a 22s ease-in-out infinite alternate;
}

.login-fundo span:nth-child(2) {
    width: 44vmax; height: 44vmax; right: -12vmax; top: 18vmax;
    background: radial-gradient(circle, rgba(248, 216, 88, .45), rgba(248, 216, 88, 0) 65%);
    animation: login-b 27s ease-in-out infinite alternate;
}

.login-fundo span:nth-child(3) {
    width: 56vmax; height: 56vmax; left: 20vmax; bottom: -32vmax;
    background: radial-gradient(circle, rgba(150, 90, 190, .7), rgba(150, 90, 190, 0) 65%);
    animation: login-c 25s ease-in-out infinite alternate;
}

.login-fundo span:nth-child(4) {
    width: 34vmax; height: 34vmax; left: 44vmax; top: 6vmax;
    background: radial-gradient(circle, rgba(192, 98, 170, .55), rgba(192, 98, 170, 0) 65%);
    animation: login-d 31s ease-in-out infinite alternate;
}

/* Grade fina por cima das cores, como textura */
.login-fundo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%);
}

.login-fundo.parado span { animation-play-state: paused; }

@keyframes login-a { to { transform: translate(24vmax, 10vmax) scale(1.12); } }
@keyframes login-b { to { transform: translate(-20vmax, -6vmax) scale(.9); } }
@keyframes login-c { to { transform: translate(-14vmax, -18vmax) scale(1.1); } }
@keyframes login-d { to { transform: translate(-26vmax, 16vmax) scale(1.18); } }

/* Véu: escurece por igual e um pouco mais embaixo, onde fica o rodapé */
.login-veu {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 6, 15, .45) 0%, rgba(12, 6, 15, .35) 45%, rgba(12, 6, 15, .72) 100%);
}

/* ---------- Cartão ---------- */
.login-centro {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 120px;
}

.login-painel { width: 100%; display: flex; justify-content: center; }

.login-cartao {
    width: 100%;
    max-width: 380px;
    background: rgba(26, 14, 31, .72);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    padding: 30px 28px 24px;
}

.login-marca { display: flex; justify-content: center; margin: 2px 0 18px; }
.login-marca img { height: 86px; width: auto; }

.login-titulo { font-size: 1.25rem; font-weight: 600; color: #f6f1f8; text-align: center; margin: 0 0 3px; }
.login-sub { font-size: .85rem; color: #ab9db6; text-align: center; margin: 0 0 22px; }

.tela-login .form-label { color: #d6c9de; font-size: .84rem; font-weight: 600; }

.tela-login .login-cartao .form-control {
    height: 44px;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    color: #f6f1f8;
}

.tela-login .login-cartao .form-control:focus {
    background-color: rgba(255, 255, 255, .09);
    border-color: #f8d858;
    box-shadow: 0 0 0 3px rgba(248, 216, 88, .22);
}

.login-desafio { display: flex; justify-content: center; min-height: 65px; margin: 4px 0 14px; }

/* Botão principal no amarelo da marca, aceso para o fundo escuro */
.btn-entrar {
    width: 100%;
    background: #f8d858;
    color: #2a1530;
    border: none;
    border-radius: 10px;
    padding: 11px;
    font-weight: 700;
    transition: background .15s ease;
}

.btn-entrar:hover,
.btn-entrar:focus { background: #ffe37a; color: #2a1530; }
.btn-entrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.tela-login .alert-warning {
    font-size: .86rem;
    background: rgba(255, 181, 71, .12);
    color: #ffd08a;
    border-color: rgba(255, 181, 71, .3);
}

.login-erros ul { list-style: none; padding: 0; margin: 0; font-size: .85rem; color: #ff9aa6; }
.login-erros.validation-summary-valid { display: none; }

/* ---------- Assinatura, rodapé e botão de pausa ---------- */
.login-rodape {
    position: fixed;
    right: 24px;
    bottom: 18px;
    z-index: 2;
    font-size: .72rem;
    color: #9a8aa6;
}

.login-pausa {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(26, 14, 31, .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #ece4f1;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.login-pausa:hover { background: rgba(26, 14, 31, .8); color: #fff; }
.login-pausa:focus-visible { outline: 2px solid #f8d858; outline-offset: 2px; }

@media (max-width: 700px) {
    .login-centro { align-items: flex-start; padding: 64px 14px 110px; }
    .login-cartao { padding: 24px 20px 20px; }
    .login-rodape { left: 18px; right: auto; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-fundo span { animation: none; }
}

/* Links do cartão (esqueci minha senha, voltar) e confirmação em verde */
.login-links { text-align: center; margin-top: 14px; font-size: .85rem; }
.login-links a { color: #d6c9de; text-decoration: none; }
.login-links a:hover { color: #fff; text-decoration: underline; }
.tela-login .alert-success { font-size: .86rem; background: rgba(61, 220, 151, .12); color: #9ff0c8; border-color: rgba(61, 220, 151, .3); }
.tela-login a.btn-entrar { display: block; text-align: center; text-decoration: none; }

/* Versão do sistema no rodapé (como no AnalisePlan) */
.login-rodape .versao { opacity: .8; }