/* ==========================================================================
   Diploma Online (diploma-online.php)

   Página sem nó no Figma — é a portada do site em WordPress, irmã de
   /documento-online. 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, .badge, .lista-chevron). A tela de "carregando" é `.carregando`,
   em components.css, compartilhada com /documento-online.
   ========================================================================== */

/* ==========================================================================
   Consulta — o formulário e o texto de apoio
   ========================================================================== */

.dip-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) {
  .dip-consulta__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--sp-16);
    align-items: start;
  }
}

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

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

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

/* Os dois campos lado a lado onde couber. `24ch` é a largura em que "Data de
   nascimento" ainda cabe no rótulo sem quebrar em três linhas. */
.dip-consulta__campos {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 30rem) {
  .dip-consulta__campos {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }
}

.dip-consulta__rotulo {
  color: var(--color-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

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

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

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

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

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

.dip-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: sem `--chevron-color` o chevron sairia da cor do texto e a lista
 * pareceria um parágrafo picado. Mesmo ajuste de /documento-online.
 */
.dip-consulta__lista {
  --chevron-color: var(--us-orange);

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

/* ==========================================================================
   Resultado — os dados do diploma
   ========================================================================== */

.dip-resultado__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  margin-bottom: var(--sp-8);
}

/* O status ("Publicado") é `.badge`, que é um <p> aqui — a margem padrão de
   parágrafo desalinharia o selo do título. */
.dip-resultado__status {
  margin: 0;
}

.dip-bloco {
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
}

@media (min-width: 48rem) {
  .dip-bloco {
    padding: var(--sp-8);
  }
}

.dip-bloco__titulo {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-6);
  color: var(--color-heading);
  font-size: var(--fs-h4);
}

.dip-bloco__icone {
  flex: none;
  color: var(--us-orange);
}

/**
 * Os pares rótulo/valor em colunas que se acomodam à largura.
 *
 * `auto-fit` com mínimo em `18rem` e não duas colunas fixas: o site antigo usa
 * `width: 48%` em dois blocos flutuantes, o que deixa "Sociedade Unificada de
 * Ensino Superior Augusto Motta - 34008227000103" espremido em meia tela no
 * desktop e amontoado no celular. Assim as colunas somem uma a uma conforme a
 * tela encolhe, sem media query por faixa.
 */
.dip-bloco__dados {
  display: grid;
  gap: var(--sp-5) var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: 0;
}

/* Observação é texto de parágrafo, não dado curto: uma coluna só, sempre. */
.dip-bloco__dados--largo {
  grid-template-columns: 1fr;
}

.dip-dado {
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
}

.dip-dado__rotulo {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dip-dado__valor {
  margin: 0;
  color: var(--color-text);
  line-height: var(--lh-md);
  /* Endereço e mantenedora são frases longas sem espaço em pontos úteis; sem
     isso elas empurram a coluna e a grade inteira sai do lugar. */
  overflow-wrap: anywhere;
}

/**
 * O "não consta" do site antigo, que lá era vermelho e em negrito.
 *
 * Aqui ele é discreto de propósito: campo vazio no registro é informação, não
 * erro da consulta, e num diploma com cinco buracos a tela ficaria pontilhada de
 * alarme vermelho sem que nada estivesse errado. Continua distinguível do dado
 * de verdade — é a única coisa em itálico na página.
 */
.dip-dado__valor--vazio {
  color: var(--color-text-subtle);
  font-style: italic;
}

/* ---------- Arquivos ---------- */

.dip-arquivos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.dip-arquivos__link {
  gap: var(--sp-2);
}

/* O tipo do arquivo (PDF, XML) dentro do próprio botão: quem escolhe entre
   quatro downloads precisa dele antes do clique, não depois. */
.dip-arquivos__tipo {
  padding: 0 var(--sp-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ---------- Histórico ---------- */

/**
 * A rolagem é da tabela, nunca da página.
 *
 * `tabindex="0"` no contêiner (posto no PHP) é o que deixa a tabela larga ser
 * rolada pelo teclado — sem ele, quem não usa mouse não alcança as últimas
 * colunas no celular. É o par obrigatório do `role="region"` com nome acessível.
 */
.dip-tabela-rolagem {
  overflow-x: auto;
  margin-bottom: var(--sp-8);
  background: var(--white);
  border-radius: var(--radius-md);
}

.dip-tabela-rolagem:last-child {
  margin-bottom: 0;
}

.dip-tabela-rolagem:focus-visible {
  outline: 2px solid var(--us-blue-light);
  outline-offset: 2px;
}

.dip-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

/**
 * A legenda fica no `display: table-caption` que o navegador dá a ela — trocá-lo
 * por `flex` a desenharia DEPOIS do cabeçalho da tabela, que é onde ela estava
 * saindo. Quem faz o arranjo é o `<div>` de dentro.
 */
.dip-tabela__titulo {
  padding: var(--sp-4);
  color: var(--color-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-align: left;
}

.dip-tabela__titulo-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  align-items: baseline;
}

.dip-tabela__cr {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
}

.dip-tabela th,
.dip-tabela td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--color-border);
}

.dip-tabela thead th {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* A disciplina é o `<th scope="row">` da linha: peso normal para não parecer
   outro cabeçalho, e largura mínima para o nome não virar uma letra por linha. */
.dip-tabela tbody th {
  min-width: 14rem;
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.dip-tabela__professor {
  display: block;
}

.dip-tabela__titulacao {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.dip-resultado__voltar {
  margin-top: var(--sp-8);
}