/* =====================================================
   SIGEIN LOGIN FULLSCREEN PRESERVADO
   Preserva IDs, JS y funcionalidad original de Logon.aspx
===================================================== */

:root {
    --login-blue: #3144B5;
    --login-blue-dark: #0D2F91;
    --login-cyan: #40BAC6;
    --login-green: #45E0A3;
    --login-text: #18213C;
    --login-muted: #6F7890;
    --login-border: rgba(49, 68, 181, .16);
}

html,
body,
form {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
}

body {
    overflow-x: hidden !important;
}

/* Fondo */
.cssPrincipal {
    width: 100% !important;
    height: 100% !important;
    background-image: url(../Images/LogonPrincipal.jpg) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

    .cssPrincipal::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: radial-gradient(circle at 12% 92%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 30%), linear-gradient(135deg, rgba(49,68,181,.74) 0%, rgba(49,68,181,.62) 48%, rgba(64,186,198,.40) 100%) !important;
        z-index: 0 !important;
    }

    .cssPrincipal::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background-image: radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1px) !important;
        background-size: 28px 28px !important;
        opacity: .18 !important;
        z-index: 0 !important;
        pointer-events: none !important;
    }

/* Círculos originales */
.circle {
    position: absolute !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.50) !important;
    animation: ripple 15s infinite !important;
    box-shadow: none !important;
    z-index: 1 !important;
}

.small {
    width: 200px !important;
    height: 200px !important;
    left: -100px !important;
    bottom: -100px !important;
}

.medium, .mediun {
    width: 400px !important;
    height: 400px !important;
    left: -200px !important;
    bottom: -200px !important;
}

.large {
    width: 600px !important;
    height: 600px !important;
    left: -300px !important;
    bottom: -300px !important;
}

.xlarge {
    width: 800px !important;
    height: 800px !important;
    left: -400px !important;
    bottom: -400px !important;
}

.xxlarge {
    width: 1000px !important;
    height: 1000px !important;
    left: -500px !important;
    bottom: -500px !important;
}

.shade1 {
    opacity: .20 !important;
}

.shade2 {
    opacity: .36 !important;
}

.shade3 {
    opacity: .48 !important;
}

.shade4 {
    opacity: .58 !important;
}

.shade5 {
    opacity: .66 !important;
}

@keyframes ripple {
    0% {
        transform: scale(.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(.8);
    }
}

/* Layout general */
.divLogin {
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    color: var(--login-text) !important;
}

/* Contenedor principal fullscreen */
#divLoginFormulario.container {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Contenedor iniciando sesión: conserva JS original */
#divIconoIniciando.container {
    width: min(620px, 86vw) !important;
    min-height: 330px !important;
    border-radius: 26px !important;
    position: relative !important;
    z-index: 4 !important;
}

.cssLoginCredentials,
.cssLoginWelcome,
.cssLoginSolicitudes {
    position: absolute !important;
    top: 0 !important;
    height: 100vh !important;
    transition: transform .6s ease-in-out !important;
    box-sizing: border-box !important;
}

/* Panel izquierdo */
.cssLoginCredentials {
    left: 0 !important;
    width: 52% !important;
    background: #fff !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .cssLoginCredentials .cssFormulario {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

#divContenedorLogin {
    width: min(420px, 72%) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

    #divContenedorLogin > div {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

        #divContenedorLogin > div:first-child {
            margin-bottom: clamp(22px, 3.6vh, 34px) !important;
            text-align: left !important;
        }

    .divLogin h1,
    #divContenedorLogin h1 {
        margin: 0 !important;
        color: var(--login-text) !important;
        font-weight: 800 !important;
        letter-spacing: -.6px !important;
        font-size: clamp(30px, 2.4vw, 46px) !important;
        line-height: 1.08 !important;
        text-align: left !important;
    }

        .divLogin h1::after,
        #divContenedorLogin h1::after,
        .cssLoginWelcome h1::after {
            content: "" !important;
            display: block !important;
            width: 58px !important;
            height: 3px !important;
            margin: 16px 0 0 !important;
            border-radius: 30px !important;
            background: linear-gradient(90deg, var(--login-cyan), var(--login-green)) !important;
        }

.loginSubtitle {
    display: block !important;
    max-width: 330px !important;
    margin: 14px 0 0 0 !important;
    color: var(--login-muted) !important;
    font-size: clamp(12px, .9vw, 14px) !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    text-align: left !important;
}

#divContenedorLogin > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(12px, 1.8vh, 18px) !important;
    margin-bottom: clamp(16px, 2.4vh, 22px) !important;
}

    #divContenedorLogin > div:nth-child(2) > div {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

#divContenedorLogin div[style*="clear"] {
    display: none !important;
}

.cssRadLabel,
.cssLoginCredentials label,
.cssLoginCredentials .RadLabel {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--login-text) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Inputs */
.inputForm {
    width: 100% !important;
    height: clamp(48px, 5.6vh, 56px) !important;
    min-height: 48px !important;
    border: 1px solid rgba(49,68,181,.20) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 10px 24px rgba(49,68,181,.05) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: all .22s ease !important;
}

    .inputForm:focus-within {
        border-color: rgba(49,68,181,.55) !important;
        box-shadow: 0 14px 30px rgba(49,68,181,.13) !important;
        transform: translateY(-1px) !important;
    }

    .inputForm svg {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
        margin: 0 !important;
        fill: #22305B !important;
        opacity: .80 !important;
    }

    .inputForm .RadInput,
    .RadInput,
    .inputForm .RadInput table,
    .inputForm .RadInput tbody,
    .inputForm .RadInput tr,
    .inputForm .RadInput td {
        width: 100% !important;
        height: 100% !important;
    }

        .RadInput_Material input.riTextBox,
        .RadInput input.riTextBox,
        .cssRadInput input,
        .cssRadInputUser,
        .cssRadInputPass,
        .inputForm input.riTextBox {
            width: 100% !important;
            height: 100% !important;
            line-height: normal !important;
            border: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
            padding: 0 !important;
            color: var(--login-text) !important;
            font-size: 13px !important;
        }

.RadInput_Material .riFocused,
.RadInput_Focused_Material {
    box-shadow: none !important;
}

/* Recuperación */
#lblForgotPassword,
.cssPassword {
    color: var(--login-blue) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

#lblForgotPassword,
#divContenedorLogin > div:nth-child(2) > div:last-child {
    text-align: right !important;
    margin-top: -4px !important;
}

.cssPassword:hover,
.cssSolicitud:hover {
    color: var(--login-cyan) !important;
}

/* Botón */
#divContenedorLogin > div:nth-child(3) {
    margin-bottom: clamp(14px, 2.5vh, 24px) !important;
}

.cssLoginButton,
button[id$="btnIngresar"] {
    width: 100% !important;
    height: clamp(48px, 5.6vh, 56px) !important;
    min-height: 48px !important;
    border-radius: 13px !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--login-blue) 0%, #102FBC 100%) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    box-shadow: 0 14px 28px rgba(49,68,181,.28) !important;
    padding: 0 72px 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    position: relative !important;
}

    .cssLoginButton:hover,
    button[id$="btnIngresar"]:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 18px 34px rgba(49,68,181,.34) !important;
    }

    .cssLoginButton .iconLogin {
        position: absolute !important;
        right: 8px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        background: #fff !important;
        color: var(--login-blue) !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .cssLoginButton:hover .iconLogin {
        width: 40px !important;
        transform: translateY(-50%) translateX(2px) !important;
    }

    .cssLoginButton .iconLogin svg {
        width: 22px !important;
        height: 22px !important;
    }

/* Solicitud de empleo */
.cssSolicitudEmpleo {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    border: 1px solid rgba(49,68,181,.12) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.72) !important;
    color: #17A9BD !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(49,68,181,.05) !important;
}

    .cssSolicitudEmpleo::before {
        content: "\f0b1" !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        margin-right: 9px !important;
        color: #17A9BD !important;
    }

    .cssSolicitudEmpleo span,
    .cssSolicitudEmpleo .rbText {
        text-decoration: none !important;
    }

/* Panel derecho */
.cssLoginWelcome {
    left: 52% !important;
    width: 48% !important;
    background: radial-gradient(circle at 82% 18%, rgba(64,186,198,.42), transparent 34%), linear-gradient(145deg, #1739C0 0%, #08318F 48%, #09A9BA 100%) !important;
    color: #fff !important;
    z-index: 3 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    .cssLoginWelcome::before {
        content: "" !important;
        position: absolute !important;
        top: -10% !important;
        left: -165px !important;
        width: 250px !important;
        height: 120% !important;
        background: #fff !important;
        border-radius: 0 70% 70% 0 / 0 50% 50% 0 !important;
        box-shadow: 10px 0 0 rgba(64,186,198,.85), 18px 0 0 rgba(255,255,255,.50) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    .cssLoginWelcome::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: radial-gradient(circle, rgba(255,255,255,.24) 1px, transparent 1px), linear-gradient(0deg, rgba(0,0,0,.14), rgba(255,255,255,0) 42%), url(../Images/LogonPrincipal.jpg) bottom center / cover no-repeat !important;
        background-size: 24px 24px, 100% 100%, cover !important;
        background-blend-mode: normal, normal, soft-light !important;
        opacity: .24 !important;
        z-index: 0 !important;
    }

    .cssLoginWelcome .cssFormulario {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        height: 100% !important;
        padding: clamp(42px, 7vh, 78px) clamp(52px, 5vw, 86px) clamp(42px, 7vh, 78px) clamp(90px, 8vw, 134px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

        .cssLoginWelcome .cssFormulario > div {
            height: auto !important;
        }

    .cssLoginWelcome h1 {
        color: #fff !important;
        font-size: clamp(28px, 2vw, 40px) !important;
        text-align: center !important;
        text-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
    }

        .cssLoginWelcome h1::after {
            margin-left: auto !important;
            margin-right: auto !important;
        }

/* Logo empresa */
.cssLoginImage {
    width: min(430px, 88%) !important;
    min-height: 200px !important;
    margin: clamp(20px, 3vh, 28px) auto clamp(20px, 3vh, 32px) !important;
    padding: clamp(24px, 3vh, 34px) clamp(34px, 4vw, 48px) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 24px 48px rgba(3,22,91,.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

    .cssLoginImage img,
    .cssLoginImage .RadBinaryImage,
    .cssLoginImage input,
    .cssLoginImage image {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

.cssLoginWelcome .RadLabel,
.cssLoginWelcome span {
    color: #fff !important;
}

[id$="txtEmpresa"] {
    display: block !important;
    color: #fff !important;
    font-size: clamp(20px, 1.8vw, 32px) !important;
    font-weight: 900 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
}

.loginFeatureList {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(10px, 1.4vw, 18px) !important;
    width: min(440px, 100%) !important;
    margin-top: clamp(18px, 3vh, 30px) !important;
}

.loginFeatureItem {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 9px !important;
    color: #fff !important;
    font-size: clamp(11px, .75vw, 13px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: center !important;
}

    .loginFeatureItem:not(:last-child)::after {
        content: "" !important;
        position: absolute !important;
        right: -9px !important;
        top: 8px !important;
        bottom: 8px !important;
        width: 1px !important;
        background: rgba(255,255,255,.24) !important;
    }

    .loginFeatureItem i {
        width: clamp(38px, 4vw, 48px) !important;
        height: clamp(38px, 4vw, 48px) !important;
        border-radius: 50% !important;
        border: 1px solid rgba(69,224,163,.65) !important;
        background: rgba(255,255,255,.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        font-size: clamp(15px, 1.3vw, 20px) !important;
    }

/* Leyenda inferior */
.loginSystemLegend {
    position: absolute !important;
    bottom: 28px !important;
    left: 0 !important;
    width: 52% !important;
    z-index: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: var(--login-blue) !important;
    font-size: clamp(12px, .9vw, 15px) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

    .loginSystemLegend i {
        color: var(--login-cyan) !important;
        font-size: 18px !important;
    }

/* Solicitudes panel */
.cssLoginSolicitudes {
    left: 58% !important;
    width: 42% !important;
    height: 100vh !important;
    padding: 40px !important;
    background: rgba(255, 255, 255, .98) !important;
    z-index: 0 !important;
    box-sizing: border-box !important;
}

.cssLoginWelcome.move {
    transform: translateX(-70%) !important;
}

.cssButtonBackLogin {
    color: #fff !important;
    background: linear-gradient(135deg, var(--login-blue), #1739C0) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 22px rgba(49,68,181,.25) !important;
}

    .cssButtonBackLogin:hover {
        color: var(--login-blue) !important;
        background: #fff !important;
    }

.cssLblTituloSolicitudes {
    color: var(--login-blue) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    margin: 6px 0 24px !important;
}

#divListaSolicitudes ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#divListaSolicitudes li {
    margin: 0 0 10px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: rgba(49,68,181,.05) !important;
    border: 1px solid rgba(49,68,181,.08) !important;
    color: var(--login-text) !important;
    font-size: 13px !important;
    transition: all .2s ease !important;
}

    #divListaSolicitudes li:hover {
        transform: translateX(4px) !important;
        background: rgba(64,186,198,.10) !important;
        font-weight: bold !important;
    }

    #divListaSolicitudes li a {
        color: var(--login-text) !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        text-decoration: none !important;
    }

/* Powered logo */
.poweredButton {
    width: 190px !important;
    height: 68px !important;
    right: 28px !important;
    bottom: 28px !important;
    border-radius: 14px !important;
    background: rgba(49,68,181,.92) !important;
    box-shadow: 8px 8px 0 rgba(255,255,255,.55), 0 18px 36px rgba(0,0,0,.16) !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    overflow: hidden !important;
    cursor: pointer !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}

    .poweredButton:hover {
        transform: translate(-4px, -4px) !important;
        box-shadow: 12px 12px 0 rgba(255,255,255,.70), 0 18px 36px rgba(0,0,0,.16) !important;
    }

/* Spinner */
.container-spinner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100vh !important;
    flex-direction: column !important;
    gap: 2rem !important;
}

.spinner {
    width: 112px !important;
    height: 112px !important;
    border: 8px solid #D1D5DB !important;
    border-top-color: var(--login-blue) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: spin 2s linear infinite !important;
}

.icon-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: counter-spin 2s linear infinite !important;
}

.icon {
    animation: ping 2s cubic-bezier(0,0,.2,1) infinite !important;
    width: 24px !important;
    height: 24px !important;
}

.icon-text {
    animation: ping 2s cubic-bezier(0,0,.2,1) infinite !important;
    color: #45E0A3 !important;
    font-weight: 700 !important;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes counter-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Pantallas bajas */
@media (max-height: 760px) and (min-width: 1101px) {
    #divContenedorLogin > div:first-child {
        margin-bottom: 20px !important;
    }

    #divContenedorLogin > div:nth-child(2) {
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .inputForm,
    .cssLoginButton,
    button[id$="btnIngresar"],
    .cssSolicitudEmpleo {
        height: 44px !important;
        min-height: 44px !important;
    }

    #divContenedorLogin h1 {
        font-size: 34px !important;
    }

    .loginSubtitle {
        margin-top: 10px !important;
    }

    .cssLoginImage {
        height: 115px !important;
        margin: 16px auto 20px !important;
    }

    .loginFeatureList {
        margin-top: 16px !important;
    }
}

/* Tablet */
@media (max-width: 1100px) {
    body,
    html,
    form {
        overflow-y: auto !important;
    }

    #divLoginFormulario.container {
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .divLogin {
        min-height: 100vh !important;
        height: auto !important;
        align-items: stretch !important;
    }

    .cssLoginCredentials,
    .cssLoginWelcome,
    .cssLoginSolicitudes {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        transform: none !important;
    }

    .cssLoginCredentials {
        min-height: 58vh !important;
        padding: 42px 0 !important;
    }

    .cssLoginWelcome {
        min-height: 560px !important;
        padding: 0 !important;
    }

        .cssLoginWelcome::before {
            display: none !important;
        }

        .cssLoginWelcome .cssFormulario {
            padding: 50px 28px 90px !important;
        }

    #divContenedorLogin {
        width: min(420px, 90%) !important;
    }

        #divContenedorLogin h1,
        .loginSubtitle {
            text-align: center !important;
            max-width: 100% !important;
        }

            #divContenedorLogin h1::after {
                margin-left: auto !important;
                margin-right: auto !important;
            }

    .loginSystemLegend {
        position: relative !important;
        width: 100% !important;
        bottom: auto !important;
        left: auto !important;
        margin: 18px 0 100px !important;
        color: #fff !important;
    }

    .cssLoginSolicitudes {
        display: none !important;
        padding: 32px 26px !important;
        background: rgba(255,255,255,.98) !important;
    }

    .cssLoginWelcome.move {
        display: none !important;
    }

        .cssLoginWelcome.move + .cssLoginSolicitudes,
        #divLoginSolicitudes {
            min-height: 420px !important;
        }

    .loginFeatureList {
        max-width: 430px !important;
    }

    .poweredButton {
        right: 18px !important;
        bottom: 18px !important;
        width: 154px !important;
        height: 56px !important;
    }
}

/* Móvil */
@media (max-width: 620px) {
    .cssLoginCredentials {
        min-height: auto !important;
        padding: 34px 0 !important;
    }

    #divContenedorLogin {
        width: 92% !important;
    }

        #divContenedorLogin h1 {
            font-size: 30px !important;
        }

    .loginSubtitle {
        font-size: 12px !important;
    }

    .cssSolicitudEmpleo {
        font-size: 12px !important;
    }

    .cssLoginWelcome {
        min-height: 560px !important;
    }

    .cssLoginImage {
        width: 92% !important;
        height: 118px !important;
        padding: 18px 24px !important;
    }

    .loginFeatureList {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .loginFeatureItem:not(:last-child)::after {
        display: none !important;
    }

    .loginSystemLegend {
        padding: 0 20px !important;
        text-align: center !important;
        font-size: 12px !important;
    }

    .poweredButton {
        transform: scale(.82) !important;
        right: 10px !important;
        bottom: 10px !important;
    }
}

/* =====================================================
   CENTRADO REAL LOGIN + PANEL IZQUIERDO MÁS PEQUEÑO
===================================================== */

/* Panel blanco más pequeño */
.cssLoginCredentials {
    width: 38% !important;
    min-width: 38% !important;
    max-width: 38% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Panel azul más grande */
.cssLoginWelcome {
    left: 38% !important;
    width: 62% !important;
}

/* Formulario TOTALMENTE centrado */
.cssLoginCredentials .cssFormulario {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 70px !important;
    margin: 0 !important;
}

/* Contenedor interno */
#divContenedorLogin {
    width: min(360px,78%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

    /* Quitar márgenes enormes */
    #divContenedorLogin > div {
        margin: 0 !important;
    }

        /* Bloque título */
        #divContenedorLogin > div:first-child {
            margin-bottom: 28px !important;
        }

        /* Inputs */
        #divContenedorLogin > div:nth-child(2) {
            display: flex !important;
            flex-direction: column !important;
            gap: 14px !important;
            margin-bottom: 20px !important;
        }

        /* Botón */
        #divContenedorLogin > div:nth-child(3) {
            margin-bottom: 18px !important;
        }

/* Leyenda inferior */
.loginSystemLegend {
    width: 38% !important;
}

/* Curva */
.cssLoginWelcome::before {
    left: -145px !important;
}

/* Responsive */
@media(max-width:1100px) {

    .cssLoginCredentials,
    .cssLoginWelcome {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        left: auto !important;
    }

    .cssLoginCredentials {
        min-height: 58vh !important;
    }

    .cssLoginWelcome {
        min-height: 42vh !important;
    }

    .loginSystemLegend {
        width: 100% !important;
    }
}

/* FIX REAL: divContenedorLogin es runat=server */
.cssLoginCredentials {
    width: 38% !important;
    min-width: 38% !important;
    max-width: 38% !important;
    height: 100vh !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cssLoginWelcome {
    left: 38% !important;
    width: 62% !important;
    height: 100vh !important;
}

.cssLoginCredentials .cssFormulario {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[id$="divContenedorLogin"] {
    width: min(360px, 78%) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 16px !important;
}

    [id$="divContenedorLogin"] > div {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    [id$="divContenedorLogin"] h1 {
        margin: 0 !important;
        font-size: clamp(34px, 2.3vw, 44px) !important;
        line-height: 1.05 !important;
        text-align: left !important;
    }

.loginSubtitle {
    margin: 12px 0 0 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

[id$="divContenedorLogin"] > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}

    [id$="divContenedorLogin"] > div:nth-child(2) > div {
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

.inputForm {
    height: 54px !important;
    min-height: 54px !important;
}

.cssLoginButton,
button[id$="btnIngresar"] {
    height: 54px !important;
    min-height: 54px !important;
}

.cssSolicitudEmpleo {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 14px !important;
}

.loginSystemLegend {
    position: absolute !important;
    left: 0 !important;
    bottom: 28px !important;
    width: 38% !important;
    margin: 0 !important;
    color: #40BAC6 !important;
    text-shadow: none !important;
    font-size: 14px !important;
    z-index: 5 !important;
}

.cssLoginWelcome::before {
    left: -145px !important;
}

@media (max-width: 1100px) {
    .cssLoginCredentials,
    .cssLoginWelcome {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
    }

    .cssLoginCredentials {
        min-height: 58vh !important;
    }

    .loginSystemLegend {
        position: relative !important;
        width: 100% !important;
        bottom: auto !important;
        margin-top: 18px !important;
        color: #fff !important;
    }

    [id$="divContenedorLogin"] {
        width: min(390px, 90%) !important;
    }

        [id$="divContenedorLogin"] h1,
        .loginSubtitle {
            text-align: center !important;
        }
}

/* =====================================================
   FIX DEFINITIVO: FORMULARIO CENTRADO EN PANEL BLANCO
===================================================== */

/* Panel izquierdo más chico y con centro visual corregido */
.cssLoginCredentials {
    width: 40% !important;
    min-width: 40% !important;
    max-width: 40% !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* El panel azul arranca después del blanco */
.cssLoginWelcome {
    left: 40% !important;
    width: 60% !important;
}

/* Formulario ocupa todo el panel izquierdo y centra contenido */
.cssLoginCredentials .cssFormulario {
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 90px 0 70px !important;
    box-sizing: border-box !important;
}

/* Contenedor real del login */
[id$="divContenedorLogin"] {
    width: 100% !important;
    max-width: 390px !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 18px !important;
    position: static !important;
    transform: none !important;
}

    /* Quita alturas heredadas */
    [id$="divContenedorLogin"] > div {
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Título más controlado */
    [id$="divContenedorLogin"] h1 {
        font-size: clamp(34px, 2.15vw, 42px) !important;
        line-height: 1.08 !important;
        margin: 0 !important;
        text-align: left !important;
    }

/* Subtítulo sin cortarse */
.loginSubtitle {
    display: block !important;
    margin: 12px 0 8px 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
}

/* Separaciones internas */
[id$="divContenedorLogin"] > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Inputs/botón compactos */
.inputForm,
.cssLoginButton,
button[id$="btnIngresar"] {
    height: 54px !important;
    min-height: 54px !important;
}

/* Solicitudes */
.cssSolicitudEmpleo {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 14px !important;
}

/* Leyenda inferior dentro del panel blanco */
.loginSystemLegend {
    width: 40% !important;
    left: 0 !important;
    bottom: 28px !important;
}

/* Curva ajustada */
.cssLoginWelcome::before {
    left: -150px !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .cssLoginCredentials,
    .cssLoginWelcome {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        position: relative !important;
    }

        .cssLoginCredentials .cssFormulario {
            height: auto !important;
            min-height: 58vh !important;
            padding: 46px 24px !important;
        }

    [id$="divContenedorLogin"] {
        max-width: 420px !important;
    }

        [id$="divContenedorLogin"] h1,
        .loginSubtitle {
            text-align: center !important;
        }

    .loginSystemLegend {
        position: relative !important;
        width: 100% !important;
        bottom: auto !important;
        margin: 18px 0 !important;
    }
}

/* =====================================================
   FIX ABSOLUTO: CENTRAR FORMULARIO VERTICALMENTE
===================================================== */

/* El panel izquierdo debe ser referencia */
.cssLoginCredentials {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 40% !important;
    height: 100vh !important;
    overflow: hidden !important;
    padding-left: 70px !important;
}

    /* Quitamos cualquier layout anterior del formulario */
    .cssLoginCredentials .cssFormulario {
        position: relative !important;
        width: 100% !important;
        height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

/* Este es el centrado real */
[id$="divContenedorLogin"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(390px, 72%) !important;
    max-width: 390px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 16px !important;
}

    /* Limpieza de hijos */
    [id$="divContenedorLogin"] > div {
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Título */
    [id$="divContenedorLogin"] h1 {
        margin: 0 !important;
        font-size: clamp(34px, 2.1vw, 42px) !important;
        line-height: 1.08 !important;
    }

/* Subtítulo */
.loginSubtitle {
    margin: 12px 0 0 0 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}

/* Separaciones exactas */
[id$="divContenedorLogin"] > div:first-child {
    margin-bottom: 12px !important;
}

[id$="divContenedorLogin"] > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-bottom: 18px !important;
}

/* Botón e inputs */
.inputForm,
.cssLoginButton,
button[id$="btnIngresar"] {
    height: 54px !important;
    min-height: 54px !important;
}

/* Solicitud */
.cssSolicitudEmpleo {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 14px !important;
}

/* Panel derecho se ajusta al panel izquierdo */
.cssLoginWelcome {
    left: 40% !important;
    width: 60% !important;
}

/* Leyenda inferior no debe afectar el centrado */
.loginSystemLegend {
    position: absolute !important;
    left: 0 !important;
    bottom: 28px !important;
    width: 40% !important;
    margin: 0 !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .cssLoginCredentials,
    .cssLoginWelcome {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        left: auto !important;
    }

        .cssLoginCredentials .cssFormulario {
            height: auto !important;
            min-height: 58vh !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 46px 24px !important;
        }

    [id$="divContenedorLogin"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: min(390px, 92%) !important;
    }

    .loginSystemLegend {
        position: relative !important;
        width: 100% !important;
        bottom: auto !important;
        margin: 18px 0 !important;
    }
}


/* =====================================================
   BOTÓN LOGIN - EFECTO EXPANSIÓN BLANCA
===================================================== */

.cssLoginButton {
    position: relative !important;
    overflow: hidden !important;
    padding-right: 3.3em !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    box-shadow: 0 10px 25px rgba(49,68,181,.22), 0 4px 10px rgba(49,68,181,.12) !important;
}

    /* Hover general */
    .cssLoginButton:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 16px 32px rgba(49,68,181,.30), 0 8px 18px rgba(49,68,181,.18) !important;
    }

    /* Texto */
    .cssLoginButton .rbText,
    .cssLoginButton span:not(.iconLogin) {
        position: relative !important;
        z-index: 5 !important;
        color: #ffffff !important;
        transition: color .35s ease, transform .35s ease !important;
    }

    /* Texto hover */
    .cssLoginButton:hover .rbText,
    .cssLoginButton:hover span:not(.iconLogin) {
        color: #3144B5 !important;
        transform: translateX(-4px) !important;
    }

    /* Contenedor icono */
    .cssLoginButton .iconLogin {
        position: absolute !important;
        top: 50% !important;
        right: 8px !important;
        transform: translateY(-50%) !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 3 !important;
        transition: width .45s cubic-bezier(.77,0,.18,1), height .45s cubic-bezier(.77,0,.18,1), right .45s cubic-bezier(.77,0,.18,1), border-radius .45s ease, background .45s ease !important;
    }

    /* Expansión */
    .cssLoginButton:hover .iconLogin {
        width: calc(100% - 12px) !important;
        height: calc(100% - 12px) !important;
        right: 6px !important;
        border-radius: 10px !important;
        background: #ffffff !important;
    }

    /* Icono */
    .cssLoginButton .iconLogin i,
    .cssLoginButton .iconLogin svg {
        color: #3144B5 !important;
        fill: #3144B5 !important;
        font-size: 18px !important;
        transition: transform .35s ease, color .35s ease, fill .35s ease !important;
        z-index: 4 !important;
    }

    /* Hover icono */
    .cssLoginButton:hover .iconLogin i,
    .cssLoginButton:hover .iconLogin svg {
        color: #3144B5 !important;
        fill: #3144B5 !important;
        transform: translateX(5px) !important;
    }

    /* Click */
    .cssLoginButton:active {
        transform: scale(.98) !important;
    }

/* =====================================================
   FIX SHOW/HIDE PASSWORD TELLERIK
===================================================== */

/* El contenedor del input debe permitir el botón */
.inputForm {
    position: relative !important;
    overflow: visible !important;
}

    /* Telerik wrapper */
    .inputForm .RadInput {
        position: relative !important;
        overflow: visible !important;
    }

    /* Botón mostrar/ocultar */
    .inputForm .riButton,
    .inputForm .riIcon,
    .inputForm .riBtn,
    .inputForm a {
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 34px !important;
        height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: transparent !important;
        z-index: 20 !important;
        cursor: pointer !important;
        transition: background .25s ease, transform .25s ease !important;
    }

        /* Hover */
        .inputForm .riButton:hover,
        .inputForm .riIcon:hover,
        .inputForm .riBtn:hover {
            background: rgba(49,68,181,.08) !important;
            transform: translateY(-50%) scale(1.05) !important;
        }

        /* Icono */
        .inputForm .riButton::before,
        .inputForm .riIcon::before,
        .inputForm .riBtn::before {
            color: #3144B5 !important;
            font-size: 16px !important;
        }

    /* Espacio interno para que no tape texto */
    .inputForm input[type="password"],
    .inputForm input[type="text"] {
        padding-right: 52px !important;
    }

/* =====================================================
   SOLICITUDES DE EMPLEO - MODERNO
===================================================== */

.cssLoginSolicitudes {
    padding: 42px 54px !important;
    background: rgba(255,255,255,.98) !important;
}

.cssBtnBackLogin {
    margin-bottom: 20px !important;
}

.cssButtonBackLogin {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background: #3144B5 !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(49,68,181,.25) !important;
}

.cssLblTituloSolicitudes {
    display: block !important;
    text-align: center !important;
    margin: 4px 0 34px 0 !important;
    color: #3144B5 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

    .cssLblTituloSolicitudes::after {
        content: "";
        width: 58px;
        height: 3px;
        display: block;
        margin: 12px auto 0;
        border-radius: 20px;
        background: linear-gradient(90deg, #40BAC6, #45E0A3);
    }

#divListaSolicitudes {
    padding: 4px 8px 20px !important;
}

.jobRequestGrid {
    width: min(760px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.jobRequestCard {
    width: 100%;
    min-height: 78px;
    padding: 16px 18px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 48px 1fr 38px;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(49,68,181,.12);
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(49,68,181,.08);
    color: #18213c !important;
    text-decoration: none !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

    .jobRequestCard:hover {
        transform: translateY(-3px);
        border-color: rgba(64,186,198,.45);
        box-shadow: 0 18px 34px rgba(49,68,181,.14);
    }

.jobRequestIcon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3144B5, #40BAC6);
    color: #fff;
    font-size: 19px;
}

.jobRequestInfo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jobRequestTitle {
    color: #18213c;
    font-size: 16px;
    font-weight: 800;
}

.jobRequestInfo small {
    color: #6f7890;
    font-size: 13px;
    font-weight: 600;
}

.jobRequestArrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3144B5;
    background: rgba(49,68,181,.08);
    transition: transform .22s ease, background .22s ease;
}

.jobRequestCard:hover .jobRequestArrow {
    transform: translateX(4px);
    background: rgba(64,186,198,.16);
}

/* Quitar estilos viejos de UL/LI por si quedan */
#divListaSolicitudes ul,
#divListaSolicitudes li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .cssLoginSolicitudes {
        padding: 28px 20px !important;
    }

    .cssLblTituloSolicitudes {
        font-size: 22px !important;
    }

    .jobRequestCard {
        grid-template-columns: 42px 1fr 32px;
        padding: 14px;
    }

    .jobRequestIcon {
        width: 42px;
        height: 42px;
    }

    .jobRequestTitle {
        font-size: 14px;
    }

    .jobRequestInfo small {
        font-size: 12px;
    }
}

/* =====================================================
   BOTÓN PRO - SOLICITUDES DE EMPLEO
===================================================== */

.cssSolicitudEmpleo {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(64,186,198,.28) !important;
    background: linear-gradient(135deg, rgba(64,186,198,.10), rgba(49,68,181,.04)) !important;
    color: #16a9bd !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(64,186,198,.10), inset 0 1px 0 rgba(255,255,255,.75) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
}

    .cssSolicitudEmpleo::before {
        content: "\f0b1" !important;
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 16px !important;
        color: #16a9bd !important;
        margin-right: 2px !important;
    }

    .cssSolicitudEmpleo::after {
        content: "→" !important;
        width: 28px !important;
        height: 28px !important;
        margin-left: 8px !important;
        border-radius: 50% !important;
        background: rgba(64,186,198,.16) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #16a9bd !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        transition: transform .25s ease, background .25s ease !important;
    }

    .cssSolicitudEmpleo:hover {
        transform: translateY(-3px) !important;
        border-color: rgba(64,186,198,.55) !important;
        background: linear-gradient(135deg, rgba(64,186,198,.18), rgba(49,68,181,.07)) !important;
        box-shadow: 0 16px 34px rgba(64,186,198,.18), 0 8px 18px rgba(49,68,181,.10) !important;
    }

        .cssSolicitudEmpleo:hover::after {
            transform: translateX(4px) !important;
            background: rgba(49,68,181,.10) !important;
        }

    .cssSolicitudEmpleo span,
    .cssSolicitudEmpleo .rbText {
        text-decoration: none !important;
        color: #16a9bd !important;
    }


/* Fondo con movimiento suave */
.loginRight,
.loginRight::before {
    background-size: 115% 115% !important;
    animation: bgMoveLogin 18s ease-in-out infinite alternate;
}

    /* Capa de luz en movimiento */
    .loginRight::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(64,186,198,.22), transparent 28%), radial-gradient(circle at 80% 70%, rgba(49,68,181,.18), transparent 30%);
        animation: lightMoveLogin 10s ease-in-out infinite alternate;
        pointer-events: none;
    }

/* Partículas/puntos sutiles */
.loginParticles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .20;
    background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1px);
    background-size: 22px 22px;
    animation: particlesMoveLogin 22s linear infinite;
}

/* Animaciones */
@keyframes bgMoveLogin {
    0% {
        background-position: center center;
        transform: scale(1);
    }

    100% {
        background-position: 58% 45%;
        transform: scale(1.03);
    }
}

@keyframes lightMoveLogin {
    0% {
        transform: translate3d(-20px, -10px, 0);
        opacity: .35;
    }

    100% {
        transform: translate3d(25px, 20px, 0);
        opacity: .65;
    }
}

@keyframes particlesMoveLogin {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 80px 80px;
    }
}
/* CAPTCHA LOGIN */
[hidden] {
    display: none !important;
}

.cssLoginCaptcha {
    display: none !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

    .cssLoginCaptcha.cssLoginCaptchaVisible {
        display: block !important;
    }

.cssCaptchaHeader {
    width: 100% !important;
    min-height: 98px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

    .cssCaptchaHeader h1 {
        margin-bottom: 0 !important;
    }

    .cssCaptchaHeader .loginSubtitle {
        margin-top: 14px !important;
        text-align: left !important;
        max-width: 330px !important;
    }

.cssCaptchaPanel {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
}

.cssCaptchaCard {
    width: 100% !important;
    /*padding: 20px 16px 18px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(49, 68, 181, .16) !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(49, 68, 181, .10) !important;
    box-sizing: border-box !important;*/
}

.cssCaptchaImage {
    width: 100% !important;
    height: 82px !important;
    border-radius: 14px !important;
    border: 1px dashed rgba(49, 68, 181, .28) !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

    .cssCaptchaImage img {
        max-width: 100% !important;
        height: 82px !important;
        display: block !important;
    }

.cssCaptchaActions {
    width: 100% !important;
    margin-top: 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
}

    .cssCaptchaActions .RadButton,
    .cssCaptchaActions .RadButton .rbDecorated,
    .cssCaptchaActions .RadButton .rbText {
        width: 100% !important;
    }

    .cssCaptchaActions .cssLoginButton {
        padding-right: 0 !important;
    }

.cssCaptchaBackButton {
    border-color: #3144B5 !important;
    color: #3144B5 !important;
    background-color: #ffffff !important;
}
/* FIN CAPTCHA LOGIN */