/* /funcionalidades/formularios/ — a published form in its builder. What
   pantallas-demo.css does not already draw: the way back, the title with its
   badge, the share card's two copyable boxes, the field rows, the people
   picker and the deal capture's choices. */

.pn-frame[data-screen="forms"] .pn-body.is-module { gap: 16px; }

.pn-frame[data-screen="forms"] .fm-top {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pn-frame[data-screen="forms"] .fm-back {
  color: var(--ac-mut);
  font-size: 9.5px;
}

.pn-frame[data-screen="forms"] .fm-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pn-frame[data-screen="forms"] .fm-title .pn-badge {
  font-size: 9.5px;
  letter-spacing: 0;
}

.pn-frame[data-screen="forms"] .fm-card .pn-card-body { gap: 10px; }
.pn-frame[data-screen="forms"] .fm-card .pn-card-head { align-items: center; }
.pn-frame[data-screen="forms"] .fm-card .pn-card-head .md-btn { flex-shrink: 0; }

/* ---------- the controls every card uses ---------- */

.pn-frame[data-screen="forms"] .fm-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pn-frame[data-screen="forms"] .fm-control.is-grow { flex: 1; }

.pn-frame[data-screen="forms"] .fm-label {
  color: var(--ac-mut);
  font-size: 9.5px;
  font-weight: 550;
}

.pn-frame[data-screen="forms"] .fm-label small {
  color: var(--ac-dim);
  font-weight: 400;
}

.pn-frame[data-screen="forms"] .fm-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid var(--ac-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ac-ink);
  font-size: 10.5px;
}

.pn-frame[data-screen="forms"] .fm-input em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-frame[data-screen="forms"] .fm-input svg { flex-shrink: 0; color: var(--ac-dim); }
.pn-frame[data-screen="forms"] .fm-input.is-select { min-width: 132px; }
.pn-frame[data-screen="forms"] .fm-input.is-search { justify-content: flex-start; color: var(--ac-dim); }

.pn-frame[data-screen="forms"] .fm-input.is-code {
  align-items: flex-start;
  min-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-family: var(--ac-mono);
  font-size: 9px;
  line-height: 1.45;
}

.pn-frame[data-screen="forms"] .fm-input.is-code em { white-space: normal; overflow-wrap: anywhere; }

.pn-frame[data-screen="forms"] .fm-input.is-area {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 1.45;
}

.pn-frame[data-screen="forms"] .fm-hint {
  color: var(--ac-mut);
  font-size: 9px;
}

.pn-frame[data-screen="forms"] .fm-save {
  display: flex;
  justify-content: flex-end;
}

.pn-frame[data-screen="forms"] .fm-sm {
  padding: 5px 10px;
  font-size: 10px;
}

/* ---------- share ---------- */

.pn-frame[data-screen="forms"] .fm-share {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pn-frame[data-screen="forms"] .fm-share-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pn-frame[data-screen="forms"] .fm-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.pn-frame[data-screen="forms"] .fm-share-head b { font-weight: 550; }

.pn-frame[data-screen="forms"] .fm-copy {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--ac-line);
  border-radius: 7px;
  color: var(--ac-mut);
}

.pn-frame[data-screen="forms"] .fm-copy svg { width: 12px; height: 12px; }

/* ---------- fields ---------- */

.pn-frame[data-screen="forms"] .fm-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--ac-line);
  border-radius: 9px;
  background: var(--ac-canvas);
}

.pn-frame[data-screen="forms"] .fm-field-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.pn-frame[data-screen="forms"] .fm-required {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  color: var(--ac-ink);
  font-size: 10.5px;
  white-space: nowrap;
}

.pn-frame[data-screen="forms"] .fm-box {
  display: grid;
  width: 12px;
  height: 12px;
  place-items: center;
  border: 1px solid #c9ccd3;
  border-radius: 3px;
  background: #fff;
}

.pn-frame[data-screen="forms"] .fm-box.is-on {
  border-color: var(--ac-accent);
  background: var(--ac-accent);
  color: #fff;
}

.pn-frame[data-screen="forms"] .fm-tick {
  width: 9px;
  height: 9px;
  stroke-width: 3;
}

.pn-frame[data-screen="forms"] .fm-moves {
  display: flex;
  gap: 2px;
  padding-bottom: 4px;
  color: var(--ac-mut);
  font-size: 11px;
}

.pn-frame[data-screen="forms"] .fm-moves i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 6px;
}

/* ---------- the people picker and the capture ---------- */

.pn-frame[data-screen="forms"] .fm-picker {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pn-frame[data-screen="forms"] .fm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pn-frame[data-screen="forms"] .fm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 3px;
  border: 1px solid var(--ac-line);
  border-radius: 999px;
  background: #fcfcfd;
  font-size: 10.5px;
}

.pn-frame[data-screen="forms"] .fm-chip b { font-weight: 500; }

.pn-frame[data-screen="forms"] .fm-chip-x {
  width: 11px;
  height: 11px;
  color: var(--ac-dim);
}

.pn-frame[data-screen="forms"] .fm-door {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pn-frame[data-screen="forms"] .fm-choices {
  display: flex;
  gap: 6px;
}