/* cockgit — nova-tempo.css
   vista /nova · tela TIMESHEET — o reloginho em cima, a planilha embaixo.

   ARQUIVO PRÓPRIO, e não mais um bloco no nova.css: aquele arquivo já está em
   ~49KB, acima do orçamento de 48KB por arquivo do painel. Foi o mesmo motivo que
   já abriu o nova-empresa.css. A cascata continua sendo contrato — este entra
   DEPOIS do nova.css no index.html, porque reusa os tokens e as classes dele
   (.nv-cap, .nv-vazia, .nv-mut/.nv-err/.nv-dim, os botões em [colchete]).

   A ESCALA DE 2 METROS vale aqui inteira: nada de letra menor para caber mais
   linha. O que não couber ROLA — a planilha dentro do próprio container
   (.nv-ts-scroll), nunca a página. No celular a linha da tabela vira BLOCO
   rotulado, que é a régua da vista: empilhar, jamais esconder.

   Nenhum hex solto: claro/escuro vem inteiro de base.css. */

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

  /* ---- em cima: o RELOGINHO do que está correndo agora ---------------------
     Card grande de propósito: é o número que ele lê a dois metros, de passagem
     pela mesa. O cronômetro usa a --display porque é dígito, não texto. */
  .nv-ts-vivo{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
  .nv-ts-card{border:1px solid var(--accent);background:var(--surface);
    padding:12px 16px;min-width:min(300px,100%);display:flex;
    flex-direction:column;gap:4px;flex:1 1 300px}
  .nv-ts-crono{font-family:var(--display);font-size:var(--t-dis);line-height:1;
    color:var(--accent);font-variant-numeric:tabular-nums}
  .nv-ts-quem{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
    font-size:var(--t-bod)}
  .nv-ts-ass{color:var(--muted);font-size:var(--t-dat);overflow-wrap:anywhere}
  .nv-ts-nada{border:1px dashed var(--border);padding:14px 16px;color:var(--muted);
    font-size:var(--t-dat);flex:1 1 100%}
  .nv-ts-nada b{color:var(--text)}
  /* o aviso da HORA CHEIA: aparece SÓ quando há mais de um cliente na mesa, que é
     quando a leitura deixa de ser óbvia — dois relógios correndo lado a lado e os
     dois contando inteiro (ordem do dono, 01/09) */
  .nv-ts-cheia{flex:1 1 100%;border-left:3px solid var(--p2);padding:8px 12px;
    color:var(--muted);font-size:var(--t-dat);background:var(--surface)}
  .nv-ts-cheia b{color:var(--p2)}
  .nv-ts-falta{color:var(--p1);font-size:var(--t-cap)}

  /* a atividade como etiqueta — cor por papel semântico, sempre token */
  .nv-ts-atv{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;
    border:1px solid var(--border);padding:2px 7px;color:var(--muted);white-space:nowrap}
  .nv-ts-atv.reuniao{border-color:var(--accent);color:var(--accent)}
  .nv-ts-atv.daily{border-color:var(--accent2);color:var(--accent2)}
  .nv-ts-atv.poker{border-color:var(--p2);color:var(--p2)}
  /* [01/09] a fábrica é o gatilho que roda SEM o dono na sala: cor própria para ele
     separar num relance a hora dele da hora que a fábrica trabalhou por ele. */
  .nv-ts-atv.fabrica{border-color:var(--p3);color:var(--p3)}
  .nv-ts-atv.manual{border-style:dashed}
  /* o PORQUÊ do relógio vivo: uma linha discreta sob o assunto. Não é decoração —
     é o que impede "fábrica 0:31" às 3h da manhã de parecer relógio esquecido. */
  .nv-ts-porque{color:var(--p3);font-size:var(--t-cap)}
  /* QUEM executou. `eu` distingue a hora do dono da hora de agente num relance —
     é a diferença entre o que ele trabalhou e o que a fábrica trabalhou por ele. */
  .nv-ts-quem-tag{font-size:var(--t-cap);border:1px dashed var(--border);
    padding:1px 6px;color:var(--muted);white-space:nowrap}
  .nv-ts-quem-tag.eu{border-style:solid;border-color:var(--accent);color:var(--accent)}
  /* a BASE do custo, colada ao valor: `hora` (custo/hora do dono) ou `tokens`
     (medido no job). Sem ela, R$ 30 de token e R$ 30 de hora ficariam idênticos. */
  .nv-ts-base{font-size:var(--t-cap);color:var(--p3);margin-left:6px;
    border-bottom:1px dotted var(--p3);cursor:help;white-space:nowrap}
  .nv-ts-porquem{margin-top:6px}
  .nv-ts-chipproj.eu{border-color:var(--accent)}
  .nv-ts-aviso.base{border-left-color:var(--p3)}

  /* ---- filtros e ações: click-and-go -------------------------------------- */
  .nv-ts-filtros{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;
    margin-bottom:14px}
  .nv-ts-grupo{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .nv-ts-grupo button.on{border-color:var(--accent);color:var(--accent);
    background:var(--surface)}
  .nv-ts-acoes{margin-left:auto}

  /* ---- os totais, em letra grande ---------------------------------------- */
  .nv-ts-nums{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
  .nv-ts-num{border:1px solid var(--border);background:var(--surface);
    padding:10px 14px;display:flex;flex-direction:column;gap:2px;
    flex:1 1 min(180px,100%)}
  .nv-ts-num b{font-family:var(--display);font-size:var(--t-sec);font-weight:400;
    font-variant-numeric:tabular-nums}
  .nv-ts-num span{font-size:var(--t-cap);letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted)}
  .nv-ts-num.forte b{color:var(--accent)}
  .nv-ts-num.boa b{color:var(--accent2)}
  .nv-ts-num.ruim b{color:var(--p0)}
  .nv-ts-aviso{border-left:3px solid var(--p1);padding:8px 12px;color:var(--muted);
    font-size:var(--t-dat);background:var(--surface);margin-bottom:10px}
  .nv-ts-aviso b{color:var(--p1)}
  .nv-ts-porproj{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .nv-ts-chipproj{border:1px solid var(--border);padding:5px 10px;
    font-size:var(--t-dat);color:var(--muted)}
  .nv-ts-chipproj b{color:var(--text)}

  /* ---- a planilha ---------------------------------------------------------
     Rola no PRÓPRIO container: a página nunca ganha rolagem lateral. O piso de
     largura é desfeito no celular (bloco do fim deste arquivo), que é a mesma
     disciplina do Board e do Taskboard em nova.css. */
  .nv-ts-scroll{overflow-x:auto}
  /* O PISO DE 1620px NÃO É EXAGERO — é a escala de 2 metros em forma de largura.
     Com --t-dat em 22px de mono, "2026-09-01" ocupa ~132px e "R$ 1.800,00" ~145px:
     numa grade de 1040 as colunas espremiam e "ContrateAI" quebrava em duas linhas.
     A régua da vista é a mesma do Board (min-width:1780px) e do Taskboard (980px):
     as colunas NÃO encolhem — quem rola é o container, e a sombra de rolagem avisa.
     Diminuir a letra para caber é a troca que o #44 proíbe. (Eram 1580px enquanto
     existia a coluna `rateadas`; ela saiu com o rateio em 01/09 e o piso desceu
     para 1470. Voltou a 1620 na mesma tarde, com a coluna QUEM: "Front/Back" e
     "PO / Analista de Negócios" não cabem em menos de 160px sem quebrar em duas
     linhas, e encolher a letra é a troca que o #44 proíbe.) */
  .nv-ts-tab{min-width:1620px;display:flex;flex-direction:column}
  .nv-ts-h,.nv-ts-r{display:grid;
    grid-template-columns:140px 160px minmax(140px,1fr) 160px 150px minmax(220px,2fr)
      116px 160px 160px 150px;
    gap:10px;align-items:center}
  .nv-ts-h span{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);border-bottom:2px solid var(--border);padding-bottom:7px}
  .nv-ts-r{border-bottom:1px solid var(--ruleS);padding:9px 0;
    font-size:var(--t-dat);min-height:44px}
  .nv-ts-r.viva{border-left:3px solid var(--accent);padding-left:8px}
  .nv-ts-r .forte{color:var(--accent);font-variant-numeric:tabular-nums}
  .nv-ts-r>span{min-width:0;overflow-wrap:anywhere}
  /* as duas ações empilham quando não cabem lado a lado: no 2m um [apagar]
     tem ~126px, e cortá-lo em "…" seria esconder o verbo do botão. */
  .nv-ts-ac{display:flex;gap:6px;flex-wrap:wrap}
  .nv-ts-ac button{min-height:44px;flex:1 1 auto}
  .nv-ts-tag{font-size:var(--t-cap);border:1px solid var(--border);padding:1px 6px;
    color:var(--p3);margin-left:6px;white-space:nowrap}
  .nv-ts-tag.warn{border-color:var(--p1);color:var(--p1)}
  .nv-ts-tag.falta{border-color:var(--p1);color:var(--p1)}
  .nv-ts-foot{color:var(--p3);font-size:var(--t-cap);padding:10px 2px}

  /* ---- os formulários (modal compartilhado do helpers.js) ---------------- */
  .nv-ts-form{display:flex;flex-direction:column;gap:6px;margin:10px 0}
  .nv-ts-form label{font-size:var(--t-cap);letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-top:6px}
  .nv-ts-form input{min-height:44px;font-size:var(--t-dat)}
  .nv-ts-par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .nv-ts-nota{color:var(--muted);font-size:var(--t-dat);margin:6px 0 10px}
  .nv-ts-erro{color:var(--p0);font-size:var(--t-dat);min-height:20px}
  .nv-ts-vals{display:flex;flex-direction:column;gap:8px;margin:10px 0}
  .nv-ts-vlinha{display:grid;
    grid-template-columns:minmax(0,1fr) 120px 120px auto;gap:8px;align-items:center}
  .nv-ts-vlinha b{font-size:var(--t-dat);font-weight:400}
  .nv-ts-vlinha input{min-height:44px}

  /* ============================ O CELULAR ==================================
     Mesma régua do resto da vista (nova.css §celular): o piso de largura da
     planilha é DESFEITO e a linha vira BLOCO rotulado — empilhar, nunca
     esconder, e nunca letra menor. O breakpoint é o mesmo de base.css. */
  @media (max-width:820px){
    #nv-timesheet{padding:0 12px 20px}
    .nv-ts-acoes{margin-left:0}
    .nv-ts-crono{font-size:var(--t-sec)}
    /* sem isto o piso de 1620px empurra o documento e a PÁGINA rola de lado —
       o pecado que a queixa de 30/08 fechou nas outras telas */
    .nv-ts-tab{min-width:0;display:block}
    .nv-ts-h{display:none}
    .nv-ts-r{display:block;border:1px solid var(--border);background:var(--surface);
      padding:10px 12px;margin-bottom:8px}
    /* `>` é obrigatório: a etiqueta da atividade também é um <span>, e com o
       seletor descendente ela virava um bloco da largura da tela. */
    .nv-ts-r>span{display:block;padding:2px 0}
    /* o cabeçalho da coluna volta como rótulo de cada campo: empilhar não pode
       custar o significado da célula */
    .nv-ts-r>span::before{content:attr(data-rot) " ";color:var(--p3);
      font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase}
    .nv-ts-ac{display:flex;padding-top:8px}
    .nv-ts-ac button{min-height:44px;flex:1 1 auto}
    .nv-ts-vlinha{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      grid-template-areas:"n n" "c v" "b b"}
    .nv-ts-vlinha b{grid-area:n}
    .nv-ts-vlinha button{grid-area:b;min-height:44px}
    .nv-ts-num{flex:1 1 100%}
  }