/* ============================================================
   Página de login — glassmorphism sobre gradiente ARGOS
   Usada apenas pelo index.php. Os ids/classes do formulário
   (#formLogin, #login, #senha, #btnLogin) são contrato com
   js/componentes/login.js — não renomear.
   ============================================================ */

/* ---- Fundo: gradiente profundo com brilhos radiais ---- */
body.login-page {
    min-height: 100vh;
    background:
        radial-gradient(1100px 750px at 12% -8%, rgba(78, 115, 223, 0.5), transparent 60%),
        radial-gradient(950px 700px at 108% 108%, rgba(54, 185, 204, 0.35), transparent 55%),
        radial-gradient(700px 500px at 85% 15%, rgba(94, 80, 200, 0.25), transparent 60%),
        linear-gradient(160deg, #0c1633 0%, #16244f 55%, #1e3a8a 100%);
    background-attachment: fixed;
}

/* ---- Card de vidro ---- */
.login-page .card {
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.16) !important; /* vence o .border-0 do template */
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(3, 10, 34, 0.5);
    animation: login-entrada 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes login-entrada {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

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

/* ---- Logo e títulos ---- */
.login-page .login-logo {
    width: 120px;
    height: 120px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.login-page .login-titulo {
    color: #fff;
    font-weight: 700;
    margin-bottom: 2px;
}

.login-page .login-subtitulo {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-bottom: 1.6rem;
}

/* ---- Inputs de vidro ----
   seletores com form.user pra vencer as regras form.user .* do argos.css */
.login-page form.user .form-control-user {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    padding: 0.9rem 1.1rem;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.login-page form.user .form-control-user::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.login-page form.user .form-control-user:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(122, 158, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.22);
    color: #fff;
    outline: none;
}

/* autofill do Chrome insiste em fundo claro — força o tema escuro
   (:hover/:focus são obrigatórios: o Chrome reaplica o amarelo neles) */
.login-page input:-webkit-autofill,
.login-page input:-webkit-autofill:hover,
.login-page input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1b2a55 inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    transition: background-color 9999s ease-out;
}

/* ---- Botão de login ----
   NENHUMA propriedade que promova camada composta (transform, filter,
   opacity) neste botão: ele vive dentro de um card com backdrop-filter
   e o Chromium perde o border-radius da camada em algumas GPUs (botão
   "fica quadrado" no hover). Hover/press = só sombra e cor; o bloom do
   clique anima background-size (repaint puro). */
.login-page form.user .btn-user {
    position: relative;
    background: linear-gradient(135deg, #4e73df, #224abe);
    border: none;
    border-radius: 12px;
    padding: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px rgba(34, 74, 190, 0.45);
    transition: box-shadow 0.15s ease;
}

/* o style.css do template tem `.btn.btn-primary:hover { border: 1.5px solid;
   background-color; border-radius: 5px }` tudo com !important — no login
   isso achatava o raio e criava borda no hover; contra-override escopado */
.login-page form.user .btn-user:hover {
    box-shadow: 0 16px 34px rgba(34, 74, 190, 0.6);
    border: none !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #5a7de4, #2a52c9) !important;
}

.login-page form.user .btn-user:active {
    background: linear-gradient(135deg, #3f63d0, #1c3fa8);
    box-shadow: 0 4px 12px rgba(34, 74, 190, 0.5);
    transition-duration: 0.05s;
}

/* bloom do clique: expande do centro enquanto pressionado */
.login-page form.user .btn-user::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 65%) center / 0% 0% no-repeat;
    transition: background-size 0.3s ease-out;
    pointer-events: none;
}

.login-page form.user .btn-user:active::after {
    background-size: 280% 280%;
    transition-duration: 0.15s;
}

/* ---- Divisor e rodapé ---- */
.login-page .card hr {
    border-color: rgba(255, 255, 255, 0.18);
    opacity: 1;
}

.login-page .card p.small {
    color: rgba(255, 255, 255, 0.6);
}