/* ---------------- Tela PROCESSO (editor visual low-code) ---------------- */
.pr-head{display:flex;align-items:baseline;gap:12px;margin:12px 0 0;flex-wrap:wrap}
.pr-h1{font-size:18px;font-weight:800;color:var(--brand);margin:0}
.pr-proc{font-size:14px;font-weight:600;color:var(--ink)}
.pr-sigla{color:#8a94a4;font-weight:700}
/* MULTIPROCESSO: acordeão de processo do Editor (um aberto por vez). */
.ed-procs{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ed-proc{border:1px solid var(--line);border-radius:12px;background:#fff}
.ed-proc.open{box-shadow:0 1px 3px rgba(10,46,110,.06)}
.ed-proc-h{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;user-select:none;border-radius:12px}
/* reordenar processos: o punho e os estados do arrasto são compartilhados
   (.arr-* em components.css); aqui só a cor de repouso dele neste cabeçalho */
.ed-proc-h .arr-punho{color:#b8c0cd;font-size:13px}
.ed-proc.open .ed-proc-h{border-radius:12px 12px 0 0;border-bottom:1px solid var(--line)}
.ed-proc-h:hover{background:var(--brand-soft,#f0f4fb)}
.ed-proc-cv{font-size:11px;width:12px;flex:none;text-align:center;color:var(--muted)}
.ed-proc-sig{font-size:11px;font-weight:800;letter-spacing:.3px;color:#0a2e6e;background:#e8eefb;border:1px solid #cdddf7;border-radius:6px;padding:2px 8px;font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.ed-proc-nm{font-size:14px;font-weight:800;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-proc-body{padding:4px 16px 16px}
.pr-vazio{margin-top:18px;color:var(--muted);font-size:13px;padding:24px;text-align:center;border:1px dashed var(--line);border-radius:12px}
/* zona de ciclo de vida (toggles + excluir) no fim do processo aberto */
.ed-perigo{margin-top:16px;border:1px solid var(--line);border-radius:12px;background:#fafbfd;padding:12px 14px}
.ed-perigo-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:8px}
.ed-perigo-row{display:flex;align-items:center;gap:14px;padding:9px 0}
.ed-perigo-row+.ed-perigo-row{border-top:1px solid var(--line)}
.ed-perigo-txt{flex:1;font-size:12.5px;line-height:1.5;color:var(--ink)}
.ed-nota{color:var(--muted);font-size:12px}
/* seção de processos inativos (reativar) */
.ed-inativos{margin-top:16px;border:1px dashed var(--line);border-radius:12px;background:#fafbfd;padding:10px 14px}
.ed-inativos-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:6px}
.ed-inativo-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.ed-inativo-row+.ed-inativo-row{border-top:1px solid var(--line)}
.ed-inativo-nm{flex:1;font-size:13.5px;font-weight:700;color:var(--muted)}

.pr-body{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.pr-sec{padding:14px 16px}
/* Agrupamentos do editor (Fluxograma / Formulário / Acessos) — naturalmente fechados */
.pr-acc{border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:12px;overflow:hidden}
.pr-acc-h{display:flex;align-items:center;gap:9px;padding:12px 14px;font-size:14px;font-weight:800;color:var(--brand);cursor:pointer;user-select:none}
.pr-acc-h:hover{background:#f4f7fc}
.pr-acc-chev{font-size:11px;color:var(--muted)}
.pr-acc-body{padding:10px 12px 14px;border-top:1px solid var(--line)}
/* moldura, cantos e cabeçalho vêm do padrão (components.css). Aqui só o que é
   próprio desta tabela: fonte um pouco maior e células mais justas. */
/* A tabela é larga por natureza (uma coluna por feature, mais duas marcas em
   "Dados") e não cabe nem no computador. Sem rolagem PRÓPRIA o excesso não some
   discretamente: ele é CORTADO pelo `overflow-x:clip` que o app põe na página —
   medido, 1.272px de tabela em 1.184 de espaço, e 248 no celular. As últimas
   colunas ficavam inalcançáveis, sem nada na tela dizendo que existiam. */
.pr-acesso{overflow-x:auto}
.pr-acesso .pr-acc-table{font-size:13px}
.pr-acc-table thead th{padding:6px 8px}
.pr-acc-table td{padding:6px 8px;border-top:1px solid var(--line);vertical-align:middle}
.pr-acc-sel{font:inherit;font-size:12px;border:1px solid var(--line);border-radius:7px;padding:3px 6px;background:#fff;color:var(--ink)}
.pr-acc-sel:disabled{background:#f1f3f7;color:#aeb6c4}
.pr-acc-table th:not(:first-child),.pr-acc-table td:not(:first-child){text-align:center}
/* cabeçalho de grupo (área) */
.pr-acc-grp td{background:#eef1f6;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);padding:6px 8px}
/* linha de usuário SEM acesso ao processo: esmaecida */
.pr-acc-off td{opacity:.55}
.pr-acc-off td:nth-child(2){opacity:1}
/* Editor em modo VISUALIZAR (nível 'visualizar', sem gerir): esconde ações de edição */
.pr-ro #pr-add-campo,.pr-ro #pr-add-secao,.pr-ro #pr-add-grupo,.pr-ro #pr-org-campos,.pr-ro [data-gaddetapa],.pr-ro .fb-secao-cfg,.pr-ro [data-gedit],.pr-ro [data-gup],.pr-ro [data-gdown],.pr-ro [data-gdel]{display:none!important}
.pr-ro .fb-bloco,.pr-ro [data-etapa]{cursor:default}
.pr-sec-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.pr-sec-hd b{font-size:13px;color:var(--ink)}
.pr-none{font-size:12px;color:#b8c0cd;font-style:italic}

/* --- tabela de campos --- */
.pr-tbl{width:100%;border-collapse:collapse;font-size:13px}
.pr-tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#8a94a4;padding:6px 8px;border-bottom:1px solid var(--line)}
.pr-tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.pr-key{font-size:11px;color:#8a94a4;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.pr-selo{display:inline-block;font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-soft);border-radius:6px;padding:1px 7px;margin-right:4px}
.pr-acts{white-space:nowrap;text-align:right}
.pr-x{background:none;border:none;color:var(--red);font-size:16px;line-height:1;cursor:pointer;font-weight:700;padding:0 4px}
.pr-x:hover{transform:scale(1.15)}

/* --- fluxo visual (faixas + blocos + setas) --- */
.pr-faixa{margin-bottom:14px}
.pr-faixa:last-child{margin-bottom:0}
.pr-faixa-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pr-faixa-cod{font-size:11px;font-weight:800;color:#fff;background:var(--brand);border-radius:5px;padding:1px 6px;letter-spacing:.03em}
.pr-faixa-nm{font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:#8a94a4}
.pr-faixa-ctrls{display:flex;align-items:center;gap:4px;margin-left:6px}
.pr-gbtn{background:var(--bg);border:1px solid var(--line);border-radius:6px;color:#6b7480;font-size:12px;line-height:1;
  cursor:pointer;padding:3px 7px;font-weight:600;transition:border-color .12s,color .12s,background .12s}
.pr-gbtn:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.pr-gbtn:disabled{opacity:.4;cursor:not-allowed}
.pr-gbtn-add{color:var(--brand);font-weight:700}
.pr-gbtn-add:hover{background:var(--brand-soft)}

/* código da etapa dentro do bloco */
.pr-bloco-cod{font-size:10.5px;font-weight:800;color:#6b7480;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px}

/* paleta de cor (swatches) */
.pr-paleta{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.pr-swatch{width:26px;height:26px;border-radius:7px;border:2px solid transparent;cursor:pointer;box-shadow:0 0 0 1px var(--line) inset;padding:0;transition:transform .1s}
.pr-swatch:hover{transform:scale(1.12)}
.pr-swatch.on{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset,0 2px 6px rgba(0,0,0,.2)}
.pr-swatch-none{background:#fff;color:#b8c0cd;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* subtítulo de grupo no "pode ir para" */
.pr-subgrupo{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--brand);margin:8px 0 2px;border-bottom:1px solid var(--line);padding-bottom:3px}
.pr-flow{display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px}
.pr-arrow{display:flex;align-items:center;color:#9aa4b2;font-size:18px;font-weight:700;padding:0 2px}
.pr-arrow-off{color:#d6dbe3}

/* --- grade 2D: coluna (stack vertical) + zonas de drop laterais --- */
.pr-col{display:flex;flex-direction:column;gap:6px;align-items:stretch}
/* zona lateral entre colunas: alvo p/ "virar coluna própria". Fina por padrão;
   destaca-se no dragover (.pr-colgap-on). */
.pr-colgap{align-self:stretch;min-height:60px;width:24px;flex:none;border-radius:6px;transition:background .12s,width .12s}
.pr-colgap-on{background:var(--brand-soft);width:30px;box-shadow:inset 0 0 0 2px var(--brand)}
/* indicadores de empilhar: acima/abaixo do bloco alvo */
.pr-bloco.pr-drop-top{box-shadow:0 -3px 0 0 var(--brand)}
.pr-bloco.pr-drop-bottom{box-shadow:0 3px 0 0 var(--brand)}

.pr-bloco{display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-width:160px;max-width:220px;width:100%;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:grab;text-align:left;
  transition:box-shadow .12s,border-color .12s}
.pr-bloco:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.pr-bloco:active{cursor:grabbing}
/* estado de arraste */
.pr-bloco.pr-dragging{opacity:.45;cursor:grabbing}
/* Filhos não capturam eventos → dragover/drop caem SEMPRE no bloco (corrige o
   "destaca mas não solta" quando o cursor estava sobre um filho do bloco). */
.pr-bloco *{pointer-events:none}
.pr-bloco-hd{display:flex;align-items:center;gap:6px;width:100%}
.pr-bloco-nm{font-size:13px;font-weight:700;color:var(--ink)}
.pr-tp{font-size:9.5px;font-weight:700;text-transform:uppercase;border-radius:5px;padding:1px 6px;margin-left:auto}
.pr-tp-inicial{color:#1a7f4b;background:#dff5e8}
.pr-tp-final{color:#8a5a00;background:#fdeecf}
.pr-out{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.pr-out-lbl{font-size:11px;color:var(--brand);font-weight:600}

/* ---------------- Construtor visual de formulário (fb) ---------------- */
.fb-tools{display:flex;align-items:center;gap:8px}
/* controles de zoom do fluxograma */
.pr-zoom{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pr-zoom .pr-zbtn{border:0;border-radius:0;padding:5px 10px;font-size:15px;line-height:1;min-width:30px}
.pr-zoom .pr-zlbl{border:0;border-radius:0;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:5px 8px;font-size:11.5px;min-width:48px;font-variant-numeric:tabular-nums}
.fb-hint{font-size:11.5px;color:var(--muted);margin:2px 0 10px}
/* moldura dimensionável do cartão */
.fb-frame{position:relative;max-width:100%}
.fb-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;grid-auto-rows:76px;grid-auto-flow:row;
  padding:12px;border:1px dashed var(--line);border-radius:12px;background:repeating-linear-gradient(90deg,transparent,transparent calc(8.333% - 1px),rgba(0,0,0,.035) calc(8.333% - 1px),rgba(0,0,0,.035) 8.333%);min-height:120px}
.fb-frame-res{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;cursor:nwse-resize;
  border-right:3px solid var(--brand);border-bottom:3px solid var(--brand);border-bottom-right-radius:8px}
.fb-frame-size{position:absolute;right:16px;bottom:3px;font-size:10px;font-weight:600;color:var(--muted);
  pointer-events:none;background:rgba(255,255,255,.82);padding:0 5px;border-radius:5px}
/* seções (grupos visuais) no editor — caixa ATRÁS dos campos; header/alça/resize
   por cima (z-index). position:relative SEM z-index p/ não criar stacking context
   que prenderia o header (assim ele fica acima dos campos). */
.fb-secao{position:relative;margin:-11px -7px 5px -7px;border:1.5px dashed var(--brand);border-radius:12px;background:rgba(10,46,110,.045);pointer-events:none}
.fb-secao-hd{position:absolute;top:-11px;left:10px;right:8px;z-index:4;display:flex;align-items:center;gap:6px;pointer-events:none}
.fb-secao-grip{pointer-events:auto;cursor:grab;color:#9fb0c6;font-size:12px;line-height:1;background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.fb-secao-grip:hover{color:var(--brand)}
.fb-secao-grip:active{cursor:grabbing}
.fb-secao-tt{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:#fff;padding:1px 8px;border-radius:6px;border:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-secao-cfg{pointer-events:auto;margin-left:auto;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:5px;font-size:11px;line-height:1;padding:2px 6px;color:var(--muted)}
.fb-secao-cfg:hover{color:var(--brand);border-color:var(--brand)}
.fb-secao-res{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;z-index:4;pointer-events:auto;cursor:nwse-resize;border-right:3px solid var(--brand);border-bottom:3px solid var(--brand);border-bottom-right-radius:8px}
.fb-bloco{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 8px 7px 19px;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;overflow:hidden;box-shadow:0 1px 2px rgba(8,18,44,.05)}
.fb-bloco:hover{border-color:var(--brand);box-shadow:0 2px 8px rgba(10,46,110,.12)}
.fb-dragging{opacity:.4}
/* alça de arraste (6 pontos) — única parte que inicia o movimento */
/* alça = SÓ os 6 pontinhos no canto superior esquerdo (não a faixa lateral toda):
   fica claro que se arrasta por ali. Hover destaca em azul. */
.fb-grip{position:absolute;left:3px;top:6px;width:17px;height:16px;display:flex;align-items:center;justify-content:center;
  color:#b3becd;font-size:12px;line-height:1;cursor:grab;border-radius:5px}
.fb-grip:hover{color:#fff;background:var(--brand)}
.fb-grip:active{cursor:grabbing}
/* rótulo do campo (como no cartão) + tag do tipo */
/* Rótulo do bloco: título quebra em até 3 linhas (max-height) pra sobrar espaço ao
   preview do preenchimento abaixo; a sigla do tipo é compacta e ocupa só a 1ª linha
   (não intromete na 2ª), então da 2ª linha em diante o título usa a largura toda. */
.fb-bloco-lbl{display:block;flex:none;position:relative;font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0;overflow:hidden;line-height:1.2;max-height:3.6em}
.fb-bloco-nm{display:inline;overflow-wrap:break-word;white-space:normal}
/* "…" só quando o nome é cortado nas 3 linhas (classe fb-cut posta pelo JS ao detectar
   overflow) — mantém a quebra por palavra normal, sem alterar o layout. */
.fb-bloco-lbl.fb-cut::after{content:'…';position:absolute;right:0;bottom:0;padding:0 1px 0 5px;background:#fff;color:var(--muted);line-height:1.2}
.fb-tp{float:right;font-size:8px;line-height:1.25;font-weight:700;text-transform:uppercase;color:var(--brand);background:#eef2fb;border-radius:5px;padding:0 5px;margin:0 0 0 6px;white-space:nowrap;letter-spacing:0}
/* prévia do controle (simula o input do cartão) */
.fb-prev{flex:1;min-height:26px;border:1px solid var(--line);border-radius:8px;background:var(--bg);
  display:flex;align-items:center;padding:5px 9px;font-size:12px;color:#94a3b8}
.fb-prev-sel{justify-content:space-between}
.fb-prev-sel b{color:var(--muted)}
.fb-prev-area{align-items:stretch}
.fb-prev-arq{color:var(--brand);font-weight:600;justify-content:center;border-style:dashed}
.fb-prev-look{color:var(--muted);font-style:italic;justify-content:flex-start}
.fb-prev-check{color:var(--brand);justify-content:flex-start;gap:8px;font-size:12px}
/* seções da config do campo (agrupamento por funcionalidade no modal de editar campo) */
.fb-cfg-sec{margin:14px 0 4px;padding-bottom:5px;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--brand)}

/* ---- Editor de etapa: "Pode ir para" (destinos c/ sub-opções aninhadas) ---- */
.et-lista{display:flex;flex-direction:column;gap:6px}
.et-flag{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer;text-transform:none;font-weight:600}
.et-flag input{flex:none}
.et-dest{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;transition:border-color .12s,background .12s}
.et-dest.on{border-color:var(--brand);background:var(--brand-soft)}
.et-dest-hd{font-weight:700}
/* sub-opções: só aparecem quando o destino está marcado; indentadas sob o flag */
.et-dest-sub{display:none;flex-direction:column;gap:8px;margin:9px 0 1px 26px;padding-left:12px;border-left:2px solid var(--line)}
.et-dest.on .et-dest-sub{display:flex}
.et-sub-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.et-dest-rot{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;width:100%;box-sizing:border-box}
.et-dest-rot:focus{outline:none;border-color:var(--brand)}
/* cor do botão: swatches (seleção única) */
.et-btncores{display:flex;gap:6px;flex-wrap:wrap}
.et-btncor{width:26px;height:26px;border-radius:7px;border:2px solid transparent;cursor:pointer;padding:0}
.et-btncor.on{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset}
/* campos obrigatórios para mover: chips multi-toggle */
/* "Campos obrigatórios" recolhível (details) — mais limpo por padrão */
.et-reqs-det{margin-top:2px}
.et-reqs-sum{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.et-reqs-sum::-webkit-details-marker{display:none}
.et-reqs-sum::before{content:'▸';font-size:10px;color:var(--muted)}
.et-reqs-det[open] .et-reqs-sum::before{content:'▾'}
.et-reqs-sum:hover{color:var(--brand)}
.et-reqs-det[open] .et-reqs{margin-top:6px}
.et-reqs{display:flex;gap:6px;flex-wrap:wrap}
/* cabeçalho de grupo dentro dos chips (quebra a linha do flex) */
.et-req-grp{flex:0 0 100%;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin:5px 0 1px}
.et-req-chip{font-size:11.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px 11px;cursor:pointer}
.et-req-chip:hover{border-color:var(--brand);color:var(--brand)}
.et-req-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
/* Checklist: o chip vem acompanhado dos DOIS eixos — "exigir linha" e a
   marcação. Andam juntos (não quebram linha no meio) e somem quando o chip está
   desligado: eixo de um campo que não é exigido é ruído. */
.et-req-par{display:inline-flex;align-items:center;gap:5px}
.et-req-par .et-req-chip{border-top-right-radius:4px;border-bottom-right-radius:4px}
.et-req-linha{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.et-req-linha input{width:13px;height:13px;accent-color:var(--brand);cursor:pointer}
.et-req-linha input:disabled{cursor:default;opacity:.55}
.et-req-linha input:disabled + span{opacity:.55}
.et-req-regra{font:inherit;font-size:11px;font-weight:600;color:var(--brand);background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px 6px;max-width:190px}
.et-req-regra:focus{outline:none;border-color:var(--brand)}
.et-req-par.off .et-req-regra,.et-req-par.off .et-req-linha{display:none}
.et-req-par.off .et-req-chip{border-radius:99px}
/* ações "carimbar campo" (regra de negócio ao entrar) */
.et-acoes{display:flex;flex-direction:column;gap:6px;margin:2px 0 8px}
.et-acao{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.et-acao select{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff;min-width:150px}
.et-acao-sep{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.et-acao-x{margin-left:auto;border:none;background:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0 4px}
.et-acao-x:hover{color:var(--red)}
/* blocos de ação da regra (carimbar / criar linha / atualizar linha) */
.rg-acoes{display:flex;flex-direction:column;gap:10px;margin:4px 0 8px}
.rg-acao{border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:#fbfcfe;display:flex;flex-direction:column;gap:6px}
.rg-acao-hd{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink)}
.rg-acao-hd b{color:var(--brand)}
.rg-acao-x{margin-left:auto;border:none;background:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0 4px}
.rg-acao-x:hover{color:var(--red)}
.rg-acao select,.rg-acao input[type=text]{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff}
.rg-tabela,.rg-chavecampo{align-self:flex-start;min-width:200px}
.rg-mapa{display:flex;flex-direction:column;gap:5px}
.rg-map{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rg-col-nome{font-size:12.5px;font-weight:600;color:var(--ink);min-width:130px}
.rg-arr{color:var(--muted);font-weight:700}
.rg-valw{display:inline-flex}
.rg-valw .rg-val{min-width:150px}
.rg-carimbo .rg-campoalvo{min-width:150px}
.rg-map-key{background:#fdf7ea;border-radius:8px;padding:3px 6px;margin:0 -6px}
.rg-map-key .rg-col-nome{color:#8a5a00}
.rg-add{display:flex;gap:8px;flex-wrap:wrap}
/* prazo/responsável por etapa */
.et-atrib-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.et-atrib-row select,.et-atrib-row input{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff}
.ap-diasw{font-size:12px;color:var(--muted)}
.ap-niv-lbl{font-size:12px;color:var(--muted)}
/* ---- Prazo (box: simples/condicional + resultados reutilizáveis) ---- */
.et-prazo-box{margin:2px 0 10px}
.et-prazo-box select,.et-prazo-box input{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff}
.pz-modo-row{margin-bottom:8px}
.ap-presult{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-agg{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-agg-f{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:3px 8px;background:#f6f8fc}
.ap-agg-f input{padding:0!important;border:0!important;width:15px;height:15px;accent-color:var(--brand)}
.ap-hint{font-size:12px;color:var(--muted)}
/* regras condicionais */
.pz-cond{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fafbfe}
.pz-regras{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.ap-condrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px}
.ap-cond{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--ink)}
.ap-cond-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 2px;margin-left:auto}
.ap-cond-x:hover{color:#c0392b}
/* "então →" evidente (separa a condição do resultado) */
.ap-then{font-weight:800;color:var(--brand);font-size:12.5px;white-space:nowrap;background:#eef3fc;border-radius:6px;padding:3px 8px}
.pz-add-regra{font-size:12px;padding:5px 10px}
.pz-senao{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.pz-senao-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.et-atrib-row .usel{min-width:170px}
/* bloco "gestor da área" (responsável) */
.ga-cfg{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ga-cfg select{font:inherit;font-size:12.5px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff}
.ga-usuario,.ga-area{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ---- Barra de grupos (faixas do kanban) ---- */
.pr-grupos{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 2px}
.pr-grupos-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.pr-gchip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:99px;padding:3px 6px 3px 11px}
.pr-gchip b{font-size:9px;font-weight:800;color:var(--brand);background:var(--brand-soft);border-radius:4px;padding:1px 5px}
.pr-gbtn{border:none;background:none;color:var(--muted);font-size:12px;line-height:1;cursor:pointer;padding:1px 3px;border-radius:5px}
.pr-gbtn:hover:not([disabled]){background:var(--brand-soft);color:var(--brand)}
.pr-gbtn[disabled]{opacity:.3;cursor:default}
.pr-gdel:hover{background:var(--red-soft);color:var(--red)}

/* ---- Canvas BPMN (fluxo: nós + conexões) ---- */
.pr-canvas-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#f8fafd;max-height:62vh;margin-top:10px}
.pr-canvas{position:relative;min-width:100%}
.pr-edges{position:absolute;top:0;left:0;pointer-events:none;z-index:0}
.pr-edge{fill:none;stroke:#7a89a6;stroke-width:1.8;pointer-events:none}
.pr-edge-temp{stroke-dasharray:5 4;stroke:var(--brand)}
/* área de clique larga e invisível sobre a seta (arrastar=desvia · tocar=remove) */
.pr-edge-hit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:move;touch-action:none}
.pr-edge-hit:hover{stroke:rgba(10,46,110,.10)}
.pr-node{position:absolute;z-index:1;cursor:pointer;box-sizing:border-box;user-select:none;touch-action:none}
.pr-node.dragging{z-index:5;cursor:grabbing;opacity:.9}
/* alças de reordenar conectores na face: VISUAL = semicírculo discreto colado na
   face; HITBOX = círculo transparente (pointer-events:all reativa o clique, já que a
   SVG .pr-edges tem pointer-events:none). Destaca a meia-lua ao passar o mouse. */
.pr-anchor-dot{fill:#9fb0c6;opacity:.55;pointer-events:none;transition:fill .12s,opacity .12s}
.pr-anchor{fill:transparent;cursor:ns-resize;pointer-events:all}
.pr-anchor-g:hover .pr-anchor-dot{fill:var(--brand);opacity:1}
/* nó selecionado (ctrl/shift-clique) p/ mover em grupo */
.pr-node.pr-node-sel{z-index:4}
.pr-node.pr-node-sel .pr-node-in{outline:2px solid var(--brand);outline-offset:2px;box-shadow:0 4px 14px rgba(10,46,110,.22)}
.pr-node-inicio.pr-node-sel{box-shadow:0 0 0 3px var(--brand),0 4px 14px rgba(10,46,110,.28)}
.pr-node.connect-target .pr-node-in{outline:2px dashed var(--brand);outline-offset:1px}
/* alça de saída "＋": arrasta para conectar noutro nó */
.pr-node-out{position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;
  background:#fff;border:1.5px solid var(--brand);color:var(--brand);font-size:12px;font-weight:800;line-height:15px;text-align:center;
  cursor:crosshair;z-index:3;opacity:0;transition:opacity .12s;touch-action:none}
/* no toque não há hover: mantém a alça de conexão sempre visível em telas pequenas */
@media(hover:none){.pr-node-out{opacity:.9}}
.pr-node:hover .pr-node-out{opacity:1}
.pr-node-out:hover{background:var(--brand);color:#fff}
.pr-node-in{height:100%;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;box-shadow:var(--shadow);padding:8px 11px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.pr-node:hover .pr-node-in{box-shadow:0 4px 14px rgba(10,46,110,.16)}
.pr-node-hd{display:flex;align-items:center;justify-content:space-between;gap:6px}
.pr-node-cod{font-size:8.5px;font-weight:800;letter-spacing:.3px;color:var(--brand);background:var(--brand-soft);border-radius:4px;padding:1px 5px}
.pr-node-bot{font-size:13px;line-height:1}
.pr-node-grp{font-size:9px;font-weight:700;color:var(--muted);background:#eef1f6;border-radius:5px;padding:1px 6px;max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-node-nm{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* regra 🤖 = nó de passagem (roxo, tracejado) */
.pr-node-regra .pr-node-in{border-style:dashed;border-left-color:#7c3aed;background:#f6f5ff}
.pr-node-regra .pr-node-cod{color:#5a3fb0;background:#ece9ff}
/* início/fim como eventos (borda arredondada forte) */
.pr-node-ini .pr-node-in{border-left-color:#1a7f4b}
.pr-node-fim .pr-node-in{border-left-color:#0a7d54;background:#f2fbf6}
.pr-node-canc .pr-node-in{border-left-color:#c0392b;background:#fdf1f0}
/* nó de INÍCIO (⭘) — círculo BPMN start event; a área clicável É o círculo */
.pr-node-inicio{border-radius:50%;background:#eafaf0;border:2.5px solid #1a7f4b;display:flex;align-items:center;justify-content:center;color:#146c3f;font-size:17px;box-sizing:border-box}
.pr-node-inicio:hover{box-shadow:0 4px 14px rgba(10,46,110,.16)}
.pr-ini-ic{line-height:1}
/* ---- Editor de etapa: "Campos nesta etapa" (lista com segmentos de modo) ---- */
.et-campos{display:flex;flex-direction:column;gap:2px}
.et-campo-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px;border-radius:8px}
.et-campo-row:hover{background:var(--brand-soft)}
.et-campo-nome{font-size:13px;color:var(--ink);font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.et-seg{display:flex;gap:2px;background:#eef1f6;border:1px solid var(--line);border-radius:9px;padding:2px;flex:none}
.et-seg-b{font-size:11px;font-weight:700;color:var(--muted);background:none;border:none;border-radius:7px;padding:4px 10px;cursor:pointer;white-space:nowrap;transition:color .12s,background .12s}
.et-seg-b:hover{color:var(--brand)}
.et-seg-b.on{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(10,46,110,.14)}
.fb-bloco-selos{display:flex;gap:4px;flex-wrap:wrap}
.fb-selo{font-size:8.5px;font-weight:700;text-transform:uppercase;color:#8a5a00;background:#fdeecf;border-radius:5px;padding:1px 6px}
.fb-selo-tab{color:#1a5fb4;background:#e5effb}
.fb-vazio{grid-column:1/-1;align-self:center;text-align:center}
/* alças de redimensionamento */
/* alças do construtor (mover/redimensionar): touch-action none p/ arrastar no toque */
.fb-grip,.fb-secao-grip,.fb-res,.fb-secao-res,.fb-frame-res{touch-action:none}
.fb-res{position:absolute;background:transparent}
.fb-res-r{top:0;right:0;width:11px;height:100%;cursor:ew-resize}
.fb-res-b{left:0;bottom:0;height:11px;width:100%;cursor:ns-resize}
.fb-bloco:hover .fb-res-r{box-shadow:inset -3px 0 0 -1px var(--brand)}
.fb-bloco:hover .fb-res-b{box-shadow:inset 0 -3px 0 -1px var(--brand)}
/* campos fora do formulário */
.fb-fora{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.fb-fora-lbl{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase}
.fb-chip{font-size:12px;font-weight:600;color:var(--brand);background:#eef2fb;border:1px solid var(--line);border-radius:20px;padding:4px 12px;cursor:pointer}
.fb-chip:hover{background:#e0e8fa}
/* campos OBSOLETOS: saíram do formulário numa versão anterior, mas o dado dos
   cartões continua lá. Tom âmbar (histórico) p/ não confundir com "fora do form". */
.fb-obs{border-top:1px dashed var(--line);padding-top:10px}
.fb-chip-obs{color:#8a5a00;background:#fdf3e0;border-color:#f0dcb4}
.fb-chip-obs:hover{background:#fbe9c9}
.fb-chip-n{font-style:normal;font-size:10.5px;font-weight:800;color:#8a5a00;background:#f6e2bd;border-radius:20px;padding:0 6px;margin-left:5px}
.fb-obs-hint{flex-basis:100%;font-size:11.5px;color:var(--muted);line-height:1.5}
/* opções curadas (config do select) */
.fb-opcoes{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:4px}
.fb-opc{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);text-transform:none;font-weight:600}

/* ---------------- Versões do processo (0057/0058) ---------------- */
.pv-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;padding:10px 14px;border-radius:10px;background:#fff6e5;border:1px solid #f0d9a8;color:#7a5a10;font-size:12.5px;font-weight:600}
.pv-banner b{color:#5c4208}
/* excluir rascunho: destrutivo, discreto até o hover */
.pv-del{color:#b4232f}
.pv-del:hover{background:#fdeaec;border-color:#f3c2c7}
/* publicar: ação principal do banner (fica antes do "voltar", empurrado p/ a direita) */
.pv-pub{margin-left:auto;font:inherit;font-size:12px;font-weight:800;color:#fff;background:var(--brand);border:1px solid var(--brand);border-radius:8px;padding:5px 12px;cursor:pointer}
.pv-pub:hover{filter:brightness(1.08)}
.pv-pub+.pv-back{margin-left:0}
.pv-back{margin-left:auto;font:inherit;font-size:12px;font-weight:700;color:var(--brand);background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 11px;cursor:pointer}
.pv-back:hover{background:var(--brand-soft)}
.pv-wrap{padding:4px 2px}
.pv-hint{font-size:12.5px;color:var(--muted);margin:0 0 12px}
.pv-hint b{color:var(--ink)}
.pv-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.pv-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.pv-row.on{border-color:var(--brand);background:var(--brand-soft)}
.pv-cod{font-size:11px;font-weight:800;font-family:ui-monospace,Menlo,Consolas,monospace;color:#0a2e6e;background:#e8eefb;border:1px solid #cdddf7;border-radius:6px;padding:2px 7px}
.pv-rot{flex:1;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-st{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;border-radius:20px;padding:2px 9px}
.pv-st-publicada{color:#1f7a3d;background:#e2f5e9}
.pv-st-rascunho{color:#9a6a00;background:#fbefd2}
.pv-st-arquivada{color:#8a94a6;background:#f1f3f7}
.pv-here{font-size:11px;font-weight:700;color:var(--brand)}
/* aviso informativo (trava de exclusão de etapa) */
.pv-info{font-size:13px;line-height:1.6;color:var(--ink);margin:0 0 8px}
.pv-info-list{font-size:13px;line-height:1.8;color:var(--ink);margin:0 0 10px 18px}
.pv-info-dica{color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pv-info-bloco{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:10px}
.pv-info-t{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:6px}
.pv-info-bloco .pv-info-list{margin:0 0 8px 18px}
.pv-info-bloco .pv-info-dica{margin:0;padding:0;border:0;font-size:12.5px;line-height:1.7}

/* Editor de LISTA das opções de resposta do checklist (config do campo) */
/* O editor de lista de opções (.ck-oe*) virou COMPARTILHADO em 14/08/2026:
   a configuração de coluna de tabela usa o mesmo controle. Os estilos foram
   para `shared/components.css`, junto do resto do que serve a mais de uma tela. */

/* Marcas de edição da coluna "Dados" (a tabela do processo). Ficam sob o
   nível, na mesma célula: editar LINHA e editar COLUNA se somam, então não são
   degraus do select — e virar duas colunas novas alargaria uma tabela que já
   tem uma coluna por feature. */
.pr-acc-ck{display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;color:var(--muted);cursor:pointer;margin-top:3px;white-space:nowrap}
.pr-acc-ck>input{margin:0}
.pr-acc-off .pr-acc-ck{cursor:default}