/* www/assets/fluxo_grade.css — A GRADE DO FLUXO SEMALO, compartilhada (§40.67, 02/10/2026)
 *
 * Pedido do dono: *"quero em uma linha por documento … e colunas tipo cadastro, pedido
 * … ai na coluna ação igual torre de notas fiscais com o que falta fazer agora e botão
 * fazer … ou seja, todo mundo shared mesmo módulo semalo e layout"*.
 *
 * Estas regras NASCERAM no `page.html` da Torre de NF e eram globais por acidente: só
 * existiam enquanto a Torre estava aberta. Quem quisesse a mesma linha (Contas a Pagar,
 * aba NFS-e) teria de copiá-las — e duas cópias divergem na primeira correção. Agora o
 * arquivo é carregado pelo `index.html`, para o painel inteiro, ao lado do
 * `provisao.js` e do `nf_modal.js`.
 *
 * A LINHA é sempre:  Ação necessária │ Documento │ <N colunas de etapa>
 * e `--nf-cols` diz quantas são. Quem desenha é `assets/fluxo_grade.js`.
 *
 * ⚠️ NÃO escopar em `#torre-wrap`: o Contas a Pagar usa as mesmas classes fora dela.
 * ⚠️ As cores saem das variáveis do tema (`--success-rgb`, `--danger-rgb`…), que o
 *    Limitless troca no `[data-color-theme=dark]` — claro e escuro saem de graça.
 */

/* LINHA = grade de blocos de altura inteira, como a linha da vaga na esteira.
   O RÓTULO DA COLUNA saiu de dentro da célula (pedido do dono, 22/09/2026): repetir
   "CADASTRO · PEDIDO · FISCAL…" em cada uma das 300 linhas comia uma linha de texto
   por registro e virava ruído. Existe UM cabeçalho (.nf-cabecalho), grudado no topo
   do rolamento, com a MESMA grade — é ele que nomeia as colunas. */
.nf-linha { border-bottom: 1px solid rgba(125,125,125,.14); background: var(--bs-card-bg, #fff); }
/* divergência crítica (empresa errada, CT-e para outra empresa, saldo estourado)
   pinta a LINHA INTEIRA: é para não passar despercebida na rolagem */
.nf-linha.critica { background: rgba(var(--danger-rgb), .055); }
.nf-linha.critica .nf-cel { border-right-color: rgba(var(--danger-rgb), .18); }
.nf-linha.critica .nf-col:hover { background: rgba(var(--danger-rgb), .09); }
.nf-linha:last-child { border-bottom: 0; }
.nf-cab { display: grid; grid-template-columns: 150px minmax(190px, 1fr) repeat(var(--nf-cols,7), 104px);
          align-items: stretch; user-select: none; }
/* o padding vira VARIÁVEL porque o rodapé da ação (`.nf-sit-pe.com-acao`) sangra até a
   borda da célula com margem negativa: sem isto ele descolaria nos breakpoints que
   apertam o padding, e a faixa ficaria com 4px de folga dos lados a 1299px */
.nf-cel { --nf-pad-y: 7px; --nf-pad-x: 10px;
          padding: var(--nf-pad-y) var(--nf-pad-x); border-right: 1px solid rgba(125,125,125,.09);
          min-height: 50px; display: flex; flex-direction: column; justify-content: center; }
.nf-cel:last-child { border-right: 0; }

/* ═══ CABEÇALHO ÚNICO DAS COLUNAS ═══ */
.nf-cabecalho { position: sticky; top: 0; z-index: 4; background: var(--bs-card-bg, #fff);
                box-shadow: inset 0 -1px 0 rgba(125,125,125,.28); }
.nf-cabecalho .nf-cel { min-height: 0; padding: 8px 10px; border-right: 0;
                        font-size: 10px; font-weight: 700; letter-spacing: .07em;
                        text-transform: uppercase; opacity: .5; justify-content: flex-end; }
.nf-cabecalho .nf-cel.nf-col { text-align: center; align-items: center; cursor: default; }
.nf-cabecalho .nf-cel.nf-col:hover { background: transparent; }

/* ═══ O ESTADO DA COLUNA É TEXTO, NÃO BADGE (pedido do dono, 22/09/2026) ═══
   Sete badges por linha × 300 linhas viravam um mosaico de pastilhas coloridas em
   que nada saltava. O rótulo é texto na cor da gravidade e SÓ o que precisa de gente
   ganha o ponto: verde e cinza ficam quietos, âmbar e vermelho marcam.
   DUAS LINHAS NO MÁXIMO: "cita pedido, não casou" em coluna de 96px virava três e
   esticava só aquela linha — a grade perdia o ritmo. O texto completo fica no title. */
.nf-v { font-size: 11.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden; }
.nf-v.marcado::before { content: ''; display: inline-block; width: 5px; height: 5px;
                        border-radius: 50%; background: currentColor; margin-right: 5px;
                        vertical-align: 1.5px; }
.nf-v-success   { color: rgba(var(--success-rgb), .95); }
.nf-v-warning   { color: rgba(var(--warning-rgb), 1); font-weight: 600; }
.nf-v-danger    { color: rgba(var(--danger-rgb), 1); font-weight: 600; }
.nf-v-info      { color: rgba(var(--info-rgb), 1); }
.nf-v-dark      { color: rgba(var(--dark-rgb), 1); font-weight: 600; }
.nf-v-secondary { opacity: .5; }
.nf-v-vazio     { opacity: .28; }        /* "não se aplica" vira travessão (§21.7) */

/* ═══ PRIMEIRA COLUNA: A AÇÃO NECESSÁRIA ═══
   a faixa usa as MESMAS variáveis de cor do tema que as badges */
.nf-sit { position: relative; border-left: 4px solid rgba(var(--nf-rgb, 173,181,189), .85);
          background: rgba(var(--nf-rgb, 173,181,189), .07);
          color: rgba(var(--nf-rgb, 108,117,125), 1); }
.nf-sit-txt { font-weight: 600; font-size: 12.5px; line-height: 1.25; }
/* A célula cai de TRÊS alturas de texto para DUAS e a grade mostra ≈ 2 notas a mais
   por tela de notebook: o subtexto fica com a linha de baixo inteira e o atalho do
   fluxo vira ícone no canto da célula, sem custar altura nenhuma. */
.nf-sit-pe { display: flex; align-items: baseline; min-width: 0; margin-top: 2px; }
.nf-sit-acao, .nf-sit-txt { padding-right: 14px; }
/* o atalho que abre o OVERLAY do fluxo (§40.9) */
.nf-sit-fluxo { position: absolute; top: 5px; right: 6px; font-size: 13px; line-height: 1;
                opacity: .3; cursor: pointer; }
.nf-linha:hover .nf-sit-fluxo { opacity: .75; }
.nf-sit-fluxo:hover { opacity: 1; }
.nf-sit-sub { font-size: 11px; opacity: .75; min-width: 0; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.nf-st-success { --nf-rgb: var(--success-rgb); }
.nf-st-warning { --nf-rgb: var(--warning-rgb); }
.nf-st-danger  { --nf-rgb: var(--danger-rgb); }
.nf-st-info    { --nf-rgb: var(--info-rgb); }
.nf-st-dark    { --nf-rgb: var(--dark-rgb); }
.nf-st-muted   { --nf-rgb: var(--secondary-rgb); }

/* ═══ SEGUNDA COLUNA: A IDENTIFICAÇÃO DO DOCUMENTO ═══ */
.nf-nota { min-width: 0; }
/* §36.16: a coluna Documento ABRE o documento, onde a tela ofereceu isso. O cursor
   de mão só aparece com a porta ligada — prometer clique que não faz nada é pior
   que não oferecer. */
.nf-nota-abre { cursor: pointer; }
.nf-nota-abre:hover .nf-nota-tit { text-decoration: underline; }
.nf-nota-tit { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-nota-sub { font-size: 11.5px; opacity: .7; }

/* ═══ AS COLUNAS DE ETAPA ═══ */
.nf-col { text-align: center; align-items: center; gap: 2px; cursor: pointer; }
.nf-col:hover { background: rgba(0,0,0,.04); }
.nf-col.ativa { background: rgba(var(--primary-rgb), .06);
                box-shadow: inset 0 -2px 0 rgba(var(--primary-rgb), .9); }
/* valor e vencimento na própria célula da coluna Financeiro/Título */
.nf-col-fin { font-size: 10px; line-height: 1.25; margin-top: 2px; font-variant-numeric: tabular-nums; }
.nf-col-venc { opacity: .65; }
.nf-col-venc::before { content: "· "; }

/* ═══ O BOTÃO FAZER ═══
   §40.9: quando o Hydra tem porta para a ação, a célula ganha uma FAIXA rente ao pé,
   da largura da coluna. 24/09/2026 (pedido do dono) ela virou o BREADCRUMB do template:
   barra SÓLIDA, texto branco, ícone à esquerda e chevron à direita.
   ⚠️ É de UMA COR SÓ, não da gravidade da linha. Parece perda de informação e não é: a
   gravidade já está dita três vezes na mesma célula — na barra lateral de 4px, no fundo
   e na cor do rótulo. A faixa diz OUTRA coisa ("aqui se age"), e pintá-la de âmbar punha
   texto branco sobre 245,134,70 — 2,6:1, ilegível em 10px.
   ⚠️ `--bs-primary` NÃO existe neste template: fundo azul com texto branco some.
   ⚠️ A faixa sangra até a borda por MARGEM NEGATIVA do padding da `.nf-cel` (daí as
   variáveis --nf-pad-*, que os breakpoints apertam). */
.nf-sit-acao { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
/* §40.47: a ação que saiu sem o ERP (ponto cego do espelho) enquanto a conferência roda */
.nf-sit-parcial { display: inline-flex; margin-left: .35rem; vertical-align: -1px; opacity: .55; cursor: help; }
.nf-sit-parcial .gira { display: inline-block; width: 9px; height: 9px; border: 1.5px solid currentColor;
    border-right-color: transparent; border-radius: 50%; animation: dp-gira .8s linear infinite; }
.nf-sit-pe.com-acao { margin: auto calc(var(--nf-pad-x) * -1) calc(var(--nf-pad-y) * -1);
                      padding: 4px var(--nf-pad-x); cursor: pointer;
                      background: rgba(var(--secondary-rgb, 36,114,151), 1);
                      color: #fff; align-items: center; gap: 6px;
                      transition: background .12s; }
.nf-sit-pe.com-acao:hover { background: rgba(var(--secondary-rgb, 36,114,151), .86); }
.nf-sit-fazer { margin-left: auto; font-size: 10.5px; font-weight: 700; white-space: nowrap;
                text-transform: uppercase; letter-spacing: .05em; color: #fff;
                display: inline-flex; align-items: center; gap: 4px; }
.nf-sit-fazer i { font-size: 12px; transition: transform .12s; }
.nf-sit-fazer .ph-caret-right { margin-left: auto; opacity: .8; }
.nf-sit-pe.com-acao:hover .nf-sit-fazer .ph-caret-right { transform: translateX(2px); opacity: 1; }
/* a faixa é só o botão: "FAZER" encosta na margem do rótulo e o chevron na borda —
   o subtexto ("trava o fluxo", "importar pe…") foi para o popover, a pedido do dono */
.nf-sit-pe.com-acao.so-acao .nf-sit-fazer { margin-left: 0; width: 100%; }

/* ═══ §40.17: devolução de cliente que assinou NÃO TROCA ═══ */
.nf-linha.nao-troca { background-image: repeating-linear-gradient(135deg,
    rgba(var(--danger-rgb), .07) 0 10px, transparent 10px 20px); }
.nf-linha.nao-troca .nf-nota-tit { color: rgba(var(--danger-rgb), 1); }
.nf-troca { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; text-transform: uppercase;
            letter-spacing: .04em; border-radius: 5px; padding: 1px 6px; margin-left: .35rem;
            background: rgba(var(--danger-rgb), .14); color: rgba(var(--danger-rgb), 1); white-space: nowrap; }

/* ═══ NOTEBOOK (1366×768 é a tela do dono) ═══
   As colunas de estado têm LARGURA FIXA e quem fica com a sobra é a identificação do
   documento. Com `1fr` nelas era o contrário — a 1280px cada estado ganhava 128px para
   escrever "ok" e o nome do fornecedor quebrava em três linhas, esticando a linha. */
@media (max-width: 1599px) { .nf-cab { grid-template-columns: 142px minmax(170px,1fr) repeat(var(--nf-cols,7), 96px); } }
@media (max-width: 1299px) {
    .nf-cab { grid-template-columns: 132px minmax(160px,1fr) repeat(var(--nf-cols,7), 88px); }
    .nf-cel { --nf-pad-y: 6px; --nf-pad-x: 6px; }
    .nf-v { font-size: 11px; }
    .nf-cabecalho .nf-cel { font-size: 9px; letter-spacing: .03em; padding: 7px 4px; }
}
@media (max-width: 1099px) {
    .nf-cab { grid-template-columns: 120px minmax(150px,1fr) repeat(var(--nf-cols,7), 78px); }
    .nf-nota-tit, .nf-nota-sub { font-size: 11px; }
}
@media (max-width: 900px) {
    .nf-cab { grid-template-columns: repeat(3, 1fr); }
    .nf-sit { grid-row: 1; grid-column: 1 / 3; border-bottom: 1px solid rgba(125,125,125,.14); }
    .nf-nota { grid-row: 1; grid-column: 3 / -1; border-right: 0; border-bottom: 1px solid rgba(125,125,125,.14); }
    .nf-col { grid-row: 2; }
    .nf-cel { min-height: 50px; }
    .nf-cabecalho { display: none; }   /* sem grade de colunas, o rótulo volta a faltar: ver .nf-col::before */
    .nf-col::before { content: attr(data-rot); display: block; font-size: 9px; text-transform: uppercase;
                      letter-spacing: .04em; opacity: .5; }
}