/* ==========================================================================
   Documento Online (documento-online.php)

   Página sem nó no Figma — é a portada do site em WordPress. Por isso nada aqui
   inventa cor, medida ou sombra: tudo sai dos tokens e dos componentes que as
   outras páginas já usam (.input, .btn, .form-error, .lista-chevron).
   ========================================================================== */

.doc-consulta__inner {
  display: grid;
  gap: var(--sp-10);
}

/* Duas colunas só quando há largura para o formulário não ficar apertado; o
   `1fr` do lado do texto de apoio impede que ele roube espaço dos campos. */
@media (min-width: 64rem) {
  .doc-consulta__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--sp-16);
    align-items: start;
  }
}

/* ---------- Formulário ---------- */

.doc-consulta__form {
  padding: var(--sp-8);
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
}

.doc-consulta__titulo {
  margin-bottom: var(--sp-3);
}

.doc-consulta__instrucao {
  margin-bottom: var(--sp-6);
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}

/**
 * Os três blocos numa linha, com o hífen entre eles.
 *
 * `flex-wrap` e `min-width: 0` nos campos: em 320px de tela três campos lado a
 * lado não caberiam, e sem o wrap o hífen empurraria o terceiro para fora do
 * cartão. Quebrando, cada bloco continua legível.
 */
.doc-consulta__blocos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.doc-consulta__bloco {
  flex: 1 1 5rem;
  min-width: 0;
  /* Token é código, não texto corrido: centralizado e com espaçamento entre
     letras, o que ajuda a conferir caractere por caractere contra o papel.
     SEM `text-transform: uppercase` de propósito — ele mudaria só o que se vê,
     não o que é enviado, e a pessoa compararia com o papel um token que na
     verdade seguiu em minúsculas para uma API que talvez diferencie. */
  text-align: center;
  letter-spacing: 0.08em;
}

.doc-consulta__hifen {
  color: var(--color-text-subtle);
  font-size: var(--fs-h4);
  line-height: 1;
}

.doc-consulta__erro {
  margin-top: var(--sp-3);
}

.doc-consulta__cta {
  margin-top: var(--sp-6);
  width: 100%;
}

@media (min-width: 48rem) {
  .doc-consulta__cta {
    width: auto;
  }
}

/* A tela de "carregando" é `.carregando`, em components.css: /diploma-online usa
   o mesmo bloco, e cada página carrega um $page_css diferente. */

/* ---------- Apoio ---------- */

.doc-consulta__ajuda-titulo {
  margin-bottom: var(--sp-4);
  color: var(--color-heading);
  font-size: var(--fs-h3);
}

.doc-consulta__ajuda-texto {
  margin-bottom: var(--sp-5);
  color: var(--color-text-muted);
}

/**
 * A lista é `.lista-chevron` (components.css). O que muda aqui é só a cor do
 * marcador: nas páginas de forma ele veste o tema da forma (`--forma-cor`), e
 * esta página não tem tema — sem o `--chevron-color` o chevron sairia da cor do
 * texto e a lista pareceria um parágrafo picado.
 */
.doc-consulta__lista {
  --chevron-color: var(--us-orange);

  margin-bottom: var(--sp-6);
  line-height: var(--lh-md);
}