/* Gerado por tools/site/painel.py a partir do vitrine.css (o CSS puro do painel real). Não editar. */
.mk-root { --mk-font-texto: 'Atkinson Hyperlegible Next'; --mk-font-mono: 'Atkinson Hyperlegible Mono'; }
:host { margin: 0; }

/* ==== ..\..\packages\design-tokens\tokens.css ==== */
/* GERADO por packages/design-tokens (nx run design-tokens:generate). Não editar à mão.
 * Fonte da verdade: docs/decisoes/identidade-emmaos.md + src/lib/{scales,tokens}.ts */

/* Tema claro (o único validado no MVP; escalas nascem em OKLCH, prontas
   para a futura variante escura). Wiring do Tailwind v4 (@theme) entra em
   apps/web no Dia 2 do plano de frontend. */
:host {
  /* escala sand (modelo Radix, degraus 1-12) */
  --sand-1: #f8f8f5;
  --sand-2: #f1f1f0;
  --sand-3: #eaebe9;
  --sand-4: #e0e2e0;
  --sand-5: #d5d7d5;
  --sand-6: #caccc9;
  --sand-7: #babdba;
  --sand-8: #a3a5a2;
  --sand-9: #70746f;
  --sand-10: #646863;
  --sand-11: #515350;
  --sand-12: #1a1c1a;

  /* escala primary (modelo Radix, degraus 1-12) */
  --primary-1: #f6fcf8;
  --primary-2: #edf6f0;
  --primary-3: #e0f0e5;
  --primary-4: #d3e8da;
  --primary-5: #c5decd;
  --primary-6: #b4d3bf;
  --primary-7: #a1c4ad;
  --primary-8: #84ad93;
  --primary-9: #1d5c3b;
  --primary-10: #124f30;
  --primary-11: #214631;
  --primary-12: #16291d;

  /* escala success (modelo Radix, degraus 1-12) */
  --success-1: #f5fcf6;
  --success-2: #ebf7ed;
  --success-3: #ddf1e2;
  --success-4: #d0ead5;
  --success-5: #c0e1c7;
  --success-6: #afd5b8;
  --success-7: #9ac7a5;
  --success-8: #7cb08a;
  --success-9: #1d723e;
  --success-10: #116434;
  --success-11: #275937;
  --success-12: #112a19;

  /* escala warning (modelo Radix, degraus 1-12) */
  --warning-1: #fff9f5;
  --warning-2: #fff0e8;
  --warning-3: #ffe5d8;
  --warning-4: #ffd9c6;
  --warning-5: #f9ccb4;
  --warning-6: #f2bda0;
  --warning-7: #e7aa8a;
  --warning-8: #d48f69;
  --warning-9: #b45309;
  --warning-10: #a24800;
  --warning-11: #7a3c16;
  --warning-12: #3a1a07;

  /* escala error (modelo Radix, degraus 1-12) */
  --error-1: #fff8f7;
  --error-2: #ffefed;
  --error-3: #ffe4e0;
  --error-4: #ffd7d2;
  --error-5: #ffc7c0;
  --error-6: #fbb6ad;
  --error-7: #f1a299;
  --error-8: #df857b;
  --error-9: #ae2e2a;
  --error-10: #9b2320;
  --error-11: #82322c;
  --error-12: #3e1512;

  /* escala info (modelo Radix, degraus 1-12) */
  --info-1: #f6fbff;
  --info-2: #ebf5ff;
  --info-3: #ddedff;
  --info-4: #cfe5fc;
  --info-5: #c0daf6;
  --info-6: #aeceef;
  --info-7: #9abee4;
  --info-8: #7ca6d1;
  --info-9: #2d6ca8;
  --info-10: #225e96;
  --info-11: #2c5279;
  --info-12: #112539;

  /* tokens semânticos (mapa shadcn; identidade, seção "As cores") */
  --background: #f8f8f5;
  --foreground: #1a1c1a;
  --card: #ffffff;
  --card-foreground: #1a1c1a;
  --popover: #ffffff;
  --popover-foreground: #1a1c1a;
  --primary: #1d5c3b;
  --primary-foreground: #ffffff;
  --secondary: #eaebe9;
  --secondary-foreground: #1a1c1a;
  --muted: #eaebe9;
  --muted-foreground: #515350;
  --accent: #d3e8da;
  --accent-foreground: #16291d;
  --destructive: #ae2e2a;
  --destructive-foreground: #ffffff;
  --border: #caccc9;
  --input: #70746f;
  --ring: #1d5c3b;
  --success: #1d723e;
  --success-foreground: #ffffff;
  --success-surface: #ddf1e2;
  --success-text: #275937;
  --warning: #b45309;
  --warning-foreground: #ffffff;
  --warning-surface: #ffe5d8;
  --warning-text: #7a3c16;
  --error: #ae2e2a;
  --error-foreground: #ffffff;
  --error-surface: #ffe4e0;
  --error-text: #82322c;
  --info: #2d6ca8;
  --info-foreground: #ffffff;
  --info-surface: #ddedff;
  --info-text: #2c5279;
  --status-pendente: #515350;
  --status-pendente-tint: #eaebe9;
  --status-enviado: #1f5fa6;
  --status-enviado-tint: #e3eefa;
  --status-visualizado: #5b4b9e;
  --status-visualizado-tint: #ece8f8;
  --status-confirmado: #0e6e73;
  --status-confirmado-tint: #dff3f3;
  --status-bio: #92500d;
  --status-bio-tint: #fbebd6;
  --status-concluido: #0f6b42;
  --status-concluido-tint: #e1f3e9;
  --status-falha: #b53026;
  --status-falha-tint: #fbe6e3;
  --status-timeout: #8a4a2e;
  --status-timeout-tint: #f3e7de;
  --ink-text: #d5d7d5;
  --ink-icon: #a3a5a2;
  --ink-text-soft: #caccc9;
  --ink-text-strong: #f8f8f5;
  --brand-luz: #5ad0ac;
  --brand-tinta: #1a1c1a;
  --seal-gold: #5ad0ac;
  --seal-ink: #1a1c1a;
  --seal-surface: #f8f8f5;
  --seal-surface-strong: #f1f1f0;
  --seal-text: #1a1c1a;
  --seal-text-soft: #515350;
  --seal-node-light: #5ad0ac;
  --rito-node-light: #1d5c3b;
  --rito-node-dark: #124f30;
  --track-neutral: #e8e5df;
  --track-done: #d3ddd8;
  --warn-border: #e7c6c0;

  /* véus sobre a tinta (fora do gate numérico, precedente do --border) */
  --ink-veil-hover: rgba(255, 255, 255, 0.07);
  --ink-veil-border: rgba(255, 255, 255, 0.12);
  --veil-hover: rgba(26, 28, 26, 0.06);
  --veil-scrim: rgba(26, 28, 26, 0.42);
  --veil-petroleo-soft: rgba(29, 92, 59, 0.05);
  --veil-petroleo-border: rgba(29, 92, 59, 0.4);

  /* espaçamento (grid híbrido: 2px até 16, 4px acima; decisão 25/07/2026) */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* raio (dial 8px; identidade, seção 10) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;
  --control-min-height: 44px; /* alvo de toque universal (WCAG 2.5.8) */

  /* tipografia em rem (regime de leitura: reading é o piso da leitura
     corrida do cidadão; sm é o piso da operação densa; 2xs o piso absoluto) */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.8125rem; /* 13px */
  --text-base: 0.875rem; /* 14px */
  --text-md: 0.9375rem; /* 15px */
  --text-reading: 1rem; /* 16px */
  --text-lg: 1.0625rem; /* 17px */
  --text-xl: 1.125rem; /* 18px */
  --text-2xl: 1.375rem; /* 22px */
  --text-3xl: 1.5rem; /* 24px */
  --text-4xl: 1.75rem; /* 28px */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.5;
  --tracking-eyebrow-sm: 0.04em; /* sempre com uppercase */
  --tracking-eyebrow: 0.08em; /* sempre com uppercase */
  --tracking-eyebrow-lg: 0.12em; /* sempre com uppercase */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-sans: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  /* elevação (retrofit sem mudança visual; sombra sempre na tinta) */
  --elevation-card:
    0 1px 2px rgba(26, 28, 26, 0.045), 0 6px 16px -10px rgba(26, 28, 26, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --elevation-card-lg:
    0 1px 2px rgba(26, 28, 26, 0.045), 0 11px 28px -14px rgba(26, 28, 26, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --elevation-hero: 0 20px 50px rgba(26, 28, 26, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --elevation-contact: 0 1px 1px rgba(26, 28, 26, 0.08);
  --elevation-pill: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(26, 28, 26, 0.05);
  --elevation-dot: 0 1px 2px rgba(26, 28, 26, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --elevation-inset-track: inset 0 1px 2px rgba(26, 28, 26, 0.13);
  --elevation-sheet: 0 -12px 40px rgba(26, 28, 26, 0.2);
  --state-ring-petroleo: 0 0 0 4px rgba(29, 92, 59, 0.15); /* camada composável */
  --surface-gradient: linear-gradient(180deg, #ffffff 0%, #fdfcf9 100%);

  /* motion (easing único; durações zeram sob reduced-motion, abaixo) */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 150ms;
  --duration-moderate: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --duration-loop: 1200ms;
}

/* breakpoints (constantes documentais: var() NÃO funciona em @media).
   Estruturais reais do produto; md/lg divergem do default Tailwind de propósito.
   sm: 640px
   md: 720px
   lg: 980px
   xl: 1280px
   Fonte executável: BREAKPOINTS em @sid/design-tokens (TS/JSON). */

/* preferência de movimento reduzido: zera as durações; componentes que
   consomem var(--duration-*) respeitam de graça (efeitos de distância
   ainda precisam de tratamento próprio) */
@media (prefers-reduced-motion: reduce) {
  :host {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-moderate: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-loop: 0ms;
  }
}

/* ==== app\app.css ==== */


/* Estilos do produto (ilha auto-contida, prefixo .mk-). Deliberadamente sem
   Tailwind: o Preflight não é importado em lugar nenhum, então não há reset
   global vazando. Nasceu em app/mockup e virou a base do produto na promoção
   a rotas reais (o grupo (app) com shadcn/Tailwind foi aposentado).
   Identidade emMãos (fonte única: docs/decisoes/identidade-emmaos.md):
   papel, tinta e o verde das ações; a luz só no ponto da marca; Atkinson
   Hyperlegible Next no texto e Mono nos dados; a marca em vetor de
   packages/brand. Os apelidos de cor têm o nome da marca (FIN-162, 14/10/2026):
   --mk-verde (era --mk-petroleo), --mk-tinta (era --mk-grafite) e --mk-luz
   (era --mk-dourado). A luz é só do ponto da marca: nenhuma tela nova a usa em
   texto, borda ou fundo (docs/decisoes/marca-no-painel.md). */

.mk-root {
  /* Cor da fonte única @sid/design-tokens (o gate de contraste no CI cobre
     estes tokens). Os --mk-* são apelidos dos tokens; as classes .mk-* nem
     percebem. */
  --mk-verde: var(--primary);
  --mk-tinta: var(--foreground);
  --mk-papel: var(--background);
  --mk-surface: var(--card);
  --mk-text: var(--foreground);
  --mk-luz: var(--seal-gold);
  --mk-ambar: var(--warning);

  /* Neutros reconciliados ao gerador (decisao Maicon 16/07/2026, regra "neutros
     sempre quentes"): muted, grafite-2, petroleo-escuro e border agora vem dos
     tokens. Some o azul frio herdado da Toga Azul (#616e7c e #323f4b) e o muted
     entra no gate de contraste do CI (7,1:1 sobre o papel, era 4,8:1). */
  --mk-verde-escuro: var(--primary-10);
  --mk-tinta-2: var(--foreground);
  --mk-border: var(--border);
  --mk-muted: var(--muted-foreground);

  /* pares de status: token status-* (fg) + status-*-tint (fundo do badge) */
  --mk-pendente-fg: var(--status-pendente);
  --mk-pendente-bg: var(--status-pendente-tint);
  --mk-enviado-fg: var(--status-enviado);
  --mk-enviado-bg: var(--status-enviado-tint);
  --mk-visualizado-fg: var(--status-visualizado);
  --mk-visualizado-bg: var(--status-visualizado-tint);
  --mk-confirmado-fg: var(--status-confirmado);
  --mk-confirmado-bg: var(--status-confirmado-tint);
  --mk-bio-fg: var(--status-bio);
  --mk-bio-bg: var(--status-bio-tint);
  --mk-concluido-fg: var(--status-concluido);
  --mk-concluido-bg: var(--status-concluido-tint);
  --mk-falha-fg: var(--status-falha);
  --mk-falha-bg: var(--status-falha-tint);
  --mk-timeout-fg: var(--status-timeout);
  --mk-timeout-bg: var(--status-timeout-tint);

  /* apoio do funil "Andamento de hoje": trilho, nó do rito e selo */
  --mk-track: var(--track-neutral);
  --mk-track-done: var(--track-done);
  --mk-no-1: var(--rito-node-light);
  --mk-no-2: var(--rito-node-dark);
  --mk-selo-bg: var(--seal-surface);
  --mk-selo-fg: var(--seal-text);

  --mk-fonte:
    var(--mk-font-texto, 'Atkinson Hyperlegible Next'), system-ui, -apple-system, 'Segoe UI',
    sans-serif;
  /* a serifada de leitura saiu com o Dígito: --mk-serif fica como apelido da
     letra do sistema até os usos migrarem */
  --mk-serif: var(--mk-fonte);
  --mk-mono: var(--mk-font-mono, 'Atkinson Hyperlegible Mono'), var(--font-mono);

  /* o mesmo easing cerimonial do site: uma curva só em todo o vocabulário */
  --mk-ease: var(--ease-standard);

  font-family: var(--mk-fonte);
  color: var(--mk-text);
  background: var(--mk-papel);
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.55;
}

.mk-root * {
  box-sizing: border-box;
}

.mk-root :focus-visible {
  outline: 3px solid var(--mk-verde);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link (eMAG): fora da tela até receber foco, então aparece no topo.
   Sem transição de propósito: aparecer instantâneo respeita reduced-motion. */
.mk-skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  background: var(--mk-verde);
  color: var(--primary-foreground);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.mk-skip-link:focus {
  top: 8px;
}

/* --- Botões --- */
/* .mk-btn* saiu da ilha: componente Button em app/_components/button.tsx,
   CSS próprio em button.css (gate de tokens em modo ERRO). Aqui ficam só as
   regras CONTEXTUAIS de botão, junto do ancestral que as motiva. */

/* --- Login (split institucional) --- */
.mk-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.mk-login-hero {
  background: var(--mk-tinta);
  color: var(--mk-papel);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  /* respiro largo: a faixa é calma, a marca e a frase não encostam na borda */
  padding: clamp(32px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.mk-login-hero > * {
  position: relative;
  max-width: 480px;
}
.mk-login-meio {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* mini-rito: o que o produto faz, em três passos numerados. Sem losango e sem
   trilho (eram do Dígito); o número em Mono basta para dizer a ordem. */
.mk-login-rito {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: passo;
}
.mk-login-rito li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: var(--ink-text);
  counter-increment: passo;
}
.mk-login-rito li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mk-mono);
  color: var(--ink-text-soft);
}
.mk-login-frase {
  font-family: var(--mk-serif);
  font-weight: 600;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  max-width: 17ch;
}
.mk-login-hero-pe {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-text-soft);
}
.mk-selo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  border: 1px solid rgba(200, 155, 60, 0.55);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--mk-luz);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.13em;
  white-space: nowrap;
}
.mk-selo-proto {
  color: var(--ink-text-soft);
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* mesma regra do site: em tela estreita o protocolo cede, o selo fica */
@media (max-width: 480px) {
  .mk-selo-proto {
    display: none;
  }
}
.mk-login-form-col {
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 82% 12%, var(--veil-petroleo-soft), transparent 42%), var(--mk-papel);
}
/* o formulário senta sobre um cartão com presença própria, não flutua no papel */
.mk-login-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface-gradient);
  border: 1px solid var(--mk-border);
  border-radius: 16px;
  padding: clamp(28px, 3vw, 40px);
  /* relevo (selo vivo): a sombra de profundidade que já existia + luz no topo */
  box-shadow: var(--elevation-hero);
  animation: mk-entra 0.4s var(--mk-ease);
}
.mk-login-card-marca {
  line-height: 0;
}
.mk-login-titulo {
  font-family: var(--mk-serif);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 2px;
}
.mk-login-sub {
  margin: -6px 0 12px;
  color: var(--mk-muted);
  font-size: 14px;
}
/* troca senha -> código: entra deslizando, interrompível e curta */
.mk-etapa {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: mk-entra 0.22s var(--mk-ease);
}
/* Alerta de falha do login. Mesmos tokens do `.mk-mfa-erro`: as duas telas de
   autenticação erram do mesmo jeito, e ler dois vermelhos diferentes no mesmo
   fluxo seria ruído. */
.mk-login-erro {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--error-surface);
  color: var(--error-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

/* A ação que acompanha `sessao_ja_aberta`, a única falha do login que a pessoa
   não resolve digitando de novo. Fica dentro do alerta, herdando a cor dele:
   é uma saída para aquele problema, não um botão do formulário. Bloco próprio
   para não competir com o texto na mesma linha. */
.mk-login-erro-acao {
  display: flex;
  align-items: center;
  /* 44px de alvo de toque, a regra universal da casa (WCAG 2.5.8). O texto tem
     uma linha só; é o `min-height` que dá a área para quem toca com o dedo ou
     tem tremor. */
  min-height: var(--control-min-height);
  margin-top: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  cursor: pointer;
}

/* Enquanto o `sair()` não responde. É `aria-disabled` e não `disabled` porque o
   foco acabou de ir para este botão, e um `disabled` de verdade o devolveria ao
   nada. */
.mk-login-erro-acao[aria-disabled='true'] {
  cursor: progress;
  opacity: 0.7;
  text-decoration: none;
}

/* Confirmação de que a conta anterior saiu. Ocupa o mesmo lugar do alerta de
   falha e tem o mesmo desenho, com os tokens de sucesso no lugar dos de erro:
   a pessoa não precisa reaprender onde ler a resposta da tela. */
.mk-login-aviso {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--success-surface);
  color: var(--success-text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.mk-login-note {
  margin: 6px 0 0;
  color: var(--mk-muted);
  font-size: 12.5px;
}
.mk-login-rodape-mobile {
  display: none;
}
@keyframes mk-entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@media (max-width: 860px) {
  .mk-login {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  /* faixa de marca compacta: o formulário fica na primeira dobra */
  .mk-login-hero {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    min-height: 0;
  }
  .mk-login-rito,
  .mk-login-hero-pe {
    display: none;
  }
  .mk-login-meio {
    gap: 0;
  }
  .mk-login-frase {
    font-family: var(--mk-fonte);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    max-width: none;
    color: var(--ink-text);
  }
  .mk-login-frase em {
    font-style: normal;
    color: var(--ink-text);
  }
  .mk-login-form-col {
    align-content: start;
    padding: 24px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .mk-login-card {
    max-width: 440px;
    gap: 12px;
  }
  /* rodapé institucional: o selo continua presente, agora depois do formulário */
  .mk-login-rodape-mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
    margin: 24px -20px 0;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
    background: var(--mk-tinta);
    color: var(--ink-text-soft);
    font-size: 13px;
  }
}

/* --- Campos --- */
.mk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--mk-tinta-2);
}
.mk-field input,
.mk-field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--mk-border);
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
  font-size: 16px;
  color: var(--mk-text);
  background: var(--mk-surface);
}
.mk-field input:disabled {
  background: var(--mk-papel);
  color: var(--mk-muted);
}
.mk-field input:focus-visible,
.mk-field select:focus-visible {
  outline: 3px solid var(--mk-verde);
  outline-offset: 0;
  border-color: var(--mk-verde);
}
.mk-field-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mk-field-dica {
  font-weight: 400;
  font-size: 12px;
  color: var(--mk-muted);
}
/* O campo e o aviso de erro dele, lado a lado na grade do par. */
.mk-field-grupo {
  display: grid;
  gap: 6px;
  align-content: start;
}
.mk-field-erro {
  font-size: 12px;
  color: var(--mk-falha-fg);
}

/* --- Shell: sidebar flutuante (painel) + conta no rodapé --- */
.mk-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  min-height: 100vh;
  align-items: start;
}
.mk-sidebar {
  position: sticky;
  top: 10px;
  height: calc(100vh - 20px);
  background: var(--mk-tinta);
  color: var(--mk-papel);
  border-radius: 8px; /* o raio do botão, no container do menu */
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mk-logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--mk-papel);
}
.mk-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mk-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--ink-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition:
    background 0.15s,
    color 0.15s;
}
.mk-nav-icone {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-icon);
  transition: color 0.15s;
}
.mk-nav-icone svg {
  width: 100%;
  height: 100%;
}
.mk-nav-item:hover {
  background: var(--ink-veil-hover);
  color: var(--mk-papel);
}
.mk-nav-item:hover .mk-nav-icone {
  color: var(--ink-text);
}
.mk-nav-item.mk-active {
  background: var(--mk-verde);
  color: var(--primary-foreground);
}
.mk-nav-item.mk-active .mk-nav-icone {
  color: var(--primary-foreground);
}
/* anel de foco claro no chrome escuro: o petróleo sobre grafite reprova 3:1 */
.mk-sidebar :focus-visible,
.mk-topbar :focus-visible,
.mk-tabbar :focus-visible,
.mk-sheet :focus-visible {
  outline: 2px solid var(--mk-papel);
  outline-offset: 2px;
}
/* rodapé: conta (quem sou) empurrada para baixo, com ações de sistema */
.mk-sidebar-rodape {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mk-conta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 12px;
  border-bottom: 1px solid var(--ink-veil-border);
}
.mk-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mk-verde);
  color: var(--primary-foreground);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12.5px;
  flex: none;
}
.mk-avatar-lg {
  width: 44px;
  height: 44px;
  font-size: 15px;
}
.mk-conta-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mk-conta-nome {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mk-papel);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-conta-papel {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(
    --ink-text-soft
  ); /* on-ink: o muted do tema claro reprova sobre grafite (2,83:1); par no gate */
}
.mk-sidebar-acoes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mk-side-acao {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-text-soft);
  font: 500 13px/1.3 var(--mk-fonte);
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.12s var(--mk-ease);
}
.mk-side-acao:hover {
  background: var(--ink-veil-hover);
  color: var(--mk-papel);
}
.mk-side-acao:active {
  transform: scale(0.98);
}
.mk-reiniciar-icone {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
}
.mk-girando {
  animation: mk-spin 0.5s var(--mk-ease);
}
@keyframes mk-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.mk-content {
  padding: 20px clamp(16px, 2vw, 30px) 44px;
  min-width: 0;
}

/* O aviso permanente do painel de demonstração (05/09/2026).
 *
 * Mesma forma do aviso da certidão (`.mk-cert-simulacao`), de propósito: é a
 * mesma frase e o mesmo fato, e duas aparências para o mesmo aviso ensinariam
 * o olho a tratar um deles como decoração.
 *
 * Aparece duas vezes na página, no topo e no fim do conteúdo. O porquê está no
 * layout do painel: o vídeo circula recortado, e na entrega vertical um
 * recorte 1:1 pega o miolo da tela. */
.mk-simulacao {
  /* **Largura inteira, e não `fit-content`.** A primeira versão media só o
     texto, e a mesa de crítica sobre o vídeo pronto mediu o buraco: a faixa
     ficava presa à coluna da esquerda, e um recorte 1:1 do quadro (1080 por
     1080 num vídeo de 1920 por 1080, isto é altura inteira e 56% da largura)
     deslizado para a direita mostrava as colunas SITUAÇÃO e AÇÃO da fila, que
     é a parte mais reconhecível da tela, sem um pixel do aviso. Regra 4 da
     seção 3.1 do `docs/roteiro-demo-video.md`: cada recorte contém o aviso, ou
     não contém nenhum pixel de interface. */
  display: block;
  margin: 0 0 var(--space-4);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--info-surface);
  color: var(--info-text);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow-sm);
  text-transform: uppercase;
}

/* O de baixo respira acima em vez de abaixo: ele fecha a página. */
.mk-simulacao:last-child {
  margin: var(--space-6) 0 0;
}

/* chrome mobile (topbar + bottom tab bar + sheet): oculto no desktop */
.mk-topbar,
.mk-tabbar,
.mk-sheet,
.mk-sheet-scrim {
  display: none;
}

/* --- Cabeçalho de página --- */
.mk-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  animation: mk-entra 0.22s var(--mk-ease);
}
.mk-page-head h1 {
  margin: 0;
  font-family: var(--mk-serif);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mk-page-head-titulo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mk-page-sub {
  font-size: 13.5px;
  color: var(--mk-muted);
}
.mk-trilha {
  margin-bottom: 10px;
  font-size: 14px;
  animation: mk-entra 0.22s var(--mk-ease);
}
/* aviso pós-ação (role=status): confirma o que acabou de acontecer */
.mk-aviso {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--mk-confirmado-fg);
  border-radius: 8px;
  background: var(--mk-confirmado-bg);
  color: var(--mk-confirmado-fg);
  font-size: 14px;
  font-weight: 500;
  animation: mk-entra 0.3s var(--mk-ease);
}

/* --- Card --- */
.mk-card {
  background: var(--surface-gradient);
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 18px;
  /* relevo (selo vivo): luz no topo, sombra ambiente baixa. A linguagem de
     superfície agora vale na demo inteira, não só no Início. */
  box-shadow: var(--elevation-card);
}
.mk-card-titulo {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mk-muted);
}

/* --- Readout de contexto (linha fina de instrumento no topo da Home) --- */
.mk-readout {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin: -8px 0 20px;
  font-size: 13px;
  color: var(--mk-muted);
  font-variant-numeric: tabular-nums;
}
.mk-readout b {
  color: var(--mk-tinta-2);
  font-weight: 600;
}
.mk-readout-sep {
  opacity: 0.45;
}
.mk-readout-vivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* ponto "ao vivo": círculo cheio + anel que expande e desvanece, sinal
   discreto de atualização em tempo real (porte de .pulse-ring do app novo).
   O texto ao lado já diz "atualizado agora": a cor/animação nunca é o único
   veículo. Desligado sob prefers-reduced-motion (eMAG). */
.mk-pulso {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mk-concluido-fg);
  flex: none;
}
.mk-pulso::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--mk-concluido-fg);
  opacity: 0.4;
  animation: mk-pulso-anel 2.4s ease-out infinite;
}
@keyframes mk-pulso-anel {
  0% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-pulso::after {
    animation: none;
  }
}

/* --- Andamento de hoje: funil horizontal agregado (porte do AndamentoStrip do
   app novo). Nós em petróleo, trilho neutro, e o único dourado é o placar de
   certidões, porque dourado é reservado à prova (selo/certidão). --- */
.mk-espinha {
  padding: 18px 22px 20px;
  background: var(--surface-gradient);
  box-shadow: var(--elevation-card-lg);
}
.mk-espinha-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.mk-espinha-titulo {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-espinha-selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--mk-luz);
  background: var(--mk-selo-bg);
  color: var(--mk-selo-fg);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.mk-espinha-selo-marca {
  width: 11px;
  height: 11px;
  background: var(--mk-luz);
  border-radius: 2px;
  transform: rotate(45deg);
  flex: none;
}
.mk-espinha-nos {
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
}
.mk-espinha-no {
  position: relative;
  flex: 1;
  min-width: 4rem;
  padding-top: 30px;
  text-align: center;
}
/* trilho entre nós (some no último) */
.mk-espinha-no::before {
  content: '';
  position: absolute;
  left: 50%;
  right: -50%;
  top: 11px;
  height: 6px;
  border-radius: 3px;
  background: var(--mk-track);
  box-shadow: var(--elevation-inset-track);
}
.mk-espinha-no:last-child::before {
  display: none;
}
.mk-espinha-no-done::before {
  background: var(--mk-track-done);
}
.mk-espinha-dot {
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  box-shadow: var(--elevation-dot);
  z-index: 1;
}
.mk-espinha-no-done .mk-espinha-dot {
  border-color: var(--mk-verde-escuro);
  background: radial-gradient(circle at 50% 32%, var(--mk-no-1), var(--mk-no-2));
}
.mk-espinha-no-atual .mk-espinha-dot {
  border: 2px solid var(--mk-verde);
  box-shadow:
    0 1px 2px rgba(31, 41, 51, 0.16),
    0 0 0 4px rgba(20, 99, 86, 0.15);
  animation: mk-pulsa 1.6s ease-in-out infinite;
}
.mk-espinha-count {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: var(--mk-text);
  font-variant-numeric: tabular-nums;
}
.mk-espinha-no-atual .mk-espinha-count {
  color: var(--mk-verde);
}
.mk-espinha-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--mk-muted);
  white-space: nowrap;
}

/* resumo + toggle do funil: só no mobile (base = escondido no desktop) */
.mk-espinha-resumo {
  display: none;
}
/* resumo como par de estatísticas: dois numerais em serifa (mesma voz das
   contagens do funil) com rótulos pequenos em caixa alta e uma seta fina
   desenhada. O desfecho (concluídos) em petróleo, para dar o peso do que
   importa; certidões continua no chip dourado acima. */
.mk-resumo-stats {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.mk-resumo-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mk-resumo-num {
  font-family: var(--mk-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--mk-tinta);
  font-variant-numeric: tabular-nums;
}
.mk-resumo-num-fim {
  color: var(--mk-verde);
}
.mk-resumo-rot {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-resumo-seta {
  position: relative;
  flex: none;
  width: 26px;
  height: 2px;
  margin-top: 13px;
  background: var(--mk-border);
}
.mk-resumo-seta::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--mk-border);
  border-right: 2px solid var(--mk-border);
  transform: translateY(-50%) rotate(45deg);
}
.mk-espinha-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--mk-border);
  border-radius: 8px;
  background: var(--mk-surface);
  color: var(--mk-verde);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s;
}
.mk-espinha-toggle:hover {
  border-color: var(--mk-tinta-2);
}
.mk-espinha-chevron {
  font-size: 11px;
  line-height: 1;
}

/* Mobile (720px é onde a demo vira topbar + tab bar): o funil recolhe para o
   resumo; as 5 etapas aparecem na vertical (linguagem da timeline do detalhe)
   só quando o toggle expande. */
@media (max-width: 720px) {
  .mk-espinha-resumo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .mk-espinha-nos {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
    margin-top: 14px;
  }
  .mk-espinha[data-aberto='true'] .mk-espinha-nos {
    display: flex;
  }
  .mk-espinha-no {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: none;
    min-width: 0;
    padding: 0 0 14px 24px;
    text-align: left;
  }
  .mk-espinha-no:last-child {
    padding-bottom: 0;
  }
  /* trilho vertical (some no último), no lugar do horizontal do desktop */
  .mk-espinha-no::before {
    left: 6px;
    right: auto;
    top: 18px;
    bottom: -2px;
    width: 2px;
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .mk-espinha-no:last-child::before {
    display: none;
  }
  .mk-espinha-dot {
    left: 0;
    top: 3px;
    transform: none;
    width: 14px;
    height: 14px;
  }
  .mk-espinha-count {
    font-size: 16px;
  }
  .mk-espinha-label {
    margin-top: 0;
    font-size: 13.5px;
    white-space: normal;
  }
}

/* --- As três colunas da Home (central de comando) --- */
.mk-colunas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
.mk-coluna {
  margin-bottom: 0;
  padding: 16px 18px 18px;
  /* o relevo vem de .mk-card (a coluna é um .mk-card) */
}
/* cabeçalho do painel: título + contagem, clicável para a fila filtrada */
.mk-coluna-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--mk-border);
  text-decoration: none;
  color: inherit;
}
.mk-coluna-titulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-coluna-titulo::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--mk-muted);
  transform: rotate(45deg);
  flex: none;
}
.mk-coluna-count {
  font-family: var(--mk-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--mk-tinta);
  font-variant-numeric: tabular-nums;
}
.mk-coluna-cab:hover .mk-coluna-titulo {
  color: var(--mk-tinta-2);
}
.mk-tom-ok .mk-coluna-titulo::before {
  background: var(--mk-concluido-fg);
}
.mk-tom-ok .mk-coluna-count {
  color: var(--mk-concluido-fg);
}
.mk-tom-erro .mk-coluna-titulo::before {
  background: var(--mk-falha-fg);
}
.mk-tom-erro .mk-coluna-count {
  color: var(--mk-falha-fg);
}
.mk-coluna-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mk-coluna-meta {
  font-size: 13px;
  color: var(--mk-muted);
  line-height: 1.4;
}
.mk-coluna-acao {
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mk-verde);
  white-space: nowrap;
}
.mk-coluna-vazio {
  color: var(--mk-muted);
  font-size: 13.5px;
  margin: 2px 0 0;
}
.mk-coluna-vermais {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mk-verde);
  text-decoration: none;
}
.mk-coluna-vermais::after {
  content: ' →';
}
.mk-coluna-vermais:hover {
  text-decoration: underline;
}

/* --- Listas --- */
.mk-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mk-lista-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--mk-border);
  text-decoration: none;
  color: var(--mk-text);
  border-radius: 6px;
}
.mk-lista li:last-child .mk-lista-item {
  border-bottom: none;
}
.mk-lista-item:hover {
  background: var(--mk-papel);
}
.mk-lista-nome {
  font-weight: 500;
}
/* Linha da coluna do Início: pilha vertical (nome, meta, tags) com a tag de
   status por linha. Porte do padrão de tags do Início do app novo. */
.mk-coluna-linha {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.mk-coluna-linha .mk-lista-nome {
  font-weight: 600;
}
.mk-coluna-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin-top: 3px;
}

/* --- Tabela (a fila de trabalho) --- */
.mk-tabela-wrap {
  padding: 0;
  overflow-x: auto;
}
.mk-tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15.5px;
}
.mk-tabela th,
.mk-tabela td {
  text-align: left;
  padding: 11px 18px;
  border-bottom: 1px solid var(--mk-border);
}
.mk-tabela th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mk-muted);
  background: var(--mk-papel);
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--mk-border);
}
.mk-linha {
  cursor: pointer;
}
.mk-tabela tbody tr {
  transition: background 0.12s ease-out;
  animation: mk-entra 0.3s var(--mk-ease);
}
.mk-tabela tbody tr:hover {
  background: var(--mk-papel);
}
/* linha inteira clicável responde ao toque com um flash instantâneo */
.mk-tabela tbody tr.mk-linha:active {
  background: var(--mk-border);
  transition: background 0.05s;
}
.mk-tabela tbody tr:last-child td {
  border-bottom: none;
}
.mk-td-nome {
  font-weight: 500;
}
.mk-th-acao,
.mk-td-acao {
  text-align: right;
}
/* Os estados da espera da fila (carregando e erro). Mesmo respiro e mesma cor
   do vazio da tabela, para a troca pela lista não mudar o ritmo da página. O
   erro usa a cor do texto, e não a apagada: é informação que pede ação. */
.mk-lista-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 28px 18px;
  color: var(--mk-muted);
  text-align: center;
}
.mk-lista-estado p {
  margin: 0;
}
.mk-lista-erro {
  color: var(--mk-text);
}
/* A atualização que falhou com a tabela na tela não bloqueia nada: faixa
   baixa, texto e botão na mesma linha, para não empurrar a tabela nem vestir o
   peso da falha que deixa a tela vazia. Em tela estreita, o botão desce. */
.mk-lista-aviso {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 12px 18px;
}

/* Texto que só o leitor de tela lê: sai da tela e continua na árvore de
   acessibilidade. `display: none` e `visibility: hidden` tirariam das duas. */
.mk-leitor-apenas {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mk-td-vazio {
  color: var(--mk-muted);
  text-align: center;
  padding: 28px 18px;
}

/* --- Filtros da fila --- */
.mk-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.mk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mk-chip {
  font: 600 13.5px/1 var(--mk-fonte);
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--mk-border);
  background: var(--mk-surface);
  color: var(--mk-tinta-2);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.mk-chip:hover {
  border-color: var(--mk-tinta-2);
}
.mk-chip:active {
  transform: scale(0.96);
}
.mk-chip-on {
  background: var(--mk-tinta);
  border-color: var(--mk-tinta);
  color: var(--mk-papel);
}
.mk-busca {
  /* 16px: abaixo disso o iOS dá zoom automático ao focar */
  font: 400 16px/1.2 var(--mk-fonte);
  padding: 10px 14px;
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  background: var(--mk-surface);
  color: var(--mk-text);
  min-width: min(280px, 100%);
}
.mk-busca:focus-visible {
  outline: 3px solid var(--mk-verde);
  outline-offset: 0;
  border-color: var(--mk-verde);
}
.mk-link {
  color: var(--mk-verde);
  font-weight: 600;
  text-decoration: none;
}
.mk-link:hover {
  text-decoration: underline;
}
.mk-mono {
  font-family: var(--mk-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  /* número de processo e protocolo nunca quebram no hífen */
  white-space: nowrap;
}
/* Endereço de e-mail: sem espaço para quebrar e sem teto de tamanho. Mantido
   em uma linha, um endereço longo passa da borda do card na folha A4. */
.mk-mono.mk-quebra {
  white-space: normal;
  overflow-wrap: anywhere;
}
.mk-tabela .mk-link {
  white-space: nowrap;
}

/* --- Sinalização de ajuste cadastral (RF09.4, 19/09/2026) --- */
/* O "não sou o intimado" já é um desfecho CONCLUÍDO (ehConcluido), com
   certidão; o que falta é o órgão corrigir, em outro cadastro que o Dígito
   não tem, o telefone ou o CPF que apontou para a pessoa errada. Este cartão
   avisa que existe esse trabalho e leva ao filtro que o isola; não usa cor de
   alerta (laranja/vermelho) porque não é uma falha do sistema, e a sessão de
   09/09/2026 já mediu que uma caixa de alerta pesada faz o olho ler "perigo"
   antes de ler o texto (ver a nota de `.fc-dominio b` acima). */
.mk-sinal-cadastral {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 18px;
}
.mk-sinal-cadastral p {
  margin: 0;
  flex: 1 1 240px;
}
.mk-sinal-cadastral-icone {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--mk-muted);
}
/* Marcador por linha: mesma regra eMAG do badge (ícone + texto, nunca só
   cor), em porte de legenda para não competir com o badge de status que já
   ocupa a célula. */
.mk-marcador-cadastral {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mk-muted);
}
.mk-marcador-cadastral-icone {
  width: 12px;
  height: 12px;
  flex: none;
}

/* --- Badges de status (fundo tintado + texto na cor do status) --- */
.mk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  /* relevo (selo vivo): brilho interno no topo, sombra de contato mínima */
  box-shadow: var(--elevation-pill);
}
/* ícone de status (Lucide), na cor do próprio status; forma distinta por
   estado, no lugar do losango da marca que antes se repetia em toda tag. */
.mk-badge-icone {
  width: 13px;
  height: 13px;
  flex: none;
}
.mk-badge-lg .mk-badge-icone {
  width: 15px;
  height: 15px;
}
.mk-badge-lg {
  font-size: 13.5px;
  padding: 7px 16px;
}
/* remontada via key={status}: replay curto quando o status muda ao vivo */
.mk-badge-viva {
  animation: mk-badge-marca 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mk-badge-marca {
  from {
    opacity: 0.4;
    transform: scale(0.96);
  }
}
/* Resultado e motivo do desfecho colapsado (pedido do Daniel Cova,
   23/09/2026): os quatro desfechos concluídos (COMPLETED, FAILED, TIMED_OUT,
   RECIPIENT_MISMATCH) mostram "Concluído" (linha 1, `.mk-badge-rotulo-linha`)
   com o resultado numa segunda linha (`.mk-badge-resultado-linha`) e, só nos
   três negativos, a causa numa terceira (`.mk-badge-motivo-linha`) - ver
   `motivoSituacao` em status-legal.ts. O texto do badge sempre vem embrulhado
   em `.mk-badge-texto`; as linhas 2 e 3 só aparecem quando há resultado.
   Fonte de 12px (mínimo pedido pela revisão de 23/09; era 10,5px) e cor
   sempre via token: `var(--mk-muted)` mede acima de 6,4:1 sobre as três
   tintas de fundo do badge (completed, failed, timed_out), medido em
   tools/medir-badge.mjs. */
.mk-badge-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: normal;
}
.mk-badge-motivo {
  align-items: flex-start;
  padding-top: 5px;
  padding-bottom: 5px;
}
.mk-badge-motivo .mk-badge-icone {
  margin-top: 1px;
}
.mk-badge-resultado-linha,
.mk-badge-motivo-linha {
  font-size: 12px;
  font-weight: 500;
  /* Cor sempre via token, nunca hex/rgb cru (design-system.md). */
  color: var(--mk-muted);
}
.mk-status-pending {
  color: var(--mk-pendente-fg);
  background: var(--mk-pendente-bg);
}
.mk-status-sent {
  color: var(--mk-enviado-fg);
  background: var(--mk-enviado-bg);
}
.mk-status-viewed {
  color: var(--mk-visualizado-fg);
  background: var(--mk-visualizado-bg);
}
.mk-status-confirmed {
  color: var(--mk-confirmado-fg);
  background: var(--mk-confirmado-bg);
}
.mk-status-identity_started {
  color: var(--mk-bio-fg);
  background: var(--mk-bio-bg);
}
.mk-status-completed {
  color: var(--mk-concluido-fg);
  background: var(--mk-concluido-bg);
}
.mk-status-failed {
  color: var(--mk-falha-fg);
  background: var(--mk-falha-bg);
}
.mk-status-timed_out {
  color: var(--mk-timeout-fg);
  background: var(--mk-timeout-bg);
}
.mk-status-cancelled {
  color: var(--mk-falha-fg);
  background: var(--mk-falha-bg);
}

/* --- Detalhe: painel + fone lado a lado --- */
.mk-detalhe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}
.mk-detalhe-fone {
  position: sticky;
  top: 20px;
}
.mk-detalhe-fone-titulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mk-muted);
  margin: 0 0 10px;
  text-align: center;
}
@media (max-width: 980px) {
  .mk-detalhe-grid {
    grid-template-columns: 1fr;
  }
  .mk-detalhe-fone {
    position: static;
    max-width: 340px;
    margin: 0 auto;
  }
}

.mk-detalhe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 18px;
}
/* em telas largas, mais campos por linha em vez de células esticadas */
@media (min-width: 1280px) {
  .mk-detalhe {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mk-detalhe > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 15px;
}
.mk-rot {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mk-muted);
  font-weight: 600;
}

/* --- Timeline vertical do rito --- */
.mk-linha-rito {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mk-no {
  position: relative;
  padding: 0 0 18px 30px;
}
.mk-no:last-child {
  padding-bottom: 0;
}
.mk-no::before {
  /* trilho */
  content: '';
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: -2px;
  width: 2px;
  background: var(--mk-border);
}
.mk-no:last-child::before {
  display: none;
}
.mk-no-marca {
  position: absolute;
  left: 0;
  top: 4px;
  width: 13px;
  height: 13px;
  background: var(--mk-border);
  transform: rotate(45deg);
  transition:
    background 0.3s var(--mk-ease),
    transform 0.3s var(--mk-ease);
}
.mk-no-titulo {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--mk-muted);
}
.mk-no-hora {
  margin-left: 8px;
  font-weight: 500;
  font-size: 12px;
  color: var(--mk-muted);
  font-variant-numeric: tabular-nums;
}
.mk-no-desc {
  font-size: 13px;
  color: var(--mk-muted);
  margin: 2px 0 0;
  display: none;
}
.mk-no-done .mk-no-marca {
  background: var(--mk-verde);
}
.mk-no-done .mk-no-titulo {
  color: var(--mk-text);
}
.mk-no-done::before {
  background: var(--mk-verde);
}
/* o nó atual cresce de leve além de pulsar: o olho encontra o agora */
.mk-no-atual .mk-no-marca {
  background: var(--mk-verde);
  transform: rotate(45deg) scale(1.18);
  animation: mk-pulsa 1.4s ease-in-out infinite;
}
.mk-no-atual .mk-no-titulo {
  color: var(--mk-verde);
}
.mk-no-atual .mk-no-desc {
  display: block;
  color: var(--mk-tinta-2);
}
.mk-no-erro .mk-no-marca {
  background: var(--mk-falha-fg);
  animation: none;
}
.mk-no-erro .mk-no-titulo {
  color: var(--mk-falha-fg);
}
.mk-no-erro .mk-no-desc {
  display: block;
}
@keyframes mk-pulsa {
  50% {
    opacity: 0.45;
  }
}

/* --- Certidão (aparece no COMPLETED) --- */
.mk-certidao {
  border: 1px solid var(--mk-border);
  border-radius: 10px;
  padding: 16px 18px;
  background: var(--mk-papel);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.mk-certidao-titulo {
  font-family: var(--mk-serif);
  font-weight: 600;
  font-size: 17px;
}
.mk-certidao-meta {
  font-size: 13px;
  color: var(--mk-muted);
}
/* o único lugar do painel onde o dourado é permitido; sobre grafite (5,3:1),
   nunca sobre claro (2,5:1, reprovado) */
.mk-certidao .mk-selo-chip {
  background: var(--mk-tinta);
  border-color: var(--mk-tinta);
  padding: 9px 15px;
  font-size: 10.5px;
}
.mk-certidao-conferir {
  font-size: 14px;
}

/* --- Contexto jurídico e anexos --- */
.mk-contexto {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--mk-border);
  font-size: 13.5px;
  color: var(--mk-muted);
  line-height: 1.5;
  max-width: 75ch;
}
.mk-anexo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--mk-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 13.5px;
  background: var(--mk-papel);
  align-self: flex-start;
}
.mk-anexo-mini {
  padding: 3px 8px;
  font-size: 12.5px;
  background: var(--mk-surface);
}
.mk-anexo-pdf {
  background: var(--status-falha);
  color: var(--error-foreground);
  font-size: 8.5px;
  font-weight: 700;
  border-radius: 4px;
  padding: 4px 5px;
  letter-spacing: 0.04em;
}
/* Borda contínua: o pontilhado foi recusado na marca emMãos (14/10). */
.mk-dropzone {
  border: 1.5px solid var(--mk-border);
  border-radius: 8px;
  padding: 16px;
  font: 500 14px/1.4 var(--mk-fonte);
  color: var(--mk-muted);
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.mk-dropzone:hover {
  border-color: var(--mk-verde);
  color: var(--mk-verde);
}
.mk-detalhe-acoes {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

/* O aviso que acompanha o reenvio no "não é o intimado": ele diz para qual
 * número a comunicação nova vai. Texto atenuado, sem cor de alerta: é
 * informação que evita um clique errado, e não um erro que aconteceu. */
.mk-detalhe-acoes-nota {
  /* Linha inteira, e alinhada à direita junto do botão: o contêiner empurra o
     conteúdo para a direita, e uma nota de duas linhas encolhida ao lado do
     botão quebraria em palavras soltas. */
  flex: 1 1 100%;
  margin: 0;
  text-align: right;
  color: var(--mk-muted);
  font-size: var(--text-2xs);
}

/* --- Cadastro com prévia --- */
/* miolo full width, leitura disciplinada: o formulário tem teto próprio
   (campos acima de ~700px ficam ilegíveis), a prévia continua um aparelho */
.mk-cadastro-grid {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(340px, 400px);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}
.mk-cadastro-grid > * {
  min-width: 0;
}
.mk-cadastro-grid .mk-form {
  max-width: none;
  margin-bottom: 0;
}
.mk-previa {
  position: sticky;
  top: 20px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mk-previa-msg {
  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- pele do WhatsApp na prévia do cadastro (mesma exceção do .fc-*) */
  background: #efeae2;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.5;
}
.mk-previa-msg p {
  margin: 0;
  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- pele do WhatsApp na prévia do cadastro (mesma exceção do .fc-*) */
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: var(--elevation-contact);
}
.mk-previa-botao {
  border: 1px solid var(--veil-petroleo-border);
  color: var(--mk-verde);
  border-radius: 8px;
  text-align: center;
  padding: 8px;
  font-weight: 600;
  font-size: 13px;
  background: var(--veil-petroleo-soft);
}
.mk-previa-selo {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: var(--mk-tinta-2);
  text-align: center;
}
@media (max-width: 980px) {
  .mk-cadastro-grid {
    grid-template-columns: 1fr;
  }
  .mk-previa {
    position: static;
  }
}

/* --- Conferência pública --- */
.mk-conf {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.mk-conf-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 16px clamp(20px, 5vw, 48px);
  border-bottom: 1px solid var(--mk-border);
  background: var(--mk-surface);
}
/* A palavra pequena (pedido de 14/10, "reduza a marca"): o SVG vem no corte
   pequeno, desenhado a 40 px de corpo, e o CSS fixa a largura. A altura segue
   a proporção. Larguras: 96 px na barra lateral, 112 px na faixa do login,
   88 px no topo da conferência. */
.mk-palavra-barra svg,
.mk-palavra-faixa svg,
.mk-palavra-topo svg {
  display: block;
  height: auto;
}
.mk-palavra-barra svg {
  width: 96px;
}
.mk-palavra-faixa {
  line-height: 0;
}
.mk-palavra-faixa svg {
  width: 112px;
}
.mk-palavra-topo {
  line-height: 0;
}
.mk-palavra-topo svg {
  width: 88px;
}
.mk-conf-desc {
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-conf-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: clamp(40px, 8vh, 80px) 24px 60px;
}
/* o gesto do carimbo (o Giro entra grande e assenta): exclusivo do desfecho
   "documento verdadeiro", consumido por .mk-conf-carimba mais abaixo */
@keyframes mk-carimba {
  from {
    opacity: 0;
    transform: scale(1.35) rotate(-6deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.97) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
.mk-conf-corpo h1 {
  font-family: var(--mk-serif);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  margin: 0;
}
.mk-conf-corpo .mk-selo-chip {
  background: var(--mk-tinta);
  border-color: var(--mk-tinta);
  align-self: flex-start;
}
.mk-conf-dados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: var(--space-4) var(--space-8);
  margin: 0;
  text-align: left;
  /* relevo NEGATIVO (selo seco de cartório): a prova assenta para dentro,
     em contraste com o cartão cerimonial elevado que a envolve */
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--mk-border);
  border-radius: var(--radius-lg);
  background: var(--secondary);
  box-shadow: var(--elevation-inset-track);
}
.mk-conf-dados dt {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--mk-muted);
  font-weight: var(--font-weight-semibold);
}
.mk-conf-dados dd {
  margin: var(--space-0-5) 0 0;
  font-size: var(--text-reading);
}
/* O hash ocupa a linha inteira e quebra em qualquer ponto: são 64 caracteres
   sem espaço, e numa coluna de 220px eles estourariam a grade. Corpo menor
   porque o número é para conferir, não para ler corrido. */
.mk-conf-hash {
  grid-column: 1 / -1;
}
.mk-conf-hash dd {
  font-size: var(--text-xs);
  word-break: break-all;
}
.mk-conf-nota {
  max-width: 52ch;
  font-size: 14px;
  color: var(--mk-muted);
}
@media (max-width: 560px) {
  .mk-conf-dados {
    grid-template-columns: 1fr;
  }
}

/* --- Conferência por upload (spec docs/design/conferencia-upload.md v2;
   anatomia de 25/07, arbitrada dos pareceres de diagramação, motion e cor) ---
   Tela do cidadão: leitura no piso de 16px (--text-reading), alvo de toque
   44px (--control-min-height), tokens em tudo (nasce sob o lint).
   Regras da composição: eixo ÚNICO à esquerda numa coluna de 56ch; o relevo
   pertence à ação (cartão de upload) e à resposta cerimonial (desfecho
   verdadeiro); todo o resto é plano. O gesto do carimbo é exclusivo do
   desfecho positivo. Único loop permitido: a barra indeterminada. */
.mk-conf-upload {
  gap: var(--space-8);
  text-align: left;
}
.mk-conf-upload > * {
  width: min(100%, 56ch);
}
/* bloco de identidade da tela: o que é, por que confiar, onde estou.
   Colagem forte (8px) dentro do grupo, respiro largo (32px) entre grupos. */
.mk-conf-identidade {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
/* rótulo de PROCESSO, não de resultado: neutro de propósito, para a família
   info significar exclusivamente "documento de exemplo" nesta tela */
.mk-conf-ambiente {
  font: var(--font-weight-bold) var(--text-2xs) / 1 var(--font-sans);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: var(--secondary);
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-sm);
}
.mk-conf-lede,
.mk-conf-dominio,
.mk-conf-aviso-legado {
  max-width: 56ch;
  font-size: var(--text-reading);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.mk-conf-dominio {
  color: var(--mk-muted);
}
.mk-conf-aviso-legado {
  font-size: var(--text-base);
  color: var(--warning-text);
  background: var(--warning-surface);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}
.mk-conf-resultado {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.mk-conf-resultado section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mk-conf-passos {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-reading);
  line-height: var(--leading-relaxed);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* o cartão INTEIRO é o alvo de toque; o input real fica oculto mas focável.
   Única ação da página: carrega o relevo cerimonial que a tela por protocolo
   já usava (gradiente + elevação), acima de qualquer outro bloco. */
.mk-conf-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: calc(var(--control-min-height) * 3);
  padding: var(--space-8) var(--space-6);
  border: 2px solid var(--input);
  border-radius: var(--radius-xl);
  background: var(--surface-gradient);
  box-shadow: var(--elevation-card-lg);
  cursor: pointer;
  text-align: center;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.mk-conf-drop:hover {
  border-color: var(--primary);
}
.mk-conf-drop:active {
  transform: scale(0.99);
}
.mk-conf-drop:focus-within {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}
/* drag-over (desktop; touch nunca dispara): a moldura fecha e acolhe */
.mk-conf-drop-sobre {
  border-style: solid;
  border-color: var(--primary);
  background: var(--secondary);
}
.mk-conf-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.mk-conf-drop-icone {
  width: 28px;
  height: 28px;
  color: var(--primary);
}
.mk-conf-drop-titulo {
  font: var(--font-weight-semibold) var(--text-lg) / var(--leading-snug) var(--font-sans);
  color: var(--primary);
}
.mk-conf-drop-dica {
  font-size: var(--text-base);
  color: var(--mk-muted);
}
.mk-conf-drop-erro {
  margin: var(--space-2) 0 0;
  font-size: var(--text-reading);
  color: var(--error-text);
  background: var(--error-surface);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  animation: mk-conf-fade var(--duration-fast) var(--ease-standard) both;
}
@keyframes mk-conf-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.mk-conf-papel-link {
  align-self: flex-start;
  border: none;
  background: none;
  padding: var(--space-2) 0;
  min-height: var(--control-min-height);
  font: var(--font-weight-medium) var(--text-reading) / var(--leading-normal) var(--font-sans);
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mk-conf-baixar {
  margin: 0;
  font-size: var(--text-base);
  color: var(--mk-muted);
}
/* "verificando": herda a geometria do cartão de upload (sem salto de layout)
   e assenta no lugar dele; a barra indeterminada é o único loop da tela */
.mk-conf-verificando {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  min-height: calc(var(--control-min-height) * 3);
  padding: var(--space-8) var(--space-6);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-gradient);
  box-shadow: var(--elevation-card-lg);
  animation: mk-conf-recebe var(--duration-base) var(--ease-standard) both;
}
@keyframes mk-conf-recebe {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.mk-conf-verificando h2 {
  font-family: var(--mk-serif);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0;
}
.mk-conf-verificando p {
  margin: 0;
  font-size: var(--text-reading);
  line-height: var(--leading-relaxed);
  color: var(--mk-muted);
}
.mk-conf-progresso {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--track-neutral);
  overflow: hidden;
  box-shadow: var(--elevation-inset-track);
}
.mk-conf-progresso::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 35%;
  border-radius: inherit;
  background: var(--primary);
  /* linear, NÃO o easing cerimonial: num loop, o ease-out concentra o
     percurso no início do ciclo e a barra some do trilho na maior parte
     do tempo. Movimento constante é o correto para progresso indeterminado. */
  animation: mk-conf-progresso-vai var(--duration-loop) linear infinite;
}
@keyframes mk-conf-progresso-vai {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(390%);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* loop com duração zerada não anima; o repouso é uma barra parcial fixa
     (nunca 0% nem 100%, para não mentir progresso parado) */
  .mk-conf-progresso::after {
    animation: none;
    transform: translateX(95%);
  }
}
/* --- anatomia do desfecho (a resposta institucional) ---
   Três níveis: cerimonial (verdadeiro: relevo + faixa de carimbo), plano com
   filete (exemplo/atenção: -surface + traço de cor cheia no topo) e neutro
   (falha de comunicação, papel). Todos entram com o mesmo gesto discreto. */
.mk-conf-desfecho {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--card);
  animation: mk-conf-entra var(--duration-slow) var(--ease-standard) both;
}
@keyframes mk-conf-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mk-conf-desfecho-cabeca {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-5) var(--space-6) 0;
}
.mk-conf-desfecho-icone {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.mk-conf-desfecho h2 {
  font-family: var(--mk-serif);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0;
}
.mk-conf-desfecho h2:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}
.mk-conf-desfecho-corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6) var(--space-6);
}
/* a prova ocupa a largura do corpo: objeto documental, não etiqueta */
.mk-conf-desfecho-corpo .mk-conf-dados {
  align-self: stretch;
}
.mk-conf-desfecho-corpo p,
.mk-conf-desfecho-corpo ul {
  margin: 0;
  font-size: var(--text-reading);
  line-height: var(--leading-relaxed);
  color: var(--foreground);
}
.mk-conf-desfecho-corpo ul {
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.mk-conf-desfecho .mk-btn {
  align-self: flex-start;
}
/* nível 1, cerimonial: só o "documento verdadeiro" tem relevo e faixa */
.mk-conf-desfecho-ok {
  background: var(--surface-gradient);
  box-shadow: var(--elevation-card-lg);
}
.mk-conf-desfecho-ok .mk-conf-desfecho-cabeca {
  background: var(--success-surface);
  border-bottom: 1px solid var(--border);
  border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0;
  padding: var(--space-4) var(--space-6);
}
.mk-conf-desfecho-ok .mk-conf-desfecho-corpo {
  padding-top: var(--space-5);
}
.mk-conf-desfecho-ok h2 {
  color: var(--success-text);
}
/* o carimbo: o Giro entra grande e assenta, exclusivo do desfecho positivo */
.mk-conf-carimba {
  color: var(--success-text);
  flex-shrink: 0;
  animation: mk-carimba var(--duration-slower) var(--ease-standard) both;
}
/* nível 2, plano com filete: exemplo (info) e não reconhecido (warning) */
.mk-conf-desfecho-exemplo {
  background: var(--info-surface);
  border-top: 3px solid var(--info);
}
.mk-conf-desfecho-exemplo h2,
.mk-conf-desfecho-exemplo .mk-conf-desfecho-icone {
  color: var(--info-text);
}
.mk-conf-desfecho-atencao {
  background: var(--warning-surface);
  border-top: 3px solid var(--warning);
}
.mk-conf-desfecho-atencao h2,
.mk-conf-desfecho-atencao .mk-conf-desfecho-icone {
  color: var(--warning-text);
}
/* nível 3, neutro: falha de comunicação e "só tenho o papel" */
.mk-conf-desfecho-neutro .mk-conf-desfecho-icone {
  color: var(--muted-foreground);
}
/* aviso de proteção DENTRO do desfecho positivo: troca de assunto declarada
   (não é parte da celebração), âmbar de atenção, nunca vermelho */
.mk-conf-desfecho .mk-conf-antigolpe {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--warning-text);
  background: var(--warning-surface);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-md);
}
.mk-conf-antigolpe-icone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: var(--space-0-5);
}
/* rodapé institucional: moldura discreta e sempre neutra; o telefone é a
   via de escape humana, encontrável sem competir com o desfecho */
.mk-conf-rodape {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
}
.mk-conf-fone-fixo {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-reading);
  line-height: var(--leading-relaxed);
  max-width: 56ch;
}
.mk-conf-fone-icone {
  width: 18px;
  height: 18px;
  color: var(--muted-foreground);
  flex-shrink: 0;
  margin-top: var(--space-1);
}
/* o número nunca quebra no meio: ou cabe inteiro na linha, ou desce inteiro */
.mk-conf-fone-fixo strong {
  white-space: nowrap;
}

/* --- Form --- */
.mk-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 480px;
}
/* ação primária sempre à direita, em todo formulário */
.mk-form-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  /* Conferência no navegador de 19/09/2026: com dois rótulos de tamanhos bem
     diferentes ("Agora não" e "Sim, lembrar este computador"), o flex
     encolhia o curto até quebrar a palavra em duas linhas, e a dupla ficava
     torta. Rótulo de botão não quebra; quando a linha não cabe, quem quebra é
     a linha. */
  flex-wrap: wrap;
}
.mk-form-acoes > * {
  white-space: nowrap;
}
/* Escolha binária cujos dois rótulos não cabem lado a lado num cartão de
   login (340px): em vez de deixar o flex encolher o mais curto até ficarem
   desiguais, os dois ocupam a linha inteira, um sob o outro. A ordem do DOM é
   mantida de propósito, com a recusa em cima: marcar a máquina é a escolha
   que pede um segundo de pensamento, não a que se pega por reflexo. */
.mk-form-acoes-empilha {
  flex-direction: column;
  align-items: stretch;
}

/* --- Utilitários --- */
.mk-muted {
  color: var(--mk-muted);
  font-size: 13px;
  margin: 0;
}
.mk-piscando {
  color: var(--mk-verde);
  font-size: 13px;
  font-weight: 500;
  margin: 14px 0 0;
  animation: mk-pulsa 1.4s ease-in-out infinite;
}

/* ============================================================
   O fone do cidadão (fc-): WhatsApp simulado, fiel ao roteiro
   ============================================================ */
/* stylelint-disable declaration-property-value-disallowed-list -- pele do WhatsApp simulado: cores do device do cidadão, estrangeiras aos tokens de propósito (inventário, seção 2) */
.fc {
  background: #10161c;
  border-radius: 38px;
  padding: 10px;
  box-shadow:
    0 20px 55px rgba(31, 41, 51, 0.25),
    0 4px 12px rgba(31, 41, 51, 0.15);
}
/* O aviso de simulação da conversa. Fica na moldura do aparelho, fora da tela,
 * porque é aviso do Dígito e não do WhatsApp. Usa token, e não a pele do
 * device: a exceção de cor crua vale para o que imita o WhatsApp, não para o
 * que o contradiz. */
.fc-simulacao {
  display: block;
  padding: 0 var(--space-1) var(--space-1);
  color: var(--card);
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.85;
}

.fc-tela {
  background: #efeae2;
  border-radius: 29px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 560px;
}
.fc-head {
  background: #f6f3ee;
  padding: 12px 14px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(31, 41, 51, 0.08);
  flex: none;
}
/* A foto de perfil da conta oficial, com o brasão do órgão dentro.
 *
 * O fundo era `--mk-tinta`, de quando o avatar mostrava a sigla em texto
 * branco. O brasão é tinta ametista medida contra papel, e não contra fundo
 * escuro: trocar a arte sem trocar o fundo entregaria roxo escuro sobre grafite
 * escuro. Achado da mesa na segunda passada da V-32, em 02/09/2026.
 *
 * O contorno existe porque o cabeçalho da conversa também é claro: sem ele o
 * círculo se dissolve no fundo e o brasão fica boiando.
 */
.fc-avatar {
  width: 34px;
  height: 34px;
  /* Sem isto o círculo vira elipse. `.fc-head` é flex, e o nome do órgão ao lado
   * é longo o bastante para espremer o avatar: medido em 31,97 por 34px, com um
   * símbolo arquitetônico simétrico dentro, que denuncia o achatamento. Estava
   * assim desde antes do brasão, disfarçado pelo texto da sigla. */
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mk-papel);
  /* O contorno era `--border`, que mede 1,46:1 contra os dois fundos claros que
   * ele separa: o círculo sumia dentro do cabeçalho da conversa, que é papel
   * sobre papel (1,01:1). Contorno de componente não textual pede 3:1.
   * `--mk-muted` está registrado em 7,1:1 sobre o papel, e é o neutro quente do
   * gerador: separa sem virar um anel preto no meio da conversa. */
  border: 1px solid var(--mk-muted);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* 24px dentro de um círculo de 34px.
 *
 * Eram 20px, com o comentário dizendo que ficava "acima dos 20px em que o brasão
 * foi medido". Estava errado nos dois sentidos: 20px é o PISO medido com lupa
 * (briefing, seção 8.3), não uma folga, e o teste de aceitação das cinco
 * perguntas rodou a 28px (seção 8.4). Ficar exatamente no piso é ficar sem
 * margem. */
.fc-avatar img {
  width: 24px;
  height: 24px;
  display: block;
}
.fc-quem {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.fc-quem b {
  font-size: 13px;
  font-weight: 600;
}
.fc-quem span {
  font-size: 11px;
  color: var(--mk-muted);
}
.fc-corpo {
  padding: 14px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  overflow-y: auto;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(31, 41, 51, 0.03) 0 2px, transparent 2px),
    radial-gradient(circle at 75% 60%, rgba(31, 41, 51, 0.03) 0 2px, transparent 2px);
  background-size:
    90px 90px,
    120px 120px;
}
.fc-data {
  align-self: center;
  background: rgba(255, 255, 255, 0.9);
  font-size: 10.5px;
  color: var(--mk-muted);
  padding: 3px 11px;
  border-radius: 7px;
  flex: none;
}
.fc-sistema {
  align-self: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  color: var(--mk-muted);
  padding: 6px 14px;
  border-radius: 9px;
  max-width: 90%;
}
.fc-bio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--mk-bio-fg);
  background: var(--mk-bio-bg);
  animation: mk-pulsa 1.4s ease-in-out infinite;
}
/* a digital "lê" junto com o texto */
.fc-bio svg {
  animation: mk-pulsa 1.4s ease-in-out infinite;
  animation-delay: 0.2s;
}
.fc-msg {
  background: #ffffff;
  border-radius: 10px;
  padding: 10px 11px;
  max-width: 90%;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 1px 1px rgba(31, 41, 51, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fc-chega 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fc-chega {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.fc-msg p {
  margin: 0;
}
/* quando resposta e réplica montam juntas, a réplica espera um beat:
   conversa de verdade não chega em bloco */
.fc-resposta + .fc-msg {
  animation-delay: 0.12s;
  animation-fill-mode: backwards;
}
.fc-proc {
  font-variant-numeric: tabular-nums;
}
.fc-resposta {
  align-self: flex-end;
  background: #e4f2d9;
}
/* V-18: o aviso de domínio antes do redirecionamento.
   Ele responde ao risco R6, e é a linha que separa o ato legítimo do golpe da
   falsa intimação. Fica colada ao botão que ela qualifica, e o `gap` da bolha já
   dá a folga: o olho lê os dois como um bloco.

   **A caixa de alerta saiu em 09/09/2026**, na observação 4 do Daniel Cova. Ela
   nasceu em 02/09 com `--warning-*` porque a versão anterior, em
   `--veil-petroleo-*`, deixava o aviso antigolpe indistinguível de um botão
   comum. O piloto real mostrou o custo do conserto: fundo laranja e barra
   lateral leem como perigo antes de serem lidos como texto, e o cidadão
   abandona o fluxo no meio. A linha virou prosa comum da bolha, e o endereço
   ficou marcado só pelo peso da letra.

   O que NÃO pode voltar aqui: fundo, barra lateral e token de warning. Os três
   são guardados por `fone-cidadao.spec.tsx`. Letra menor também não: encolher
   aviso de segurança para caber é o erro clássico da peça, e é por isso que esta
   regra não mexe em `font-size`. */
.fc-dominio b {
  /* O peso do sistema, e não o `bold` do navegador: 700 dentro de um corpo de
     12,5px numa bolha de conversa vira mancha, e o endereço precisa ser
     comparado caractere a caractere, não notado de longe. */
  font-weight: 600;
}

.fc-botao {
  border: 1px solid var(--veil-petroleo-border);
  color: var(--mk-verde);
  border-radius: 8px;
  text-align: center;
  padding: 7px 9px;
  font-weight: 600;
  font-size: 12px;
  background: var(--veil-petroleo-soft);
}
.fc-hora {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--mk-muted);
  margin-top: -3px;
}
.fc-anexo {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(31, 41, 51, 0.12);
  border-radius: 9px;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 12px;
  background: var(--mk-papel);
}
.fc-anexo-icone {
  background: var(--status-falha);
  color: var(--error-foreground);
  font-size: 8.5px;
  font-weight: 700;
  border-radius: 5px;
  padding: 5px 6px;
  letter-spacing: 0.04em;
}
.fc-selo {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 6px;
  row-gap: 2px;
  align-items: center;
  border-top: 1px solid rgba(31, 41, 51, 0.1);
  padding-top: 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--mk-tinta-2);
  white-space: nowrap;
}
.fc-selo-proto {
  grid-column: 2;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mk-muted);
}
.fc-rodape {
  flex: none;
  margin: 0 10px 12px;
  background: #ffffff;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12px;
  color: var(--mk-muted);
}
/* stylelint-enable declaration-property-value-disallowed-list */

@media (prefers-reduced-motion: reduce) {
  .mk-root *,
  .mk-root *::before,
  .mk-root *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* a conversa vira nativa no mobile, sem moldura de aparelho (mesmo padrão
   do site institucional): uma rolagem só, a da página */
@media (max-width: 640px) {
  .fc {
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  /* Sem a moldura escura, o aviso fica sobre o papel da página. O token claro
     do aparelho (--card) sumia ali, 1,1:1 medido em 20/09/2026; o roteiro exige
     o aviso legível em 9:16. Cor escura e sem o esmaecimento do aparelho. */
  .fc-simulacao {
    color: var(--foreground);
    opacity: 1;
  }
  .fc-tela {
    border-radius: 12px;
    height: auto;
  }
  .fc-corpo {
    overflow-y: visible;
  }
  .mk-detalhe-fone {
    max-width: none;
  }
}

@keyframes mk-sobe {
  from {
    transform: translateY(100%);
  }
}
@keyframes mk-fade {
  from {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  /* Espaço que a bottom tab bar fixa toma do fim da janela. Uma medida só, com
     dois usos: o respiro do fim do conteúdo (`.mk-content`) e o
     `scroll-padding-bottom`, que diz ao navegador que a faixa da barra não conta
     como janela visível. Sem o segundo, o foco por teclado num controle que já
     cabe na janela não rola a página, e o controle fica sob a barra. */
  :host {
    --mk-respiro-barra: calc(80px + env(safe-area-inset-bottom));
  }
  :host {
    scroll-padding-bottom: var(--mk-respiro-barra);
  }

  /* mobile: sidebar some; navegação vira bottom tab bar; topbar fino no topo */
  .mk-shell {
    display: block;
    padding: 0;
  }
  .mk-sidebar {
    display: none;
  }

  /* topbar: marca mínima (losango) + título da página + conta */
  .mk-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 30;
    height: 52px;
    padding: 0 14px;
    background: var(--mk-tinta);
    color: var(--mk-papel);
  }
  .mk-topbar-marca {
    display: inline-flex;
    flex: none;
    color: var(--mk-papel);
    line-height: 0;
  }
  .mk-topbar-titulo {
    flex: 1;
    min-width: 0;
    font-family: var(--mk-serif);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mk-topbar-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--mk-verde);
    color: var(--primary-foreground);
    font: 700 12.5px/1 var(--mk-fonte);
    cursor: pointer;
    transition: transform 0.12s var(--mk-ease);
  }
  .mk-topbar-avatar:active {
    transform: scale(0.96);
  }

  /* bottom tab bar fixa, com respiro da safe-area do iOS */
  .mk-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--mk-surface);
    border-top: 1px solid var(--mk-border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mk-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--mk-muted);
  }
  .mk-tab-icone {
    display: inline-flex;
    width: 22px;
    height: 22px;
  }
  .mk-tab-icone svg {
    width: 100%;
    height: 100%;
  }
  .mk-tab-label {
    font-size: 11px;
    font-weight: 600;
  }
  .mk-tab-on {
    color: var(--mk-tinta);
  }
  /* "Cadastrar" é ação de criação: destacada por cor (petróleo), não por forma */
  .mk-tab-cadastrar,
  .mk-tab-cadastrar.mk-tab-on {
    color: var(--mk-verde);
  }
  .mk-tab:active {
    background: var(--mk-papel);
  }

  /* sheet de conta (sobe pela base; scrim inerte por trás) */
  .mk-sheet-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--veil-scrim);
    animation: mk-fade 0.2s var(--mk-ease);
  }
  .mk-sheet {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--mk-surface);
    border-radius: 16px 16px 0 0;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow: var(--elevation-sheet);
    animation: mk-sobe 0.28s var(--mk-ease);
  }
  .mk-sheet-alca {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--mk-border);
    align-self: center;
    margin-bottom: 10px;
  }
  .mk-sheet-conta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 14px;
    border-bottom: 1px solid var(--mk-border);
  }
  .mk-sheet-conta .mk-conta-nome {
    color: var(--mk-text);
    font-size: 15px;
  }
  .mk-sheet-conta .mk-conta-papel {
    color: var(--mk-muted);
  }
  .mk-sheet-acoes {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
  }
  .mk-sheet-item,
  .mk-sheet .mk-side-acao {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--mk-text);
    font: 600 15px/1.2 var(--mk-fonte);
    text-align: left;
    cursor: pointer;
  }
  .mk-sheet .mk-side-acao {
    color: var(--mk-muted);
    font-weight: 500;
  }
  .mk-sheet-item:active,
  .mk-sheet .mk-side-acao:active {
    background: var(--mk-papel);
  }
  /* .mk-btn já tem 44px universal no componente (button.css) */
  .mk-chip {
    min-height: 44px;
  }
  .mk-colunas {
    grid-template-columns: 1fr;
  }
  .mk-detalhe {
    grid-template-columns: 1fr;
  }
  .mk-content {
    padding: 16px 16px var(--mk-respiro-barra);
    min-width: 0;
  }
  /* no mobile o cabeçalho empilha: título numa linha, ação embaixo full-width.
     Nada de dividir a linha meio a meio com um botão (quebra fácil). */
  .mk-page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .mk-page-head .mk-btn-primary {
    width: 100%;
  }
  /* no detalhe, título e badge empilham à esquerda, sem esticar o badge */
  .mk-page-head-detalhe {
    align-items: flex-start;
  }
  .mk-field-par {
    grid-template-columns: 1fr;
  }
  .mk-cadastro-grid {
    grid-template-columns: 1fr;
  }
  /* a fila vira cartões densos: nome como âncora, meta numa linha, sem rótulos
     redundantes (o valor se explica); status no canto, ação no rodapé */
  .mk-tabela thead {
    display: none;
  }
  .mk-tabela,
  .mk-tabela tbody {
    display: block;
    width: 100%;
  }
  .mk-tabela tbody tr {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      'nome nome nome situacao'
      'num ato data data'
      'proc proc proc proc'
      'acao acao acao acao';
    column-gap: 9px;
    row-gap: 3px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mk-border);
  }
  .mk-tabela tbody tr:last-child {
    border-bottom: none;
  }
  .mk-tabela td {
    padding: 0;
    border: none;
  }
  .mk-tabela td::before {
    display: none;
  }
  .mk-tabela td:nth-child(1) {
    grid-area: num;
    font-size: 12.5px;
  }
  .mk-tabela td:nth-child(2) {
    grid-area: ato;
    font-size: 12.5px;
    color: var(--mk-muted);
  }
  .mk-tabela td:nth-child(3) {
    grid-area: nome;
    font-weight: 600;
    font-size: 15px;
  }
  .mk-tabela td:nth-child(4) {
    grid-area: proc;
    font-size: 12px;
  }
  .mk-tabela td:nth-child(5) {
    grid-area: data;
    font-size: 12.5px;
    color: var(--mk-muted);
  }
  .mk-tabela td:nth-child(6) {
    grid-area: situacao;
    justify-self: end;
    align-self: start;
  }
  .mk-tabela td:nth-child(7) {
    grid-area: acao;
    justify-self: start;
    margin-top: 3px;
  }
  .mk-tabela .mk-td-vazio {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    text-align: center;
    padding: 24px 0;
    font-size: 14px;
  }
}

/* ==========================================================================
   Peça de vídeo: no quadro só entra a peça.

   As rotas do grupo `(video)` existem para serem capturadas quadro a quadro e
   viram cena de um vídeo que circula recortado. Duas coisas do produto entram
   nesse quadro sem ser convidadas, e as duas são desta folha resolver.

   **O widget do VLibras.** O `app/layout.tsx` o monta em TODA rota, fora do
   `.mk-root`, e não existe como um layout aninhado remover o que o pai já
   renderizou na própria árvore. Sem esta regra, o botão flutuante do tradutor
   pousa dentro do quadro, por cima da cena, e aparece ou não conforme a rede
   alcance `vlibras.gov.br`: duas execuções da mesma captura dariam quadros
   diferentes, que é o contrário do que o pipeline promete.

   **Por que por CSS, e não por lista de rotas dentro do componente.** Uma lista
   escrita à mão esquece nos dois sentidos, e o sentido caro é derrubar em
   silêncio um recurso de acessibilidade numa rota real do produto (eMAG,
   Resolução CNJ 401). A regra aqui só age onde existe uma peça de vídeo na
   página, e peça de vídeo nenhuma é rota de produto. Grupo de rota entre
   parênteses não gera segmento de URL, então a alternativa por caminho nem
   existiria sem essa lista.

   **A margem de 8px do `body`.** O navegador a põe, e esta folha nunca a zerou:
   é a mesma que a segunda passada da V-32 achou na certidão impressa, medindo
   3,9mm onde a folha prometia 6mm. Numa cartela de fundo grafite sangrada até a
   borda, ela vira uma moldura clara de 8px em volta da cena. Zerar globalmente
   mudaria toda rota do produto, então quem zera é a peça.

   Travado por `app/(video)/_cartelas/cartelas.spec.tsx`, que lê esta folha pelo
   AST, e provado em pixel pela conferência visual.
   ========================================================================== */
body:has(.mk-peca-video) {
  margin: 0;
}

body:has(.mk-peca-video) [vw] {
  display: none;
}

/* ==========================================================================
   Impressão: a moldura do aplicativo nunca vai ao papel.

   A rota da certidão vive dentro do grupo `(painel)`, e o layout desse grupo
   envolve a página com a moldura do produto. A conferência visual da V-32, em
   02/09/2026, capturou a rota em mídia `print` pela primeira vez e viu o que
   nenhuma suíte via: a barra lateral saía dentro do PDF congelado, com 248px de
   largura, levando junto o menu de navegação, o nome da servidora logada, o
   link "Sair" e o botão "Reiniciar demonstração".

   O pior item é o botão. O produto apresenta a certidão como arquivo imutável,
   conferível por hash; um botão de reiniciar demonstração impresso dentro dela é
   a peça desmentindo a própria legenda, e a cena da conferência pública filma
   esse arquivo em close.

   **Por que aqui e não no `certidao.css`.** As classes são desta folha, e o
   Ctrl+P de qualquer outra rota do painel tem o mesmo problema. Regra local
   consertaria uma rota e deixaria as outras.

   **Por que no fim do arquivo.** Nenhuma consulta de mídia daqui traz o
   qualificador `screen`, então todas valem também na impressão. Hoje o estrago
   não aparece porque A4 a 96dpi dá 794px, acima do corte de 720px, mas quem
   imprimir de uma janela estreita levaria ao papel a barra de topo e a barra de
   abas do celular. Vindo por último, com a mesma especificidade, esta regra tem
   a última palavra na cascata sem precisar de `!important` nem de reescrever as
   doze consultas do arquivo.

   Travado por `app/impressao.spec.ts`, que lê esta folha pelo AST, e provado em
   pixel pela tela `16-certidao-impressa` de `tools/capturar-telas.mjs`.
   ========================================================================== */
@media print {
  /* `[vw]` e `#vlibras-access-wrapper` são o VLibras, montado pelo layout raiz
     em toda rota. Widget de tela não vai ao papel: com rede, o selo "Acessível
     com VLibras" saía impresso na lateral das duas folhas da certidão. O selo
     mora no segundo contêiner, que o plugin cria fora do `[vw]`. */
  .mk-sidebar,
  .mk-topbar,
  .mk-tabbar,
  .mk-sheet,
  .mk-sheet-scrim,
  [vw],
  #vlibras-access-wrapper {
    display: none;
  }

  /* Esconder a barra lateral não basta: o grid reserva a coluna de 248px de
     qualquer jeito, e o documento sairia empurrado para a direita com um vão
     vazio do lado esquerdo. */
  .mk-shell {
    display: block;
    gap: 0;
    padding: 0;
    min-height: 0;
  }

  /* O respiro do `.mk-content` NÃO é zerado aqui, e isso é decisão. Esta regra é
     global: vale para a lista de mandados, o detalhe e o cadastro, que ninguém
     desenhou para papel e que um servidor pode imprimir com Ctrl+P. Zerar o
     respiro delas grudaria o texto na borda da folha.
     Quem zera é a folha da certidão, que é a única rota com margem própria em
     milímetros, e a regra mora lá justamente para não vazar para as outras. */
}

/* ==== app\_components\button.css ==== */
/* Button (componente extraído da ilha .mk-*, 25/07/2026).
   Fonte única das classes .mk-btn*: este arquivo. Regras contextuais que
   dependem de ancestral (ex.: .mk-page-head .mk-btn-primary no mobile)
   continuam no app.css, junto do ancestral que as motiva.
   Este arquivo está sob o gate de tokens em modo ERRO (.stylelintrc.json):
   cor crua não entra. Consome tokens de :host (@sid/design-tokens), nunca
   os apelidos --mk-* da ilha: o componente não depende do escopo .mk-root.
   Alvo de toque: 44px universal (--control-min-height), aplicado na
   extração como manda a decisão docs/decisoes/design-system.md, item 4. */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  min-height: var(--control-min-height);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--duration-base),
    border-color var(--duration-base),
    transform var(--duration-fast) var(--ease-standard);
}
.mk-btn:hover {
  border-color: var(--foreground);
}
/* todo pressável responde ao toque: o clique precisa parecer ouvido */
.mk-btn:active {
  transform: scale(0.97);
}
/* autossuficiente fora do .mk-root: mesmo anel de foco do global da ilha */
.mk-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.mk-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.mk-btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.mk-btn-primary:hover {
  background: var(--primary-10);
  border-color: var(--primary-10);
}
.mk-btn-ghost {
  border-color: transparent;
  background: transparent;
  font-weight: var(--font-weight-medium);
}
.mk-btn-ghost:hover {
  background: var(--veil-hover);
  border-color: transparent;
}
.mk-btn-block {
  width: 100%;
  margin-top: var(--space-1);
}

/* ==== app\_lib\botao-de-copiar.css ==== */
/* O "Copiar" dos dados do ato (`botao-de-copiar.tsx`). Discreto ao lado do
   valor; a área de toque cresce por um pseudo-elemento, sem mudar a altura da
   linha (alvo mínimo do celular, WCAG 2.5.8). */
.mk-copiar {
  position: relative;
  flex: none;
  padding: var(--space-0-5) var(--space-1-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}
.mk-copiar::before {
  content: '';
  position: absolute;
  inset: -10px -4px;
}
.mk-copiar[data-estado='copiado'] {
  color: var(--primary);
}
.mk-copiar:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}
.mk-copiar:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .mk-copiar:hover {
    background: var(--muted);
    color: var(--foreground);
  }
}

/* ==== app\_lib\cabecalho-do-painel.css ==== */
/* O cabeçalho do painel real (FIN-173): tribunal, e-mail e "Sair", e o aviso
   de inatividade. Cor só por token (docs/decisoes/design-system.md). */
/* A conta mora no pé da barra lateral (a moldura a põe ali). No computador o
   painel fica sempre à vista, com a pele da conta da demo (`.mk-conta`,
   `.mk-avatar`, `.mk-side-acao`, em `app.css`), e o botão de abrir some. No
   celular é o contrário: o botão fica no canto da barra de cima e o painel
   abre embaixo dele (regras em `(protected)/painel/telas-do-painel.css`). */
.mk-conta-botao {
  display: none;
}
.mk-conta-painel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
/* O e-mail numa linha: o longo corta com reticências e fica inteiro no
   `title` (14/10/2026). */
.mk-conta-painel .mk-cabecalho-email {
  font-size: var(--text-sm);
}
.mk-conta-info {
  min-width: 0;
}
.mk-conta-painel .mk-mono {
  letter-spacing: 0.04em;
}

/* O aviso nasce dentro da barra lateral (grafite, texto claro, anel de foco
   claro); ele é um cartão branco, então devolve a cor e o anel do conteúdo. */
.mk-aviso-inatividade {
  color: var(--foreground);
  text-align: left;
  position: fixed;
  inset: auto var(--space-4) var(--space-4) auto;
  max-width: 24rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mk-sidebar .mk-aviso-inatividade :focus-visible {
  outline-color: var(--ring);
}

/* ==== app\_lib\conversa-do-ato-box.css ==== */
/* O quadro "Conversa do ato" (`conversa-do-ato-box.tsx`). Cor só por token
   (docs/decisoes/design-system.md); as sombras do aparelho ficam na tinta, fora
   do gate de cor, como o design system manda. Sem o verde do WhatsApp: a
   resposta do número fica na tinta, e o verde da marca só aparece em ação.

   Três desenhos (16/10/2026, mesa de movimento, acabamento, servidora e
   acessibilidade):
   - celular (até 720px): sem aparelho dentro do aparelho; a conversa ocupa o
     cartão, de borda a borda, e a página rola uma vez só;
   - tablet (721 a 980px): a mesma conversa sem moldura, com rolagem própria;
   - computador (981px+): o aparelho, sozinho na coluna da direita, com
     proporção fixa de celular (9 : 19,5), igual em todo ato e em toda janela;
     a conversa rola por dentro. */

.mk-conversa {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ------------------------------------------------------------------ base */

.mk-conversa-aparelho {
  margin-inline: -20px;
}
.mk-conversa-tela {
  position: relative;
  background: var(--background);
}
.mk-conversa-ilha,
.mk-conversa-inicio {
  display: none;
}

.mk-conversa-para {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: 0 20px var(--space-3);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.mk-conversa-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--secondary);
  color: var(--muted-foreground);
}
.mk-conversa-avatar svg {
  width: 1rem;
  height: 1rem;
}
.mk-conversa-para-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--leading-snug);
}
.mk-conversa-para-rotulo {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.mk-conversa-para-texto .mk-mono {
  overflow: hidden;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--foreground);
}

/* A rolagem começa na última mensagem: `column-reverse` com um filho só ancora
   o fim, sem JavaScript e sem pular na hidratação. A ordem de leitura continua
   a do DOM. */
.mk-conversa-rolagem {
  display: flex;
  flex-direction: column-reverse;
  overscroll-behavior: contain;
}
.mk-conversa-rolagem:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -3px;
}
.mk-conversa-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-4) var(--space-3);
  list-style: none;
}
/* Sem mensagem (ato pendente), o aviso fica no meio da tela. */
.mk-conversa-rolagem:has(.mk-conversa-vazia) {
  justify-content: center;
}
.mk-conversa-fim {
  display: block;
  height: 1px;
}

.mk-conversa-vazia {
  margin: auto;
  padding: var(--space-8) var(--space-5);
  max-width: 18rem;
  text-align: center;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------- mensagens */

.mk-conversa-msg {
  position: relative;
  max-width: min(82%, 28rem);
  padding: var(--space-2) var(--space-3) var(--space-1-5);
  border-radius: var(--radius-xl);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--foreground);
  overflow-wrap: anywhere;
  transition: outline-color var(--duration-base) var(--ease-standard);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.mk-conversa-msg:focus {
  outline-color: var(--ring);
}
.mk-conversa-msg p {
  margin: 0 0 var(--space-2);
}
.mk-conversa-msg > p:last-of-type {
  margin-bottom: var(--space-1);
}
/* Um respiro maior quando a conversa troca de lado. */
.mk-conversa-sistema + .mk-conversa-numero,
.mk-conversa-numero + .mk-conversa-sistema {
  margin-top: var(--space-1);
}

.mk-conversa-sistema {
  align-self: flex-start;
  border: 1px solid var(--border);
  border-top-left-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--elevation-contact);
}
.mk-conversa-numero {
  align-self: flex-end;
  border-top-right-radius: var(--radius-sm);
  background: var(--brand-tinta);
  color: var(--ink-text-strong);
}

.mk-conversa-texto {
  white-space: pre-line;
}
.mk-conversa-nota-interna {
  font-style: italic;
  color: var(--muted-foreground);
}
.mk-conversa-numero .mk-conversa-nota-interna {
  color: var(--ink-text);
}
.mk-conversa-parametros {
  margin: 0 0 var(--space-1);
  padding-left: var(--space-5);
}

/* A hora: com registro, é o botão que abre a linha do evento. */
.mk-conversa-hora {
  display: block;
  margin: 0 0 0 auto;
  padding: var(--space-0-5) var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--mk-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-normal);
  text-align: right;
  color: var(--muted-foreground);
}
button.mk-conversa-hora {
  position: relative;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
/* Alvo de toque de 24px no mínimo (WCAG 2.5.8), sem mudar a bolha. */
button.mk-conversa-hora::before {
  content: '';
  position: absolute;
  inset: -4px -6px;
}
button.mk-conversa-hora:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}
button.mk-conversa-hora[aria-expanded='true'] {
  color: var(--foreground);
  background: var(--muted);
}
.mk-conversa-numero .mk-conversa-hora {
  color: var(--ink-icon);
}
.mk-conversa-numero button.mk-conversa-hora[aria-expanded='true'] {
  color: var(--ink-text-strong);
  background: var(--ink-veil-hover);
}
@media (hover: hover) and (pointer: fine) {
  button.mk-conversa-hora:hover {
    background: var(--muted);
  }
  .mk-conversa-numero button.mk-conversa-hora:hover {
    background: var(--ink-veil-hover);
  }
}
button.mk-conversa-hora:active {
  transform: scale(0.97);
}

/* O registro do evento, aberto pela hora. */
.mk-conversa-registro {
  margin: var(--space-1-5) 0 0;
  padding-top: var(--space-1-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}
@starting-style {
  .mk-conversa-registro {
    opacity: 0;
    transform: translateY(-2px);
  }
}
.mk-conversa-numero .mk-conversa-registro {
  border-top-color: var(--ink-veil-border);
  color: var(--ink-text);
}
.mk-conversa-numero .mk-conversa-registro .mk-link {
  color: var(--ink-text-strong);
}

/* Os botões do WhatsApp da pessoa, desenhados: não são clicáveis aqui, e nada
   neles responde ao mouse. */
.mk-conversa-botoes {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 var(--space-1);
  padding: 0;
  list-style: none;
}
.mk-conversa-botoes li {
  display: grid;
  place-items: center;
  min-height: 2.5rem;
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  text-align: center;
  font-weight: var(--font-weight-semibold);
  color: var(--primary);
  cursor: default;
}
/* O botão que o número tocou: marcado, mas sem virar confirmação de nada. */
.mk-conversa-botoes li.mk-conversa-botao-tocado {
  border-color: var(--foreground);
  background: var(--secondary);
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px var(--foreground);
}
.mk-conversa-tocado {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  text-align: center;
  color: var(--muted-foreground);
}

.mk-conversa-anexo {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2-5);
  border-radius: var(--radius-lg);
  background: var(--secondary);
}
.mk-conversa-anexo-tipo {
  flex: none;
  padding: var(--space-1) var(--space-1-5);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: var(--mk-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--muted-foreground);
}
.mk-conversa-anexo-nome {
  min-width: 0;
  font-family: var(--mk-mono);
  font-size: var(--text-sm);
}

/* ------------------------------------------ as linhas do meio da conversa */

.mk-conversa-dia,
.mk-conversa-falha {
  align-self: center;
  max-width: 100%;
  margin-block: var(--space-1);
  text-align: center;
}
.mk-conversa-dia span,
.mk-conversa-falha span {
  display: inline-block;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}
.mk-conversa-dia span {
  border: 1px solid var(--border);
  background: var(--card);
  font-family: var(--mk-mono);
  color: var(--muted-foreground);
  box-shadow: var(--elevation-contact);
}
.mk-conversa-falha span {
  border: 1px solid var(--warn-border);
  background: var(--card);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

/* ------------------------------------------------ ligação e mensagem nova */

/* A bolha e a linha do mesmo evento acesas juntas (`LigacaoDaConversa`): um
   contorno, e não só cor. */
.mk-conversa-msg[data-ligado],
.mk-conversa-falha[data-ligado] span {
  outline-color: var(--ring);
}
.mk-conversa-falha span {
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--duration-base) var(--ease-standard);
}

/* A mensagem que chegou depois da primeira pintura: um realce que some.
   Sem deslocamento, sem "chegada": o dado veio por consulta, não ao vivo. */
.mk-conversa-msg[data-novo]::after,
.mk-conversa-falha[data-novo] span::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: calc(var(--radius-xl) + 4px);
  box-shadow: 0 0 0 2px var(--ring);
  opacity: 0;
  pointer-events: none;
  animation: mk-conversa-novo 1600ms var(--ease-standard) 1;
}
.mk-conversa-falha[data-novo] span {
  position: relative;
}
@keyframes mk-conversa-novo {
  0%,
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* -------------------------------------------- "Ir à última mensagem" */

.mk-conversa-ir-ao-fim {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  z-index: 2;
  min-height: 2rem;
  padding: var(--space-1-5) var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--brand-tinta);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--ink-text-strong);
  box-shadow: var(--elevation-card-lg);
  cursor: pointer;
  transform: translateX(-50%);
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}
@starting-style {
  .mk-conversa-ir-ao-fim {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}
.mk-conversa-ir-ao-fim:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.mk-conversa-ir-ao-fim:active {
  transform: translateX(-50%) scale(0.97);
}

/* ----------------------------------------------------------- abaixo dele */

.mk-conversa-aviso {
  margin: var(--space-3) 0 0;
}
.mk-conversa-legenda {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------- celular */

@media (max-width: 720px) {
  .mk-conversa-msg {
    max-width: 90%;
    font-size: var(--text-md);
  }
  .mk-conversa-ir-ao-fim {
    display: none;
  }
}

/* ------------------------------------------------------------- tablet */

@media (min-width: 721px) and (max-width: 980px) {
  .mk-conversa-aparelho {
    margin-inline: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .mk-conversa-para {
    padding: var(--space-3) var(--space-4);
  }
  .mk-conversa-rolagem {
    max-height: 34rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
}

/* ---------------------------------------------------------- computador */

@media (min-width: 981px) {
  /* A moldura fina, com anel interno e aro, e a sombra em camadas na tinta.
     Raios concêntricos: 2.5rem fora, 0.375rem de borda, 2.125rem na tela. */
  /* Proporção de celular (9 : 19,5, a de um aparelho atual), igual em todo
     ato e em toda janela: a altura não segue o conteúdo nem a janela (pedido
     do Maicon, 16/10/2026). */
  .mk-conversa-aparelho {
    display: flex;
    flex-direction: column;
    width: min(100%, 20rem);
    aspect-ratio: 9 / 19.5;
    /* Corta o que passar: sem isto, o mínimo automático do aspect-ratio vem do
       conteúdo, e a conversa longa esticava o aparelho. A sombra do próprio
       aparelho não é cortada. */
    overflow: hidden;
    margin-inline: auto;
    padding: 0.375rem;
    border-radius: 2.5rem;
    background: var(--brand-tinta);
    box-shadow:
      inset 0 0 0 1px var(--ink-veil-border),
      0 0 0 1px rgba(26, 28, 26, 0.9),
      0 1px 2px rgba(26, 28, 26, 0.08),
      0 12px 24px -12px rgba(26, 28, 26, 0.28),
      0 32px 48px -28px rgba(26, 28, 26, 0.3);
  }
  /* A tela corta pelo próprio raio: a rolagem, a barra e as bolhas ficam
     dentro do contorno. */
  .mk-conversa-tela {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    border-radius: 2.125rem;
    overflow: hidden;
    isolation: isolate;
  }
  .mk-conversa-ilha {
    display: block;
    position: absolute;
    top: 0.5rem;
    left: 50%;
    z-index: 3;
    width: 5.5rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background: var(--brand-tinta);
    transform: translateX(-50%);
  }
  .mk-conversa-para {
    flex: none;
    padding: 2.25rem var(--space-4) var(--space-2-5);
  }
  /* Barra fina na cor do sistema; o fade de 0.75rem em cima e embaixo diz que
     a conversa continua. */
  .mk-conversa-rolagem {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      black 0.75rem,
      black calc(100% - 0.75rem),
      transparent 100%
    );
  }
  .mk-conversa-inicio {
    display: grid;
    flex: none;
    place-items: center;
    height: 1.25rem;
    background: var(--background);
  }
  .mk-conversa-inicio::before {
    content: '';
    width: 7rem;
    height: 0.25rem;
    border-radius: var(--radius-full);
    background: var(--brand-tinta);
    opacity: 0.85;
  }
  .mk-conversa-ir-ao-fim {
    bottom: 2rem;
  }
  .mk-conversa-legenda {
    width: min(100%, 20rem);
    margin-inline: auto;
  }
}

@media print {
  .mk-conversa {
    display: none;
  }
}

/* ==== app\_lib\dispositivos-lembrados.css ==== */
/* Lista de "esquecer este computador", pronta para a tela de conta (ver
   comentário em dispositivos-lembrados.tsx sobre onde ela deveria morar). */
.mk-dispositivos-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mk-dispositivos-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--mk-border);
}
.mk-dispositivos-item:last-child {
  border-bottom: none;
}

/* ==== app\_lib\esqueleto-da-tela.css ==== */
/* O esqueleto das telas do painel real (14/10/2026). Cor e medida só por
   token (docs/decisoes/design-system.md). O pulso usa as durações dos tokens,
   que zeram sob `prefers-reduced-motion`; aí as formas ficam paradas. */
.mk-esqueleto-formas {
  display: grid;
  gap: var(--space-4);
}
.mk-esqueleto-forma {
  display: block;
  border-radius: var(--radius-md);
  background: var(--muted);
  animation: mk-esqueleto-pulso var(--duration-loop) var(--ease-standard) infinite alternate;
}
@keyframes mk-esqueleto-pulso {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.55;
  }
}
.mk-esqueleto-cabeca {
  padding-block: var(--space-2);
}
.mk-esqueleto-titulo {
  width: min(16rem, 60%);
  height: var(--space-8);
}
.mk-esqueleto-cartao {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.mk-esqueleto-cartao-alto {
  min-height: 18rem;
  align-content: start;
}
.mk-esqueleto-rotulo {
  width: 7rem;
  height: var(--space-3);
}
.mk-esqueleto-linha {
  height: var(--space-4);
}
.mk-esqueleto-linha:nth-child(3n) {
  width: 70%;
}
.mk-esqueleto-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.mk-esqueleto-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.mk-esqueleto-chip {
  width: 6.5rem;
  height: 2.25rem;
  border-radius: 999px;
}
.mk-esqueleto-detalhe,
.mk-esqueleto-coluna {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 981px) {
  .mk-esqueleto-detalhe {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  }
}

/* ==== app\_lib\identity-verification-box.css ==== */
/* O quadro da verificação de identidade da certidão (vocabulário §5.30). Usa
   as classes do cartão e do detalhe que a certidão já tem; aqui só o que é
   próprio do quadro: os subtítulos, os blocos de cada fato e a grade de fotos. */
.mk-verificacao-subtitulo {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 15px;
  font-weight: 600;
}
.mk-verificacao-bloco {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--mk-border);
}
.mk-verificacao-bloco > p {
  margin: 0 0 var(--space-2);
}
.mk-verificacao-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mk-verificacao-foto {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mk-verificacao-foto img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--mk-border);
  border-radius: var(--radius-md);
}
/* Resumo: fotos à esquerda, resultado e dados lidos à direita; uma coluna no
   celular. */
.mk-verificacao-resumo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 720px) {
  .mk-verificacao-resumo {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mk-verificacao-resumo .mk-verificacao-fotos {
  grid-template-columns: minmax(0, 1fr);
}
.mk-verificacao-resultado {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  font-size: 18px;
}
/* Os dados completos, recolhidos por padrão. */
.mk-verificacao-completos {
  margin: var(--space-4) 0 var(--space-2);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--mk-border);
}
.mk-verificacao-completos > summary {
  cursor: pointer;
  font-weight: 600;
}
.mk-verificacao-cru {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.mk-verificacao-cru > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-3);
}
.mk-verificacao-cru dt,
.mk-verificacao-cru dd {
  margin: 0;
  font-size: 13px;
}
.mk-verificacao-cru dt {
  color: var(--mk-muted);
}

/* ==== app\_lib\intimacao-box.css ==== */
/* A seção "Intimação enviada" da certidão (vocabulário §5.31). Usa as classes
   do cartão e do detalhe que a certidão já tem; aqui só o que é próprio dela. */
.mk-intimacao-subtitulo {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 15px;
  font-weight: 600;
}
.mk-intimacao-lista {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.mk-intimacao-mensagem {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--mk-border);
}
.mk-intimacao-mensagem > p {
  margin: 0 0 var(--space-2);
}
/* O texto enviado, exato: as quebras de linha e os recuos da mensagem são
   parte da prova. */
.mk-intimacao-texto {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mk-intimacao-parametros {
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}
.mk-intimacao-parametros > li {
  display: flex;
  gap: var(--space-2);
}

/* ==== app\_lib\sessao-dialogs.css ==== */
/* Diálogos de sessão: o aviso de inatividade e a reautenticação. Mesma
   receita visual do mk-sheet (scrim + painel elevado, ver app.css), mas fixos
   ao centro e disponíveis em qualquer largura de tela: os dois podem
   interromper qualquer página do painel, não só o menu de conta do mobile. */
.mk-sessao-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--veil-scrim);
  animation: mk-fade 0.2s var(--mk-ease);
}
.mk-sessao-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 71;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(360px, calc(100% - var(--space-4) * 2));
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--elevation-sheet);
  animation: mk-entra 0.22s var(--mk-ease);
}
.mk-sessao-dialog form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mk-sessao-dialog-erro {
  margin: 0;
  color: var(--mk-text);
  font-size: 13px;
}

/* ==== app\(protected)\borda-do-painel.css ==== */
/* As bordas do painel real (FIN-197): a tela de erro e o 404 da página. Cor e
   espaçamento só por token (docs/decisoes/design-system.md). */
.mk-borda-painel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 40rem;
  padding: var(--space-4);
  border: 1px solid var(--mk-border);
  border-radius: 12px;
  margin: var(--space-4) 0;
}
.mk-borda-painel-titulo {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}
.mk-borda-painel-titulo:focus-visible {
  outline: 2px solid var(--mk-text);
  outline-offset: 4px;
}
.mk-borda-painel-texto {
  margin: 0;
}
.mk-borda-painel-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* ==== app\(protected)\painel\telas-do-painel.css ==== */
/* As telas do painel real dentro da moldura (FIN-157).

   Escopo `.mk-painel-real`, a raiz da `MolduraDoPainel`: nada daqui alcança a
   demo, que segue intocada até 15/10. Cada regra existe porque uma tela do
   painel real usa uma classe da ilha num elemento ou num contexto diferente do
   da demo. Cor e medida só por token (docs/decisoes/design-system.md). */

/* Moldura: a barra lateral é `sticky` e empilha à parte; o aviso de
   inatividade nasce dentro dela, e o z-index dele só vale ali. Sem subir a
   barra inteira, a fila (linha clicável, cabeçalho fixo da tabela) pintava por
   cima do aviso, e "Continuar conectado" abria um ato. Abaixo do aviso de
   sessão do celular (40) e da barra de abas (30), que nem existem juntos com
   ela. */
.mk-painel-real .mk-sidebar {
  z-index: 20;
}

/* Moldura: a conta no pé da barra lateral, no computador. O cabeçalho da
   sessão antigo era uma faixa solta no topo do conteúdo; a linha que o
   separava do título sai junto. */
.mk-painel-real .mk-sidebar-rodape .mk-conta {
  padding-bottom: var(--space-2-5);
}

/* Moldura no celular: a barra lateral some, mas o pé dela (a conta, com a
   renovação do token e o aviso de inatividade) continua montado e vira o botão
   de conta no canto da barra de cima. `display: contents` tira a caixa da
   barra lateral sem tirar os filhos; a marca e a navegação dela somem (a barra
   de abas faz esse papel), e a conta fica fixa sobre a barra de cima. */
@media (max-width: 720px) {
  .mk-painel-real .mk-sidebar {
    display: contents;
  }
  .mk-painel-real .mk-sidebar > .mk-logo,
  .mk-painel-real .mk-sidebar > .mk-nav {
    display: none;
  }
  .mk-painel-real .mk-sidebar-rodape {
    position: fixed;
    top: var(--space-2);
    right: var(--space-3-5);
    z-index: 31;
    margin: 0;
  }
  .mk-painel-real .mk-conta-botao {
    display: grid;
    place-items: center;
  }
  .mk-painel-real .mk-conta-painel {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    width: min(18rem, calc(100vw - 2 * var(--space-3-5)));
    padding: var(--space-3);
    background: var(--card);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-card-lg);
  }
  .mk-painel-real .mk-conta-painel[data-aberta='true'] {
    display: flex;
    animation: mk-entra var(--duration-moderate) var(--ease-standard);
  }
  /* No cartão branco, a pele clara da barra lateral reprova: volta o texto e o
     anel de foco do conteúdo. */
  .mk-painel-real .mk-conta-painel .mk-conta {
    border-bottom-color: var(--border);
  }
  .mk-painel-real .mk-conta-painel .mk-conta-nome {
    color: var(--foreground);
  }
  .mk-painel-real .mk-conta-painel .mk-conta-papel {
    color: var(--muted-foreground);
  }
  .mk-painel-real .mk-conta-painel .mk-side-acao {
    min-height: var(--control-min-height);
    color: var(--foreground);
    font-weight: var(--font-weight-semibold);
  }
  .mk-painel-real .mk-conta-painel .mk-side-acao:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .mk-painel-real .mk-sidebar .mk-conta-painel :focus-visible {
    outline-color: var(--ring);
  }
}

/* Fila: os filtros são links (trocar de filtro é ir a outro endereço, sem
   estado de cliente), e o `.mk-chip` da ilha foi desenhado para <button>. Sem
   isto, o chip sai sublinhado e com altura de texto corrido. */
.mk-painel-real a.mk-chip {
  display: inline-flex;
  align-items: center;
  /* O espaço entre o rótulo e o número: dentro de flex, o espaço do texto
     some. */
  gap: var(--space-1-5);
  text-decoration: none;
}

/* Fila: a busca é formulário GET com botão, para funcionar sem JavaScript; a
   da demo filtra enquanto digita e não tem botão. Campo e botão na mesma linha.
   No celular o formulário ocupa a linha inteira. Os 280px do campo vão no
   `width`: o piso `min(280px, 100%)` da ilha é porcentagem do próprio
   formulário, fica fora da conta da largura dele, e o "Buscar" vazava 39px da
   borda direita. No celular o campo encolhe e cresce pelo flex. */
.mk-painel-real .mk-busca-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.mk-painel-real .mk-busca-form .mk-busca {
  flex: 1 1 auto;
  width: 280px;
  min-width: 0;
}
@media (max-width: 720px) {
  .mk-painel-real .mk-busca-form {
    flex: 1 1 100%;
  }
}

/* Fila no computador (16/10/2026): os filtros com a contagem em cada um não
   deixavam lugar para a busca, que caía numa terceira linha, e a contagem da
   fila fazia a quarta. Agora o título, a busca e o cadastro dividem a linha
   de cima; os filtros e a contagem, a de baixo; os avisos, quando há, ficam
   entre as duas. `display: contents` põe os filhos do cabeçalho e dos filtros
   direto na grade, sem mudar a ordem de leitura. A ordem do Tab segue o DOM:
   título, "Cadastrar ato", filtros e busca, e não a da vista (a busca está à
   esquerda do botão). Aceito na revisão de 16/10/2026: levar a busca para o
   cabeçalho mudaria a ordem do celular, que fica como está. */
@media (min-width: 981px) {
  .mk-painel-real .mk-fila-topo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .mk-painel-real .mk-fila-topo > * {
    grid-column: 1 / -1;
    margin: 0;
  }
  .mk-painel-real .mk-fila-topo .mk-page-head,
  .mk-painel-real .mk-fila-topo .mk-filtros {
    display: contents;
  }
  .mk-painel-real .mk-fila-topo .mk-page-head h1 {
    grid-row: 1;
    grid-column: 1;
  }
  .mk-painel-real .mk-fila-topo .mk-busca-form {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    width: min(100%, 26rem);
  }
  .mk-painel-real .mk-fila-topo .mk-page-head > :last-child {
    grid-row: 1;
    grid-column: 3;
  }
  .mk-painel-real .mk-fila-topo .mk-chips {
    grid-column: 1 / -2;
  }
  .mk-painel-real .mk-fila-topo .mk-contagem-da-fila {
    grid-column: -2 / -1;
    justify-self: end;
    margin: 0;
    white-space: nowrap;
  }
}

/* Cadastro: o `.mk-form` da ilha tem teto de 480px, pensado para o login. Na
   demo o formulário mora na grade ao lado da prévia, que o painel real não tem
   (o porquê está em `cadastrar/page.tsx`); sem isto ele ficava preso à
   esquerda, com metade da tela vazia. 680px é o teto da coluna do formulário
   na demo (`.mk-cadastro-grid`). */
.mk-painel-real form.mk-form {
  max-width: 680px;
}

/* Cadastro no computador largo (16/10/2026): os campos curtos do processo
   ficavam um por linha, na largura toda, desenho do celular. Dois a dois agora:
   os campos soltos que vêm em sequência dividem a linha; título de seção, par,
   arquivo, avisos e botões seguem na largura toda. */
@media (min-width: 1281px) {
  .mk-painel-real form.mk-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    align-items: start;
  }
  .mk-painel-real form.mk-form > * {
    grid-column: 1 / -1;
  }
  .mk-painel-real form.mk-form > label.mk-field:has(+ label.mk-field),
  .mk-painel-real form.mk-form > label.mk-field + label.mk-field {
    grid-column: auto;
  }
}

/* Cadastro: o botão do campo de arquivo é o nativo do sistema ("Escolher
   arquivo" em cinza do Windows). Ganha a pele do botão padrão do produto. */
.mk-painel-real .mk-field input[type='file'] {
  padding: var(--space-1-5) var(--space-2);
  cursor: pointer;
}
.mk-painel-real .mk-field input[type='file']::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.mk-painel-real .mk-field input[type='file']::file-selector-button:hover {
  border-color: var(--foreground);
}

/* Celular: a barra de abas da moldura é fixa no fundo (z-index 30). O aviso
   da sessão ("vai ser encerrada" e "acabou") nascia a 16px do fundo com
   z-index 10, e o botão dele ficava atrás da barra. Sobe acima dela, ocupa a
   largura com as margens da tela e não passa da borda esquerda em 390px. */
@media (max-width: 720px) {
  .mk-painel-real .mk-aviso-inatividade {
    z-index: 40;
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(var(--mk-respiro-barra) + var(--space-2));
    max-width: none;
  }
}

/* Papel: a regra da ilha tira a moldura da folha, mas o cabeçalho da sessão
   mora dentro do `<main>` e sairia impresso, com e-mail, tribunal e "Sair". */
@media print {
  .mk-painel-real .mk-cabecalho-painel {
    display: none;
  }
}

/* Fila e detalhe: o selo diz só a situação, e o resultado ("Intimação
   realizada com sucesso") e a causa vêm em texto logo abaixo, fora dele
   (`StatusBadge` com `resultadoFora`). Frase não cabe em chip: dentro da
   pílula, em três ou quatro linhas, ela virava uma bola. Cor de texto
   secundário sobre a superfície, a mesma das linhas de meta da fila. */
.mk-painel-real .mk-situacao {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.mk-painel-real .mk-situacao-resultado {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: var(--leading-snug);
  color: var(--mk-muted);
}
.mk-painel-real .mk-situacao-motivo {
  font-weight: var(--font-weight-semibold);
}
/* Detalhe: o selo fica à direita do título; o texto acompanha a borda. */
.mk-painel-real .mk-page-head-detalhe .mk-situacao {
  align-items: flex-end;
  text-align: right;
}
@media (max-width: 720px) {
  /* Cartão da fila: o selo fica no canto, ao lado do nome, como na demo, e o
     resultado ganha uma linha própria na largura toda. No canto ele quebrava
     em três linhas estreitas e empurrava o nome. A célula Situação e o
     invólucro somem da grade (`display: contents`) para o selo, o resultado e
     o marcador de ajuste cadastral virarem itens do cartão; a ordem de
     leitura segue a do DOM. Linha sem item fica com altura zero; só os 3px
     de espaço entre linhas somam. */
  /* 14/10/2026, segunda volta: o selo no canto dividia a linha com o nome, e
     o nome cortava cedo; o cartão empilhava cinco linhas. O nome ganha a linha
     toda, e o selo, o resultado curto e a ação dividem a última linha. */
  .mk-painel-real .mk-tabela tbody tr {
    grid-template-areas:
      'nome nome nome nome'
      'num ato data data'
      'proc proc proc proc'
      'cadastral cadastral cadastral cadastral'
      'situacao resultado resultado acao';
  }
  .mk-painel-real .mk-tabela td:nth-child(6),
  .mk-painel-real .mk-tabela .mk-situacao {
    display: contents;
  }
  .mk-painel-real .mk-tabela td:nth-child(6) .mk-badge {
    grid-area: situacao;
    justify-self: start;
    margin-top: var(--space-1-5);
  }
  .mk-painel-real .mk-tabela .mk-situacao-resultado {
    grid-area: resultado;
    min-width: 0;
    margin-top: var(--space-1-5);
  }
  .mk-painel-real .mk-tabela .mk-td-acao {
    grid-area: acao;
    justify-self: end;
    margin-top: var(--space-1-5);
  }
  .mk-painel-real .mk-tabela .mk-marcador-cadastral {
    grid-area: cadastral;
  }
  /* Detalhe: o cabeçalho empilha e o selo vai para a esquerda. */
  .mk-painel-real .mk-page-head-detalhe .mk-situacao {
    align-items: flex-start;
    text-align: left;
  }
}

/* Início (14/10/2026): o que aguarda a servidora, as três famílias e os
   últimos atos. O número é o primeiro que o olho acha em cada linha: Inter
   tabular, peso de título, à esquerda do rótulo. */
.mk-painel-real .mk-inicio {
  display: grid;
  gap: var(--space-4);
}
.mk-painel-real .mk-inicio > .mk-card {
  margin-bottom: 0;
}
.mk-painel-real .mk-inicio-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mk-painel-real .mk-inicio-nada {
  margin: 0;
  color: var(--mk-muted);
}
.mk-painel-real .mk-inicio-num {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-none);
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.mk-painel-real .mk-inicio-rotulo {
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

/* Aguardam você: cada linha é um link para a fila filtrada. */
.mk-painel-real .mk-inicio-aguardam .mk-inicio-lista > li + li {
  border-top: 1px solid var(--border);
}
.mk-painel-real .mk-inicio-aguarda {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--control-min-height);
  padding: var(--space-3) var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.mk-painel-real .mk-inicio-aguarda .mk-inicio-num {
  text-align: right;
}
.mk-painel-real .mk-inicio-aguarda:hover {
  background: var(--muted);
}
.mk-painel-real .mk-inicio-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}
.mk-painel-real .mk-inicio-desc {
  font-size: var(--text-sm);
  color: var(--mk-muted);
}
.mk-painel-real .mk-inicio-seta {
  width: 20px;
  height: 20px;
  color: var(--mk-verde);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.mk-painel-real .mk-inicio-aguarda:hover .mk-inicio-seta {
  transform: translateX(2px);
}

/* As três famílias: três cartões-link do mesmo tamanho, lado a lado. */
.mk-painel-real .mk-inicio-familias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.mk-painel-real .mk-inicio-familia {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin: 0;
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.mk-painel-real .mk-inicio-familia:hover {
  border-color: var(--mk-verde);
}
.mk-painel-real .mk-inicio-familia .mk-inicio-rotulo {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--mk-muted);
}

/* Últimos atos: nome e meta, selo, ação. */
.mk-painel-real .mk-inicio-ultimos-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.mk-painel-real .mk-inicio-ultimos-cab .mk-card-titulo {
  margin: 0;
}
.mk-painel-real .mk-inicio-ato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 7.5rem;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius-md);
}
.mk-painel-real .mk-inicio-ato + .mk-inicio-ato {
  border-top: 1px solid var(--border);
}
.mk-painel-real .mk-inicio-ato-quem {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}
.mk-painel-real .mk-inicio-ato .mk-linha-link {
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
  text-decoration: none;
}
.mk-painel-real .mk-inicio-ato-meta {
  font-size: var(--text-sm);
  color: var(--mk-muted);
}
.mk-painel-real .mk-inicio-ato .mk-linha-acao {
  justify-self: end;
}
@media (max-width: 720px) {
  .mk-painel-real .mk-inicio-familias {
    gap: var(--space-2);
  }
  .mk-painel-real .mk-inicio-familia {
    padding: var(--space-3);
  }
  .mk-painel-real .mk-inicio-aguarda {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: var(--space-3);
  }
  .mk-painel-real .mk-inicio-ato {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'quem selo'
      'acao acao';
    row-gap: var(--space-1-5);
  }
  .mk-painel-real .mk-inicio-ato-quem {
    grid-area: quem;
  }
  .mk-painel-real .mk-inicio-ato .mk-badge {
    grid-area: selo;
    align-self: start;
  }
  .mk-painel-real .mk-inicio-ato .mk-linha-acao {
    grid-area: acao;
    justify-self: start;
  }
}

/* Início no computador (16/10/2026): "Aguardam você" era uma lista de linhas
   na largura toda, uma embaixo da outra, desenho do celular. No computador as
   duas viram dois blocos lado a lado. A partir de 1440px, o que aguarda e as
   três famílias dividem a mesma faixa, e os últimos atos vêm logo abaixo
   (abaixo disso a faixa cortava "Em andamento" e a frase do ajuste). */
@media (min-width: 721px) {
  .mk-painel-real .mk-inicio-aguardam .mk-inicio-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .mk-painel-real .mk-inicio-aguardam .mk-inicio-lista > li + li {
    border-top: 0;
  }
  .mk-painel-real .mk-inicio-aguarda {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: var(--space-3);
    height: 100%;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .mk-painel-real .mk-inicio-aguarda:hover {
    border-color: var(--mk-verde);
  }
}
@media (min-width: 1440px) {
  /* 3 para 2: com metade da faixa, a descrição de cada bloco cortava cedo. */
  .mk-painel-real .mk-inicio {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .mk-painel-real .mk-inicio-ultimos {
    grid-column: 1 / -1;
  }
  /* As famílias viram um quadro como o "Aguardam você": título à vista e três
     blocos dentro. Separadas, ficavam altas e vazias ao lado dele. */
  .mk-painel-real .mk-inicio-familias {
    grid-template-rows: auto 1fr;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--mk-border);
    border-radius: var(--radius-xl);
    background: var(--surface-gradient);
    box-shadow: var(--elevation-card);
  }
  .mk-painel-real .mk-inicio-familias > h2 {
    grid-column: 1 / -1;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .mk-painel-real .mk-inicio-familia {
    justify-content: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: none;
    box-shadow: none;
  }
  /* Na faixa, o bloco fica vertical como os das famílias: o número em cima e
     o texto na largura toda, embaixo. Em linha, a descrição cortava no meio. */
  .mk-painel-real .mk-inicio-aguarda {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'num seta'
      'texto texto';
    align-items: start;
    row-gap: var(--space-2);
  }
  .mk-painel-real .mk-inicio-aguarda .mk-inicio-num {
    grid-area: num;
    text-align: left;
  }
  .mk-painel-real .mk-inicio-aguarda .mk-inicio-texto {
    grid-area: texto;
  }
  .mk-painel-real .mk-inicio-aguarda .mk-inicio-seta {
    grid-area: seta;
  }
}

/* Linha clicável (fila e Início): o link principal da linha (`.mk-linha-link`)
   estica um `::after` por cima da linha inteira, e o clique em qualquer ponto
   abre o ato. Continua sendo um link de verdade: abre em nova aba, funciona sem
   JavaScript e é um alvo só para o teclado. A ação da linha, que tem destino
   próprio, sobe por cima do véu. O anel de foco contorna a linha toda. */
.mk-painel-real .mk-linha-clicavel {
  position: relative;
  transition: background var(--duration-fast) var(--ease-standard);
}
.mk-painel-real .mk-linha-clicavel .mk-linha-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* O anel vai no véu, que tem o tamanho da linha: nem todo navegador pinta
   `outline` num `<tr>`. */
.mk-painel-real .mk-linha-clicavel .mk-linha-link:focus-visible {
  outline: none;
}
.mk-painel-real .mk-linha-clicavel .mk-linha-link:focus-visible::after {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}
.mk-painel-real .mk-linha-clicavel .mk-linha-acao {
  position: relative;
  z-index: 1;
}
.mk-painel-real .mk-linha-clicavel:hover {
  background: var(--muted);
  cursor: pointer;
}
.mk-painel-real .mk-linha-clicavel:hover .mk-linha-link {
  text-decoration: underline;
}

/* Fila: o número de cada filtro, dentro do chip. Mais leve que o rótulo, para
   o rótulo continuar sendo o que se lê primeiro. */
.mk-painel-real .mk-chip-conta {
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--mk-muted);
}
.mk-painel-real .mk-chip-on .mk-chip-conta {
  color: var(--ink-text-soft);
}
/* Fila: o chip clicado esmaece até a fila filtrada chegar (`EsperaDoLink`). */
.mk-painel-real .mk-espera {
  display: none;
}
.mk-painel-real .mk-chip {
  transition:
    opacity var(--duration-base) var(--ease-standard),
    background var(--duration-base),
    border-color var(--duration-base),
    color var(--duration-base);
}
.mk-painel-real .mk-chip:has(.mk-espera[data-pendente]) {
  opacity: 0.6;
  cursor: progress;
}
/* Fila: quantos atos estão na tela. */
.mk-painel-real .mk-contagem-da-fila {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--mk-muted);
}
/* Fila: a nota de ajuste cadastral leva ao ato ou ao filtro. */
.mk-painel-real .mk-sinal-cadastral-acao {
  flex: none;
}

/* Fila no computador (FIN-220, item 1): o número CNJ, em fonte mono, alargava a
   coluna Processo e o nome do destinatário quebrava em três linhas. O nome
   ganha um piso, o processo encolhe a letra e pode quebrar, e o protocolo e a
   data não quebram. */
@media (min-width: 721px) {
  /* Sete colunas e a ação sem quebra: com os 18px da ilha dos dois lados de
     cada célula, a tabela passava 5px da caixa em 1440 e ganhava rolagem
     interna. */
  .mk-painel-real .mk-tabela th,
  .mk-painel-real .mk-tabela td {
    padding-inline: var(--space-3-5);
  }
  /* Com nome, processo e situação numa linha só, a tabela da fila pedia 1204px
     numa caixa de 1072 em 1440, e a coluna Ação saía da vista. A letra da
     tabela desce de 15,5px (ilha) para o piso da operação densa (13px,
     `--text-sm`), que o design system admite em tabela. */
  .mk-painel-real .mk-tabela-wrap > .mk-tabela {
    font-size: var(--text-sm);
  }
  .mk-painel-real .mk-tabela td.mk-td-nome {
    min-width: 11rem;
  }
  .mk-painel-real .mk-tabela td[data-label='Processo'] {
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
  }
  .mk-painel-real .mk-tabela td[data-label='Nº'],
  .mk-painel-real .mk-tabela td[data-label='Criado em'],
  .mk-painel-real .mk-tabela .mk-td-acao {
    white-space: nowrap;
  }
}

/* Detalhe (14/10/2026): o próximo passo sobe. 16/10/2026, terceira volta: o
   celular tem proporção fixa de aparelho (pedido do Maicon: "tem uma proporcao
   que precisa ser respeitada pra manter a aparencia de um celular"), e por isso
   fica sozinho na coluna da direita, do topo ao fim, com o próximo passo, o
   rito e os dados e a linha do tempo à esquerda. Assim o aparelho inteiro cabe
   na primeira vista em 1440 × 900. As quatro peças são filhas da grade; no
   celular a ordem é a do DOM: próximo passo, conversa, rito e dados, linha do
   tempo. */
.mk-painel-real .mk-detalhe-grade {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
.mk-painel-real .mk-detalhe-grade .mk-card {
  margin-bottom: 0;
}
@media (min-width: 981px) {
  /* A última linha absorve a sobra: quando o celular é mais alto que o resto
     (ato pendente), o espaço fica embaixo da linha do tempo, e não entre os
     cartões. */
  .mk-painel-real .mk-detalhe-grade {
    grid-template-columns: minmax(0, 1fr) 21rem;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      'acao conversa'
      'rito conversa'
      'tempo conversa';
  }
  .mk-painel-real .mk-detalhe-grade > .mk-proximo-passo {
    grid-area: acao;
  }
  .mk-painel-real .mk-detalhe-grade > .mk-conversa {
    grid-area: conversa;
  }
  .mk-painel-real .mk-detalhe-grade > .mk-rito-e-dados {
    grid-area: rito;
  }
  .mk-painel-real .mk-detalhe-grade > .mk-linha-do-tempo {
    grid-area: tempo;
  }
  /* No topo da coluna larga, a certidão (e o desfecho, quando há) à esquerda
     e o botão à direita, na mesma faixa. */
  .mk-painel-real .mk-proximo-passo .mk-certidao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-4);
  }
  .mk-painel-real .mk-proximo-passo .mk-certidao > :last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}
/* Fixo ao rolar só quando o aparelho inteiro cabe na janela; abaixo disso, ele
   rola com a página (uma coluna fixa mais alta que a janela esconde o fim). */
@media (min-width: 981px) and (min-height: 880px) {
  .mk-painel-real .mk-detalhe-grade > .mk-conversa {
    position: sticky;
    top: var(--space-4);
  }
}

/* O rito e os dados do ato num quadro só (16/10/2026, segunda volta): dois
   cartões curtos seguidos repetiam o vazio ao lado do celular. No celular e no
   computador estreito, um sobre o outro, divididos por um fio; a partir de
   1281px, lado a lado. */
.mk-painel-real .mk-rito-e-dados {
  display: grid;
  min-width: 0;
}
.mk-painel-real .mk-rito-e-dados > section {
  min-width: 0;
}
.mk-painel-real .mk-rito-e-dados .mk-dados {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
@media (min-width: 1281px) {
  .mk-painel-real .mk-detalhe-grade {
    grid-template-columns: minmax(0, 1fr) 24rem;
  }
  .mk-painel-real .mk-rito-e-dados {
    grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  }
  .mk-painel-real .mk-rito-e-dados .mk-rito {
    padding-right: var(--space-6);
  }
  .mk-painel-real .mk-rito-e-dados .mk-dados {
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--space-6);
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}

/* A troca de etapa do rito que chega pela atualização automática assenta a cor,
   em vez de saltar. */
.mk-painel-real .mk-no-titulo,
.mk-painel-real .mk-no::before {
  transition: color var(--duration-moderate) var(--ease-standard);
}
/* O quadro do próximo passo: a borda em petróleo diz "é aqui que se age".
   O alvo do "Despachar" da fila (`#proximo-passo`) recebe o foco do endereço
   sem o anel, que ali seria ruído; o leitor de tela anuncia o título. */
.mk-painel-real .mk-proximo-passo {
  border-color: var(--mk-verde);
  scroll-margin-top: var(--space-4);
}
.mk-painel-real .mk-proximo-passo:focus {
  outline: none;
}
.mk-painel-real .mk-proximo-passo .mk-contexto {
  margin-top: 0;
}
.mk-painel-real .mk-proximo-passo .mk-certidao {
  border: 0;
  padding: 0;
  background: none;
}
/* O selo numa linha só: a coluna lateral tem largura para ele (24rem), e o
   respiro interno encolhe um pouco. Nunca passa da borda do quadro. */
.mk-painel-real .mk-proximo-passo .mk-selo-chip {
  max-width: 100%;
  padding-inline: var(--space-3);
  white-space: nowrap;
}
.mk-painel-real .mk-despacho .mk-form-acoes {
  justify-content: flex-start;
}
/* Os dados do ato: rótulo à esquerda, valor à direita, um por linha, sem
   quebra. O valor longo corta com reticências e fica inteiro no `title`. */
.mk-painel-real .mk-dados-do-ato {
  display: grid;
  margin: 0;
}
.mk-painel-real .mk-dados-linha {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-1-5);
}
.mk-painel-real .mk-dados-linha + .mk-dados-linha {
  border-top: 1px solid var(--border);
}
.mk-painel-real .mk-dados-linha dt {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-painel-real .mk-dados-linha dd {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--foreground);
}
/* O valor numa linha, com reticências; o "Copiar" ao lado não encolhe. */
.mk-painel-real .mk-dado-valor {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* No celular, o rótulo vai em cima e o valor ganha a largura toda: o número
   do processo cabe inteiro, sem reticências (adversarial de 14/10). De 981 a
   1280px também: a coluna dos dados fica estreita ao lado do celular, e o CPF
   cortava ao lado do "Copiar" (16/10/2026). */
@media (max-width: 480px), (min-width: 981px) and (max-width: 1280px) {
  .mk-painel-real .mk-dados-linha {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-0-5);
  }
}

/* Detalhe: "Ato cadastrado", logo depois do cadastro. */
.mk-painel-real .mk-aviso-cadastro {
  border-color: var(--status-concluido);
  background: var(--status-concluido-tint);
  padding: var(--space-3) var(--space-4);
  animation: mk-entra var(--duration-slow) var(--ease-standard);
}
.mk-painel-real .mk-aviso-cadastro p {
  margin: 0;
}

/* Cadastro (14/10/2026): o formulário e, ao lado, o resumo do ato, fixo ao
   rolar. Abaixo de 980px o resumo sai: numa coluna só ele viria depois do
   botão de cadastrar, repetindo o que a pessoa acabou de ver. */
.mk-painel-real .mk-cadastro-grade {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
.mk-painel-real .mk-cadastro-grade > .mk-card {
  margin-bottom: 0;
}
.mk-painel-real .mk-resumo-do-ato {
  display: none;
}
@media (min-width: 981px) {
  .mk-painel-real .mk-cadastro-grade {
    grid-template-columns: minmax(0, 680px) minmax(16rem, 22rem);
  }
  .mk-painel-real .mk-resumo-do-ato {
    display: block;
    position: sticky;
    top: var(--space-4);
  }
}
.mk-painel-real .mk-resumo-do-ato dl {
  display: grid;
  gap: var(--space-2-5);
  margin: 0;
}
.mk-painel-real .mk-resumo-linha {
  display: grid;
  gap: var(--space-0-5);
}
.mk-painel-real .mk-resumo-linha dt {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk-painel-real .mk-resumo-linha dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--foreground);
  transition: color var(--duration-base) var(--ease-standard);
}
/* O que falta: a palavra "falta", em texto secundário e itálico. Nunca só a
   cor (eMAG). */
.mk-painel-real .mk-resumo-linha dd.mk-resumo-falta {
  color: var(--mk-muted);
  font-style: italic;
}

/* Fila no celular: com o número em cada chip, os seis filtros quebravam em
   três linhas e o primeiro ato ficava abaixo da dobra. Os chips viram uma
   faixa só, que rola na horizontal dentro dela mesma (a página não rola de
   lado). A faixa encosta nas bordas da tela para mostrar que continua. */
@media (max-width: 720px) {
  .mk-painel-real .mk-filtros .mk-chips {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--space-4));
    padding: var(--space-0-5) var(--space-4);
    scrollbar-width: none;
    scroll-padding-inline: var(--space-4);
  }
  .mk-painel-real .mk-filtros .mk-chips a.mk-chip {
    flex: none;
  }
}

/* Uma linha só (14/10/2026, pedido do Maicon): rótulo, nome e meta não quebram
   em duas linhas. O texto longo corta com reticências; quem usa `.mk-uma-linha`
   põe o texto inteiro no `title`, e o leitor de tela lê o texto todo. */
.mk-painel-real .mk-uma-linha {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-painel-real .mk-page-head-titulo {
  min-width: 0;
}
.mk-painel-real .mk-page-head-detalhe .mk-page-head-titulo {
  flex: 1 1 0;
}
@media (max-width: 720px) {
  /* O nome no título do detalhe cabe numa linha no celular: a letra desce
     um degrau, e só o nome muito longo corta. */
  .mk-painel-real .mk-page-head-detalhe h1 {
    font-size: var(--text-2xl);
  }
}

/* Fila: o destinatário numa linha, com um teto de largura para o corte. O
   número do processo e a situação curta também não quebram. */
@media (min-width: 721px) {
  .mk-painel-real .mk-tabela td.mk-td-nome {
    max-width: 16rem;
  }
  .mk-painel-real .mk-tabela td[data-label='Processo'] {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}
.mk-painel-real .mk-tabela td.mk-td-nome {
  min-width: 0;
}
.mk-painel-real .mk-situacao-curta {
  display: block;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .mk-painel-real .mk-tabela td.mk-td-nome {
    overflow: hidden;
  }
  .mk-painel-real .mk-situacao-curta {
    max-width: none;
  }
}

/* A nota de ajuste cadastral numa linha: ícone, frase e o caminho. */
.mk-painel-real .mk-sinal-cadastral {
  flex-wrap: nowrap;
}
.mk-painel-real .mk-sinal-cadastral p {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Início: as descrições e os rótulos das famílias numa linha. */
.mk-painel-real .mk-inicio-familia .mk-inicio-rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .mk-painel-real .mk-inicio-familia {
    padding: var(--space-3) var(--space-2-5);
  }
  .mk-painel-real .mk-inicio-familia .mk-inicio-rotulo {
    font-size: var(--text-xs);
  }
  .mk-painel-real .mk-inicio-familia .mk-inicio-num {
    font-size: var(--text-2xl);
  }
}
.mk-painel-real .mk-inicio-ato .mk-situacao {
  align-items: flex-end;
  text-align: right;
}
@media (max-width: 720px) {
  .mk-painel-real .mk-inicio-ato .mk-situacao {
    grid-area: selo;
    align-self: start;
  }
  .mk-painel-real .mk-inicio-ato .mk-situacao-curta {
    max-width: 9rem;
  }
}

/* Conta: o e-mail numa linha. */
.mk-painel-real .mk-conta-painel .mk-cabecalho-email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Resumo do cadastro: cada valor numa linha. */
.mk-painel-real .mk-resumo-linha dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Linha do tempo (14/10/2026): em três colunas, o evento ficava espremido
   numa coluna estreita, em até oito linhas no celular (print do Maicon, na
   certidão). Cada evento vira um bloco: o evento na largura toda; quem afirma
   e a data numa linha menor, embaixo. Só na tela: no papel a certidão sai em
   tabela.
   - Detalhe do ato: sempre em bloco, e o evento numa linha, com reticências e
     o texto inteiro no `title` (e na certidão, onde sai inteiro).
   - Certidão: em bloco no celular; o evento pode quebrar, porque ocupa a
     largura toda (é documento, e lá a prosa quebra). */
@media screen {
  .mk-painel-real .mk-linha-do-tempo .mk-tabela thead {
    display: none;
  }
  .mk-painel-real .mk-linha-do-tempo .mk-tabela,
  .mk-painel-real .mk-linha-do-tempo .mk-tabela tbody {
    display: block;
    width: 100%;
  }
  .mk-painel-real .mk-linha-do-tempo .mk-tabela tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'evento evento'
      'quem data';
    gap: var(--space-0-5) var(--space-3);
    padding: var(--space-2-5) 0;
    border-bottom: 1px solid var(--border);
  }
  .mk-painel-real .mk-linha-do-tempo .mk-tabela tbody tr:last-child {
    border-bottom: 0;
  }
  .mk-painel-real .mk-linha-do-tempo .mk-tabela tbody td {
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .mk-painel-real .mk-linha-do-tempo .mk-tabela tbody td:nth-child(1) {
    grid-area: data;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--mk-muted);
  }
  .mk-painel-real .mk-linha-do-tempo .mk-tabela tbody td:nth-child(2) {
    grid-area: evento;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }
  .mk-painel-real .mk-linha-do-tempo .mk-tabela tbody td:nth-child(3) {
    grid-area: quem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--mk-muted);
  }
  .mk-painel-real .mk-linha-do-tempo .mk-tabela-wrap {
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .mk-painel-real .mk-linha-do-tempo .mk-tabela tbody td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media screen and (max-width: 720px) {
  .mk-painel-real .mk-certidao-tempo .mk-tabela thead {
    display: none;
  }
  .mk-painel-real .mk-certidao-tempo .mk-tabela,
  .mk-painel-real .mk-certidao-tempo .mk-tabela tbody {
    display: block;
    width: 100%;
  }
  .mk-painel-real .mk-certidao-tempo .mk-tabela tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'evento evento'
      'quem data';
    gap: var(--space-0-5) var(--space-3);
    padding: var(--space-2-5) 0;
    border-bottom: 1px solid var(--border);
  }
  .mk-painel-real .mk-certidao-tempo .mk-tabela tbody tr:last-child {
    border-bottom: 0;
  }
  .mk-painel-real .mk-certidao-tempo .mk-tabela tbody td {
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .mk-painel-real .mk-certidao-tempo .mk-tabela tbody td:nth-child(1) {
    grid-area: data;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--mk-muted);
  }
  .mk-painel-real .mk-certidao-tempo .mk-tabela tbody td:nth-child(2) {
    grid-area: evento;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    color: var(--foreground);
  }
  .mk-painel-real .mk-certidao-tempo .mk-tabela tbody td:nth-child(3) {
    grid-area: quem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--mk-muted);
  }
  .mk-painel-real .mk-certidao-tempo .mk-tabela-wrap {
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
}

/* Rito: a descrição do nó numa linha (inteira no `title`). */
.mk-painel-real .mk-no-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Os cartões das duas colunas do detalhe podem encolher abaixo do conteúdo:
   sem isto, o texto de uma linha só (`nowrap`) esticava o cartão e a página
   rolava de lado no celular. */
.mk-painel-real .mk-detalhe-grade > * {
  min-width: 0;
}

/* Início no celular: o selo dividia a linha com o nome, e o nome cortava cedo
   ("Smoke da Linha do ..."). O nome e a meta ganham a largura toda; o selo, o
   resultado curto e a ação vão na linha de baixo, lado a lado. */
@media (max-width: 720px) {
  .mk-painel-real .mk-inicio-ato {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'quem quem'
      'selo acao';
    align-items: center;
  }
  .mk-painel-real .mk-inicio-ato .mk-situacao {
    grid-area: selo;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    text-align: left;
  }
  .mk-painel-real .mk-inicio-ato > .mk-badge {
    grid-area: selo;
    justify-self: start;
  }
  .mk-painel-real .mk-inicio-ato .mk-situacao-curta {
    max-width: none;
    min-width: 0;
  }
  .mk-painel-real .mk-inicio-ato .mk-linha-acao {
    grid-area: acao;
    justify-self: end;
  }
}

/* Fila e Início no computador: o resultado curto vai ao lado do selo, e não
   embaixo. Toda linha fica com a mesma altura, concluída ou não. */
@media (min-width: 721px) {
  .mk-painel-real .mk-tabela .mk-situacao,
  .mk-painel-real .mk-inicio-ato .mk-situacao {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
  }
  .mk-painel-real .mk-tabela .mk-situacao-curta {
    min-width: 0;
  }
}

/* Fila no computador: layout fixo. Com tudo numa linha, a largura da tabela
   dependia do dado (um número CNJ longo, uma causa longa) e a coluna Ação
   saía da caixa. Cada coluna tem a sua fração da largura, e o que não cabe
   corta com reticências, com o texto inteiro no `title`. */
@media (min-width: 721px) {
  .mk-painel-real .mk-tabela-wrap > .mk-tabela {
    table-layout: fixed;
  }
  .mk-painel-real .mk-tabela-wrap > .mk-tabela th:nth-child(1) {
    width: 13%;
  }
  .mk-painel-real .mk-tabela-wrap > .mk-tabela th:nth-child(2) {
    width: 10%;
  }
  .mk-painel-real .mk-tabela-wrap > .mk-tabela th:nth-child(3) {
    width: 21%;
  }
  .mk-painel-real .mk-tabela-wrap > .mk-tabela th:nth-child(4) {
    width: 15%;
  }
  .mk-painel-real .mk-tabela-wrap > .mk-tabela th:nth-child(5) {
    width: 10%;
  }
  .mk-painel-real .mk-tabela-wrap > .mk-tabela th:nth-child(6) {
    width: 20%;
  }
  .mk-painel-real .mk-tabela-wrap > .mk-tabela th:nth-child(7) {
    width: 11%;
  }
  /* Protocolo e data nunca cortam (têm fração para caber inteiros); quem
     corta, se precisar, é o nome e o processo longos. */
  .mk-painel-real .mk-tabela-wrap > .mk-tabela th,
  .mk-painel-real .mk-tabela-wrap > .mk-tabela td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mk-painel-real .mk-tabela td.mk-td-nome {
    max-width: none;
  }
  .mk-painel-real .mk-tabela .mk-situacao .mk-badge {
    flex: none;
  }
  .mk-painel-real .mk-tabela .mk-situacao-curta {
    max-width: none;
  }
}

/* Certidão (14/10/2026, print do Maicon: "esse tipo de coisa é inadmissível").
   As grades contavam colunas pela largura da janela, e não pela do cartão: a
   768px, com a barra lateral, cada coluna da identificação ficava com 184px e
   o nome, a data e o hash quebravam em duas ou três linhas. As colunas agora
   nascem da largura do cartão: tantas quantas couberem com 13rem cada. */
.mk-painel-real .mk-detalhe {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
/* O hash (e qualquer valor de `.mk-quebra`) ocupa a linha inteira da grade:
   na coluna estreita ele quebrava em três pedaços. */
.mk-painel-real .mk-detalhe > div:has(> .mk-quebra) {
  grid-column: 1 / -1;
}
/* Verificação de identidade: fotos ao lado dos dados só com espaço de sobra;
   abaixo disso, fotos em cima e dados embaixo, cada um na largura toda. */
@media (max-width: 1100px) {
  .mk-painel-real .mk-verificacao-resumo {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Dados completos do verificador: rótulo em cima do valor no celular. Em
   duas colunas, "Data de nascimento" e o IP quebravam em colunas de 114px. */
@media (max-width: 720px) {
  .mk-painel-real .mk-verificacao-cru > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-0-5);
  }
}

/* Certidão no celular: é documento, e nada nele corta com reticências. Quem
   afirma e a hora não cabiam lado a lado ("Plataforma de men…"); cada um ganha
   a sua linha, na largura toda. */
@media screen and (max-width: 720px) {
  .mk-painel-real .mk-certidao-tempo .mk-tabela tbody tr {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'evento'
      'quem'
      'data';
  }
  .mk-painel-real .mk-certidao-tempo .mk-tabela tbody td:nth-child(3) {
    overflow: visible;
    white-space: normal;
  }
}

/* Marca na moldura (emMãos, identidade-emmaos.md): o M pequeno, alinhado
   ao eixo dos ícones da navegação, com respiro largo acima e abaixo. Ele
   assina a barra sem disputar com ela. */
.mk-painel-real .mk-logo {
  padding: var(--space-2) var(--space-2-5);
  margin: var(--space-2) 0 var(--space-6);
  line-height: 0;
}
.mk-painel-real .mk-logo:focus-visible,
.mk-painel-real .mk-topbar-marca:focus-visible {
  outline: 2px solid var(--ink-text-strong);
  outline-offset: 2px;
}

/* Andamento do rito sem trilho e sem losango (os dois eram do Dígito; o
   trilho de etapas foi recusado em 14/10). Fica uma lista numerada: o número
   em Mono, o passo feito em tinta, o atual em verde e em peso, o que falta em
   apoio. Nada de ponto ao lado do texto, nada pulsando. */
.mk-painel-real .mk-linha-rito {
  counter-reset: passo;
  gap: var(--space-2-5);
}
.mk-painel-real .mk-no {
  counter-increment: passo;
  padding: 0 0 0 var(--space-8);
}
.mk-painel-real .mk-no::before,
.mk-painel-real .mk-no:last-child::before {
  content: counter(passo);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;
  width: var(--space-6);
  background: none;
  font-family: var(--mk-mono);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mk-muted);
  text-align: right;
}
.mk-painel-real .mk-no-marca {
  display: none;
}
.mk-painel-real .mk-no-done::before {
  color: var(--mk-text);
}
.mk-painel-real .mk-no-atual::before,
.mk-painel-real .mk-no-atual .mk-no-titulo {
  color: var(--primary);
  font-weight: 700;
}
.mk-painel-real .mk-no-erro::before {
  color: var(--mk-falha-fg);
}
/* Ato concluído: todos os passos estão feitos, e o último é onde o ato
   parou. Ele leva o peso do passo atual (mesa de 14/10, a servidora: "nada
   mostra que o ato chegou ao 6"). */
@media print {
  /* A certidão no papel é documento, não print de tela: sem sombra e sem
     canto arredondado, com fio fino (adversarial de 14/10). */
  .mk-painel-real .mk-card {
    border-radius: 0;
    box-shadow: none;
    border-width: 0.5pt;
  }
}
.mk-painel-real .mk-no-done:last-child::before,
.mk-painel-real .mk-no-done:last-child .mk-no-titulo {
  color: var(--primary);
  font-weight: 700;
}

@media print {
  /* "Voltar ao mandado" não serve no papel. */
  .mk-painel-real .mk-trilha {
    display: none;
  }
}

/* Certidão: o órgão abre a folha, grande, acima do título do documento
   (identidade-emmaos.md, seção 9). Sem marca no cabeçalho. */
.mk-painel-real .mk-certidao-cabecalho {
  display: block;
}
.mk-painel-real .mk-certidao-orgao {
  margin: 0 0 var(--space-1);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--mk-text);
}

/* Certidão: o emMãos assina no pé, como fornecedor, separado do último quadro
   por um respiro largo e nenhum fio: longe da autenticação e de qualquer frase
   de verificação. Uma cor (o ponto é furo), igual na tela e no papel. */
.mk-painel-real .mk-certidao-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-12);
  padding-bottom: var(--space-6);
  color: var(--mk-text);
}
.mk-painel-real .mk-certidao-fornecedor {
  font-size: 13px;
  color: var(--mk-muted);
  white-space: nowrap;
}
.mk-painel-real .mk-certidao-assinatura {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--mk-mono);
  font-size: 13px;
  white-space: nowrap;
}
@media print {
  .mk-painel-real .mk-certidao-rodape {
    break-inside: avoid;
  }
}

/* Fila no computador, por largura (16/10/2026). A tabela de sete colunas pede
   cerca de 1100px: em 1024px cortava tudo ("2026.01…", "Citaç…") e em 1280px
   ainda cortava o número, o processo e a data. Ficam três desenhos:
   - até 720px, os cartões do celular (regras acima e em app.css);
   - de 721 a 1179px, os mesmos cartões, dois por linha;
   - de 1180 a 1439px, a tabela em quatro colunas: o ato e a data sob o número,
     o processo sob o nome;
   - de 1440px em diante, a tabela inteira, que cabe.
   Só a tabela da fila (`.mk-tabela-fila`): a linha do tempo também é
   `.mk-tabela`. Estas regras ficam no fim da folha para vencer as do
   computador (721px), que têm a mesma força. */
@media (min-width: 721px) and (max-width: 1179px) {
  .mk-painel-real .mk-tabela-wrap:has(> .mk-tabela-fila) {
    overflow: visible;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .mk-painel-real .mk-tabela-fila {
    display: block;
    width: 100%;
  }
  .mk-painel-real .mk-tabela-fila thead {
    display: none;
  }
  .mk-painel-real .mk-tabela-fila tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .mk-painel-real .mk-tabela-fila tbody tr {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      'nome nome nome nome'
      'num ato data data'
      'proc proc proc proc'
      'cadastral cadastral cadastral cadastral'
      'situacao resultado resultado acao';
    align-content: start;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-3-5) var(--space-4);
    border: 1px solid var(--mk-border);
    border-radius: var(--radius-xl);
    background: var(--surface-gradient);
    box-shadow: var(--elevation-card);
  }
  .mk-painel-real .mk-tabela-fila tbody tr:hover {
    background: var(--muted);
  }
  .mk-painel-real .mk-tabela-fila tbody td {
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(1) {
    grid-area: num;
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(2) {
    grid-area: ato;
    color: var(--mk-muted);
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(3) {
    grid-area: nome;
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(4) {
    grid-area: proc;
    font-size: var(--text-xs);
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(5) {
    grid-area: data;
    color: var(--mk-muted);
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(6),
  .mk-painel-real .mk-tabela-fila .mk-situacao {
    display: contents;
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(6) .mk-badge {
    grid-area: situacao;
    justify-self: start;
    margin-top: var(--space-1-5);
  }
  .mk-painel-real .mk-tabela-fila .mk-situacao-resultado {
    grid-area: resultado;
    min-width: 0;
    margin-top: var(--space-1-5);
  }
  .mk-painel-real .mk-tabela-fila .mk-td-acao {
    grid-area: acao;
    justify-self: end;
    margin-top: var(--space-1-5);
  }
  .mk-painel-real .mk-tabela-fila .mk-marcador-cadastral {
    grid-area: cadastral;
  }
}

@media (min-width: 1180px) and (max-width: 1439px) {
  .mk-painel-real .mk-tabela-fila,
  .mk-painel-real .mk-tabela-fila thead,
  .mk-painel-real .mk-tabela-fila tbody {
    display: block;
    width: 100%;
  }
  .mk-painel-real .mk-tabela-fila tr {
    display: grid;
    grid-template-columns: 5.5rem 4.75rem minmax(0, 1fr) 15rem 7.5rem;
    column-gap: var(--space-4);
    align-items: center;
    padding-inline: var(--space-4);
  }
  .mk-painel-real .mk-tabela-fila th,
  .mk-painel-real .mk-tabela-fila td {
    min-width: 0;
    padding-inline: 0;
  }
  /* O cabeçalho: uma linha, com o fio embaixo na largura toda. */
  .mk-painel-real .mk-tabela-fila thead tr {
    grid-template-areas: 'num num nome situacao acao';
    background: var(--mk-papel);
    box-shadow: inset 0 -1px 0 var(--mk-border);
  }
  .mk-painel-real .mk-tabela-fila th {
    background: none;
    box-shadow: none;
  }
  /* As larguras em porcentagem da tabela de sete colunas (regra de 721px)
     encolhiam os títulos na grade ("DESTINA…"). */
  .mk-painel-real .mk-tabela-wrap > .mk-tabela.mk-tabela-fila th {
    width: auto;
  }
  .mk-painel-real .mk-tabela-fila th:nth-child(1) {
    grid-area: num;
  }
  .mk-painel-real .mk-tabela-fila th:nth-child(3) {
    grid-area: nome;
  }
  .mk-painel-real .mk-tabela-fila th:nth-child(6) {
    grid-area: situacao;
  }
  .mk-painel-real .mk-tabela-fila th:nth-child(7) {
    grid-area: acao;
  }
  /* Ato, processo e data não têm coluna própria aqui, mas os títulos seguem
     para o leitor de tela: escondidos só da vista. */
  .mk-painel-real .mk-tabela-fila th:nth-child(2),
  .mk-painel-real .mk-tabela-fila th:nth-child(4),
  .mk-painel-real .mk-tabela-fila th:nth-child(5) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .mk-painel-real .mk-tabela-fila tbody tr {
    grid-template-areas:
      'num num nome situacao acao'
      'ato data proc situacao acao';
    row-gap: var(--space-0-5);
    padding-block: var(--space-2-5);
    border-bottom: 1px solid var(--mk-border);
  }
  .mk-painel-real .mk-tabela-fila tbody tr:last-child {
    border-bottom: 0;
  }
  .mk-painel-real .mk-tabela-fila tbody td {
    padding-block: 0;
    border: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(1) {
    grid-area: num;
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(2) {
    grid-area: ato;
    font-size: var(--text-xs);
    color: var(--mk-muted);
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(3) {
    grid-area: nome;
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(4) {
    grid-area: proc;
    font-size: var(--text-xs);
    color: var(--mk-muted);
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(5) {
    grid-area: data;
    font-size: var(--text-xs);
    color: var(--mk-muted);
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(6) {
    grid-area: situacao;
    overflow: visible;
    white-space: normal;
  }
  .mk-painel-real .mk-tabela-fila td:nth-child(7) {
    grid-area: acao;
  }
}

/* A linha do tempo ligada à conversa do ato (16/10/2026). A descrição corta
   com reticências no próprio `span`, e o "Ver na conversa" fica ao lado, sem
   encolher. No computador ele aparece com o mouse ou o foco na linha; no toque
   fica sempre à vista. A linha acesa leva fundo e contorno, e não barra
   lateral (seria "linha", recusada). */
@media screen {
  .mk-painel-real .mk-linha-do-tempo .mk-tabela tbody td:nth-child(2) {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }
  .mk-painel-real .mk-linha-do-tempo .mk-evento-descricao {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.mk-painel-real .mk-ver-na-conversa {
  position: relative;
  flex: none;
  padding: var(--space-0-5) var(--space-1-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--primary);
  cursor: pointer;
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}
/* Alvo de toque de 24px no mínimo (WCAG 2.5.8), sem mudar a linha. */
.mk-painel-real .mk-ver-na-conversa::before {
  content: '';
  position: absolute;
  inset: -6px -4px;
}
.mk-painel-real .mk-ver-na-conversa:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}
.mk-painel-real .mk-ver-na-conversa:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .mk-painel-real .mk-ver-na-conversa {
    opacity: 0;
  }
  .mk-painel-real tr:hover .mk-ver-na-conversa,
  .mk-painel-real tr:focus-within .mk-ver-na-conversa,
  .mk-painel-real tr[data-ligado] .mk-ver-na-conversa {
    opacity: 1;
  }
  .mk-painel-real .mk-ver-na-conversa:hover {
    background: var(--muted);
  }
}
.mk-painel-real .mk-tabela tbody tr[data-evento] {
  transition:
    background var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}
.mk-painel-real .mk-tabela tbody tr[data-ligado] {
  background: var(--veil-petroleo-soft);
  box-shadow: inset 0 0 0 2px var(--ring);
}
.mk-painel-real .mk-tabela tbody tr[data-evento]:focus {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}