/* ==========================================================================
   TELA DE ENTRAR com filme de fundo (30/09/2026, padrão do Agileiro, como o
   EVMWeb e os sistemas da CoreBox). Arquivo próprio, carregado só pelo
   Login_Layout: o site.css do sistema não entra aqui, para nada dele vazar.
   Vermelho da Análise acendido para o fundo escuro (#E8625E, o mesmo do tema
   escuro do Análise Projetos); o botão usa o #C23A36 com texto branco (5:1).
   ========================================================================== */
body.tela-login {
    margin: 0;
    min-height: 100vh;
    background: #0B0F16;      /* o que aparece antes do primeiro quadro */
    color: #E6EAF2;
    overflow-x: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.login-filme {
    position: fixed; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
    /* Dois filmes emendados: só o .ativo aparece; a troca é um esmaecimento curto. */
    opacity: 0; transition: opacity .6s ease;
}
.login-filme.ativo { opacity: 1; }

/* Véu: escurece o filme e um pouco mais embaixo, onde fica a assinatura. */
.login-veu {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 8, 10, .40) 0%, rgba(10, 8, 10, .34) 45%, rgba(10, 8, 10, .76) 100%);
}

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

.login-cartao {
    width: 100%; max-width: 380px;
    background: rgba(20, 18, 22, .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;
}

/* O logotipo é quadrado com fundo branco: vai numa placa branca arredondada. */
.login-marca { display: flex; justify-content: center; margin: 2px 0 18px; }
.login-marca img { height: 84px; width: 84px; background: #fff; border-radius: 12px; padding: 6px; }

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

.tela-login .form-label { color: #D2CCD3; font-size: .84rem; font-weight: 600; margin-bottom: 5px; }
.tela-login .form-control {
    height: 42px;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    color: #F1F4F9;
}
.tela-login .form-control:focus {
    background-color: rgba(255, 255, 255, .09);
    border-color: #E8625E;
    box-shadow: 0 0 0 3px rgba(232, 98, 94, .22);
    color: #F1F4F9;
}
/* O preenchimento automático do navegador pinta o campo de claro: volta ao vidro. */
.tela-login .form-control:-webkit-autofill {
    -webkit-text-fill-color: #F1F4F9;
    -webkit-box-shadow: 0 0 0 1000px #2a2528 inset;
    caret-color: #F1F4F9;
}
.tela-login .form-check-label { color: #D2CCD3; font-size: .88rem; }
.tela-login .form-check-input { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.tela-login .form-check-input:checked { background-color: #C23A36; border-color: #C23A36; }
.tela-login .text-danger { color: #FF8A80 !important; }

.login-link { color: #D2CCD3; font-size: .85rem; text-decoration: none; }
.login-link:hover { color: #fff; text-decoration: underline; }

.btn-entrar {
    width: 100%; background: #C23A36; color: #fff; border: none; border-radius: 8px;
    padding: 11px; font-weight: 600; transition: background .15s ease;
}
.btn-entrar:hover, .btn-entrar:focus { background: #A82F2C; color: #fff; }
.btn-entrar:focus-visible { outline: 2px solid #E8625E; outline-offset: 2px; }

.login-aviso { border-radius: 8px; padding: 9px 12px; font-size: .85rem; }
.login-aviso-erro { background: rgba(179, 38, 30, .20); border: 1px solid rgba(244, 180, 174, .35); color: #F4B4AE; }
.login-aviso-ok { background: rgba(14, 122, 95, .22); border: 1px solid rgba(111, 211, 177, .35); color: #9FE4CB; }

/* Assinatura da marca no canto de baixo, sobre o véu mais escuro. */
.login-assinatura {
    position: fixed; left: 32px; bottom: 34px; z-index: 2;
    display: flex; flex-direction: column; gap: 4px; pointer-events: none;
}
.login-assinatura strong { color: #fff; font-size: 2.6rem; font-weight: 800; letter-spacing: .02em; line-height: 1; }
.login-assinatura span {
    color: #E8625E; font-size: .78rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
}
.login-rodape { position: fixed; right: 24px; bottom: 18px; z-index: 2; font-size: .72rem; color: #9A949B; }

/* Botão de pausar o filme, no canto de cima (onde o exemplo põe o som). */
.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(20, 18, 22, .55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #E6EAF2; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.login-pausa:hover { background: rgba(20, 18, 22, .8); color: #fff; }
.login-pausa:focus-visible { outline: 2px solid #E8625E; outline-offset: 2px; }

@media (max-width: 700px) {
    .login-centro { align-items: flex-start; padding: 64px 14px 110px; }
    .login-cartao { padding: 24px 20px 20px; }
    .login-marca img { height: 68px; width: 68px; }
    .login-assinatura { left: 18px; bottom: 40px; }
    .login-assinatura strong { font-size: 1.9rem; }
    .login-assinatura span { font-size: .68rem; letter-spacing: .12em; }
    .login-rodape { left: 18px; right: auto; bottom: 14px; }
    .login-pausa span { display: none; }
}

/* Tela baixa (notebook com zoom): a assinatura sai do caminho do cartão. */
@media (max-height: 700px) {
    .login-assinatura, .login-rodape { position: absolute; }
}