/* Diseñador de formularios (forms-panel.js). Solo usa tokens de design-system.css. */
.fd-search { width: 220px; }
.fd-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--sp-4); align-items: start; }
.fd-editor { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.fd-preview { position: sticky; top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card); }
.fd-preview iframe { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--radius-sm, 6px); background: #fff; }
.fd-errors { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--spot-red-border, var(--line-strong)); border-radius: var(--radius-md); background: var(--spot-red-bg, var(--wash)); color: var(--spot-red-text, var(--text-primary)); }
.fd-item { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.fd-item-head { display: flex; align-items: center; gap: var(--sp-2); }
.fd-blocks { display: flex; flex-direction: column; gap: var(--sp-2); }
.fd-block { position: relative; padding: var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface-base); }
.fd-block--heading { display: flex; align-items: center; gap: var(--sp-2); }
.fd-block--heading .fd-grow { flex: 1; font-weight: 600; }
.fd-block--field .fd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); padding-right: 104px; }
.fd-wide { grid-column: 1 / -1; }
.fd-req { align-self: end; padding-bottom: 6px; }
.fd-move { display: flex; gap: 2px; }
.fd-block--field > .fd-move, .fd-block--html > .fd-move { position: absolute; top: var(--sp-2); right: var(--sp-2); }
.fd-block--html textarea { margin-top: var(--sp-1); }
.fd-add { flex-wrap: wrap; }
.fd-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.fd-history li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line-soft); }
@media (max-width: 1100px) {
  .fd-layout { grid-template-columns: 1fr; }
  .fd-preview { position: static; }
  .fd-block--field .fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fd-block--field .fd-grid { grid-template-columns: 1fr; padding-right: 0; }
  .fd-block--field > .fd-move, .fd-block--html > .fd-move { position: static; justify-content: flex-end; margin-top: var(--sp-2); }
  .fd-search { width: 100%; }
}