/*
  Logaroo Pay — folha de estilo compartilhada das telas do piloto (Fase A).
  Fonte da verdade: protótipo clicável aprovado em 17/09/2026 (sete artboards,
  cinco de desktop + duas de celular) — traduzido aqui em classes reutilizáveis
  em vez de estilo inline repetido. Cores, tipografia e regras gerais também em
  `ferramenta/web/DESIGN.md`.

  Sem @import, sem url() externa: fontes do próprio protótipo, servidas daqui
  (ver bloco @font-face), com a pilha do sistema como alternativa.
*/

/* =====================================================================
   Fontes — arquivos do protótipo, caminho relativo, sem rede
   ===================================================================== */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fontes/SchibstedGrotesk-variavel.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fontes/IBMPlexMono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fontes/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cores — DESIGN.md §2 + tons adicionais medidos no protótipo aprovado */
  --cor-destaque: #FF6602;
  --cor-destaque-texto: #8A3600;
  --cor-destaque-fundo: #FFF3EA;
  --cor-destaque-borda: #F0C49C;

  --cor-fundo: #F7F5F2;
  --cor-superficie: #FFFFFF;
  --cor-superficie-alt: #FCFAF7;

  --cor-tinta: #171310;
  --cor-tinta-secundaria: #45403A;
  --cor-tinta-fraca: #6F675E;

  --cor-linha: #E6E0D8;
  --cor-linha-fraca: #F0EBE4;

  --cor-barra-superior: #16120E;
  --cor-barra-divisor: #37302A;
  --cor-barra-texto-fraco: #9C948A;
  --cor-barra-texto-medio: #C9C2B8;
  --cor-barra-texto-forte: #E4DED5;

  --cor-sucesso: #0E6F45;
  --cor-sucesso-fundo: #F1F8F3;
  --cor-sucesso-borda: #BFE0CA;
  --cor-sucesso-texto-forte: #0B5A38;

  --cor-atencao: #9A5B00;
  --cor-atencao-texto: #7A4900;
  --cor-atencao-fundo: #FFFBF2;
  --cor-atencao-borda: #EBD9A8;
  --cor-atencao-pilula-fundo: #FBF1DC;

  --cor-erro: #A3231B;
  --cor-erro-texto: #8E1F18;
  --cor-erro-texto-corpo: #6E2A24;
  --cor-erro-fundo: #FDF2F0;
  --cor-erro-borda: #F0C0B9;
  --cor-erro-linha-fundo: #FDF6F5;

  --cor-neutro-pilula-fundo: #F0EBE4;
  --cor-neutro-pilula-texto: #45403A;

  --cor-ponto-vivo: #37C46A;
  --cor-ponto-aviso: #D6A016;

  --cor-input-borda: #D6CEC3;
  --cor-codigo-fundo: #F2EEE8;
  --cor-codigo-borda: #E0D9CF;

  /* Tipografia */
  --fonte-interface: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fonte-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* =====================================================================
   Base
   ===================================================================== */

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

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

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-tinta);
  font-family: var(--fonte-interface);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }

a { color: var(--cor-destaque-texto); }
a:hover { color: var(--cor-destaque); }
/* Botões principais são <a> com fundo laranja: sem esta regra, o `a:hover` acima (mais específico
   que `.botao-principal`) pintava o texto da mesma cor do fundo e o rótulo sumia no hover. */
.botao-principal:hover, .botao-principal:visited, .botao-principal:focus,
.botao-principal--bloco:hover, .botao-principal--bloco:visited, .botao-principal--bloco:focus { color: #FFFFFF; }
.botao-principal:hover, .botao-principal--bloco:hover { background: #E05A00; }

.mono {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mostra/esconde LINHA conforme a largura — usado na tela 2 (linha de tabela
   em grade vs. cartão). Cada elemento já tem sua própria classe de
   componente definindo o `display` "aceso" (`.tg-linha{display:grid}` no
   desktop, `.cartao-linha{display:flex}` no celular) — por isso as regras
   abaixo só cuidam de ESCONDER no breakpoint errado (`display:none`), nunca
   de forçar um valor "aceso" genérico, que brigaria com esse componente. */
@media (max-width: 700px) {
  .somente-desktop { display: none !important; }
}

.somente-mobile { display: none !important; }

@media (max-width: 700px) {
  .somente-mobile { display: flex !important; }
}

/* Variante para blocos de página inteiros que precisam ser `flex` (telas 3 e
   5): cada um tem uma composição de celular própria, não um reflow da
   desktop, então as duas versões completas ficam no HTML e só uma aparece. */
.bloco-desktop { display: flex !important; flex-direction: column; flex-grow: 1; }
.bloco-mobile { display: none !important; }

@media (max-width: 700px) {
  .bloco-desktop { display: none !important; }
  .bloco-mobile { display: flex !important; flex-direction: column; flex-grow: 1; min-height: 100vh; }
}

/* =====================================================================
   Layout de página — largura máxima 1280px (o artboard), fluido, centralizado
   ===================================================================== */

.pagina {
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--cor-fundo);
  display: flex;
  flex-direction: column;
}

/* =====================================================================
   Cabeçalho escuro
   ===================================================================== */

.cabecalho {
  flex-shrink: 0;
  background: var(--cor-barra-superior);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 16px;
  height: 64px;
  flex-wrap: wrap;
  row-gap: 4px;
}

.cabecalho__marca {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cabecalho__logo {
  height: 21px;
  width: auto;
  display: block;
}

.cabecalho__pay {
  font-size: 19px;
  font-weight: 400;
  color: var(--cor-barra-texto-medio);
  letter-spacing: -0.2px;
}

.cabecalho__divisor {
  width: 1px;
  height: 24px;
  background: var(--cor-barra-divisor);
  flex-shrink: 0;
}

.cabecalho__contexto {
  font-size: 13px;
  color: var(--cor-barra-texto-fraco);
}

.cabecalho__contexto .mono {
  color: var(--cor-barra-texto-forte);
}

.cabecalho__espaco { flex-grow: 1; }

.cabecalho__direita {
  font-size: 12px;
  font-family: var(--fonte-mono);
  color: var(--cor-barra-texto-fraco);
}

.cabecalho__ao-vivo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ponto-vivo {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--cor-ponto-vivo);
  display: block;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .cabecalho {
    height: auto;
    min-height: 60px;
    padding: 10px 16px;
    gap: 10px;
  }
  .cabecalho__logo { height: 18px; }
  .cabecalho__pay { font-size: 16px; }
}

/* =====================================================================
   Trilha de passos (telas 1 e 2) — barra branca, círculos numerados
   ===================================================================== */

.trilha {
  flex-shrink: 0;
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-linha);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 28px;
  height: 56px;
  list-style: none;
  margin: 0;
  overflow-x: auto;
}

.trilha__item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.trilha__circulo {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--cor-neutro-pilula-fundo);
  color: var(--cor-tinta-fraca);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trilha__rotulo {
  font-size: 14px;
  color: var(--cor-tinta-fraca);
}

.trilha__item--atual .trilha__circulo {
  background: var(--cor-destaque);
  color: #FFFFFF;
}

.trilha__item--atual .trilha__rotulo {
  color: var(--cor-tinta);
  font-weight: 600;
}

.trilha__item--feito .trilha__circulo {
  background: var(--cor-sucesso);
  color: #FFFFFF;
}

@media (max-width: 700px) {
  .trilha { padding: 0 16px; gap: 18px; }
}

/* =====================================================================
   Cartão
   ===================================================================== */

.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: 16px;
}

.cartao--preenchimento-grande { padding: 24px; }
.cartao--preenchimento-media { padding: 24px 28px; }

/* Cartão-estatística pequeno (grades de 4/5 colunas nas telas 2, 3 e 5) */

.celula-stat {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: 14px;
  padding: 16px 18px;
}

.celula-stat__rotulo {
  font-size: 12px;
  color: var(--cor-tinta-fraca);
  margin-bottom: 8px;
}

.celula-stat__rotulo--maiusculo {
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.celula-stat__valor {
  font-family: var(--fonte-mono);
  font-size: 24px;
  font-weight: 500;
}

.celula-stat__sub {
  font-family: var(--fonte-mono);
  font-size: 12px;
  color: var(--cor-tinta-fraca);
  margin-top: 4px;
}

.celula-stat--sucesso {
  background: var(--cor-sucesso-fundo);
  border-color: var(--cor-sucesso-borda);
}
.celula-stat--sucesso .celula-stat__rotulo { color: var(--cor-sucesso); }
.celula-stat--sucesso .celula-stat__valor { color: var(--cor-sucesso-texto-forte); }
.celula-stat--sucesso .celula-stat__sub { color: var(--cor-sucesso); }

.celula-stat--atencao {
  background: var(--cor-atencao-fundo);
  border-color: var(--cor-atencao-borda);
}
.celula-stat--atencao .celula-stat__rotulo { color: var(--cor-atencao-texto); }
.celula-stat--atencao .celula-stat__valor { color: var(--cor-atencao-texto); }
.celula-stat--atencao .celula-stat__sub { color: var(--cor-atencao); }

.grade-stats {
  display: grid;
  gap: 14px;
}

.grade-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 700px) {
  .grade-stats--4,
  .grade-stats--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* =====================================================================
   Botões
   ===================================================================== */

.botao-principal,
.botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  height: 48px;
  padding: 0 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
}

.botao-principal {
  background: var(--cor-destaque);
  color: #FFFFFF;
}

.botao-secundario {
  background: #FFFFFF;
  color: var(--cor-tinta-secundaria);
  border-color: var(--cor-input-borda);
  padding: 0 22px;
}

.acoes-rodape {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.acoes-rodape__nota {
  font-size: 13px;
  color: var(--cor-tinta-fraca);
}

@media (max-width: 700px) {
  .botao-principal,
  .botao-secundario {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }
}

/* Botões de largura total no rodapé fixo da tela 3 no celular */
.botao-principal--bloco,
.botao-secundario--bloco {
  width: 100%;
  height: 54px;
  border-radius: 12px;
  font-size: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.botao-secundario--bloco {
  background: transparent;
  border: none;
  color: var(--cor-tinta-secundaria);
  font-size: 15px;
  height: 48px;
}
.botao-principal--bloco {
  background: var(--cor-destaque);
  color: #FFFFFF;
}

/* =====================================================================
   Campos de formulário
   ===================================================================== */

.campo__rotulo {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.campo__ajuda {
  font-size: 13px;
  color: var(--cor-tinta-fraca);
  line-height: 1.5;
  margin-top: 10px;
}

.campo__entrada {
  height: 46px;
  box-sizing: border-box;
  padding: 0 14px;
  font-family: var(--fonte-mono);
  font-size: 15px;
  color: var(--cor-tinta);
  background: #FFFFFF;
  border: 1px solid var(--cor-input-borda);
  border-radius: 10px;
}

/* Área de soltar/escolher arquivo (tela 1) */

.campo-arquivo {
  background: #FFFFFF;
  border: 1px dashed var(--cor-input-borda);
  border-radius: 16px;
  padding: 44px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.campo-arquivo__titulo { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.campo-arquivo__legenda { font-size: 13px; color: var(--cor-tinta-fraca); }

.botao-arquivo {
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-destaque-texto);
  border: 1px solid var(--cor-destaque-borda);
  background: var(--cor-destaque-fundo);
  border-radius: 10px;
  padding: 12px 18px;
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Campo do código do lote — o gate (tela 3) */

.campo-codigo {
  width: 220px;
  height: 52px;
  box-sizing: border-box;
  padding: 0 16px;
  font-family: var(--fonte-mono);
  font-size: 22px;
  letter-spacing: 6px;
  color: var(--cor-tinta);
  background: #FFFFFF;
  border: 2px solid var(--cor-input-borda);
  border-radius: 10px;
}

.campo-codigo:focus {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 2px;
  border-color: var(--cor-destaque);
}

.campo-codigo::placeholder {
  color: #B7AEA1;
}

.campo-codigo--bloco {
  width: 100%;
  height: 54px;
  font-size: 22px;
  letter-spacing: 5px;
  text-align: center;
}

/* Exibição do código real — nunca dentro do campo */

.exibicao-codigo {
  font-family: var(--fonte-mono);
  font-weight: 500;
  letter-spacing: 6px;
  background: var(--cor-codigo-fundo);
  border: 1px solid var(--cor-codigo-borda);
  border-radius: 10px;
  color: var(--cor-tinta);
  display: inline-block;
}

.exibicao-codigo--grande { font-size: 30px; padding: 12px 20px; }
.exibicao-codigo--bloco {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 24px;
  letter-spacing: 5px;
  padding: 12px 16px;
}

/* =====================================================================
   Pílula de estado — a cor nunca é a única pista; o texto sempre acompanha
   ===================================================================== */

.pilula-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.pilula-estado--sucesso {
  background: var(--cor-neutro-pilula-fundo, #E6F3EB);
  background: #E6F3EB;
  color: var(--cor-sucesso-texto-forte);
}

.pilula-estado--atencao {
  background: var(--cor-atencao-pilula-fundo);
  color: var(--cor-atencao-texto);
}

.pilula-estado--neutro {
  background: var(--cor-neutro-pilula-fundo);
  color: var(--cor-neutro-pilula-texto);
}

/* =====================================================================
   Alertas / avisos
   ===================================================================== */

.alerta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 14px;
  padding: 16px 20px;
  border: 1px solid transparent;
}

.alerta__icone { flex-shrink: 0; margin-top: 1px; }
.alerta__titulo { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.alerta__corpo { font-size: 13px; line-height: 1.45; }

.alerta--erro {
  background: var(--cor-erro-fundo);
  border-color: var(--cor-erro-borda);
}
.alerta--erro .alerta__titulo { color: var(--cor-erro-texto); }
.alerta--erro .alerta__corpo { color: var(--cor-erro-texto-corpo); }

.alerta--atencao {
  background: var(--cor-atencao-fundo);
  border-color: var(--cor-atencao-borda);
}
.alerta--atencao .alerta__titulo { color: var(--cor-atencao-texto); }
.alerta--atencao .alerta__corpo { color: #6B5326; }

.alerta--marca {
  background: var(--cor-destaque-fundo);
  border-color: var(--cor-destaque-borda);
}
.alerta--marca .alerta__titulo { color: var(--cor-destaque-texto); }
.alerta--marca .alerta__corpo { color: #6B4023; }

@media (max-width: 700px) {
  .alerta { padding: 14px; border-radius: 14px; }
}

/* Lista de conferência (checklist) — sidebar da tela 1 e bloco da tela 3 */

.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checklist--compacta { gap: 10px; }

.checklist__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.checklist--compacta .checklist__item { align-items: center; }

.checklist__texto {
  font-size: 13px;
  color: var(--cor-tinta-secundaria);
  line-height: 1.45;
}

/* =====================================================================
   "Tabela" em grade (Validação e Acompanhamento) — divs com papel de
   tabela (role="table"/"row"/"cell") para leitor de tela, estilizadas com
   CSS Grid para reproduzir exatamente as proporções de coluna do protótipo.
   ===================================================================== */

.tabela-grade {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tg-linha {
  display: grid;
  gap: 12px;
  align-items: center;
}

.tg-celula {
  /* Sem isto, um valor comprido sem espaço (documento, e-mail) vaza da célula
     em vez de quebrar quando a página encolhe abaixo de 1280px — a coluna da
     grade permite encolher (`minmax(0, ...)`), mas o texto por padrão não. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.tg-cabecalho {
  padding: 14px 20px;
  border-bottom: 1px solid var(--cor-linha);
  background: var(--cor-superficie-alt);
}

.tg-cabecalho .tg-celula {
  font-size: 12px;
  font-weight: 600;
  color: var(--cor-tinta-fraca);
}

.tg-corpo .tg-linha {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cor-linha-fraca);
}

.tg-corpo .tg-linha:last-child { border-bottom: none; }

.tg-linha--atencao { background: var(--cor-atencao-fundo); }
.tg-linha--erro { background: var(--cor-erro-linha-fundo); }

.tg-celula--numero { text-align: right; }
.tg-celula__legenda {
  font-size: 12px;
  margin-top: 3px;
}

/* Colunas — Validação: # / NOME / DOCUMENTO / CHAVE PIX / VALOR */
.tg-validacao { grid-template-columns: 52px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.6fr) 120px; }

/* Colunas — Acompanhamento: # / NOME / DOCUMENTO / SITUAÇÃO / CONFERIDO / VALOR */
.tg-acompanhamento { grid-template-columns: 44px minmax(0, 1.8fr) minmax(0, 1.3fr) minmax(0, 1.7fr) 110px 120px; }

.ponto-linha {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  display: block;
  flex-shrink: 0;
}
.ponto-linha--ok { background: var(--cor-sucesso); }
.ponto-linha--aviso { background: var(--cor-ponto-aviso); }

.tg-num-com-ponto {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tg-divergente {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cor-erro-texto);
}

.tg-sem-conferencia {
  font-size: 13px;
  color: #9A948C;
}

@media (max-width: 700px) {
  .tabela-grade--vira-cartao .tg-cabecalho { display: none; }
  .tabela-grade--vira-cartao .tg-corpo .tg-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
  }
}

/* Cartão de pagamento no celular (telas 2 e 5 abaixo de 700px) — mesmo
   visual do artboard "Celular · acompanhamento": nome + uma linha de estado
   (sempre em palavras) + valor. Os campos técnicos (# da planilha, documento
   completo/mascarado, chave Pix) ficam num <details> nativo, sem JavaScript,
   para o cartão fechado caber numa varredura rápida de sábado. */

.cartao-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
}
.cartao-linha__corpo { flex-grow: 1; min-width: 0; }
.cartao-linha__titulo { font-size: 14px; font-weight: 500; }
.cartao-linha__subtitulo { font-size: 12px; color: var(--cor-tinta-fraca); margin-top: 2px; }
.cartao-linha__valor {
  font-family: var(--fonte-mono);
  font-size: 14px;
  flex-shrink: 0;
  overflow-wrap: anywhere;
  text-align: right;
  max-width: 40%;
}

.tg-linha--divergente .cartao-linha__subtitulo {
  color: var(--cor-erro-texto);
  font-weight: 600;
}

.detalhes-tecnicos {
  border-top: 1px solid var(--cor-linha-fraca);
  margin-top: 6px;
}

.detalhes-tecnicos summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--cor-destaque-texto);
}

.detalhes-tecnicos summary::-webkit-details-marker { display: none; }

.detalhes-tecnicos summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.detalhes-tecnicos[open] summary::before { transform: rotate(45deg); }

.detalhes-tecnicos__conteudo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 12px;
}

.detalhes-tecnicos__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cor-linha-fraca);
  min-width: 0;
}
.detalhes-tecnicos__item:last-child { border-bottom: none; }

.detalhes-tecnicos__rotulo {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cor-tinta-fraca);
  flex-shrink: 0;
}

.detalhes-tecnicos__valor {
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* =====================================================================
   Bloco escuro de conferência (tela 4 — os dois números do gate)
   ===================================================================== */

.bloco-conferencia {
  background: var(--cor-barra-superior);
  border-radius: 16px;
  padding: 28px;
}

.bloco-conferencia__titulo {
  font-size: 13px;
  color: var(--cor-barra-texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
}

.bloco-conferencia__numeros {
  display: flex;
  gap: 48px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.bloco-conferencia__item .rotulo {
  font-size: 12px;
  color: var(--cor-barra-texto-fraco);
  margin-bottom: 6px;
}

.bloco-conferencia__item .valor {
  font-family: var(--fonte-mono);
  font-size: 32px;
  font-weight: 500;
  color: #FFFFFF;
}

.bloco-conferencia__nota {
  font-size: 14px;
  color: var(--cor-barra-texto-medio);
  line-height: 1.5;
  max-width: 620px;
}

.bloco-conferencia__nota strong { color: #FFFFFF; font-weight: 600; }

@media (max-width: 700px) {
  .bloco-conferencia { padding: 20px; }
  .bloco-conferencia__numeros { gap: 28px; }
  .bloco-conferencia__item .valor { font-size: 26px; }
}

/* =====================================================================
   Barra de progresso (tela 4)
   ===================================================================== */

.progresso__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.progresso__titulo { font-size: 15px; font-weight: 600; }
.progresso__fracao { font-family: var(--fonte-mono); font-size: 13px; color: var(--cor-tinta-fraca); }

.progresso__trilho {
  height: 10px;
  border-radius: 5px;
  background: var(--cor-linha-fraca);
  overflow: hidden;
}

.progresso__preenchido {
  height: 10px;
  background: var(--cor-destaque);
}

.lista-envio {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.linha-envio {
  display: flex;
  align-items: center;
  gap: 12px;
}

.linha-envio--fila { opacity: 0.55; }

.linha-envio__nome { font-size: 14px; flex-grow: 1; }

.linha-envio__status {
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--cor-tinta-fraca);
}

.linha-envio__status--enviando { color: var(--cor-destaque-texto); }

.marcador-anel {
  width: 17px;
  height: 17px;
  border-radius: 9px;
  display: block;
  box-sizing: border-box;
  flex-shrink: 0;
}
.marcador-anel--enviando { border: 2px solid var(--cor-destaque); }
.marcador-anel--fila { border: 2px solid var(--cor-input-borda); }

/* =====================================================================
   Índice do protótipo
   ===================================================================== */

.lista-indice {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.lista-indice__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--cor-linha);
  background: var(--cor-superficie);
  text-decoration: none;
  color: var(--cor-tinta);
}

.lista-indice__link:hover { border-color: var(--cor-destaque); }

.lista-indice__numero {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cor-destaque-fundo);
  color: var(--cor-destaque-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

.lista-indice__texto strong { display: block; font-size: 15px; }
.lista-indice__texto span { font-size: 13px; color: var(--cor-tinta-fraca); }

/* =====================================================================
   Utilidades de layout
   ===================================================================== */

.icone { width: 18px; height: 18px; flex-shrink: 0; }

.coluna-central {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  padding: 40px 32px;
  box-sizing: border-box;
}

.coluna-central__miolo {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 700px) {
  .coluna-central { padding: 20px 16px; }
}

/* =====================================================================
   Barra superior e trilha de passos de ponta a ponta
   ---------------------------------------------------------------------
   `.pagina` limita tudo a 1280px, inclusive o cabeçalho: em telas mais
   largas a barra escura terminava junto com o conteúdo. Acima de 1280px,
   o FUNDO da barra e da trilha vai até as bordas da janela, e o CONTEÚDO
   delas continua alinhado à grade do contêiner (o recuo compensa a
   margem negativa). Abaixo de 1280px nada muda.
   ===================================================================== */
@media (min-width: 1281px) {
  .cabecalho,
  .trilha {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50% + 32px);
    padding-right: calc(50vw - 50% + 32px);
  }
}