/* ============================================================
   MATIOS UI — matios-ui-input.css
   Version: 2.0.0
   ============================================================ */

/* ── Base element / Elemento base ───────────────────────── */

.mts-input,
.mts-textarea {
  width: 100%;
  min-height: var(--mts-control-height-md);
  padding: 8px var(--mts-space-3);
  font-size: var(--mts-font-size-md);
  font-family: var(--mts-font-family);
  color: var(--mts-text-primary);
  background-color: var(--mts-bg-surface);
  border: var(--mts-border-width) var(--mts-border-style) var(--mts-border-color);
  border-radius: var(--mts-radius-md);
  transition: border-color var(--mts-transition-fast), box-shadow var(--mts-transition-fast);
  outline: none;
  line-height: var(--mts-line-height-base);
}

.mts-textarea {
  min-height: 96px;
  resize: vertical;
}

/* ── Form group ─────────────────────────────────────────── */

.mts-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--mts-space-1);
  margin-bottom: var(--mts-space-4);
}

.mts-label {
  font-size: var(--mts-font-size-sm);
  font-weight: var(--mts-font-weight-medium);
  color: var(--mts-text-secondary);
  line-height: var(--mts-line-height-tight); /* was missing → label was taller than .mts-form-label, misaligning rows */
}

/* .mts-label--required::after moved to base/matios-ui-base.css (single source of truth, always loaded) */

/* .mts-form-hint / .mts-form-error moved to base/matios-ui-base.css (single source, always loaded) */

/* ── Input wrap ─────────────────────────────────────────── */

.mts-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mts-input-wrap--icon-left  .mts-input,
.mts-input-wrap--icon-left  .mts-textarea { padding-left: 38px; }

.mts-input-wrap--icon-right .mts-input,
.mts-input-wrap--icon-right .mts-textarea { padding-right: 38px; }

/* Focus state / Estado focus */
.mts-input-wrap--focus .mts-input,
.mts-input-wrap--focus .mts-textarea {
  border-color: var(--mts-border-color-focus);
  box-shadow: 0 0 0 3px var(--mts-color-primary-light);
  outline: none;
}

/* Error state / Estado error */
.mts-input-wrap--error .mts-input,
.mts-input-wrap--error .mts-textarea {
  border-color: var(--mts-color-danger);
}
.mts-input-wrap--error.mts-input-wrap--focus .mts-input,
.mts-input-wrap--error.mts-input-wrap--focus .mts-textarea {
  box-shadow: 0 0 0 3px var(--mts-color-danger-light);
}

/* Success state / Estado success */
.mts-input-wrap--success .mts-input,
.mts-input-wrap--success .mts-textarea {
  border-color: var(--mts-color-success);
}

/* ── Disabled state / Estado disabled ───────────────────── */
/*
 * Uses --mts-text-disabled (defined in all themes) for consistent
 * cross-theme appearance. The wrap loses opacity and pointer-events;
 * the input itself also shows a visual cue via background + text color.
 *
 * Usa --mts-text-disabled (definido en todos los temas) para aspecto
 * consistente entre temas. El wrap pierde opacidad y pointer-events;
 * el input también muestra una señal visual via background + color de texto.
 */
.mts-input-wrap--disabled {
  opacity: 0.55;
  pointer-events: none;
}

.mts-input:disabled,
.mts-textarea:disabled,
.mts-input-wrap--disabled .mts-input,
.mts-input-wrap--disabled .mts-textarea {
  background-color: var(--mts-bg-surface-2);
  color: var(--mts-text-disabled);
  border-color: var(--mts-border-color);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--mts-text-disabled); /* fix Safari opacity */
}

/* Disabled label also muted / Label también atenuado cuando disabled */
.mts-input-wrap--disabled ~ .mts-label,
.mts-form-group:has(.mts-input-wrap--disabled) .mts-label {
  color: var(--mts-text-disabled);
}

/* ── Readonly state / Estado readonly ───────────────────── */
/*
 * Visually different from disabled: readable but not editable.
 * Visualmente diferente al disabled: legible pero no editable.
 */
.mts-input:read-only:not(:disabled),
.mts-textarea:read-only:not(:disabled) {
  background-color: var(--mts-bg-surface-2);
  color: var(--mts-text-secondary);
  border-color: var(--mts-border-color);
  cursor: default;
}

/* ── Icons ──────────────────────────────────────────────── */

.mts-input__icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  color: var(--mts-text-muted);
  pointer-events: none;
}
.mts-input__icon--left  { left: 0; }
.mts-input__icon--right { right: 0; }
.mts-input__icon svg    { width: 16px; height: 16px; }

.mts-input__clear,
.mts-input__eye {
  pointer-events: auto;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: 18px;
  color: var(--mts-text-muted);
  border-radius: var(--mts-radius-sm);
  transition: color var(--mts-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mts-input__clear:hover,
.mts-input__eye:hover   { color: var(--mts-text-primary); }
.mts-input__eye--active { color: var(--mts-color-primary); }

/* ── Character counter ──────────────────────────────────── */

.mts-input__count {
  font-size: var(--mts-font-size-xs);
  color: var(--mts-text-muted);
  text-align: right;
  display: block;
  margin-top: 3px;
}