/* ==========================================================================
   Tema e Estilos da Apresentação - Transformações Geométricas 2D (Parte 2)
   Fidelidade ao LaTeX Beamer (Tema Warsaw) com suporte a Tema Claro e Escuro
   Zoom de Fontes Dinâmico, KaTeX e Módulos Interativos Canvas 2D
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ==========================================================================
   Variáveis de Cores e Temas
   ========================================================================== */

:root {
  --font-zoom: 1;
}

/* Tema Claro (Padrão LaTeX Beamer Warsaw Oficial) */
body.theme-light {
  --bg-page: #f0f4f9;
  --bg-slide: #ffffff;
  --bg-headline-top: #0a192f;
  --bg-headline-bot: #142c54;
  --bg-footline: #0d1e3a;
  --text-headline: #ffffff;
  --text-headline-muted: #9bb7e0;
  
  --title-gradient-start: #003366;
  --title-gradient-end: #1e3a8a;
  --title-text: #ffffff;
  
  --text-main: #1e293b;
  --text-muted: #475569;
  --text-dim: #64748b;
  
  /* Blocos Beamer Oficiais */
  --block-def-head-bg: linear-gradient(90deg, #003366 0%, #1e3a8a 100%);
  --block-def-head-text: #ffffff;
  --block-def-body-bg: #edf4fc;
  --block-def-border: #99bde8;
  
  --block-ex-head-bg: linear-gradient(90deg, #1b5e20 0%, #2e7d32 100%);
  --block-ex-head-text: #ffffff;
  --block-ex-body-bg: #eaf6ef;
  --block-ex-border: #9dd4b4;
  
  --block-alert-head-bg: linear-gradient(90deg, #88181e 0%, #b71c1c 100%);
  --block-alert-head-text: #ffffff;
  --block-alert-body-bg: #faebed;
  --block-alert-border: #f1a9af;
  
  /* Canvas e Demonstrações */
  --canvas-bg: #ffffff;
  --canvas-border: #cbd5e1;
  --canvas-card-bg: #f8fafc;
  --canvas-ctrl-bg: #edf2f9;
  --code-bg: #0f172a;
  --code-text: #f8fafc;
  
  --math-box-bg: #f1f5f9;
  --math-box-border: #cbd5e1;
  --math-box-hl-bg: #e0f2fe;
  --math-box-hl-border: #38bdf8;
  
  --table-head-bg: #003366;
  --table-head-text: #ffffff;
  --table-border: #cbd5e1;
  --table-row-hover: #f1f5f9;
}

/* Tema Escuro (Warsaw Modern Dark Tech) */
body.theme-dark {
  --bg-page: #050914;
  --bg-slide: #0b1220;
  --bg-headline-top: #050c1b;
  --bg-headline-bot: #0e1b36;
  --bg-footline: #060d1d;
  --text-headline: #e2e8f0;
  --text-headline-muted: #738db3;
  
  --title-gradient-start: #172554;
  --title-gradient-end: #1e3a8a;
  --title-text: #ffffff;
  
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  
  /* Blocos Beamer Oficiais */
  --block-def-head-bg: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%);
  --block-def-head-text: #ffffff;
  --block-def-body-bg: rgba(30, 58, 138, 0.22);
  --block-def-border: rgba(59, 130, 246, 0.45);
  
  --block-ex-head-bg: linear-gradient(90deg, #065f46 0%, #059669 100%);
  --block-ex-head-text: #ffffff;
  --block-ex-body-bg: rgba(6, 95, 70, 0.22);
  --block-ex-border: rgba(16, 185, 129, 0.45);
  
  --block-alert-head-bg: linear-gradient(90deg, #881337 0%, #e11d48 100%);
  --block-alert-head-text: #ffffff;
  --block-alert-body-bg: rgba(136, 19, 55, 0.22);
  --block-alert-border: rgba(244, 63, 94, 0.45);
  
  /* Canvas e Demonstrações */
  --canvas-bg: #070d1a;
  --canvas-border: rgba(99, 140, 255, 0.25);
  --canvas-card-bg: #0e172a;
  --canvas-ctrl-bg: #131e35;
  --code-bg: #070c18;
  --code-text: #e2e8f0;
  
  --math-box-bg: rgba(15, 23, 42, 0.75);
  --math-box-border: rgba(96, 165, 250, 0.28);
  --math-box-hl-bg: rgba(14, 116, 144, 0.28);
  --math-box-hl-border: #38bdf8;
  
  --table-head-bg: #172554;
  --table-head-text: #60a5fa;
  --table-border: rgba(255, 255, 255, 0.12);
  --table-row-hover: rgba(59, 130, 246, 0.12);
}

/* ---------------- Global Reset & Typography ---------------- */
* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-main);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ---------------- Warsaw Headline (Cabeçalho duplo Beamer) ---------------- */
.warsaw-headline {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  font-size: 0.78rem;
  font-weight: 500;
  user-select: none;
}

.headline-section-row {
  background: var(--bg-headline-top);
  color: var(--text-headline);
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.headline-left-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-back-link {
  color: #93c5fd;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(147, 197, 253, 0.3);
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
}

.nav-back-link:hover {
  background: rgba(147, 197, 253, 0.25);
  color: #ffffff;
}

.headline-section-nav {
  display: flex;
  gap: 14px;
}

.headline-section-nav span {
  color: var(--text-headline-muted);
  cursor: pointer;
  font-size: 0.73rem;
  transition: color 0.15s;
}

.headline-section-nav span:hover {
  color: #ffffff;
}

.headline-section-nav span.active {
  color: #60a5fa;
  font-weight: 700;
}

.headline-right-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Controle de Zoom de Fonte */
.font-zoom-group {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  overflow: hidden;
}

.font-zoom-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  padding: 1px 6px;
  font-size: 0.70rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.font-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.font-zoom-label {
  padding: 1px 6px;
  font-size: 0.68rem;
  font-family: 'Fira Code', monospace;
  color: #93c5fd;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 44px;
  text-align: center;
}

.nav-pdf-btn {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.70rem;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-pdf-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #ffffff;
}

.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 0.70rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.headline-subsection-row {
  background: var(--bg-headline-bot);
  color: var(--text-headline);
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 0.73rem;
}

/* ---------------- Warsaw Footline (Rodapé Beamer) ---------------- */
.warsaw-footline {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: var(--bg-footline);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 0.70rem;
  z-index: 100;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
}

.footline-author {
  color: #e2e8f0;
  font-weight: 600;
}

.footline-keys {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footline-keys kbd {
  background: rgba(255, 255, 255, 0.12);
  color: #93c5fd;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Fira Code', monospace;
  font-size: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ---------------- Reveal.js Overrides (Proporção 4:3) ---------------- */
.reveal {
  background: var(--bg-slide);
  color: var(--text-main);
  font-size: calc(21px * var(--font-zoom, 1));
}

.reveal .slides {
  text-align: left;
}

.reveal .slides section {
  padding: 46px 24px 28px 24px !important;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ---------------- Frame Title (Estilo Beamer Warsaw Oficial) ---------------- */
.frame-title-banner {
  background: linear-gradient(90deg, var(--title-gradient-start) 0%, var(--title-gradient-end) 100%);
  color: var(--title-text);
  padding: 7px 14px;
  border-radius: 5px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.frame-title-banner h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: calc(1.35rem * var(--font-zoom, 1));
  font-weight: 700;
  margin: 0;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.frame-title-banner .section-badge {
  font-size: calc(0.72rem * var(--font-zoom, 1));
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ---------------- Beamer Blocks Oficiais (Def, Example, Alert) ---------------- */
.beamer-block {
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.10);
  border: 1px solid transparent;
  flex-shrink: 0;
}

.beamer-block .block-header {
  padding: 5px 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: calc(0.88rem * var(--font-zoom, 1));
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.beamer-block .block-body {
  padding: 9px 12px;
  font-size: calc(0.85rem * var(--font-zoom, 1));
  line-height: 1.45;
}

/* Bloco Padrão / Definição (Azul Marinho Beamer Warsaw) */
.beamer-block.def {
  border-color: var(--block-def-border);
}
.beamer-block.def .block-header {
  background: var(--block-def-head-bg);
  color: var(--block-def-head-text);
}
.beamer-block.def .block-body {
  background: var(--block-def-body-bg);
  color: var(--text-main);
}

/* Bloco Exemplo (Verde Floresta Beamer Warsaw) */
.beamer-block.example {
  border-color: var(--block-ex-border);
}
.beamer-block.example .block-header {
  background: var(--block-ex-head-bg);
  color: var(--block-ex-head-text);
}
.beamer-block.example .block-body {
  background: var(--block-ex-body-bg);
  color: var(--text-main);
}

/* Bloco Alerta (Carmesim Beamer Warsaw) */
.beamer-block.alert {
  border-color: var(--block-alert-border);
}
.beamer-block.alert .block-header {
  background: var(--block-alert-head-bg);
  color: var(--block-alert-head-text);
}
.beamer-block.alert .block-body {
  background: var(--block-alert-body-bg);
  color: var(--text-main);
}

/* ---------------- Layout de Colunas ---------------- */
.two-cols {
  display: flex;
  gap: 16px;
  width: 100%;
  align-items: flex-start;
  flex: 1;
}

.two-cols.ratio-5-5 > .col { flex: 1; min-width: 0; }
.two-cols.ratio-6-4 > .col:first-child { flex: 6; min-width: 0; }
.two-cols.ratio-6-4 > .col:last-child { flex: 4; min-width: 0; }
.two-cols.ratio-4-6 > .col:first-child { flex: 4; min-width: 0; }
.two-cols.ratio-4-6 > .col:last-child { flex: 6; min-width: 0; }
.two-cols.ratio-7-3 > .col:first-child { flex: 7; min-width: 0; }
.two-cols.ratio-7-3 > .col:last-child { flex: 3; min-width: 0; }

.col {
  display: flex;
  flex-direction: column;
}

/* ---------------- Hero / Capa ---------------- */
.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  gap: 16px;
}

.hero-box {
  background: linear-gradient(135deg, #003366 0%, #1e3a8a 100%);
  color: #ffffff;
  padding: 26px 36px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 51, 102, 0.35);
  max-width: 820px;
  width: 100%;
}

.hero-box h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: calc(1.85rem * var(--font-zoom, 1));
  font-weight: 800;
  margin: 0 0 10px 0;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.hero-box h2 {
  font-size: calc(1.05rem * var(--font-zoom, 1));
  font-weight: 400;
  margin: 0;
  color: #93c5fd;
  line-height: 1.4;
}

.hero-author-card {
  background: var(--canvas-card-bg);
  border: 1px solid var(--canvas-border);
  padding: 14px 28px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.hero-author-card p {
  margin: 4px 0;
  font-size: calc(0.86rem * var(--font-zoom, 1));
}

/* ---------------- Sumário / TOC ---------------- */
.toc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.toc-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--canvas-card-bg);
  border: 1px solid var(--canvas-border);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: calc(0.92rem * var(--font-zoom, 1));
}

.toc-item:hover {
  background: var(--math-box-hl-bg);
  border-color: var(--math-box-hl-border);
  transform: translateX(6px);
}

.toc-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--title-gradient-start);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.88rem;
  flex-shrink: 0;
}

/* ---------------- Listas Estilizadas ---------------- */
.styled-list {
  margin: 6px 0 10px 0;
  padding-left: 20px;
  font-size: calc(0.86rem * var(--font-zoom, 1));
  line-height: 1.5;
}

.styled-list li {
  margin-bottom: 5px;
}

/* ---------------- Math Boxes & Detalhes KaTeX ---------------- */
.math-box {
  background: var(--math-box-bg);
  border: 1px solid var(--math-box-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 6px 0;
  font-size: calc(0.85rem * var(--font-zoom, 1));
}

.math-box-hl {
  background: var(--math-box-hl-bg);
  border: 1px solid var(--math-box-hl-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 6px 0;
  font-weight: 500;
  font-size: calc(0.86rem * var(--font-zoom, 1));
}

/* ---------------- Tabelas ---------------- */
.beamer-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: calc(0.82rem * var(--font-zoom, 1));
  border: 1px solid var(--table-border);
  border-radius: 6px;
  overflow: hidden;
}

.beamer-table th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  padding: 7px 10px;
  text-align: center;
  font-weight: 700;
}

.beamer-table td {
  padding: 6px 10px;
  border-top: 1px solid var(--table-border);
  text-align: center;
}

.beamer-table tr:hover {
  background: var(--table-row-hover);
}

/* ---------------- Canvas Cards & Interactive Demos ---------------- */
.canvas-card {
  background: var(--canvas-card-bg);
  border: 1px solid var(--canvas-border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.canvas-card canvas {
  background: var(--canvas-bg);
  border-radius: 6px;
  border: 1px solid var(--canvas-border);
  display: block;
}

.interactive-controls {
  background: var(--canvas-ctrl-bg);
  border: 1px solid var(--canvas-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: calc(0.78rem * var(--font-zoom, 1));
}

.ctrl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ctrl-row label {
  font-weight: 600;
  color: var(--text-main);
  min-width: 80px;
  font-size: calc(0.76rem * var(--font-zoom, 1));
}

.ctrl-row input[type="range"] {
  flex: 1;
  accent-color: #003366;
  cursor: pointer;
}

.ctrl-val {
  font-family: 'Fira Code', monospace;
  font-size: calc(0.76rem * var(--font-zoom, 1));
  font-weight: 600;
  min-width: 44px;
  text-align: right;
  color: #2563eb;
}

.btn-group {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.btn {
  background: linear-gradient(90deg, #003366 0%, #1e3a8a 100%);
  color: #ffffff;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: calc(0.76rem * var(--font-zoom, 1));
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--canvas-card-bg);
  color: var(--text-main);
  border: 1px solid var(--canvas-border);
}

.btn-secondary:hover {
  background: var(--table-row-hover);
}

.btn-sm {
  padding: 3px 8px;
  font-size: calc(0.72rem * var(--font-zoom, 1));
}

/* Botão de passo ativo */
.step-pill {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: calc(0.72rem * var(--font-zoom, 1));
  font-weight: 700;
  background: rgba(0, 51, 102, 0.12);
  color: #003366;
  border: 1px solid rgba(0, 51, 102, 0.25);
  cursor: pointer;
}

.step-pill.active {
  background: #003366;
  color: #ffffff;
}

/* Diagrama de 4 passos inline */
.four-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 6px 0;
  width: 100%;
}

.step-box {
  background: var(--canvas-card-bg);
  border: 1px solid var(--canvas-border);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step-box canvas {
  background: var(--canvas-bg);
  border: 1px solid var(--canvas-border);
  border-radius: 4px;
  margin-bottom: 4px;
}

.step-box .step-title {
  font-size: calc(0.72rem * var(--font-zoom, 1));
  font-weight: 700;
  color: #003366;
}

.step-box .step-desc {
  font-size: calc(0.66rem * var(--font-zoom, 1));
  color: var(--text-muted);
  line-height: 1.25;
}

/* Playground Stack */
.stack-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 170px;
  overflow-y: auto;
  padding: 2px;
}

.stack-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--canvas-card-bg);
  border: 1px solid var(--canvas-border);
  border-radius: 4px;
  font-size: calc(0.72rem * var(--font-zoom, 1));
}

.stack-item.order-badge {
  font-weight: 800;
  color: #2563eb;
}