/* cockgit — nova-finops.css
   vista /nova · tela FINOPS: o que investi × o que voltou. O porquê do desenho
   (e por que ENTROU e EM JOGO nunca viram um número só) está no cabeçalho de
   js/app-nova-finops.js.

   Arquivo próprio porque o teto POR ARQUIVO é 48KB e `nova.css` já quebrou por
   área (PR #99). Nenhuma media query de largura para o celular: a tela inteira é
   grade `auto-fit`, então a coluna única a 390px sai da MESMA regra do desktop —
   é isso que impede a página de rolar de lado quando entra um projeto a mais. */

#nv:not([data-tela="finops"]) #nv-finops{display:none}
#nv-finops{padding:0 16px 20px}
#nv-finops .nv-cap{margin:14px 0 10px}

/* ---- a barra de lançamento: o único lugar onde o dono digita nesta tela.
   Click-and-go no que dá (projeto, estado e período são escolha); digitação só
   em número, data e o "o quê". Desenhada UMA vez por `_nvFoCasca`. ---- */
.nv-fo-barra{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--ruleS);background:var(--surface);padding:12px 14px}
.nv-fo-barra .rot{font-size:var(--t-cap);letter-spacing:.12em;text-transform:uppercase;
  color:var(--p3);flex:none}
/* 44px de alvo de toque e letra de dado: esta tela é lida a ~2m e usada no
   celular. Os campos crescem juntos para não virarem seis caixinhas apertadas. */
.nv-fo-barra input,.nv-fo-barra select{min-height:44px;font-size:var(--t-dat);
  flex:1 1 130px;min-width:0;background:var(--surface2)}
.nv-fo-barra button{min-height:44px;padding:6px 16px;font-size:var(--t-dat)}
.nv-fo-msg{min-height:1.3em;font-size:var(--t-cap);color:var(--p3);margin:8px 0 2px;
  word-break:break-word}
.nv-fo-msg.ok{color:var(--accent)}
.nv-fo-msg.bad{color:var(--p0)}
.nv-fo-msg button{min-height:34px;margin-left:4px}
.nv-fo-per{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0 2px}
.nv-fo-per button{min-height:38px;padding:4px 12px;font-size:var(--t-cap)}
.nv-fo-per button.on{border-color:var(--accent);color:var(--accent)}
.nv-fo-jan{font-size:var(--t-cap);color:var(--p3);margin-left:4px}

/* ---- (1) os números grandes. LETRA GRANDE é a lei da casa: este é o bloco que
   ele lê a dois metros, e é o único que precisa ser legível de longe. As quatro
   caixas são irmãs de tamanho de propósito — entrou, em jogo, investido e
   esforço são quatro grandezas DIFERENTES, e destacar uma sugeriria soma. ---- */
.nv-fo-topo{display:grid;gap:12px;margin:2px 0 18px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.nv-fo-big{border:2px solid var(--border);background:var(--surface);
  padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.nv-fo-big .rot{font-size:var(--t-cap);letter-spacing:.1em;text-transform:uppercase;
  color:var(--p3)}
.nv-fo-big .num{font-family:var(--display);font-weight:400;font-size:2rem;
  line-height:1.05;color:var(--text);overflow-wrap:anywhere}
.nv-fo-big .sub{font-size:var(--t-cap);color:var(--muted);overflow-wrap:anywhere}
/* a COR separa o que existe do que só pode existir: entrou é o acento cheio, em
   jogo é tracejado (nada garante que fecha), investido e esforço são neutros. */
.nv-fo-big.entrou{border-color:var(--accent)}
.nv-fo-big.entrou .num{color:var(--accent)}
.nv-fo-big.jogo{border-style:dashed;border-color:var(--accent2)}
.nv-fo-big.jogo .num{color:var(--accent2)}
.nv-fo-big.esforco{border-style:dotted;opacity:.9}
/* a implantação a recuperar é uma DÍVIDA dele consigo mesmo: cor de alerta
   enquanto houver saldo, neutra quando quita. Ela só é desenhada quando existe —
   uma caixa fixa em R$ 0,00 sugeriria uma dívida que não há. */
.nv-fo-big.impl{border-color:var(--p0)}
.nv-fo-big.impl .num{color:var(--p0)}
.nv-fo-big.impl.quit{border-color:var(--accent)}
.nv-fo-big.impl.quit .num{color:var(--accent)}

/* ---- (2) os cards por projeto ---- */
.nv-fo-cards{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.nv-fo-card{border:2px solid var(--border);background:var(--surface);
  padding:12px 14px 13px;display:flex;flex-direction:column;gap:10px;min-width:0}
/* a borda repete o modelo: quem bate o olho vê o arranjo antes de ler o select */
.nv-fo-card.sociedade{border-color:var(--accent)}
.nv-fo-card.participacao{border-color:var(--accent2)}
.nv-fo-card.proposta{border-style:dashed}
.nv-fo-card.interno{border-style:dotted;opacity:.92}
.nv-fo-card header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nv-fo-card h3{font-family:var(--display);font-size:var(--t-sec);font-weight:400;
  margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere;flex:1 1 100%}
.nv-fo-card header select{min-height:40px;font-size:var(--t-cap);
  background:var(--surface2);flex:1 1 150px;min-width:0}
.nv-fo-pct{display:flex;align-items:center;gap:5px;font-size:var(--t-cap);
  color:var(--p3);flex:none}
.nv-fo-pct input{min-height:40px;width:62px;font-size:var(--t-dat);
  background:var(--surface2)}

/* ---- o bloco da PARCERIA: os dados do acordo e o saldo de implantação.
   Dois campos digitados (o valor e o 1º mês de uso) e a barra de recuperação.
   `flex-wrap` e `min-width:0` nos dois: a 390px eles empilham em vez de esticar
   o card e levar a página junto para o lado. ---- */
.nv-fo-acordo{display:flex;gap:8px;flex-wrap:wrap}
.nv-fo-acordo label{display:flex;align-items:center;gap:5px;font-size:var(--t-cap);
  color:var(--p3);flex:1 1 130px;min-width:0}
.nv-fo-acordo input{min-height:40px;font-size:var(--t-dat);background:var(--surface2);
  flex:1 1 70px;min-width:0}
.nv-fo-impl{display:flex;flex-direction:column;gap:4px}
.nv-fo-impl .rot{display:flex;justify-content:space-between;gap:8px;
  font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;color:var(--p3)}
.nv-fo-impl .rot b{font-family:var(--display);font-weight:400;color:var(--p0);
  letter-spacing:0;text-transform:none;white-space:nowrap}
.nv-fo-impl .bar{height:12px;background:var(--surface2);border:1px solid var(--ruleS);
  display:block;min-width:0}
.nv-fo-impl .bar i{display:block;height:100%;background:var(--p0)}
.nv-fo-impl .sub{font-size:var(--t-cap);color:var(--muted);overflow-wrap:anywhere}
/* quitada: a barra cheia vira acento — é o instante em que a participação passou
   a ser dinheiro dele, e a cor tem de mudar junto com o significado */
.nv-fo-impl.quit .rot b,.nv-fo-impl.quit .bar i{color:var(--accent);
  background:var(--accent)}
.nv-fo-impl.quit .rot b{background:none}
/* a VIRADA nomeada e o estado da cobrança: selos, na mesma família do `saldo` */
.nv-fo-virada{font-size:var(--t-cap);border:1px solid var(--accent);
  color:var(--accent);padding:2px 8px 3px;overflow-wrap:anywhere}
.nv-fo-cob{font-size:var(--t-cap);border:1px solid var(--p3);color:var(--p3);
  padding:2px 8px 3px;overflow-wrap:anywhere}
.nv-fo-cob.off{border-style:dashed}
.nv-fo-cob.on{border-color:var(--accent2);color:var(--accent2)}
/* o chip que só abateu implantação não mostra valor: mostra para onde o dinheiro
   foi. O que virou receita na virada ganha a estrela e o acento. */
.nv-fo-lanc.abat{border-style:dotted;color:var(--muted)}
.nv-fo-lanc.vira{border-color:var(--accent)}

/* investido × voltou, lado a lado. O `×` do meio não é multiplicação — é o
   confronto das duas colunas, e por isso é aria-hidden no JS. */
.nv-fo-conta{display:flex;align-items:stretch;gap:8px}
.nv-fo-conta .col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.nv-fo-conta .rot{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;
  color:var(--p3)}
.nv-fo-conta b{font-family:var(--display);font-weight:400;font-size:1.35rem;
  color:var(--text);overflow-wrap:anywhere}
.nv-fo-conta .sub{font-size:var(--t-cap);color:var(--muted);overflow-wrap:anywhere}
.nv-fo-conta .seta{align-self:center;color:var(--p3);font-size:1.2rem;flex:none}

.nv-fo-selos{display:flex;gap:6px;flex-wrap:wrap}
.nv-fo-saldo{font-size:var(--t-cap);border:1px solid var(--p3);color:var(--p3);
  padding:2px 8px 3px;white-space:nowrap;cursor:help}
.nv-fo-saldo.pos{border-color:var(--accent);color:var(--accent)}
.nv-fo-saldo.neg{border-color:var(--p0);color:var(--p0)}
/* "falta" é o padrão do Timesheet: onde não há dado, a tela diz o que falta em
   vez de estimar. Tracejado para não parecer um valor. */
.nv-fo-falta{font-size:var(--t-cap);border:1px dashed var(--p3);color:var(--p3);
  padding:2px 8px 3px;white-space:nowrap}

/* os lançamentos do projeto, um chip cada */
.nv-fo-lancs{display:flex;gap:6px;flex-wrap:wrap}
.nv-fo-lanc{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-cap);
  border:1px solid var(--ruleS);background:var(--surface2);padding:3px 4px 3px 8px;
  max-width:100%;min-width:0;cursor:help}
.nv-fo-lanc.fech{border-color:var(--accent)}
.nv-fo-lanc.abre{border-style:dashed;border-color:var(--accent2)}
.nv-fo-lanc i{font-style:normal;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:14ch}
.nv-fo-lanc button{min-height:30px;min-width:30px;padding:0 6px;line-height:1;
  font-size:var(--t-cap)}
.nv-fo-vazio,.nv-fo-nada{font-size:var(--t-cap);color:var(--muted);
  overflow-wrap:anywhere}
.nv-fo-nada{border:1px dashed var(--ruleS);padding:12px 14px;margin:8px 0}
.nv-fo-acoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.nv-fo-acoes button{min-height:40px;padding:4px 12px;font-size:var(--t-cap)}

/* ---- (4) tempo × dinheiro. Duas barras por projeto: em cima o tempo, embaixo a
   receita fechada. A grade tem MESMA forma no celular — o nome ganha a linha
   inteira e as barras se estreitam, mas nada sai do container. ---- */
.nv-fo-des{margin-top:20px}
.nv-fo-dl{display:grid;gap:2px 8px;align-items:center;margin:0 0 10px;
  grid-template-columns:minmax(90px,190px) minmax(0,1fr) 6ch}
.nv-fo-dl .nm{grid-column:1;grid-row:1 / span 2;font-size:var(--t-cap);
  color:var(--text);overflow-wrap:anywhere;min-width:0}
.nv-fo-dl .bar{height:12px;background:var(--surface2);border:1px solid var(--ruleS);
  min-width:0;display:block}
.nv-fo-dl .bar i{display:block;height:100%}
.nv-fo-dl .bar.t i{background:var(--p3)}
.nv-fo-dl .bar.d i{background:var(--accent)}
.nv-fo-dl .v{font-size:var(--t-cap);color:var(--p3);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* nenhuma transição nesta tela — mas a regra fica declarada porque a barra do
   desalinhamento é o tipo de elemento que ganha animação num PR distraído */
@media (prefers-reduced-motion:reduce){
  .nv-fo-dl .bar i,.nv-fo-impl .bar i{transition:none}
}