/*
 * Telas standalone de autenticação (login e recuperação de senha).
 *
 * Extraído do `<style>` inline de `templates/users/auth_base.html` na Sprint
 * V8J. Estas telas não usam Tailwind: todas as classes abaixo são próprias,
 * então o CDN foi removido do template e a tela roda com
 * `style-src 'self' https://fonts.googleapis.com`.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
* { font-family: 'Inter', system-ui, sans-serif; margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: #03101F url('/static/images/login-bg.jpg') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
}

.login-wrapper {
    position: fixed; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    overflow-y: auto;
}

.login-card {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    width: 420px;
    max-width: 100%;
    padding: 2.5rem 2.25rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    margin-bottom: 8vh;
}

.logo { font-size: 1.9rem; font-weight: 800; color: #111827; letter-spacing: -0.03em; }
.logo span { color: #2563eb; }
.tagline { font-size: 0.85rem; color: #6B7280; font-weight: 500; margin-top: 0.2rem; }

.card-title { font-size: 1.15rem; font-weight: 700; color: #111827; letter-spacing: -0.01em; }
.card-help { font-size: 0.825rem; color: #6B7280; line-height: 1.5; margin-top: 0.5rem; }

/* `.field` posiciona ícone e botão sobre o input: só pode conter o input.
   Erros e textos de ajuda ficam no `.field-group`, fora dessa caixa. */
.field-group { margin-top: 1rem; }
.field-group .field { margin-top: 0; }
.field { position: relative; margin-top: 1rem; }
.field > svg { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: #94a3b8; z-index: 2; }
.field input {
    width: 100%; padding: 0.85rem 1rem 0.85rem 2.75rem;
    background: #F1F5F9; border: 2px solid #D8E1EC;
    border-radius: 12px; font-size: 0.925rem; color: #111827;
    outline: none; transition: all 0.2s;
}
.field input::placeholder { color: #94a3b8; }
.field input:focus {
    border-color: #1F6FFF; background: #fff;
    box-shadow: 0 0 0 4px rgba(31,111,255,0.1);
}
.field input[data-password-input] { padding-right: 2.75rem; }

.btn {
    width: 100%; padding: 0.85rem; margin-top: 1.25rem;
    background: #1e3a5f; color: #fff; border: none;
    border-radius: 12px; font-size: 0.95rem; font-weight: 600;
    cursor: pointer; letter-spacing: 0.01em;
    transition: background 0.2s;
}
.btn:hover { background: #152d4a; }

.forgot {
    display: block; text-align: center; margin-top: 0.9rem;
    font-size: 0.8rem; color: #8A94A6; text-decoration: none;
}
.forgot:hover { color: #2563eb; }

.toggle-pw {
    position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #94a3b8; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    padding: 0.25rem; border-radius: 8px;
}
.toggle-pw:hover { color: #64748b; }
.toggle-pw:focus-visible { outline: 2px solid #1F6FFF; outline-offset: 2px; }
.toggle-pw [hidden] { display: none; }

.alert {
    border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 1rem;
    display: flex; align-items: flex-start; gap: 0.5rem;
}
.alert p { font-size: 0.8rem; margin: 0; }
.alert-error { background: #FEF2F2; border: 1px solid #FECACA; }
.alert-error p { color: #991B1B; }
.alert-success { background: #F0FDF4; border: 1px solid #BBF7D0; }
.alert-success p { color: #166534; }
.alert svg { flex-shrink: 0; margin-top: 1px; }

.field-errors { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.field-errors li { font-size: 0.775rem; color: #B91C1C; line-height: 1.45; }

.hint { font-size: 0.75rem; color: #8A94A6; margin-top: 0.4rem; line-height: 1.5; }
.hint ul { padding-left: 1.05rem; }

/* ── Utilitários que substituem `style="..."` inline (Sprint V8J) ── */
.login-head { text-align: center; margin-bottom: 1.75rem; }
.btn-bloco { display: block; text-align: center; text-decoration: none; }
.alert-espacada { margin-top: 1rem; }
.forgot-espacado { margin-top: 1.5rem; }