/* Fluxos (1.5.2) e Grupos de fluxos (1.5.1) dentro dos ambientes */

.col-id{width:56px;color:var(--ink-3);font-family:"SFMono-Regular",Consolas,monospace;font-size:11.5px}
.fx-cel{display:flex;align-items:flex-start;gap:10px}
.fx-cel .nm-f{min-width:0}
.fx-cel b{display:block;font-weight:500}
.fx-cel span.d{display:block;font-size:11px;color:var(--ink-3);margin-top:1px}
.fx-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.fx-tag{font-size:10px;color:#4f46e5;background:#eef2ff;border-radius:999px;padding:1px 7px}
.fx-ord{color:var(--ink-4);font-size:10px;margin-left:3px}
.fx-grupo{display:inline-flex;align-items:center;gap:6px}
.fx-grupo i{width:6px;height:6px;border-radius:50%;background:#6366f1}
.fx-grupo.padrao i{background:#9ca3af}
.fx-eq{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)}
.fx-eq.vazio{color:var(--ink-4)}
td.col-acoes{position:relative}
.fx-menu{position:absolute;right:14px;margin-top:4px;z-index:10;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(16,24,40,.14);padding:4px;min-width:190px;text-align:left}
.fx-menu button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:0;padding:7px 9px;border-radius:5px;font-size:12px;cursor:pointer;color:var(--ink-2)}
.fx-menu button:hover{background:#f3f4f6}
.fx-menu button.perigo{color:var(--erro)}
.fx-menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.segmento button{display:inline-flex;align-items:center;gap:5px}

/* avatar do fluxo: ícone da biblioteca ou iniciais (regra da 1.1.2.5) */
.av-f{border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:700;flex:none;overflow:hidden;background:#94a3b8}
.av-f.s28{width:28px;height:28px;font-size:10.5px}
.av-f.s34{width:34px;height:34px;font-size:12px}
.av-f.s56{width:56px;height:56px;font-size:18px;border-radius:12px}
tr.inativa .av-f{opacity:.55}

/* cards */
.fx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.fx-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px;position:relative}
.fx-card:hover{border-color:#cbd5e1;box-shadow:0 2px 8px rgba(16,24,40,.06)}
.fx-card.inativa{background:#fcfcfd}
.fx-card.inativa .cf-nome,.fx-card.inativa .av-f{opacity:.6}
.cf-topo{display:flex;align-items:flex-start;gap:10px}
.cf-nome{flex:1;min-width:0}
.cf-nome b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-nome span{font-size:11px;color:var(--ink-3);font-family:"SFMono-Regular",Consolas,monospace}
.cf-desc{font-size:11.5px;color:var(--ink-3);min-height:17px;margin:0}
.cf-desc.sem{font-style:italic;color:var(--ink-4)}
.cf-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--ink-2)}
.cf-meta span{display:inline-flex;align-items:center;gap:5px}
.cf-pe{display:flex;align-items:center;gap:6px;border-top:1px solid var(--line-soft);padding-top:10px;margin-top:auto}
.cf-pe .sub-cel{flex:1;min-width:0}
.fx-card .fx-menu{right:10px;bottom:44px}

/* gaveta Editar fluxo */
.fx-bloco-av{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.fx-bloco-av .bt{display:flex;gap:8px;margin-bottom:6px}
.fx-interruptor{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-bottom:16px}
.fx-interruptor .txt{flex:1}
.fx-interruptor .txt b{display:block;font-size:12.5px;font-weight:600}
.fx-interruptor .txt span{font-size:11.5px;color:var(--ink-3)}
.fx-chave{width:36px;height:20px;border-radius:10px;background:#d1d5db;border:0;position:relative;cursor:pointer;flex:none;padding:0}
.fx-chave::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.fx-chave.on{background:var(--ok)}
.fx-chave.on::after{left:18px}
.fx-sub{font-size:11.5px;color:var(--ink-3);margin:-6px 0 12px}
.fx-add-eq{display:flex;gap:8px;margin:12px 0}
.fx-add-eq select{flex:1;min-width:0;height:32px;border:1px solid var(--line);border-radius:6px;background:var(--campo);padding:0 10px;font:inherit;font-size:12.5px}
.fx-equipes{border:1px solid var(--line);border-radius:6px}
.fx-equipes .item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid var(--line-soft)}
.fx-equipes .item:last-child{border-bottom:0}
.fx-equipes .av{width:28px;height:28px;border-radius:7px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
.fx-equipes .txt{flex:1;min-width:0}
.fx-equipes .txt b{display:block;font-weight:500;font-size:12.5px}
.fx-equipes .txt span{font-size:11px;color:var(--ink-3)}
.fx-equipes .vazio{padding:22px 16px;text-align:center;color:var(--ink-3);font-size:12px}
.fx-em-uso{margin:6px 0 0;padding-left:16px}
.fx-em-uso li{margin:2px 0}

/* seletor de ícones */
.modal.icones{width:min(640px,calc(100% - 32px))}
.icones-grade{border:1px solid var(--line);border-radius:6px;max-height:340px;overflow:auto;padding:4px 10px 10px;margin-top:10px}
.icones-grade h4{margin:10px 0 6px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.icones-grade .g{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.ic-op{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px 7px;border:1px solid transparent;border-radius:6px;background:0;cursor:pointer;color:var(--ink-2);font-size:10.5px;text-align:center;line-height:1.2}
.ic-op:hover{background:#f5f7fa}
.ic-op.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.previa-ic{display:flex;align-items:center;gap:10px;margin-right:auto;font-size:12px;color:var(--ink-2)}