/* Fluxos e processos (só esta tela). Usa os tokens de estilo.css. Mobile first, alvos de 44 px. */

/* modal largo para os editores */
.modal:has(.p-largo) { width: min(880px, calc(100% - 24px)); }
.p-form { display: grid; gap: 4px; }
.p-erro { white-space: pre-line; }
.p-h3 { font-size: 0.95rem; margin: 16px 0 8px; }
.p-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--marinho); color: #fff; font-size: 0.8rem; font-weight: 700; }
.p-icone { width: 38px; height: 38px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--ok-fundo); color: var(--verde); }
.p-icone svg { width: 20px; height: 20px; }
.p-icone-botao { width: 44px; height: 44px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; display: inline-grid; place-items: center; font-size: 1rem; color: var(--texto-2); }
.p-icone-botao svg { width: 16px; height: 16px; }
.p-icone-botao.perigo { color: var(--perigo); }
.p-icone-botao:disabled { opacity: 0.4; cursor: not-allowed; }
.p-botoes { display: inline-flex; gap: 6px; flex: none; }
.p-vazio { text-align: center; display: grid; gap: 8px; justify-items: center; padding: 24px 16px; }
.p-vazio h2 { justify-content: center; }
.p-secao { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.p-secao h2 { font-size: 1.05rem; }
.p-secao span { color: var(--texto-3); font-size: 0.88rem; }
.p-intro { display: flex; gap: 12px; align-items: flex-start; background: var(--ok-fundo); color: var(--marinho-2); border-radius: var(--raio); padding: 14px 16px; margin: 4px 0 8px; font-size: 0.92rem; }
.p-intro svg { width: 22px; height: 22px; flex: none; color: var(--verde); margin-top: 2px; }
.p-intro p { margin: 0; }
.p-tela .destaque .botao { margin-left: auto; flex: none; }

/* ---------- acompanhamento: quadro ---------- */
.p-instrucao { margin: 0 0 12px; font-size: 0.85rem; }
.p-quadro { grid-auto-columns: minmax(270px, 1fr); }
.p-coluna { transition: outline-color 0.15s; outline: 2px dashed transparent; outline-offset: -2px; }
.p-coluna h3 span { background: #fff; border-radius: 8px; padding: 0 8px; font-size: 0.8rem; color: var(--verde); }
.p-col-in_review h3 { color: var(--alerta); }
.p-col-closed h3 { color: var(--verde); }
.p-coluna.p-alvo { outline-color: var(--verde); background: var(--ok-fundo); }
.p-cartao { display: grid !important; gap: 6px; }
.p-cartao[draggable="true"] { cursor: grab; }
.p-cartao.p-arrastando { opacity: 0.5; }
.p-cartao h4 { margin: 0; font-family: Sora, Inter, sans-serif; font-size: 0.92rem; line-height: 1.35; }
.p-cartao p { margin: 0; font-weight: 600; font-size: 0.88rem; }
.p-cartao small { color: var(--texto-3); font-size: 0.78rem; }
.p-cartao-topo { display: flex; flex-wrap: wrap; gap: 6px; }
.p-cartao-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; border-top: 1px solid var(--linha); padding-top: 8px; font-size: 0.78rem; color: var(--texto-2); }
.p-cartao-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.p-cartao-acoes .botao { flex: 1 1 auto; }
.p-cartao-acoes svg { width: 14px; height: 14px; }

/* ---------- fluxos ---------- */
.p-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.p-fluxo-card { display: grid; gap: 8px; align-content: start; }
.p-fluxo-topo { display: flex; align-items: center; gap: 6px; }
.p-fluxo-topo .p-icone { margin-right: auto; }
.p-titulo-botao { background: none; border: 0; padding: 0; text-align: left; min-height: 44px; }
.p-titulo-botao h3 { font-size: 1.02rem; }
.p-titulo-botao:hover h3 { color: var(--verde); }
.p-rota { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.p-rota li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; background: var(--fundo); border-radius: 999px; padding: 3px 10px 3px 3px; }
.p-rota li span { width: 20px; height: 20px; border-radius: 50%; background: var(--marinho); color: #fff; display: inline-grid; place-items: center; font-size: 0.7rem; }
.p-rota li:not(:last-child)::after { content: "→"; color: var(--texto-3); margin-left: 2px; }
.p-fluxo-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--linha); padding-top: 10px; }
.p-fluxo-pe small { color: var(--texto-3); }
.p-fluxo-pe div { display: flex; gap: 6px; }
.p-fluxo-pe svg { width: 14px; height: 14px; }

.p-runs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.p-run { display: grid; gap: 10px; align-content: start; }
.p-run-topo { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.p-run-topo h3 { font-size: 1rem; }
.p-run-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 0.82rem; color: var(--texto-2); }
.p-run-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.p-run-etapas li { display: flex; gap: 10px; align-items: center; padding: 8px 0; position: relative; }
.p-run-etapas li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 38px; bottom: -6px; width: 2px; background: var(--linha); }
.p-run-etapas li div { flex: 1; min-width: 0; display: grid; }
.p-run-etapas li span:not(.p-num) { font-size: 0.82rem; color: var(--texto-2); }
.p-run-etapas li small { font-size: 0.76rem; color: var(--texto-3); }
.p-run-etapas li .p-num { background: #eef2f1; color: var(--texto-3); position: relative; z-index: 1; }
.p-run-etapas li.atual .p-num { background: var(--degrade); color: #fff; }
.p-run-etapas li.atual small { color: var(--verde); font-weight: 600; }
.p-run-etapas li.feita .p-num { background: var(--ok-fundo); color: var(--verde); }
.p-run-acao { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; min-height: 44px; padding: 0 !important; }
.p-run-acao svg { width: 14px; height: 14px; }

/* prévia (fluxo e modelo) */
.p-previa { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.p-previa > li { display: flex; gap: 10px; align-items: flex-start; background: var(--fundo); border-radius: 12px; padding: 10px 12px; }
.p-previa > li div { flex: 1; min-width: 0; }
.p-previa ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.88rem; color: var(--texto-2); }
.p-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 14px 0; font-size: 0.9rem; }
.p-dl dt { color: var(--texto-3); }
.p-dl dd { margin: 0; font-weight: 500; }

/* editor de fluxo */
.p-exemplo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.p-setores { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 12px; }
.p-setor { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; background: #fbfcfc; }
.p-setor-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p-setor-topo h3 { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }

/* iniciar implantação */
.p-politica { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.p-politica legend { font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.p-opcao { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--linha); border-radius: 14px; padding: 12px; cursor: pointer; min-height: 44px; }
.p-opcao input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--verde); flex: none; }
.p-opcao span { display: grid; }
.p-opcao small { color: var(--texto-2); font-size: 0.85rem; }
.p-opcao:has(input:checked) { border-color: var(--verde); background: var(--ok-fundo); }
.p-atribuicoes { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 8px; }
.p-atribuicoes li { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; border: 1px solid var(--linha); border-radius: 12px; padding: 10px; }
.p-atribuicoes li div { display: grid; }
.p-atribuicoes select { grid-column: 1 / -1; min-height: 44px; border: 1px solid var(--linha); border-radius: 10px; padding: 0 10px; background: #fff; }
@media (min-width: 720px) {
  .p-atribuicoes li { grid-template-columns: auto 1fr minmax(200px, 40%); }
  .p-atribuicoes select { grid-column: auto; }
}

/* editor de etapas */
.p-etapas { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; margin: 12px 0 4px; background: #fff; }
.p-etapas-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.p-etapas-topo h3 { font-size: 0.95rem; }
.p-copiar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.p-copiar .campo { flex: 1 1 200px; }
.p-copiar .botao { min-height: 48px; }
.p-trilha { list-style: none; margin: 12px 0; padding: 0; }
.p-terminal { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--texto-2); background: var(--fundo); border-radius: 999px; padding: 8px 14px; width: fit-content; }
.p-terminal.fim { background: var(--ok-fundo); color: var(--verde); }
.p-conector { display: flex; align-items: center; padding-left: 12px; height: 30px; position: relative; }
.p-conector::before { content: ""; position: absolute; left: 25px; top: 0; bottom: 0; width: 2px; background: var(--linha); }
.p-inserir { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linha); background: #fff; color: var(--verde); font-weight: 700; line-height: 1; }
.p-inserir:hover:not(:disabled) { background: var(--verde); color: #fff; border-color: var(--verde); }
.p-inserir:disabled { opacity: 0.4; }
.p-etapa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid var(--linha); border-radius: 12px; padding: 8px; background: #fff; }
.p-etapa input { flex: 1 1 180px; min-width: 0; min-height: 44px; border: 1px solid var(--linha); border-radius: 10px; padding: 0 12px; background: #fff; }
.p-etapa.p-alvo { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(22, 155, 82, 0.25); }
.p-etapa.p-arrastando { opacity: 0.5; }
.p-alca { cursor: grab; color: var(--texto-3); font-size: 1.1rem; width: 24px; text-align: center; user-select: none; }
@media (pointer: coarse) {
  .p-alca { display: none; } /* no toque, as setas ordenam */
  .p-inserir { width: 44px; height: 44px; }
  .p-conector { height: 48px; padding-left: 4px; }
  .p-conector::before { left: 25px; }
  .p-cartao .botao.pequeno, .p-fluxo-pe .botao.pequeno, .p-run .botao.pequeno, .p-lista-empresas .botao.pequeno, .p-tela .destaque .botao { min-height: 44px; }
}

/* modelos */
.p-conta { align-self: center; }
.p-modelo { text-align: left; border: 0; display: grid; gap: 8px; align-content: start; font: inherit; color: inherit; }
.p-modelo:hover { box-shadow: 0 0 0 2px var(--verde), var(--sombra); }
.p-modelo h3 { font-size: 1.02rem; }
.p-modelo p { margin: 0; }
.p-modelo .pilula { width: fit-content; }
.p-modelo .prazos { margin-top: 2px; }
.p-modelo-pe { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 0.8rem; color: var(--texto-2); border-top: 1px solid var(--linha); padding-top: 8px; }
.p-modelo-pe small { margin-left: auto; color: var(--texto-3); }
.p-empresas { border-top: 1px solid var(--linha); margin-top: 14px; }
.p-lista-empresas { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.p-lista-empresas li { display: grid; gap: 8px; border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; }
.p-lista-empresas li.velha { border-color: var(--alerta); background: var(--alerta-fundo); }
.p-lista-empresas li > div:first-child { display: grid; }
.p-aviso { font-size: 0.82rem; color: var(--alerta); font-weight: 600; margin-top: 4px; }
.p-botoes-texto { display: flex; flex-wrap: wrap; gap: 6px; }
.p-botoes-texto svg { width: 14px; height: 14px; }
.p-preserva { background: var(--fundo); border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.p-gerar { margin: 12px 0 4px; }
.p-envio { margin-top: 10px; border-style: dashed; }
.p-previa-imp { max-height: 260px; overflow: auto; margin-top: 10px; border: 1px solid var(--linha); border-radius: 12px; }