/* organisms/menu-builder.css — construtor de Menus Personalizados (Fase Menu).
   Reutiliza tokens (--surface/--border/--text/--color-accent/--radius-sm/--space-*).
   Transições só de box-shadow/opacity/transform (border/bg congelam no dark — ver feedback). */

.cmp-menu-builder { width: 100%; }
.cmp-menu-builder__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
  gap: var(--space-4, 16px); align-items: start;
}
@media (max-width: 900px) { .cmp-menu-builder__grid { grid-template-columns: 1fr; } }

/* ── Editor (esquerda) ── */
.cmp-menu-builder__editor { display: flex; flex-direction: column; gap: var(--space-3, 12px); min-width: 0; }
.cmp-menu-builder__topbar { display: flex; gap: 8px; align-items: center; }
.cmp-menu-builder__name {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: .9rem; font-weight: 600; font-family: var(--font);
}
.cmp-menu-builder__name:focus { outline: none; box-shadow: 0 0 0 3px rgba(67,97,238,.12); }

.cmp-menu-builder__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: box-shadow .15s;
}
.cmp-menu-builder__btn:hover { box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.cmp-menu-builder__btn--primary { background: var(--color-accent, #5B5BF0); color: #fff; border-color: transparent; }
.cmp-menu-builder__btn .cmp-icon { flex-shrink: 0; }

.cmp-menu-builder__status { font-size: .78rem; min-height: 1em; }
.cmp-menu-builder__status.is-ok { color: var(--color-accent, #5B5BF0); }
.cmp-menu-builder__status.is-error { color: var(--danger, #dc2626); }

.cmp-menu-builder__field {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2, var(--surface)); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.cmp-menu-builder__field-label {
  display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted);
}
.cmp-menu-builder__inicio { max-width: 100%; width: 100%; }

/* ── Pool de abas disponíveis ── */
.cmp-menu-builder__pool {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;
  border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2, var(--surface));
}

/* ── Chips (abas) ── */
.cmp-menu-builder__chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text); font-size: .8rem; font-weight: 600; cursor: grab; user-select: none;
  transition: box-shadow .15s, opacity .15s;
}
.cmp-menu-builder__chip:hover { box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.cmp-menu-builder__chip--pool { opacity: .85; }
.cmp-menu-builder__chip.is-dragging { opacity: .4; }
.cmp-menu-builder__chip .cmp-icon { flex-shrink: 0; opacity: .8; }
.cmp-menu-builder__chip-x {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: none; background: transparent; color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 50%;
}
.cmp-menu-builder__chip-x:hover { color: var(--danger, #dc2626); }

/* ── Seções (tópicos) ── */
.cmp-menu-builder__sections { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.cmp-menu-builder__section {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 10px;
}
.cmp-menu-builder__section-head { display: flex; align-items: center; gap: 8px; }
.cmp-menu-builder__grip { color: var(--text-muted); font-size: .9rem; letter-spacing: -2px; cursor: default; flex-shrink: 0; }
.cmp-menu-builder__section-name {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2, var(--surface)); color: var(--text); font-size: .85rem; font-weight: 600; font-family: var(--font);
}
.cmp-menu-builder__section-name:focus { outline: none; box-shadow: 0 0 0 3px rgba(67,97,238,.12); }

.cmp-menu-builder__icon-btn {
  width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); font-size: .8rem; cursor: pointer; transition: box-shadow .15s, opacity .15s;
}
.cmp-menu-builder__icon-btn:hover { box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.cmp-menu-builder__icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.cmp-menu-builder__icon-btn--danger:hover { color: var(--danger, #dc2626); }
.cmp-menu-builder__icon-btn .cmp-icon { opacity: .8; }

.cmp-menu-builder__dropzone {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 46px; padding: 10px;
  border: 1px dashed var(--border); border-radius: var(--radius-sm); align-items: center;
  transition: box-shadow .15s;
}
.cmp-menu-builder__dropzone.is-drop-over { box-shadow: inset 0 0 0 2px var(--color-accent, #5B5BF0); }
.cmp-menu-builder__drop-hint { color: var(--text-muted); font-size: .78rem; font-style: italic; }

/* ── Menus salvos (direita) ── */
.cmp-menu-builder__saved { display: flex; flex-direction: column; gap: 8px; }
.cmp-menu-builder__saved-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  transition: box-shadow .15s;
}
.cmp-menu-builder__saved-item.is-editing { box-shadow: inset 0 0 0 2px var(--color-accent, #5B5BF0); }
.cmp-menu-builder__saved-name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  border: none; background: transparent; color: var(--text); font-size: .85rem; font-weight: 600;
  cursor: pointer; text-align: left; overflow: hidden;
}
.cmp-menu-builder__saved-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-menu-builder__saved-name .cmp-icon { flex-shrink: 0; opacity: .75; }
.cmp-menu-builder__badge {
  flex-shrink: 0; font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--success-soft, rgba(22,163,74,.12)); color: var(--success, #16a34a);
}
.cmp-menu-builder__new {
  margin-top: 4px; height: 38px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font-size: .82rem; font-weight: 600; cursor: pointer; transition: box-shadow .15s;
}
.cmp-menu-builder__new:hover { box-shadow: 0 1px 4px rgba(0,0,0,.08); }