/* Otimizado para consumir os tokens globais de system-theme.css.
   Mantenha este arquivo carregado depois do tema global. */

        * {
            box-sizing: border-box;
        }

        html,
        body {
            min-height: 100%;
        }

        body {
            margin: 0;
            color: var(--login-text);
            background:
                radial-gradient(circle at top left,
                    color-mix(in srgb,
                        var(--login-secondary) 30%,
                        transparent),
                    transparent 35%),
                radial-gradient(circle at bottom right,
                    color-mix(in srgb,
                        var(--login-primary) 28%,
                        transparent),
                    transparent 40%),
                var(--login-background);

            font-family:
                Inter,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            overflow-x: hidden;
        }

        .login-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 24px 12px;
            position: relative;
        }

        .login-page::before,
        .login-page::after {
            content: "";
            position: fixed;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(2px);
            opacity: 0.15;
        }

        .login-page::before {
            width: 300px;
            height: 300px;
            top: -100px;
            left: -80px;
            background: var(--login-primary);
        }

        .login-page::after {
            width: 380px;
            height: 380px;
            right: -140px;
            bottom: -160px;
            background: var(--login-secondary);
        }

        .login-wrapper {
            width: 100%;
            max-width: 1050px;
            margin: auto;
            position: relative;
            z-index: 1;
        }

        .login-container {
            background: rgba(255, 255, 255, 0.94);
            border: 1px solid rgba(255, 255, 255, 0.65);
            border-radius: 24px;
            overflow: hidden;
            box-shadow:
                0 25px 70px rgba(18, 55, 32, 0.17),
                0 4px 15px rgba(0, 0, 0, 0.05);

            backdrop-filter: blur(15px);
        }

        .login-banner {
            min-height: 620px;
            padding: 55px;
            color: #fff;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            background:
                linear-gradient(150deg,
                    var(--login-primary),
                    var(--login-secondary));
        }

        .login-banner::before {
            content: "";
            position: absolute;
            width: 330px;
            height: 330px;
            border-radius: 50%;
            top: -130px;
            right: -100px;
            background: rgba(255, 255, 255, 0.12);
        }

        .login-banner::after {
            content: "";
            position: absolute;
            width: 230px;
            height: 230px;
            border-radius: 50%;
            left: -90px;
            bottom: -100px;
            background: rgba(255, 255, 255, 0.1);
        }

        .banner-content,
        .banner-footer {
            position: relative;
            z-index: 1;
        }

        .banner-icon {
            width: 66px;
            height: 66px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 18px;
            margin-bottom: 28px;
            background: rgba(255, 255, 255, 0.17);
            border: 1px solid rgba(255, 255, 255, 0.22);
            font-size: 30px;
            backdrop-filter: blur(8px);
        }

        .banner-title {
            max-width: 430px;
            margin-bottom: 18px;
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 750;
            line-height: 1.12;
            letter-spacing: -0.04em;
        }

        .banner-description {
            max-width: 440px;
            margin-bottom: 0;
            font-size: 1rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.88);
        }

        .banner-security {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 11px 16px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.18);
            font-size: 0.88rem;
            color: rgba(255, 255, 255, 0.92);
        }

        .login-form-area {
            min-height: 620px;
            display: flex;
            align-items: center;
            padding: 55px 60px;
        }

        .login-form-content {
            width: 100%;
            max-width: 420px;
            margin: auto;
        }

        .brand-area {
            margin-bottom: 34px;
        }

        .brand-logo {
            max-width: 210px;
            max-height:100px;
            object-fit: contain;
        }

        .brand-fallback {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 1.35rem;
            font-weight: 750;
            color: var(--login-primary);
        }

        .brand-fallback-icon {
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 13px;
            background:
                color-mix(in srgb,
                    var(--login-primary) 13%,
                    white);

            color: var(--login-primary);
        }

        .login-title {
            margin-bottom: 8px;
            font-size: 1.9rem;
            font-weight: 750;
            letter-spacing: -0.03em;
        }

        .login-subtitle {
            margin-bottom: 30px;
            color: var(--login-muted);
            line-height: 1.6;
        }

        .form-label {
            margin-bottom: 8px;
            font-size: 0.9rem;
            font-weight: 650;
            color: #34423a;
        }

        .input-group-login {
            position: relative;
        }

        .input-icon {
            position: absolute;
            top: 50%;
            left: 16px;
            z-index: 5;
            transform: translateY(-50%);
            color: #89958e;
            pointer-events: none;
        }

        .form-control-login {
            height: 53px;
            padding-left: 46px;
            padding-right: 44px;
            border-radius: 13px;
            border: 1px solid var(--login-border);
            background-color: #fbfcfb;
            font-size: 0.96rem;
            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                background-color 0.2s ease;
        }

        .form-control-login:hover {
            border-color:
                color-mix(in srgb,
                    var(--login-primary) 40%,
                    var(--login-border));
        }

        .form-control-login:focus {
            border-color: var(--login-primary);
            background-color: #fff;
            box-shadow:
                0 0 0 4px color-mix(in srgb,
                    var(--login-primary) 14%,
                    transparent);
        }

        .form-control-login.is-invalid {
            padding-right: 48px;
        }

        .password-toggle {
            position: absolute;
            top: 50%;
            right: 10px;
            z-index: 6;
            width: 36px;
            height: 36px;
            padding: 0;
            border: 0;
            border-radius: 9px;
            transform: translateY(-50%);
            background: transparent;
            color: #78827d;
            transition:
                color 0.2s ease,
                background-color 0.2s ease;
        }

        .password-toggle:hover {
            background:
                color-mix(in srgb,
                    var(--login-primary) 10%,
                    transparent);

            color: var(--login-primary);
        }

        .form-check-input {
            width: 1.08rem;
            height: 1.08rem;
            margin-top: 0.18rem;
            cursor: pointer;
        }

        .form-check-input:checked {
            background-color: var(--login-primary);
            border-color: var(--login-primary);
        }

        .form-check-input:focus {
            border-color: var(--login-primary);
            box-shadow:
                0 0 0 0.2rem color-mix(in srgb,
                    var(--login-primary) 16%,
                    transparent);
        }

        .form-check-label {
            color: #58645e;
            cursor: pointer;
        }

        .forgot-password {
            color: var(--login-primary);
            font-size: 0.9rem;
            font-weight: 650;
            text-decoration: none;
        }

        .forgot-password:hover {
            color:
                color-mix(in srgb,
                    var(--login-primary) 78%,
                    black);

            text-decoration: underline;
        }

        .btn-login {
            min-height: 53px;
            border: 0;
            border-radius: 13px;
            background:
                linear-gradient(135deg,
                    var(--login-primary),
                    var(--login-secondary));

            color: #fff;
            font-size: 1rem;
            font-weight: 700;
            box-shadow:
                0 12px 25px color-mix(in srgb,
                    var(--login-primary) 25%,
                    transparent);

            transition:
                transform 0.18s ease,
                box-shadow 0.18s ease,
                filter 0.18s ease;
        }

        .btn-login:hover {
            color: #fff;
            transform: translateY(-1px);
            filter: brightness(0.97);
            box-shadow:
                0 16px 32px color-mix(in srgb,
                    var(--login-primary) 32%,
                    transparent);
        }

        .btn-login:active {
            transform: translateY(0);
        }

        .btn-login:focus {
            color: #fff;
            box-shadow:
                0 0 0 4px color-mix(in srgb,
                    var(--login-primary) 18%,
                    transparent);
        }

        .login-alert {
            border: 0;
            border-radius: 13px;
            font-size: 0.92rem;
        }

        .login-footer {
            margin-top: 34px;
            padding-top: 24px;
            border-top: 1px solid #edf0ee;
            color: #909994;
            text-align: center;
            font-size: 0.82rem;
        }

        .invalid-feedback {
            font-size: 0.82rem;
        }

        @media (max-width: 991.98px) {
            .login-wrapper {
                max-width: 570px;
            }

            .login-banner {
                display: none;
            }

            .login-form-area {
                min-height: auto;
                padding: 45px;
            }

            .login-container {
                border-radius: 20px;
            }
        }

        @media (max-width: 575.98px) {
            .login-page {
                align-items: flex-start;
                padding: 12px;
            }

            .login-form-area {
                padding: 32px 23px;
            }

            .login-container {
                border-radius: 18px;
            }

            .login-title {
                font-size: 1.65rem;
            }

            .brand-area {
                margin-bottom: 28px;
            }

            .brand-logo {
                max-width: 175px;
                max-height: 60px;
            }
        }