/* 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.
 *
 * Duas variáveis que o tema precisa expor:
 *   --muted-forte      #a1a1aa escuro / #5b6270 claro — rótulo pequeno
 *   --nero-accent-ink  a tinta sobre o acento cheio (#07222f escuro / #fff claro)
 */

/* ---------- 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 ----------
   Um por bloco. No escuro é azul-bebê cheio com tinta escura; no claro,
   acento cheio com tinta branca. Nunca use cor inline aqui: foi um
   style="background:#7c3aed" que fez o roxo sobreviver a três trocas de
   paleta — inline não se sobrescreve por CSS. */

.n-acao{
  display:inline-block;font:700 13px var(--font);
  background:var(--nero-accent);color:var(--nero-accent-ink,#07222f);
  border:none;border-radius:9px;padding:9px 15px;cursor:pointer;
}
.n-acao:hover{background:var(--nero-accent-700,var(--nero-accent))}
.n-acao--2{background:transparent;color:var(--nero-accent);border:1px solid var(--nero-accent)}
.n-acao--3{background:var(--chip);color:var(--text);border:1px solid var(--border)}
.n-acao[disabled]{opacity:.45;cursor:default}

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

.n-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius,16px);
  padding:16px 18px;
  /* a tinta do "›" que marca o que abre tela (Piloto v3, 01/10): glifo de
     interface, não texto — nasce no card pra .n-linha/.n-celula/.n-destaque
     funcionarem em qualquer card da folha */
  --n-seta:color-mix(in srgb,var(--muted-forte) 60%,transparent);
}
.n-card--ativo{border-color:var(--nero-accent)}
/* o card DENSO (10/09, pro painel do Piloto): mesmo cartão, menos ar — o
   painel cabe inteiro sem rolar. Espaçamento de card mora aqui, não na tela. */
.n-card--denso{padding:11px 13px}

/* 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)}
/* ⚠ 17/08 — `--ok` faltava, e a tela 43d do handoff estava contornando
   com `style="border-color:…;background:…"` inline. Inline não se
   sobrescreve por CSS: é assim que o roxo sobreviveu a três trocas de
   paleta. O padrão nasce aqui, com a mesma forma das irmãs.
   ⚠ 18/08 — o valor é o do ZIP DELE (7%), não o meu (8%): este arquivo é o
   desenho, e quando os dois discordam quem manda é o desenho. O comentário
   fica porque ele explica POR QUE a classe existe. */
.n-faixa--ok{border-color:color-mix(in srgb,var(--c-ok) 40%,transparent);background:color-mix(in srgb,var(--c-ok) 7%,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--ok .n-faixa__ponto{background:var(--c-ok)}
.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)}
/* o tile COM MEDIDOR (10/09, Piloto v2): o anel à esquerda, o texto à
   direita — o tile que carrega um .n-medidor. O tamanho na grade é da
   tela (layout); a forma do tile mora aqui. */
.n-kpi--med{display:flex;flex-direction:row;align-items:center;gap:12px}

/* ---------- 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}

/* ---------- card de item (produto, material, banca) ----------
   O padrão que substitui linha de tabela quando o item tem número
   EDITÁVEL. Três números lado a lado: o primeiro é campo, os outros dois
   são calculados. Estado na borda + na palavra, nunca só na cor. */

.n-item{
  background:var(--panel);border:1px solid var(--border);
  border-radius:13px;padding:15px 17px;
  display:flex;flex-direction:column;gap:11px;
}
.n-item--warn{border-color:color-mix(in srgb,var(--c-warn) 40%,transparent)}
.n-item--bad{border-color:color-mix(in srgb,var(--c-bad) 40%,transparent)}
.n-item__top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* 🖼 a foto do item (28/08) — a caixa nasce AQUI, não no <style> da tela:
   aparência de card tem UMA fonte. `object-fit:contain` é o que faz a
   proporção mostrada bater com a impressa (a rota /api/artes/imagem já
   entrega a arte recortada no bbox do alpha, a mesma caixa do compositor).
   O fundo cinza é fixo de propósito nos dois temas: arte branca e arte preta
   precisam aparecer na mesma caixa. */
.n-item__foto{width:52px;height:52px;border-radius:8px;object-fit:contain;
  background:#565a61;border:1px solid var(--border);flex:none;padding:2px;
  box-sizing:border-box}
/* a irmã da AUSÊNCIA: peça sem arte no servidor diz a palavra, em vez de
   ficar um quadrado vazio com cara de foto ainda carregando */
.n-item__foto--sem{display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:10px;line-height:1.15;color:var(--muted-forte,#a1a1aa)}
/* 28/08 — a caixa MINI, pra LINHA de lista (Mauro: "poderia ser um pedido
   por linha, pra caber mais; se for 100 pedidos vai ficar uma lista muito
   longa"). Mesmo fundo, mesmo contain, mesma borda — só o tamanho muda, e
   ele nasce aqui pra não divergir em cada tela. */
.n-item__foto--mini{width:34px;height:34px;border-radius:6px;padding:1px}
/* 14/09 — a caixa GRANDE, pro card de PRODUTO (Mauro, pedindo a 💵 Margem por
   Produto: "mostrando a foto de cada produto com o valor total"). Numa grade
   de cards a miniatura de 52px some ao lado do número; aqui a foto é parte da
   identificação, não um enfeite de linha. Mesmo fundo, mesmo contain, mesma
   borda — só o tamanho muda, e ele nasce AQUI pra não divergir por tela. */
.n-item__foto--g{width:84px;height:84px;border-radius:10px;padding:3px}
.n-item__nome{font-weight:800;font-size:15px;color:var(--text)}
.n-item__nums{display:flex;gap:9px;align-items:flex-end}
.n-item__nums > *{flex:1}
.n-item__pe{font-size:13px;color:var(--muted-forte,#a1a1aa);font-variant-numeric:tabular-nums}

/* card de ação: abre a lista, não é item dela */
.n-acao-card{
  background:var(--panel);border:1px dashed var(--nero-accent);
  border-radius:13px;padding:16px 17px;
  display:flex;flex-direction:column;gap:8px;justify-content:center;cursor:pointer;
}
.n-acao-card--neutro{border-style:solid;border-color:var(--border)}
.n-acao-card__tit{font-weight:800;font-size:15px;color:var(--nero-accent)}
.n-acao-card--neutro .n-acao-card__tit{color:var(--text)}

/* grade de variação: cor em linha, tamanho em coluna */
.n-grade{width:100%;border-collapse:collapse;font-size:14px;color:var(--text);font-variant-numeric:tabular-nums}
.n-grade thead th{padding:11px 16px;background:var(--chip);font:800 10.5px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--muted-forte,#a1a1aa)}
.n-grade td{padding:9px 16px;border-top:1px solid var(--border)}
.n-grade input{width:52px;padding:6px 0;text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font:inherit}
.n-grade__vazia input{border-color:var(--muted-forte,#a1a1aa);color:var(--muted-forte,#a1a1aa)}
/* ⚠ 17/08 — este 2px era `#3f3f46` cravado, e o cravado veio do MOCK, que é
   desenhado no escuro. O tema padrão do Nero é o CLARO: no branco aquele
   zinc vira uma linha quase preta cortando a grade, e a tela implementada
   deixa de parecer o desenho — que é exatamente o que este arquivo existe
   pra impedir. Cor de mock escuro não entra aqui em hexadecimal. */
.n-grade__tot{border-top:2px solid var(--muted-forte,#a1a1aa);background:var(--chip);font-weight:800}

/* chips de variação (lista cadastrada, com remover) */
.n-var{display:flex;gap:7px;flex-wrap:wrap}
.n-var span{font:600 12.5px var(--font);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:5px 11px}
.n-var .n-var--add{color:var(--muted-forte,#a1a1aa);border-style:dashed;border-color:var(--muted-forte,#a1a1aa)}

/* ---------- 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 ----------
   ⚠ 01/10 (Piloto v3): a TINTA mistura 15% de --text na cor semântica. A cor
   pura sobre o próprio tingido media 4,28:1 (bad) e 4,50 (warn) no claro —
   abaixo de AA em texto pequeno. Com a mistura: 5,4–5,8 no claro, 6,5–9,6 no
   escuro (medido no mock 50). Vale pra TODAS as telas, de propósito: um dono. */

.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:color-mix(in srgb,var(--c-ok) 85%,var(--text));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:color-mix(in srgb,var(--c-warn) 85%,var(--text));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:color-mix(in srgb,var(--c-bad) 85%,var(--text));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:color-mix(in srgb,var(--nero-accent) 85%,var(--text));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)}

/* ---------- medidor: o relógio do painel ----------
   Nasceu em 10/09 do anel `.gauge .ring` da Saúde da Loja, que morava só
   naquela tela. Piloto e Saúde da Loja passam a usar ESTE — um dono só
   (regra §4: tela nenhuma inventa card).
   Número grande, unidade em caixa alta pequena e a BORDA como ponteiro:
   `--pct` é quanto do anel está pintado (padrão 100% = anel cheio, o
   desenho antigo da Saúde). O resto do anel fica na mesma cor, apagada —
   é a trilha, não um segundo estado.
   Cor SÓ por modificador (--ok/--warn/--bad/--info/--vazio): o token troca
   sozinho por tema. `--vazio` é a AUSÊNCIA — anel apagado, "—" sem tabular,
   cinza de apoio — pra "não li" nunca sair com o peso do número medido.
   Tamanhos: --p (72) · padrão (96) · --g (118, o da Saúde). `--dinheiro`
   encolhe o número pra "138.400" caber no anel padrão — o "R$" vai na
   unidade ("R$ · HOJE"), como o "KM/H" embaixo do ponteiro. */
.n-medidor{
  --pct:100%;
  --n-med-cor:var(--muted-forte,#a1a1aa);
  --n-med-tam:96px;
  --n-med-traco:7px;
  position:relative;width:var(--n-med-tam);height:var(--n-med-tam);
  border-radius:50%;flex:none;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--n-med-cor);
}
.n-medidor::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -90deg,var(--n-med-cor) 0 var(--pct),
    color-mix(in srgb,var(--n-med-cor) 22%,transparent) var(--pct) 100%);
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 calc(100% - var(--n-med-traco)),#000 calc(100% - var(--n-med-traco) + .5px) 100%);
  mask:radial-gradient(circle closest-side,transparent 0 calc(100% - var(--n-med-traco)),#000 calc(100% - var(--n-med-traco) + .5px) 100%);
}
.n-medidor__n{position:relative;font-weight:800;line-height:1;font-size:30px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
/* ⚠ 01/10 (Piloto v3): a unidade saía em CAIXA ALTA a 9,5px com tracking .09em —
   a mesma família "rótulo miúdo, maiúsculo, espaçado" que o Mauro achou feia
   no Piloto. Em minúsculas, 10,5px, quase sem tracking: "R$ · 7 dias" mede
   ~62px numa corda de 75. A Saúde da Loja muda junto (um dono só). */
.n-medidor__u{position:relative;font:600 10.5px var(--font);letter-spacing:.02em;
  color:var(--muted-forte,#a1a1aa);margin-top:4px;
  white-space:nowrap;text-align:center}
.n-medidor--ok{--n-med-cor:var(--c-ok)}
.n-medidor--warn{--n-med-cor:var(--c-warn)}
.n-medidor--bad{--n-med-cor:var(--c-bad)}
.n-medidor--info{--n-med-cor:var(--nero-accent)}
.n-medidor--vazio{--n-med-cor:var(--muted);--pct:0%}
.n-medidor--vazio .n-medidor__n{font-variant-numeric:normal;font-weight:700;color:var(--muted)}
.n-medidor--p{--n-med-tam:72px;--n-med-traco:6px}
.n-medidor--p .n-medidor__n{font-size:22px}
.n-medidor--p .n-medidor__u{font-size:8.5px;letter-spacing:.07em;margin-top:3px}
.n-medidor--g{--n-med-tam:118px;--n-med-traco:7px}
.n-medidor--g .n-medidor__n{font-size:38px}
.n-medidor--g .n-medidor__u{font-size:10.5px}
.n-medidor--dinheiro .n-medidor__n{font-size:18px;letter-spacing:-.02em}

/* a linha de tabela que carrega estado (10/09, pro Estoque real no Piloto):
   o 40a do handoff pintava a linha com `style="background:…"` inline — e
   inline não se sobrescreve por CSS. O estado nasce aqui, com a mesma
   forma das faixas. A frase na linha continua dizendo o estado por escrito. */
.n-tab tbody tr.n-tab__l--warn td{background:color-mix(in srgb,var(--c-warn) 7%,transparent)}
.n-tab tbody tr.n-tab__l--bad td{background:color-mix(in srgb,var(--c-bad) 8%,transparent)}

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

/* ── botão-ícone (✎ ✕): nasceu em 26/08 pro Custo Real (regra §4: se falta
   padrão, ele nasce AQUI e o Mauro fica sabendo). Uso: ações pequenas coladas
   numa linha editável. --bad pro destrutivo no hover. */
.n-ico{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;cursor:pointer;flex:none;
  background:var(--chip);color:var(--muted);border:1px solid var(--border);
  font:500 12.5px var(--font);padding:0}
.n-ico:hover{color:var(--text);border-color:var(--muted-forte,#a1a1aa)}
.n-ico--bad:hover{color:var(--c-bad);border-color:var(--c-bad)}

.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)}

/* ---------- campo DE LINHA (17/09, Custo e Margem) ----------
   O input compacto de uma linha editável (custo por peça, custo fixo do
   mês): cabe ao lado do nome e do ✕ sem virar bloco. Nasceu na tela e veio
   pra cá (§4: tela nenhuma inventa a cara de um campo). O chip e o ícone
   "mini" são os irmãos pequenos do .n-chip e do .n-ico, pra sugestão de
   custo e pro ✕ dentro de um chip. */
.n-input--linha{font:500 13px var(--font);color:var(--text);background:var(--bg);
  border:1px solid var(--border);border-radius:7px;padding:5px 8px;min-width:0;
  font-variant-numeric:tabular-nums;box-sizing:border-box}
.n-input--linha:focus{outline:none;border-color:var(--nero-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--nero-accent) 22%,transparent)}
.n-input--falta{border-color:var(--c-warn)}
.n-chip--mini{padding:4px 10px;font-size:12px}
.n-ico--mini{width:22px;height:22px;font-size:11px}

/* ---------- 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}
}

/* ── chip de seleção (chipsel) ────────────────────────────────────────────────
   Morava só no <style> da fila-criacao. Quando a Criação de Anúncios ganhou a
   porta pro ML (15/09) e a tela do ML precisou do mesmo chip pra filtrar por
   produto, copiar a regra faria DUAS donas da mesma aparência — o que esta
   folha existe pra impedir. Então ela se mudou pra cá inteira; quem quiser o
   chip usa `.chipsel` e `.chipsel.on`. */
.chipsel{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--border);border-radius:999px;padding:4px 12px;background:var(--chip);font-size:12.5px;font-weight:700;cursor:pointer;user-select:none}
.chipsel.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.chipsel small{font-weight:600;color:var(--muted)}

/* ── estúdio de artes: palco, camada de cor, coluna de ferramentas (16/09) ──
   Nasceram com o editor vetorial (/app/estudio). O palco é o quadriculado de
   "transparente" que a fila e o Preparar Arte já usavam (o mesmo #fff/#e6e6e6
   dos dois temas: transparência não tem tema). A camada é a linha do painel
   "desagrupar por cor": quadradinho (a cor entra pelo JS, é DADO), hex, área
   e ações. A coluna de ferramentas é o "Selec./Mão/Texto…" do lado esquerdo. */
.n-palco{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius,16px);background-color:#fff;background-image:linear-gradient(45deg,#e6e6e6 25%,transparent 25%,transparent 75%,#e6e6e6 75%),linear-gradient(45deg,#e6e6e6 25%,transparent 25%,transparent 75%,#e6e6e6 75%);background-size:18px 18px;background-position:0 0,9px 9px}
.n-palco--tecido{background-image:none}
.n-palco--solta{outline:3px dashed var(--accent);outline-offset:-3px}
.n-camada{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.n-camada--fora{opacity:.45}
.n-camada__sw{width:26px;height:26px;border-radius:7px;border:1px solid var(--border);flex:none;cursor:pointer;padding:0}
.n-camada__txt{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.n-camada__hex{font:600 12px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.n-camada__pct{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-camada__acoes{display:flex;gap:4px}
.n-ferr{display:grid;gap:6px}
.n-ferr .n-acao{padding:6px 4px;font-size:11.5px;width:100%;justify-content:center;white-space:nowrap}
.n-ferr .n-acao[aria-pressed="true"]{border-color:var(--nero-accent);color:var(--nero-accent);background:color-mix(in srgb,var(--nero-accent) 10%,transparent)}

/* ═══ PILOTO v3 — os padrões do mock 50 (APROVADO pelo Mauro em 01/10) ═══
   Mauro (01/10): «tem textos em cima de cards e está mal feito … mudando
   formas de texto, de cards, cores etc.» → «aprova, fundo cinza. pode ligar
   no piloto». Vieram inteiros do <style id="proposta-componentes"> do mock
   (design_handoff_nero/telas/50-piloto-v3.html), escritos só com tokens.
   A tela (ui_app/piloto.html) ficou só com layout, como manda a regra §4.
   As regras de FORMA respondem à largura do CARD (contêiner "card", que o
   .n-card--painel declara), nunca à da janela: o Piloto vive dentro do
   shell com a lateral. As regras de ALVO (40px) respondem ao toque.
   ⚠ .n-linha é o irmão do .n-conta (rótulo à esquerda, valor à direita,
   linha de resultado). O .n-conta continua servindo às telas que já o usam
   (margem-produto, notas-fiscais, banca, producao); quando cada uma delas
   receber este desenho ("depois a gente vai modificando os outros cards"),
   migra pro .n-linha e o .n-conta morre — um dono só, sem anexar os dois. */

/* 0. o card do painel: é o contêiner das regras de forma; no claro, sombra
      leve que separa o card branco da página (que o layout pinta de
      --panel2); no escuro a borda basta. A sombra é aparência de CARD:
      vai pra folha junto com este bloco. --n-seta é a tinta do "›" que
      marca o que abre tela (glifo de interface, não texto) — nasce no
      .n-card, não no --painel, pra .n-linha/.n-celula/.n-destaque
      funcionarem em qualquer card da folha (ao promover, a linha entra na
      regra .n-card que já existe). */
.n-card--painel{container:card / inline-size}
body.theme-light .n-card--painel{box-shadow:0 1px 2px color-mix(in srgb,var(--text) 7%,transparent),0 2px 6px color-mix(in srgb,var(--text) 4%,transparent)}

/* 1. cabeçalho DENTRO do card — o fim do "texto em cima de card": título à
      esquerda (ele mesmo é o link pra tela principal, "›" logo depois do
      nome), carimbo medido ou período à DIREITA (ocupa a sobra da fileira
      do título — nunca entre o nome e o "›", que lia como migalha de pão),
      links das telas irmãs no fim, régua embaixo. Cada link é um alvo de
      28px (40px no toque). O grupo de links é UM item flex: ou cabe
      inteiro ao lado do título, ou desce inteiro pra fileira de baixo, à
      direita — nunca um link órfão, nunca rolagem lateral, nunca texto
      cortado na borda do card. */
.n-card__cab{display:flex;align-items:center;gap:0 14px;flex-wrap:wrap;padding-bottom:5px;margin-bottom:4px;border-bottom:1px solid var(--border);min-height:28px}
.n-card__cab .n-card__tit{font-size:15px;font-weight:800;letter-spacing:.005em;line-height:1.3;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.n-card__cab .n-card__tit a{display:inline-flex;align-items:center;min-height:28px;color:inherit;text-decoration:none}
.n-card__cab .n-card__tit a::after{content:"›";margin-left:5px;font-weight:600;color:var(--n-seta)}
.n-card__cab .n-card__tit a:hover,.n-card__cab .n-card__tit a:focus-visible{color:var(--nero-accent);text-decoration:underline;outline:none}
.n-carimbo{font:500 12px/1.3 var(--font);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.n-card__cab > .n-carimbo{flex:1 1 auto;min-width:0;text-align:right}
.n-card__links{margin-left:auto;display:flex;gap:0 12px;flex-wrap:wrap;justify-content:flex-end;font:600 12px var(--font)}
.n-card__links a{display:inline-flex;align-items:center;min-height:28px;color:var(--nero-accent);text-decoration:none;white-space:nowrap}
.n-card__links a:hover,.n-card__links a:focus-visible{text-decoration:underline;outline:none}

/* 2. linha de número — rótulo à esquerda, número (19px) à direita, estado
      como pílula com a PALAVRA. Com leitura é <a> (abre a tela, "›" no fim);
      sem leitura ("—") é <div>, que reserva o mesmo espaço do "›" pra o
      número não desalinhar. Generaliza o .n-conta. */
.n-linhas{display:flex;flex-direction:column;min-width:0}
.n-linha{display:flex;align-items:center;gap:8px;padding:5px 0;min-height:36px;box-sizing:border-box;font-size:13.5px;line-height:1.3;color:var(--text);text-decoration:none;font-variant-numeric:tabular-nums}   /* tabular na linha inteira: a nota ("R$ 812") herda */
.n-linha + .n-linha{border-top:1px solid color-mix(in srgb,var(--border) 65%,transparent)}
.n-linha__r{flex:1;min-width:0;font-weight:500}
.n-linha__nota{font-size:12px;color:var(--muted);font-weight:400;margin-left:5px}
.n-linha__n{font-weight:800;font-size:19px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;text-align:right}
.n-linha::after{content:"";flex:none;width:9px}
a.n-linha::after{content:"›";font:600 16px/1 var(--font);color:var(--n-seta);text-align:center}
.n-linha--ok .n-linha__n{color:var(--c-ok)}
.n-linha--warn .n-linha__n{color:var(--c-warn)}
.n-linha--bad .n-linha__n{color:var(--c-bad)}
.n-linha--info .n-linha__n{color:var(--c-info)}
/* ausência: "—" sem tabular, cinza de apoio; o motivo vai na pílula ou no title */
.n-linha--vazio .n-linha__n{color:var(--muted);font-variant-numeric:normal;font-weight:600;font-size:17px}
/* linha de resultado (sobra / prejuízo): régua forte em cima, negrito */
.n-linha.n-linha--res{border-top:2px solid var(--muted-forte);margin-top:2px}
.n-linha.n-linha--res .n-linha__r{font-weight:800}
/* rótulo de grupo dentro da lista (só o NOME; não carrega número nem frase;
   leva o carimbo medido à direita) */
.n-linha.n-linha--grupo{min-height:0;padding:10px 0 2px;font-size:11.5px;font-weight:700;color:var(--muted-forte);border-top:0;display:flex;gap:4px 10px;flex-wrap:wrap}
.n-linha--grupo::after{display:none}
.n-linha--grupo .n-carimbo{font-weight:500;margin-left:auto}
a.n-linha:hover .n-linha__r,a.n-linha:focus-visible .n-linha__r{color:var(--nero-accent);text-decoration:underline}
a.n-linha:focus-visible{outline:2px solid var(--nero-accent);outline-offset:-2px;border-radius:6px}
/* card de telefone: a nota ganha a própria linha sob o rótulo, inteira */
@container card (max-width:420px){
  .n-linha__nota{display:block;margin-left:0;margin-top:1px}
  /* no card de telefone a fileira dos links começa embaixo do título, à
     esquerda — o olho não pula do título pra direita com um vão no meio */
  .n-card__links{margin-left:0;flex-basis:100%;justify-content:flex-start}
  .n-card__links a,.n-card__cab .n-card__tit a{min-height:36px}
}

/* 3. célula — número grande em cima (26px, caixa fixa de 27px pra toda
      célula alinhar o rótulo), rótulo curto embaixo, estado como pílula.
      Sem borda própria: o filete de 1px nasce da borda direita e inferior
      de cada célula e a última linha/coluna cai fora do contêiner
      (overflow:hidden). Com leitura é <a> ("›" no canto); sem leitura é <div>. */
.n-celulas{display:grid;overflow:hidden}
.n-celula{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:10px 10px 9px;margin:0 -1px -1px 0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);color:var(--text);text-decoration:none;box-sizing:border-box}
.n-celula__n{font-size:26px;line-height:1.05;min-height:27px;display:flex;align-items:flex-end}            /* soma-se a .n-num e aos --ok/--warn/--bad/--info/--vazio */
.n-celula__n.n-num--vazio{font-size:22px;font-weight:700}
.n-celula__r{font:500 13px/1.3 var(--font);color:var(--muted-forte)}
.n-celula__sub{font:400 12px/1.35 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
a.n-celula::after{content:"›";position:absolute;top:8px;right:9px;font:600 16px/1 var(--font);color:var(--n-seta)}
a.n-celula:hover,a.n-celula:focus-visible{background:color-mix(in srgb,var(--text) 4%,transparent);outline:none}
a.n-celula:hover .n-celula__r,a.n-celula:focus-visible .n-celula__r{color:var(--nero-accent);text-decoration:underline}
/* faltavam no .n-num: azul = aguardando/informativo; e a PALAVRA-número
   ("ligado", "40 min") em tamanho próprio pra não brigar com os números */
.n-num--info{color:var(--c-info)}
.n-num--palavra{font-size:20px;letter-spacing:0}

/* 4. destaque — o UM número que abre o card (a despachar, taxa de resposta,
      tenho em caixa): número 30px, rótulo, pílula, nota. Fundo tingido a
      8% SÓ aqui e só fora do normal (--warn/--bad): um sinal por card. */
.n-destaque{position:relative;display:flex;align-items:center;gap:4px 10px;flex-wrap:wrap;padding:8px 10px;margin:4px -10px 2px;border-radius:10px;color:var(--text);text-decoration:none}
.n-destaque__n{font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.n-destaque--ok .n-destaque__n{color:var(--c-ok)}
.n-destaque--warn .n-destaque__n{color:var(--c-warn)}
.n-destaque--bad .n-destaque__n{color:var(--c-bad)}
.n-destaque--warn{background:color-mix(in srgb,var(--c-warn) 8%,transparent)}
.n-destaque--bad{background:color-mix(in srgb,var(--c-bad) 8%,transparent)}
.n-destaque__r{font-size:14px;font-weight:700}
.n-destaque__nota{font-size:12px;color:var(--muted);flex-basis:100%;margin-top:-2px}
.n-destaque--warn .n-destaque__nota,.n-destaque--bad .n-destaque__nota{color:var(--muted-forte)}   /* cinza sobre fundo tingido precisa de folga */
a.n-destaque{padding-right:30px}
a.n-destaque::after{content:"›";position:absolute;right:11px;top:50%;transform:translateY(-50%);font:600 18px/1 var(--font);color:var(--n-seta)}
a.n-destaque:hover .n-destaque__r,a.n-destaque:focus-visible .n-destaque__r{color:var(--nero-accent);text-decoration:underline}
a.n-destaque:focus-visible{outline:2px solid var(--nero-accent);outline-offset:-2px}

/* 5. urgência em linha — a LINHA INTEIRA é o link: ponto de estado, família,
      frase com o número em negrito, nome da tela à direita. Substitui a
      faixa colorida com botão (oito retângulos rosa). Alvo ≥ 30px; no
      toque ≥ 40px. Em card estreito vira grade: família em cima, frase em
      largura total. */
.n-urg{display:flex;align-items:center;gap:10px;padding:6px 0;min-height:30px;box-sizing:border-box;font-size:13.5px;line-height:1.35;color:var(--text);text-decoration:none}
.n-urg + .n-urg{border-top:1px solid color-mix(in srgb,var(--border) 65%,transparent)}
.n-urg__pt{width:8px;height:8px;border-radius:50%;flex:none;background:var(--muted-forte)}
.n-urg--bad .n-urg__pt{background:var(--c-bad)}
.n-urg--warn .n-urg__pt{background:var(--c-warn)}
.n-urg__k{flex:none;width:56px;font-size:11.5px;font-weight:700;color:var(--muted-forte)}
.n-urg__t{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.n-urg__t b{font-weight:700}
.n-urg__t span{color:var(--muted)}
/* o número do estado dentro da frase ("envio atrasado em 5,13%") leva a cor
   semântica pela CLASSE — nunca style inline (identidade §5) */
.n-urg__t b.warn{color:var(--c-warn)}
.n-urg__t b.bad{color:var(--c-bad)}
.n-urg__t b.ok{color:var(--c-ok)}
/* o ponto PISCA só no atraso já consumado (vermelho), como a v2 fazia */
@keyframes n-urg-pisca{0%,100%{opacity:1}50%{opacity:.35}}
.n-urg__pt--pisca{animation:n-urg-pisca 1.2s infinite}
@media (prefers-reduced-motion:reduce){.n-urg__pt--pisca{animation:none}}
.n-urg__a{flex:none;font:600 12.5px var(--font);color:var(--nero-accent);white-space:nowrap}
.n-urg__a::after{content:"›";margin-left:4px;font-weight:600}   /* o mesmo glifo das células e títulos; "→" saiu */
.n-urg:hover .n-urg__a,.n-urg:focus-visible .n-urg__a{text-decoration:underline}
.n-urg:focus-visible{outline:2px solid var(--nero-accent);outline-offset:-2px;border-radius:6px}
@container card (max-width:600px){
  .n-urg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pt k a" "t t t";gap:1px 8px;padding:8px 0}
  .n-urg__pt{grid-area:pt}
  .n-urg__k{grid-area:k;width:auto}
  .n-urg__t{grid-area:t}
  .n-urg__a{grid-area:a}
}

/* 6. pílula mini — a .n-pill em tamanho de linha (UMA definição). */
.n-pill--mini{font-size:11.5px;font-weight:700;padding:2px 8px;line-height:1.4}

/* 7. botão de contorno pequeno (cabe numa linha) e o .n-acao como <a>: a
      folha o desenhou como <button>; como link ele herdava o sublinhado e,
      dentro do .nero-content da tela viva, a cor de link
      (`.nero-content a:not(:where([class~="btn"]))`, (0,1,1)) — tinta acento
      sobre fundo acento, invisível. A regra aqui tem a mesma especificidade
      e carrega depois: ganha no empate. O --2 (contorno) volta ao acento. */
a.n-acao{text-decoration:none;color:var(--nero-accent-ink)}
/* o mesmo empate pra TODO <a> que é linha, célula, urgência, herói ou anel:
   sem isto, dentro do .nero-content da tela viva o rótulo e o número das
   linhas neutras sairiam na cor de link (medido pelo verificador) */
a.n-linha,a.n-celula,a.n-urg,a.n-destaque,a.n-med-pilha{color:var(--text)}
a.n-acao--2{color:var(--nero-accent)}
.n-acao--mini{font-size:12px;padding:4px 10px;min-height:28px;display:inline-flex;align-items:center;box-sizing:border-box}

/* 8. medidor em pilha — rótulo em DUAS linhas de propósito (período em cima,
      "N pedidos" embaixo), anel sempre no tamanho padrão (96px: três cabem
      em 300px), lucro embaixo. Como as duas linhas são fixas, três anéis
      lado a lado nunca desnivelam, em largura nenhuma. */
.n-med-pilha{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0;color:var(--text);text-decoration:none}
.n-med-pilha__r{font-size:12.5px;font-weight:700;color:var(--muted-forte);line-height:1.3}
.n-med-pilha__r small{display:block;font-size:11.5px;font-weight:500;color:var(--muted-forte);font-variant-numeric:tabular-nums}
.n-med-pilha .n-medidor{margin:4px 0 5px}
.n-med-pilha__p{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;justify-content:center;flex-wrap:wrap}
a.n-med-pilha:hover .n-med-pilha__r,a.n-med-pilha:focus-visible .n-med-pilha__r{color:var(--nero-accent);text-decoration:underline}
a.n-med-pilha:focus-visible{outline:2px solid var(--nero-accent);outline-offset:2px;border-radius:8px}
/* card de telefone (três colunas de ~108px): o lucro em 19px — "R$ 2.760" em 24px
   mede 118 e quebrava "R$" numa linha e o valor na outra */
@container card (max-width:440px){.n-med-pilha .n-num--kpi{font-size:19px}}

/* 9. prateleira em linhas (sem tabela HTML): cabeçalho em 11,5px, célula
      numérica à direita, situação = pílula + nota curta que muda decisão;
      a conta vai no title; a AÇÃO do estado ("Contar agora") mora na
      Situação — cada linha é um grid próprio, e um botão na coluna de data
      desalinhava a Situação só naquela linha. O grid pede ~652px; quando o
      CONTEÚDO do card tem menos de 680 (container query mede a caixa de
      conteúdo: card de ~706px; monitor de 1280 com a lateral do app,
      telefone) cada produto vira
      um cartão de três fileiras: nome · contagem / situação / os quatro
      números com chave — e um rótulo de grupo (.n-prat__rot) diz que a lista
      é a PRATELEIRA, peça física contada (≠ vitrine). */
.n-prat{display:grid;grid-template-columns:minmax(110px,1fr) 62px 78px 84px 60px minmax(140px,1.15fr) minmax(64px,auto);gap:0 12px;align-items:center;padding:6px 0;font-size:13.5px;color:var(--text)}
.n-prat + .n-prat{border-top:1px solid color-mix(in srgb,var(--border) 65%,transparent)}
.n-prat--cab{padding:8px 0 6px;font-size:11.5px;font-weight:700;color:var(--muted-forte);border-bottom:1px solid var(--border)}
.n-prat--cab + .n-prat{border-top:0}
.n-linha--grupo.n-prat__rot{display:none}
.n-prat__nome{font-weight:700;display:flex;align-items:center;gap:3px 6px;flex-wrap:wrap;min-width:0;line-height:1.3}
.n-prat__n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
/* a data de contagem é valor MEDIDO: tinta do texto, não o cinza de apoio
   (que é o do "—" de ausência na mesma coluna — .n-prat__n--vazio, abaixo, vence) */
.n-prat__ct{font-variant-numeric:tabular-nums;color:var(--text);text-align:right;white-space:nowrap}
.n-prat__n--ok{color:var(--c-ok)}
.n-prat__n--warn{color:var(--c-warn)}
.n-prat__n--bad{color:var(--c-bad)}
.n-prat__n--vazio{color:var(--muted);font-weight:500;font-variant-numeric:normal}
/* situação = pílula com a palavra; embaixo, só a nota que MUDA decisão */
.n-prat__sit{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.n-prat__sit small{font-size:12px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums}
.n-prat__sit .n-acao--mini{margin-top:3px}   /* a ação do estado ("Contar agora") mora na Situação, não na coluna de data */
/* na linha larga, pílula e nota (ou botão) ficam LADO A LADO e quebram se
   precisar — a BASICA (pílula + "Contar agora") era a única pilha de 3
   linhas da página, com 100px de folga à direita */
@container card (min-width:680px){
  .n-prat__sit{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px}
  .n-prat__sit .n-acao--mini{margin-top:0}
}
@container card (max-width:679px){
  /* quatro colunas IGUAIS: os quatro números ficam no mesmo x em todos os
     produtos (com a 4ª em `auto`, "contagem 06/09" × "contagem —" deslocava
     as colunas de 9 a 25px entre vizinhos). A contagem sai como os outros
     números: rótulo em cima, valor embaixo, encostada à direita. */
  .n-prat{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"nome nome nome ct" "sit sit sit sit" "c r d dura";gap:5px 8px;padding:10px 0}
  .n-prat--cab{display:none}
  .n-linha--grupo.n-prat__rot{display:flex;padding-bottom:4px;border-bottom:1px solid var(--border)}
  .n-linha--grupo.n-prat__rot + .n-prat{border-top:0}
  .n-prat__nome{grid-area:nome}
  .n-prat__ct{grid-area:ct;align-self:start;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:15px;font-weight:600}
  .n-prat__sit{grid-area:sit;flex-direction:row;align-items:center;flex-wrap:wrap;gap:3px 8px}
  .n-prat__n{text-align:left;display:flex;flex-direction:column;gap:1px;font-size:15px}
  .n-prat__n--c{grid-area:c}
  .n-prat__n--r{grid-area:r}
  .n-prat__n--d{grid-area:d}
  .n-prat__n--dura{grid-area:dura}
  .n-prat__n[data-r]::before{content:attr(data-r);display:block;font-size:10.5px;font-weight:600;color:var(--muted-forte);font-variant-numeric:normal}
  .n-prat__ct[data-r]::before{content:attr(data-r);display:block;font-size:10.5px;font-weight:600;color:var(--muted-forte);font-variant-numeric:normal}
}

/* 10. alvo de TOQUE (piso de clique de 04/09): 40px pra tudo que abre tela
       ou age, quando o ponteiro é dedo ou a janela é de telefone. É regra de
       ALVO, por isso responde ao toque/viewport, não ao card. */
/* 11. o "›" das CÉLULAS e LINHAS: em repouso só no toque (onde não há
       hover); com mouse aparece no hover/foco. O <div> sem leitura reserva
       o mesmo espaço, o número não desalinha. Título, herói e urgência
       ficam com o glifo em repouso — um sinal por card, não um por número. */
@media (pointer:fine){
  a.n-celula::after,a.n-linha::after{opacity:0;transition:opacity .12s}
  a.n-celula:hover::after,a.n-celula:focus-visible::after,a.n-linha:hover::after,a.n-linha:focus-visible::after{opacity:1}
}

@media (max-width:620px),(pointer:coarse){
  .n-card__links a,.n-card__cab .n-card__tit a{min-height:40px}
  a.n-linha{min-height:40px}
  .n-urg{min-height:40px}
  .n-acao{min-height:40px;display:inline-flex;align-items:center;box-sizing:border-box}
  .n-prat__sit .n-acao--mini{min-height:40px}
}