/* ============================================================================
   Fastback · fastback.css — o sistema visual

   Um arquivo só para o portal da cliente, o painel da loja e a administração.
   Tokens primeiro (cores, espaços, raios), componentes depois. O portal troca
   --fb-acento pela cor da loja: a cliente vê a marca dela, não a do Fastback.

   Componentes: botao, campo, cartao, etiqueta, aviso, tabela, abas, modal,
   toast, vazio, carregando, linha-do-tempo, pilha/barra/grade (layout) e o
   esqueleto do painel (.pn-*).

   Paleta azul do e-Fastback (11/10/2026, arquivo de design "e-Fastback · Marca
   e redesign"): cobalto para a ação, marinho-tinta para o texto e as ênfases,
   neutros frios ("névoa" e "céu"). Letra Mona Sans: expandida nos títulos e
   rótulos, normal no texto. Cartões e botões bem arredondados.

   Contraste (WCAG AA, 4,5:1 para texto comum): branco sobre o cobalto dá
   6,5:1; as ajudas, os verdes, âmbares e vermelhos das etiquetas e a versão
   escura do acento (links) passam no fundo da página.
   testes/painel-contraste.test.js confere essas contas.
   ========================================================================= */

/* Mona Sans (licença SIL OFL 1.1, /assets/fontes/OFL.txt), servida pelo
   próprio site: nenhum pedido ao Google, e o IP da cliente não sai daqui.
   Fonte variável: peso de 200 a 900 e largura de 75% a 125% (a "expandida"
   dos títulos é font-stretch: 125%). Os dois recortes do Google Fonts: latin
   (português inteiro) e latin-ext. */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('/assets/fontes/mona-sans-v4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('/assets/fontes/mona-sans-v4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Névoa (fundo), branco (cartões), céu (realces). */
  --fb-fundo: #f3f5fb;
  --fb-superficie: #ffffff;
  --fb-superficie-2: #f7f8fc;
  --fb-borda: #dce1ef;
  --fb-borda-forte: #c3cae2;
  /* Borda dos campos: 3:1 sobre o fundo e o branco (WCAG 1.4.11). */
  --fb-borda-campo: #8089b0;
  /* Marinho-tinta: texto, cartões escuros e o botão escuro. */
  --fb-tinta: #0b1236;
  --fb-tinta-2: #3a4266;
  --fb-tinta-3: #5c6488;
  /* Cobalto: a ação. */
  --fb-acento: #2e44f2;
  /* Links e texto em azul: legível sobre o branco, o fundo e o céu. */
  --fb-acento-escuro: #1e2fc4;
  --fb-acento-suave: #e8ecff;
  /* Texto do botão principal e o fundo dele no hover.
     O portal troca os quatro pela cor da loja (portal.js, aplicarCor). */
  --fb-acento-texto: #ffffff;
  --fb-acento-hover: #1e2fc4;
  /* Céu forte: realce sobre o marinho (barras, ícones). */
  --fb-ceu-forte: #8ea0ff;

  --fb-ok: #0b6e4c;
  --fb-ok-fundo: #dff4ec;
  --fb-info: #1e2fc4;
  --fb-info-fundo: #e8ecff;
  --fb-alerta: #8a4b00;
  --fb-alerta-fundo: #fff1db;
  --fb-erro: #b0213a;
  --fb-erro-fundo: #fde6ea;
  --fb-neutra: #3a4266;
  --fb-neutra-fundo: #eef0f6;

  --fb-raio: 14px;
  --fb-raio-p: 12px;
  --fb-raio-g: 22px;
  --fb-sombra: 0 1px 2px rgba(11, 18, 54, 0.04), 0 10px 30px rgba(46, 68, 242, 0.07);
  --fb-sombra-g: 0 24px 60px rgba(11, 18, 54, 0.2);
  --fb-sombra-acento: 0 10px 24px rgba(46, 68, 242, 0.26);
  --fb-fonte: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --fb-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fb-largura: 1180px;
}

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

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

body {
  margin: 0;
  background: var(--fb-fundo);
  color: var(--fb-tinta);
  font: 15px/1.5 var(--fb-fonte);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
}
/* Títulos na Mona Sans expandida (o eixo de largura da fonte variável). */
h1,
h2 {
  font-stretch: 125%;
}
h1 {
  font-size: 28px;
}
h2 {
  font-size: 19px;
}
h3 {
  font-size: 16px;
}
p {
  margin: 0;
}
a {
  color: var(--fb-acento-escuro);
}
img {
  max-width: 100%;
}
code,
.mono {
  font-family: var(--fb-mono);
}
/* Sem "tabular-nums": na Mona Sans os algarismos tabulares trazem o zero
   cortado (Ø), estranho nos números grandes e nos nºs de pedido. */
.numero {
  font-variant-numeric: normal;
}
.mudo {
  color: var(--fb-tinta-3);
}
.pequeno {
  font-size: 13px;
}
.forte {
  font-weight: 600;
}
.oculto {
  display: none !important;
}
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--fb-acento-escuro);
  outline-offset: 2px;
}

/* ---------- layout ---------- */
.pilha {
  display: flex;
  flex-direction: column;
  gap: var(--gap, 12px);
}
.barra {
  display: flex;
  align-items: center;
  gap: var(--gap, 10px);
  flex-wrap: wrap;
}
.barra.entre {
  justify-content: space-between;
}
.barra.fim {
  justify-content: flex-end;
}
.cresce {
  flex: 1 1 auto;
  min-width: 0;
}
.grade {
  display: grid;
  gap: var(--gap, 14px);
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr));
}
.grade-2 {
  display: grid;
  gap: var(--gap, 14px);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .grade-2 {
    grid-template-columns: 1fr;
  }
}

/* ---------- botão ---------- */
.botao {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--fb-borda);
  background: var(--fb-superficie);
  color: var(--fb-tinta);
  font: 600 14px/1 var(--fb-fonte);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.botao:hover {
  background: var(--fb-superficie-2);
  border-color: var(--fb-borda-forte);
}
.botao:active {
  transform: translateY(1px);
}
.botao:disabled,
.botao[aria-busy='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}
.botao.primario {
  background: var(--fb-acento);
  border-color: var(--fb-acento);
  color: var(--fb-acento-texto);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--fb-acento) 26%, transparent);
}
.botao.primario:hover {
  background: var(--fb-acento-hover);
  border-color: var(--fb-acento-hover);
}
.botao.perigo {
  color: var(--fb-erro);
  border-color: color-mix(in srgb, var(--fb-erro) 40%, white);
}
.botao.perigo:hover {
  background: var(--fb-erro-fundo);
}
.botao.escuro {
  background: var(--fb-tinta);
  border-color: var(--fb-tinta);
  color: #ffffff;
}
.botao.escuro:hover {
  background: var(--fb-tinta-2);
  border-color: var(--fb-tinta-2);
}
.botao.fantasma {
  border-color: transparent;
  background: transparent;
}
.botao.fantasma:hover {
  background: var(--fb-neutra-fundo);
}
.botao.pequeno {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}
.botao.grande {
  min-height: 52px;
  padding: 0 26px;
  font-size: 16px;
}
.botao.largo {
  width: 100%;
}

/* ---------- campos ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.campo > label,
.rotulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--fb-tinta-2);
}
.campo .ajuda {
  font-size: 12px;
  color: var(--fb-tinta-3);
}
.campo .erro-campo {
  font-size: 12px;
  color: var(--fb-erro);
}
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='date'],
input[type='search'],
input[type='password'],
input:not([type]),
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--fb-borda-campo);
  border-radius: var(--fb-raio-p);
  background: var(--fb-superficie);
  color: var(--fb-tinta);
  font: 15px/1.4 var(--fb-fonte);
}
textarea {
  min-height: 90px;
  resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--fb-acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fb-acento) 16%, transparent);
}
input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border-color: var(--fb-erro);
}
.opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1.5px solid var(--fb-borda);
  border-radius: var(--fb-raio-p);
  background: var(--fb-superficie);
  cursor: pointer;
}
.opcao:hover {
  border-color: var(--fb-borda-forte);
}
.opcao:has(input:checked) {
  border-color: var(--fb-acento);
  background: var(--fb-acento-suave);
}
.opcao input {
  margin-top: 3px;
  accent-color: var(--fb-acento);
}

/* O iPhone dá zoom ao focar campo com letra menor que 16 px. */
@media (max-width: 720px) {
  input[type='text'],
  input[type='email'],
  input[type='tel'],
  input[type='number'],
  input[type='date'],
  input[type='search'],
  input:not([type]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ---------- cartão ---------- */
.cartao {
  background: var(--fb-superficie);
  border: 1px solid var(--fb-borda);
  border-radius: var(--fb-raio-g);
  padding: 22px;
}
.cartao.compacto {
  padding: 16px 18px;
  border-radius: 18px;
}
/* Cartões de destaque: cobalto (a ação) e marinho (ênfase). */
.cartao.cobalto {
  background: var(--fb-acento);
  border-color: var(--fb-acento);
  color: var(--fb-acento-texto);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--fb-acento) 28%, transparent);
}
.cartao.marinho {
  background: var(--fb-tinta);
  border-color: var(--fb-tinta);
  color: #ffffff;
}
/* Rótulo pequeno em caixa alta, na letra expandida. */
.sobretitulo {
  font-stretch: 125%;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fb-tinta-3);
}
.cartao > .titulo-cartao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.separador {
  height: 1px;
  background: var(--fb-borda);
  margin: 14px 0;
  border: 0;
}

/* ---------- etiqueta (situação) ---------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--fb-neutra-fundo);
  color: var(--fb-neutra);
}
.etiqueta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.etiqueta.cor-ok {
  background: var(--fb-ok-fundo);
  color: var(--fb-ok);
}
.etiqueta.cor-info {
  background: var(--fb-info-fundo);
  color: var(--fb-info);
}
.etiqueta.cor-alerta {
  background: var(--fb-alerta-fundo);
  color: var(--fb-alerta);
}
.etiqueta.cor-erro {
  background: var(--fb-erro-fundo);
  color: var(--fb-erro);
}

/* ---------- aviso ---------- */
.aviso {
  display: flex;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--fb-raio);
  background: var(--fb-info-fundo);
  color: #17259a;
  font-size: 14px;
  border: 1px solid color-mix(in srgb, var(--fb-info) 20%, transparent);
}
.aviso.ok {
  background: var(--fb-ok-fundo);
  color: #08573c;
  border-color: color-mix(in srgb, var(--fb-ok) 20%, transparent);
}
.aviso.alerta {
  background: var(--fb-alerta-fundo);
  color: #6a3900;
  border-color: color-mix(in srgb, var(--fb-alerta) 25%, transparent);
}
.aviso.erro {
  background: var(--fb-erro-fundo);
  color: #8c1a2e;
  border-color: color-mix(in srgb, var(--fb-erro) 25%, transparent);
}

/* ---------- tabela ---------- */
.tabela-rolagem {
  overflow-x: auto;
  border: 1px solid var(--fb-borda);
  border-radius: var(--fb-raio-g);
  background: var(--fb-superficie);
}
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tabela th {
  text-align: left;
  font-stretch: 125%;
  font-size: 11px;
  font-weight: 600;
  color: var(--fb-tinta-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--fb-borda);
  background: var(--fb-superficie);
  white-space: nowrap;
}
.tabela td {
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f6;
  vertical-align: middle;
}
.tabela tr:last-child td {
  border-bottom: 0;
}
.tabela tr.clicavel {
  cursor: pointer;
}
.tabela tr.clicavel:hover td {
  background: var(--fb-superficie-2);
}

/* ---------- abas ---------- */
.abas {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 5px;
  border: 1px solid var(--fb-borda);
  border-radius: 999px;
  background: var(--fb-superficie);
  scrollbar-width: none;
  /* Largura toda: as abas da lista usam "contain: inline-size" (para não
     alargar a página no celular), e com isso "max-content" daria largura zero. */
  width: 100%;
}
.abas button,
.abas a {
  appearance: none;
  border: 0;
  background: none;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font: 600 14px var(--fb-fonte);
  color: var(--fb-tinta-2);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.abas button:not([aria-pressed='true']):not([aria-selected='true']):hover,
.abas a:not([aria-pressed='true']):not([aria-selected='true']):hover {
  background: var(--fb-fundo);
}
.abas [aria-selected='true'],
.abas [aria-pressed='true'] {
  color: #ffffff;
  background: var(--fb-tinta);
}
.abas .contador {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--fb-neutra-fundo);
  color: var(--fb-tinta-2);
  font-size: 12px;
}
.abas [aria-selected='true'] .contador,
.abas [aria-pressed='true'] .contador {
  background: var(--fb-acento);
  color: #ffffff;
}

/* ---------- modal ---------- */
dialog.modal {
  border: 0;
  padding: 0;
  border-radius: var(--fb-raio-g);
  box-shadow: var(--fb-sombra-g);
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  color: var(--fb-tinta);
}
dialog.modal::backdrop {
  background: rgba(11, 18, 54, 0.45);
}
dialog.modal .modal-corpo {
  overflow-wrap: anywhere;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
dialog.modal .modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--fb-borda);
  background: var(--fb-superficie-2);
}

/* ---------- toast ---------- */
.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  max-width: calc(100vw - 32px);
}
.toast {
  background: var(--fb-tinta);
  color: #fff;
  padding: 13px 18px;
  border-radius: var(--fb-raio);
  box-shadow: var(--fb-sombra-g);
  font-size: 14px;
  animation: fb-entra 0.18s ease-out;
}
.toast.erro {
  background: var(--fb-erro);
}
.toast.ok {
  background: var(--fb-ok);
}
@keyframes fb-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------- vazio, carregando ---------- */
.vazio {
  text-align: center;
  padding: 40px 20px;
  color: var(--fb-tinta-3);
}
.vazio h3 {
  color: var(--fb-tinta);
  margin-bottom: 6px;
}
.carregando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  color: var(--fb-tinta-3);
}
.carregando::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--fb-borda-forte);
  border-top-color: var(--fb-acento);
  animation: fb-gira 0.7s linear infinite;
}
@keyframes fb-gira {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .carregando::before,
  .toast {
    animation: none;
  }
}

/* ---------- linha do tempo ---------- */
.linha-do-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.linha-do-tempo li {
  position: relative;
  padding: 0 0 16px 22px;
  font-size: 14px;
}
.linha-do-tempo li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fb-borda-forte);
}
.linha-do-tempo li::after {
  content: '';
  position: absolute;
  left: 7.5px;
  top: 18px;
  bottom: 0;
  width: 1px;
  background: var(--fb-borda);
}
.linha-do-tempo li:last-child::after {
  display: none;
}
.linha-do-tempo li.destaque::before {
  background: var(--fb-acento);
}
.linha-do-tempo li.interno {
  color: var(--fb-tinta-2);
}
.linha-do-tempo .quando {
  font-size: 12px;
  color: var(--fb-tinta-3);
}

/* ---------- código em destaque (código de postagem) ---------- */
.codigo-destaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px;
  border-radius: var(--fb-raio-g);
  background: var(--fb-acento);
  color: var(--fb-acento-texto);
  text-align: center;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--fb-acento) 28%, transparent);
}
.codigo-destaque .valor {
  font: 600 30px/1.1 var(--fb-fonte);
  font-stretch: 125%;
  letter-spacing: 0.04em;
  word-break: break-all;
}
.codigo-destaque .botao {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--fb-acento-escuro);
  box-shadow: none;
}
/* Foco do botão de dentro do cartão colorido: o anel cai sobre o cartão,
   então vai na cor do texto dele (o azul sumiria). Os próprios cartões
   cobalto e marinho mantêm o anel azul: ele fica do lado de fora, no fundo. */
.codigo-destaque .botao:focus-visible {
  outline-color: var(--fb-acento-texto);
}
/* Rótulo e validade dentro do cartão colorido: na cor do texto dele, não o
   cinza das ajudas. Só textos: o botão "Copiar" também tem a classe "pequeno". */
.codigo-destaque > span.mudo,
.codigo-destaque > span.pequeno {
  color: inherit;
}

/* ---------- miniaturas de foto ---------- */
.miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.miniaturas img,
.miniaturas .miniatura {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--fb-raio-p);
  border: 1px solid var(--fb-borda);
  background: var(--fb-fundo);
}

/* ---------- esqueleto do painel ---------- */
.pn-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 16px;
  padding: 16px;
  min-height: 100vh;
}
.pn-menu {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 16px 16px;
  background: var(--fb-superficie);
  border-radius: 24px;
  overflow-y: auto;
}
.pn-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 18px;
  font-weight: 700;
}
.pn-marca > * {
  min-width: 0;
}
/* "e-Fastback" nunca quebra no hífen; o nome da loja, embaixo, quebra normal. */
.pn-marca .marca-nome {
  white-space: nowrap;
}
.pn-marca .logo-fastback {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: block;
}
.pn-marca .logotipo {
  display: block;
  height: 19px;
  width: auto;
}
.pn-marca .loja-nome {
  overflow-wrap: anywhere;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fb-tinta-3);
}
.pn-grupo {
  margin: 16px 14px 6px;
  font-stretch: 125%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fb-tinta-3);
}
.pn-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  color: var(--fb-tinta);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}
.pn-menu a:hover {
  background: var(--fb-fundo);
  color: var(--fb-tinta);
}
.pn-menu a[aria-current='page'] {
  background: var(--fb-acento);
  color: #ffffff;
  font-weight: 600;
  box-shadow: var(--fb-sombra-acento);
}
.pn-menu .contador {
  margin-left: auto;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fb-acento-suave);
  color: var(--fb-acento-escuro);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.pn-menu a[aria-current='page'] .contador {
  background: #ffffff;
  color: var(--fb-acento-escuro);
}
.pn-rodape-menu {
  margin-top: auto;
  padding: 14px;
  border-radius: 16px;
  background: var(--fb-fundo);
  font-size: 13px;
  color: var(--fb-tinta-3);
}
/* O embrulho de topo + conteúdo é filho do grid: sem min-width 0, uma tabela
   larga alarga a página inteira no celular. */
.pn-layout > div {
  min-width: 0;
}
.pn-principal {
  min-width: 0;
  padding: 16px 16px 60px;
}
.pn-conteudo {
  max-width: var(--fb-largura);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pn-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pn-cabecalho .subtitulo {
  color: var(--fb-tinta-2);
  margin-top: 6px;
}
.pn-topo-movel {
  display: none;
}
.faixa-suporte {
  background: var(--fb-alerta-fundo);
  color: #6a3900;
  text-align: center;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 14px;
  margin-bottom: 12px;
}
@media (max-width: 900px) {
  .pn-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  /* Fechado, o menu sai da tela E do Tab (visibility): senão os links
     invisíveis vêm antes do conteúdo para quem navega pelo teclado. */
  .pn-menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    height: 100vh;
    border-radius: 0 24px 24px 0;
    z-index: 50;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s, visibility 0s 0.2s;
    box-shadow: var(--fb-sombra-g);
  }
  .pn-menu.aberto {
    transform: none;
    visibility: visible;
    transition: transform 0.2s;
  }
  .pn-topo-movel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--fb-superficie);
    border-bottom: 1px solid var(--fb-borda);
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .pn-principal {
    padding: 18px 16px 48px;
  }
}

/* ---------- tela de entrada (painel e admin) ---------- */
.entrar {
  display: flex;
  gap: 16px;
  padding: 16px;
}
.entrar-vitrine {
  flex: 1 1 520px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 48px;
  border-radius: 28px;
  background: var(--fb-acento);
  color: #ffffff;
}
.entrar-vitrine > * {
  position: relative;
}
.entrar-glifo {
  position: absolute !important;
  right: -150px;
  bottom: -170px;
  width: 560px;
  max-width: none;
  opacity: 0.16;
  pointer-events: none;
}
.entrar-vitrine .pn-marca {
  padding: 0;
}
.entrar-chamada {
  max-width: 520px;
  font-stretch: 125%;
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.entrar-vantagens {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  color: #e1e6ff;
}
.entrar-vantagens li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.entrar-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.entrar-rodape {
  font-size: 13px;
  color: #e1e6ff;
}
.entrar-lado {
  flex: 1 1 420px;
  display: grid;
  place-items: center;
  padding: 32px 8px;
}
.entrar-coluna {
  width: 100%;
  max-width: 420px;
  align-items: stretch;
}
.entrar-caixa {
  padding: 36px;
  border-radius: 28px;
  border: 0;
  box-shadow: 0 1px 2px rgba(11, 18, 54, 0.04), 0 24px 60px rgba(46, 68, 242, 0.1);
}
.entrar-marca-movel {
  display: none;
  justify-content: center;
}
@media (max-width: 900px) {
  .entrar {
    flex-direction: column;
  }
  .entrar-vitrine {
    display: none;
  }
  .entrar-marca-movel {
    display: flex;
  }
  .entrar-caixa {
    padding: 26px 22px;
  }
}

/* ---------- indicadores ---------- */
.indicador {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.indicador .valor {
  font-size: 28px;
  font-weight: 600;
  font-stretch: 125%;
  letter-spacing: -0.02em;
}
.indicador .rotulo-indicador {
  font-size: 13px;
  color: var(--fb-tinta-3);
}
a.cartao.indicador:hover {
  border-color: var(--fb-borda-forte);
  box-shadow: var(--fb-sombra);
}
/* Os três números que pedem ação, grandes, no Início. */
.destaques {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 720px) {
  .destaques {
    grid-template-columns: 1fr;
  }
}
.indicador.destaque {
  gap: 10px;
  padding: 22px 24px;
  border-radius: 24px;
}
.indicador.destaque .valor {
  font-size: 52px;
  line-height: 1;
}
/* Número comprido ("R$ 1.782,00") encolhe para caber no cartão. Quem usa
   passa --caracteres (o tamanho do texto); cada letra ocupa ~0,6 em. */
.indicador.destaque.ajustavel {
  container-type: inline-size;
}
.indicador.destaque.ajustavel .valor {
  font-size: min(52px, calc(100cqi / (0.62 * var(--caracteres, 1))));
  white-space: nowrap;
}
.indicador.destaque .topo-destaque {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.indicador.destaque .rotulo-indicador {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--fb-neutra-fundo);
  color: var(--fb-tinta-2);
  font-size: 12px;
  font-weight: 600;
}
.indicador.destaque .seta {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--fb-borda);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--fb-tinta);
}
/* A seta "↗" desenhada em máscara: pega a cor do texto do botão redondo. */
.indicador.destaque .seta::before {
  content: '';
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.indicador.destaque .forte {
  font-size: 16px;
}
.indicador.destaque.cobalto .rotulo-indicador,
.indicador.destaque.marinho .rotulo-indicador {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.indicador.destaque.cobalto .seta {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--fb-acento);
}
.indicador.destaque.marinho .seta {
  background: var(--fb-acento);
  border-color: var(--fb-acento);
  color: #ffffff;
}
.indicador.destaque.cobalto .valor,
.indicador.destaque.marinho .valor {
  color: #ffffff !important;
}
a.cartao.indicador.cobalto:hover {
  border-color: var(--fb-acento);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--fb-acento) 34%, transparent);
}
a.cartao.indicador.marinho:hover {
  border-color: var(--fb-tinta);
  box-shadow: var(--fb-sombra-g);
}

/* ---------- impressão ---------- */
@media print {
  .pn-menu,
  .pn-topo-movel,
  .nao-imprimir,
  .toasts {
    display: none !important;
  }
  .pn-layout {
    display: block;
  }
  body {
    background: #fff;
  }
  .cartao {
    border-color: #ccc;
  }
}

/* Ambiente de demonstração: ninguém confunde com o sistema de verdade. */
.faixa-demonstracao {
  background: var(--fb-tinta);
  color: #ffffff;
  text-align: center;
  font-size: 13px;
  padding: 8px 12px;
}
.pn-layout .faixa-demonstracao {
  border-radius: 14px;
  margin-bottom: 12px;
}
/* No celular o layout não tem margem: a faixa vai de ponta a ponta. */
@media (max-width: 900px) {
  .pn-layout .faixa-demonstracao,
  .pn-layout .faixa-suporte {
    border-radius: 0;
    margin-bottom: 0;
  }
}
/* Chave de API (mostrada uma vez): letra de largura fixa, sem confundir I, l e 1. */
.codigo-destaque .valor.mono {
  font-family: var(--fb-mono);
  font-stretch: 100%;
}