/* Endeavor Trace — estilo da casca (v2, "mais clean").
   Marca: skill endeavor-identidade (references/identidade-visual.md).
   Base preto/branco da marca; teal #09E1CD so como acento (ativo, foco, ligado, ▲).
   Inter nos pesos Light/Regular/Medium.
   Cinzas de interface e cores de estado NAO constam do material de marca
   capturado: foram derivados do preto da marca. [A CONFIRMAR] com a area de marca. */

:root {
  /* marca */
  --teal: #09E1CD;
  --preto: #01000F;
  --branco: #FFFFFF;
  --tint: #DCFBFA;
  --azul: #273AE9;
  --roxo: #AC27F4;
  --laranja: #FF784D;
  --amarelo: #FFCF53;

  /* interface, derivados do preto da marca [A CONFIRMAR] */
  --texto: var(--preto);
  --texto-2: #55546A;
  --texto-3: #8F8EA0;
  --linha: #EEEEF3;
  --linha-forte: #DEDEE6;
  --realce: #FAFAFC;
  --erro: #B4380F;
  --erro-fundo: #FFF3EE;
  --alerta: #8A6400;
  --alerta-fundo: #FFF8E6;
  --ok: #047A70;

  --raio: 14px;
  --raio-pq: 10px;
  --pilula: 999px;
  --lateral: 232px;
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --suave: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--fonte);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 400; }
h1 { font-size: 30px; font-weight: 300; letter-spacing: -.025em; }
h2 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
h3 { font-size: 14px; font-weight: 500; }
p { margin: 0; }
a { color: inherit; }
strong { font-weight: 500; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--tint); }

/* ---------- carregamento ---------- */
.carregando-tela { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 28px; }
.logo-carregando { width: 132px; }
.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--linha); border-top-color: var(--teal);
  animation: girar .8s linear infinite;
}
.spinner.pq { width: 14px; height: 14px; border-width: 2px; border-color: rgba(255,255,255,.35); border-top-color: currentColor; }
.botao.secundario .spinner.pq, .botao.fantasma .spinner.pq { border-color: var(--linha); border-top-color: var(--texto); }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } * { transition: none !important; } }

/* ---------- assinatura: wordmark + produto, no padrao das submarcas ---------- */
.assinatura { display: grid; gap: 6px; justify-items: start; text-decoration: none; }
.assinatura img { width: 112px; display: block; }
.assinatura .produto {
  font-size: 10.5px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
  color: var(--texto); display: inline-flex; align-items: center; gap: 6px; padding-left: 2px;
}
.assinatura .produto::before {
  content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 7px solid var(--teal);
}

/* ---------- login ---------- */
.login {
  min-height: 100vh; display: grid; grid-template-columns: 1fr minmax(360px, 440px);
  gap: clamp(32px, 8vw, 140px); padding: clamp(28px, 5vw, 64px) clamp(24px, 7vw, 120px);
  align-items: center; max-width: 1360px; margin: 0 auto;
}
.login-marca { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.login-marca .manifesto {
  font-size: clamp(34px, 4.4vw, 58px); font-weight: 300; line-height: 1.08; letter-spacing: -.035em; max-width: 13ch;
}
.login-marca .manifesto em {
  font-style: normal; font-weight: 400;
  background: linear-gradient(transparent 78%, var(--teal) 78%, var(--teal) 90%, transparent 90%);
}
.login-marca .rodape { color: var(--texto-3); font-size: 12px; }
.login-form { display: grid; }
.login-caixa { width: 100%; display: grid; gap: 28px; }
.login-caixa .sub { color: var(--texto-2); margin-top: 8px; }
.divisor { display: flex; align-items: center; gap: 14px; color: var(--texto-3); font-size: 12px; }
.divisor::before, .divisor::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.botao-google { width: 100%; }
.botao-google svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; align-items: start; gap: 40px; }
  .login-marca { gap: 32px; }
  .login-marca .rodape { display: none; }
}

/* ---------- formulario ---------- */
.campo { display: grid; gap: 6px; }
.campo label { font-size: 12.5px; font-weight: 500; color: var(--texto-2); }
.campo .ajuda { font-size: 12.5px; color: var(--texto-3); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio-pq);
  background: var(--branco); transition: border-color .15s, box-shadow .15s;
}
.campo input::placeholder, .campo textarea::placeholder { color: #B3B2C0; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #C9C8D4; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--preto); outline: none; box-shadow: 0 0 0 3px rgba(9, 225, 205, .22);
}
.campo input[aria-invalid="true"] { border-color: var(--laranja); }
.linha-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: var(--pilula); border: 1px solid transparent;
  font-weight: 500; cursor: pointer; background: var(--preto); color: var(--branco);
  text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.botao:hover { background: #262538; }
.botao.secundario { background: var(--branco); color: var(--preto); border-color: var(--linha-forte); }
.botao.secundario:hover { border-color: var(--preto); background: var(--branco); }
.botao.perigo { background: transparent; color: var(--erro); border-color: transparent; padding: 0 12px; }
.botao.perigo:hover { background: var(--erro-fundo); }
.botao.fantasma { background: transparent; color: var(--texto-2); padding: 0 12px; }
.botao.fantasma:hover { background: var(--realce); color: var(--preto); }
.botao.pq { height: 32px; padding: 0 14px; font-size: 13px; }
.botao.perigo.pq, .botao.fantasma.pq { padding: 0 10px; }
.botao.largo { width: 100%; height: 46px; }
.botao[disabled], .botao[aria-busy="true"] { opacity: .45; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; color: var(--texto-2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; font-size: 13px; }
.link:hover { color: var(--preto); text-decoration-color: var(--teal); }

/* ---------- mensagens ---------- */
.mensagem { padding: 12px 16px; border-radius: var(--raio-pq); font-size: 13.5px; display: grid; gap: 4px; }
.mensagem.erro { background: var(--erro-fundo); color: var(--erro); }
.mensagem.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.mensagem.ok { background: #F0FDFB; color: var(--ok); }
.mensagem.info { background: var(--realce); color: var(--texto-2); }
.mensagem.nota { background: none; padding: 0 0 0 14px; border-left: 2px solid var(--teal); border-radius: 0; color: var(--texto-2); }

.avisos { position: fixed; right: 24px; bottom: 24px; display: grid; gap: 8px; z-index: 50; max-width: min(400px, calc(100vw - 32px)); }
.aviso {
  background: var(--preto); color: var(--branco); padding: 12px 18px; border-radius: var(--raio-pq);
  font-size: 13.5px; box-shadow: 0 12px 32px rgba(1, 0, 15, .18); display: flex; gap: 10px; align-items: center;
  animation: entrar .25s var(--suave);
}
.aviso::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; }
.aviso.erro::before { background: var(--laranja); }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

/* ---------- casca ---------- */
.casca { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }
.lateral {
  background: var(--branco); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral .topo { padding: 28px 24px 28px; }
.nav { padding: 0 12px 16px; display: grid; gap: 1px; }
.nav-grupo { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); padding: 22px 12px 8px; }
.nav a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--texto-2); text-decoration: none; padding: 7px 12px; border-radius: var(--raio-pq); font-size: 14px;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--realce); color: var(--preto); }
.nav a[aria-current="page"] { color: var(--preto); font-weight: 500; background: var(--realce); }
.nav a[aria-current="page"]::before {
  content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--teal);
}
.nav .selo { font-size: 10.5px; color: var(--texto-3); font-weight: 400; }
.lateral .pessoa {
  margin-top: auto; padding: 16px 20px 20px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center;
  border-top: 1px solid var(--linha);
}
.avatar {
  text-transform: uppercase;
  width: 34px; height: 34px; border-radius: 50%; background: var(--tint); color: var(--preto);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 500; grid-row: span 2;
}
.lateral .pessoa .nome { font-weight: 500; font-size: 13.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .pessoa .perfil { color: var(--texto-3); font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .pessoa .link { grid-column: 2; justify-self: start; margin-top: 8px; font-size: 12.5px; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra-topo { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 16px 56px 0; min-height: 44px; }
.barra-mobile { display: none; }
.conteudo { padding: 20px 56px 96px; max-width: 1120px; width: 100%; display: grid; gap: 48px; align-content: start; }
.cabecalho { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.cabecalho .titulos { display: grid; gap: 10px; }
.cabecalho .sobre { color: var(--texto-2); max-width: 62ch; }
.migalha { font-size: 12px; color: var(--texto-3); letter-spacing: .02em; }

/* modo demonstracao: discreto, no canto */
.demo { position: relative; }
.demo summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--texto-2); padding: 5px 12px; border-radius: var(--pilula); background: var(--alerta-fundo);
}
.demo summary::-webkit-details-marker { display: none; }
.demo summary::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amarelo); }
.demo .painel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 300px; z-index: 30; background: var(--branco);
  border-radius: var(--raio); box-shadow: 0 16px 48px rgba(1, 0, 15, .14), 0 0 0 1px var(--linha);
  padding: 18px; display: grid; gap: 12px; font-size: 13px; color: var(--texto-2);
}
.demo .painel .botao { justify-content: flex-start; }

@media (max-width: 1100px) {
  .conteudo { padding: 16px 32px 80px; }
  .barra-topo { padding: 16px 32px 0; }
}
@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); z-index: 40; transform: translateX(-100%); transition: transform .25s var(--suave); }
  .casca.menu-aberto .lateral { transform: none; box-shadow: 0 0 48px rgba(1,0,15,.12); }
  .barra-mobile { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
  .barra-mobile img { width: 96px; }
  .barra-topo { padding: 12px 16px 0; }
  .conteudo { padding: 12px 16px 64px; gap: 36px; }
  h1 { font-size: 26px; }
}

/* ---------- blocos ---------- */
.secao { display: grid; gap: 20px; align-content: start; }
.secao > .cabeca, .cartao .cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cartao { display: grid; gap: 16px; align-content: start; }
.grade { display: grid; gap: 40px 32px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grade-2 { display: grid; gap: 48px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.suave { color: var(--texto-2); }
.fraco { color: var(--texto-3); font-size: 12.5px; }
.pilha { display: grid; gap: 14px; }
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* indicadores da home: numero leve, sem moldura */
.indicador { display: grid; gap: 6px; align-content: start; }
.indicador .numero { font-size: 44px; font-weight: 300; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.indicador.pendente .numero { display: inline-flex; align-items: flex-start; gap: 6px; }
.indicador.pendente .numero::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); margin-top: 6px; }
.indicador h3 { margin-top: 10px; }
.indicador p { color: var(--texto-2); font-size: 13px; }
.indicador .link-seta { margin-top: 6px; }

.link-seta { font-size: 13px; font-weight: 500; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; color: var(--preto); }
.link-seta::after { content: '→'; transition: transform .15s var(--suave); }
.link-seta:hover::after { transform: translateX(3px); }

/* cartao de modulo na home */
.modulo-cartao {
  display: grid; gap: 8px; padding: 22px 22px 24px; border-radius: var(--raio); background: var(--realce);
  text-decoration: none; color: inherit; transition: background .15s, transform .2s var(--suave);
}
.modulo-cartao:hover { background: #F3F3F7; transform: translateY(-1px); }
.modulo-cartao .estado { font-size: 11.5px; color: var(--texto-3); }

/* etiquetas: texto com ponto, sem caixa */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--linha-forte); flex: none; }
.etiqueta.ativo::before { background: var(--teal); }
.etiqueta.inativo { color: var(--texto-3); }
.etiqueta.sensivel::before { background: var(--roxo); }
.etiqueta.alerta { color: var(--alerta); }
.etiqueta.alerta::before { background: var(--amarelo); }
.etiqueta.reservado::before { background: none; border: 1px solid var(--linha-forte); width: 5px; height: 5px; }
.etiqueta.sem-ponto::before { display: none; }

.vazio { padding: 40px 16px; text-align: center; display: grid; gap: 8px; justify-items: center; color: var(--texto-2); }
.vazio h3 { color: var(--texto); font-weight: 500; }
.vazio p { max-width: 44ch; }
.vazio .botao, .vazio .link-seta { margin-top: 8px; }

/* ---------- tabelas: sem moldura, so linhas finas ---------- */
.tabela-envolta { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-size: 11.5px; font-weight: 500; color: var(--texto-3); letter-spacing: .03em;
  padding: 0 16px 12px 0; border-bottom: 1px solid var(--linha); white-space: nowrap;
}
td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--linha); vertical-align: top; line-height: 1.45; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr { transition: background .12s; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--realce); }
tr.selecionada td { background: var(--realce); }
tr.selecionada td:first-child { box-shadow: inset 2px 0 0 var(--teal); }
td .nome-linha { font-weight: 500; }
td .sub-linha { color: var(--texto-3); font-size: 12.5px; }
td .acoes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.col-acoes { text-align: right; width: 1%; white-space: nowrap; }
/* acoes secundarias so aparecem ao passar o mouse ou ao focar a linha */
.revela { opacity: 0; transition: opacity .15s; }
tr:hover .revela, tr:focus-within .revela, tr.selecionada .revela { opacity: 1; }
@media (hover: none) { .revela { opacity: 1; } }
.seta-linha { color: var(--texto-3); font-size: 16px; }

/* abas */
.abas { display: flex; gap: 28px; border-bottom: 1px solid var(--linha); overflow-x: auto; }
.abas a { padding: 0 0 12px; text-decoration: none; color: var(--texto-3); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas a:hover { color: var(--preto); }
.abas a[aria-current="page"] { color: var(--preto); border-bottom-color: var(--teal); font-weight: 500; }

/* filtros */
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.filtros .campo { min-width: 220px; }
.busca input { padding-left: 38px; background: var(--realce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238F8EA0' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 14px 50%; border-color: transparent; }
.busca input:hover { border-color: transparent; background-color: #F4F4F8; }
.busca input:focus { background-color: var(--branco); }
.segmentado { display: inline-flex; background: var(--realce); border-radius: var(--pilula); padding: 3px; }
.segmentado button { border: 0; background: none; padding: 6px 14px; border-radius: var(--pilula); cursor: pointer; font-size: 13px; color: var(--texto-2); }
.segmentado button[aria-pressed="true"] { background: var(--branco); color: var(--preto); font-weight: 500; box-shadow: 0 1px 3px rgba(1,0,15,.08); }

/* painel de detalhe lateral */
.detalhe { position: sticky; top: 24px; display: grid; gap: 28px; align-content: start; padding-left: 40px; border-left: 1px solid var(--linha); }
.detalhe .bloco { display: grid; gap: 12px; }
.detalhe .rotulo { font-size: 11.5px; font-weight: 500; color: var(--texto-3); letter-spacing: .03em; }
.item-lista { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.item-lista:first-child { padding-top: 0; }
.item-lista:last-child { border-bottom: 0; }

/* ---------- permissoes: grupos recolhiveis com interruptores ---------- */
.grupo-permissoes { border-bottom: 1px solid var(--linha); }
.grupo-permissoes > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0;
}
.grupo-permissoes > summary::-webkit-details-marker { display: none; }
.grupo-permissoes > summary .titulo { font-weight: 500; display: flex; gap: 10px; align-items: center; }
.grupo-permissoes > summary .titulo::before { content: '›'; color: var(--texto-3); font-size: 16px; transition: transform .2s var(--suave); display: inline-block; width: 10px; }
.grupo-permissoes[open] > summary .titulo::before { transform: rotate(90deg); }
.grupo-permissoes > summary .contagem { font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.grupo-permissoes > summary .contagem.tem { color: var(--texto); }
.grupo-permissoes .itens { display: grid; padding: 0 0 12px 20px; }
.permissao {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 9px 12px; margin: 0 -12px; border-radius: var(--raio-pq); cursor: pointer; transition: background .12s;
}
.permissao:hover { background: var(--realce); }
.permissao .desc { line-height: 1.35; }
.permissao code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--texto-3); opacity: 0; transition: opacity .15s; }
.permissao:hover code, .permissao:focus-within code { opacity: 1; }
.permissao.alterada .desc::after { content: ' · alterado'; color: var(--texto-3); font-size: 12px; }

/* interruptor */
.interruptor { position: relative; width: 34px; height: 20px; flex: none; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.interruptor span { position: absolute; inset: 0; border-radius: var(--pilula); background: var(--linha-forte); transition: background .18s; pointer-events: none; }
.interruptor span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--branco); box-shadow: 0 1px 2px rgba(1,0,15,.2); transition: transform .18s var(--suave); }
.interruptor input:checked + span { background: var(--teal); }
.interruptor input:checked + span::after { transform: translateX(14px); }
.interruptor input:focus-visible + span { outline: 2px solid var(--preto); outline-offset: 2px; }

.barra-salvar {
  position: sticky; bottom: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  padding: 16px 0; margin-top: 8px; border-top: 1px solid var(--linha); display: flex; gap: 12px; align-items: center;
}
.barra-salvar .resumo { color: var(--texto-2); font-size: 13px; margin-right: auto; }

/* ---------- dialogo ---------- */
dialog { border: 0; border-radius: 18px; padding: 0; width: min(480px, calc(100vw - 32px)); box-shadow: 0 32px 80px rgba(1,0,15,.22); }
dialog::backdrop { background: rgba(1, 0, 15, .28); backdrop-filter: blur(2px); }
dialog form { padding: 32px; display: grid; gap: 20px; }
dialog h2 { font-size: 20px; font-weight: 400; letter-spacing: -.015em; }
dialog .rodape-dialogo { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
dialog[open] { animation: entrar .2s var(--suave); }

/* ---------- modulo reservado ---------- */
.reserva-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.reserva-area { background: var(--realce); border-radius: var(--raio); padding: 22px; display: grid; gap: 6px; align-content: start; min-height: 128px; }
.reserva-area p { color: var(--texto-2); font-size: 13px; }
.trilho { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: passo; }
.trilho .passo { position: relative; padding: 22px 16px 0 0; display: grid; gap: 4px; align-content: start; }
.trilho .passo::before { content: ''; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--linha-forte); }
.trilho .passo::after { content: ''; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--branco); border: 1px solid var(--linha-forte); }
.trilho .passo.feito::before { background: var(--teal); }
.trilho .passo.feito::after { background: var(--teal); border-color: var(--teal); }
.trilho .passo .n { font-size: 11.5px; color: var(--texto-3); }
.trilho .passo p { color: var(--texto-2); font-size: 13px; }
@media (max-width: 760px) { .trilho { grid-template-columns: 1fr 1fr; row-gap: 24px; } }

.lista-simples { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.json { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; background: var(--realce); border-radius: var(--raio-pq); padding: 12px; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; margin: 8px 0 0; color: var(--texto-2); }
details > summary { cursor: pointer; }
.contas-demo { display: grid; gap: 2px; }
.contas-demo button {
  display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; text-align: left;
  border: 0; background: none; padding: 10px 12px; border-radius: var(--raio-pq); cursor: pointer;
}
.contas-demo button:hover { background: var(--realce); }
.contas-demo .avatar { width: 30px; height: 30px; font-size: 11.5px; }
.contas-demo .fraco { grid-column: 2; }

/* acessibilidade e ajustes finos */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
td:first-child, th:first-child { padding-left: 12px; }
td .acoes { flex-wrap: nowrap; align-items: center; }
.fechar { font-size: 20px; line-height: 1; font-weight: 300; color: var(--texto-3); }
.fechar:hover { color: var(--preto); }

/* nome longo no menu nao arrasta o selo */
.nav a > span:first-child { min-width: 0; }
.nav .selo { white-space: nowrap; flex: none; }

/* o atributo hidden vence classes que definem display (ex. .botao) */
[hidden] { display: none !important; }

/* menu por setor */
.nav-setor { display: grid; gap: 1px; }
.nav-setor-nome { font-size: 13px; font-weight: 500; color: var(--texto); padding: 8px 12px 4px; }
.nav-setor a { padding-left: 24px; }
.nav-duas-linhas { display: grid; gap: 0; line-height: 1.3; min-width: 0; }
.nav-duas-linhas > span:first-child { color: var(--texto); font-weight: 500; }
.nav-sub { font-size: 12px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a.nav-setor-unico { padding-top: 8px; padding-bottom: 8px; }
.nav a.nav-setor-unico[aria-current="page"] .nav-sub { color: var(--texto-2); }