/* ------------------------------------------------------------------ *
 *  Tema das apresentações da FEX1001                                   *
 *  Mesma paleta e tipografia do site da disciplina.                    *
 * ------------------------------------------------------------------ */

:root {
  --ink: #102333;
  --muted: #607080;
  --paper: #f6f3ec;
  --white: #fffdf8;
  --navy: #071b2c;
  --blue: #1e5c83;
  --cyan: #8dd7dc;
  --gold: #e6b75c;
  --line: rgba(16, 35, 51, 0.16);
  --red: #b9494d;
  --green: #246444;
}

.reveal-viewport { background: var(--paper); }

.reveal {
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 400;
}

/* Conteúdo alinhado à esquerda: slides de aula não são pôsteres.
   A centralização vertical fica por conta do reveal (center: true). */
.reveal .slides { text-align: left; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  margin: 0 0 0.5em;
  color: var(--navy);
  font-family: "Newsreader", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: none;
  text-shadow: none;
  text-wrap: balance;
}

.reveal h1 { font-size: 2.1em; font-weight: 500; letter-spacing: -0.045em; }
.reveal h2 { font-size: 1.45em; }
.reveal h3 { font-size: 1.1em; }
.reveal h4 { font-size: 0.92em; font-family: "Manrope", sans-serif; font-weight: 700; }

/* Título de slide com filete dourado */
.reveal section > h2:first-child,
.reveal section > h3:first-child {
  padding-bottom: 0.28em;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.7em;
}

.reveal p { margin: 0 0 0.7em; line-height: 1.5; }
.reveal a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(30, 92, 131, 0.3); }
.reveal a:hover { color: var(--blue); border-color: var(--blue); }

.reveal ul, .reveal ol { display: block; margin: 0 0 0.7em 1em; line-height: 1.5; }
.reveal li { margin-bottom: 0.35em; }
.reveal li li { font-size: 0.92em; color: #37485a; }
.reveal ul ul, .reveal ol ol, .reveal ul ol, .reveal ol ul { margin-top: 0.3em; margin-bottom: 0.3em; }

.reveal strong, .reveal b { font-weight: 700; color: var(--navy); }
.reveal em { font-style: italic; }

/* ---------- Etiqueta acima do título ---------- */

.eyebrow {
  margin: 0 0 0.35em;
  color: var(--blue);
  font-family: "DM Mono", monospace;
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ---------- Capa ----------
   O fundo escuro vem de data-background-gradient, para sangrar até as bordas
   mesmo com o slide centralizado verticalmente. */

.reveal .capa { color: #f5fbfa; }
.reveal .capa h1, .reveal .capa h2 { color: white; }
.reveal .capa .eyebrow { color: var(--cyan); }
.reveal .capa .capa-sub { color: rgba(238, 247, 246, 0.72); font-size: 0.85em; }
.reveal .capa .capa-rodape {
  margin-top: 1.4em;
  padding-top: 0.8em;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(238, 247, 246, 0.6);
  font-family: "DM Mono", monospace;
  font-size: 0.58em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Divisória de seção ---------- */

.reveal .divisoria { color: #f5fbfa; }

.reveal .divisoria h2 { color: white; font-size: 2em; font-weight: 500; border: 0; }
.reveal .divisoria .eyebrow { color: var(--cyan); }
.reveal .divisoria p { color: rgba(238, 247, 246, 0.68); font-size: 0.8em; max-width: 26em; }

/* ---------- Blocos ---------- */

.bloco {
  margin: 0.6em 0;
  padding: 0.75em 1em;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
}

.bloco > .bloco-titulo {
  display: block;
  margin-bottom: 0.35em;
  color: var(--blue);
  font-family: "DM Mono", monospace;
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bloco p:last-child, .bloco ul:last-child, .bloco ol:last-child { margin-bottom: 0; }

/* Regra: o enunciado que o aluno precisa levar para a prova */
.bloco.regra { border-left-color: var(--gold); background: #fdf6e7; }
.bloco.regra > .bloco-titulo { color: #8a6a1f; }

/* Atenção / erro comum */
.bloco.atencao { border-left-color: var(--red); background: #fdeeee; }
.bloco.atencao > .bloco-titulo { color: var(--red); }

/* Exemplo resolvido */
.bloco.exemplo { border-left-color: #3a9b69; background: #eef7f1; }
.bloco.exemplo > .bloco-titulo { color: var(--green); }

/* ---------- Algarismo duvidoso ---------- */

.dv {
  color: #8a5a00;
  font-weight: 700;
  border-bottom: 2px solid var(--gold);
}

/* Texto corrido. Era inline-flex, o que transformava cada <em>, <strong> ou
   fórmula dentro dela em uma coluna separada, com buracos no meio da frase. */
.legenda-dv {
  display: block;
  color: var(--muted);
  font-size: 0.6em;
  line-height: 1.5;
}

.legenda-dv i {
  display: inline-block;
  width: 14px;
  height: 2px;
  margin-right: 0.5em;
  vertical-align: middle;
  background: var(--gold);
}

/* Slides com duas colunas de texto denso: reduz tudo proporcionalmente para
   caber nos 720 px de altura sem cortar o rodapé. */
.reveal section.denso { font-size: 0.84em; }
.reveal section.denso figure img { max-height: 46vh; }

/* ---------- Colunas ---------- */

.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; align-items: start; }
.colunas-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1em; align-items: start; }
.colunas-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.4em; align-items: start; }
.colunas-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 1.4em; align-items: start; }

/* ---------- Tabelas ---------- */

.reveal table {
  width: 100%;
  margin: 0.5em 0;
  border-collapse: collapse;
  font-size: 0.78em;
}

.reveal table th {
  padding: 0.4em 0.6em;
  color: var(--blue);
  background: #e9f0f2;
  border-bottom: 1px solid var(--line);
  font-family: "DM Mono", monospace;
  font-size: 0.86em;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.reveal table td {
  padding: 0.34em 0.6em;
  border-bottom: 1px solid rgba(16, 35, 51, 0.08);
  vertical-align: top;
}

.reveal table tr:last-child td { border-bottom: 0; }
.reveal table .num { text-align: right; font-variant-numeric: tabular-nums; }
.reveal table .destaque { background: rgba(230, 183, 92, 0.16); }

.tabela-compacta { font-size: 0.66em !important; }

/* Tabelas de arredondamento: valor → resultado, com a seta em coluna estreita */
.tabela-arred td:first-child { width: 30%; }
.tabela-arred td:nth-child(2) { width: 2.2em; color: var(--muted); text-align: center; }
.tabela-arred td:last-child:not(:nth-child(3)) { color: var(--muted); font-size: 0.92em; }

/* ---------- Cálculo passo a passo ---------- */

.conta {
  margin: 0.5em 0;
  padding: 0.7em 1em;
  background: var(--white);
  border: 1px solid var(--line);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.72em;
  line-height: 1.75;
  white-space: pre;
  overflow-x: auto;
}

.conta .tot { display: inline-block; padding-top: 0.15em; border-top: 1px solid var(--ink); }
.conta .dv { border-bottom-width: 2px; }

/* Corte do que será desprezado no arredondamento */
.corte { color: var(--muted); }
.corte::before { content: "|"; margin: 0 0.05em; color: var(--red); font-weight: 700; }

/* ---------- Figuras ---------- */

.reveal figure { margin: 0.4em 0; text-align: center; }
/* max-width é essencial: sem ele, uma imagem mais larga que a coluna estoura a
   grade e espreme o texto ao lado, esticando o slide na vertical. */
.reveal figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 62vh;
  background: white;
  border: 1px solid var(--line);
}
.reveal figcaption { margin-top: 0.4em; color: var(--muted); font-size: 0.6em; text-align: center; }

/* Crédito de imagem de terceiros */
.credito { margin-top: 0.3em; color: var(--muted); font-family: "DM Mono", monospace; font-size: 0.5em; letter-spacing: 0.04em; text-align: center; }
.credito.esq { text-align: left; }
.reveal img.limpa { border: 0; background: transparent; }

/* ---------- Matemática ---------- */

.reveal .katex { font-size: 1.02em; }
.reveal .katex-display { margin: 0.7em 0; }

/* ---------- Tábua de Galton (simulação) ---------- */

.galton-painel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.6em;
  margin-bottom: 0.5em;
}

.galton-grupo { display: flex; flex-direction: column; gap: 0.3em; }

.galton-rot {
  color: var(--blue);
  font-family: "DM Mono", monospace;
  font-size: 0.5em;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.galton-botoes { display: flex; gap: 0.3em; }

.galton-bt {
  padding: 0.32em 0.75em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: "DM Mono", monospace;
  font-size: 0.62em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.galton-bt:hover { border-color: var(--blue); }
.galton-bt.ativo { color: white; background: var(--blue); border-color: var(--blue); }
.galton-bt-forte { color: var(--navy); background: var(--gold); border-color: var(--gold); font-weight: 500; }
.galton-bt-forte:hover { background: #f1c76f; }

.galton-numeros { display: flex; gap: 1.5em; margin: 0 0 0 auto; }
.galton-numeros > div { display: grid; gap: 0.1em; }

.galton-numeros dt {
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 0.48em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.galton-numeros dd {
  margin: 0;
  color: var(--navy);
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1;
}

.galton-tela { display: block; width: 100%; height: auto; }

.galton-nota { margin: 0.1em 0 0; color: var(--muted); font-size: 0.55em; line-height: 1.5; }
.galton-mono { font-family: "DM Mono", monospace; color: var(--ink); }

/* ---------- Linearização ao vivo (Aula 2) ---------- */

.lin-painel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.3em; margin-bottom: 0.5em; }
.lin-grupo { display: flex; flex-direction: column; gap: 0.3em; }

.lin-rot {
  color: var(--blue);
  font-family: "DM Mono", monospace;
  font-size: 0.48em;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.lin-botoes { display: flex; gap: 0.28em; }

.lin-bt {
  padding: 0.3em 0.7em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: "DM Mono", monospace;
  font-size: 0.58em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.lin-bt:hover { border-color: var(--blue); }
.lin-bt.ativo { color: white; background: var(--blue); border-color: var(--blue); }

.lin-tela { display: block; width: 100%; height: auto; }

.lin-veredito { margin: 0.35em 0 0; font-size: 0.58em; line-height: 1.5; }
.lin-veredito.ok { color: var(--green); }
.lin-veredito.nao { color: var(--red); }

/* ---------- Escolha de escala e papel (Aula 2) ---------- */

/* Controles empilhados à esquerda, folha grande à direita: assim a folha usa
   toda a altura disponível do slide. */
.pap-corpo { display: grid; grid-template-columns: 286px 1fr; gap: 1.1em; align-items: start; }
.pap-painel { display: flex; flex-direction: column; gap: 0.7em; }
.pap-vista { min-width: 0; }
.pap-duplo { flex-wrap: wrap; max-width: 276px; }
.pap-grupo { display: flex; flex-direction: column; gap: 0.28em; }

.pap-rot {
  color: var(--blue);
  font-family: "DM Mono", monospace;
  font-size: 0.46em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pap-botoes { display: flex; gap: 0.25em; }

.pap-bt {
  padding: 0.28em 0.62em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: "DM Mono", monospace;
  font-size: 0.55em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.pap-bt:hover { border-color: var(--blue); }
.pap-bt.ativo { color: white; background: var(--blue); border-color: var(--blue); }

.pap-tela { display: block; width: 100%; height: auto; }

.pap-veredito { margin: 0.3em 0 0; font-size: 0.55em; line-height: 1.5; }
.pap-veredito.bom { color: var(--green); }
.pap-veredito.meio { color: #8a6a1f; }
.pap-veredito.ruim { color: var(--red); }

/* ---------- Ajuste nos dois espaços (Aula 2) ---------- */

.aj-topo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.2em; margin-bottom: 0.4em; }
.aj-grupo { display: flex; flex-direction: column; gap: 0.28em; }

.aj-rot {
  color: var(--blue);
  font-family: "DM Mono", monospace;
  font-size: 0.46em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.aj-botoes { display: flex; gap: 0.26em; }

.aj-bt {
  padding: 0.3em 0.7em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: "DM Mono", monospace;
  font-size: 0.56em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.aj-bt:hover { border-color: var(--blue); }
.aj-bt.ativo { color: white; background: var(--blue); border-color: var(--blue); }
.aj-bt-forte { color: var(--navy); background: var(--gold); border-color: var(--gold); font-weight: 500; }
.aj-bt-forte:hover { background: #f1c76f; }

.aj-nivel {
  align-self: center;
  min-width: 3.6em;
  color: var(--blue);
  font-family: "DM Mono", monospace;
  font-size: 0.56em;
  text-align: center;
}

.aj-eq { margin-left: auto; color: var(--muted); font-size: 0.6em; }

.aj-controles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; margin-bottom: 0.4em; }

.aj-slider { display: flex; align-items: center; gap: 0.7em; }
.aj-slider > span { min-width: 5.4em; color: var(--ink); font-family: "DM Mono", monospace; font-size: 0.58em; }
.aj-slider > span b { color: var(--blue); }

.aj-slider input[type="range"] {
  flex: 1;
  height: 4px;
  appearance: none;
  background: rgba(16, 35, 51, 0.16);
  border-radius: 2px;
  cursor: pointer;
}

.aj-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  background: var(--blue);
  border: 2px solid var(--white);
  border-radius: 50%;
  cursor: pointer;
}

.aj-slider input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: var(--blue);
  border: 2px solid var(--white);
  border-radius: 50%;
  cursor: pointer;
}

.aj-tela { display: block; width: 100%; height: auto; }

.aj-veredito { margin: 0.3em 0 0; color: var(--muted); font-size: 0.55em; line-height: 1.5; }
.aj-veredito.ok { color: var(--green); }

/* ---------- Do tabelamento ao papel (Aula 2) ---------- */

.ca-corpo { display: grid; grid-template-columns: 336px 1fr; gap: 1em; align-items: start; }
.ca-lado { min-width: 0; }
.ca-vista { min-width: 0; }

.reveal .ca-tabela { width: 100%; margin: 0 0 0.6em; border-collapse: collapse; font-size: 0.4em; }
.reveal .ca-tabela th {
  padding: 0.28em 0.6em;
  color: var(--blue);
  background: #e9f0f2;
  border-bottom: 1px solid var(--line);
  font-family: "DM Mono", monospace;
  font-weight: 500;
  text-align: right;
  /* símbolo de unidade é sensível a caixa: cm não pode virar CM */
  text-transform: none;
  letter-spacing: 0;
}
.reveal .ca-tabela td {
  padding: 0.16em 0.6em;
  border-bottom: 1px solid rgba(16, 35, 51, 0.08);
  font-family: "DM Mono", monospace;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.reveal .ca-tabela tr:last-child td { border-bottom: 0; }

.ca-controles { display: flex; flex-direction: column; gap: 0.42em; }
.ca-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; }

.ca-rot {
  min-width: 3.1em;
  color: var(--blue);
  font-family: "DM Mono", monospace;
  font-size: 0.46em;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ca-linha label {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 0.5em;
}

.ca-linha input[type="text"] {
  width: 3.4em;
  padding: 0.24em 0.3em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: "DM Mono", monospace;
  font-size: 1em;
  text-align: right;
}

.ca-linha input[type="text"]:focus { outline: none; border-color: var(--blue); }

.ca-botoes { display: flex; gap: 0.25em; }

.ca-bt {
  padding: 0.26em 0.6em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: "DM Mono", monospace;
  font-size: 0.5em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.ca-bt:hover { border-color: var(--blue); }
.ca-bt.ativo { color: white; background: var(--blue); border-color: var(--blue); }

.ca-tela { display: block; width: 100%; height: auto; }

.ca-veredito { margin: 0.3em 0 0; font-size: 0.52em; line-height: 1.5; }
.ca-veredito.bom { color: var(--green); }
.ca-veredito.meio { color: #8a6a1f; }
.ca-veredito.ruim { color: var(--red); }

/* ---------- Rodapé com a seção corrente ---------- */

.rodape-secao {
  position: absolute;
  bottom: 12px;
  left: 0;
  color: var(--muted);
  font-family: "DM Mono", monospace;
  font-size: 0.52em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Controles do reveal ---------- */

.reveal .controls { color: var(--blue); }
.reveal .progress { height: 4px; color: var(--gold); background: rgba(16, 35, 51, 0.1); }
.reveal .slide-number { background: rgba(7, 27, 44, 0.7); font-family: "DM Mono", monospace; }

.reveal .backgrounds .slide-background.present { background-color: transparent; }

/* ---------- Ajustes de escala em telas estreitas ---------- */

@media (max-width: 800px) {
  .colunas, .colunas-3, .colunas-2-1, .colunas-1-2 { grid-template-columns: 1fr; gap: 0.8em; }
}

/* ---------- Impressão ---------- */

@media print {
  .rodape-secao { display: none; }
  .reveal figure img { max-height: 48vh; }
}