:root {
    /* Botón refresco CAPTCHA (icono) */
    --login-button-captcha-icon: url('../assets/refresh-captcha.svg');
    --login-button-captcha-position: center;
    --login-button-captcha-repeat: no-repeat;
    --login-button-captcha-size: auto;

    /* CaptchaChallenge - contenedor principal */
    --captcha-parent-padding: 25px 5px 10px 5px;
    --captcha-label-color: var(--login-color-text);
    /* Color label "Validación" por tipo de autenticación */
    --captcha-label-color-otp: var(--captcha-label-color);
    --captcha-label-color-tdoc: var(--captcha-label-color);
    --captcha-label-top: 2px;
    --captcha-label-offset-left: 8px;
    --captcha-label-font-size: 14px;
    --captcha-label-line-height: 1.2;

    /* CaptchaChallenge - bloque del CAPTCHA */
    --captcha-container-width: 260px;
    --captcha-container-padding: 2px;
    --captcha-container-bg: white;

    /* CaptchaChallenge - campo de resultado */
    --captcha-input-margin: 4px;
    --captcha-input-width: 240px;
    --captcha-input-height: 36px;
    --captcha-input-border: 1px solid #999999;
    --captcha-input-border-radius: 8px;
    --captcha-input-placeholder-opacity: 0.7;
    --captcha-input-placeholder-font-size: 14px;

    /* CaptchaChallenge - imagen / valCombo */
    --captcha-image-padding: 2px;

    /* CaptchaChallenge - botón refresco */
    --captcha-refresh-top: 12px;
    --captcha-refresh-right: 20px;
    --captcha-refresh-size: 20px;
}


.parent_container-captcha-challenge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--captcha-parent-padding);
    box-sizing: border-box;
}

    /* Reserva espacio fijo para el título "Validación" encima del CAPTCHA en todos los tamaños */
    .parent_container-captcha-challenge .container-captcha-challenge {
        flex-shrink: 0;
    }

    /* "Validación" alineado con el bloque CAPTCHA (260px centrado): no se descuadra al cambiar el ancho */
    .parent_container-captcha-challenge::before {
        position: absolute;
        top: var(--captcha-label-top);
        left: calc(50% - var(--captcha-container-width) / 2 + var(--captcha-label-offset-left));
        z-index: 1;
        white-space: nowrap;
        color: var(--captcha-label-color);
        font-size: var(--captcha-label-font-size);
        line-height: var(--captcha-label-line-height);
    }

    
    /* OTP: color del label "Validación" (ruta con .send-code-edesk y .container-code-login) */
    .clsContenedorTdoc .send-code-edesk .container-components-login .container-code-login .parent_container-captcha-challenge::before {
        color: var(--captcha-label-color-otp);
    }

    /* Tipo y número de documento: color del label "Validación" (ruta sin .container-code-login) */
    .clsContenedorTdoc .container-components-login .parent_container-captcha-challenge::before {
        color: var(--captcha-label-color-tdoc);
    }


    .parent_container-captcha-challenge.parent_label-cal::before {
        content: "Validación";
    }

    .parent_container-captcha-challenge.parent_label-des::before {
        content: "Validación";
    }

    .parent_container-captcha-challenge.parent_label-cod::before {
        content: "Validación";
    }

.container-captcha-challenge {
    position: relative;
    width: var(--captcha-container-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--captcha-container-padding);
    background-color: var(--captcha-container-bg);
    border-radius: var(--login-input-border-radius) !important;
}

    .container-captcha-challenge .parent_info-image-captcha,
    .container-captcha-challenge .parent_input-captcha-challenge {
        padding: 0;
    }

        .container-captcha-challenge .parent_input-captcha-challenge  {
           width: auto;
           margin: var(--captcha-input-margin);
        }

        .container-captcha-challenge .parent_input-captcha-challenge .input-captcha-challenge {
            width: var(--captcha-input-width);
            height: var(--captcha-input-height);
            margin: 0;
            border: var(--captcha-input-border);
            border-radius: var(--captcha-input-border-radius);
        }

        .container-captcha-challenge .parent_input-captcha-challenge .input-captcha-challenge::placeholder {
            opacity: var(--captcha-input-placeholder-opacity);
        }

            .container-captcha-challenge .parent_input-captcha-challenge .input-captcha-challenge::placeholder {
                font-size: var(--captcha-input-placeholder-font-size);
            }

        .container-captcha-challenge .parent_info-image-captcha .valCombo {
            padding: var(--captcha-image-padding);
        }

            .container-captcha-challenge .parent_info-image-captcha .valCombo img {
                width: 100%;
            }

    .container-captcha-challenge .parent_button-refresh-captcha {
        position: absolute;
        top: var(--captcha-refresh-top);
        right: var(--captcha-refresh-right);
        width: var(--captcha-refresh-size);
        height: var(--captcha-refresh-size);
        flex-shrink: 0;
    }

.container-captcha-challenge .button-refresh-captcha {
    width: var(--captcha-refresh-size);
    height: var(--captcha-refresh-size);
    min-width: var(--captcha-refresh-size);
    min-height: var(--captcha-refresh-size);
    flex-shrink: 0;
    background-image: var(--login-button-captcha-icon);
    background-position: var(--login-button-captcha-position);
    background-repeat: var(--login-button-captcha-repeat);
    background-size: var(--captcha-refresh-size) var(--captcha-refresh-size);
}

    .container-captcha-challenge .button-refresh-captcha:active {
        border: none;
    }