/* ============================================================
   /ppt RINCÃOBEACH — casca das telas de apresentação.

   Espelha as decisões de `site/legal/legal.css`, que por sua vez
   espelha a home: título em CAIXA ALTA na escala do DS, logo
   centrado na navbar, conteúdo em cartão sobre areia, rodapé
   azul com o selo. Cor, tipo, espaço e borda vêm exclusivamente
   dos tokens do DS publicado em /_ds/. Nada de valor cru aqui.

   Por que não é o próprio legal.css: ele é a casca das páginas
   JURÍDICAS, e /ppt não é uma delas. As regras de estrutura
   coincidem hoje; se um dia a terceira área aparecer, vale
   extrair uma casca comum e fazer as duas apontarem para ela.
   Enquanto forem duas, o preço de manter a paridade é menor que
   o de uma abstração que ninguém exercitou.

   O deck em si NÃO usa este arquivo: ele é palco de 1920×1080 e
   tem CSS próprio, em ppt-deck.css.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  text-wrap: pretty;
}

h1,
h2 {
  text-wrap: balance;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* --- Estrutura ---------------------------------------------- */

.pagina {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.navbar {
  background: var(--azul-800);
  /* Três colunas para o logo ficar centrado com ou sem ação ao lado — mesma
     razão do /legal: a tela de acesso tem só a marca, a lista tem a marca e o
     "sair". */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-6) var(--gutter-page-mobile);
}

/* O logo é alvo por classe, e não por `:first-child`: na lista do
   administrador ele deixa de ser o primeiro elemento da barra, e ancorar a
   coluna central na posição faria o logo sair do centro sem aviso. */
.navbar-marca {
  grid-column: 2;
}

/* Mesmo lugar e mesmo peso do `.navbar-voltar` do /legal. Aqui é um <button>,
   porque encerrar sessão é POST e não navegação — daí o reset de aparência. */
.navbar-acao {
  grid-column: 3;
  justify-self: end;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--areia-200);
  text-decoration: none;
  opacity: 0.85;
}

.navbar-acao:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* O link do relatório vai na coluna livre da esquerda. Empilhar as duas ações
   na mesma coluna descentraria o logo, que é o que a grade de três colunas
   existe para evitar. */
.navbar-acao--esquerda {
  grid-column: 1;
  justify-self: start;
}

.conteudo {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-9);
}

/* A tela de acesso é uma coluna só, e curta: 1200px deixaria o cartão perdido
   no meio da areia. */
.conteudo--estreito {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cartao {
  background: var(--surface-card);
  border: var(--border-hair);
  box-shadow: var(--shadow-card);
  padding: var(--space-7) var(--space-5);
}

/* --- Tipografia --------------------------------------------- */

/* CAIXA ALTA na escala do DS: é a assinatura tipográfica da home e do /legal.
   Um título em caixa mista a 68px lia como outro produto. */
.titulo-principal {
  font: var(--fw-semibold) var(--fs-h3) / var(--lh-title) var(--font-core);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  color: var(--azul-800);
  margin: var(--space-3) 0 var(--space-5);
}

.chamada {
  font: var(--fw-light) var(--fs-body-lg) / var(--lh-body) var(--font-core);
  color: var(--text-body);
  margin: 0 0 var(--space-6);
}

.apoio {
  font: var(--type-body);
  color: var(--text-muted);
  margin: 0 0 var(--space-6);
}

.chamada,
.apoio {
  max-width: 68ch;
}

.apoio a {
  color: var(--azul-800);
}

.apoio a:hover {
  color: var(--sol-700);
}

/* --- Botões --------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--fw-bold) var(--fs-small) / 1 var(--font-core);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-7);
  border: none;
  border-radius: var(--radius-none);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-base);
}

.botao--primario {
  background: var(--azul-800);
  color: var(--areia-200);
}

.botao--primario:hover:not(:disabled) {
  background: var(--azul-700);
}

.botao--primario:active:not(:disabled) {
  transform: scale(var(--press-scale));
}

.botao--secundario {
  background: transparent;
  color: var(--azul-800);
  border: var(--border-hair);
}

.botao--secundario:hover:not(:disabled) {
  border-color: var(--azul-800);
}

.botao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.acoes {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-7);
}

/* --- Formulário de acesso ------------------------------------- */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--border-hair);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rotulo {
  font: var(--fw-bold) var(--fs-eyebrow) / 1.2 var(--font-core);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--azul-800);
}

/* Mesmas regras de `.entrada` do /legal/nda, com uma diferença: o CPF é o
   único conteúdo da tela, então ele é maior e tabular — onze dígitos que a
   pessoa confere olhando. */
.entrada {
  font: var(--fw-medium) var(--fs-h4) / 1.4 var(--font-core);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text-body);
  background: var(--branco);
  border: var(--border-hair);
  border-radius: var(--radius-none);
  padding: var(--space-4);
  transition: border-color var(--dur-base) var(--ease-out);
  width: 100%;
}

.entrada:hover {
  border-color: var(--terra-300);
}

.entrada:focus {
  outline: none;
  border-color: var(--sol-500);
  box-shadow: inset 0 -2px 0 var(--sol-500);
}

.entrada[aria-invalid='true'] {
  border-color: var(--status-danger);
}

.erro-campo {
  font: var(--fw-medium) var(--fs-caption) / 1.4 var(--font-core);
  color: var(--status-danger);
  margin: 0;
}

/* --- Lista de apresentações ----------------------------------- */

/* Mesma estrutura do `.documento` do /legal — texto à esquerda, ação à
   direita, régua fina separando. A miniatura é o que o /legal não precisa
   ter: um deck se reconhece pela capa antes do título. */
.lista-apresentacoes {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.apresentacao {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: var(--border-hair);
}

.apresentacao:first-child {
  padding-top: 0;
  border-top: 0;
}

.apresentacao-contexto {
  display: inline-block;
  font: var(--type-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sol-700);
}

.apresentacao-titulo {
  margin: var(--space-2) 0 0;
  font: var(--fw-semibold) var(--fs-h4) / var(--lh-title) var(--font-core);
  color: var(--azul-800);
}

.apresentacao-titulo a {
  color: inherit;
  text-decoration: none;
}

.apresentacao-titulo a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.apresentacao-resumo {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  max-width: 58ch;
}

.apresentacao-meta {
  margin: var(--space-3) 0 0;
  font: var(--fw-regular) var(--fs-caption) / var(--lh-body) var(--font-core);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.apresentacao-meta span:not(:last-child)::after {
  content: '·';
  margin: 0 var(--space-2);
  color: var(--sol-500);
}

.apresentacao-acoes {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

/* --- Miniatura ------------------------------------------------ */

/* Não é screenshot: é a capa do deck reproduzida com o mesmo tipo e a mesma
   foto. Screenshot envelheceria em silêncio a cada revisão do slide. */
.miniatura {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--azul-900);
  border: var(--border-hair);
}

.miniatura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
}

/* O véu existe para a marca ter contraste, não para esconder a foto: ele é
   forte só na faixa onde o texto cai e abre para a direita, onde a imagem é o
   próprio argumento do cartão. */
.miniatura-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(4, 57, 82, 0.86) 0%,
    rgba(4, 57, 82, 0.6) 46%,
    rgba(4, 57, 82, 0.16) 100%
  );
}

/* Abaixo do selo, e não ao lado: no cartão de 264px os dois disputavam a mesma
   linha e a marca encostava no "CONFIDENCIAL". */
.miniatura-marca {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  top: 56%;
  transform: translateY(-50%);
}

/* O cartão de um PDF publicado pela administração não tem capa: gerar a
   primeira página como imagem exigiria rasterizar no servidor, que é trabalho
   de script fora do ar (é o que `build-livro.py` faz), não de requisição. Fica
   a moldura azul com a marca, centrada — e o selo dizendo o que é. */
.miniatura--pdf {
  background: var(--azul-900);
}

.miniatura--pdf .miniatura-marca {
  top: 50%;
  text-align: center;
}

/* O cartão do livro reaproveita a moldura e muda uma regra: a capa é retrato e
   é ela mesma a arte. Cortada em 16/9 perderia o logo, e o véu com a marca por
   cima repetiria o que a capa já diz — então a capa aparece inteira, centrada
   sobre o azul, como um volume numa estante. */
.miniatura--livro {
  background: var(--azul-900);
}

.miniatura--livro img {
  object-fit: contain;
  object-position: center;
}

.miniatura-selo {
  position: absolute;
  right: 0;
  top: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--sol-500);
  color: var(--azul-900);
  font: var(--fw-bold) var(--fs-caption) / 1 var(--font-core);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* --- Item vazio ------------------------------------------------ */

.apresentacao--vazia {
  border-top: var(--border-w-hair) dashed var(--terra-300);
}

.apresentacao--vazia .apresentacao-contexto {
  color: var(--text-muted);
}

/* --- Aviso de confidencialidade -------------------------------- */

.nota-confidencial {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-hair);
}

/* --- Relatório -------------------------------------------------
   Só o administrador chega aqui (ver `lib/ppt-guarda.ts`). São muitos
   números numa tela só, então o que a folha faz é hierarquia: o resumo
   grande em cima, as tabelas com peso de texto, e a ressalva visível o
   bastante para ninguém ler um número sem ver o aviso ao lado dele. */

.numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin: var(--space-7) 0 var(--space-6);
  padding: var(--space-6) 0;
  border-top: var(--border-hair);
  border-bottom: var(--border-hair);
}

.numero {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.numero b {
  font: var(--fw-black) var(--fs-h2) / var(--lh-tight) var(--font-core);
  letter-spacing: var(--ls-title);
  color: var(--azul-800);
  /* Sem isto, "12min 30s" e "3" saltam de linha de forma diferente e a
     régua de baseline entre os três blocos quebra. */
  font-variant-numeric: tabular-nums;
}

.numero span {
  font: var(--fw-medium) var(--fs-caption) / 1.2 var(--font-core);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* O aviso sobre o que a medida vale. Fica preso ao bloco de números de
   propósito: é a única leitura honesta deles. */
.aviso-medida {
  border-left: var(--border-w-rule) solid var(--sol-500);
  padding-left: var(--space-5);
  font-size: var(--fs-small);
}

.secao-titulo {
  font: var(--fw-semibold) var(--fs-h5) / var(--lh-title) var(--font-core);
  letter-spacing: var(--ls-title);
  color: var(--azul-800);
  margin: var(--space-9) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border-hair);
}

/* Tabela larga em tela estreita rola dentro da própria caixa; a página
   inteira deslizando na horizontal seria pior. */
.tabela-rolavel {
  overflow-x: auto;
  margin-bottom: var(--space-6);
  -webkit-overflow-scrolling: touch;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-body);
  color: var(--text-body);
  /* Impede que "Oportunidade de Parceria" espreme as colunas numéricas
     até elas ficarem ilegíveis. */
  min-width: 520px;
}

.tabela th {
  font: var(--fw-bold) var(--fs-caption) / 1.2 var(--font-core);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: 0 var(--space-4) var(--space-3) 0;
  border-bottom: var(--border-hair);
  white-space: nowrap;
}

.tabela td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--border-w-hair) solid var(--areia-300);
  vertical-align: top;
}

.tabela tr:last-child td {
  border-bottom: none;
}

.tabela th:last-child,
.tabela td:last-child {
  padding-right: 0;
}

/* Números alinhados à direita e com largura de dígito fixa: é o que
   deixa comparar duas linhas sem ler os dois valores. */
.tabela .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Datas: dígito de largura fixa como os números, mas alinhadas à esquerda.
   Encostadas à direita numa coluna larga elas se descolam do próprio título e
   passam a parecer parte da coluna seguinte. */
.tabela .quando {
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Segunda linha da célula "quem": a empresa, abaixo do nome. */
.sub {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.ressalva {
  display: inline-block;
  font: var(--fw-bold) var(--fs-caption) / 1.2 var(--font-core);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--terra-700);
  background: var(--status-warning-bg);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}

/* --- Rodapé ---------------------------------------------------- */

.rodape {
  background: var(--azul-800);
  padding: var(--space-5) var(--gutter-page-mobile);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.rodape-razao {
  font: var(--fw-medium) var(--fs-caption) / 1.2 var(--font-core);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--areia-200);
  text-align: right;
}

/* --- Acima de 640px -------------------------------------------- */

@media (min-width: 640px) {
  .cartao {
    padding: var(--space-9) var(--space-8);
  }

  .navbar,
  .rodape {
    padding-left: var(--gutter-page);
    padding-right: var(--gutter-page);
  }

  /* Miniatura, texto e ações em linha quando há largura para isso — mesmo
     movimento que o `.documento` do /legal faz. */
  .apresentacao {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }

  .miniatura {
    width: 264px;
  }

  .apresentacao-texto {
    flex: 1;
  }

  .apresentacao-acoes {
    flex: none;
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* --- Visor de PDF ---------------------------------------------- */

/* O visualizador é o do próprio navegador, num <iframe>. A altura é a maior
   parte do que sobra da janela — um PDF de apresentação lido numa faixa de
   400px é pior do que não abrir —, com um piso para telas baixas e um teto em
   `vh` para a página continuar rolando até o rodapé.

   `border` e não `box-shadow`: o quadro é conteúdo de outro documento e o
   navegador desenha o fundo dele; uma sombra sem borda faria o PDF parecer
   flutuar sobre a areia, e a moldura fina é a mesma das miniaturas. */
.visor-pdf {
  display: block;
  width: 100%;
  height: clamp(420px, 76vh, 1100px);
  margin: var(--space-8) 0 0;
  border: var(--border-hair);
  background: var(--azul-900);
}