/* B. Jud — componentes do painel · v1 · 05/11/2026
   Depende de tokens.css (carregue antes). Sem framework. Prefixo: bj-
   Regras: uma ação primária por tela; selo sempre com texto; nada de borda colorida só à esquerda. */

/* ---------- Base ---------- */
.bj, .bj *, .bj *::before, .bj *::after { box-sizing: border-box; }
.bj {
  font-family: var(--font-sans); font-size: 14px; line-height: 20px;
  color: var(--texto); background: var(--fundo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.bj :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.bj a { color: var(--azul); text-underline-offset: 2px; }
.bj a:hover { color: var(--azul-press); }
.bj-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bj-icone { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bj-sobretitulo { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.bj-visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.bj-header {
  height: var(--header-h); background: var(--marinho); color: var(--sobre-escuro);
  display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6);
}
.bj-header__marca { display: flex; align-items: center; flex: none; }
.bj-header__marca img, .bj-header__marca svg { height: 24px; width: auto; display: block; }
.bj-header__escritorio {
  color: var(--sobre-escuro-2); font-size: 13px; padding-left: var(--space-4);
  border-left: 1px solid rgba(255, 255, 255, 0.24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bj-header__nav { margin-left: auto; display: flex; gap: var(--space-1); }
.bj-header__nav a {
  color: var(--sobre-escuro-2); text-decoration: none; font-weight: 500;
  min-height: 40px; padding: 0 var(--space-3); display: flex; align-items: center; border-radius: var(--radius-md); white-space: nowrap;
}
.bj-header__nav a:hover { color: var(--sobre-escuro); background: rgba(255, 255, 255, 0.08); }
.bj-header__nav a[aria-current="page"] { color: var(--sobre-escuro); background: rgba(255, 255, 255, 0.14); }
.bj-header__usuario {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--marinho-bdi); color: var(--sobre-escuro); font-size: 12px; font-weight: 600;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.32);
}
@media (max-width: 720px) {
  .bj-header { padding: 0 var(--space-4); gap: var(--space-3); }
  .bj-header__escritorio, .bj-header__nav { display: none; }
  .bj-header__usuario { margin-left: auto; }
}

/* ---------- Cartão de contador ---------- */
.bj-contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.bj-contador {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-md);
  padding: var(--space-4); color: var(--texto); text-decoration: none;
}
a.bj-contador:hover { border-color: var(--linha-controle); }
.bj-contador__rotulo { font-size: 13px; line-height: 18px; color: var(--texto-2); font-weight: 500; }
.bj-contador__numero { font-size: 28px; line-height: 32px; font-weight: 600; color: var(--marinho); font-variant-numeric: tabular-nums; }
.bj-contador__nota { font-size: 12px; line-height: 16px; color: var(--texto-3); }
.bj-contador--urgente { background: var(--urgente-fundo); border-color: var(--urgente-linha); }
.bj-contador--urgente .bj-contador__rotulo, .bj-contador--urgente .bj-contador__numero, .bj-contador--urgente .bj-contador__nota { color: var(--urgente-tinta); }
.bj-contador--zero .bj-contador__numero { color: var(--texto-3); }

/* ---------- Chip de filtro ---------- */
.bj-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bj-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--controle-h-compacto); padding: 0 var(--space-3);
  background: var(--superficie); color: var(--texto); border: 1px solid var(--linha-controle); border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer;
}
.bj-chip:hover { background: var(--azul-claro); }
.bj-chip__n { font-family: var(--font-mono); font-size: 12px; font-weight: 500; padding: 3px 6px; border-radius: var(--radius-sm); background: var(--superficie-2); color: var(--texto-2); }
.bj-chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--sobre-escuro); }
.bj-chip[aria-pressed="true"] .bj-chip__n { background: rgba(255, 255, 255, 0.2); color: var(--sobre-escuro); }
.bj-chip[aria-pressed="true"]:hover { background: var(--azul-press); }
@media (pointer: coarse) { .bj-chip { min-height: var(--controle-h); } }

/* ---------- Selo de estado ---------- */
.bj-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.bj-selo {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap;
}
.bj-selo .bj-icone { width: 12px; height: 12px; stroke-width: 2.25; }
.bj-selo--urgente   { background: var(--urgente); color: var(--sobre-escuro); }
.bj-selo--cuidadosa { background: var(--cuidadosa-fundo); color: var(--cuidadosa); }
.bj-selo--simples   { background: var(--superficie); color: var(--simples); border-color: var(--linha-controle); }
.bj-selo--sensivel  { background: var(--sensivel-fundo); color: var(--sensivel); border-color: var(--sensivel-linha); }
.bj-selo--cumprida  { background: var(--cumprida-fundo); color: var(--cumprida); }

/* ---------- Item da lista ---------- */
.bj-lista { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.bj-item {
  display: block; position: relative; background: var(--superficie); color: var(--texto); text-decoration: none;
  border: 1px solid var(--linha); border-radius: var(--radius-md); padding: var(--space-4);
}
.bj a.bj-item, .bj a.bj-item:hover { color: var(--texto); }
.bj-item:hover { border-color: var(--linha-controle); }
.bj-item[aria-current="true"] { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul); }
.bj-item__topo { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--texto-3); }
.bj-item__titulo { font-size: 16px; line-height: 22px; font-weight: 600; margin: var(--space-1) 0 2px; color: var(--texto); }
.bj-item__processo { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--texto-2); }
.bj-item__cliente { font-size: 13px; line-height: 18px; color: var(--texto-2); }
.bj-item__prazos { display: flex; flex-wrap: wrap; gap: 2px var(--space-4); margin-top: var(--space-2); font-size: 13px; line-height: 18px; color: var(--texto-2); }
.bj-item__prazos strong { color: var(--texto); font-weight: 600; }
.bj-item__selos { margin-top: 10px; }
.bj-prazo--hoje strong, .bj-prazo--hoje { color: var(--urgente); }
@media (max-width: 520px) { .bj-item { padding: var(--space-3); } }

/* ---------- Bloco "Em 5 linhas" e "Memória do cálculo" (voz do produto) ---------- */
.bj-cinco, .bj-memoria {
  background: var(--pergaminho); border: 1px solid var(--pergaminho-linha); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); color: var(--pergaminho-tinta);
}
.bj-cinco .bj-sobretitulo, .bj-memoria .bj-sobretitulo { color: var(--pergaminho-forte); }
.bj-cinco__titulo { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--texto); margin: 2px 0 var(--space-2); }
.bj-cinco ol { margin: 0; padding-left: 22px; font-size: 15px; line-height: 23px; }
.bj-cinco li + li { margin-top: 2px; }
.bj-cinco li::marker { color: var(--pergaminho-forte); font-weight: 600; }
.bj-memoria p { margin: var(--space-2) 0 0; font-size: 14px; line-height: 21px; }
.bj-memoria .bj-mono { font-size: 13px; }
.bj-memoria__nota { font-size: 13px; color: var(--pergaminho-forte); }
.bj-memoria p.bj-sobretitulo { margin: 0; }

/* ---------- Grade rótulo/valor ---------- */
.bj-grade { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; }
.bj-grade dt { font-size: 13px; line-height: 20px; color: var(--texto-2); }
.bj-grade dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--texto); min-width: 0; overflow-wrap: anywhere; }
.bj-grade dd .bj-mono { font-size: 13px; }
@media (max-width: 520px) {
  .bj-grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bj-grade dd { margin-bottom: var(--space-3); }
}

/* ---------- Quadro "OPINIÃO — para o advogado decidir" ---------- */
.bj-opiniao {
  background: var(--opiniao-fundo); border: 2px solid var(--opiniao-linha); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); color: var(--texto);
}
.bj-opiniao__titulo { margin: 0 0 var(--space-2); font-size: 13px; line-height: 18px; color: var(--marinho); font-weight: 400; }
.bj-opiniao__titulo b { font-weight: 600; letter-spacing: 0.08em; }
.bj-opiniao p { margin: 0; font-size: 15px; line-height: 23px; }
.bj-opiniao p + p { margin-top: var(--space-2); }

/* ---------- Atividades em duas etapas ---------- */
.bj-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.bj-etapa {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.bj-etapa__n {
  width: 28px; height: 28px; border-radius: 50%; background: var(--marinho); color: var(--sobre-escuro);
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
}
.bj-etapa__titulo { font-weight: 600; line-height: 20px; }
.bj-etapa__desc { font-size: 13px; line-height: 18px; color: var(--texto-2); margin-top: 2px; }
.bj-etapa__data { font-family: var(--font-mono); font-size: 13px; line-height: 20px; text-align: right; white-space: nowrap; }
.bj-etapa__data small { display: block; font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--texto-3); }
@media (max-width: 520px) {
  .bj-etapa { grid-template-columns: 28px minmax(0, 1fr); }
  .bj-etapa__data { grid-column: 2; text-align: left; }
}

/* ---------- Bloco "copiar para o Legal One" ---------- */
.bj-legalone { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--radius-md); overflow: hidden; }
.bj-legalone__topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--linha); background: var(--superficie);
}
.bj-legalone__topo .bj-sobretitulo { color: var(--texto-2); }
.bj-legalone pre {
  margin: 0; padding: var(--space-3) var(--space-4); white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--texto);
}
.bj-legalone__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--linha); background: var(--superficie); }
.bj-legalone__nota { margin: 0; padding: 0 var(--space-4) var(--space-3); background: var(--superficie); font-size: 12px; line-height: 16px; color: var(--texto-3); }

/* ---------- Botões ---------- */
.bj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--controle-h); padding: 0 18px; border-radius: var(--radius-md); border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.bj .bj-btn { text-decoration: none; }
.bj-btn--primario { background: var(--azul); color: var(--sobre-escuro); }
.bj .bj-btn--primario, .bj .bj-btn--primario:hover { color: var(--sobre-escuro); }
.bj-btn--primario:hover { background: var(--azul-press); }
.bj-btn--secundario { background: var(--superficie); color: var(--texto); border-color: var(--linha-controle); }
.bj .bj-btn--secundario, .bj .bj-btn--secundario:hover { color: var(--texto); }
.bj-btn--secundario:hover { background: var(--azul-claro); }
.bj-btn--alerta { background: var(--urgente); color: var(--sobre-escuro); }
.bj .bj-btn--alerta, .bj .bj-btn--alerta:hover { color: var(--sobre-escuro); }
.bj-btn--alerta:hover { background: var(--urgente-tinta); }
.bj-btn--pequeno { min-height: 36px; padding: 0 var(--space-3); font-size: 13px; }
.bj-btn--bloco { width: 100%; }
@media (pointer: coarse) { .bj-btn--pequeno { min-height: var(--controle-h); } }
@media (prefers-reduced-motion: reduce) { .bj-btn { transition: none; } }

/* ---------- Faixa de aviso ---------- */
.bj-aviso {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border: 1px solid; border-radius: var(--radius-md); font-size: 14px; line-height: 20px;
}
.bj-aviso .bj-icone { margin-top: 2px; }
.bj-aviso p { margin: 0; }
.bj-aviso--atencao { background: var(--urgente-fundo); border-color: var(--urgente-linha); color: var(--urgente-tinta); }
.bj-aviso--info    { background: var(--azul-claro); border-color: var(--opiniao-linha); color: var(--cuidadosa); }
.bj-aviso--neutro  { background: var(--superficie-2); border-color: var(--linha); color: var(--texto-2); }

/* ---------- Estado vazio ---------- */
.bj-vazio {
  text-align: center; padding: var(--space-12) var(--space-6);
  background: var(--superficie); border: 1px dashed var(--linha-controle); border-radius: var(--radius-lg);
}
.bj-vazio .bj-icone { width: 32px; height: 32px; stroke-width: 1.75; color: var(--texto-3); }
.bj-vazio__titulo { margin: var(--space-3) 0 var(--space-1); font-size: 16px; line-height: 22px; font-weight: 600; }
.bj-vazio__texto { margin: 0 auto var(--space-5); max-width: 380px; color: var(--texto-2); }

/* ---------- Login por link mágico ---------- */
.bj-login {
  width: 100%; max-width: 400px; margin: 0 auto; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6);
}
.bj-login__marca { height: 40px; width: auto; display: block; margin-bottom: var(--space-6); }
.bj-login h1 { margin: 0 0 var(--space-2); font-size: 20px; line-height: 26px; font-weight: 600; }
.bj-login__texto { margin: 0 0 var(--space-5); color: var(--texto-2); }
.bj-login__rodape { margin: var(--space-4) 0 0; font-size: 12px; line-height: 16px; color: var(--texto-3); }
.bj-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.bj-campo label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--texto-2); }
.bj-campo input {
  min-height: var(--controle-h); padding: 0 var(--space-3); border: 1px solid var(--linha-controle); border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 15px; color: var(--texto); background: var(--superficie);
}
.bj-campo input::placeholder { color: var(--texto-3); }
.bj-campo input:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--foco); }
.bj-campo__erro { font-size: 13px; color: var(--urgente); }

/* ---------- Composição: lista + detalhe ---------- */
.bj-app { display: grid; grid-template-columns: var(--lista-largura) minmax(0, 1fr); min-height: 640px; }
.bj-app__lista { padding: var(--space-4); border-right: 1px solid var(--linha); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.bj-app__detalhe { background: var(--superficie); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.bj-detalhe__cabeca { display: flex; flex-direction: column; gap: var(--space-2); }
.bj-detalhe__cabeca h1 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; }
.bj-detalhe__secao h2 { margin: 0 0 var(--space-2); font-size: 16px; line-height: 22px; font-weight: 600; }
.bj-detalhe__voltar { display: none; }
.bj-detalhe__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 860px) {
  .bj-app { grid-template-columns: minmax(0, 1fr); }
  .bj-app__lista { border-right: 0; border-bottom: 1px solid var(--linha); }
  .bj-app__detalhe { padding: var(--space-4); }
  .bj-detalhe__voltar { display: inline-flex; }
  .bj-detalhe__acoes .bj-btn { flex: 1 1 100%; }
}

/* =====================================================================
   v1.1 · 05/11/2026 — páginas, cartão de seção, tabela, risco, gráfico,
   estados de celular do painel
   ===================================================================== */

/* ---------- Página e cabeçalho de página ---------- */
.bj-pagina { max-width: 1200px; margin: 0 auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.bj-pagina__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.bj-pagina__cabeca h1 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; color: var(--texto); letter-spacing: -0.01em; }
.bj-pagina__sub { margin: 2px 0 0; color: var(--texto-2); }
.bj-pagina__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bj-grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .bj-grade-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .bj-pagina { padding: var(--space-4); gap: var(--space-4); }
  .bj-pagina__cabeca h1 { font-size: 20px; line-height: 26px; }
  .bj-pagina__acoes, .bj-pagina__acoes .bj-btn { width: 100%; }
}

/* ---------- Cartão de seção ---------- */
.bj-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-md); padding: var(--space-5); min-width: 0; }
.bj-cartao__cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-4); }
.bj-cartao__cabeca h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--texto); }
.bj-cartao__cabeca p { margin: 0; font-size: 13px; line-height: 18px; color: var(--texto-3); }
.bj-cartao > * + * { margin-top: var(--space-3); }
.bj-cartao > .bj-cartao__cabeca + * { margin-top: 0; }
.bj-cartao--tabela { padding: 0; overflow: hidden; }
.bj-cartao--tabela .bj-cartao__cabeca { padding: var(--space-4) var(--space-5) 0; margin-bottom: var(--space-3); }
@media (max-width: 720px) { .bj-cartao { padding: var(--space-4); } }

/* ---------- Tabela do painel (vira cartões abaixo de 720 px) ---------- */
.bj-tabela { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; color: var(--texto); }
.bj-tabela th {
  text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--texto-2);
  background: var(--superficie-2); padding: 10px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.bj-tabela td { padding: 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.bj-tabela th:first-child, .bj-tabela td:first-child { padding-left: var(--space-5); }
.bj-tabela th:last-child, .bj-tabela td:last-child { padding-right: var(--space-5); }
.bj-tabela tbody tr:last-child td { border-bottom: 0; }
.bj-tabela tbody tr:hover { background: var(--fundo); }
.bj-tabela__forte { font-weight: 600; }
.bj-tabela__sub { display: block; font-size: 13px; line-height: 18px; color: var(--texto-2); }
.bj-tabela .bj-mono { font-size: 13px; }
.bj-tabela__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bj-tabela__acao { white-space: nowrap; }
@media (max-width: 720px) {
  .bj-cartao--tabela { background: transparent; border: 0; overflow: visible; }
  .bj-cartao--tabela .bj-cartao__cabeca { padding: 0; }
  .bj-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bj-tabela, .bj-tabela tbody, .bj-tabela tr, .bj-tabela td { display: block; width: 100%; }
  .bj-tabela tr { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); }
  .bj-tabela tbody tr:hover { background: var(--superficie); }
  .bj-tabela td, .bj-tabela td:first-child, .bj-tabela td:last-child { border: 0; padding: 4px 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-2); text-align: left; }
  .bj-tabela td > .bj-selo, .bj-tabela td > .bj-risco { justify-self: start; }
  .bj-tabela .bj-mono { font-size: 12px; }
  .bj-tabela td::before { content: attr(data-rotulo); font-size: 12px; line-height: 20px; font-weight: 600; color: var(--texto-3); }
  .bj-tabela td.bj-tabela__topo { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-2); }
  .bj-tabela td.bj-tabela__topo::before { display: none; }
  .bj-tabela__acao { white-space: normal; }
  .bj-tabela__acao .bj-btn { width: 100%; }
}

/* ---------- Medidor de risco (prescrição) ---------- */
.bj-risco { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; color: var(--texto-2); }
.bj-risco__barras { display: inline-flex; align-items: flex-end; gap: 2px; }
.bj-risco__barras i { display: block; width: 5px; border-radius: 1px; background: var(--linha); }
.bj-risco__barras i:nth-child(1) { height: 6px; }
.bj-risco__barras i:nth-child(2) { height: 10px; }
.bj-risco__barras i:nth-child(3) { height: 14px; }
.bj-risco--baixo .bj-risco__barras i:nth-child(1) { background: var(--texto-3); }
.bj-risco--medio { color: var(--texto); }
.bj-risco--medio .bj-risco__barras i:nth-child(-n+2) { background: var(--marinho); }
.bj-risco--alto { color: var(--urgente); }
.bj-risco--alto .bj-risco__barras i { background: var(--urgente); }
.bj-risco__nota { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--texto-3); white-space: normal; margin-top: 2px; }

/* ---------- Gráfico de barras (série única) ---------- */
.bj-grafico { position: relative; }
.bj-grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.bj-grafico__estreito { display: none !important; }
@media (max-width: 560px) { .bj-grafico__largo { display: none !important; } .bj-grafico__estreito { display: block !important; } }
.bj-grafico .grade { stroke: var(--dado-grade); stroke-width: 1; shape-rendering: crispEdges; }
.bj-grafico .base { stroke: var(--linha-controle); stroke-width: 1; shape-rendering: crispEdges; }
.bj-grafico .eixo { font-family: var(--font-sans); font-size: 12px; fill: var(--texto-3); }
.bj-grafico .barra { fill: var(--dado-1); }
.bj-grafico .alvo { fill: transparent; cursor: default; }
.bj-grafico g.ativa .barra { fill: var(--dado-1-forte); }
.bj-grafico .rotulo { font-family: var(--font-sans); font-size: 12px; font-weight: 600; fill: var(--texto); }
.bj-grafico__dica {
  position: absolute; pointer-events: none; z-index: 2; opacity: 0; transform: translate(-50%, calc(-100% - 8px));
  background: var(--texto); color: var(--sobre-escuro); font-size: 12px; line-height: 16px; padding: 6px 8px; border-radius: var(--radius-sm); white-space: nowrap;
}
.bj-grafico__dica strong { font-weight: 600; }
.bj-grafico__dica.visivel { opacity: 1; }
.bj-grafico details { margin-top: var(--space-2); }
.bj-grafico summary { font-size: 13px; color: var(--azul); cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; }
.bj-grafico details .bj-tabela { margin-top: var(--space-2); }

/* ---------- Lista simples (linhas com divisória) ---------- */
.bj-linhas { list-style: none; margin: 0; padding: 0; }
.bj-linhas li { padding: var(--space-3) 0; border-bottom: 1px solid var(--linha); }
.bj-linhas li:first-child { padding-top: 0; }
.bj-linhas li:last-child { border-bottom: 0; padding-bottom: 0; }
.bj-linhas__titulo { font-weight: 600; }
.bj-linhas__meta { font-size: 13px; line-height: 18px; color: var(--texto-2); }

/* ---------- Painel no celular: lista OU detalhe ---------- */
@media (max-width: 860px) {
  .bj-app[data-vista="lista"] .bj-app__detalhe { display: none; }
  .bj-app[data-vista="detalhe"] .bj-app__lista { display: none; }
  .bj-app[data-vista="detalhe"] .bj-app__detalhe { min-height: calc(100vh - var(--header-h)); }
}

/* ---------- Página de entrada (login) ---------- */
.bj-entrada { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-8) var(--space-4); background: var(--fundo); }
.bj-entrada__rodape { font-size: 12px; line-height: 16px; color: var(--texto-3); text-align: center; }