/*
 * Identidade visual UFCIMG para apresentações xaringan/remark.js
 *
 * Objetivo: traduzir a paleta e a marca UFCIMG para slides institucionais,
 * preservando os componentes recorrentes dos temas de referência.
 * Entrada visual: paleta e aplicações de marca fornecidas em 05/11/2026.
 * Ativo utilizado: assets/ufcimg_logo_horizontal.jpg.
 * Saída: tema CSS autocontido, com exceção das fontes opcionais do Google.
 * Limitação: a logo fornecida está em JPEG; em fundos escuros ela aparece
 * sobre uma pequena base branca para preservar contraste e legibilidade.
 */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap");

:root {
  /* Paleta institucional extraída das referências fornecidas. */
  --ufcimg-primary: #142c46;
  --ufcimg-secondary: #8cc0b5;
  --ufcimg-accent: #f2a905;
  --ufcimg-light: #f4f6f3;
  --ufcimg-dark: #1b1f27;

  /* Variações funcionais para componentes. */
  --ufcimg-primary-soft: #dce3e9;
  --ufcimg-secondary-soft: #e3f0ed;
  --ufcimg-accent-soft: #fff1cc;
  --ufcimg-muted: #66717d;
  --ufcimg-rule: #cfd8d6;

  --ufcimg-text-font: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --ufcimg-heading-font: "Montserrat", "Segoe UI", Arial, sans-serif;
  --ufcimg-code-font: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html { font-size: 20px; }

body {
  color: var(--ufcimg-dark);
  font-family: var(--ufcimg-text-font);
}

.remark-slide-content {
  background: #ffffff;
  box-sizing: border-box;
  color: var(--ufcimg-dark);
  font-size: 1.45rem;
  line-height: 1.28;
  padding: 54px 64px 62px;
}

/* Filete superior presente nas referências institucionais. */
.remark-slide-content::before {
  background: var(--ufcimg-secondary);
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* Marca persistente no rodapé. */
.remark-slide-content::after {
  background: transparent url("assets/ufcimg_logo_horizontal.jpg") center / 102% auto no-repeat;
  bottom: 14px;
  content: "";
  height: 42px;
  position: absolute;
  right: 52px;
  width: 126px;
  z-index: 2;
}

h1, h2, h3 {
  color: var(--ufcimg-primary);
  font-family: var(--ufcimg-heading-font);
  line-height: 1.08;
  margin: 8px 0 16px;
}

.remark-slide-content h1 {
  font-size: 2.45rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.remark-slide-content h2 {
  font-size: 1.85rem;
  font-weight: 600;
}

.remark-slide-content h3 {
  color: var(--ufcimg-secondary);
  font-size: 1.35rem;
  font-weight: 600;
}

strong { color: var(--ufcimg-primary); }

a, a > code {
  color: #2f7f79;
  font-weight: 600;
  text-decoration-color: var(--ufcimg-secondary);
  text-underline-offset: 0.12em;
}

ul { list-style-type: square; }
li::marker { color: var(--ufcimg-accent); }

blockquote {
  background: var(--ufcimg-light);
  border-left: 6px solid var(--ufcimg-secondary);
  margin-left: 0;
  padding: 10px 18px;
}

img, video, iframe { max-width: 100%; }

/* Capa: marca em destaque e título com grande área de respiro. */
.title-slide {
  background: var(--ufcimg-light);
  color: var(--ufcimg-dark);
  padding: 250px 72px 72px;
}

.title-slide::before { height: 12px; }

.title-slide::after {
  bottom: auto;
  height: 125px;
  left: 66px;
  right: auto;
  top: 55px;
  width: 345px;
}

.title-slide h1 {
  color: var(--ufcimg-primary);
  font-size: 3.2rem;
  max-width: 82%;
}

.title-slide h2 {
  color: #4f8f89;
  font-size: 1.65rem;
}

.title-slide h3 {
  color: var(--ufcimg-muted);
  font-family: var(--ufcimg-text-font);
  font-size: 1.05rem;
  font-weight: 500;
}

.title-slide .remark-slide-number { display: none; }

/* Slide de seção e alternativa escura. */
.section-slide,
.inverse {
  background: var(--ufcimg-primary);
  color: #ffffff;
}

.section-slide::before,
.inverse::before { background: var(--ufcimg-accent); }

.section-slide::after,
.inverse::after {
  background-color: transparent;
  border: 0;
}

/* Em fundos escuros, a marca permanece apenas na capa. */
.section-slide:not(.title-slide)::after,
.inverse:not(.title-slide)::after {
  display: none;
}

.section-slide h1,
.section-slide h2,
.section-slide h3,
.inverse h1,
.inverse h2,
.inverse h3 { color: #ffffff; }

.section-slide h1,
.inverse h1 {
  border-bottom: 6px solid var(--ufcimg-secondary);
  display: inline-block;
  padding-bottom: 12px;
}

.section-slide blockquote,
.inverse blockquote {
  color: var(--ufcimg-dark);
}

/* Cabeçalho em faixa, compatível com class: header_background. */
.remark-slide-content.header_background {
  padding-top: 145px;
}

.remark-slide-content.header_background > h1 {
  background: var(--ufcimg-primary);
  color: #ffffff;
  left: 0;
  margin: 0;
  padding: 35px 64px 28px;
  position: absolute;
  right: 0;
  top: 8px;
}

/* Boxes inspirados nos componentes dos temas de referência. */
.question, .your-turn, .tip, .highlight {
  border-left: 7px solid;
  margin: 12px 0;
  padding: 10px 16px;
}

.question {
  background: var(--ufcimg-secondary-soft);
  border-color: var(--ufcimg-secondary);
}

.your-turn {
  background: var(--ufcimg-accent-soft);
  border-color: var(--ufcimg-accent);
}

.tip, .highlight {
  background: var(--ufcimg-primary-soft);
  border-color: var(--ufcimg-primary);
}

.accent-card {
  background: var(--ufcimg-accent);
  color: var(--ufcimg-dark);
  padding: 18px 22px;
}

.primary-card {
  background: var(--ufcimg-primary);
  color: #ffffff;
  padding: 18px 22px;
}

.secondary-card {
  background: var(--ufcimg-secondary);
  color: var(--ufcimg-primary);
  padding: 18px 22px;
}

/* Tabelas. */
.remark-slide table {
  border-collapse: collapse;
  margin: 20px auto;
  width: 100%;
}

.remark-slide th {
  background: var(--ufcimg-primary);
  color: #ffffff;
  font-family: var(--ufcimg-heading-font);
  font-weight: 600;
  text-align: left;
}

.remark-slide th,
.remark-slide td {
  border-bottom: 1px solid var(--ufcimg-rule);
  padding: 9px 12px;
}

.remark-slide tbody tr:nth-child(even) {
  background: var(--ufcimg-light);
}

/* Código. */
.remark-code, .remark-inline-code {
  font-family: var(--ufcimg-code-font);
}

.remark-code { font-size: 0.78em; }

.remark-inline-code {
  background: var(--ufcimg-primary-soft);
  color: var(--ufcimg-primary);
  padding: 0.08em 0.28em;
}

.remark-code-line-highlighted {
  background: rgba(242, 169, 5, 0.24);
}

/* Colunas e alinhamento. */
.pull-left { float: left; width: 47%; }
.pull-right { float: right; width: 47%; }
.pull-right ~ * { clear: both; }
.pull-left-wide { float: left; width: 68%; }
.pull-right-narrow { float: right; width: 28%; }
.pull-right-narrow ~ * { clear: both; }
.pull-left-narrow { float: left; width: 28%; }
.pull-right-wide { float: right; width: 68%; }
.pull-right-wide ~ * { clear: both; }
.center { text-align: center; }
.right { text-align: right; }

/* Escalas tipográficas utilitárias. */
.huge { font-size: 3.6em; font-weight: 700; }
.larger { font-size: 1.9em; }
.large { font-size: 1.35em; }
.midi { font-size: 0.9em; }
.small { font-size: 0.75em; }
.xsmall { font-size: 0.65em; }
.tiny { font-size: 0.52em; }
.primary { color: var(--ufcimg-primary); }
.secondary { color: #4f8f89; }
.accent { color: #c88700; }
.muted { color: var(--ufcimg-muted); }

/* Rodapé, paginação e barra de progresso. */
.footnote {
  bottom: 58px;
  color: var(--ufcimg-muted);
  font-size: 0.7em;
  position: absolute;
}

div.my-footer {
  border-top: 1px solid var(--ufcimg-rule);
  bottom: 0;
  height: 48px;
  left: 64px;
  position: absolute;
  right: 64px;
}

div.my-footer span {
  bottom: 13px;
  color: var(--ufcimg-muted);
  font-size: 0.65em;
  left: 0;
  position: absolute;
}

.remark-slide-number {
  bottom: 18px;
  color: var(--ufcimg-primary);
  font-size: 0.7em;
  opacity: 1;
  right: 24px;
}

.remark-slide-number .progress-bar-container {
  bottom: 0;
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
}

.remark-slide-number .progress-bar {
  background: var(--ufcimg-accent);
  height: 100%;
}

/* Classes de controle. */
.sem-logo::after, .no-logo::after { display: none; }
.sem-filete::before, .no-rule::before { display: none; }
.compact { font-size: 1.2rem; }
.dense { font-size: 1.05rem; }

@page { margin: 0; }

@media print {
  .remark-slide-scaler {
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    transform: scale(1) !important;
    width: 100% !important;
  }
}