:root {
            /* Cores principais */
            --primary-dark: #121a1f;
            --primary: #121a1f;
            --primary-soft: #1c262d;
            --accent-gold: #efaf11;
            --accent-gold-dark: #c48d00;
            --bg-light: #f3f5fa;
            --text-light: #ffffff;
            --text-muted: #b7bfd4;
        }

        /* ========================= */
        /* GERAL */
        /* ========================= */

        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background-color: var(--bg-light);
        }

        .login-layout {
            min-height: 100vh;
            height: 100vh;
            padding-left: 0;
            padding-right: 0;
        }

        .login-row {
            min-height: 100vh;
        }

        /* ========================= */
        /* LADO ESQUERDO (7/12) */
        /* ========================= */

        .login-left {
            position: relative;
            min-height: 100vh;

            /* imagem + overlay escuro */
            background:
                linear-gradient(135deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
                url('../../dist/img/img_maos_exp.jpg') center/cover no-repeat;

            animation: fadeInLeft 0.8s ease-out both;
            overflow: hidden;
        }

        /* LOGO CENTRALIZADA SOBRE A IMAGEM */
        .left-logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: auto;
            filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.55));
            animation: fadeInLogo 1s ease-out both 0.15s;
        }


        .login-left::before {
            width: 260px;
            height: 260px;
            left: -70px;
            bottom: -70px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 65%);
            animation: floatCircle1 11s ease-in-out infinite alternate;
        }

        .login-left::after {
            width: 220px;
            height: 220px;
            right: -60px;
            top: 10%;
            background: radial-gradient(circle, rgba(239, 175, 17, 0.18), transparent 65%);
            animation: floatCircle2 13s ease-in-out infinite alternate;
        }

        /* ========================= */
        /* LADO DIREITO (login) */
        /* ========================= */

        .login-right {
            min-height: 100vh;
            background: radial-gradient(circle at top, #ffffff 0%, #f0f3fb 40%, #e3e7f2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeInRight 0.8s ease-out both;
            padding: 0 4vw;
        }

        .login-form-wrapper {
            width: 100%;
            max-width: 600px;
            text-align: center;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 24px;
            padding: 32px 32px 28px;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.15);
            border: 1px solid rgba(148, 163, 184, 0.25);
            backdrop-filter: blur(8px);
            animation: floatCard 0.9s ease-out both 0.1s;

            /* 🔽 o que você pediu: altura maior */
            min-height: 689px;

            /* 🔽 para ajustar os elementos dentro */
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* centraliza verticalmente */
        }

        /* logo no topo direito */

        .login-logo {
            margin-bottom: 16px;
        }

        .login-logo img {
            max-width: 300px;
            height: auto;
            filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
        }

        .login-subtitle {
            font-size: 0.9rem;
            color: #6b7280;
            margin-bottom: 26px;
        }

        /* campos */

        .box-login .form-group {
            text-align: left;
            margin-bottom: 2rem !important;
        }

        .box-login label.form-label {
            font-size: 1.10rem;
            color: #4b5563;
            margin-bottom: 4px;
            font-weight: 600;
        }

        .box-login .input-group-text {
            background: #ffffff;
            border: 1px solid #d1d7e6;
            color: #9aa3bd;
            border-radius: 14px 0 0 14px;
        }

        .box-login .form-control {
            border-radius: 0 14px 14px 0;
            background: #ffffff;
            border: 1px solid #d1d7e6;
            color: #111827;
            font-size: 0.98rem;
            height: 50px;
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
        }

        .box-login .form-control::placeholder {
            color: #9ca3af;
        }

        .box-login .form-control:focus {
            border-color: var(--accent-gold);
            box-shadow: 0 0 0 1px rgba(239, 175, 17, 0.75);
            background-color: #fdfcf9;
        }

        /* botão */

        .btn-login-main {
            height: 50px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary) 70%);
            color: #ffffff;
            font-size: 0.96rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            border: none;
            box-shadow: 0 14px 34px rgba(7, 28, 53, 0.45);
            transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
            margin-top: 40px;
        }

        .btn-login-main i {
            font-size: 0.9rem;
        }

        .btn-login-main:hover {
            transform: translateY(-1px);
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
            background: linear-gradient(135deg, #19222b 0%, #111821 70%);
        }

        .btn-login-main:active {
            transform: translateY(0);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.45);
        }

        .login-extra-links {
            margin-top: 10px;
            font-size: 0.8rem;
            color: #9ca3af;
        }

        /* ========================= */
        /* Animações */
        /* ========================= */

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-40px) scale(1.02);
            }

            to {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(40px) scale(1.02);
            }

            to {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        @keyframes fadeInLogo {
            from {
                opacity: 0;
                transform: translate(-50%, -60%);
            }

            to {
                opacity: 1;
                transform: translate(-50%, -50%);
            }
        }

        @keyframes floatCircle1 {
            from {
                transform: translate3d(0, 0, 0);
                opacity: .55;
            }

            to {
                transform: translate3d(12px, -18px, 0);
                opacity: .9;
            }
        }

        @keyframes floatCircle2 {
            from {
                transform: translate3d(0, 0, 0);
                opacity: .5;
            }

            to {
                transform: translate3d(-10px, 16px, 0);
                opacity: .85;
            }
        }

        @keyframes floatCard {
            from {
                opacity: 0;
                transform: translateY(16px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }