).
================================================================ */
.tabela-scroll{
width: 100%;
overflow-x: auto;
border-radius: var(--raio-md);
border: 1px solid var(--cor-borda);
}
.tabela-padrao{
width: 100%;
border-collapse: collapse;
background: var(--cor-fundo-card);
font-size: var(--texto-sm);
min-width: 480px; /* evita achatar demais antes de rolar */
}
.tabela-padrao thead th{
background: var(--cor-fundo);
color: var(--cor-texto-secundario);
text-transform: uppercase;
font-size: var(--texto-xs);
font-weight: var(--peso-negrito);
letter-spacing: .4px;
text-align: left;
padding: var(--espaco-3) var(--espaco-4);
border-bottom: 1.5px solid var(--cor-borda);
}
.tabela-padrao tbody td{
padding: var(--espaco-3) var(--espaco-4);
border-bottom: 1px solid var(--cor-borda);
color: var(--cor-texto);
}
.tabela-padrao tbody tr:last-child td{ border-bottom: none; }
/* zebra: linhas pares com um fundo levemente diferente, ajuda a
ler linha por linha em tabelas compridas */
.tabela-padrao tbody tr:nth-child(even){ background: var(--cor-fundo); }
/* ================================================================
COMPONENTE 6 — FORMULÁRIO PADRÃO
label + input/select + mensagem de erro.
================================================================ */
.form-campo{ margin-bottom: var(--espaco-4); }
.form-campo label{
display: block;
font-size: var(--texto-sm);
font-weight: var(--peso-semi);
color: var(--cor-texto);
margin-bottom: var(--espaco-1);
}
.form-campo input,
.form-campo select,
.form-campo textarea{
width: 100%;
font-family: var(--fonte-corpo);
font-size: var(--texto-base);
color: var(--cor-texto);
background: var(--cor-branco);
border: 1.5px solid var(--cor-borda);
border-radius: var(--raio-sm);
padding: var(--espaco-3);
/* 16px de fonte no mínimo evita que o iOS dê zoom automático ao focar */
}
.form-campo input:focus,
.form-campo select:focus,
.form-campo textarea:focus{
outline: none;
border-color: var(--cor-acento);
}
.form-campo textarea{ min-height: 100px; resize: vertical; }
.form-campo small.nj-ajuda{
display: block;
margin-top: var(--espaco-1);
color: var(--cor-texto-secundario);
font-size: var(--texto-xs);
}
/* estado de erro: some no input e some na mensagem, juntos */
.form-campo.tem-erro input,
.form-campo.tem-erro select,
.form-campo.tem-erro textarea{
border-color: var(--alerta-critico-borda);
background: var(--alerta-critico-fundo);
}
.form-campo .nj-erro{
display: block;
margin-top: var(--espaco-1);
color: var(--alerta-critico-texto);
font-size: var(--texto-xs);
font-weight: var(--peso-medio);
}
/* ================================================================
COMPONENTE 7 — BOTÕES
.btn = base. Combine com um modificador:
--principal (verde, ação padrão), --secundario (contorno, ação
neutra) ou --perigo (vermelho, ação destrutiva tipo "excluir").
A cor terracota (--cor-acento) fica reservada só pra UM botão por
tela — o de maior destaque — via a classe .btn--destaque.
================================================================ */
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--espaco-2);
font-family: var(--fonte-corpo);
font-size: var(--texto-base);
font-weight: var(--peso-semi);
border: 1.5px solid transparent;
border-radius: var(--raio-sm);
padding: var(--espaco-3) var(--espaco-5);
min-height: 44px; /* alvo de toque confortável pro celular */
cursor: pointer;
text-decoration: none;
transition: background-color .15s, border-color .15s, opacity .15s;
}
.btn:disabled{ opacity: .5; cursor: not-allowed; }
.btn--principal{
background: var(--cor-primaria);
color: var(--cor-branco);
}
.btn--principal:hover{ background: var(--cor-primaria-clara); }
.btn--destaque{
background: var(--cor-acento);
color: var(--cor-branco);
}
.btn--destaque:hover{ background: var(--cor-acento-hover); }
.btn--secundario{
background: transparent;
border-color: var(--cor-borda);
color: var(--cor-primaria);
}
.btn--secundario:hover{ background: var(--cor-fundo); border-color: var(--cor-primaria); }
.btn--perigo{
background: var(--alerta-critico-texto);
color: var(--cor-branco);
}
.btn--perigo:hover{ opacity: .88; }
/* ================================================================
COMPONENTE 8 — ESTADO VAZIO
O componente mais importante desta entrega: em vez de mostrar
"0%" ou uma tela morta quando falta configuração, mostra um
espaço claro explicando O QUÊ falta e O QUE fazer a respeito.
Estrutura: ícone + título + explicação de 1 linha + botão de ação.
================================================================ */
.estado-vazio{
text-align: center;
padding: var(--espaco-10) var(--espaco-5);
background: var(--cor-fundo-card);
border: 1.5px dashed var(--cor-borda);
border-radius: var(--raio-md);
}
.estado-vazio__icone{
font-size: 2.5rem;
line-height: 1;
margin-bottom: var(--espaco-3);
opacity: .8;
}
.estado-vazio__titulo{
font-family: var(--fonte-titulo);
font-weight: 400;
font-size: var(--texto-xl);
color: var(--cor-primaria);
margin-bottom: var(--espaco-2);
}
.estado-vazio__explicacao{
font-size: var(--texto-sm);
color: var(--cor-texto-secundario);
max-width: 360px;
margin: 0 auto var(--espaco-5);
}
/* ================================================================
UTILITÁRIOS pequenos (evitam CSS repetido nos apps)
================================================================ */
.nj-container{ max-width: 960px; margin: 0 auto; padding: 0 var(--espaco-4); }
.nj-badge{
display: inline-block;
font-size: var(--texto-xs);
font-weight: var(--peso-negrito);
padding: 3px var(--espaco-3);
border-radius: var(--raio-pill);
background: var(--cor-primaria);
color: var(--cor-branco);
}
.nj-badge--em-breve{ background: var(--cor-texto-claro); }
/* ================================================================
COMPONENTE 9 — CASCA: TOPBAR
Barra fixa no topo de toda tela da casca única. Logo à esquerda,
busca ao centro, notificação+perfil à direita. Injetada pelo
casca.js em todo `
`.
================================================================ */
.nj-topbar{
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; gap: var(--espaco-4);
height: 60px;
padding: 0 var(--espaco-4);
background: var(--cor-fundo-card);
border-bottom: 1px solid var(--cor-borda);
}
.nj-topbar__logo{ display:flex; align-items:center; gap: var(--espaco-2); flex: none; text-decoration:none; }
.nj-topbar__logo img{ height: 26px; width:auto; display:block; }
.nj-topbar__logo span{ font-family: var(--fonte-titulo); font-size: var(--texto-lg); color: var(--cor-primaria); font-weight:400; }
.nj-topbar__menu-mobile{
display:none;
border:none; background:transparent; cursor:pointer;
font-size: 22px; color: var(--cor-primaria); padding: var(--espaco-1);
flex: none;
}
.nj-topbar__busca{
flex: 1; max-width: 420px;
display:flex; align-items:center; gap: var(--espaco-2);
background: var(--cor-fundo);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
padding: var(--espaco-2) var(--espaco-3);
color: var(--cor-texto-secundario);
font-size: var(--texto-sm);
}
.nj-topbar__direita{ margin-left:auto; display:flex; align-items:center; gap: var(--espaco-4); flex: none; }
.nj-topbar__sino{
width:36px; height:36px; border-radius: 50%;
display:flex; align-items:center; justify-content:center;
background: var(--cor-fundo); border:1px solid var(--cor-borda);
font-size: var(--texto-lg); cursor:pointer; flex:none;
}
.nj-topbar__perfil{ display:flex; align-items:center; gap: var(--espaco-2); }
.nj-topbar__perfil-nome{ text-align:right; line-height:1.15; }
.nj-topbar__perfil-nome b{ display:block; font-size: var(--texto-sm); color: var(--cor-texto); }
.nj-topbar__perfil-nome small{ font-size: 10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color: var(--cor-texto-secundario); }
.nj-topbar__avatar{
width:36px; height:36px; border-radius:50%;
background: var(--cor-primaria); color:#fff;
display:flex; align-items:center; justify-content:center;
font-weight:700; font-size: var(--texto-sm); flex:none;
}
/* seletor de papel — só existe pra simular visões nesta fase */
.nj-papel-seletor{
display:flex; align-items:center; gap: 6px;
font-size: var(--texto-xs);
background: var(--alerta-atencao-fundo);
border: 1px solid var(--alerta-atencao-borda);
color: var(--alerta-atencao-texto);
border-radius: var(--raio-pill);
padding: 4px 4px 4px 10px;
}
.nj-papel-seletor select{
border:none; background:transparent; color: inherit; font-weight:700;
font-size: var(--texto-xs); cursor:pointer;
}
.nj-papel-seletor select:focus{ outline:none; }
/* ================================================================
COMPONENTE 10 — CASCA: LAYOUT (sidebar + conteúdo)
================================================================ */
.nj-shell{ display:flex; align-items:flex-start; }
.nj-shell__conteudo{ flex:1; min-width:0; padding: var(--espaco-5) var(--espaco-4) var(--espaco-12); }
@media (min-width: 900px){
.nj-shell__conteudo{ padding: var(--espaco-6) var(--espaco-6) var(--espaco-12); }
}
.nj-sidebar{
flex: none;
width: 248px;
background: var(--cor-fundo-card);
border-right: 1px solid var(--cor-borda);
min-height: calc(100vh - 60px);
padding: var(--espaco-4) var(--espaco-3);
position: sticky; top: 60px;
align-self: flex-start;
}
/* no celular a sidebar vira gaveta: some por padrão, ocupa a tela quando aberta */
@media (max-width: 899px){
.nj-topbar__menu-mobile{ display:block; }
.nj-sidebar{
position: fixed; top:60px; left:0; bottom:0; z-index: 39;
width: 84vw; max-width: 320px;
transform: translateX(-100%);
transition: transform .2s ease;
box-shadow: var(--sombra-lg);
overflow-y:auto;
}
.nj-sidebar.nj-sidebar--aberta{ transform: translateX(0); }
.nj-shell__veu{
display:none; position: fixed; inset: 60px 0 0 0; z-index: 38;
background: rgba(14,59,48,.35);
}
.nj-shell__veu.nj-shell__veu--visivel{ display:block; }
}
/* botão/badge que mostra o módulo atual e abre o launcher */
.nj-modulo-switcher{
width:100%;
display:flex; align-items:center; gap: var(--espaco-3);
background: var(--cor-fundo);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
padding: var(--espaco-3);
cursor:pointer;
text-align:left;
margin-bottom: var(--espaco-4);
}
.nj-modulo-switcher__icone{
width:38px; height:38px; border-radius: var(--raio-sm);
display:flex; align-items:center; justify-content:center;
font-size: 18px; color:#fff; flex:none;
}
.nj-modulo-switcher__texto{ flex:1; min-width:0; line-height:1.2; }
.nj-modulo-switcher__texto b{ display:block; font-size: var(--texto-sm); color: var(--cor-texto); }
.nj-modulo-switcher__texto small{ font-size: 11px; color: var(--cor-texto-secundario); }
.nj-modulo-switcher__seta{ color: var(--cor-texto-secundario); flex:none; transition: transform .15s; }
.nj-modulo-switcher[aria-expanded="true"] .nj-modulo-switcher__seta{ transform: rotate(180deg); }
.nj-nav-grupo{ margin-bottom: var(--espaco-2); }
.nj-nav-grupo__titulo{
font-size: 10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
color: var(--cor-texto-claro); padding: var(--espaco-2) var(--espaco-3) 4px;
}
.nj-nav-item{
display:flex; align-items:center; gap: var(--espaco-3);
padding: var(--espaco-2) var(--espaco-3);
border-radius: var(--raio-sm);
font-size: var(--texto-sm); font-weight:500;
color: var(--cor-texto-secundario);
text-decoration:none;
margin-bottom: 2px;
}
.nj-nav-item:hover{ background: var(--cor-fundo); color: var(--cor-texto); }
.nj-nav-item.nj-nav-item--ativo{ background: var(--cor-primaria); color:#fff; font-weight:700; }
.nj-nav-item__icone{ width:18px; text-align:center; flex:none; }
/* ================================================================
COMPONENTE 11 — CASCA: LAUNCHER DE MÓDULOS
Painel flutuante que abre por cima da tela ao clicar no
nj-modulo-switcher, com um véu escurecendo o fundo.
================================================================ */
.nj-launcher-veu{
display:none;
position: fixed; inset:0; z-index: 60;
background: rgba(14,59,48,.32);
}
.nj-launcher-veu.nj-launcher-veu--visivel{ display:block; }
.nj-launcher-painel{
position: fixed; z-index: 61;
top: 70px; left: var(--espaco-4);
width: min(420px, calc(100vw - 32px));
background: var(--cor-fundo-card);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-lg);
box-shadow: var(--sombra-lg);
padding: var(--espaco-4);
max-height: 78vh; overflow-y:auto;
}
.nj-launcher-painel__titulo{
font-size: 10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
color: var(--cor-texto-secundario); margin-bottom: var(--espaco-3);
}
.nj-launcher-grade{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-3); }
.nj-launcher-card{
display:block; text-decoration:none;
border: 1.5px solid var(--cor-borda);
border-radius: var(--raio-md);
padding: var(--espaco-3);
background: var(--cor-branco);
}
.nj-launcher-card:hover{ border-color: var(--cor-primaria); }
.nj-launcher-card.nj-launcher-card--atual{ border-color: var(--cor-primaria); background: var(--cor-fundo); }
.nj-launcher-card__icone{
width:34px; height:34px; border-radius: var(--raio-sm);
display:flex; align-items:center; justify-content:center;
font-size:16px; color:#fff; margin-bottom: var(--espaco-2);
}
.nj-launcher-card__nome{ font-size: var(--texto-sm); font-weight:700; color: var(--cor-texto); }
.nj-launcher-card__sub{ font-size: 11px; color: var(--cor-texto-secundario); margin-top:1px; }
.nj-launcher-painel__versao{ text-align:center; font-size:11px; color: var(--cor-texto-claro); margin-top: var(--espaco-3); }
/* ================================================================
COMPONENTE 12 — CASCA: HOME (saudação, pendências, acesso rápido, atividades)
================================================================ */
.nj-saudacao__data{ font-size: var(--texto-sm); color: var(--cor-texto-secundario); margin-bottom: var(--espaco-1); }
.nj-saudacao__titulo{ font-family: var(--fonte-titulo); font-weight:400; font-size: var(--texto-3xl); color: var(--cor-primaria); }
.nj-saudacao__sub{ color: var(--cor-texto-secundario); margin-top: var(--espaco-1); margin-bottom: var(--espaco-6); }
.nj-grade-3{ display:grid; grid-template-columns: 1fr; gap: var(--espaco-4); }
@media (min-width: 720px){ .nj-grade-3{ grid-template-columns: repeat(3,1fr); } }
.nj-grade-2{ display:grid; grid-template-columns: 1fr; gap: var(--espaco-4); }
@media (min-width: 720px){ .nj-grade-2{ grid-template-columns: repeat(2,1fr); } }
/* card de pendência: ícone + título + explicação + botão de ação —
é o "estado vazio", só que pra uma coisa que precisa de ação sua */
.nj-pendencia-card{
background: var(--cor-fundo-card);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
padding: var(--espaco-4);
display:flex; flex-direction:column; gap: var(--espaco-2);
}
.nj-pendencia-card__icone{ font-size: 22px; }
.nj-pendencia-card__titulo{ font-weight:700; color: var(--cor-texto); font-size: var(--texto-base); }
.nj-pendencia-card__texto{ font-size: var(--texto-sm); color: var(--cor-texto-secundario); flex:1; }
/* acesso rápido: ícone + título + descrição de 1 linha + seta */
.nj-quick-card{
display:flex; align-items:center; gap: var(--espaco-3);
background: var(--cor-fundo-card);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
padding: var(--espaco-3) var(--espaco-4);
text-decoration:none;
}
.nj-quick-card:hover{ border-color: var(--cor-primaria); }
.nj-quick-card__icone{
width:40px; height:40px; border-radius: var(--raio-sm); flex:none;
display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff;
}
.nj-quick-card__texto{ flex:1; min-width:0; }
.nj-quick-card__titulo{ font-weight:700; color: var(--cor-texto); font-size: var(--texto-sm); }
.nj-quick-card__sub{ font-size: 12px; color: var(--cor-texto-secundario); }
.nj-quick-card__seta{ color: var(--cor-texto-claro); flex:none; }
/* feed de atividades recentes */
.nj-atividade-item{ display:flex; gap: var(--espaco-3); padding: var(--espaco-3) 0; border-bottom: 1px solid var(--cor-borda); }
.nj-atividade-item:last-child{ border-bottom:none; }
.nj-atividade-item__ponto{ width:8px; height:8px; border-radius:50%; background: var(--cor-primaria); margin-top:6px; flex:none; }
.nj-atividade-item__texto{ font-size: var(--texto-sm); color: var(--cor-texto); }
.nj-atividade-item__quando{ font-size: 11.5px; color: var(--cor-texto-claro); margin-top:1px; }
/* ================================================================
COMPONENTE 13 — CASCA: GESTÃO UNIFICADA (/gestao)
================================================================ */
.nj-gestao-grupo{ margin-bottom: var(--espaco-8); }
.nj-gestao-grupo__cabecalho{ display:flex; align-items:center; gap: var(--espaco-2); margin-bottom: var(--espaco-3); }
.nj-gestao-grupo__badge{ width:28px; height:28px; border-radius: var(--raio-sm); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }
.nj-gestao-lista{ display:flex; flex-direction:column; gap: var(--espaco-2); }
.nj-gestao-item{
display:flex; align-items:center; gap: var(--espaco-3);
background: var(--cor-fundo-card); border:1px solid var(--cor-borda); border-radius: var(--raio-sm);
padding: var(--espaco-3) var(--espaco-4); text-decoration:none;
}
.nj-gestao-item:hover{ border-color: var(--cor-primaria); }
.nj-gestao-item__nome{ flex:1; font-size: var(--texto-sm); font-weight:600; color: var(--cor-texto); }
.nj-gestao-item__rota{ font-size: 11.5px; color: var(--cor-texto-claro); font-family: monospace; }
/* ================================================================
COMPONENTE 14 — SELETOR DE PERÍODO
Atalhos rápidos (Hoje, Ontem, ...) + campo de data/hora customizado.
================================================================ */
.nj-periodo{
display:flex; flex-wrap:wrap; align-items:center; gap: var(--espaco-2);
margin-bottom: var(--espaco-6);
}
.nj-periodo__atalho{
border: 1.5px solid var(--cor-borda);
background: var(--cor-fundo-card);
color: var(--cor-texto-secundario);
font-size: var(--texto-sm); font-weight:600;
padding: var(--espaco-2) var(--espaco-3);
border-radius: var(--raio-pill);
cursor:pointer;
}
.nj-periodo__atalho:hover{ border-color: var(--cor-primaria); }
.nj-periodo__atalho.nj-periodo__atalho--ativo{ background: var(--cor-primaria); border-color: var(--cor-primaria); color:#fff; }
.nj-periodo__custom{
display:flex; align-items:center; gap: var(--espaco-2);
border: 1.5px solid var(--cor-borda);
background: var(--cor-fundo-card);
border-radius: var(--raio-pill);
padding: 4px var(--espaco-2) 4px 4px;
font-size: var(--texto-xs);
}
.nj-periodo__custom input[type="datetime-local"]{
border:none; background:transparent; font-family: var(--fonte-corpo);
font-size: 12.5px; color: var(--cor-texto); padding: 4px;
}
.nj-periodo__custom span{ color: var(--cor-texto-claro); }
.nj-periodo__custom button{
border:none; background: var(--cor-acento); color:#fff; font-weight:700;
font-size: var(--texto-xs); padding: 6px 12px; border-radius: var(--raio-pill); cursor:pointer;
}
.nj-periodo__label-atual{ font-size: var(--texto-xs); color: var(--cor-texto-claro); width:100%; margin-top:-4px; }
/* ================================================================
COMPONENTE 15 — CARDS DE INSIGHT (boa notícia / atenção / oportunidade)
================================================================ */
.nj-insight{
border: 1.5px solid; border-radius: var(--raio-md);
background: var(--cor-fundo-card);
padding: var(--espaco-4);
border-top-width: 4px;
}
.nj-insight__rotulo{
display:inline-flex; align-items:center; gap:5px;
font-size: 11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
margin-bottom: var(--espaco-2);
}
.nj-insight__texto{ font-size: var(--texto-sm); color: var(--cor-texto); font-weight:600; margin-bottom:4px; }
.nj-insight__numero{ font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.nj-insight--boa{ border-color: var(--alerta-info-borda); border-top-color: var(--modulo-verde); }
.nj-insight--boa .nj-insight__rotulo{ color: var(--modulo-verde); }
.nj-insight--atencao{ border-color: var(--alerta-atencao-borda); border-top-color: var(--alerta-atencao-texto); }
.nj-insight--atencao .nj-insight__rotulo{ color: var(--alerta-atencao-texto); }
.nj-insight--oportunidade{ border-color: var(--alerta-atrasado-borda); border-top-color: var(--cor-acento); }
.nj-insight--oportunidade .nj-insight__rotulo{ color: var(--cor-acento); }
/* ================================================================
COMPONENTE 16 — CARD DE GRÁFICO
Título (+ tabs de filtro opcionais) + área do gráfico (canvas).
================================================================ */
.nj-grafico-card{
background: var(--cor-fundo-card);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
padding: var(--espaco-4);
margin-bottom: var(--espaco-4);
}
.nj-grafico-card__cabecalho{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--espaco-3);
margin-bottom: var(--espaco-4);
}
.nj-grafico-card__titulo{ font-weight:700; color: var(--cor-texto); font-size: var(--texto-base); }
.nj-grafico-card__area{ position:relative; height: 260px; }
.nj-grafico-card__area--curta{ height: 200px; }
.nj-tabs-canal{ display:flex; gap:6px; flex-wrap:wrap; }
.nj-tabs-canal button{
border: 1.5px solid var(--cor-borda); background: var(--cor-fundo);
color: var(--cor-texto-secundario); font-size: 12px; font-weight:700;
padding: 5px 11px; border-radius: var(--raio-pill); cursor:pointer;
}
.nj-tabs-canal button.nj-tabs-canal__ativo{ background: var(--cor-primaria); border-color: var(--cor-primaria); color:#fff; }
/* ================================================================
COMPONENTE 17 — RANKING (garçons, produtos)
================================================================ */
.nj-ranking-lista{ display:flex; flex-direction:column; }
.nj-ranking-item{
display:flex; align-items:center; gap: var(--espaco-3);
padding: var(--espaco-3) 0; border-bottom: 1px solid var(--cor-borda);
}
.nj-ranking-item:last-child{ border-bottom:none; }
.nj-ranking-item__pos{
width:26px; height:26px; border-radius:50%; flex:none;
background: var(--cor-primaria); color:#fff; font-size:12px; font-weight:800;
display:flex; align-items:center; justify-content:center;
}
.nj-ranking-item__pos--1{ background: var(--cor-acento); }
.nj-ranking-item__nome{ flex:1; min-width:0; font-weight:600; font-size: var(--texto-sm); color: var(--cor-texto); }
.nj-ranking-item__sub{ font-size: 11.5px; color: var(--cor-texto-secundario); }
.nj-ranking-item__valor{ font-weight:800; color: var(--cor-primaria); font-size: var(--texto-sm); flex:none; }
/* ================================================================
COMPONENTE 18 — ESTADOS DE CARREGAMENTO / ERRO DE DADO REAL
================================================================ */
.nj-carregando{
display:flex; align-items:center; gap: var(--espaco-3);
color: var(--cor-texto-secundario); font-size: var(--texto-sm);
padding: var(--espaco-6); justify-content:center;
}
.nj-spin{
width:18px; height:18px; border-radius:50%;
border: 2.5px solid var(--cor-borda); border-top-color: var(--cor-primaria);
animation: nj-girar .7s linear infinite; flex:none;
}
@keyframes nj-girar{ to{ transform: rotate(360deg); } }
.nj-erro-dado{
background: var(--alerta-critico-fundo); border:1.5px solid var(--alerta-critico-borda);
color: var(--alerta-critico-texto); border-radius: var(--raio-md);
padding: var(--espaco-4); font-size: var(--texto-sm);
}