/* ============================================================================
   Capi Când-IA Pro — Input (Fase 0)
   .ds-label-mono  → label JetBrains Mono uppercase 10px
   .ds-input       → input base com hairline border + focus ring dourado
   .ds-input-wrap  → wrapper que posiciona ícones absolutos dentro do input
   .ds-input-icon-left / .ds-input-icon-right → ícones internos
   ============================================================================ */

.ds-label-mono {
  display: block;
  font-family: var(--ds-font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ds-text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.ds-input-wrap {
  position: relative;
  display: block;
}

.ds-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--ds-surface);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--ds-radius);
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-md);
  line-height: 1.4;
  outline: none;
  transition: var(--ds-trans);
  box-sizing: border-box;
}

.ds-input::placeholder {
  color: var(--ds-text-muted);
}

.ds-input:hover:not(:focus):not(:disabled) {
  border-color: var(--ds-border-2);
}

.ds-input:focus {
  border-color: rgba(212,160,23,0.45);
  box-shadow: var(--ds-shadow-focus-gold);
}

.ds-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Inputs com ícones ─── */
.ds-input-icon-left {
  padding-left: 36px;
}

.ds-input-icon-right {
  padding-right: 36px;
}

.ds-input-wrap > svg {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  transform: translateY(-50%);
  stroke: var(--ds-text-muted);
  pointer-events: none;
}

.ds-input-wrap > svg.ds-icon-left {
  left: 12px;
}

.ds-input-wrap > svg.ds-icon-right {
  right: 12px;
  cursor: pointer;
  pointer-events: auto;
  stroke: var(--ds-text-2);
  transition: var(--ds-trans-fast);
}

.ds-input-wrap > svg.ds-icon-right:hover {
  stroke: var(--ds-text);
}

/* ─── Linha de label com link à direita (ex: "Senha" + "Esqueci minha senha") ─── */
.ds-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.ds-label-row .ds-label-mono {
  margin-bottom: 0;
}