:root {
    --login-primary: #d78c08;
    --login-primary-dark: #4f2630;
    --login-surface: #fffdf8;
    --login-border: #ecd7b5;
    --login-text: #4b2831;
    --login-muted: #8c6870;
    --login-danger: #a82e2e;
    --login-success: #247a4d;
    --login-radius: 16px;
    --login-shadow: 0 20px 50px rgba(113, 58, 70, 0.14);
    --login-transition: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }

body.auth-page {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 10%, rgba(215, 140, 8, 0.13), transparent 30%),
        radial-gradient(circle at 88% 88%, rgba(201, 120, 125, 0.10), transparent 28%),
        linear-gradient(135deg, #fffaf0, #fff4df);
    color: var(--login-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden;
}

.auth-main {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 24px 150px;
}

.login {
    position: relative;
    width: min(430px, 100%);
    margin: 0 auto;
    padding: 72px 38px 34px;
    border: 1px solid var(--login-border);
    border-radius: var(--login-radius);
    background: var(--login-surface);
    color: var(--login-text);
    box-shadow: var(--login-shadow);
}

.login::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 7px;
    border-radius: var(--login-radius) var(--login-radius) 0 0;
    background: linear-gradient(90deg, #d78c08 0%, #c9787d 55%, #713a46 100%);
}

.usuario {
    position: absolute;
    top: -48px;
    left: 50%;
    width: 96px;
    height: 96px;
    transform: translateX(-50%);
    border: 5px solid var(--login-surface);
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(113, 58, 70, 0.20);
}

.usuario.selenne-login-mark {
    display: grid;
    place-items: center;
    padding: 0;
    background: linear-gradient(135deg, #d78c08 0%, #c9787d 55%, #713a46 100%);
    color: #fffdf8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.login h1 {
    margin: 0 0 26px;
    color: var(--login-primary-dark);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: .4px;
    line-height: 1.25;
    text-align: center;
}

.login form { margin: 0; }
.login p {
    margin: 0 0 7px;
    color: var(--login-text);
    font-size: 13px;
    font-weight: 700;
}

.login input { width: 100%; margin: 0 0 18px; font-family: inherit; }
.login input[type="text"], .login input[type="password"], .login input[type="email"] {
    height: 46px;
    padding: 11px 13px;
    border: 1px solid #e2cfae;
    border-radius: 10px;
    background: #fff;
    color: var(--login-text);
    font-size: 14px;
    outline: none;
    transition: border-color var(--login-transition), box-shadow var(--login-transition);
}
.login input::placeholder { color: #a3847e; opacity: 1; }
.login input[type="text"]:focus, .login input[type="password"]:focus, .login input[type="email"]:focus {
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px rgba(215, 140, 8, .12);
}

.login input[type="submit"] {
    height: 46px;
    margin-top: 2px;
    margin-bottom: 14px;
    border: 1px solid #d78c08;
    border-radius: 10px;
    background: linear-gradient(135deg, #d78c08, #c9787d);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 9px 20px rgba(215, 140, 8, .18);
}
.login input[type="submit"]:hover,
.login input[type="submit"]:focus {
    background: linear-gradient(135deg, #bd7705, #a85d68);
    border-color: #a96605;
}

.login a {
    display: inline-block;
    color: #a96605;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}
.login a:hover, .login a:focus { color: #713a46; text-decoration: underline; }

.alert-login {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    width: 340px;
    max-width: calc(100vw - 40px);
    padding: 14px 15px;
    border: 1px solid #efc8cc;
    border-left: 5px solid #dc3545;
    border-radius: 9px;
    background: #fff4f5;
    color: #721c24;
    box-shadow: 0 10px 26px rgba(113, 58, 70, .16);
    font-size: 13px;
    font-weight: 700;
}
.alert-login.saindo { opacity: 0; transform: translateX(50px); transition: .3s ease; }

.login .alert,
.app-login-alert {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
}
.login .alert-danger, .login .alert-error, .app-login-alert.alert-danger { border: 1px solid #f5c2c7; background: #f8d7da; color: #842029; }
.login .alert-success, .app-login-alert.alert-success { border: 1px solid #badbcc; background: #d1e7dd; color: #0f5132; }
.app-login-alert.alert-info { border: 1px solid #b6d4fe; background: #cff4fc; color: #055160; }
.app-login-alert.alert-warning { border: 1px solid #ffecb5; background: #fff3cd; color: #664d03; }

.login.login-alterar small {
    display: block;
    margin: -5px 0 14px;
    color: var(--login-muted);
    font-size: 11px;
    line-height: 1.45;
}

/* Barra fixa de cookies — visual igual ao mockup e independente do layout do login. */
.cookie-banner {
    position: fixed;
    left: 24px;
    right: 24px;
    bottom: 20px;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 82px;
    padding: 16px 22px;
    border: 1px solid rgba(215, 140, 8, .35);
    border-radius: 18px;
    background: rgba(70, 30, 41, .98);
    color: #fff;
    box-shadow: 0 14px 34px rgba(79, 38, 48, .26);
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner__content {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}
.cookie-banner__icon {
    flex: 0 0 auto;
    font-size: 30px;
    line-height: 1;
}
.cookie-banner__text {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
}
.cookie-banner__text a {
    margin-left: 5px;
    color: #f1a30c;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-banner__button {
    flex: 0 0 auto;
    min-width: 132px;
    min-height: 48px;
    padding: 10px 22px;
    border: 1px solid #e69a00;
    border-radius: 12px;
    background: transparent;
    color: #f2a20c;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}
.cookie-banner__button:hover, .cookie-banner__button:focus {
    background: rgba(215, 140, 8, .12);
    outline: none;
}

@media (max-width: 640px) {
    .auth-main {
        align-items: flex-start;
        padding: 76px 14px 190px;
    }
    .login {
        width: 100%;
        padding: 66px 22px 28px;
        border-radius: 14px;
    }
    .usuario { top: -44px; width: 88px; height: 88px; }
    .usuario.selenne-login-mark { font-size: 43px; }
    .login h1 { margin-bottom: 22px; font-size: 22px; }

    .cookie-banner {
        left: 12px;
        right: 12px;
        bottom: 12px;
        min-height: 0;
        padding: 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        border-radius: 14px;
    }
    .cookie-banner__content { align-items: flex-start; gap: 10px; }
    .cookie-banner__icon { font-size: 24px; }
    .cookie-banner__text { font-size: 12px; }
    .cookie-banner__button { width: 100%; min-width: 0; min-height: 42px; }
}

@media (max-height: 650px) and (min-width: 641px) {
    .auth-main { align-items: flex-start; padding-top: 78px; }
}