/* Cores/tokens vêm de app-core.css (linkado antes deste arquivo em cada
   página de autenticação). Aqui fica só o layout específico das telas
   de login/cadastro/recuperação de senha. Fundo não é definido aqui de
   propósito — já vem certo do body{} do app-core.css. */

body{ min-height:100vh; display:flex; align-items:center; padding:1.5rem 0; }

.auth-card{ max-width:400px; width:100%; margin:auto; animation: fc-fade-up .35s var(--ease); }
@keyframes fc-fade-up{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }

.brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.6rem; }
.brand-badge{
    width:40px; height:40px; border-radius:50%; background:var(--ink-800);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow: 0 6px 16px rgba(10,10,11,.25);
}
.brand-badge svg{ width:20px; height:20px; fill:#fff; }
.brand-name{ font-weight:700; color:var(--ink-900); font-size:1.15rem; }

.card{ border:none; border-radius:var(--r-xl); box-shadow: var(--shadow-lg); }

.btn-primary{ background:var(--ink-800); border-color:var(--ink-800); transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.btn-primary:hover{ background:var(--ink-900); border-color:var(--ink-900); box-shadow: 0 8px 20px rgba(10,10,11,.22); }
.btn-primary:active{ transform: scale(.98); }
.btn-primary:disabled{ transform:none; box-shadow:none; }

.form-control{ transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.form-control:focus{ border-color:var(--ink-800); box-shadow: var(--shadow-focus); }
.form-check-input:checked{ background-color:var(--ink-800); border-color:var(--ink-800); }
.form-check-input:focus{ box-shadow: var(--shadow-focus); }

.link-teal{ color:var(--ink-800); font-weight:600; text-decoration:none; transition: color var(--t-fast); }
.link-teal:hover{ color:var(--ink-900); text-decoration:underline; }

.text-muted-sm{ color:var(--gray-500); font-size:.85rem; }

.trial-badge{
    display:inline-flex; align-items:center; gap:.35rem;
    background:var(--gray-100); color:var(--gray-600);
    font-size:.78rem; font-weight:600; padding:.3rem .7rem; border-radius:var(--r-pill); margin-bottom:1rem;
}

/* ---------- Olho de mostrar/ocultar senha (senha-toggle.js) ---------- */
.senha-wrap{ position:relative; width:100%; display:block; }
.senha-wrap input{ padding-right:2.6rem; width:100%; }
.senha-wrap-toggle{
    position:absolute; top:0; right:0; height:100%; width:2.6rem;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; padding:0; color:var(--gray-500); cursor:pointer;
    transition: color var(--t-fast);
}
.senha-wrap-toggle:hover{ color:var(--ink-900); }
.senha-wrap-toggle:focus-visible{ outline:2px solid var(--ink-800); outline-offset:-2px; border-radius:var(--r-sm); }

.alert{ animation: fc-fade-up .2s var(--ease); border-radius: var(--r-md); }

@media (prefers-reduced-motion: reduce){
    .auth-card, .alert{ animation:none; }
}