/* web/app/utils/validation.css */
/* ✅ FASE 1: Estilos para sistema de validación */

/* ===== ERROR STATES ===== */
.validation-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.validation-error:focus {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

/* ===== ERROR MESSAGE ===== */
.validation-error-message {
  margin-top: 6px;
  font-size: 12px;
  color: #ef4444;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: validation-error-enter 0.2s ease;
}

.validation-error-message::before {
  content: '⚠️';
  font-size: 14px;
  flex-shrink: 0;
}

@keyframes validation-error-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== SUCCESS STATE ===== */
.validation-success {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}

.validation-success-message {
  margin-top: 6px;
  font-size: 12px;
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 4px;
}

.validation-success-message::before {
  content: '✓';
  font-size: 14px;
  flex-shrink: 0;
}

/* ===== ACCESIBILIDAD ===== */
[aria-invalid="true"] {
  border-color: #ef4444;
}

[aria-invalid="true"]:focus {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .validation-error-message,
  .validation-success-message {
    font-size: 11px;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .validation-error-message {
    animation: none;
  }
}