/* ==========================================================================
   Serraf Pós-Venda — Base e componentes da área pública
   Depende de tokens.css (carregar antes)
   Mobile-first · WCAG 2.1 AA · sem dependência externa
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--fonte);
  font-size: var(--texto-base);
  line-height: var(--altura-linha);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  line-height: var(--altura-linha-titulo);
  font-weight: var(--peso-extra);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-lg); }

p { text-wrap: pretty; }

a { color: var(--cor-primaria); text-underline-offset: 3px; }
a:hover { color: var(--cor-primaria-hover); }

/* Foco visível em tudo que é focável — requisito de acessibilidade */
:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* --------------------------------------------------------------------------
   2. UTILITÁRIOS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

/* Visível apenas para leitor de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Pular para o conteúdo (primeiro elemento focável da página) */
.pular-link {
  position: absolute;
  left: var(--esp-4);
  top: -100px;
  z-index: 100;
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-primaria);
  color: var(--cor-texto-invertido);
  border-radius: var(--raio);
  font-weight: var(--peso-forte);
  transition: top var(--transicao);
}
.pular-link:focus { top: var(--esp-4); }

/* --------------------------------------------------------------------------
   3. MARCA
   O texto do logo é reproduzido em CSS — nítido em qualquer tela e 0 KB.
   A imagem do logo fica reservada para o hero da página inicial.
   -------------------------------------------------------------------------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-weight: var(--peso-extra);
  font-size: var(--texto-xl);
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.marca__icone { width: 30px; height: 30px; border-radius: var(--raio-sm); }

/* Sobre fundo claro: o azul do logo (#2CABFC) reprova em contraste,
   então "Pós-Venda" usa a primária escura. */
.marca__empresa { color: var(--mp-marinho-700); }
.marca__produto { color: var(--cor-primaria); }

/* Sobre fundo escuro dá para usar a cor real do logo */
.marca--clara .marca__empresa { color: var(--mp-branco); }
.marca--clara .marca__produto { color: var(--cor-marca-clara); }

/* O logo é um emblema quadrado — limitar pela ALTURA, senão empurra o
   formulário para fora da primeira tela no celular. */
.logo-hero {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 190px;
  margin-inline: auto;
  border-radius: var(--raio-md);
}

/* --------------------------------------------------------------------------
   4. CABEÇALHO E RODAPÉ
   -------------------------------------------------------------------------- */
.cabecalho {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
  padding-block: var(--esp-3);
  position: sticky;
  top: 0;
  z-index: 10;
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
}

.rodape {
  background: var(--cor-superficie-escura);
  color: var(--mp-neutro-300);
  padding-block: var(--esp-8);
  margin-top: var(--esp-16);
  font-size: var(--texto-sm);
}

.rodape a { color: var(--mp-azul-300); }

/* Fita de valores — vem da tagline do logo */
.valores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2) var(--esp-4);
  list-style: none;
  padding: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}
.valores li { display: flex; align-items: center; gap: var(--esp-2); }
.valores li:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: var(--raio-full);
  background: var(--mp-azul-600);
}

/* --------------------------------------------------------------------------
   5. CARTÃO
   -------------------------------------------------------------------------- */
.cartao {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: var(--esp-6);
  box-shadow: var(--sombra);
}

.cartao--destaque {
  border-color: var(--mp-azul-200);
  box-shadow: var(--sombra-md);
}

.cartao__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--cor-borda);
}

/* --------------------------------------------------------------------------
   6. FORMULÁRIO
   -------------------------------------------------------------------------- */
.campo { margin-bottom: var(--esp-5); }

.campo__rotulo {
  display: block;
  margin-bottom: var(--esp-2);
  font-weight: var(--peso-forte);
  font-size: var(--texto-sm);
}

.campo__ajuda {
  display: block;
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.campo__entrada {
  width: 100%;
  min-height: var(--altura-toque);
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--texto-base);   /* 16px evita o zoom automático do iOS */
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 2px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo__entrada::placeholder { color: var(--mp-neutro-400); }

.campo__entrada:hover { border-color: var(--mp-neutro-400); }

.campo__entrada:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: var(--sombra-foco);
}

.campo__entrada--numero {
  font-family: var(--fonte-mono);
  letter-spacing: 0.06em;
}

/* Estado de erro */
.campo--erro .campo__entrada { border-color: var(--mp-erro); }
.campo--erro .campo__entrada:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.3); }

.campo__erro {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--mp-erro);
}

/* Honeypot — invisível para humanos, preenchido por robôs */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* Contador de caracteres */
.contador {
  display: block;
  margin-top: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.contador--limite { color: var(--mp-erro); font-weight: var(--peso-forte); }

/* --------------------------------------------------------------------------
   7. BOTÕES
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--altura-toque);
  padding: var(--esp-3) var(--esp-6);
  font-size: var(--texto-base);
  font-weight: var(--peso-forte);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background-color var(--transicao), border-color var(--transicao),
              transform var(--transicao), box-shadow var(--transicao);
}

.botao:active { transform: translateY(1px); }

.botao:disabled,
.botao[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.botao--primario {
  background: var(--cor-primaria);
  color: var(--cor-texto-invertido);
  box-shadow: var(--sombra-sm);
}
.botao--primario:hover:not(:disabled) {
  background: var(--cor-primaria-hover);
  color: var(--cor-texto-invertido);
  box-shadow: var(--sombra);
}
.botao--primario:active:not(:disabled) { background: var(--cor-primaria-ativa); }

.botao--secundario {
  background: var(--cor-superficie);
  color: var(--cor-primaria);
  border-color: var(--cor-borda-forte);
}
.botao--secundario:hover:not(:disabled) {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
}

.botao--fantasma {
  background: transparent;
  color: var(--cor-texto-suave);
}
.botao--fantasma:hover:not(:disabled) { background: var(--mp-neutro-100); }

.botao--bloco { width: 100%; }

/* Estado de carregamento */
.botao--carregando { pointer-events: none; opacity: 0.75; }
.botao--carregando::before {
  content: "";
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--raio-full);
  animation: girar 700ms linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .botao--carregando::before { animation-duration: 2s; }
}

/* --------------------------------------------------------------------------
   8. ALERTAS
   -------------------------------------------------------------------------- */
.alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--raio);
  border-left: 4px solid;
  font-size: var(--texto-sm);
}

.alerta__titulo { font-weight: var(--peso-forte); margin-bottom: var(--esp-1); }

.alerta--erro    { background: var(--mp-erro-fundo);    border-color: var(--mp-erro);    color: var(--mp-erro); }
.alerta--sucesso { background: var(--mp-sucesso-fundo); border-color: var(--mp-sucesso); color: var(--mp-sucesso); }
.alerta--aviso   { background: var(--mp-aviso-fundo);   border-color: var(--mp-ambar-500); color: var(--mp-aviso); }
.alerta--info    { background: var(--mp-info-fundo);    border-color: var(--mp-info);    color: var(--mp-azul-700); }

/* --------------------------------------------------------------------------
   9. ETIQUETAS DE STATUS
   -------------------------------------------------------------------------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--raio-full);
  white-space: nowrap;
}

.etiqueta--entregue  { background: var(--mp-sucesso-fundo); color: var(--mp-sucesso); }
.etiqueta--transito  { background: var(--mp-info-fundo);    color: var(--mp-azul-700); }
.etiqueta--pendente  { background: var(--mp-aviso-fundo);   color: var(--mp-aviso); }
.etiqueta--cancelado { background: var(--mp-erro-fundo);    color: var(--mp-erro); }

/* Classificação NPS */
.etiqueta--detrator { background: var(--mp-detrator); color: var(--mp-branco); }
.etiqueta--neutro   { background: var(--mp-neutro);   color: var(--mp-marinho-700); }
.etiqueta--promotor { background: var(--mp-promotor); color: var(--mp-branco); }

/* --------------------------------------------------------------------------
   10. RESUMO DO PEDIDO
   -------------------------------------------------------------------------- */
.pedido__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}

.pedido__numero {
  font-family: var(--fonte-mono);
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  letter-spacing: 0.04em;
}

.dados {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: 1fr;
}

.dados__item { min-width: 0; }

.dados__rotulo {
  display: block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  margin-bottom: var(--esp-1);
}

.dados__valor {
  font-weight: var(--peso-medio);
  overflow-wrap: break-word;
}

.dados__valor--mascarado { font-family: var(--fonte-mono); letter-spacing: 0.05em; }

/* Itens do pedido — vira tabela no desktop, cartões no celular */
.itens { list-style: none; padding: 0; display: grid; gap: var(--esp-3); }

.itens__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: var(--esp-3);
  background: var(--mp-neutro-50);
  border-radius: var(--raio);
}

.itens__desc { font-weight: var(--peso-medio); flex: 1 1 60%; min-width: 0; }
.itens__qtd  { font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.itens__valor { font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }

.total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 2px solid var(--cor-borda);
  font-size: var(--texto-lg);
  font-weight: var(--peso-extra);
}
.total__valor { font-variant-numeric: tabular-nums; color: var(--cor-primaria); }

/* --------------------------------------------------------------------------
   11. QUESTIONÁRIO
   -------------------------------------------------------------------------- */
.pergunta {
  padding-block: var(--esp-6);
  border-bottom: 1px solid var(--cor-borda);
}
.pergunta:last-of-type { border-bottom: 0; }

.pergunta__enunciado {
  display: block;
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  margin-bottom: var(--esp-2);
}

.pergunta__obrigatoria { color: var(--mp-erro); margin-left: var(--esp-1); }

.pergunta__ajuda {
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  margin-bottom: var(--esp-4);
}

/* --- NPS 0 a 10 --- */
.nps { display: grid; gap: var(--esp-3); }

.nps__escala {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--esp-2);
}

.nps__opcao { position: relative; }

.nps__opcao input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}

.nps__opcao span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-toque);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  background: var(--cor-superficie);
  border: 2px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  transition: all var(--transicao);
}

.nps__opcao input:hover + span { border-color: var(--mp-azul-400); }

.nps__opcao input:focus-visible + span {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.nps__opcao input:checked + span {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-texto-invertido);
  transform: scale(1.06);
}

/* Cor por faixa quando marcado */
.nps__opcao--detrator input:checked + span { background: var(--mp-detrator); border-color: var(--mp-detrator); }
.nps__opcao--neutro   input:checked + span { background: var(--mp-neutro);   border-color: var(--mp-neutro); color: var(--mp-marinho-700); }
.nps__opcao--promotor input:checked + span { background: var(--mp-promotor); border-color: var(--mp-promotor); }

.nps__legenda {
  display: flex;
  justify-content: space-between;
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}

/* --- Nota por estrelas (usa o âmbar da caixa do logo) --- */
.estrelas {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: var(--esp-1);
}

.estrelas input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.estrelas label {
  font-size: 2rem;
  line-height: 1;
  color: var(--mp-neutro-300);
  cursor: pointer;
  padding: var(--esp-1);
  transition: color var(--transicao), transform var(--transicao);
}

.estrelas label:hover,
.estrelas label:hover ~ label,
.estrelas input:checked ~ label { color: var(--mp-ambar-400); }

.estrelas label:hover { transform: scale(1.15); }

.estrelas input:focus-visible + label {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* --- Escolha e sim/não --- */
.opcoes { display: grid; gap: var(--esp-2); }

.opcao {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  min-height: var(--altura-toque);
  background: var(--cor-superficie);
  border: 2px solid var(--cor-borda-forte);
  border-radius: var(--raio);
  cursor: pointer;
  transition: all var(--transicao);
}

.opcao:hover { border-color: var(--mp-azul-400); background: var(--cor-primaria-suave); }

.opcao input { width: 20px; height: 20px; accent-color: var(--cor-primaria); cursor: pointer; flex-shrink: 0; }

.opcao:has(input:checked) {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  font-weight: var(--peso-medio);
}

.opcao:has(input:focus-visible) { outline: 3px solid var(--cor-foco); outline-offset: 2px; }

.opcoes--lado-a-lado { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------------------------
   12. TELA DE SUCESSO
   -------------------------------------------------------------------------- */
.sucesso { text-align: center; padding-block: var(--esp-8); }

.sucesso__icone {
  width: 72px; height: 72px;
  margin: 0 auto var(--esp-5);
  display: grid;
  place-items: center;
  font-size: 2.25rem;
  color: var(--mp-branco);
  background: var(--mp-sucesso);
  border-radius: var(--raio-full);
}

.protocolo {
  display: inline-block;
  margin-top: var(--esp-5);
  padding: var(--esp-3) var(--esp-6);
  font-family: var(--fonte-mono);
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  letter-spacing: 0.12em;
  background: var(--mp-neutro-100);
  border: 2px dashed var(--cor-borda-forte);
  border-radius: var(--raio);
}

/* Respostas já enviadas (tela do protocolo).

   NÃO usar `.dados` aqui: aquela grade vira 2 colunas em 768px e 4 em 1024px,
   o que serve para pares curtos ("Cliente", "Documento") e atropela uma frase
   inteira de pergunta. Esta lista é sempre de uma coluna. */
.respostas {
  display: grid;
  gap: 0;
  margin-top: var(--esp-4);
}

.resposta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
  padding-block: var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
}

.resposta:last-child { border-bottom: 0; }

/* Pergunta em caixa normal: sentença inteira em maiúsculas com espaçamento
   entre letras fica ilegível. */
.resposta__pergunta {
  flex: 1 1 60%;
  min-width: 0;
  color: var(--cor-texto-suave);
  overflow-wrap: break-word;
}

.resposta__valor {
  flex: 0 1 auto;
  max-width: 100%;
  font-weight: var(--peso-forte);
  color: var(--cor-texto);
  text-align: right;
  overflow-wrap: break-word;
}

/* Texto longo não cabe na mesma linha da pergunta: passa a ocupar a linha
   inteira, alinhado à esquerda, como um parágrafo. */
.resposta--longa { display: block; }

.resposta--longa .resposta__valor {
  display: block;
  margin-top: var(--esp-2);
  text-align: left;
  font-weight: var(--peso-medio);
  white-space: pre-line;
}

/* --------------------------------------------------------------------------
   13. PASSOS DO FLUXO
   -------------------------------------------------------------------------- */
.passos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  list-style: none;
  padding: 0;
  margin-bottom: var(--esp-6);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
}

.passos__item { display: flex; align-items: center; gap: var(--esp-2); color: var(--cor-texto-fraco); }

.passos__item::before {
  content: attr(data-passo);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--raio-full);
  background: var(--mp-neutro-200);
  color: var(--cor-texto-suave);
}

.passos__item--ativo { color: var(--cor-primaria); }
.passos__item--ativo::before { background: var(--cor-primaria); color: var(--cor-texto-invertido); }

.passos__item--feito::before {
  content: "\2713";
  background: var(--mp-sucesso);
  color: var(--cor-texto-invertido);
}

.passos__item:not(:last-child)::after {
  content: "";
  width: 20px; height: 2px;
  background: var(--cor-borda);
}

/* --------------------------------------------------------------------------
   14. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .nps__escala { grid-template-columns: repeat(11, 1fr); }
  .nps__escala .nps__opcao span { font-size: var(--texto-sm); }
}

@media (min-width: 768px) {
  h1 { font-size: var(--texto-3xl); }
  h2 { font-size: var(--texto-2xl); }

  .container { padding-inline: var(--esp-6); }
  .cartao { padding: var(--esp-8); }
  .dados { grid-template-columns: repeat(2, 1fr); }
  .logo-hero { max-height: 240px; }
  .marca { font-size: var(--texto-2xl); }
  .marca__icone { width: 36px; height: 36px; }
}

@media (min-width: 1024px) {
  .dados { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   15. IMPRESSÃO
   -------------------------------------------------------------------------- */
@media print {
  .cabecalho, .rodape, .botao, .passos { display: none !important; }
  body { background: #fff; }
  .cartao { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
}