/* afiliatum — folha de estilo do painel.
 *
 * Tokens transcritos do frontmatter de DESIGN.md. Onde este arquivo e o spine
 * discordarem, o spine vence.
 *
 * A aparência é ESCURA, SEMPRE. Não há tema claro, não há alternância, não se
 * segue o sistema operacional — por isso não existe nenhum @media
 * (prefers-color-scheme) aqui, e a ausência é deliberada.
 */

:root {
  /* Superfícies — quatro camadas de luminância sobre um preto arroxeado.
     O viés arroxeado não é gosto: um neutro puro faz o violeta da marca
     parecer sujo por contraste simultâneo. */
  --surface-base: #0b0a12;
  --surface-raised: #14121f;
  --surface-band: #100e1a;
  --surface-scrim: #040407;
  --border-subtle: #241f33;
  --border-strong: #332c49;
  --border-control: #645790;
  --border-overlay: #605389;

  /* Texto — três níveis. Hierarquia por luminância, nunca por peso. */
  --text-primary: #ffffff;
  --text-muted: #9b93b4;
  --text-faint: #80799a;

  /* Marca — dois tons, e para. Nunca comunicam estado. */
  --primary: #8b5cf6;
  --secondary: #3b82f6;
  --focus-ring: #a78bfa;

  /* Estado — um token por estado nomeado. Nenhum é decorativo.
     Cor de estado NUNCA aparece fora de contexto de estado. */
  --state-operando: #34d399;
  --state-suspeicao: #fbbf24;
  --state-teto-atingido: #9b93b4;
  --state-degradado: #22d3ee;
  --state-desconectada: #fbbf24;
  --state-disjuntor: #f87171;
  --state-banida: #f87171;
  --state-desconhecido: #635c7a;

  /* Categórica — só preenche contêiner de ícone, a 14%. */
  --category-publicacao: #8b5cf6;

  --aurora-violeta: #8b5cf6;
  --aurora-magenta: #ec4899;

  --opacity-tint: 0.14;
  --opacity-fill: 0.08;
  --opacity-halo: 0.22;
  --opacity-aurora-violeta: 0.16;
  --opacity-aurora-magenta: 0.1;

  --rounded-sm: 6px;
  --rounded-md: 9px;
  --rounded-lg: 12px;
  --rounded-xl: 16px;
  --rounded-full: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --band-y: 13px;
  --band-y-mobile: 10px;
  --gutter: 18px;
  --card-pad: 14px;
  --touch-target: 44px;

  --fonte-texto: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* JetBrains Mono carrega TODO número. Não é estética: coluna de número em
     fonte proporcional não alinha, e um cronômetro dança a cada segundo quando
     os dígitos têm larguras diferentes. */
  --fonte-numero: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Altura corrente da Faixa. O JS a mantém em dia; o CSS a usa em
     scroll-margin-top e no deslocamento do chassi. */
  --altura-faixa: 48px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

/* Todo conteúdo rolável para abaixo da Faixa fixa. Cabeçalho fixo mais
   navegação por Tab é a colisão clássica, e esta linha existe para evitá-la. */
:target,
[id] { scroll-margin-top: calc(var(--altura-faixa) + var(--space-4)); }

/* Anel de foco visível em TODO elemento interativo. `outline: none` sem
   substituto é proibido. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--rounded-sm);
}

a { color: var(--text-primary); }

/* ── Aurora ──────────────────────────────────────────────────────────────────
   O único gesto expressivo. Não informa nada — é a marca. Mas apaga quando o
   sistema para de trabalhar, e é aí que o gesto decorativo ganha função: a tela
   literalmente esfria. Reforço ambiental em tela grande, nunca o canal
   primário: no celular, no sol, ela não chega. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 600ms ease-out;
  background:
    radial-gradient(600px 200px at 18% 0%,
      color-mix(in srgb, var(--aurora-violeta) calc(var(--opacity-aurora-violeta) * 100%), transparent),
      transparent 70%),
    radial-gradient(500px 220px at 88% 12%,
      color-mix(in srgb, var(--aurora-magenta) calc(var(--opacity-aurora-magenta) * 100%), transparent),
      transparent 70%);
}
body[data-aurora="apagada"] .aurora { opacity: 0; }
body[data-aurora="meia"] .aurora { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .aurora { transition: none; }
}

/* ── Faixa de Saúde ──────────────────────────────────────────────────────────
   O componente mais importante do produto. Largura total, cantos retos, fixa no
   topo de TODA tela. Não é um componente da home; é o chassi. */
.faixa {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--band-y) var(--gutter);
  background: var(--surface-band);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
}

.faixa__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.faixa__glifo { flex: 0 0 auto; display: block; }

/* Halo só no estado operando — pleno, vivo, respirando. */
.faixa__glifo--halo {
  border-radius: var(--rounded-full);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-operando) calc(var(--opacity-halo) * 100%), transparent);
}

.faixa__palavra {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.faixa__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  min-width: 0;
}
.faixa__meta b { font-family: var(--fonte-numero); font-weight: 500; font-variant-numeric: tabular-nums; }
.faixa__sep { color: var(--text-faint); }
.faixa__qualificador { color: var(--text-muted); }
.faixa__espaco { flex: 1 1 auto; }

/* Ação da vez — o único controle da Faixa. Quando o estado não tem ação, o
   controle não renderiza e o espaço colapsa. */
.acao-vez {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--rounded-md);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.acao-vez:hover { border-color: var(--focus-ring); }

/* Variante muda — na Entrada, antes de autenticar. Mesma altura e posição, sem
   estado, sem número, sem ação: telemetria operacional não vaza para quem só
   tem a URL (FR-26). */
.faixa--muda .faixa__marca { color: var(--text-muted); }

.faixa__marca {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Chassi ──────────────────────────────────────────────────────────────── */
.chassi {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  padding-top: var(--altura-faixa);
  min-height: 100vh;
}

.lateral {
  border-right: 1px solid var(--border-subtle);
  padding: var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.lateral__grupo { display: flex; flex-direction: column; gap: var(--space-1); }

.sobrelinha {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 var(--space-3) var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  border-radius: var(--rounded-md);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
/* O item de navegação é quase sempre um <a>, mas "Sair" é um <button> dentro de
   um form — POST, porque encerrar a sessão muda estado e não pode ser um link
   que um prefetch dispara sozinho. Sem isto o botão herda o cinza padrão do
   navegador e vira a única coisa clara da tela. */
button.nav-item {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.nav-item[aria-current="page"] {
  background: var(--surface-raised);
  color: var(--text-primary);
}
.nav-item[aria-current="page"] .nav-item__icone { color: var(--primary); }
.nav-item__icone { color: var(--text-muted); flex: 0 0 auto; }

.cartao-versao {
  margin-top: auto;
  background: var(--surface-raised);
  border-radius: var(--rounded-md);
  padding: var(--space-2) var(--space-3);
}
.cartao-versao__nome { font-size: 13px; font-weight: 500; }
.cartao-versao__versao {
  font-family: var(--fonte-numero);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
}

.conteudo { padding: var(--space-6) var(--gutter) var(--space-10); min-width: 0; }

.titulo-tela {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}

.subtitulo {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 var(--space-6);
}

.secao { margin-top: var(--space-8); }
.secao__titulo {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

/* ── Centro de comando (Home) ────────────────────────────────────────────────
   A abertura da Home. O caráter de instrumentação sai de GEOMETRIA ESTÁTICA —
   retícula, sobrelinhas, cantoneiras, filetes — e nunca de cor: cor continua
   reservada a estado, e quem declara o estado do sistema é a Faixa, uma faixa
   acima nesta mesma tela. Um segundo elemento colorido disputando a mesma
   pergunta é como o painel deixa de ser confiável.

   Nada aqui se move. A única animação do painel é a etapa correndo da Esteira,
   e ela existe porque carrega informação; um centro de comando que pisca por
   estilo treina o Operador a ignorar movimento — justamente o que precisa
   funcionar quando algo pisca de verdade. */

.comando {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--surface-band);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-xl);
}

/* A retícula. Duas famílias de linhas a 32px na cor de borda mais fraca do
   tema, esmaecidas de cima para baixo — presentes o bastante para ler como
   instrumento, fracas o bastante para nunca competir com um número. É
   decoração pura e não codifica nada, e por isso vive num pseudo-elemento,
   fora da árvore de acessibilidade. */
.comando::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(to right, var(--border-subtle) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, var(--border-subtle) 0 1px, transparent 1px 32px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 65%);
  mask-image: linear-gradient(to bottom, #000, transparent 65%);
}

/* As cantoneiras. Uma moldura interna cujas arestas centrais são apagadas por
   duas máscaras cruzadas, sobrando oito segmentos curtos nos cantos. Uma
   moldura inteira seria só uma segunda borda concorrendo com a do cartão. */
.comando::after {
  content: "";
  position: absolute;
  inset: var(--space-2);
  pointer-events: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--rounded-lg);
  -webkit-mask-image:
    linear-gradient(to right, #000 0 20px, transparent 20px calc(100% - 20px), #000 calc(100% - 20px)),
    linear-gradient(to bottom, #000 0 20px, transparent 20px calc(100% - 20px), #000 calc(100% - 20px));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 0 20px, transparent 20px calc(100% - 20px), #000 calc(100% - 20px)),
    linear-gradient(to bottom, #000 0 20px, transparent 20px calc(100% - 20px), #000 calc(100% - 20px));
  mask-composite: intersect;
}

/* O rótulo da seção é uma sobrelinha, não um título: a pergunta que a Home
   responde é "Hoje", já respondida pelo <h1>. Mas ele EXISTE no documento, com
   id, porque a seção precisa de nome acessível — some visualmente na hierarquia
   sem sumir para quem navega por cabeçalhos. */
.comando__rotulo {
  position: relative;
  margin: 0 0 var(--space-4);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.comando__instrumentos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.instrumento {
  min-width: 0;
  padding: var(--card-pad);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  /* O filete superior é a marca de escala de um mostrador — o traço que dá
     caráter de instrumento sem gastar uma cor de estado para isso. */
  border-top: 2px solid var(--border-strong);
  border-radius: var(--rounded-lg);
}

.instrumento__rotulo {
  margin: 0 0 var(--space-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Leitura de instrumento é VALOR PRIMEIRO: o valor é de longe o maior elemento
   e a legenda vem abaixo, menor e mais apagada. */
.instrumento__valor {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.instrumento__valor b {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
/* Ausência de medição não é uma medição, e não pode ter o peso de uma. A frase
   fica menor, mais leve e em text-muted — legível, mas visivelmente de outra
   natureza que "3 de 8". */
.instrumento__valor--ausente {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
}

.instrumento__legenda {
  margin: var(--space-2) 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
.instrumento__legenda b {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.instrumento__sinal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 11px;
  font-weight: 500;
}
.instrumento__sinal--limpo { color: var(--text-muted); font-weight: 400; }
.instrumento__glifo { flex: 0 0 auto; }
.instrumento__sinal b { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; }

/* ── Pulso ───────────────────────────────────────────────────────────────────
   A Execução que merece o olho agora, promovida para cima da tabela sem sair
   dela. O filete lateral é o único traço colorido, na mesma disciplina da
   borda superior das etapas da Esteira: um traço carrega o estado, o cartão
   inteiro não. */
.pulso {
  position: relative;
  margin-top: var(--space-3);
  padding: var(--card-pad) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--cor-pulso, var(--border-strong));
  border-radius: var(--rounded-lg);
}

.pulso__sobrelinha {
  margin: 0 0 var(--space-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.pulso__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.pulso__desfecho {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--cor-pulso, var(--text-primary));
}
.pulso__glifo { flex: 0 0 auto; }

/* text-muted e não text-faint: aqui a meta carrega a duração, que é o dado que
   separa "em andamento" de "parada há cinco horas". Não é metadado descartável
   e não pode ficar no piso do contraste. */
.pulso__meta {
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}
.pulso__meta b { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-weight: 500; }
.pulso__sep { padding: 0 var(--space-2); color: var(--text-faint); }

.pulso__titulo {
  margin: var(--space-3) 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.pulso__titulo--sem { color: var(--text-faint); font-weight: 400; font-style: italic; }

.pulso__frase {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.pulso__frase b { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-primary); }

/* ── Tabela ──────────────────────────────────────────────────────────────── */
.rolagem { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
thead th {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}
tbody td {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-3);
  font-size: 13px;
  font-weight: 500;
  vertical-align: top;
}
.num {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
thead th.num { text-align: right; }

/* O motivo de Descarte é o CONTEÚDO que o Operador foi ler, não metadado.
   Rebaixá-lo a text-faint é violação declarada do piso de acessibilidade. */
.motivo { color: var(--text-primary); }
.motivo__dado { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; }

.desfecho { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.desfecho__glifo { flex: 0 0 auto; }

.vazio {
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-lg);
  padding: var(--space-6);
  color: var(--text-primary);
  background: var(--surface-raised);
}
.vazio p { margin: 0; }
.vazio p + p { margin-top: var(--space-2); color: var(--text-muted); font-size: 13px; }

/* ── Painel de conteúdo ──────────────────────────────────────────────────── */
.painel {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-lg);
  padding: var(--space-5);
}
.painel + .painel { margin-top: var(--space-3); }

.par { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.par:first-of-type { border-top: 0; }
.par__rotulo { color: var(--text-muted); font-size: 13px; }
.par__valor { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: 13px; }

.nota-escopo {
  border: 1px solid var(--border-strong);
  border-radius: var(--rounded-md);
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: 13px;
  margin-top: var(--space-4);
}
.nota-escopo strong { color: var(--text-primary); }

/* ── Campo de entrada ────────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.campo__rotulo { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.campo input {
  background: var(--surface-base);
  border: 1px solid var(--border-control);
  border-radius: var(--rounded-sm);
  color: var(--text-primary);
  font-family: var(--fonte-numero);
  font-size: 13px;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  width: 100%;
}
/* select e textarea herdam a moldura do input: um formulário em que os três
   controles têm alturas e bordas diferentes lê como três formulários. */
.campo select,
.campo textarea {
  background: var(--surface-base);
  border: 1px solid var(--border-control);
  border-radius: var(--rounded-sm);
  color: var(--text-primary);
  font-family: var(--fonte-numero);
  font-size: 13px;
  min-height: var(--touch-target);
  padding: var(--space-3);
  width: 100%;
}
.campo select { padding: 0 var(--space-3); }
.campo textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.campo__dica { font-size: 11px; color: var(--text-faint); }
.campo--erro input,
.campo--erro select,
.campo--erro textarea { border-color: var(--state-disjuntor); }
.campo__erro { font-size: 13px; color: var(--text-primary); }

.botao {
  min-height: var(--touch-target);
  padding: 0 var(--space-5);
  border: 1px solid var(--border-control);
  border-radius: var(--rounded-md);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.botao--primario { background: var(--primary); border-color: var(--primary); }

/* ── Entrada ─────────────────────────────────────────────────────────────── */
.entrada {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--altura-faixa) + var(--space-10));
  display: grid;
  place-items: start center;
  min-height: 100vh;
}
.entrada__cartao {
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-lg);
  padding: var(--space-6);
}

/* ── Procedimentos ───────────────────────────────────────────────────────── */
.procedimento + .procedimento { margin-top: var(--space-6); }
.procedimento ol { padding-left: var(--space-5); margin: var(--space-3) 0 0; }
.procedimento li + li { margin-top: var(--space-2); }
.procedimento code {
  font-family: var(--fonte-numero);
  font-size: 13px;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-sm);
  padding: 1px 5px;
}

/* ── Integrações ─────────────────────────────────────────────────────────── */

/* A caixa de marcação precisa escapar de `.campo input`, que é escrito para
   campos de texto — 100% de largura e 44px de altura transformam um checkbox
   numa barra roxa. O alvo de toque de 44px continua garantido, mas pelo rótulo
   inteiro, que é onde o dedo acerta de qualquer forma. */
.campo--marca { margin-bottom: var(--space-4); }
.campo--marca .marca {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}
.campo--marca input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

/* As dicas de campo citam nomes de variável e caminhos de URL. Mesmo tratamento
   do <code> dos Procedimentos, um tamanho abaixo. */
.campo__dica code {
  font-family: var(--fonte-numero);
  font-size: 11px;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-sm);
  padding: 0 3px;
}

/* Um Disparo vale mais que um clique de navegação: os dois botões ficam
   separados do texto que os explica, e nunca lado a lado um do outro. */
.painel + .painel .secao__titulo { margin-top: 0; }

/* ── Calibração ──────────────────────────────────────────────────────────── */

/* Dois campos por linha no desktop. Mais que dois transformaria dezoito
   controles numa planilha, e a Calibração é lida campo a campo. */
.calibracao__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 var(--space-4);
}
.calibracao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.calibracao__acoes form { margin: 0; }

/* Os Slots são horários e não parâmetros: cabem muito mais por linha que dois,
   e enfileirá-los estreitos é o que faz a lista inteira ser lida de uma vez —
   que é a única leitura que importa aqui ("a que horas isto publica?"). */
.calibracao__campos--slots {
  grid-template-columns: repeat(auto-fill, minmax(120px, 140px));
  gap: 0 var(--space-3);
  margin-top: var(--space-4);
}
/* Uma vaga em branco não compete com um Slot preenchido. Ela existe para ser
   encontrada quando procurada, não para parecer um agendamento que não é.
   A marca é uma classe do servidor e não `:placeholder-shown`: input[type=time]
   não tem placeholder, então a pseudoclasse nunca casaria. */
.campo--vaga input { border-style: dashed; }
.campo--vaga .campo__rotulo { color: var(--text-faint); }

/* A procedência do bloco, ao lado do título. Não é um alerta — é um rótulo, e
   por isso não empresta a cor de nenhum estado da Faixa. Confundir "você editou
   isto" com "algo está errado" treina a ignorar as duas. */
.marca-origem {
  font-family: var(--fonte-texto);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-full);
  padding: 2px var(--space-2);
  margin-left: var(--space-2);
  white-space: nowrap;
}
.marca-origem--painel { color: var(--text-muted); border-color: var(--border-strong); }

/* "o arquivo diz 4,3" sob o campo alterado. */
.campo__dica--padrao { font-size: 11px; color: var(--text-faint); }
.campo__dica--padrao b {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Categorias vêm da Shopee e podem mudar entre duas visitas. A lista rola
   dentro do bloco para trinta opções não empurrarem o botão para fora da tela;
   o rótulo inteiro mantém o alvo de toque no celular. */
.categorias-ativas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-1) var(--space-3);
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-md);
  padding: var(--space-2);
}
.categorias-ativas__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
}
.categorias-ativas__item input { width: 18px; min-height: 18px; accent-color: var(--primary); }
.categorias-ativas__item b {
  font-family: var(--fonte-numero);
  color: var(--text-faint);
  font-weight: 500;
}
.categoria-opcao { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.categoria-opcao__exemplos { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.exemplos-categoria { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); }
.exemplo-categoria { display: flex; align-items: center; gap: var(--space-3); min-height: 116px; }
.exemplo-categoria + .exemplo-categoria { margin-top: 0; }
.exemplo-categoria p { margin: 0; }
.exemplo-categoria__imagem,
.exemplo-categoria__sem-imagem { width: 88px; height: 88px; flex: 0 0 88px; border-radius: var(--rounded-md); background: var(--surface-base); }
.exemplo-categoria__imagem { object-fit: cover; }
.exemplo-categoria__sem-imagem { display: grid; place-items: center; color: var(--text-faint); font-size: 11px; }

/* ── Cupons ─────────────────────────────────────────────────────────────── */
.cupons { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-3); }
.cupons .painel + .painel { margin-top: 0; }
.cupom__cabeca { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.cupom__cabeca p { margin: var(--space-1) 0 0; }
.cupom__acoes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.cupom__editar { margin-top: var(--space-4); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.cupom__editar > summary { color: var(--text-muted); font-size: 13px; cursor: pointer; }
.cupom__editar .painel { margin-top: var(--space-3); padding: var(--space-3); background: var(--surface-base); }

/* A previa do Mural (0014). E <pre> porque quebra de linha e linha em branco
 * sao o formato da mensagem — num <p> elas sumiriam, e o Operador aprovaria
 * uma coisa enquanto o Grupo receberia outra. pre-wrap mantem as quebras que
 * existem e dobra as linhas longas em vez de rolar na horizontal: um link de
 * 80 caracteres nao pode empurrar o cartao para fora da tela. */
.mural__previa {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── Esteira ─────────────────────────────────────────────────────────────── */

.esteira { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }

.esteira__execucao {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-lg);
  padding: var(--card-pad);
}
.esteira__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.esteira__produto { font-size: 14px; min-width: 0; }
.esteira__produto--vazio { color: var(--text-faint); font-weight: 400; font-style: italic; }
.esteira__desfecho {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex: 0 0 auto;
}
.esteira__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.esteira__meta b { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-weight: 500; }
/* O Identificador de Rastreio é um código, não uma grandeza: fonte mono inteira
   e sem o realce de numerais, que o picotaria em "af 7 c 21 e 0 b 9 d 4". */
.esteira__rastreio {
  font-family: var(--fonte-numero);
  font-size: 11px;
  color: var(--text-faint);
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-sm);
  padding: 0 4px;
}
.esteira__motivo { margin: var(--space-3) 0 0; font-size: 13px; color: var(--text-muted); }
.esteira__motivo--historico { font-size: 12px; color: var(--text-faint); font-style: italic; }
.esteira__motivo strong { color: var(--text-primary); }
.esteira__motivo a { color: var(--focus-ring); }

/* A trilha das quatro etapas. Horizontal a partir de 1024px, vertical no
   celular — EXPERIENCE.md § Responsividade, verbatim. */
.esteira__trilha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.etapa {
  border: 1px solid var(--border-subtle);
  border-radius: var(--rounded-md);
  padding: var(--space-3);
  background: var(--surface-base);
  /* A borda superior é o único traço que carrega a cor do estado. Pintar o
     cartão inteiro faria quatro blocos coloridos competirem com a Faixa, que é
     a superfície onde a cor significa alguma coisa. */
  border-top: 2px solid var(--cor-etapa, var(--border-subtle));
  min-width: 0;
}
/* Não alcançada: a etapa EXISTE no desenho e está apagada. É a diferença entre
   "a Copy falhou" e "nunca chegou na Copy", e ela precisa ser visível sem
   leitura. */
.etapa--nao_alcancada { opacity: 0.4; }

.etapa__cabeca { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.etapa__glifo { flex: 0 0 auto; color: var(--cor-etapa, var(--text-muted)); }
.etapa__nome {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.etapa__tempo {
  margin-left: auto;
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-faint);
  flex: 0 0 auto;
}
.etapa__estado { display: block; margin-top: var(--space-1); font-size: 11px; color: var(--text-muted); }
.etapa__detalhe { margin: var(--space-2) 0 0; font-size: 11px; color: var(--text-muted); line-height: 1.45; }

.etapa__abrir > summary { cursor: pointer; list-style: none; }
.etapa__abrir > summary::-webkit-details-marker { display: none; }
.etapa__abrir > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.etapa__resumo { margin-top: var(--space-3); border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }
.etapa__resumo .par { padding: 3px 0; gap: var(--space-2); }
.etapa__resumo .par__rotulo { font-size: 11px; }
.etapa__resumo .par__valor { font-size: 11px; overflow-wrap: anywhere; text-align: right; }

/* O ÚNICO movimento desta tela, e ele carrega informação: uma etapa correndo e
   uma travada há dez minutos seriam o mesmo retângulo parado. DESIGN.md proíbe
   adorno em movimento; isto não é adorno.

   prefers-reduced-motion desliga a pulsação e deixa a borda acesa — o estado
   continua distinguível pelo glifo (⋯) e pela palavra, que é o que um leitor de
   tela anuncia de qualquer forma. */
.etapa[data-correndo] { border-color: var(--primary); }
@media (prefers-reduced-motion: no-preference) {
  .etapa[data-correndo] { animation: etapa-correndo 1.6s ease-in-out infinite; }
}
@keyframes etapa-correndo {
  0%, 100% { background: var(--surface-base); }
  50% { background: color-mix(in srgb, var(--primary) 12%, var(--surface-base)); }
}

/* ── Celular ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .chassi { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--gutter);
  }
  .lateral__grupo { flex-direction: row; flex-wrap: wrap; }
  .sobrelinha, .cartao-versao { display: none; }

  /* A Faixa vira de duas linhas: estado e metadados em cima, Ação da vez
     ocupando a largura embaixo. A Faixa pode CRESCER; encolher, nunca. */
  .faixa {
    flex-wrap: wrap;
    padding: var(--band-y-mobile) var(--gutter);
    row-gap: var(--space-2);
  }
  .faixa__espaco { display: none; }
  .acao-vez { width: 100%; }

  /* Quatro instrumentos em fila num celular dariam ~80px por cartão, onde
     "Nenhuma Publicação ainda" quebraria em cinco linhas. Dois de largura
     mantêm o par de cima ("quanto saiu", "quando sai") visível de uma vez. */
  .comando { padding: var(--space-4); }
  .comando__instrumentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* A cabeça do pulso empilha pelo mesmo motivo que a da Esteira: desfecho e
     duração lado a lado espremeriam os dois em telas estreitas, e a duração é
     dado, não enfeite. */
  .pulso__cabeca { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .pulso__meta { text-align: left; }

  /* EXPERIENCE.md § Responsividade: "Esteira gira para vertical, com conectores
     verticais entre etapas empilhadas". Quatro colunas num celular espremeriam
     "Publicação" em duas letras e um tempo ilegível. */
  .esteira__trilha { grid-template-columns: minmax(0, 1fr); }
  .esteira__topo { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .calibracao__campos { grid-template-columns: minmax(0, 1fr); }
  /* Os Slots são a exceção: uma coluna transformaria doze horários numa rolagem
     de tela inteira, e a pergunta que esta lista responde ("a que horas isto
     publica?") exige vê-la de uma vez. */
  .calibracao__campos--slots { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .cupons { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .comando__instrumentos { grid-template-columns: minmax(0, 1fr); }
}