/* VERSIÓN EN CSS PURO (si no usas un build de Tailwind) */

/* --- 1. Etiquetas Flotantes --- */
.form-label-float {
  position: absolute;
  top: 0.75rem; /* 12px */
  left: 0.75rem; /* 12px */
  color: #9ca3af; /* text-text-muted (gray-400) */
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

.peer:focus ~ .form-label-float,
.peer:not(:placeholder-shown) ~ .form-label-float {
  top: -0.625rem; /* -10px */
  left: 0.5rem; /* 8px */
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  color: #FF9900; /* text-accent-orange */
  background-color: #2D3748; /* bg-bg-card (ajustar si tu color es otro) */
  padding-left: 0.25rem; /* 4px */
  padding-right: 0.25rem; /* 4px */
}

/* --- 2. Estilos de Validación --- */
.form-input.is-invalid {
  border-color: #ef4444; /* red-500 */
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.form-input.is-invalid ~ .form-label-float {
  color: #f87171; /* red-400 */
}

.error-message {
  color: #f87171; /* red-400 */
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  margin-top: 0.5rem; /* 8px */
}