/* ==========================================================================
   Portal do cliente (/) e administração (/admin).

   Construído sobre o design system da TrackingTrade. As medidas de componente
   (altura, padding, raio, peso) vêm das definições em components/ do pacote;
   as cores e espaçamentos vêm dos tokens. Nenhuma cor é escrita em hex aqui —
   o pacote proíbe.

   A ponte de tokens, o modo escuro e os dois desvios documentados estão em
   ds/tema.css.
   ========================================================================== */
@import url('/static/ds/tema.css');

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-line);
  -webkit-font-smoothing: antialiased;
}

.envelope { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6) var(--space-20); }

h1 {
  font-family: var(--font-display); font-size: var(--text-heading-lg-size);
  line-height: var(--text-heading-lg-line); font-weight: var(--text-heading-lg-weight);
  letter-spacing: var(--text-heading-lg-tracking); margin: 0;
}
h2 {
  font-family: var(--font-display); font-size: var(--text-heading-md-size);
  line-height: var(--text-heading-md-line); font-weight: var(--text-heading-md-weight);
  margin: 0;
}
h3 {
  font-size: var(--text-heading-sm-size); line-height: var(--text-heading-sm-line);
  font-weight: var(--text-heading-sm-weight); margin: 0;
}
p { margin: 0 0 var(--space-3); color: var(--text-secondary); }
a { color: var(--text-accent); text-underline-offset: 2px; }

.fraco { color: var(--text-muted); font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line); }
.medio { color: var(--text-secondary); }

code {
  font-family: var(--fonte-mono); font-size: 13px;
  background: var(--surface-sunken); border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 1px 5px; color: var(--text-primary);
}

/* ---------------------------------------------------------------- marca --- */
.marca { display: inline-flex; align-items: center; gap: var(--space-3); }
.marca svg { display: block; flex: 0 0 auto; }
.marca .nome {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-sm-size);
  letter-spacing: -.01em;
}

/* ------------------------------------------------- tela de entrada -------- */
.entrada {
  min-height: 100vh; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--space-16); max-width: var(--container-max); margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}
@media (max-width: 900px) {
  .entrada { grid-template-columns: 1fr; gap: var(--space-8); min-height: auto; padding-top: var(--space-8); }
}
.discurso .marca { margin-bottom: var(--space-8); }
.discurso h1 {
  font-size: var(--text-display-lg-size); line-height: var(--text-display-lg-line);
  letter-spacing: var(--text-display-lg-tracking); max-width: 16em;
}
@media (max-width: 900px) { .discurso h1 { font-size: var(--text-heading-lg-size); } }
.discurso .chamada {
  font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line);
  color: var(--text-secondary); margin: var(--space-4) 0 0; max-width: 34em;
}

.beneficios { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.beneficios li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-body-md-size); }
/* Ícone de linha, sem emoji: o design system não usa emoji nos componentes. */
.beneficios .bolinha {
  flex: 0 0 20px; height: 20px; margin-top: 3px; color: var(--brand-accent);
}
.beneficios .bolinha svg { display: block; }

/* ------------------------------------------------ cabeçalho do app ------- */
.cabecalho-app {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface-card); border-bottom: var(--border-width-thin) solid var(--border-subtle);
  margin-bottom: var(--space-8);
}
.cabecalho-app .interno {
  max-width: var(--container-max); margin: 0 auto; padding: var(--space-4) var(--space-6);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.cabecalho-app .esticar { flex: 1 1 auto; min-width: 0; }
.conta-atual { display: flex; flex-direction: column; min-width: 0; }
.conta-atual .nome {
  font-weight: 600; font-size: var(--text-body-md-size);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conta-atual .detalhe { font-size: var(--text-caption-size); color: var(--text-muted); }

/* Badge do DS: altura 22, padding 0 9px, raio total, 12px/600 */
.selo {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 22px;
  padding: 0 9px; border-radius: var(--radius-full);
  background: var(--azure-50); color: var(--text-accent);
  font-size: 12px; font-weight: 600; letter-spacing: .01em; text-decoration: none;
}

/* ---------------------------------------------------------- cartões ------ */
/* Card do DS: superfície, hairline, raio-lg e SEM sombra — o pacote reserva
   sombra para elevação (modal, dropdown), não para cartão plano. */
.cartao {
  background: var(--surface-card);
  border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: none;
  padding: var(--space-card-padding); margin-bottom: var(--space-5);
}
.cartao-quieto { background: var(--surface-sunken); }
.passo { display: flex; gap: var(--space-4); }
.corpo-passo { flex: 1; min-width: 0; }
.numero {
  flex: 0 0 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--brand-accent); color: var(--text-inverse);
  font-size: 12px; font-weight: 600; display: grid; place-items: center; margin-top: 2px;
}

/* ------------------------------------------------------- formulário ------ */
/* Input do DS: altura 40, padding 0 12px, raio-md, borda default, 14px.
   Label 13/600 com 6px de distância. */
label { display: block; font-size: 13px; font-weight: 600; margin: var(--space-4) 0 6px; color: var(--text-primary); }
label:first-child { margin-top: 0; }

input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]), select {
  /* Seletor por exclusão: listar tipo por tipo já deixou o input[type=email]
     sem estilo, com largura e borda diferentes dos demais campos. */
  width: 100%; height: 40px; padding: 0 12px;
  font-size: var(--text-body-sm-size); font-family: var(--font-body);
  color: var(--text-primary); background: var(--surface-card);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
input::placeholder { color: var(--text-muted); }
input:focus, select:focus {
  outline: none; border-color: var(--brand-accent); box-shadow: var(--anel-foco);
}

/* Button do DS: altura 40, padding 10px 20px, 14px/600, raio-md.
   Azure é o acento e o pacote reserva para CTA — é a ação principal aqui.
   Sem transform no press: o pacote pede escurecer, não encolher. */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--text-body-sm-size); font-weight: 600;
  height: 40px; padding: 10px 20px; cursor: pointer;
  border: var(--border-width-thin) solid transparent; border-radius: var(--radius-md);
  background: var(--brand-accent); color: var(--text-inverse);
  transition: background var(--duration-fast) var(--ease-standard);
}
button:hover:not(:disabled) { background: var(--brand-accent-hover); }
button:active:not(:disabled) { background: var(--brand-accent-active); }
button:focus-visible { outline: none; box-shadow: var(--anel-foco); }
button:disabled { opacity: .45; cursor: not-allowed; }

button.secundario {
  background: transparent; color: var(--text-primary); border-color: var(--border-strong);
}
button.secundario:hover:not(:disabled) { background: var(--surface-sunken); }
button.secundario:active:not(:disabled) { background: var(--surface-sunken); }

button.discreto {
  background: none; color: var(--text-secondary); border-color: transparent;
  height: auto; padding: 4px 6px; font-weight: 500; text-decoration: underline;
}
button.discreto:hover:not(:disabled) { background: none; color: var(--text-primary); }
button.largo { width: 100%; }

/* Link que se comporta como botão: precisa ser <a download> para o navegador
   baixar o arquivo; um <button> exigiria JavaScript sem ganho nenhum. */
.botao-link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 10px 20px; text-decoration: none;
  font-size: var(--text-body-sm-size); font-weight: 600;
  border: var(--border-width-thin) solid transparent; border-radius: var(--radius-md);
  background: var(--brand-accent); color: var(--text-inverse);
  transition: background var(--duration-fast) var(--ease-standard);
}
.botao-link:hover { background: var(--brand-accent-hover); }
.botao-link.secundario {
  background: transparent; color: var(--text-primary); border-color: var(--border-strong);
}
.botao-link.secundario:hover { background: var(--surface-sunken); }

.linha-botoes { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-5); }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .par { grid-template-columns: 1fr; } }

/* Ações de apoio acima da área de arquivo: menores que a ação principal, para
   ajudar sem disputar a atenção com o botão de enviar. */
.acoes-ajuda { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; margin: var(--space-5) 0 var(--space-3); }
.acoes-ajuda button, .acoes-ajuda .botao-link { height: 32px; padding: 6px 14px; font-size: 13px; }
@media (max-width: 620px) { .acoes-ajuda { justify-content: stretch; } }

/* ------------------------------------------------- área de arquivo ------- */
.solta {
  border: var(--border-width-thick) dashed var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-5);
  text-align: center; cursor: pointer; background: var(--surface-sunken);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.solta:hover, .solta.sobre { border-color: var(--brand-accent); background: var(--azure-50); }
.solta.preenchida {
  padding: var(--space-5); border-style: solid; border-width: var(--border-width-thin);
  background: var(--surface-card);
}
.solta .icone { color: var(--text-muted); margin-bottom: var(--space-2); }
.solta:hover .icone, .solta.sobre .icone { color: var(--brand-accent); }
.solta .titulo { font-weight: 600; font-size: var(--text-body-md-size); margin-bottom: 2px; }
.arquivo-escolhido { display: flex; align-items: center; gap: var(--space-3); justify-content: center; font-weight: 600; flex-wrap: wrap; }

/* ----------------------------------------------------------- avisos ------ */
.aviso {
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  font-size: var(--text-body-sm-size); line-height: 1.5; margin: var(--space-4) 0;
  display: flex; gap: var(--space-3); align-items: flex-start;
  border: var(--border-width-thin) solid transparent;
}
.aviso.info   { background: var(--info-100);    color: var(--info-700); }
.aviso.bom    { background: var(--success-100); color: var(--success-700); }
.aviso.atento { background: var(--warning-100); color: var(--warning-700); }
.aviso.ruim   { background: var(--danger-100);  color: var(--danger-700); }
.aviso .texto { white-space: pre-line; }
.aviso code { background: transparent; border-color: currentColor; color: inherit; }

/* -------------------------------------------------------- métricas ------- */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.metrica {
  background: var(--surface-card); border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.metrica .rotulo {
  font-size: var(--text-label-size); font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--text-muted);
}
.metrica .valor {
  font-family: var(--font-display); font-size: var(--text-heading-lg-size);
  font-weight: 600; letter-spacing: var(--text-heading-lg-tracking);
  margin-top: var(--space-1); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.metrica .nota { font-size: var(--text-caption-size); color: var(--text-muted); margin-top: 2px; }

.painel-numeros { display: flex; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-4) 0; }
.numero-grande {
  flex: 1; min-width: 140px; background: var(--surface-sunken);
  border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
}
.numero-grande .valor {
  font-family: var(--font-display); font-size: var(--text-heading-lg-size); font-weight: 600;
  letter-spacing: var(--text-heading-lg-tracking); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.numero-grande .rotulo {
  font-size: var(--text-label-size); color: var(--text-muted); text-transform: uppercase;
  letter-spacing: var(--text-label-tracking); font-weight: var(--text-label-weight);
}
.numero-grande.bom  { background: var(--success-100); border-color: transparent; }
.numero-grande.bom .valor  { color: var(--success-700); }
.numero-grande.ruim { background: var(--danger-100); border-color: transparent; }
.numero-grande.ruim .valor { color: var(--danger-700); }

/* --------------------------------------------------------- tabelas ------- */
.rolagem {
  overflow-x: auto; border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg); margin: var(--space-4) 0; background: var(--surface-card);
}
table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm-size); }
th {
  text-align: left; font-size: var(--text-label-size); text-transform: uppercase;
  letter-spacing: var(--text-label-tracking); color: var(--text-muted);
  font-weight: var(--text-label-weight); padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-bottom: var(--border-width-thin) solid var(--border-subtle); white-space: nowrap;
}
td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--border-subtle);
  vertical-align: middle; color: var(--text-secondary);
}
td strong, td code { color: var(--text-primary); }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--duration-fast) var(--ease-standard); }
tbody tr:hover { background: var(--surface-sunken); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.seta { color: var(--text-muted); text-align: center; }

/* Badge do DS para situação: altura 22, raio total, 12px/600 */
.etiqueta {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--radius-full); font-size: 12px; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap;
}
.etiqueta.ativo       { background: var(--success-100); color: var(--success-700); }
.etiqueta.arquivado   { background: var(--surface-sunken); color: var(--text-muted); }
.etiqueta.rejeitado   { background: var(--danger-100);  color: var(--danger-700); }
.etiqueta.obrigatorio { background: var(--azure-50);    color: var(--text-accent); }
.etiqueta.condicional { background: var(--warning-100); color: var(--warning-700); }
.etiqueta.recomendado { background: var(--surface-sunken); color: var(--text-secondary); }
.etiqueta.opcional    { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-subtle); }

/* ------------------------------------------------------------ abas ------- */
/* Tabs do DS: sublinhado, não pílula. gap 24, borda inferior hairline,
   aba ativa em navy com 2px de azure embaixo. */
.abas {
  display: flex; gap: var(--space-6); margin-bottom: var(--space-6);
  border-bottom: var(--border-width-thin) solid var(--border-subtle);
  max-width: 100%; overflow-x: auto;
}
.abas button {
  background: none; border: none; border-radius: 0; box-shadow: none;
  height: auto; padding: 0 0 var(--space-3); font-size: var(--text-body-sm-size);
  font-weight: 600; color: var(--text-secondary); white-space: nowrap;
  border-bottom: var(--border-width-thick) solid transparent;
  transition: color var(--duration-fast) var(--ease-standard);
}
.abas button:hover:not([aria-selected=true]) { background: none; color: var(--text-primary); }
.abas button[aria-selected=true] {
  background: none; color: var(--brand-primary); border-bottom-color: var(--brand-accent);
}

/* ----------------------------------------------------------- modal ------- */
/* Dialog do DS: raio-lg, sombra-lg, cabeçalho e rodapé com hairline,
   scrim navy a 50%. */
dialog {
  border: none; border-radius: var(--radius-lg); padding: 0;
  max-width: 420px; width: calc(100% - var(--space-8));
  max-height: calc(100vh - var(--space-12));
  background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-lg);
}
dialog.largo { max-width: 800px; }
dialog::backdrop { background: oklch(0.15 0.045 258 / 0.5); }
/* Cabeçalho do Dialog do DS: 20x24, hairline embaixo, título em font-display
   18/600 e um IconButton fantasma de fechar à direita. */
.modal-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 20px var(--space-6);
  border-bottom: var(--border-width-thin) solid var(--border-subtle);
}
.modal-cabecalho h2 {
  font-family: var(--font-display); font-size: var(--text-heading-sm-size);
  font-weight: 600; color: var(--text-primary); margin: 0;
}
.modal-corpo {
  padding: var(--space-6); overflow-y: auto; max-height: calc(100vh - 210px);
  color: var(--text-secondary); font-size: var(--text-body-sm-size); line-height: 1.6;
}
.modal-corpo > h2 { margin-bottom: var(--space-2); }

/* IconButton do DS, variante fantasma: caixa quadrada, raio-md, preenchimento
   neutro no hover. */
.botao-icone {
  width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
  background: none; border-color: transparent; color: var(--text-secondary);
  border-radius: var(--radius-md);
}
.botao-icone:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text-primary); }
.botao-icone:active:not(:disabled) { background: var(--surface-sunken); }
.botao-icone svg { display: block; }
.modal-pe {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width-thin) solid var(--border-subtle);
}

/* ----------------------------------------------- faixa de último envio -- */
/* Sem barra colorida na lateral: o design system proíbe
   ("No colored left-border accent bars"). A situação vira badge. */
.faixa {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--surface-card); border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5);
}
.faixa-corpo { flex: 1 1 240px; min-width: 0; }
.faixa-titulo {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-weight: 600; font-size: var(--text-body-md-size); margin-bottom: 2px;
}
.faixa-acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.faixa-acoes button { height: 32px; padding: 6px 14px; font-size: 13px; }

/* ------------------------------------------------ painel de administração */
.barra-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; padding: var(--space-8) 0 var(--space-6);
}
.barra-titulo .sub { margin: 4px 0 0; color: var(--text-muted); font-size: var(--text-body-sm-size); }
.barra-titulo .acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Bloco com cabeçalho próprio: título e ação no topo, conteúdo colado embaixo. */
.bloco {
  background: var(--surface-card); border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg); margin-bottom: var(--space-5); overflow: hidden;
}
.bloco-topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-width-thin) solid var(--border-subtle);
}
.bloco-topo h2 { font-size: var(--text-heading-sm-size); font-weight: 600; }
.bloco-topo .sub { margin: 2px 0 0; font-size: var(--text-caption-size); color: var(--text-muted); }
.bloco .rolagem { border: 0; border-radius: 0; margin: 0; }
.bloco-vazio { padding: var(--space-8) var(--space-6); text-align: center; color: var(--text-muted); }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .grade-2 { grid-template-columns: 1fr; } }

.metrica.alerta .valor { color: var(--danger-700); }
.metrica.bom .valor { color: var(--success-700); }
td.duplo small { display: block; color: var(--text-muted); font-size: var(--text-caption-size); font-weight: 400; }
td.sem-quebra, .sem-quebra { white-space: nowrap; }
td .recusadas { color: var(--danger-700); }

button.mini { height: 28px; padding: 4px 12px; font-size: 13px; }
button.perigo { background: var(--danger-500); }
button.perigo:hover:not(:disabled) { background: var(--danger-700); }
button.secundario.perigo { background: transparent; color: var(--danger-700); border-color: var(--danger-500); }
button.secundario.perigo:hover:not(:disabled) { background: var(--danger-100); }
.modal-pe .afastado { margin-right: auto; display: flex; gap: var(--space-2); }

/* Aviso que aparece por cima da página e some sozinho. */
.notificacao { position: fixed; top: var(--space-4); left: 50%; transform: translateX(-50%); z-index: 50; max-width: min(560px, calc(100% - var(--space-8))); box-shadow: var(--shadow-lg); margin: 0; }

/* Cabeçalho da administração: a marca à esquerda, a identidade de quem está logado à
   direita. "Administração" é um selo, para ninguém confundir esta tela com o portal. */
.cabecalho-admin .interno { flex-wrap: nowrap; }
.cabecalho-admin .divisor { width: 1px; height: 24px; background: var(--border-subtle); flex: 0 0 auto; }
.selo-admin {
  font-size: var(--text-label-size); font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking); text-transform: uppercase;
  color: var(--text-accent); background: var(--azure-50);
  padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap;
}
.link-portal {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--text-secondary); font-size: var(--text-body-sm-size); font-weight: 500;
  text-decoration: none; padding: 6px 10px; border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-standard);
}
.link-portal:hover { background: var(--surface-sunken); color: var(--text-primary); }
.usuario {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0;
  padding-left: var(--space-4); margin-left: var(--space-1);
  border-left: var(--border-width-thin) solid var(--border-subtle);
}
.avatar {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: var(--radius-full);
  background: var(--brand-primary); color: var(--text-inverse);
  display: grid; place-items: center; font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.usuario .quem { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.usuario .quem .nome { font-size: var(--text-body-sm-size); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario .quem .detalhe { font-size: var(--text-caption-size); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecalho-admin .marca .nome { white-space: nowrap; }
.cabecalho-admin .interno > * { flex-shrink: 0; }
.cabecalho-admin .interno > .esticar { flex-shrink: 1; }
/* Em tela estreita o cabeçalho perde o que é só conforto, e mantém o que é ação:
   marca, selo e Sair. Sem isso o nome da marca quebra em três linhas e o avatar
   sobrepõe o botão. */
@media (max-width: 1000px) { .usuario .quem .detalhe { display: none; } }
@media (max-width: 760px) {
  .cabecalho-admin .divisor, .cabecalho-admin .marca .nome, .link-portal, .usuario { display: none; }
}

/* ---------------------------------------------------------- diversos ---- */
.oculto { display: none !important; }
.girando {
  display: inline-block; width: 13px; height: 13px; vertical-align: -1px;
  border: 2px solid oklch(1 0 0 / 0.35); border-top-color: var(--neutral-0);
  border-radius: var(--radius-full); animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.pe-pagina { text-align: center; margin-top: var(--space-8); font-size: var(--text-body-sm-size); color: var(--text-muted); }

.lista-simples { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.lista-simples li {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--text-body-sm-size); color: var(--text-secondary);
}
.lista-simples li::before {
  content: "—"; color: var(--text-muted); flex: 0 0 auto;
}

.trilha { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 700px) { .trilha { grid-template-columns: 1fr; } }
.etapa {
  display: flex; gap: var(--space-3); background: var(--surface-card);
  border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.etapa strong { font-size: var(--text-body-md-size); }
.etapa p { margin: 2px 0 0; }

/* Tag do DS (raio-sm, superfície afundada) para o token emitido */
.token-novo {
  font-family: var(--fonte-mono); font-size: 13px; word-break: break-all;
  background: var(--surface-sunken); border: var(--border-width-thin) solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0;
}