/* cockgit — nova-operacoes.css
   vista /nova · aba OPERAÇÕES (07/10/2026). O porquê está em js/app-nova-operacoes.js
   (vista Operação) e js/app-nova-contas.js (vista Contas).
   Os cards, o estado, as etapas e os medidores são as PEÇAS (nova-pecas.css). Aqui só o
   que é da tela: o gating, a faixa das operações, o cabeçalho da operação com o
   "x de N em dia", a barra de PRAZO (encolhe com o que falta), a lista de checagens e
   o paginador. SEM ROLAGEM: nada usa overflow que role; o que não cabe vira página
   ("mais N ›", medida no JS). Cor só por token; claro e escuro seguem o aparelho; nada
   pisca. Texto nunca é cortado com reticências: quebra a linha. */
#nv:not([data-tela="operacoes"]) #nv-operacoes{display:none}
#nv-operacoes.pc-tela{max-width:1440px;padding-top:10px;padding-bottom:6px}
#nv-operacoes .pc-tit{display:block;overflow:visible;-webkit-line-clamp:unset;margin-bottom:4px}
#nv-operacoes .pc-st{white-space:normal;overflow-wrap:anywhere;text-align:right;min-width:0}
#nv-operacoes .op-topo{align-items:center;margin-bottom:8px}
#nv-operacoes .op-seg{flex-wrap:nowrap;gap:0}
#nv-operacoes .op-seg .nv-conta{min-height:40px;padding:6px 14px}
#nv-operacoes .op-seg .nv-conta+.nv-conta{border-left:0}
#nv-operacoes .op-seg .nv-conta[aria-pressed="true"]{border-color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue);color:var(--ink)}
#nv-operacoes .op-topo .pc-resumo{flex:1 1 280px;text-align:right}

/* a FAIXA: as quatro operações lado a lado; a escolhida tem o traço azul embaixo */
#nv-operacoes .op-faixa{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#nv-operacoes .op-item{min-width:0;display:flex}
#nv-operacoes .op-item>.pc-card{flex:1}
#nv-operacoes .op-faixa .pc-card{padding:8px 12px}
#nv-operacoes .pc-card[data-sel]{border-color:var(--blue);box-shadow:inset 0 -3px 0 var(--blue)}
#nv-operacoes .op-faixa .pc-etapas{margin:4px 0 2px}

/* o CABEÇALHO da operação escolhida */
#nv-operacoes .op-ent{display:flex;justify-content:space-between;align-items:center;gap:2px 14px;
  flex-wrap:wrap;margin:12px 0 4px;min-width:0}
#nv-operacoes .op-ent-l{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0;flex:1 1 320px}
#nv-operacoes .op-ent-t{margin:0;font:600 var(--t-sec)/1.2 var(--display);color:var(--ink)}
#nv-operacoes .op-ent .pc-lnk{min-height:40px}
#nv-operacoes .op-volta{min-height:44px;margin:0 0 4px}
#nv-operacoes .op-ent-c{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;min-width:0}
/* "6 de 8 em dia": um quadrado por checagem, na cor dela (forma + palavra, nunca só cor) */
#nv-operacoes .op-dia{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-dat);color:var(--ink)}
#nv-operacoes .op-dia-q{display:inline-flex;gap:3px}
#nv-operacoes .op-dia-q>i{display:block;width:14px;height:14px;border:1px solid var(--rule);cursor:pointer}
#nv-operacoes .op-dia-r{color:var(--mut);font-size:var(--t-cap)}
#nv-operacoes .op-dia-q>i[data-t="ok"]{background:var(--green);border-color:var(--green)}
#nv-operacoes .op-dia-q>i[data-t="hot"]{background:var(--orange);border-color:var(--orange)}
#nv-operacoes .op-dia-q>i[data-t="bad"]{background:var(--red);border-color:var(--red)}
#nv-operacoes .op-pend{display:inline-flex;align-items:baseline;gap:4px;padding:2px 8px;font-size:var(--t-dat);
  border:1px solid var(--bd);background:var(--sf);color:var(--ink);overflow-wrap:anywhere;min-width:0}
#nv-operacoes .op-pend>i{font-style:normal;font-weight:700}
#nv-operacoes .op-pend[data-t="hot"]>i{color:var(--orange)}
#nv-operacoes .op-pend[data-t="bad"]>i{color:var(--red)}
#nv-operacoes .op-pend[data-t="idle"]{color:var(--mut)}
#nv-operacoes .op-pend[data-t="idle"]>i{color:var(--idle)}

/* os BLOCOS da operação: três por linha na tela larga */
#nv-operacoes .op-blocos{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
#nv-operacoes .op-chips{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 4px}
#nv-operacoes .op-regra{margin-top:6px}

/* o PRAZO: a barra encolhe com o tempo que falta; cor pela distância (sem vermelho
   para o que ainda não venceu — a mesma régua calma da aba Fontes) */
#nv-operacoes .op-pz{display:block;margin-top:6px}
#nv-operacoes .op-pz-r{display:flex;justify-content:space-between;gap:2px 8px;flex-wrap:wrap;font-size:var(--t-dat)}
#nv-operacoes .op-pz-r>span:first-child{color:var(--ink);overflow-wrap:anywhere;min-width:0}
#nv-operacoes .op-pz-r>span:last-child{color:var(--mut)}
#nv-operacoes .op-pz-b{--c:var(--green);margin-top:3px}
#nv-operacoes .op-pz[data-n="meio"] .op-pz-b{--c:var(--amber)}
#nv-operacoes .op-pz[data-n="perto"] .op-pz-b{--c:var(--orange)}
#nv-operacoes .op-pz[data-n="venceu"] .op-pz-b{--c:var(--red)}
#nv-operacoes .op-pz[data-n="perto"] .op-pz-r>span:last-child{color:var(--orange)}
#nv-operacoes .op-pz[data-n="venceu"] .op-pz-r>span:last-child{color:var(--red)}

/* a HISTÓRIA do vigia: 30 quadrados, um por dia (verde no ar, âmbar lento, vermelho fora,
   cinza sem leitura) — forma + cor, e o % por extenso ao lado */
#nv-operacoes .op-dias{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:2px;margin-top:6px}
#nv-operacoes .op-dias>i{display:block;height:12px;background:var(--bd)}
#nv-operacoes .op-dias>i[data-d="o"]{background:var(--green)}
#nv-operacoes .op-dias>i[data-d="l"]{background:var(--amber)}
#nv-operacoes .op-dias>i[data-d="f"]{background:var(--red)}

/* a lista de checagens (o portão do Porandu) */
#nv-operacoes .op-chk{list-style:none;margin:6px 0 0;padding:0}
#nv-operacoes .op-chk li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px;padding:3px 0;
  border-top:1px solid var(--bd);overflow-wrap:anywhere}
#nv-operacoes .op-chk li>i{font-style:normal;font-weight:700}
#nv-operacoes .op-chk li[data-t="ok"]>i{color:var(--green)}
#nv-operacoes .op-chk li[data-t="hot"]>i{color:var(--orange)}
#nv-operacoes .op-chk li[data-t="bad"]>i{color:var(--red)}
#nv-operacoes .op-chk li[data-t="idle"]>i{color:var(--idle)}
#nv-operacoes .op-chk li[data-t="idle"]{color:var(--mut)}

/* o paginador dos blocos (e das contas): o que não cabe passa de página, nunca rola */
#nv-operacoes .op-pag{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:6px}
#nv-operacoes .op-pag .pc-lnk{min-height:40px;min-width:40px;justify-content:center}
#nv-operacoes .op-pag .pc-lnk:disabled{color:var(--idle);text-decoration:none;cursor:default}

/* ---- a vista CONTAS (app-nova-contas.js) ---- */
/* a RÉGUA dos 12 meses: um quadro por mês; o que vence perto ganha o traço de cor em cima */
#nv-operacoes .ct-regua{margin-bottom:8px}
#nv-operacoes .ct-regua .pc-resumo{text-align:right}
#nv-operacoes .ct-ano{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin-top:6px}
#nv-operacoes .ct-mes{background:var(--sf2);padding:4px 6px;min-width:0;min-height:44px;font-size:var(--t-cap);line-height:1.35;overflow-wrap:anywhere}
#nv-operacoes .ct-mes>b{display:block;font:600 var(--t-cap) var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
#nv-operacoes .ct-mes>em{display:block;font-style:normal;color:var(--ink)}
#nv-operacoes .ct-mes[data-n="meio"]{box-shadow:inset 0 3px 0 var(--amber)}
#nv-operacoes .ct-mes[data-n="perto"]{box-shadow:inset 0 3px 0 var(--orange)}
#nv-operacoes .ct-filtros{margin:0 0 8px}
#nv-operacoes .ct-filtros .nv-conta{min-height:36px;padding:4px 10px}
#nv-operacoes .ct-filtros .nv-conta[aria-pressed="true"]{border-color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue);color:var(--ink)}
#nv-operacoes .op-blocos.ct-grade{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}

/* a tela média: duas operações por linha, dois blocos por linha */
@media (max-width:1099.98px){
  #nv-operacoes .op-blocos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899.98px){
  #nv-operacoes .op-faixa{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* o celular: uma coluna; a faixa vira a lista das operações */
@media (max-width:759.98px){
  #nv-operacoes.pc-tela{padding:10px 12px 4px}
  #nv-operacoes .op-faixa,#nv-operacoes .op-blocos{grid-template-columns:minmax(0,1fr)}
  #nv-operacoes .op-topo .pc-resumo{text-align:left;flex-basis:100%}
  #nv-operacoes .op-ent{margin-top:4px}
  /* no celular as pendências por extenso saem do cabeçalho (cada uma está no bloco dela):
     ficam os quadrados e o "x de N em dia" — sobra lugar para mais um bloco por página */
  #nv-operacoes .op-pend{display:none}
  /* a régua vira três linhas de quatro meses; mês vazio sai (o nome do mês fica no que tem) */
  #nv-operacoes .ct-ano{grid-template-columns:repeat(3,minmax(0,1fr))}
  #nv-operacoes .ct-mes{min-height:0}
  #nv-operacoes .ct-filtros{gap:4px}
  #nv-operacoes .ct-filtros .nv-conta{min-height:32px;padding:2px 8px;font-size:var(--t-cap)}
  #nv-operacoes .ct-grade{gap:6px}
  #nv-operacoes .ct-grade .pc-card{padding:6px 10px}
  #nv-operacoes .ct-grade .pc-tit{margin:0 0 2px}
  #nv-operacoes .ct-mes[data-vazio]{display:none}
  #nv-operacoes .ct-regua .pc-resumo{text-align:left}
}