/* ============================================================
   MOLÉCULA — Form Group
   Agrupa: label + input + hint/error.
   Depende de: atoms/inputs.css
   ============================================================ */

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

/* ── Estado de error en el grupo ── */
.form-group.has-error .form-input {
  border-color: var(--color-error);
  background-color: var(--color-error-soft);
}

.form-group.has-error .form-input:focus {
  box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.20);
}

/* ── Campo con botón mic (SOAP) ── */
.form-field-with-mic {
  position: relative;
}

.form-field-with-mic .form-input {
  padding-right: var(--space-10);
}

.form-field-with-mic .form-mic-btn {
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
}

/* ── Checkbox / Radio ── */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.form-check-label { font-size: var(--text-sm); color: var(--color-text); }

/* ── Grid de formularios (1 col mobile → 2 col tablet+) ── */
.form-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .span-full { grid-column: 1 / -1; }
}

/* ── Modificadores de form-group ── */
.form-group--mt-sm { margin-top: var(--space-2); }
.form-group--mt    { margin-top: var(--space-3); }

/* ── Grid con margen superior pequeño ── */
.form-grid--mt-sm  { margin-top: var(--space-2); }

/* ── Stack de checkboxes con margen superior ── */
.form-check-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Checkbox alineado con campos adyacentes en grid (push-down) */
.form-check--grid-align { padding-top: var(--space-6); gap: var(--space-3); }

/* ── Label inline con checkbox ── */
.form-label--checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* ── Barra de acciones del formulario ── */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}