/*
 * 80_certificado.css — ONDA H · §11
 * ═══════════════════════════════════════════════════════════════════════════
 * O que NÃO está aqui, e é de propósito: **a folha A4**. Ela é da ONDA D e
 * mora em `90_impressao.css` (`.folha`, `.folha__topo`, `.folha__miolo`,
 * `.folha__rodape`, `.folha-acoes` e as regras de `@media print`). Este
 * arquivo só acrescenta os quatro pedaços que aquela folha não previu
 * (`__legal`, `__ressalva`, `__marca-texto`, `__protocolo-topo`) e desenha as
 * TRÊS telas que são desta onda:
 *
 *   · /certificados        a lista do aluno
 *   · /validar/:protocolo  a validação pública
 *   · /admin/certificados  a lista e a ficha
 *
 * Ordem de carga: este arquivo entra entre `70_admin.css` e `90_impressao.css`
 * (o `stylesheet_link_tag :app` liga TODAS as folhas de `app/assets/
 * stylesheets` em ordem alfabética — é para isso que os prefixos numéricos
 * existem). Ou seja: as regras de impressão da onda D continuam tendo a última
 * palavra sobre qualquer coisa daqui, que é o desenho certo.
 *
 * Régua da tela de validação: ela é lida por um TERCEIRO, muitas vezes num
 * celular, no portão, sob sol. Por isso o resultado é a primeira coisa da
 * página, com selo grande e barra de cor à esquerda — e a cor NUNCA carrega a
 * informação sozinha: o selo tem texto, e o texto explica.
 */

/* ═══ COMPLEMENTOS DA FOLHA (§11.3) ═══════════════════════════════════════
   Quatro peças que `90_impressao.css` não previu. Valores em mm, como o resto
   da folha, e cores literais — papel é branco em qualquer tema. */

/* ── A FOLHA CABENDO NA TELA (régua nº 4 do PLANO, e o celular do motorista)
   ───────────────────────────────────────────────────────────────────────────
   `90_impressao.css` escreve, para a tela:

       .folha { zoom: min(1, calc((100vw - 32px) / 297mm)) }

   e essa declaração é INVÁLIDA: `calc()` não divide comprimento por
   comprimento (só por número), então o navegador descarta a regra inteira e a
   folha fica em `zoom: 1`, com 1122,5 px de largura. Como `.corpo--certificado`
   é flex centralizado, o excesso transborda para os DOIS lados e o lado
   esquerdo cai em coordenada NEGATIVA — para onde a página não rola. Em
   390×844 desaparecem a carga horária, a razão social, o CNPJ e o QR inteiro.

   O conserto de verdade é da onda D, no arquivo dela, e está pedido no
   relatório. O que dá para fazer daqui, e é o que vale enquanto isso: uma
   ESCALA POR FAIXA, que é CSS válido em todo navegador, mais um palco com
   `overflow-x: auto` como rede de segurança. Valem porque a declaração da onda
   D é descartada na análise; no dia em que ela virar CSS válido, ela volta a
   ter a última palavra (ordem alfabética) e estas regras somem sem estorvo.

   Um detalhe de cascata que faz isto funcionar: a declaração da onda D é
   descartada na ANÁLISE (é sintaticamente inválida), então não há conflito a
   resolver — quem pinta é esta. */
@media screen {
  .folha-palco {
    max-width: 100%;
    overflow-x: auto;
    padding-inline: 16px;
    /* Sem isto, a rolagem lateral do palco (quando ela existe) fica sem
       respiro embaixo no iOS. */
    padding-bottom: 4px;
  }

  /* A escala é escrita por FAIXA ASCENDENTE (`min-width`), e cada valor é o
     que cabe na MENOR largura da sua faixa — assim nenhuma faixa estoura na
     ponta estreita dela. A conta, para quem for conferir: 297 mm = 1122,5 px
     a 96 dpi, e sobram 40 px para o respiro lateral e a barra de rolagem.
     Acima de 1180 px a folha é 1:1, que é o tamanho do papel. */
  .folha { zoom: 0.21 }

  @media (min-width: 320px)  { .folha { zoom: 0.24 } }
  @media (min-width: 360px)  { .folha { zoom: 0.28 } }
  @media (min-width: 400px)  { .folha { zoom: 0.32 } }
  @media (min-width: 440px)  { .folha { zoom: 0.35 } }
  @media (min-width: 480px)  { .folha { zoom: 0.39 } }
  @media (min-width: 540px)  { .folha { zoom: 0.44 } }
  @media (min-width: 600px)  { .folha { zoom: 0.49 } }
  @media (min-width: 700px)  { .folha { zoom: 0.58 } }
  @media (min-width: 800px)  { .folha { zoom: 0.67 } }
  @media (min-width: 900px)  { .folha { zoom: 0.76 } }
  @media (min-width: 1000px) { .folha { zoom: 0.85 } }
  @media (min-width: 1100px) { .folha { zoom: 0.94 } }
  @media (min-width: 1180px) { .folha { zoom: 1 } }
}

/* No papel não há escala nem palco: a folha É a página. */
@media print {
  .folha-palco { overflow: visible; padding: 0; max-width: none }
  .folha { zoom: 1 }
}

/* §11.3, ordem do papel: conclusão e "válido até" vêm DEPOIS do bloco do
   emissor, e não dentro da linha de números. Mesma tipografia de
   `.folha__numeros` (90_impressao.css), em corpo um pouco menor: são a data do
   documento, não o resultado do treinamento. */
.folha__datas {
  display: flex;
  justify-content: center;
  gap: 12mm;
  margin-top: 3mm;
  font-size: 3.2mm;
  color: #5b6475;
}
.folha__datas b {
  display: block;
  font-size: 4.2mm;
  color: #14181f;
  font-variant-numeric: tabular-nums;
}

/* O nome da conta quando não há logo embutido: "sem logo → wordmark, NUNCA
   imagem quebrada" (§12.2), aplicado ao papel. */
.folha__marca-texto {
  margin: 0;
  font-size: 6mm;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #14181f;
  max-width: 120mm;
}

/* O protocolo repetido no alto, em corpo pequeno: quem arquiva o papel numa
   pasta o encontra pela borda superior, sem virar a folha. */
.folha__protocolo-topo {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 3.4mm;
  letter-spacing: 0.08em;
  color: #14181f;
}

/* Razão social e CNPJ do emissor (§11.3). */
.folha__legal {
  margin: 4mm auto 0;
  max-width: 220mm;
  font-size: 3.2mm;
  color: #5b6475;
  line-height: 1.5;
}

/* A ressalva de honestidade: o que o certificado NÃO prova. Fica no pé da
   folha, acima da margem, em corpo pequeno mas LEGÍVEL (2,6 mm ≈ 7,4 pt) —
   nunca em 5 pt de letra miúda, porque a intenção não é cumprir tabela: é ser
   lido por quem vai decidir alguma coisa com o papel na mão. */
.folha__ressalva {
  margin: 3mm 0 0;
  font-size: 2.6mm;
  line-height: 1.45;
  color: #6b7280;
  text-align: center;
  max-width: 240mm;
  align-self: center;
}

/* O carimbo de CANCELADO/EXPIRADO (`90_impressao.css`) é texto de 28 mm
   rotacionado dentro de um `::after` com `inset: 0` — e a rotação o faz
   transbordar a folha, deixando uma lasca de letra vermelha na mesa, ao lado
   do papel. Corta-se aqui, e só nos dois modificadores que têm carimbo, para
   não mexer no `overflow` da folha normal. */
.folha--cancelado,
.folha--expirado { overflow: hidden }

/* ═══ /certificados — A LISTA DO ALUNO ════════════════════════════════════ */

.certificados { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4) }

.certificado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-5);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cor-aprovado);
  border-radius: var(--raio-3);
}
/* A situação muda a BARRA, não o fundo: um cartão inteiro vermelho na tela do
   aluno parece punição, e o que aconteceu foi uma decisão administrativa da
   empresa. Os quatro estados existem porque três deles ficavam com a barra
   verde de "aprovado" ao lado de um selo que dizia o contrário. */
.certificado--valido { border-left-color: var(--cor-aprovado) }
.certificado--expirado { border-left-color: var(--cor-descanso) }
.certificado--cancelado,
.certificado--nao_confere { border-left-color: var(--cor-reprovado) }

.certificado__corpo { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-2) }
.certificado__selo { margin: 0 }
.certificado__titulo { margin: 0; font-size: var(--texto-lg); line-height: 1.25; text-wrap: balance }
.certificado__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-4);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}
.certificado__validade { margin: 0; font-size: var(--texto-sm); color: var(--texto-tenue) }
.certificado__aviso {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--cor-reprovado);
  max-width: 44ch;
}
.certificado__protocolo {
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
  overflow-wrap: anywhere;
}
.certificado__acoes { flex: 0 0 auto }

@media (max-width: 40rem) {
  .certificado__acoes { width: 100% }
  .certificado__acoes .botao { width: 100% }
}

/* ═══ /validar — A VALIDAÇÃO PÚBLICA (§11.4) ══════════════════════════════ */

/* `margin-inline: auto`: `.leitura` limita a largura mas não centraliza, e no
   desktop a coluna ficava colada à esquerda com meia tela vazia à direita —
   o mesmo achado nº 1 da rodada de UX da landing, registrado no PLANO. */
.validacao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
  padding-block: var(--esp-4);
  margin-inline: auto;
}
.validacao__titulo { margin: 0; font-size: var(--texto-xl) }

/* O veredito. Barra de cor à esquerda + selo com texto: em preto e branco, num
   celular sob sol, ou para quem não distingue vermelho de verde, o TEXTO
   continua respondendo a pergunta. */
.validacao__resultado {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda-forte);
  border-radius: var(--raio-3);
  background: var(--fundo-cartao);
}
.validacao__resultado--aprovado { border-left-color: var(--cor-aprovado); background: var(--cor-aprovado-suave) }
.validacao__resultado--reprovado { border-left-color: var(--cor-reprovado); background: var(--cor-reprovado-suave) }
.validacao__resultado--descanso { border-left-color: var(--cor-descanso); background: var(--cor-descanso-suave) }
.validacao__resultado--vazio { border-left-color: var(--borda-forte) }

.validacao__selo { margin: 0 }
.validacao__frase { margin: 0; font-size: var(--texto-md); line-height: 1.55; color: var(--texto) }
.validacao__texto { margin: 0; font-size: var(--texto-sm); color: var(--texto-suave); line-height: 1.55 }

.validacao__dados { margin-top: var(--esp-2) }
.validacao__protocolo {
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: var(--texto-lg);
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}

.validacao__forma { display: flex; flex-direction: column; gap: var(--esp-3) }
/* O campo do protocolo é MAIOR que um campo comum e monoespaçado: ele é
   preenchido copiando de um papel, caractere a caractere, muitas vezes com
   luva. Caixa alta automática porque o alfabeto do protocolo só tem
   maiúsculas. */
.campo__controle--protocolo {
  font-family: var(--fonte-mono);
  font-size: var(--texto-lg);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.validacao__ressalva {
  border-top: 1px solid var(--borda);
  padding-top: var(--esp-4);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.validacao__ressalva p { margin: 0 }
.validacao__ressalva-titulo { margin: 0; font-size: var(--texto-md); color: var(--texto) }
.validacao__privacidade { color: var(--texto-tenue) }

/* ═══ /admin/certificados ═════════════════════════════════════════════════ */

/* O protocolo é a IDENTIDADE da linha: quebrado em duas (ELV-CX9S-SZDK- /
   BW7X) ele deixa de ser conferível contra o papel que está na mesa. Só na
   tabela larga — no modo cartão do celular a coluna tem a largura toda. */
@media (min-width: 60rem) {
  .tabela .protocolo { white-space: nowrap; font-family: var(--fonte-mono) }
}

.tabela-resumo { margin: var(--esp-4) 0 var(--esp-2); font-size: var(--texto-sm); color: var(--texto-tenue) }

.filtro-de-busca { gap: var(--esp-3); margin: var(--esp-4) 0; align-items: center }
.filtro-de-busca .campo__controle { flex: 1 1 16rem; min-width: 0 }

/* O cartão da ação destrutiva. Borda vermelha e nada mais: fundo vermelho
   inteiro numa tela de admin vira ruído de alerta que se aprende a ignorar —
   e esta é a única ação do produto que um terceiro vê do lado de fora. */
.cartao--perigo { border-color: var(--cor-reprovado); border-left-width: 3px }
.cartao--perigo .cartao__titulo { color: var(--cor-reprovado) }

.texto-reprovado { color: var(--cor-reprovado) }

.citacao {
  margin: var(--esp-2) 0 0;
  padding: var(--esp-3) var(--esp-4);
  border-left: 3px solid var(--borda-forte);
  background: var(--fundo-fundo);
  border-radius: var(--raio-2);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  overflow-wrap: anywhere;
}

/* ═══ A BARRA DE AÇÕES DA FOLHA ═══════════════════════════════════════════
   `.folha-acoes` é da onda D; faltavam o link secundário e a linha de ajuda
   que diz, na UI, que não existe PDF no servidor (§11.3 pede isso por
   escrito). */
.folha-acoes__link { color: #cfd6ff }
.folha-acoes__ajuda {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #b9c0cd;
}