/* =========================================================
   MARCAS DE ERROR EN LOS CAMPOS
   RUTH.il

   El mensaje va DEBAJO del campo que falla, no en un alert()
   que bloquea la página y desaparece al aceptarlo.
   ========================================================= */

.campo-con-error,
input.campo-con-error,
select.campo-con-error,
textarea.campo-con-error {
  border-color: var(--danger, #C22B2B) !important;
  /* El color solo no basta: quien no distingue el rojo necesita otra
     señal. El halo cambia el grosor aparente del borde. */
  box-shadow: 0 0 0 3px rgba(194, 43, 43, .14) !important;
}

/* Algunas pantallas dibujan el borde con una línea aparte. */
.field .campo-con-error ~ .field-line,
.field:has(.campo-con-error) .field-line {
  background: var(--danger, #C22B2B) !important;
}

.error-de-campo {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--danger, #C22B2B);
  font-weight: 500;
}

/* El triángulo va en ::before y no como <i class="bi">: así no depende
   de que el CDN de iconos haya cargado. Un aviso de error que no se ve
   porque falló una fuente externa es peor que no tener aviso. */
.error-de-campo::before {
  content: "\26A0";
  flex-shrink: 0;
  font-size: .9rem;
  line-height: 1.25;
}