/* www/assets/hydra_esteira.css — A ESTEIRA, compartilhada (05/10/2026)
 *
 * A identidade é a da Torre de NF (§40.24.1, "a trilha de passos"): uma fila de passos
 * com o número (ou ✓), o nome e, embaixo, POR QUE o passo existe — e, depois deles, o
 * degrau hachurado do que acontece fora do Hydra.
 *
 * Estas regras moravam no page.html da Torre e só existiam com a Torre aberta. Saíram
 * de lá quando o dono pediu a mesma esteira no FAZER do Contas a Pagar ("mesma
 * identidade de esteira com fases que realmente interessam"). As classes são as
 * MESMAS, então a Torre não mudou uma vírgula; quem desenha é assets/hydra_esteira.js.
 * Os comentários vieram junto: cada um conta por que a regra é assim. */

.ix-trilha { display: flex; align-items: stretch; gap: 0; margin: .2rem 0 .9rem;
    border: 1px solid rgba(125,125,125,.2); border-radius: 10px; overflow: hidden; }
.ix-passo { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .45rem;
    padding: .5rem .6rem; font-size: 12px; background: transparent; border: 0;
    border-right: 1px solid rgba(125,125,125,.16); text-align: left; color: inherit;
    cursor: pointer; transition: background .12s; }
.ix-passo:last-child { border-right: 0; }
.ix-passo:hover:not(:disabled) { background: rgba(125,125,125,.07); }
.ix-passo .n { flex: 0 0 auto; width: 19px; height: 19px; 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); color: #6c757d; }
/* ⚠️ O RÓTULO QUEBRA, NÃO CORTA (24/09/2026). Era `nowrap` + `ellipsis`: com cinco passos
   mais o degrau do ERP dentro do modal, cada um ficava com ~110px e a trilha virava
   "Escolher a… / DEFINE A OPE" — um passo que não se lê não orienta ninguém, e o pedaço
   cortado ("exigido pelo…") era justamente o que dizia se o passo trava ou não. */
/* ⚠️ QUEBRA ENTRE PALAVRAS, NUNCA DENTRO DELAS. `overflow-wrap: anywhere` resolvia o
   corte e criava coisa pior: "Escolh/er a TOP", "Conferi/r e/importa/r". Wrap normal
   basta — as palavras destes rótulos cabem na coluna; o que não cabia era a LINHA. */
.ix-passo .r { min-width: 0; white-space: normal; line-height: 1.2; font-size: 11.5px;
    overflow-wrap: normal; hyphens: none; }
.ix-passo .s { font-size: 9px; opacity: .6; display: block; text-transform: uppercase;
    letter-spacing: .03em; line-height: 1.15; margin-top: 1px; }
/* o passo em que se está ganha folga: é o rótulo que precisa ser lido inteiro agora */
.ix-passo.atual { flex: 1.3 1 0; }
.ix-passo.atual { background: rgba(var(--primary-rgb), .09); font-weight: 600; }
.ix-passo.atual .n { background: rgb(var(--primary-rgb)); color: #fff; }
.ix-passo.feito .n { background: rgba(var(--success-rgb), .9); color: #fff; }
.ix-passo.trava .n { background: rgba(var(--warning-rgb), .95); color: #4a3200; }
/* O degrau DE DEPOIS (§40.24.5): não é passo do modal, é o que falta acontecer no ERP
   para a nota existir de verdade. Hachurado e sem cursor de clique justamente para não
   parecer botão — o Hydra não confirma nota, ele só avisa que falta. */
.ix-passo.fora { flex: 0 1 auto; cursor: help; opacity: .8; border-right: 0;
    background: repeating-linear-gradient(135deg, rgba(125,125,125,.05) 0 7px,
                transparent 7px 14px); }
.ix-passo.fora > i { font-size: 13px; opacity: .5; flex: 0 0 auto; }
.ix-passo.fora > b { font-weight: 600; white-space: nowrap; }

/* §40.48 (25/09/2026) — O DEGRAU VIROU PASSO. Com a porta de confirmação ligada ele não é
   mais aviso hachurado: é o último passo da NOSSA trilha, clicável, e leva à conferência
   (que simula e mostra o dossiê antes de escrever). A hachura some de propósito — ela
   dizia "isto não é daqui", e agora é. */
.ix-passo.depois-nosso { flex: 0 1 auto; cursor: pointer; border-right: 0;
    background: rgba(var(--success-rgb), .08); }
.ix-passo.depois-nosso:hover { background: rgba(var(--success-rgb), .16); }
.ix-passo.depois-nosso > i { font-size: 13px; flex: 0 0 auto; color: rgba(var(--success-rgb), 1); }
.ix-passo.depois-nosso > b { font-weight: 600; white-space: nowrap; }
.ix-passo.depois-nosso > span { opacity: .7; }

.ix-passo.fora > span { font-size: 9.5px; opacity: .6; text-transform: uppercase;
    letter-spacing: .05em; white-space: nowrap; }
/* o passo que ainda não chegou: visível (o caminho inteiro se vê de início) mas morto */
.ix-passo:disabled { opacity: .42; cursor: default; }
.ix-nav { display: flex; align-items: center; gap: .5rem; margin-top: 1rem;
    padding-top: .7rem; border-top: 1px solid rgba(125,125,125,.16); }
.ix-nav .dica { font-size: 11px; opacity: .6; }