/*▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ VALIDATION STATE ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄*/
/* Estilos para el borde de "campo requerido no completado" que
   controlHelper.js (validatorHighlight / validatorUnhighlight) aplica como
   highlight/unhighlight de _formValidatorLogic, vía la clase .state-error.
   Los inputs/select nativos ya se pintan solos con .is-invalid (Bootstrap,
   core.css) siempre que el campo esté dentro de un <form>.
 */
.state-error input,
.state-error select,
.state-error textarea {
    background: rgba(255, 76, 81, .08) !important;
    border-color: #ff4c51 !important;
}

.select2.state-error .select2-selection--single,
.select2.state-error .select2-selection--multiple,
.select2-selection.state-error,
.bootstrap-tagsinput.state-error {
    background: rgba(255, 76, 81, .08) !important;
    border-color: #ff4c51 !important;
}

/* .bootstrap-tagsinput no tiene, a diferencia de select2, una regla nativa
   del theme que engrose el borde a 2px en estado inválido (solo lo hace en
   :focus-within) — sin esto queda más fino que el resto de los campos. */
.bootstrap-tagsinput.state-error {
    border-width: 2px !important;
    padding-block: calc(0.426rem - 2px - var(--tagsinput-tweak, 0px)) !important;
    padding-inline: calc(0.9375rem - 2px) !important;
    min-height: calc(1.625em + .852rem + 2px - calc(var(--tagsinput-tweak, 0px)*2)) !important;
}