/* www/assets/fluxo_lancar.css — o MODAL DE LANÇAR, compartilhado (§36.16, 02/10/2026)
 *
 * Pedido do dono: *"Contas a Pagar · Lançamentos, novo lançamento e provisionados e torre
 * de notas fiscais nfs devem ter mesmo shared e visual e fazer com modal com fases
 * corretas necessarias para lancar nfs, tudo shared mesma engine"*.
 *
 * A gramática é a da grade (`fluxo_grade.css`): mesma escala de cor por estado, mesmos
 * cinzas, mesma tipografia miúda. Nada aqui inventa um segundo vocabulário — foi isso
 * que o §40.67 veio acabar.
 */
.fl-modal { font-size: 12.5px; }

/* ── a FAIXA DO DOCUMENTO: quem é, quanto, de quando ───────────────────────── */
.fl-doc { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; align-items: baseline;
    padding: .55rem .75rem; border: 1px solid rgba(125,125,125,.22); border-radius: 8px;
    background: rgba(125,125,125,.05); margin-bottom: .7rem; }
.fl-doc .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
    opacity: .55; display: block; }
.fl-doc .v { font-weight: 600; }
.fl-doc .fl-abrir { margin-left: auto; align-self: center; }

/* ── as FASES ──────────────────────────────────────────────────────────────── */
.fl-fase { border: 1px solid rgba(125,125,125,.22); border-radius: 8px; margin-bottom: .5rem;
    overflow: hidden; background: var(--bs-body-bg, #fff); }
.fl-fase > .cab { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
    cursor: pointer; user-select: none; }
.fl-fase > .cab:hover { background: rgba(125,125,125,.06); }
.fl-fase > .cab .n { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; background: rgba(125,125,125,.18); }
.fl-fase > .cab .t { font-weight: 600; }
.fl-fase > .cab .s { opacity: .62; font-size: 11.5px; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.fl-fase > .cab .e { margin-left: auto; flex: 0 0 auto; font-size: 10.5px; font-weight: 600;
    padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; }
.fl-fase > .cab .c { flex: 0 0 auto; opacity: .5; }
.fl-fase > .corpo { padding: .1rem .7rem .7rem; border-top: 1px solid rgba(125,125,125,.16); }
.fl-fase[hidden] { display: none; }

/* o estado da fase usa a MESMA escala da grade (fluxo_grade.css) */
.fl-e-ok   { background: rgba(var(--success-rgb), .14); color: rgba(var(--success-rgb), 1); }
.fl-e-at   { background: rgba(var(--warning-rgb), .18); color: #8a6d00; }
.fl-e-er   { background: rgba(var(--danger-rgb), .14);  color: rgba(var(--danger-rgb), 1); }
.fl-e-nada { background: rgba(125,125,125,.14); opacity: .75; }
.fl-fase.ok    > .cab .n { background: rgba(var(--success-rgb), .18); color: rgba(var(--success-rgb), 1); }
.fl-fase.erro  > .cab .n { background: rgba(var(--danger-rgb), .18);  color: rgba(var(--danger-rgb), 1); }
.fl-fase.aten  > .cab .n { background: rgba(var(--warning-rgb), .22); color: #8a6d00; }

/* ── a grade rótulo/valor de dentro de uma fase ────────────────────────────── */
.fl-l { display: flex; gap: .5rem; align-items: baseline; padding: .12rem 0; }
.fl-l > .k { flex: 0 0 132px; min-width: 132px; font-size: 9.5px; text-transform: uppercase;
    letter-spacing: .05em; opacity: .55; }
.fl-l > .v { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 860px) { .fl-2 { grid-template-columns: 1fr; } }

/* ── o checklist (a mesma marcação do .pv-chk, trazida para cá) ────────────── */
.fl-chk { list-style: none; margin: 0; padding: 0; }
.fl-chk li { display: flex; gap: .45rem; padding: .15rem 0; align-items: flex-start; }
.fl-chk i { margin-top: .15rem; }
.fl-ok { color: rgba(var(--success-rgb), 1); }
.fl-at { color: #8a6d00; }
.fl-er { color: rgba(var(--danger-rgb), 1); }

/* ── o rodapé: o que o ERP vai fazer, e o botão ────────────────────────────── */
.fl-passos { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
    font-size: 11px; opacity: .8; }
.fl-passos .p { padding: .08rem .45rem; border-radius: 999px;
    background: rgba(125,125,125,.12); white-space: nowrap; }
.fl-passos .seta { opacity: .45; }
.fl-pe { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
    padding-top: .6rem; margin-top: .2rem; border-top: 1px solid rgba(125,125,125,.2); }
.fl-pe .btn { white-space: nowrap; }
.fl-real { font-weight: 600; color: rgba(var(--danger-rgb), 1); }
.fl-homolog { font-weight: 600; color: #8a6d00; }

/* a saída do ERP, passo a passo */
.fl-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
    white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto;
    background: rgba(125,125,125,.07); border-radius: 6px; padding: .4rem .5rem; }

/* ══ A ESTEIRA (05/10/2026) ══════════════════════════════════════════════════════
   A trilha é a da Torre (assets/hydra_esteira.css) — aqui só o que é do modal: o painel de
   cada fase e o rótulo das colunas ("o documento" × "o pedido que ele fatura"). */
.fl-painel { padding-top: .1rem; }
.fl-painel[hidden] { display: none; }
.fl-sub { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .55;
    font-weight: 600; margin: .1rem 0 .35rem; }
/* o rodapé do último passo é a navegação da esteira (.ix-nav) E a fila de botões (.fl-pe):
   a régua de cima vem do .ix-nav, o espaçamento entre os botões vem do .fl-pe */
.fl-pe.ix-nav { flex-wrap: wrap; }