/**
 * Ketin 2.0 — Form · kem2-form.css · v1.0.0 · 2026-07-20
 * Defaults derivados del patrón .form-grid/.field del design system
 * (labels 12.5px seminegrita navy, inputs 14px 12/14, borde --line,
 * radio 2, textarea 120px, focus outline acento, 2 col gap 18).
 * SIN !important: Design gana siempre. Identidades = carga inicial.
 */

/* ---------- Variables por identidad ---------- */
.kem2-form{
  --kem2-fm-ink: #12131c;
  --kem2-fm-navy: #171a38;
  --kem2-fm-soft: #7c7e8c;
  --kem2-fm-accent: #4800fe;     /* ZIHT brand-600 */
  --kem2-fm-line: #dbdde6;
  --kem2-fm-ok-bg: #e6f4ea;  --kem2-fm-ok-c: #1e6b34;
  --kem2-fm-err-bg: #fdeaea; --kem2-fm-err-c: #a12626;
}
.kem2-form.kem-ptf{
  --kem2-fm-accent: #a9781f;
  --kem2-fm-navy: #14261a;
}

/* ---------- Grid ---------- */
.kem2-fm-grid{
  display: grid;
  gap: var(--kem2-fm-gap, 18px);
}
.kem2-fm-cols-2{ grid-template-columns: 1fr 1fr; }
.kem2-fm-cols-1{ grid-template-columns: 1fr; }
.kem2-fm-field{ display: flex; flex-direction: column; gap: 6px; }
.kem2-fm-full{ grid-column: 1 / -1; }
.kem2-fm-hiddenwrap{ display: none; }
@media (max-width: 900px){
  .kem2-fm-cols-2{ grid-template-columns: 1fr; }
}

/* ---------- Labels e inputs ---------- */
.kem2-fm-label{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kem2-fm-navy);
  letter-spacing: .01em;
}
.kem2-fm-req{ color: var(--kem2-fm-accent); }
.kem2-fm-input{
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--kem2-fm-bc, var(--kem2-fm-line));
  border-radius: var(--kem2-fm-radius, 2px);
  background: var(--kem2-fm-bg, #ffffff);
  color: var(--kem2-fm-ink);
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease;
}
.kem2-fm-input:focus{
  border-color: var(--kem2-fm-bcf, var(--kem2-fm-accent));
  outline: 2px solid var(--kem2-fm-bcf, var(--kem2-fm-accent));
  outline-offset: 2px;
}
.kem2-fm-input[aria-invalid="true"]{
  border-color: var(--kem2-fm-bce, #a12626);
}
textarea.kem2-fm-input{ resize: vertical; min-height: 120px; }

/* ---------- Radios y checkbox ---------- */
.kem2-fm-radios{ display: flex; flex-direction: column; gap: 8px; }
.kem2-fm-radio, .kem2-fm-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--kem2-fm-ink);
  cursor: pointer;
}
.kem2-fm-radio input, .kem2-fm-check input{
  margin-top: 3px;
  accent-color: var(--kem2-fm-accent);
}
.kem2-fm-check a{ color: var(--kem2-fm-accent); }

/* ---------- Honeypot: fuera de vista, accesible-invisible ---------- */
.kem2-fm-hp{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Estado ---------- */
.kem2-fm-status{
  margin-top: 16px;
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 3px;
}
.kem2-fm-status[hidden]{ display: none; }
.kem2-fm-status-ok{ background: var(--kem2-fm-ok-bg); color: var(--kem2-fm-ok-c); }
.kem2-fm-status-error{ background: var(--kem2-fm-err-bg); color: var(--kem2-fm-err-c); }

/* ---------- Botón ---------- */
.kem2-fm-actions{ margin-top: 18px; display: flex; }
.kem2-fm-actions-center{ justify-content: center; }
.kem2-fm-actions-right{ justify-content: flex-end; }
.kem2-fm-actions-full .kem2-fm-btn{ width: 100%; }
.kem2-fm-btn{
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: var(--kem2-fm-btn-bg, var(--kem2-fm-accent));
  border: var(--kem2-fm-btn-bw, 1px) var(--kem2-fm-btn-bs, solid) var(--kem2-fm-btn-bc, transparent);
  border-radius: var(--kem2-fm-btn-br, 4px);
  padding: var(--kem2-fm-btn-pv, 11px) var(--kem2-fm-btn-ph, 22px);
  cursor: pointer;
  transition: opacity .15s ease;
}
.kem2-fm-btn:hover{ opacity: .88; }
.kem2-fm-btn:disabled{ opacity: .55; cursor: default; }
.kem2-fm-btn:focus-visible{
  outline: 2px solid var(--kem2-fm-accent);
  outline-offset: 3px;
}