/* ============================================================
   PYM360 · COMPONENT — Input / Textarea / Select
   Capa 2 — primitivo del DS.

   Markup:
     <div class="pym-field">
       <label class="pym-field-lbl">Etiqueta</label>
       <input type="text" class="pym-input" placeholder="...">
       <span class="pym-field-hint">Texto de ayuda</span>
     </div>

   Class única:
     .pym-input        text/number/email/password
     .pym-textarea     textarea
     .pym-select       select nativo
     .pym-input--mono  fuente monoespaciada (para SKUs/códigos)
     .pym-input--sm    chico (en tablas inline)
   ============================================================ */

.pym-input,
.pym-textarea,
.pym-select{
  width:100%;
  background:var(--pym-color-surface-2);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-md);
  color:var(--pym-color-text);
  font-family:var(--pym-font-sans);
  font-size:var(--pym-fs-md);
  padding:8px 12px;
  transition:border-color var(--pym-trans-fast),box-shadow var(--pym-trans-fast),background var(--pym-trans-fast);
  color-scheme:dark;
}
[data-theme="light"] .pym-input,
[data-theme="light"] .pym-textarea,
[data-theme="light"] .pym-select{color-scheme:light}

.pym-input::placeholder,
.pym-textarea::placeholder{color:var(--pym-color-text-subtle)}

.pym-input:hover,
.pym-textarea:hover,
.pym-select:hover{border-color:var(--pym-color-border-strong)}

.pym-input:focus,
.pym-textarea:focus,
.pym-select:focus{
  outline:none;
  border-color:var(--pym-color-accent);
  box-shadow:0 0 0 3px var(--pym-color-accent-dim);
  background:var(--pym-color-surface);
}

.pym-input:disabled,
.pym-textarea:disabled,
.pym-select:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.pym-textarea{
  resize:vertical;
  min-height:90px;
  line-height:1.55;
}
.pym-textarea--mono{
  font-family:var(--pym-font-mono);
  font-size:12.5px;
}

.pym-input--mono{font-family:var(--pym-font-mono)}

/* ===== ERROR STATE ===== */
.pym-input--error,
.pym-textarea--error,
.pym-select--error{
  border-color:#f06a6a !important;
  box-shadow:0 0 0 3px rgba(240,106,106,.18) !important;
  animation:pym-input-shake .4s ease-in-out;
}
@keyframes pym-input-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(2px)}
}

/* ===== SIZES ===== */
.pym-input--sm,
.pym-select--sm{padding:5px 9px;font-size:var(--pym-fs-base);border-radius:var(--pym-radius-sm)}
.pym-input--lg{padding:11px 14px;font-size:var(--pym-fs-md)}

/* ===== INLINE VARIANT (sin width:100%) ===== */
.pym-input--inline,
.pym-select--inline{width:auto}

/* ===== FIELD WRAPPER ===== */
.pym-field{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.pym-field-lbl{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-dim);
  font-weight:var(--pym-fw-medium);
}
.pym-field-lbl--required::after{content:' *';color:var(--pym-color-danger)}

.pym-field-hint{
  font-size:var(--pym-fs-xs);
  color:var(--pym-color-text-muted);
  font-family:var(--pym-font-mono);
}
.pym-field-hint--ok{color:var(--pym-color-success)}
.pym-field-hint--warn{color:var(--pym-color-warning)}
.pym-field-hint--danger{color:var(--pym-color-danger)}

.pym-field-help{
  font-size:var(--pym-fs-sm);
  color:var(--pym-color-text-muted);
  line-height:1.4;
  padding:8px 10px;
  background:var(--pym-color-accent-dim);
  border-left:2px solid var(--pym-color-accent-2);
  border-radius:0 var(--pym-radius-sm) var(--pym-radius-sm) 0;
  margin-top:5px;
}
.pym-field-help b{color:var(--pym-color-text)}

/* ===== ICON HELPER (?) ===== */
.pym-help-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:13px;height:13px;
  border:1px solid var(--pym-color-border-strong);
  border-radius:50%;
  font-size:9px;
  color:var(--pym-color-text-muted);
  cursor:help;
  margin-left:5px;
}

/* ===== SEARCH PILL (no es exactamente input pero suele ir junto) ===== */
.pym-search-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--pym-color-surface-2);
  border:1px solid var(--pym-color-border);
  border-radius:var(--pym-radius-md);
  padding:7px 12px;
  font-size:var(--pym-fs-md);
  color:var(--pym-color-text-muted);
  cursor:pointer;
  transition:all var(--pym-trans-base);
}
.pym-search-pill:hover{background:var(--pym-color-surface-3);border-color:var(--pym-color-border-strong);color:var(--pym-color-text-dim)}
.pym-search-pill svg{width:14px;height:14px;flex-shrink:0}
.pym-search-pill kbd{
  font-family:var(--pym-font-mono);
  font-size:var(--pym-fs-xs);
  background:var(--pym-color-bg);
  padding:1px 5px;
  border-radius:var(--pym-radius-xs);
  color:var(--pym-color-text-muted);
  border:1px solid var(--pym-color-border);
  margin-left:auto;
}

/* ===== TEMA CLARO ===== */
[data-theme="light"] .pym-input,
[data-theme="light"] .pym-textarea,
[data-theme="light"] .pym-select{background:var(--pym-color-surface)}
[data-theme="light"] .pym-input:focus,
[data-theme="light"] .pym-textarea:focus,
[data-theme="light"] .pym-select:focus{background:#fff}