/* ═════════════════════════════════════════════════════════════
   FORMS CSS
   
   Estilos para:
   - Inputs de texto y número
   - Validación RUT (error/success)
   - Labels y helper text
   - Inputs de confirmación
═════════════════════════════════════════════════════════════ */

/* ── INPUT ── */
.input-group {
  margin-bottom: 16px
}

.input-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 8px
}

.input-wrapper {
  position: relative
}

.input-field {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-50);
  color: var(--gray-800);
  transition: all .2s;
  outline: none
}

.input-field::placeholder {
  color: var(--gray-400);
  font-weight: 400;
  letter-spacing: 0
}

.input-field:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(26, 58, 92, .1)
}

.input-field.error {
  border-color: var(--danger);
  background: #FEF2F2
}

.input-field.success {
  border-color: var(--success);
  background: #F0FDF4
}

.input-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px
}

.input-helper {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 8px
}

.input-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 8px
}

/* ── FORM ── */
.form-group {
  margin-bottom: 16px
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 8px
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-50);
  color: var(--gray-800);
  outline: none;
  transition: all .2s;
  font-family: inherit
}

.form-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(26, 58, 92, .08)
}

/* ── Responsive ── */
@media (min-width: 1024px) {
  .input-field { font-size: 20px; padding: 18px 20px }
}