/* Nero — componentes visuais das telas aprovadas
 *
 * Este arquivo é o estilo dos mocks, escrito com as VARIÁVEIS do
 * nero-theme.css. Serve para a tela implementada ficar igual ao desenho
 * sem ninguém reescrever estilo na mão — foi assim que apareceram o azul
 * errado no Piloto e os rótulos sem contraste.
 *
 * Como usar: carregue DEPOIS do nero-theme.css e use as classes n-*.
 * Não redefina cor, raio ou espaçamento dentro da tela: se faltar um
 * padrão aqui, acrescente aqui.
 *
 * Regras que este arquivo carrega junto:
 * - Sem emoji em rótulo, título de card ou item de menu.
 * - Roxo, rosa, laranja e amarelo estão fora da interface. Laranja e
 *   amarelo são cores de marketplace; âmbar (--c-warn) é estado de prazo.
 * - Todo número que é dinheiro usa .n (fonte tabular).
 * - Ausência de leitura é "—" com o motivo escrito, nunca 0.
 */

/* ---------- base ---------- */

.n{font-variant-numeric:tabular-nums}

/* rótulo pequeno de bloco: NUNCA use --muted aqui, ele reprova AA
   abaixo de 18px no tema escuro. Este cinza é o claro da escala. */
.n-rot{
  font:600 10.5px ui-monospace,Consolas,monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-forte,#a1a1aa);
}

/* ---------- ação principal ----------
   O acento CHEIO, com a tinta que passa AA POR CIMA dele: branco sobre o
   petróleo do claro, quase-preto sobre o azul-bebê do escuro. Uma por barra.

   ⚠ Existe porque "roxo" voltou duas vezes. Roxo saiu da paleta no turno 17,
   mas o "Gerar fila DTF" continuou roxo até 17/08 — não porque alguém
   discordou, e sim porque a cor dele estava num `style="background:#7c3aed"`
   dentro do HTML, e estilo inline NÃO se sobrescreve por CSS: trocar a
   paleta não alcançava aquele botão. Quem precisa da ação principal usa esta
   classe; cor de botão não volta pro atributo style. */
.n-acao{
  background:var(--accent);
  color:var(--nero-accent-ink,#fff);
  border:1px solid var(--accent);
  font-weight:700;
}
.n-acao:hover{background:var(--nero-accent-700,var(--accent));border-color:var(--nero-accent-700,var(--accent))}
/* o par: o secundário ao lado da ação é o MESMO azul, em contorno */
.n-acao--contorno{background:transparent;color:var(--accent);border:1.5px solid var(--accent);font-weight:600}

/* ---------- cartão ---------- */

.n-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius,16px);
  padding:16px 18px;
}
.n-card--ativo{border-color:var(--nero-accent)}

/* cartão com estado na borda esquerda: o estado nunca é só a cor,
   a frase dentro também diz. */
.n-card--bad{border-left:4px solid var(--c-bad);border-radius:0 var(--radius,16px) var(--radius,16px) 0}
.n-card--warn{border-left:4px solid var(--c-warn);border-radius:0 var(--radius,16px) var(--radius,16px) 0}
.n-card--ok{border-left:4px solid var(--c-ok);border-radius:0 var(--radius,16px) var(--radius,16px) 0}

.n-card__tit{font-weight:800;font-size:15px;color:var(--text);margin:0}
.n-card__sub{font-size:13.5px;color:var(--muted);line-height:1.5;margin:5px 0 0}

/* ---------- faixa de ação (o "que fazer agora") ----------
   Uma linha: ponto de estado, frase com número e prazo, botão à direita.
   Todas com a MESMA altura — hierarquia por ordem, não por tamanho. */

.n-faixa{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-radius:12px;
  border:1px solid var(--border);background:var(--panel);
  font-size:15px;color:var(--text);line-height:1.45;
}
.n-faixa--bad{border-color:color-mix(in srgb,var(--c-bad) 40%,transparent);background:color-mix(in srgb,var(--c-bad) 9%,transparent)}
.n-faixa--warn{border-color:color-mix(in srgb,var(--c-warn) 40%,transparent);background:color-mix(in srgb,var(--c-warn) 8%,transparent)}
.n-faixa__ponto{width:8px;height:8px;border-radius:50%;flex:none;background:currentColor}
.n-faixa--bad .n-faixa__ponto{background:var(--c-bad)}
.n-faixa--warn .n-faixa__ponto{background:var(--c-warn)}
.n-faixa > :last-child{margin-left:auto}

/* ---------- número grande ---------- */

.n-num{
  font-weight:800;line-height:1.05;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.n-num--heroi{font-size:44px}
.n-num--medio{font-size:30px}
.n-num--kpi{font-size:24px}
.n-num--ok{color:var(--c-ok)}
.n-num--warn{color:var(--c-warn)}
.n-num--bad{color:var(--c-bad)}
/* ausência: cinza e sem tabular — não é número, é falta de número */
.n-num--vazio{color:var(--muted);font-variant-numeric:normal}

.n-num__frase{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.4}

/* selo ao lado de um número que ainda não é definitivo */
.n-selo-parcial{
  font:700 10px var(--font);letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-warn);border:1px solid color-mix(in srgb,var(--c-warn) 50%,transparent);
  border-radius:999px;padding:3px 8px;white-space:nowrap;
}

/* ---------- grade de indicadores ---------- */

.n-kpis{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.n-kpi{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.n-kpi--fora{border-color:color-mix(in srgb,var(--c-warn) 45%,transparent);background:color-mix(in srgb,var(--c-warn) 8%,transparent)}

/* ---------- conta em lista (vendas − custo = sobra) ----------
   Substitui tabela dentro de card: uma linha por parcela, a de
   resultado em negrito. */

.n-conta{display:flex;flex-direction:column;font-size:14.5px;font-variant-numeric:tabular-nums}
.n-conta__l{display:flex;justify-content:space-between;gap:12px;padding:8px 0;color:var(--muted)}
.n-conta__l + .n-conta__l{border-top:1px solid var(--border)}
.n-conta__l > :last-child{color:var(--text);font-weight:600}
.n-conta__l--res{border-top:2px solid var(--text);color:var(--text);font-weight:800;padding-top:10px}
.n-conta__l--res > :last-child{font-weight:800}

/* ---------- tabela de lista densa ---------- */

.n-tab{width:100%;border-collapse:collapse;font-size:15px;color:var(--text)}
.n-tab thead th{
  text-align:left;padding:11px 14px;background:var(--chip);
  font:800 10.5px var(--font);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-forte,#a1a1aa);white-space:nowrap;
}
.n-tab tbody td{padding:12px 14px;border-top:1px solid var(--border);vertical-align:middle}
.n-tab tbody tr:hover td{background:color-mix(in srgb,var(--text) 4%,transparent)}
.n-tab .n-dir{text-align:right}
.n-tab__nota{padding:12px 14px;border-top:1px solid var(--border);font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---------- pastilha de estado ---------- */

.n-pill{
  display:inline-block;font:700 12px var(--font);border-radius:999px;
  padding:4px 10px;white-space:nowrap;
  border:1px solid var(--border);color:var(--muted);
}
.n-pill--ok{color:var(--c-ok);border-color:color-mix(in srgb,var(--c-ok) 40%,transparent);background:color-mix(in srgb,var(--c-ok) 8%,transparent)}
.n-pill--warn{color:var(--c-warn);border-color:color-mix(in srgb,var(--c-warn) 40%,transparent);background:color-mix(in srgb,var(--c-warn) 8%,transparent)}
.n-pill--bad{color:var(--c-bad);border-color:color-mix(in srgb,var(--c-bad) 40%,transparent);background:color-mix(in srgb,var(--c-bad) 8%,transparent)}
.n-pill--aguarda{color:var(--nero-accent);border-color:color-mix(in srgb,var(--nero-accent) 40%,transparent);background:color-mix(in srgb,var(--nero-accent) 10%,transparent)}

/* ---------- filtro em chip ---------- */

.n-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.n-chip{
  font:600 13px var(--font);color:var(--muted);
  border:1px solid var(--border);background:var(--chip);
  border-radius:999px;padding:7px 13px;cursor:pointer;
}
.n-chip[aria-pressed="true"]{
  color:var(--nero-accent);border-color:var(--nero-accent);
  background:color-mix(in srgb,var(--nero-accent) 13%,transparent);font-weight:700;
}
.n-chip__c{font-variant-numeric:tabular-nums;opacity:.8;margin-left:4px}

/* ---------- barra e anel de meta ----------
   O anel de pontos do Piloto: faixa estreita na borda, começando às 12h.
   --pct é a porcentagem preenchida. */

.n-anel{position:relative;aspect-ratio:1;display:grid;place-items:center}
.n-anel::before,.n-anel::after{
  content:"";position:absolute;inset:0;
  -webkit-mask-image:repeating-conic-gradient(from -90deg,#000 0 2.6deg,transparent 2.6deg 9.5deg),
    radial-gradient(circle closest-side,transparent 0 94%,#000 94% 100%);
  mask-image:repeating-conic-gradient(from -90deg,#000 0 2.6deg,transparent 2.6deg 9.5deg),
    radial-gradient(circle closest-side,transparent 0 94%,#000 94% 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.n-anel::before{background:color-mix(in srgb,var(--nero-accent) 22%,transparent)}
.n-anel::after{background:conic-gradient(from 0deg,var(--c-ok) 0 var(--pct,0%),transparent var(--pct,0%))}
.n-anel > *{position:relative;text-align:center}

.n-barra{position:relative;height:11px;background-image:radial-gradient(circle at center,color-mix(in srgb,var(--nero-accent) 20%,transparent) 40%,transparent 44%);background-size:11px 11px}
.n-barra__v{height:11px;background-image:radial-gradient(circle at center,var(--c-ok) 40%,transparent 44%);background-size:11px 11px}
.n-barra__v--bad{background-image:radial-gradient(circle at center,var(--c-bad) 40%,transparent 44%)}
.n-barra__meta{position:absolute;top:-4px;width:2px;height:19px;background:var(--nero-accent)}

/* ---------- campo de formulário ---------- */

.n-campo{display:flex;flex-direction:column;gap:5px}
.n-campo__rot{font-size:12.5px;color:var(--muted)}
.n-campo input,.n-campo select,.n-campo textarea{
  font:14px var(--font);color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:9px 11px;width:100%;box-sizing:border-box;
}
.n-campo input:focus,.n-campo select:focus{outline:none;border-color:var(--nero-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--nero-accent) 22%,transparent)}
.n-campo--falta input{border-color:var(--c-warn)}

/* ---------- cabeçalho de tela ---------- */

.n-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 24px;border-bottom:1px solid var(--border)}
.n-topo__tit{font-weight:700;font-size:18px;color:var(--text)}
.n-topo__sub{font-size:14px;color:var(--muted)}
.n-topo > :last-child{margin-left:auto}

/* ---------- barra de ação em massa ---------- */

.n-massa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 16px;background:var(--chip);border-bottom:1px solid var(--border)}
.n-massa__n{font-size:14px;color:var(--muted)}
.n-massa__n b{color:var(--nero-accent)}

/* ---------- passo a passo (primeiro cadastro) ---------- */

.n-passo{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-radius:13px;background:var(--panel)}
.n-passo--ativo{border-color:var(--nero-accent)}
.n-passo--feito{opacity:.62}
.n-passo__n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font:800 12px var(--font);background:var(--chip);color:var(--muted)}
.n-passo--ativo .n-passo__n{background:var(--nero-accent);color:var(--nero-accent-ink,#07222f)}
.n-passo--feito .n-passo__n{background:var(--c-ok);color:var(--nero-accent-ink,#07222f)}
.n-passo__quebra{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:4px}

/* ---------- impressão ----------
   Folha branca, marca em uma cor, corpo nunca abaixo de 12pt. */

@media print{
  .n-imp{background:#fff;color:#101114}
  .n-imp *{font-size:12pt}
  .n-imp h1{font-size:21pt}
  .n-imp thead{display:table-header-group}
  .n-card,.n-faixa,.n-kpi{break-inside:avoid}
}