/* ---- Utilidades usadas por el validador ---- */
.text-danger-600 {
    color: #dc2626;
}
/* rojo 600 estilo Tailwind */
.mt-1 {
    margin-top: 0.25rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Contenedor vertical para colocar el error debajo del campo/wrapper */
.field-col {
    display: flex;
    flex-direction: column;
}

/* ---- Mensajes de error justo debajo del wrapper ---- */
.kt-input + .error,
.input-group + .error,
.select2 + .error,
.select2-container + .error,
.form-check + .error,
.kt-checkbox-list + .error,
.kt-radio-list + .error {
    display: block;
    margin-top: .375rem; /* ~6px */
    font-size: .875rem;
}

/* ---- Estado inválido (sin doble borde) ---- */
/* 1) Si existe wrapper (.kt-input / .input-group), solo se pinta el wrapper */
.kt-input.is-invalid,
.input-group.is-invalid {
    border: 1px solid #dc2626 !important;
    border-radius: .475rem;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15);
}

    /* Evita que el input interno añada otro borde/halo cuando el wrapper está en error */
    .kt-input.is-invalid input,
    .input-group.is-invalid input,
    .kt-input.is-invalid .form-control,
    .input-group.is-invalid .form-control {
        border-color: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    /* Foco dentro del wrapper en error */
    .kt-input.is-invalid:focus-within,
    .input-group.is-invalid:focus-within {
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
    }

/* 2) Si NO hay wrapper, aplica el estado al control nativo */
input.is-invalid,
textarea.is-invalid,
select.is-invalid,
.form-control.is-invalid {
    border-color: #dc2626 !important;
    outline: none;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15);
}

    input.is-invalid:focus,
    textarea.is-invalid:focus,
    select.is-invalid:focus {
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
    }

/* ---- Select2: aplicar estado inválido al control visible ---- */
.select2-container .select2-selection.is-invalid,
.select2-container .select2-selection[aria-invalid="true"] {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15);
}

.select2-container--default .select2-selection--single.is-invalid:focus,
.select2-container--default .select2-selection--multiple.is-invalid:focus,
.select2-container--default .select2-selection--single[aria-invalid="true"]:focus,
.select2-container--default .select2-selection--multiple[aria-invalid="true"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

/* Multi: mejorar visibilidad del borde de tags cuando hay error */
.select2-container--default .select2-selection--multiple.is-invalid .select2-selection__choice,
.select2-container--default .select2-selection--multiple[aria-invalid="true"] .select2-selection__choice {
    border-color: rgba(220, 38, 38, 0.6);
}