/* ============================================================
   Template UEFS — RevealJS Slides
   Cores Oficiais UEFS - Padrão Cromático Manual de Marca
   Arquivo centralizado: aulas/assets/custom.css
   ============================================================ */

:root {
  --uefs-azul: #2135A6;           /* Azul Principal */
  --uefs-azul-profundo: #27368C; /* Azul Profundo */
  --uefs-azul-apoio: #586BA6;    /* Azul de Apoio */
  --uefs-fundo-claro: #F2F2F2;   /* Fundo Claro */
  --uefs-contraste: #0D0D0D;     /* Contraste Tipográfico */
  /* Aliases para compatibilidade */
  --uefs-amarelo: #586BA6;
  --uefs-vermelho: #27368C;
  --uefs-cinza-escuro: #0D0D0D;
  --uefs-cinza-claro: #F2F2F2;
}

/* ---- Title Slide (Capa) ---- */
.reveal .slides section.title-slide {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

#title-slide {
  background-color: var(--uefs-azul) !important;
  background-image: url('fundo.png') !important;
  background-size: auto 100% !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  height: 100% !important;
}

#title-slide::before {
  content: "";
  display: block;
  width: 300px;
  height: 100px;
  background-image: url('logo-uefs.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 2em;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}

#title-slide .title {
  font-size: 1.3em !important;
  color: white !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-weight: 700 !important;
  margin-bottom: 0.3em !important;
  line-height: 1.2 !important;
  text-shadow: 2px 2px 6px rgba(39, 54, 140, 0.45);
}

#title-slide .subtitle {
  font-size: 1.1em !important;
  color: white !important;
  margin-top: 0.3em !important;
  margin-bottom: 1.5em !important;
  font-weight: 500 !important;
  font-family: 'Ubuntu', sans-serif !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#title-slide .author,
#title-slide .institute {
  font-size: 1.1em !important;
  color: white !important;
  margin-top: -2em !important;
  margin-bottom: 1.5em !important;
  font-weight: 200 !important;
  font-family: 'Ubuntu', sans-serif !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}

/* Garantir que todos os elementos da capa sejam brancos */
.reveal .slides section.title-slide .author,
.reveal .slides section.title-slide .institute,
.reveal .slides section.title-slide .date,
.reveal .slides section.title-slide p,
.reveal .slides section.title-slide h1.author,
.reveal .slides section.title-slide h2.author,
.reveal .slides section.title-slide h3.author,
.reveal section.title-slide .author,
.reveal section.title-slide .institute,
.reveal section.title-slide .date,
section.title-slide .author,
section.title-slide .institute,
section.title-slide .date,
#title-slide p.author,
#title-slide p.institute,
#title-slide p.date,
#title-slide h1.author,
#title-slide h2.author,
#title-slide h3.author,
#title-slide h1.institute,
#title-slide h2.institute,
#title-slide h3.institute,
.title-slide .author,
.title-slide .institute,
.title-slide .date,
.reveal .slides .title-slide .author,
.reveal .slides .title-slide .institute,
.reveal .slides .title-slide .date {
  color: white !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.8em !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}

/* ---- Caixas e Destaques ---- */
.box {
  margin-top: 10px;
  margin-right: 10px;
  border: 3px solid var(--uefs-azul);
  padding: 15px;
  font-size: 0.9em;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: visible !important;
}

.info-box {
  margin-top: 10px;
  margin-right: 10px;
  border-left: 8px solid var(--uefs-azul);
  padding-left: 20px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: rgba(33, 53, 166, 0.08);
  border-radius: 5px;
  overflow: visible !important;
}

.highlight-box {
  background-color: rgba(88, 107, 166, 0.15);
  border-left: 5px solid var(--uefs-amarelo);
  padding: 10px 15px;
  margin: 10px 0;
  border-radius: 5px;
  overflow: visible !important;
}

/* Fórmulas e matemática: NUNCA gerar scroll/rolagem */
.reveal .math,
.reveal .MathJax,
.reveal .MathJax_Display,
.reveal .katex,
.reveal .katex-display,
.reveal mjx-container {
  overflow: visible !important;
  max-width: 100%;
}

.circle {
  border-radius: 50%;
  width: 1.3em;
  height: 1.3em;
  line-height: 1.3em;
  padding: 3px;
  display: inline-block;
  background: var(--uefs-amarelo);
  color: var(--uefs-azul);
  text-align: center;
  font-weight: bold;
  font-family: 'Ubuntu', sans-serif;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.section-header {
  background: linear-gradient(90deg, var(--uefs-azul) 0%, var(--uefs-vermelho) 100%);
  color: white;
  font-size: 0.5em;
  padding: 12px 24px;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  vertical-align: middle;
  display: inline-block;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---- Layout Helpers ---- */
.columns {
  display: flex;
  gap: 20px;
}

.column {
  flex: 1;
}

.fragment.highlight-current-green.visible.current-fragment {
  background-color: #c8e6c9;
}

.small-text {
  font-size: 0.8em;
}

.smaller-text {
  font-size: 0.7em;
}

/* ---- Reservar espaço para o rodapé fixo ---- */
.reveal .slides section {
  padding-bottom: 60px !important;
  box-sizing: border-box !important;
}

/* ---- Overflow: permitir scroll em slides com muito conteúdo ---- */
.reveal .slide-background + section,
.reveal .slides section.smaller-text,
.reveal .slides section.slide.level2 {
  overflow-y: auto !important;
}

/* ---- Scroll Container ---- */
.diagram-scroll {
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 2px solid var(--uefs-azul);
  padding: 15px;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.diagram-scroll::-webkit-scrollbar {
  width: 10px;
}

.diagram-scroll::-webkit-scrollbar-track {
  background: var(--uefs-cinza-claro);
  border-radius: 5px;
}

.diagram-scroll::-webkit-scrollbar-thumb {
  background: var(--uefs-azul);
  border-radius: 5px;
  border: 2px solid var(--uefs-cinza-claro);
}

.diagram-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--uefs-vermelho);
}

/* ---- Logo: ocultar o logo padrão do RevealJS ---- */
.reveal .slide-logo {
  display: none !important;
}

/* ---- Footer com branding UEFS ---- */
.reveal .footer {
  background-color: var(--uefs-azul) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 0.5em !important;
  font-weight: 500 !important;
  padding: 2px 10px !important;
  border-top: 1px solid var(--uefs-azul-profundo, #27368C) !important;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.1) !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 70px 1fr 70px !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 1000 !important;
  height: auto !important;
  min-height: 24px !important;
  max-height: 30px !important;
  overflow: hidden !important;
}

.reveal .footer::before {
  content: "";
  display: inline-block;
  width: 70px;
  height: 18px;
  background-image: url('logo-uefs.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/* ---- Slide Number (caixinha no rodapé) ---- */
.reveal .slide-number {
  position: fixed !important;
  top: auto !important;
  bottom: 3px !important;
  right: 15px !important;
  left: auto !important;
  background-color: var(--uefs-azul) !important;
  color: white !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  font-size: 0.55em !important;
  border-radius: 4px !important;
  z-index: 2000 !important;
}

/* ---- Slides de Seção (section-header) ---- */
.reveal .slides section.title-slide.slide:not(#title-slide) {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  left: auto !important;
  transform: none !important;
}

section.title-slide.slide.level1:has(.section-header) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 40px 40px !important;
  height: 100% !important;
}

section.title-slide.slide.level1:has(.section-header) h1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  margin-right: auto !important;
}

section.title-slide.slide.level1:has(.section-header) div {
  margin-top: auto !important;
  margin-bottom: 40px !important;
  flex-shrink: 0 !important;
}

/* ---- Slide "Obrigado" ---- */
.obrigado-fit-text {
  font-size: clamp(1em, 4vw, 3.5em) !important;
  line-height: 1.2 !important;
  font-weight: bold !important;
  display: block !important;
  margin: 0.5em 0 !important;
  text-align: center !important;
}

/* ============================================================
   RESPONSIVIDADE MOBILE
   Ajustes para dispositivos móveis e tablets
   ============================================================ */

/* ---- Viewport & Touch Optimization ---- */
@media (pointer: coarse) {
  /* Aumentar área de toque para controles de navegação */
  .reveal .controls button {
    width: 60px !important;
    height: 60px !important;
  }
  
  /* Links e botões mais fáceis de tocar */
  .reveal a,
  .reveal .footer a {
    padding: 4px 2px;
  }
}

/* ---- Smartphones em Retrato (até 480px) ---- */
@media screen and (max-width: 480px) {
  .reveal .slides {
    font-size: 0.55em !important;
  }
  
  .reveal h1 { font-size: 1.4em !important; }
  .reveal h2 { font-size: 1.2em !important; }
  .reveal h3 { font-size: 1.05em !important; }
  
  /* Colunas empilhadas verticalmente */
  .reveal .columns,
  .columns {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .reveal .columns .column,
  .columns .column {
    flex: none !important;
    width: 100% !important;
  }
  
  /* Capa */
  #title-slide::before {
    width: 150px !important;
    height: 50px !important;
    margin-bottom: 1em !important;
  }
  
  #title-slide .title {
    font-size: 0.9em !important;
    padding: 0 10px !important;
  }
  
  #title-slide .subtitle {
    font-size: 0.7em !important;
    padding: 0 10px !important;
  }
  
  #title-slide .author,
  #title-slide .institute {
    font-size: 0.65em !important;
  }
  
  /* Boxes e destaques */
  .box, .info-box, .highlight-box {
    padding: 8px 10px !important;
    margin: 5px 0 !important;
    font-size: 0.85em !important;
  }
  
  /* Tabelas responsivas */
  .reveal table {
    font-size: 0.65em !important;
  }

  .reveal table:not(.diagram-scroll table) {
    display: table;
    width: 100%;
    overflow: visible;
  }
  
  /* Footer compacto */
  .reveal .footer {
    font-size: 0.35em !important;
    min-height: 22px !important;
    padding: 2px 5px !important;
    grid-template-columns: 40px 1fr 40px !important;
  }
  
  .reveal .footer::before {
    width: 40px !important;
    height: 16px !important;
  }
  
  /* Controles de navegação */
  .reveal .controls {
    bottom: 28px !important;
  }
  
  /* Número do slide */
  .reveal .slide-number {
    font-size: 0.45em !important;
    padding: 2px 5px !important;
    bottom: 3px !important;
    right: 8px !important;
  }
  
  /* Imagens: respeitar o container */
  .reveal img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Diagrama scroll */
  .diagram-scroll {
    max-height: 300px !important;
    padding: 8px !important;
  }
  
  /* Section header */
  .section-header {
    font-size: 0.4em !important;
    padding: 8px 16px !important;
  }
  
  /* Circle icons */
  .circle {
    width: 1em !important;
    height: 1em !important;
    line-height: 1em !important;
    font-size: 0.85em !important;
  }
}

/* ---- Smartphones em Paisagem e Tablets pequenos (481px–768px) ---- */
@media screen and (max-width: 768px) and (min-width: 481px) {
  .reveal .slides {
    font-size: 0.7em !important;
  }
  
  .reveal h1 { font-size: 1.6em !important; }
  .reveal h2 { font-size: 1.3em !important; }
  .reveal h3 { font-size: 1.1em !important; }
  
  /* Colunas: empilhar se muito estreitas */
  .reveal .columns,
  .columns {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  
  .reveal .columns .column,
  .columns .column {
    min-width: 45% !important;
  }
  
  /* Capa */
  #title-slide::before {
    width: 200px !important;
    height: 70px !important;
    margin-bottom: 1.5em !important;
  }
  
  #title-slide .title {
    font-size: 1.1em !important;
  }
  
  #title-slide .subtitle {
    font-size: 0.85em !important;
  }
  
  /* Boxes */
  .box, .info-box, .highlight-box {
    padding: 10px 12px !important;
  }
  
  /* Tabelas */
  .reveal table {
    font-size: 0.75em !important;
  }

  .reveal table:not(.diagram-scroll table) {
    display: table;
    width: 100%;
    overflow: visible;
  }
  
  /* Footer */
  .reveal .footer {
    font-size: 0.4em !important;
    grid-template-columns: 50px 1fr 50px !important;
  }
  
  .reveal .footer::before {
    width: 50px !important;
    height: 18px !important;
  }
  
  /* Imagens */
  .reveal img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Diagrama scroll */
  .diagram-scroll {
    max-height: 400px !important;
  }
}

/* ---- Tablets (769px–1024px) ---- */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .reveal .slides {
    font-size: 0.85em !important;
  }
  
  /* Colunas adaptáveis */
  .reveal .columns,
  .columns {
    flex-wrap: wrap !important;
  }
  
  /* Tabelas */
  .reveal table {
    font-size: 0.8em !important;
  }

  .reveal table:not(.diagram-scroll table) {
    display: table;
    width: 100%;
    overflow: visible;
  }
  
  /* Footer */
  .reveal .footer {
    font-size: 0.45em !important;
    grid-template-columns: 60px 1fr 60px !important;
  }
  
  /* Imagens */
  .reveal img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ---- Melhorias gerais mobile (qualquer tela < 1280px) ---- */
@media screen and (max-width: 1279px) {
  /* Scroll suave em conteúdo longo */
  .reveal .slides section {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Garantir que código não transborde */
  .reveal pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    font-size: 0.85em !important;
  }
  
  .reveal pre code {
    max-width: 100% !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
  }
  
  /* MathJax/KaTeX: nunca esconder fórmulas em scroll */
  .reveal .math,
  .reveal .MathJax,
  .reveal .MathJax_Display,
  .reveal .katex,
  .reveal .katex-display,
  .reveal mjx-container {
    overflow: visible !important;
    max-width: 100% !important;
  }

  /* Caixas nunca devem cortar conteúdo */
  .box, .info-box, .highlight-box {
    overflow: visible !important;
  }
  
  /* Callouts responsivos */
  .reveal .callout {
    padding: 8px 12px !important;
    margin: 5px 0 !important;
  }
  
  /* Garantir que iframes/embeds sejam responsivos */
  .reveal iframe {
    max-width: 100% !important;
  }
}

/* ---- Linha de avaliação (sinalização suave) ---- */
.reveal table tr.avaliacao-row {
  background-color: rgba(33, 53, 166, 0.10) !important;
}
.reveal table.table-striped tr.avaliacao-row:nth-child(even),
.reveal table.table-striped tr.avaliacao-row:nth-child(odd) {
  background-color: rgba(33, 53, 166, 0.10) !important;
}

/* ---- Barra de Progresso Superior ---- */
#slide-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  width: 0%;
  background: linear-gradient(90deg, var(--uefs-azul-apoio, #586BA6) 0%, var(--uefs-azul-profundo, #27368C) 50%, var(--uefs-azul, #2135A6) 100%);
  z-index: 9999;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

#slide-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: var(--uefs-fundo-claro, #F2F2F2);
  z-index: 9998;
}