/* ============================================================
   NETSPEED — COMPONENTES M3 DO PAINEL ADMINISTRATIVO
   Depende de m3.css e m3-componentes.css, nesta ordem.
   ============================================================ */

body.m3-admin { padding-bottom: 0; }

/* ============================================================
   TOP APP BAR
   ============================================================ */
.m3-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--md-space-3);
  min-height: 64px; padding: var(--md-space-2) var(--md-space-4);
  padding-top: calc(var(--md-space-2) + env(safe-area-inset-top));
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}
.m3-topbar__logo { height: 24px; flex: 0 0 auto; }
.m3-topbar__titulo { font: var(--md-title-large); font-weight: 500; margin: 0; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-topbar__acoes { display: flex; align-items: center; gap: var(--md-space-1); flex: 0 0 auto; }

/* navegação horizontal — só no desktop */
.m3-nav-topo { display: none; }
@media (min-width: 840px) {
  .m3-nav-topo { display: flex; gap: var(--md-space-1); flex: 1; justify-content: center; }
  .m3-nav-topo a {
    display: inline-flex; align-items: center; gap: var(--md-space-2);
    padding: var(--md-space-2) var(--md-space-4); border-radius: var(--md-shape-full);
    font: var(--md-label-large); font-weight: 500; text-decoration: none;
    color: var(--md-on-surface-variant); position: relative;
  }
  .m3-nav-topo a[aria-current] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
  .m3-topbar__titulo { flex: 0 0 auto; }
}

/* ============================================================
   NAVEGAÇÃO INFERIOR — celular
   ============================================================ */
.m3-navbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; justify-content: space-around;
  background: var(--md-surface-container);
  padding: var(--md-space-2) 0 calc(var(--md-space-2) + env(safe-area-inset-bottom));
  box-shadow: 0 -1px 0 var(--md-outline-variant);
}
.m3-navbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: var(--md-on-surface-variant);
  padding: var(--md-space-1) 0; min-width: 0;
}
.m3-navbar__ico {
  position: relative; display: grid; place-items: center;
  width: 56px; height: 32px; border-radius: var(--md-shape-full);
  transition: background-color var(--md-dur-short) var(--md-ease-standard);
}
.m3-navbar__ico svg { width: 22px; height: 22px; }
.m3-navbar a[aria-current] .m3-navbar__ico { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.m3-navbar a[aria-current] { color: var(--md-on-surface); }
.m3-navbar__rot { font: var(--md-label-medium); font-weight: 500; }
.m3-navbar__selo {
  position: absolute; top: -2px; right: 8px; min-width: 16px; height: 16px;
  border-radius: var(--md-shape-full); background: var(--md-error); color: var(--md-on-error);
  font: var(--md-label-small); font-weight: 500; display: grid; place-items: center; padding: 0 4px;
}
@media (min-width: 840px) { .m3-navbar { display: none; } }
.m3-admin-conteudo { padding-bottom: 96px; }
@media (min-width: 840px) { .m3-admin-conteudo { padding-bottom: var(--md-space-7); } }

/* ============================================================
   CAMPOS DE TEXTO PREENCHIDOS
   ============================================================ */
.m3-campo { position: relative; margin-bottom: var(--md-space-4); }
.m3-campo > label {
  display: block; font: var(--md-body-small); font-weight: 500;
  color: var(--md-on-surface-variant); margin-bottom: var(--md-space-1);
}
.m3-campo input[type=text], .m3-campo input[type=email], .m3-campo input[type=password],
.m3-campo input[type=date], .m3-campo select, .m3-campo textarea {
  width: 100%; font: var(--md-body-large); color: var(--md-on-surface);
  background: var(--md-surface-container-highest);
  border: 0; border-bottom: 1px solid var(--md-on-surface-variant);
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0;
  padding: var(--md-space-3) var(--md-space-4);
  transition: border-color var(--md-dur-short) var(--md-ease-standard);
  -webkit-appearance: none; appearance: none;
}
.m3-campo select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23414753' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
  padding-right: 40px;
}
html[data-theme="dark"] .m3-campo select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c1c6d6' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
}
.m3-campo textarea { resize: vertical; min-height: 88px; font: var(--md-body-medium); }
.m3-campo :is(input, select, textarea):focus {
  outline: none; border-bottom: 2px solid var(--md-primary);
  padding-bottom: calc(var(--md-space-3) - 1px);
}
.m3-campo input[type=file] { width: 100%; font: var(--md-body-medium); color: var(--md-on-surface-variant); }
.m3-campo__dica { font: var(--md-body-small); color: var(--md-on-surface-variant); margin: var(--md-space-1) 0 0; }
.m3-campo--erro :is(input, select, textarea) { border-bottom-color: var(--md-error); }
.m3-grade2 { display: grid; gap: var(--md-space-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .m3-grade2 { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   CHIPS DE SELEÇÃO (aplicações)
   ============================================================ */
.m3-chips { display: flex; flex-wrap: wrap; gap: var(--md-space-2); }
.m3-chip {
  display: inline-flex; align-items: center; gap: var(--md-space-2);
  min-height: 40px; padding: 0 var(--md-space-4) 0 var(--md-space-3);
  border-radius: var(--md-shape-sm);
  box-shadow: inset 0 0 0 1px var(--md-outline);
  background: transparent; color: var(--md-on-surface-variant);
  font: var(--md-label-large); font-weight: 500; cursor: pointer;
  transition: background-color var(--md-dur-short) var(--md-ease-standard);
}
.m3-chip input { position: absolute; opacity: 0; pointer-events: none; }
.m3-chip img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; background: #fff; }
.m3-chip__check { display: none; width: 18px; height: 18px; }
.m3-chip:has(input:checked) {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  box-shadow: none;
}
.m3-chip:has(input:checked) .m3-chip__check { display: block; }
.m3-chip:has(input:focus-visible) { outline: 3px solid var(--md-primary); outline-offset: 2px; }

/* ============================================================
   FAB
   ============================================================ */
.m3-fab {
  position: fixed; right: var(--md-space-4);
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 36;
  display: inline-flex; align-items: center; gap: var(--md-space-3);
  min-height: 56px; padding: 0 var(--md-space-5);
  border: 0; border-radius: var(--md-shape-lg);
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  font: var(--md-label-large); font-weight: 500; text-decoration: none;
  box-shadow: var(--md-elev-2); cursor: pointer;
  transition: transform var(--md-dur-medium) var(--md-ease-spring);
}
.m3-fab:active { transform: scale(.94); }
.m3-fab svg { width: 24px; height: 24px; }
@media (min-width: 840px) { .m3-fab { bottom: var(--md-space-5); } }

/* ============================================================
   LISTA DE DADOS
   ============================================================ */
.m3-item {
  display: flex; align-items: flex-start; gap: var(--md-space-3);
  padding: var(--md-space-3) 0;
}
.m3-item + .m3-item { border-top: 1px solid var(--md-outline-variant); }
.m3-avatar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--md-shape-full);
  display: grid; place-items: center;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  font: var(--md-title-medium); font-weight: 500;
}
.m3-item__corpo { flex: 1; min-width: 0; }
.m3-item__nome { font: var(--md-body-large); font-weight: 500; }
.m3-item__sub { font: var(--md-body-small); color: var(--md-on-surface-variant); margin-top: 1px; }
.m3-item__meta { display: flex; flex-wrap: wrap; gap: var(--md-space-2); margin-top: var(--md-space-2); }
.m3-item__acoes { display: flex; flex-wrap: wrap; gap: var(--md-space-2); margin-top: var(--md-space-3); }
.m3-item__acoes form { min-width: 0; max-width: 100%; }
.m3-item, .m3-item__corpo { min-width: 0; }
.m3-barra {
  height: 6px; border-radius: var(--md-shape-full);
  background: var(--md-secondary-container); overflow: hidden; max-width: 260px; margin-top: var(--md-space-2);
}
.m3-barra > i { display: block; height: 100%; background: var(--md-primary); border-radius: inherit;
  transition: width var(--md-dur-long) var(--md-ease-emphasized); }

/* ============================================================
   DIÁLOGO DE CONFIRMAÇÃO
   ============================================================ */
.m3-dialogo {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%);
  z-index: 62; width: min(420px, calc(100vw - 48px));
  background: var(--md-surface-container-high); color: var(--md-on-surface);
  border-radius: var(--md-shape-xl); padding: var(--md-space-5);
  box-shadow: var(--md-elev-3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--md-dur-medium) var(--md-ease-standard),
              transform var(--md-dur-medium) var(--md-ease-emphasized);
}
.m3-dialogo[data-aberto] { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.m3-dialogo__ico { color: var(--md-error); margin-bottom: var(--md-space-3); }
.m3-dialogo__ico svg { width: 24px; height: 24px; }
.m3-dialogo h2 { font: var(--md-headline-small); font-weight: 500; margin: 0 0 var(--md-space-3); }
.m3-dialogo p { font: var(--md-body-medium); color: var(--md-on-surface-variant); margin: 0; }
.m3-dialogo__acoes { display: flex; justify-content: flex-end; gap: var(--md-space-2); margin-top: var(--md-space-5); }

/* ============================================================
   TABELA DE AUDITORIA
   ============================================================ */
.m3-log { display: grid; gap: var(--md-space-2); }
.m3-log__linha {
  display: grid; gap: var(--md-space-1);
  padding: var(--md-space-3); border-radius: var(--md-shape-md);
  background: var(--md-surface-container);
}
.m3-log__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--md-space-3); }
.m3-log__quando { font: var(--md-label-small); color: var(--md-on-surface-variant); white-space: nowrap; }
.m3-log__quem { font: var(--md-body-small); color: var(--md-on-surface-variant); }
.m3-log__detalhe { font: var(--md-body-medium); }

/* ============================================================
   PAGINAÇÃO E ESTADO VAZIO
   ============================================================ */
.m3-paginacao { display: flex; align-items: center; justify-content: center;
  gap: var(--md-space-3); margin-top: var(--md-space-5); font: var(--md-body-small);
  color: var(--md-on-surface-variant); }
.m3-vazio { text-align: center; padding: var(--md-space-7) var(--md-space-4); }
.m3-vazio__ico {
  width: 72px; height: 72px; border-radius: var(--md-shape-xl); margin: 0 auto var(--md-space-4);
  display: grid; place-items: center;
  background: var(--md-surface-container-high); color: var(--md-on-surface-variant);
}
.m3-vazio__ico svg { width: 32px; height: 32px; }
.m3-vazio h2 { font: var(--md-title-medium); font-weight: 500; margin: 0 0 var(--md-space-2); }
.m3-vazio p { font: var(--md-body-medium); color: var(--md-on-surface-variant); margin: 0 auto; max-width: 34ch; }

/* busca */
.m3-busca { display: flex; gap: var(--md-space-2); align-items: flex-end; }
.m3-busca .m3-campo { flex: 1; margin-bottom: 0; }

@media print {
  .m3-topbar, .m3-navbar, .m3-fab, .noprint { display: none !important; }
  .m3-admin-conteudo { padding-bottom: 0; }
}

/* ============================================================
   CARTÃO DE ACESSO (voucher impresso)
   Estas regras viviam no app.css, que o layout novo não carrega
   mais. Sem elas o logo sai em tamanho natural e o QR fica sem
   dimensão — foi exatamente o que quebrou na Fase 3.
   Ficam propositalmente com cores fixas: o cartão é impresso em
   papel branco, então não deve seguir o tema claro/escuro.
   ============================================================ */
.cardbadge {
  width: 340px; max-width: 100%;
  background: #fff; color: #14202c;
  border-radius: 18px; overflow: hidden;
  border: 1px solid #0d1117;
}
.cardbadge .hd { background: #0d1117; padding: 16px; display: flex; justify-content: center; }
.cardbadge .hd img { height: 32px; width: auto; }
.cardbadge .bd { padding: 20px; text-align: center; }
.cardbadge .nm { font-size: 21px; font-weight: 700; color: #14202c; margin: 14px 0 2px; }
.cardbadge .rl { font-size: 13px; color: #55636f; }
.cardbadge #qr { min-height: 210px; display: grid; place-items: center; }
.cardbadge canvas, .cardbadge img.qr { width: 210px; height: 210px; display: block; }
.cardbadge .ft {
  background: #005cbb; color: #fff; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; padding: 8px; text-align: center;
}

@media print {
  .m3-topbar, .m3-navbar, .m3-fab, .m3-snack, .m3-dialogo, .m3-scrim, .noprint { display: none !important; }
  body.m3, body.m3-admin { background: #fff !important; }
  .m3-admin-conteudo { padding: 0 !important; }
  .cardbadge { border: 0; }
}

/* ============================================================
   GALERIA DE CAPAS
   ============================================================ */
.m3-capas { display: grid; gap: var(--md-space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.m3-capa {
  border-radius: var(--md-shape-md); overflow: hidden;
  background: var(--md-surface-container-high);
  display: flex; flex-direction: column;
}
.m3-capa > img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; display: block; background: var(--md-primary); }
.m3-capa__info { padding: var(--md-space-3) var(--md-space-3) 0; }
.m3-capa__nome { font: var(--md-body-medium); font-weight: 500; }
.m3-capa__uso { font: var(--md-label-small); color: var(--md-on-surface-variant); margin-top: 2px; }
.m3-capa form { padding: var(--md-space-2) var(--md-space-2) var(--md-space-2); }

/* seletor de capa no cadastro */
.m3-seletor-capas { display: grid; gap: var(--md-space-2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.m3-opcao-capa { position: relative; cursor: pointer; border-radius: var(--md-shape-md); overflow: hidden; display: block; }
.m3-opcao-capa input { position: absolute; opacity: 0; pointer-events: none; }
.m3-opcao-capa img, .m3-opcao-capa .m3-opcao-capa__padrao {
  width: 100%; aspect-ratio: 3 / 1; object-fit: cover; display: block;
  background: var(--md-primary); color: var(--md-on-primary);
}
.m3-opcao-capa .m3-opcao-capa__padrao { display: grid; place-items: center; font: var(--md-label-medium); font-weight: 500; }
.m3-opcao-capa__rot {
  display: block; font: var(--md-label-small); color: var(--md-on-surface-variant);
  padding: var(--md-space-1) var(--md-space-1) 0; text-align: center;
}
.m3-opcao-capa::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--md-shape-md);
  box-shadow: inset 0 0 0 2px transparent; pointer-events: none;
  transition: box-shadow var(--md-dur-short) var(--md-ease-standard);
}
.m3-opcao-capa:has(input:checked)::after { box-shadow: inset 0 0 0 3px var(--md-primary); }
.m3-opcao-capa:has(input:focus-visible)::after { box-shadow: inset 0 0 0 3px var(--md-tertiary); }

/* ============================================================
   MÉTRICAS
   ============================================================ */
.m3-kpis { display: grid; gap: var(--md-space-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.m3-kpi {
  background: var(--md-surface-container); border-radius: var(--md-shape-lg);
  padding: var(--md-space-4);
}
.m3-kpi--aviso { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.m3-kpi--erro  { background: var(--md-error-container); color: var(--md-on-error-container); }
.m3-kpi__rot { font: var(--md-label-medium); font-weight: 500; opacity: .85; }
.m3-kpi__num {
  font-family: var(--md-font); font-weight: 500; line-height: 1.05;
  font-size: clamp(2rem, 7vw, 2.5rem); margin: var(--md-space-2) 0 2px;
}
.m3-kpi__num span { font-size: .5em; margin-left: 2px; }
.m3-kpi__sub { font: var(--md-body-small); opacity: .8; }

.m3-destaque {
  display: flex; gap: var(--md-space-3); align-items: flex-start;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  border-radius: var(--md-shape-lg); padding: var(--md-space-4);
  margin-top: var(--md-space-3);
}
.m3-destaque__ico { flex: 0 0 auto; }
.m3-destaque__titulo { font: var(--md-title-medium); font-weight: 500; }
.m3-destaque__txt { font: var(--md-body-medium); margin: var(--md-space-1) 0 var(--md-space-3); }

.m3-serie {
  display: flex; align-items: flex-end; gap: var(--md-space-2); height: 160px;
  overflow-x: auto; scrollbar-width: none;
}
.m3-serie::-webkit-scrollbar { display: none; }
.m3-serie__col { min-width: 30px; }
.m3-serie__col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.m3-serie__valor { font: var(--md-label-small); font-weight: 500; color: var(--md-on-surface-variant); height: 16px; }
.m3-serie__barra {
  width: 100%; max-width: 44px; background: var(--md-primary);
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0; margin-top: auto;
  transition: height var(--md-dur-long) var(--md-ease-emphasized);
}
.m3-serie__rot { font: var(--md-label-small); color: var(--md-on-surface-variant); margin-top: var(--md-space-2); }

/* resumo de métricas no topo do painel */
.m3-resumo {
  display: flex; align-items: center; gap: var(--md-space-4);
  background: var(--md-surface-container); color: inherit;
  border-radius: var(--md-shape-lg); padding: var(--md-space-3) var(--md-space-4);
  margin-top: var(--md-space-4); text-decoration: none;
  overflow-x: auto; scrollbar-width: none;
}
.m3-resumo::-webkit-scrollbar { display: none; }
.m3-resumo__item { display: flex; flex-direction: column; min-width: 0; flex: 0 0 auto; }
.m3-resumo__num { font: var(--md-title-medium); font-weight: 500; color: var(--md-primary); }
.m3-resumo__rot { font: var(--md-label-small); color: var(--md-on-surface-variant); }
.m3-resumo__seta { margin-left: auto; color: var(--md-on-surface-variant); flex: 0 0 auto; }

/* abas do painel (ativos / desligamentos) */
.m3-abas { display: flex; gap: var(--md-space-2); overflow-x: auto; scrollbar-width: none; }
.m3-abas::-webkit-scrollbar { display: none; }
.m3-aba {
  display: inline-flex; align-items: center; gap: var(--md-space-2);
  padding: var(--md-space-2) var(--md-space-4); border-radius: var(--md-shape-full);
  font: var(--md-label-large); font-weight: 500; text-decoration: none; white-space: nowrap;
  color: var(--md-on-surface-variant); box-shadow: inset 0 0 0 1px var(--md-outline-variant);
}
.m3-aba.on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; }

/* caixa de marcação da lista de revogação */
.m3-check {
  width: 26px; height: 26px; flex: 0 0 auto; cursor: pointer;
  border-radius: var(--md-shape-xs); border: 2px solid var(--md-outline);
  background: transparent; color: var(--md-on-primary);
  display: grid; place-items: center; padding: 0;
  transition: background-color var(--md-dur-short) var(--md-ease-standard),
              border-color var(--md-dur-short) var(--md-ease-standard);
}
.m3-check.on { background: var(--md-primary); border-color: var(--md-primary); }
.m3-check[disabled] { opacity: .5; cursor: default; }

@media print {
  .m3-abas, .m3-kpi__rot { }
  .m3-check { border-color: #666; }
  .m3-check.on { background: #666; }
}

/* ícone dentro do chip de seleção */
.m3-chip img.chip-preenche { object-fit: cover; }
.m3-chip img.chip-encaixa  { object-fit: contain; }

/* ============================================================
   TERMOS E ASSINATURA
   ============================================================ */
.m3-termo {
  white-space: pre-wrap; font: var(--md-body-medium); line-height: 1.65;
  color: var(--md-on-surface);
}
.m3-assinatura {
  position: relative; background: #ffffff; border-radius: var(--md-shape-md);
  box-shadow: inset 0 0 0 1px var(--md-outline);
  height: 190px; overflow: hidden; touch-action: none;
}
.m3-assinatura canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.m3-assinatura__linha {
  position: absolute; left: 8%; right: 8%; bottom: 42px; height: 1px;
  background: #c7ccd4; pointer-events: none;
}
.m3-assinatura__dica {
  position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
  font: var(--md-body-small); color: #9aa3ad; pointer-events: none;
}

/* folha do termo assinado — pensada para impressão */
.m3-folha {
  background: var(--md-surface-container-low); border-radius: var(--md-shape-lg);
  padding: var(--md-space-5);
}
.m3-folha__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--md-space-3); }
.m3-folha__tabela { width: 100%; border-collapse: collapse; font: var(--md-body-small); margin-top: var(--md-space-4); }
.m3-folha__tabela th { text-align: left; font-weight: 500; padding: 6px 8px;
  border-bottom: 1px solid var(--md-outline-variant); color: var(--md-on-surface-variant); }
.m3-folha__tabela td { padding: 6px 8px; border-bottom: 1px solid var(--md-outline-variant); vertical-align: top; }
.m3-folha__tabela tbody tr td:first-child { color: var(--md-on-surface-variant); width: 38%; }
.m3-folha__assinatura { margin-top: var(--md-space-7); text-align: center; }
.m3-folha__assinatura img { max-width: 300px; max-height: 110px; display: block; margin: 0 auto -8px; }
.m3-folha__linha { height: 1px; background: var(--md-on-surface-variant); max-width: 320px; margin: 0 auto; }
.m3-folha__nome { font: var(--md-body-large); font-weight: 500; margin-top: var(--md-space-2); }
.m3-folha__cargo { font: var(--md-body-small); color: var(--md-on-surface-variant); }
.m3-folha__evidencia { margin-top: var(--md-space-6); }

@media print {
  .m3-folha { background: #fff !important; padding: 0; }
  .m3-folha__assinatura img { filter: none; }
  .m3-termo { font-size: 11pt; }
  .m3-folha__tabela { font-size: 9pt; }
}

/* ============================================================
   FOLHA A4 DE BOAS-VINDAS (Fase 7)

   Homologada com o Lucas: cartão em cima, instruções embaixo,
   uma via por folha A4 em pé.

   Cores fixas, de propósito — igual ao .cardbadge. Isto vai para
   papel branco: seguir o tema escuro imprimiria um retângulo preto
   e gastaria o toner do setor inteiro.

   Medidas em px, não em mm. O .cardbadge já vive em px (340px =
   90mm no papel) e o QR também. Misturar as duas unidades faria o
   cartão impresso sair de tamanho diferente do cartão da tela.
   Com margem de 12mm, sobram 700 x 1030px de área útil.
   ============================================================ */
.ns-a4-palco { overflow: auto; padding-bottom: var(--md-space-3); }
.ns-a4 {
  width: 700px; min-height: 1030px; box-sizing: border-box;
  margin: 0 auto; padding: 30px 34px;
  background: #fff; color: #14202c;
  border: 1px solid #d8dee6; border-radius: 6px;
  display: flex; flex-direction: column;
  font-family: var(--md-font);
}
.ns-a4__cartao { display: flex; justify-content: center; padding-bottom: 22px; }
.ns-a4__baixo {
  border-top: 1px solid #e4e8f0; padding-top: 22px;
  display: flex; flex-direction: column; flex: 1;
}
.ns-a4__ola { text-align: center; }
.ns-a4__ola h2 { font-size: 23px; font-weight: 600; margin: 0; color: #14202c; }
.ns-a4__ola p {
  font-size: 14.5px; color: #55636f; line-height: 1.5;
  max-width: 520px; margin: 6px auto 0;
}
.ns-a4__ola strong { font-weight: 600; color: #14202c; }
.ns-a4__seta { display: flex; justify-content: center; margin: 12px 0 4px; color: #005cbb; }
.ns-a4__passo { display: flex; gap: 16px; align-items: center; margin-top: 11px; }
.ns-a4__num {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  background: #005cbb; color: #fff; font-size: 15px; font-weight: 600;
  display: grid; place-items: center;
}
.ns-a4__pico { flex: 0 0 auto; color: #005cbb; display: grid; place-items: center; }
.ns-a4__ptxt { min-width: 0; }
.ns-a4__ptit { display: block; font-size: 16px; font-weight: 600; color: #14202c; }
.ns-a4__pdes { display: block; font-size: 13.5px; color: #55636f; line-height: 1.4; }
/* O passo 4 acontece DENTRO do app, não no papel. O fundo azul claro
   marca essa mudança de lugar sem precisar de mais texto. */
.ns-a4__passo--app {
  background: #eaf2ff; border-radius: 8px; padding: 11px 04px; margin: 14px -4px 0;
}
.ns-a4__passo--app .ns-a4__pdes { color: #3d5875; }
.ns-a4__plano {
  margin-top: 20px; background: #fff8e6; border: 1px solid #f0d99b;
  border-radius: 8px; padding: 15px 18px;
}
.ns-a4__plano-tit {
  font-size: 15px; font-weight: 600; color: #7a5a12;
  display: flex; align-items: center; gap: 8px;
}
.ns-a4__plano p { font-size: 13.5px; color: #7a5a12; margin: 5px 0 0; line-height: 1.4; }
.ns-a4__campos { display: flex; gap: 34px; margin-top: 11px; flex-wrap: wrap; }
.ns-a4__rot { font-size: 11px; color: #7a5a12; text-transform: uppercase; letter-spacing: .08em; }
.ns-a4__end {
  font-family: var(--md-font-mono); font-size: 16px; font-weight: 600; color: #14202c;
  overflow-wrap: anywhere;
}
.ns-a4__cod {
  font-family: var(--md-font-mono); font-size: 21px; font-weight: 700; color: #14202c;
  letter-spacing: .12em;
}
.ns-a4__pe {
  margin-top: auto; padding-top: 18px; border-top: 1px solid #e4e8f0;
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 12.5px; color: #55636f; line-height: 1.5;
}
.ns-a4__pe div:last-child { text-align: right; }

@media print {
  @page { size: A4 portrait; margin: 12mm; }
  .ns-a4-palco { overflow: visible; padding: 0; }
  .ns-a4 { border: 0; border-radius: 0; padding: 0; margin: 0; min-height: 0; }
  /* Uma via por folha: nada pode escorregar para uma segunda página. */
  .ns-a4__passo, .ns-a4__plano, .ns-a4__cartao { break-inside: avoid; page-break-inside: avoid; }
}