/* Marcas de error de los formularios de contacto.
   Ver assets/js/form-validacion.js */

.fv-mal,
.fv-mal:focus,
.fv-mal-caja,
.fv-mal-caja:focus-within {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, .25) !important;
}

/* El prefijo es un <select> con opacity:0 encima del contenedor: no se
   puede pintar de rojo, asi que se marca la caja que si se ve. */
.finp-prefix-wrap .fv-mal {
  box-shadow: none !important;
}

.fv-aviso {
  margin: 0 0 .75rem;
  padding: .55rem .75rem;
  border-radius: .35rem;
  background: rgba(192, 57, 43, .12);
  border: 1px solid rgba(192, 57, 43, .45);
  color: #c0392b;
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 600;
}

/* El aviso ocupa la fila entera si el formulario es de rejilla. */
.cf .fv-aviso,
.work-modal-form .fv-aviso {
  grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
  .fv-mal {
    transition: none;
  }
}