:root {
    /* Fallbacks: o APP_CONFIG em utils.js sobrescreve estas variáveis. */
    --app-brand-primary: #1f3b2d;
    --app-brand-primary-rgb: 31, 59, 45;
    --app-brand-primary-dark: #13251c;
    --app-brand-primary-light: #1f5a44;
    --app-brand-accent: #c9a227;
    --app-brand-accent-rgb: 201, 162, 39;
    --app-neutral-canvas: #f8faf9;
    --app-neutral-surface: #fff;
    --app-neutral-surface-rgb: 255, 255, 255;
    --app-neutral-surface-muted: #f4f7f5;
    --app-neutral-text: #26352d;
    --app-neutral-muted: #6c757d;
    --app-neutral-border: #e1e8e4;
    --gcm-primary: var(--app-brand-primary);
    --gcm-primary-dark: var(--app-brand-primary-dark);
    --gcm-secondary: var(--app-brand-accent);
    --gcm-bg: var(--app-neutral-surface-muted);
    --gcm-text: var(--app-neutral-text);
    --gcm-muted: var(--app-neutral-muted);
}

* { box-sizing: border-box; }

body.login-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(var(--app-brand-accent-rgb), 0.18), transparent 32%),
        radial-gradient(circle at bottom right, rgba(var(--app-brand-primary-rgb), 0.18), transparent 30%),
        linear-gradient(135deg, var(--app-neutral-surface) 0%, var(--app-neutral-surface-muted) 45%, var(--app-neutral-border) 100%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 1rem;
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: rgba(var(--app-neutral-surface-rgb), 0.96);
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(var(--app-brand-primary-rgb), 0.08);
    backdrop-filter: blur(12px);
}

.form-signin { width: 100%; }

.login-logo-circle {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--app-neutral-surface), var(--app-neutral-surface-muted));
    border: 4px solid rgba(var(--app-brand-accent-rgb), 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(var(--app-brand-primary-rgb), 0.15);
}

.login-logo-circle img { width: 78px; height: 78px; object-fit: contain; }
.login-logo h1 { color: var(--gcm-primary); letter-spacing: .02em; }
.form-floating > .form-control { border-radius: .9rem; border-color: var(--app-neutral-border); }
.form-floating > .form-control:focus { border-color: var(--gcm-primary); box-shadow: 0 0 0 .2rem rgba(var(--app-brand-primary-rgb), 0.15); }
.password-wrapper { position: relative; }
.password-wrapper .form-control { padding-right: 3.1rem; }

.btn-toggle-password {
    position: absolute;
    right: .7rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--app-neutral-muted);
    z-index: 5;
    padding: .35rem;
    line-height: 1;
}

.btn-toggle-password:hover { color: var(--gcm-primary); }

.btn-login {
    border: 0;
    border-radius: .9rem;
    background: linear-gradient(135deg, var(--gcm-primary), var(--gcm-primary-dark));
    color: var(--app-neutral-surface);
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 10px 22px rgba(var(--app-brand-primary-rgb), 0.22);
    transition: all .15s ease;
}

.btn-login:hover, .btn-login:focus {
    background: linear-gradient(135deg, var(--app-brand-primary-light), var(--gcm-primary-dark));
    color: var(--app-neutral-surface);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(var(--app-brand-primary-rgb), 0.26);
}

.btn-login:disabled { opacity: .8; transform: none; box-shadow: none; }
.link-recuperar { color: var(--gcm-primary); text-decoration: none; font-weight: 600; }
.link-recuperar:hover { color: var(--gcm-primary-dark); text-decoration: underline; }
.alert { border-radius: .9rem; }
.login-footer { border-top: 1px solid var(--app-neutral-border); padding-top: .85rem; }
.password-change-modal .modal-content { overflow: hidden; border: 0; border-radius: 1.35rem; box-shadow: 0 1.5rem 4rem rgba(20, 38, 29, .28); }
.password-change-modal .modal-header { padding: 1.35rem 1.35rem 1rem; color: var(--app-neutral-surface); background: radial-gradient(circle at top right, rgba(var(--app-brand-accent-rgb), .35), transparent 38%), linear-gradient(135deg, var(--gcm-primary), var(--gcm-primary-dark)); border: 0; }
.password-change-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: .9rem; color: var(--gcm-primary-dark); background: var(--gcm-secondary); font-size: 1.25rem; }
.password-change-modal .modal-body { padding: 1.35rem; }
.password-change-notice { padding: .8rem .9rem; border: 1px solid var(--app-neutral-border); border-radius: .9rem; background: var(--app-neutral-surface-muted); color: var(--app-neutral-text); }
.password-change-modal .form-control { border-radius: .8rem; border-color: var(--app-neutral-border); }
.password-change-modal .form-control:focus { border-color: var(--gcm-primary); box-shadow: 0 0 0 .2rem rgba(var(--app-brand-primary-rgb), .12); }
.password-change-modal .modal-footer { padding: 0 1.35rem 1.35rem; border: 0; }
.password-requirements { font-size: .78rem; color: var(--gcm-muted); }

@media (max-width: 480px) {
    .login-card { padding: 1.5rem; border-radius: 1.2rem; }
    .login-logo-circle { width: 96px; height: 96px; }
    .login-logo-circle img { width: 68px; height: 68px; }
    .password-change-modal .modal-dialog { margin: .75rem; }
    .password-change-modal .modal-header, .password-change-modal .modal-body { padding: 1rem; }
    .password-change-modal .modal-footer { padding: 0 1rem 1rem; }
}