:root {
            --login-verde: #98ca3f;
            --login-oscuro: #07150d;
            --login-texto: #f7fbf3;
            --login-muted: rgba(247, 251, 243, .68);
            --login-linea: rgba(255, 255, 255, .1);
            --login-campo: rgba(255, 255, 255, .07);
        }

        * {
            box-sizing: border-box;
        }

        body {
            min-height: 100svh;
            margin: 0;
            overflow: hidden;
            font-family: 'Mulish', sans-serif;
            color: var(--login-texto);
            background: radial-gradient(circle at 16% 14%, rgba(152, 202, 63, .18), transparent 26%), linear-gradient(135deg, #06150d 0%, #102719 54%, #0a1b12 100%);
        }

        .va-login {
            min-height: 100svh;
            display: grid;
            place-items: start center;
            padding: clamp(8px, 1.4vw, 14px);
        }

        .va-login-shell {
            width: min(1040px, 100%);
            height: min(552px, calc(100svh - 16px));
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
            overflow: hidden;
            background: rgba(7, 21, 13, .78);
            border: 1px solid var(--login-linea);
            border-radius: 24px;
            box-shadow: 0 24px 70px rgba(0, 0, 0, .30);
            backdrop-filter: blur(14px);
        }

        .va-login-identidad,
        .va-login-forma {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: clamp(24px, 3.2vw, 36px);
        }

        .va-login-identidad {
            isolation: isolate;
            background: linear-gradient(140deg, rgba(12, 36, 20, .9), rgba(7, 21, 13, .94));
        }

        .va-login-identidad::before {
            content: '';
            position: absolute;
            right: -95px;
            bottom: -150px;
            width: 430px;
            aspect-ratio: 1;
            background: url('<?= BASE_URL ?>/img/brand/vc_vo.svg') center / contain no-repeat;
            opacity: .11;
            z-index: -1;
        }

        .va-login-marca img {
            width: min(178px, 60vw);
            height: auto;
            display: block;
            margin-bottom: clamp(18px, 3.8vw, 30px);
        }

        .va-login-kicker {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 13px;
            color: var(--login-verde);
            font-size: 12px;
            font-weight: 900;
            letter-spacing: .17em;
            text-transform: uppercase;
        }

        .va-login-kicker::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--login-verde);
        }

        .va-login-identidad h1 {
            max-width: 520px;
            margin: 0 0 16px;
            color: #fff;
            font-size: clamp(34px, 4vw, 48px);
            line-height: .96;
            font-weight: 900;
            letter-spacing: 0;
        }

        .va-login-identidad p {
            max-width: 480px;
            margin: 0;
            color: rgba(247, 251, 243, .72);
            font-size: 16px;
            line-height: 1.5;
        }

        .va-login-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: clamp(18px, 3vw, 26px);
        }

        .va-login-pills span {
            padding: 9px 13px;
            border: 1px solid rgba(152, 202, 63, .24);
            border-radius: 999px;
            color: rgba(247, 251, 243, .78);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
            background: rgba(255, 255, 255, .03);
        }

        .va-login-forma {
            background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015));
        }

        .va-login-forma-cabecera {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }

        .va-login-forma h2 {
            margin: 0 0 8px;
            color: #fff;
            font-size: clamp(28px, 3.3vw, 34px);
            font-weight: 900;
        }

        .va-login-forma p {
            max-width: 350px;
            margin: 0;
            color: var(--login-muted);
            font-size: 15px;
            line-height: 1.45;
        }

        .va-login-tema {
            flex: 0 0 auto;
            width: 46px;
            height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 14px;
            background: rgba(255, 255, 255, .07);
            color: #e7f4db;
        }

        .va-login-etiqueta {
            display: block;
            margin-bottom: 8px;
            color: rgba(247, 251, 243, .82);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .va-login-input,
        .va-login-clave button {
            min-height: 47px;
            border: 1px solid rgba(255, 255, 255, .12);
            background: var(--login-campo);
            color: #fff;
        }

        .va-login-input {
            border-radius: 14px;
            padding: 10px 14px;
        }

        .va-login-input::placeholder {
            color: rgba(247, 251, 243, .42);
        }

        .va-login-input:focus {
            background: rgba(255, 255, 255, .09);
            border-color: rgba(152, 202, 63, .72);
            box-shadow: 0 0 0 .22rem rgba(152, 202, 63, .14);
            color: #fff;
        }

        .va-login-clave .va-login-input {
            border-radius: 14px 0 0 14px;
        }

        .va-login-clave button {
            width: 56px;
            border-left: 0;
            border-radius: 0 14px 14px 0;
            color: #dce9d0;
            justify-content: center;
        }

        #mensajeInicioSesion {
            min-height: 18px;
            margin: 4px 0 10px;
            color: #ffc5c5;
            font-size: 13px;
            font-weight: 800;
        }

        .va-login-boton {
            min-height: 49px;
            border: 0;
            border-radius: 14px;
            background: linear-gradient(135deg, #98ca3f, #b7e84a);
            color: #07150d;
            font-weight: 900;
            box-shadow: 0 16px 34px rgba(152, 202, 63, .23);
        }

        .va-login-boton:hover,
        .va-login-boton:focus {
            color: #07150d;
            filter: brightness(.98);
        }

        .va-login-regreso {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: max-content;
            margin-top: 12px;
            color: rgba(247, 251, 243, .82);
            font-size: 14px;
            font-weight: 900;
            text-decoration: none;
        }

        .va-login-regreso:hover {
            color: var(--login-verde);
        }

        html.va-login-tema-claro body {
            color: #07150d;
            background: radial-gradient(circle at 18% 18%, rgba(152, 202, 63, .16), transparent 24%), linear-gradient(135deg, #f6faf2 0%, #eaf2e4 52%, #dfe9db 100%);
        }

        html.va-login-tema-claro .va-login-shell {
            background: rgba(255, 255, 255, .84);
            border-color: rgba(16, 48, 25, .10);
            box-shadow: 0 24px 70px rgba(31, 61, 36, .16);
        }

        html.va-login-tema-claro .va-login-identidad {
            background: linear-gradient(140deg, #f6fbf1, #e8f1e3);
        }

        html.va-login-tema-claro .va-login-identidad h1,
        html.va-login-tema-claro .va-login-forma h2 {
            color: #07150d;
        }

        html.va-login-tema-claro .va-login-identidad p,
        html.va-login-tema-claro .va-login-forma p,
        html.va-login-tema-claro .va-login-etiqueta,
        html.va-login-tema-claro .va-login-regreso {
            color: #5d6b61;
        }

        html.va-login-tema-claro .va-login-pills span,
        html.va-login-tema-claro .va-login-tema {
            border-color: #d6e2d1;
            background: rgba(255, 255, 255, .68);
            color: #07150d;
        }

        html.va-login-tema-claro .va-login-input,
        html.va-login-tema-claro .va-login-clave button {
            border-color: #d6e2d1;
            background: #f0f5ec;
            color: #07150d;
        }

        html.va-login-tema-claro .va-login-input:focus {
            background: #fff;
            color: #07150d;
        }

        @media (max-width: 900px) {
            body {
                overflow-x: hidden;
                overflow-y: auto;
            }

            .va-login {
                place-items: start center;
                padding: 0;
                background: linear-gradient(180deg, #0d301a 0%, #06150d 42%);
            }

            .va-login-shell {
                min-height: 0;
                height: auto;
                grid-template-columns: 1fr;
                border: 0;
                border-radius: 0;
                box-shadow: none;
            }

            .va-login-identidad {
                min-height: 0;
                padding: 12px 20px 16px;
                justify-content: flex-start;
            }

            .va-login-identidad::before {
                inset: 8px -48px auto auto;
                width: 230px;
                opacity: .14;
            }

            .va-login-marca img {
                width: 126px;
                margin-bottom: 10px;
            }

            .va-login-kicker {
                margin-bottom: 8px;
                font-size: 10px;
            }

            .va-login-identidad h1 {
                margin-bottom: 0;
                font-size: clamp(25px, 8vw, 32px);
            }

            .va-login-identidad p,
            .va-login-pills {
                display: none;
            }

            .va-login-forma {
                margin-top: -8px;
                padding: 20px 20px 18px;
                border-radius: 22px 22px 0 0;
                background: #f8fbf5;
                color: #07150d;
            }

            .va-login-forma-cabecera {
                margin-bottom: 14px;
            }

            .va-login-forma h2 {
                color: #07150d;
                font-size: 25px;
            }

            .va-login-forma p,
            .va-login-etiqueta,
            .va-login-regreso {
                color: #5d6b61;
            }

            .va-login-input,
            .va-login-clave button {
                min-height: 46px;
                border-color: #d9e2d6;
                background: #f0f5ec;
                color: #07150d;
            }

            .va-login-boton {
                min-height: 47px;
            }

            .va-login-regreso {
                margin-top: 10px;
            }

            html:not(.va-login-tema-claro) .va-login-forma {
                background: #0c1c13;
                color: #fff;
            }

            html:not(.va-login-tema-claro) .va-login-forma h2 {
                color: #fff;
            }

            html:not(.va-login-tema-claro) .va-login-forma p,
            html:not(.va-login-tema-claro) .va-login-etiqueta,
            html:not(.va-login-tema-claro) .va-login-regreso {
                color: rgba(247, 251, 243, .72);
            }

            html:not(.va-login-tema-claro) .va-login-input,
            html:not(.va-login-tema-claro) .va-login-clave button {
                border-color: rgba(255, 255, 255, .12);
                background: rgba(255, 255, 255, .07);
                color: #fff;
            }

            html.va-login-tema-claro .va-login {
                background: linear-gradient(180deg, #eaf3e3 0%, #f8fbf5 52%);
            }
        }

        @media (max-width: 420px) {
            .va-login-identidad {
                min-height: 31svh;
                padding-bottom: 22px;
            }

            .va-login-marca img {
                width: 136px;
                margin-bottom: 14px;
            }

            .va-login-identidad h1 {
                font-size: 25px;
            }

            .va-login-forma {
                padding: 18px 16px 14px;
            }

            .va-login-forma p {
                font-size: 14px;
            }
        }