/* =========================================================
   CONSTRUTOR DE FLUXO — lista de etapas, dropzone, badges
   ========================================================= */

/* Toolbar do fluxo */
.flow-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  flex-wrap:wrap;
  gap:12px;
  padding:14px 16px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.flow-toolbar .ft-info{display:flex;align-items:center;gap:10px}
.flow-toolbar .ft-info .badge{
  background:var(--cyan-glow);
  border:1px solid var(--border-strong);
  color:var(--cyan);
  padding:4px 10px;
  border-radius:99px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em;
}
.flow-toolbar .ft-info .ft-text{font-size:13px;color:var(--muted)}
.flow-toolbar .ft-actions{display:flex;gap:8px}

/* Steps list */
.steps-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
  min-height:80px;
}

/* Step item card */
.step-item{
  background:linear-gradient(180deg, var(--bg-card), rgba(255,255,255,.01));
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px 14px 14px 8px;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  gap:12px;
  align-items:center;
  transition:all var(--t-fast);
  position:relative;
}
.step-item:hover{
  background:var(--bg-card-hover);
  border-color:var(--border-strong);
  transform:translateX(2px);
}
.step-item.dragging{
  opacity:.4;
  border-color:var(--cyan);
  cursor:grabbing;
}
.step-item.drag-over{
  border-color:var(--cyan);
  background:var(--cyan-glow);
  box-shadow:0 0 0 2px var(--cyan);
}
.step-item.invalid{border-color:rgba(255,107,155,.4)}
.step-item.invalid::after{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:var(--danger);
  border-radius:3px 0 0 3px;
}

.step-drag{
  width:24px;
  color:var(--muted-3);
  cursor:grab;
  display:grid;place-items:center;
  transition:color var(--t-fast);
}
.step-drag:hover{color:var(--cyan)}
.step-drag:active{cursor:grabbing}
.step-item.locked .step-drag{opacity:.3;cursor:not-allowed}

.step-num{
  width:38px;height:38px;
  background:var(--cyan-glow);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  font-weight:600;
  color:var(--cyan);
  flex-shrink:0;
}
.step-item.locked .step-num{
  background:rgba(255,255,255,.04);
  border-color:var(--border-soft);
  color:var(--muted);
}

.step-body{min-width:0}
.step-head{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.step-head .si-title{
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.step-body .si-preview{
  font-size:12px;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.5;
  margin-top:4px;
}
.step-body .si-preview.empty{font-style:italic;color:var(--danger);opacity:.7}

/* Badges por tipo */
.type-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  font-family:'JetBrains Mono',monospace;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:99px;
}
.type-badge svg{width:11px;height:11px}
.type-badge.t-blue   {color:var(--blue);   background:rgba(122,169,255,.1); border:1px solid rgba(122,169,255,.25)}
.type-badge.t-cyan   {color:var(--cyan);   background:var(--cyan-glow);     border:1px solid var(--border-strong)}
.type-badge.t-purple {color:var(--purple); background:rgba(184,164,255,.1); border:1px solid rgba(184,164,255,.25)}
.type-badge.t-green  {color:var(--success);background:rgba(95,255,176,.1);  border:1px solid rgba(95,255,176,.25)}

.media-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  font-family:'JetBrains Mono',monospace;
  font-weight:600;
  letter-spacing:.05em;
  padding:3px 7px;
  border-radius:99px;
  background:rgba(95,255,176,.1);
  color:var(--success);
  border:1px solid rgba(95,255,176,.25);
}
.media-badge.empty{
  background:rgba(255,209,102,.08);
  color:var(--warning);
  border-color:rgba(255,209,102,.25);
}

.lock-tag{
  font-size:10px;
  font-family:'JetBrains Mono',monospace;
  color:var(--muted);
  background:rgba(255,255,255,.04);
  padding:3px 8px;
  border-radius:99px;
  letter-spacing:.06em;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.lock-tag svg{width:10px;height:10px}

.step-actions{
  display:flex;
  gap:4px;
  flex-shrink:0;
}

/* Empty state */
.flow-empty{
  text-align:center;
  padding:48px 24px;
  border:1px dashed var(--border);
  border-radius:var(--radius-md);
  color:var(--muted);
  font-size:13px;
}
.flow-empty svg{color:var(--muted-2);margin-bottom:12px}

/* Add step panel */
.add-panel{
  background:linear-gradient(180deg, var(--cyan-glow), transparent 80%);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px;
  margin-bottom:8px;
}
.add-panel-title{
  font-size:13px;
  font-weight:600;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--cyan);
}
.type-picker{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:8px;
  margin-bottom:14px;
}
.type-card{
  cursor:pointer;
  background:rgba(0,0,0,.2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px;
  transition:all var(--t-fast);
  text-align:left;
}
.type-card:hover{border-color:var(--border-strong);background:rgba(0,0,0,.3);transform:translateY(-1px)}
.type-card.active{border-color:var(--cyan);background:var(--cyan-glow)}
.type-card .tc-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}
.type-card .tc-icon{
  width:24px;height:24px;
  border-radius:6px;
  display:grid;place-items:center;
}
.type-card.c-blue   .tc-icon{background:rgba(122,169,255,.15);color:var(--blue)}
.type-card.c-cyan   .tc-icon{background:var(--cyan-glow);color:var(--cyan)}
.type-card.c-purple .tc-icon{background:rgba(184,164,255,.15);color:var(--purple)}
.type-card.c-green  .tc-icon{background:rgba(95,255,176,.15);color:var(--success)}
.type-card .tc-name{font-size:13px;font-weight:600}
.type-card .tc-desc{font-size:11px;color:var(--muted);line-height:1.4}

/* Dropzone de mídia */
.dropzone{
  border:2px dashed var(--border-strong);
  border-radius:var(--radius-md);
  background:
    repeating-linear-gradient(45deg, rgba(117,239,255,.02), rgba(117,239,255,.02) 10px, transparent 10px, transparent 20px),
    rgba(0,0,0,.15);
  padding:48px 24px;
  text-align:center;
  transition:all var(--t-base);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.dropzone::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, var(--cyan-glow) 0%, transparent 60%);
  opacity:0;
  transition:opacity var(--t-base);
  pointer-events:none;
}
.dropzone:hover::before, .dropzone.drag::before{opacity:1}
.dropzone:hover, .dropzone.drag{
  border-color:var(--cyan);
  transform:scale(1.01);
}
.dropzone-icon{
  width:64px;height:64px;
  margin:0 auto 16px;
  background:var(--cyan-glow);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-md);
  display:grid;place-items:center;
  color:var(--cyan);
  position:relative;
  z-index:1;
  transition:all var(--t-base);
}
.dropzone:hover .dropzone-icon{transform:rotate(-6deg) scale(1.05)}
.dropzone-title{
  font-size:20px;
  font-weight:700;
  color:var(--cyan);
  letter-spacing:.08em;
  margin-bottom:8px;
  font-family:'JetBrains Mono',monospace;
  position:relative;
  z-index:1;
}
.dropzone-sub{
  font-size:13px;
  color:var(--muted);
  position:relative;
  z-index:1;
  max-width:380px;
  margin:0 auto;
  line-height:1.5;
}
.dropzone.filled{
  border-style:solid;
  background:rgba(95,255,176,.05);
  border-color:var(--success);
}
.dropzone.filled .dropzone-icon{
  background:rgba(95,255,176,.15);
  border-color:var(--success);
  color:var(--success);
}
.dropzone.filled .dropzone-title{color:var(--success)}
.dropzone.filled::before{display:none}