/* ══════════════════════════════════════════════════════════════
   ETB — Validación en tiempo real: estilos
   Cargado desde main.php como CSS externo (sin CSP violation)
══════════════════════════════════════════════════════════════ */

/* Mensaje de validación debajo del input */
.etb-v-msg {
  font: 400 11px/1.4 'Lexend', sans-serif;
  margin: 3px 0 0 4px;
  min-height: 16px;
  transition: color .2s, opacity .2s;
  opacity: 0;
}
.etb-v-msg.etb-v-show { opacity: 1; }
.etb-v-msg.etb-v-err  { color: #ef4444; }
.etb-v-msg.etb-v-hint { color: #888; }
.etb-v-msg.etb-v-ok   { color: #16a34a; }

/* Bordes de validación — usa border-color + box-shadow juntos
   para no generar doble borde con los estilos :focus/:not(:placeholder-shown)
   de .s2-input y .lm-input que ya usan box-shadow para simular borde grueso. */
.etb-v-border-ok,
.etb-v-border-ok:focus,
.etb-v-border-ok:not(:placeholder-shown) {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 1.3px #16a34a !important;
}

.etb-v-border-err,
.etb-v-border-err:focus,
.etb-v-border-err:not(:placeholder-shown) {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1.3px #ef4444 !important;
}