:root {
    --color-default: #90B44D;
    --color-second: #5e9205;
    --color-white: #fff;
    --color-body: #e4e9f7;
    --color-light: #e0e0e0;
}
/* ── Flash toasts ──────────────────────────────────── */
.flash-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 380px;
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.flash-alert {
    opacity: 0.95;
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    margin-bottom: 0;
}

.ma{text-align: center;}

.margin-top-16 {
    margin-top: 16px;
    gap: 12px;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    font-family: sans-serif;
    background-image: linear-gradient(rgb(5, 143, 101, 0.6), rgb(99, 233, 139, 0.6)),
                      url('../../static/images/home.png');
    background-size: 100% auto;
    background-position: top center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px 16px;
    box-sizing: border-box;
}

.btn-primary {
    background-color: var(--color-default) !important;
    border-color: var(--color-default) !important;
    color: #ffffff !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--color-second) !important;
    border-color: var(--color-second) !important;
}

.logo {
    width: min(280px, 70vw);
}

.contMain {
    width: min(400px, 92vw);
    padding: 20px;
    background: rgba(0, 0, 0, .65);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .6);
    border-radius: 10px;
}

.contMain h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #fff;
    text-align: center;
}

.contMain .contUser {
    position: relative;
}

.contMain .contUser input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
    color: #fff;
}

.contMain .contUser input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.input_login {
    padding-left: 10px !important;
    background-color: rgba(255,255,255,0.12) !important;
    border-radius: 4px !important;
    color: #fff !important;
}

.input_login:focus {
    background-color: rgba(255,255,255,0.18) !important;
    box-shadow: none !important;
    border-color: #90B44D !important;
    color: #fff !important;
}

.contMain form {
    text-align: center;
}

.login-btn {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: white;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-bottom: 5px;
    letter-spacing: 4px;
    text-align: center;
    background: transparent;
    border: none;
    cursor: pointer;
}

.login-btn:hover {
    background-color: #8CB04C;
    border-radius: 5px;
}

.O {
    color: white;
    text-align: center;
    font-size: 14px;
    padding-top: 5px;
}

.cw{
    color:white;
}

.error {
    color: #ff6b6b;
    margin-top: 0;
    font-size: 13px;
}

#bn-m {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    background: transparent;
}
#bn-m:hover {
    background-color: #8CB04C;
    border-color: #8CB04C;
}

.img_microsf {
    width: 20px;
    margin-right: 6px;
}

.contenedor-center {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

@media (max-width: 767.98px) {
    .contMain,
    .contMain-wide {
        padding: 28px 20px;
    }
    .mfa-cards {
        flex-direction: column;
    }
    .store-qrs {
        gap: 14px;
    }
}

/* Error messages */
.error {
    text-align: center;
}

/* Wide login container variant (Authenticator setup) */
.contMain-wide {
    width: min(440px, 92vw);
}

/* User email display (set_password) */
.user-email {
    font-size: 17px;
    color: #fff;
    margin-bottom: 1rem;
}

/* Password requirements list */
.req-list { margin: 8px 0 12px 2px; }
.req { font-size: 0.78rem; margin: 2px 0; display: flex; align-items: center; gap: 6px; color: #fff; }
.req .dot { width: 8px; height: 8px; border-radius: 50%; background: #aaa; flex-shrink: 0; }
.req.ok .dot { background: #90b44d; }
.req.ok { color: #90b44d; }

/* Password input with show/hide toggle */
.pwd-wrap { position: relative; }
.pwd-wrap .eye-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,0.7);
    cursor: pointer; padding: 0; font-size: 1.1rem; line-height: 1;
}
.pwd-wrap .eye-btn:hover { color: #fff; }
.pwd-wrap input { padding-right: 36px !important; }

/* MFA method selection */
.mfa-cards { display: flex; gap: 14px; margin-top: 10px; }
.mfa-cards > * { flex: 1; }
.mfa-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 20px 16px; border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    cursor: pointer; text-decoration: none;
    color: #fff; transition: all .2s;
    width: 100%;
}
.mfa-card:hover { border-color: #90b44d; background: rgba(144,180,77,0.18); color: #fff; }
.mfa-card i { font-size: 2.2rem; color: #90b44d; }
.mfa-card .label { font-size: 1rem; font-weight: 600; }
.mfa-card .sub { font-size: 0.75rem; color: rgba(255,255,255,0.65); }

.mfa-card2 {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 8px 8px; border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    cursor: pointer; text-decoration: none;
    color: #fff; transition: all .2s;
    width: 100%;
}
.mfa-card2:hover { border-color: #90b44d; background: rgba(144,180,77,0.18); color: #fff; }
.mfa-card2 i { font-size: 2.2rem; color: #90b44d; }
.mfa-card2 .label { font-size: 1rem; font-weight: 600; }
.mfa-card2 .sub { font-size: 0.75rem; color: rgba(255,255,255,0.65); }

/* Subtitle / instruction text under headings */
.mfa-subtitle {
    color: rgba(255,255,255,0.7);
    text-align: center;
    font-size: 0.85rem;
    margin-bottom: 20px;
}
.mfa-subtitle strong { color: #fff; }

/* QR code setup */
.qr-center { text-align: center; }
.qr-box {
    background: #fff; 
    border-radius: 8px;
    padding-top: 5px; 
    padding-bottom: 0px;
    padding-right: 5px;
    padding-left: 5px;
    display: inline-block; 
    margin: 12px auto;
}
.secret-code {
    font-family: monospace; font-size: 0.9rem;
    letter-spacing: 3px; color: #90b44d;
    word-break: break-all; text-align: center;
    margin: 6px 0 14px;
}
.step { font-size: 0.8rem; color: rgba(255,255,255,0.65); text-align: left; margin-bottom: 4px; }
.step-spaced { margin-top: 8px; }

/* Store download QR codes */
.store-qrs { display: flex; justify-content: center; gap: 24px; margin: 10px 0 16px; }
.store-qr-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.store-qr-label { font-size: 0.72rem; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 4px; }
.store-qr-box { background: #fff; border-radius: 6px; padding-top: 2px; padding-bottom: 0px; padding-right: 2px; padding-left: 2px; display: inline-block; }

/* OTP / verification code inputs */
.code-input {
    text-align: center !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 12px !important;
    padding-left: 20px !important;
}
.code-input-sm {
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 8px;
}

/* Resend code link + wrapper */
.resend-wrap { text-align: center; margin-top: 16px; }
.resend-link { font-size: 0.8rem; color: rgba(255,255,255,0.55); text-decoration: none; }
.resend-link:hover { color: #90b44d; }

/* Language switcher */
.lang-link {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    font-weight: 400;
}
button.lang-link {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.lang-link--active {
    color: rgba(255,255,255,1);
    font-weight: 700;
}
.lang-sep {
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
}

.lang-link:hover {
    font-size: 0.8rem;
    color: #8CB04C;
    text-decoration: none;
    font-weight: 400;
}

/* Cancel / back links */
.cancel-link { display: block; text-align: center; margin-top: 14px; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.cancel-link:hover { color: #fff; }
.cancel-link-sm { margin-top: 4px; }

/* Forgot password link */
.forgot-pwd-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    text-decoration: underline;
}
.forgot-pwd-link:hover { color: #fff; }