/* ==========================================================
   Studio RPA — página dedicada (complementa style.css + smartforms.css)
   Prefixo sr-  |  reaproveita os componentes sf-* e as variáveis do tema
   ========================================================== */

/* ---------- editor (mock do Studio) ---------- */
.sr-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sr-branch {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--bd2); font-size: .68rem; font-weight: 700; color: var(--tx2);
}
.sr-branch i { color: var(--pur); }
.sr-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px;
  font-size: .68rem; font-weight: 700; border: 1px solid var(--bd2); background: var(--bg2); color: var(--tx2);
}
.sr-btn.go { background: var(--grad); border-color: transparent; color: #fff; }
.sr-btn.ok { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.35); color: var(--sf-ok); }
.sr-toolbar .ms-auto { margin-left: auto; }

.sr-steps { display: flex; flex-direction: column; gap: 7px; }
.sr-step {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--bd2); font-size: .7rem; min-width: 0;
}
.sr-step .n { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; background: var(--bg2); color: var(--tx3); font-weight: 700; font-size: .6rem; display: flex; align-items: center; justify-content: center; }
.sr-step .ic { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .75rem; }
.sr-step .tx { min-width: 0; flex: 1; }
.sr-step .tx b { display: block; font-size: .72rem; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-step .tx small { color: var(--tx3); font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sr-step.sel { border-color: rgba(139,92,246,.7); box-shadow: 0 0 0 3px rgba(139,92,246,.14); }
.sr-step.bp::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sf-bad); flex: 0 0 9px; }
.sr-step.indent { margin-left: 22px; }
.sr-ic-web   { background: rgba(59,130,246,.14);  color: #60a5fa; }
.sr-ic-sap   { background: rgba(251,191,36,.14);  color: #fbbf24; }
.sr-ic-xls   { background: rgba(52,211,153,.14);  color: #34d399; }
.sr-ic-mail  { background: rgba(236,72,153,.13);  color: #f472b6; }
.sr-ic-api   { background: rgba(139,92,246,.16);  color: #a78bfa; }
.sr-ic-ctl   { background: rgba(148,163,184,.16); color: #94a3b8; }
.lm .sr-ic-web { color: #2563eb; } .lm .sr-ic-sap { color: #b45309; } .lm .sr-ic-xls { color: #059669; }
.lm .sr-ic-mail { color: #db2777; } .lm .sr-ic-api { color: #6d28d9; } .lm .sr-ic-ctl { color: #475569; }

.sr-kv { margin-bottom: 9px; }
.sr-kv label { display: block; font-size: .62rem; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.sr-seg { display: inline-flex; border: 1px solid var(--bd2); border-radius: 8px; overflow: hidden; }
.sr-seg span { padding: 4px 11px; font-size: .64rem; font-weight: 700; color: var(--tx3); background: var(--bg); }
.sr-seg span.on { background: rgba(139,92,246,.18); color: #a78bfa; }
.lm .sr-seg span.on { color: #6d28d9; }

.sr-console {
  margin-top: 12px; background: #0b0b14; border: 1px solid var(--bd2); border-radius: 10px; padding: 10px 12px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .64rem; line-height: 1.7; color: #9a9ab8;
}
.sr-console .t { color: #6b6b8a; }
.sr-console .ok { color: #34d399; } .sr-console .wr { color: #fbbf24; } .sr-console .er { color: #f87171; }
.sr-console .tt { font-family: "Space Grotesk", sans-serif; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6b6b8a; margin-bottom: 4px; display: flex; gap: 12px; }
.sr-console .tt b { color: #a78bfa; }
.sr-console .ex { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 100px; font-size: .58rem; font-weight: 700; background: rgba(236,72,153,.15); color: #f472b6; font-family: "Space Grotesk", sans-serif; }

/* ---------- cofre / lista de conexões ---------- */
.sr-vault { display: flex; flex-direction: column; gap: 8px; }
.sr-vitem { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: var(--bg); border: 1px solid var(--bd2); font-size: .7rem; }
.sr-vitem i.k { width: 28px; height: 28px; border-radius: 8px; background: rgba(139,92,246,.14); color: #a78bfa; display: flex; align-items: center; justify-content: center; font-size: .72rem; flex: 0 0 28px; }
.sr-vitem b { display: block; color: var(--tx); font-size: .72rem; }
.sr-vitem small { color: var(--tx3); font-size: .62rem; }
.sr-mask { letter-spacing: .15em; color: var(--tx3); }

/* ---------- agentes (mock do Orquestrador) ---------- */
.sr-bar { height: 6px; border-radius: 100px; background: var(--bg); border: 1px solid var(--bd); overflow: hidden; min-width: 54px; }
.sr-bar i { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--sf-ok), #3b82f6); }
.sr-bar i.w { background: linear-gradient(90deg, var(--sf-warn), var(--sf-bad)); }
.sr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--sf-ok); box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
.sr-dot.off { background: var(--sf-bad); box-shadow: 0 0 0 3px rgba(248,113,113,.18); }
.sr-dot.pa { background: var(--sf-warn); box-shadow: 0 0 0 3px rgba(251,191,36,.18); }
.sr-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.sr-kpi { background: var(--bg2); border: 1px solid var(--bd); border-radius: 10px; padding: 9px 11px; }
.sr-kpi small { display: block; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx3); }
.sr-kpi b { font-size: 1.05rem; font-weight: 700; }
@media (max-width: 575px) { .sr-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ---------- SophIA (chat mock) ---------- */
.sr-chip-opt { display: inline-block; padding: 4px 10px; margin: 3px 4px 0 0; border-radius: 100px; font-size: .64rem; font-weight: 600; background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.35); color: #a78bfa; }
.lm .sr-chip-opt { color: #6d28d9; }
.sr-token { margin-top: 10px; }
.sr-token .row-t { display: flex; justify-content: space-between; font-size: .62rem; color: var(--tx3); margin-bottom: 4px; }

/* ---------- fluxo de entrega (Studio → Maestro) ---------- */
.sr-flow5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: stretch; }
.sr-flow5 .sf-node { min-width: 0; margin: 0 6px; }
.sr-flow5 .sr-arrow { display: none; }
@media (max-width: 991px) { .sr-flow5 { grid-template-columns: 1fr 1fr; gap: 10px; } .sr-flow5 .sf-node { margin: 0; } }
@media (max-width: 575px) { .sr-flow5 { grid-template-columns: 1fr; } }

/* ---------- autonomia ---------- */
.sr-auto { padding: 26px; height: 100%; }
.sr-auto .sr-q { font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; }
.sr-auto p { font-size: .84rem; color: var(--tx2); margin: 0; }
.sr-big-stat { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; line-height: 1.1; }

/* ---------- nota ---------- */
.sr-ill { font-size: .7rem; color: var(--tx3); margin: 10px 0 0; }