/*=============================================
Mensaje de validación inicial
=============================================*/
.invalid-feedback {
    display: none;
}
input.is-invalid ~ .invalid-feedback {
    display: block;
}

/*=============================================
Estilos para los campos de formulario
=============================================*/
.form-control-custom {
    border: none;
    border-bottom: 2px solid #ccc;
    border-radius: 0;
    padding-left: 0;
    padding-right: 30px; /* Espacio para el botón de mostrar contraseña */
    background-color: transparent;
    box-shadow: none !important;
    transition: border-color 0.3s ease;
}

.form-control-custom:focus {
    border-color: var(--color-secundario);
    outline: none;
    box-shadow: none;
}

.is-valid {
    border-color: var(--color-secundario)!important;
}

.is-invalid {
    border-color: var(--danger)!important;
}

.invalid-feedback {
    color: var(--danger)!important;
}

.form-floating > .form-control-custom:not(:placeholder-shown) ~ label,
.form-floating > .form-control-custom:focus ~ label {
    opacity: 0.65;
    transform: scale(.85) translateY(-0.75rem) translateX(0.15rem);
}

.form-floating > label {
    font-weight: normal !important;
    left: 0;
    padding-left: 0;
}

/* Estilos para el botón de mostrar contraseña */
/* .btn-toggle-password {
    position: absolute;
    top: 50%;
    right: 10px; 
    transform: translateY(-50%);
    z-index: 10;

} */


/*=============================================
Ajuste para que el botón de mostrar contraseña
no se desplace cuando aparece el mensaje de error
=============================================*/

/* Contenedor relativo para posicionamiento correcto */
.form-floating,
.form-group {
    position: relative;
}

/* Estilo base: mensaje oculto inicialmente */
.invalid-feedback {
    display: none;
    font-size: 0.875em;
}

/* Mostrar el mensaje cuando el campo es inválido */
input.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Posicionamiento absoluto para evitar que afecte el flujo del layout */
.form-floating .invalid-feedback,
.form-group .invalid-feedback {
    position: absolute;
    bottom: -1.25rem; /* Ajusta según altura de línea */
    left: 0;
}

/* Botón de mostrar contraseña (ya lo tienes, pero aquí por coherencia) */
/* .btn-toggle-password {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 10;
} */


/*=============================================
Validaciones Redondeo y autofill
=============================================*/
.input-group .form-control.is-valid~.input-group-append .input-group-text,
.input-group .form-control.is-valid~.input-group-prepend .input-group-text,
.input-group .form-control.is-valid~.input-group-append .input-group-text,
.input-group .form-control.is-valid~.input-group-prepend .input-group-text {
    /* border-radius: 0.25rem !important;  */
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;

    border-color: var(--color-secundario) !important;
}

.input-group .input-group-append .input-group-text,
.input-group .input-group-prepend .input-group-text {
    /* border-radius: 0.25rem !important; */
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

/* .input-group .form-control.is-invalid~.input-group-append .input-group-text,
.input-group .form-control.is-invalid~.input-group-prepend .input-group-text,
.input-group .form-control.is-invalid~.input-group-append .input-group-text,
.input-group .form-control.is-invalid~.input-group-prepend .input-group-text  */

.input-group .form-control.is-invalid~.input-group-append .input-group-text, 
.input-group .form-control.is-invalid~.input-group-append .input-group-text {
    /* border-color: var(--danger); */
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
    border-radius: 0.25rem;
}

input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #495057 !important;
}