/* login.css — arquivo independente. Paleta inspirada no dashboard.css do projeto. */

:root {
    --brand-magenta: #c026d3;
    --brand-magenta-dark: #86198f;
    --brand-magenta-darker: #4a044e;
    --brand-violet: #7e22ce;
    --bg-wash: #fdf3f8;
    --surface: #ffffff;
    --ink: #2b1830;
    --ink-soft: #7c6a82;
    --ink-faint: #b79bc0;
    --line: #f1d9ee;
    --line-strong: #e7b9e3;
    --danger: #be185d;
    --danger-soft: #fdf2f8;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --shadow-card: 0 20px 40px -20px rgba(74,4,78,.22), 0 4px 12px -4px rgba(74,4,78,.10);
    --font-display: "Fredoka", sans-serif;
    --font-body: "Inter", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg-wash);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; border: none; background: none; cursor: pointer; }
input { font-family: inherit; }
h1, p { margin: 0; }

/* ---- Background blobs (mesmo efeito visual do dashboard) ---- */
.bg-blob {
    position: fixed; border-radius: 50% 45% 60% 40% / 55% 40% 60% 45%;
    filter: blur(70px); opacity: 0.4; pointer-events: none; z-index: 0;
    animation: drift 22s ease-in-out infinite alternate;
}
.bg-blob--one { width: 440px; height: 440px; top: -160px; left: -160px; background: radial-gradient(circle at 30% 30%, var(--brand-magenta), transparent 70%); }
.bg-blob--two { width: 400px; height: 400px; bottom: -180px; right: -140px; background: radial-gradient(circle at 70% 70%, var(--brand-violet), transparent 70%); animation-delay: -9s; }

@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(20px,-16px) scale(1.06); } }

/* ---- Button (equivalente simplificado do .btn--primary do dashboard) ---- */
.btn {
    font-size: 14px; font-weight: 600; border-radius: 999px; padding: 10px 18px;
    transition: opacity .16s, transform .1s;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: linear-gradient(90deg, var(--brand-magenta), var(--brand-violet)); color: #fff; }
.btn--primary:disabled { opacity: 0.45; cursor: not-allowed; }

.login-screen {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
}

/* ---- Card ---- */
.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 36px 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* ---- Brand header ---- */
.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.login-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand-magenta), var(--brand-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px -8px rgba(192, 38, 212, .45);
}

.login-mark svg { width: 24px; height: 24px; }

.login-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
    color: var(--brand-magenta-darker);
}

.login-subtitle {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* ---- Form ---- */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-field { display: flex; flex-direction: column; gap: 6px; }

.login-field label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
}

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-wrap svg {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--ink-faint);
    pointer-events: none;
}

.login-input {
    width: 100%;
    padding: 11px 12px 11px 36px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 14.5px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.login-input::placeholder { color: var(--ink-faint); }

.login-input:focus-visible {
    outline: none;
    border-color: var(--brand-magenta);
    box-shadow: 0 0 0 3px rgba(192, 38, 212, .12);
}

.login-input.has-error {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.login-toggle-visibility {
    position: absolute;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    border-radius: 50%;
    pointer-events: auto;
}

.login-toggle-visibility:hover { color: var(--ink-soft); background: var(--bg-wash); }
.login-toggle-visibility svg { position: static; }

/* ---- Submit ---- */
.login-submit {
    margin-top: 4px;
    width: 100%;
    padding: 12px 18px;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-submit-spinner {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    animation: login-spin .7s linear infinite;
    display: none;
}

.login-submit.is-loading .login-submit-spinner { display: inline-block; }
.login-submit.is-loading .login-submit-label { opacity: .85; }

@keyframes login-spin { to { transform: rotate(360deg); } }

/* ---- Error banner ---- */
.login-error {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid rgba(190, 24, 93, .18);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    line-height: 1.45;
}

.login-error[hidden] { display: none; }
.login-error svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

/* ---- Footer ---- */
.login-footer {
    text-align: center;
    font-size: 12px;
    color: var(--ink-faint);
}

/* ---- Responsive ---- */
@media (max-width: 420px) {
    .login-card { padding: 30px 22px 26px; border-radius: var(--radius-md); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .bg-blob { animation: none; }
    .login-submit-spinner { animation-duration: 1.4s; }
}