/* ==========================================================================
   Modo Apresentação — padrão Peers, reutilizável em qualquer página de
   relatório (report.css). O script assets/js/presentation-mode.js reaproveita
   as .report-section já existentes no DOM como slides -- nenhuma marcação
   extra é necessária por página além do botão (ver .report-header__present-btn
   em report.css) e destes dois includes.
   ========================================================================== */

.pmode-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  background-color: #0b1220;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
}

.pmode-overlay.is-active {
  display: flex;
}

body.pmode-open {
  overflow: hidden;
}

.pmode-topbar {
  flex: 0 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  background: #0b1220;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pmode-topbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #eaf0fa;
  font-size: 0.82rem;
  min-width: 0;
}

.pmode-brand {
  font-family: var(--font-secondary);
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--peers-lime);
  background: rgba(225, 255, 0, 0.12);
  padding: 4px 9px;
  border-radius: 6px;
  flex-shrink: 0;
}

.pmode-topbar__title {
  color: #c7d2e6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pmode-topbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pmode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #eaf0fa;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: var(--font-primary);
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pmode-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.pmode-counter {
  color: #8c9ab8;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
}

.pmode-progress {
  flex: 0 0 auto;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.pmode-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--peers-blue-02), var(--peers-lime));
  transition: width 0.3s ease;
}

.pmode-stage-viewport {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.2vh, 24px);
  box-sizing: border-box;
}

.pmode-stage {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--peers-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  padding: clamp(10px, 2.2vh, 24px);
  box-sizing: border-box;
}

/* Dentro do palco, a .report-section perde o "card" que tem no modo
   documento normal (o próprio palco já cumpre esse papel) e vira slide. */
.pmode-stage .report-section {
  display: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.pmode-stage .report-section.pmode-active-slide {
  display: block;
  animation: pmode-fade-in 0.25s ease;
}

@keyframes pmode-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pmode-stage .report-section h2 {
  font-size: clamp(1.05rem, 2.8vh, 1.9rem);
  margin-bottom: clamp(4px, 0.8vh, 6px);
}

.pmode-stage .report-section__present-btn {
  display: none;
}

/* ==========================================================================
   Cards de vertical (.bs-vertical-card) — modo executivo/interativo/comercial.
   Tela inicial fica só com título + headline + resumo (o "insight" de cada
   vertical); detalhe completo + fonte vivem num pop-up (ver .pmode-modal
   abaixo), aberto ao clicar no card. Os nós de detalhe/fonte são movidos
   -- não clonados -- para dentro do pop-up e devolvidos ao fechar, então
   nenhum dado é duplicado, removido ou alterado -- só reorganizado em
   camadas de interação.
   ========================================================================== */

.pmode-stage .bs-arch-head {
  padding: clamp(4px, 0.8vh, 6px) 14px;
  background: var(--grey-50);
  border-radius: var(--radius-md);
  margin-bottom: 0;
}

/* A seção ativa (e só ela -- daí o .pmode-active-slide no seletor, não
   .report-section sozinho) vira flex column para permitir reordenar os
   blocos com `order` sem tocar no DOM/conteúdo. Sem o .pmode-active-slide
   aqui, esta regra ganharia (mesma especificidade, mais recente no
   arquivo) da regra que esconde os slides inativos com display:none lá
   em cima -- e todas as seções ficariam visíveis ao mesmo tempo,
   empilhadas, dando a impressão de que as setas do teclado "não
   funcionam" (o slide já estava todo visível, então trocar de índice
   não mudava nada na tela). */
.pmode-stage .report-section.pmode-active-slide {
  display: flex;
  flex-direction: column;
  /* Sem isso a seção só cresce até a altura do próprio conteúdo, e o
     flex-grow da grade (mais abaixo) não teria espaço sobrando pra
     ocupar -- os cards ficariam grudados no topo do slide, com um vão
     morto entre eles e a borda inferior do palco. */
  min-height: 100%;
}

/* Visão executiva (mensagem-síntese) é a 1ª coisa lida, logo abaixo do
   cabeçalho -- ver .bs-exec-view em blueprint-sistemico.css (oculta por
   padrão fora do modo apresentação). */
.pmode-stage .bs-exec-view {
  display: block;
  order: 1;
  margin: clamp(2px, 0.6vh, 4px) 0 clamp(6px, 1.2vh, 8px);
  padding: clamp(8px, 1.6vh, 10px) 16px;
  background: linear-gradient(135deg, var(--peers-blue), #0b2559);
  border-left: 4px solid var(--peers-lime);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px rgba(1, 19, 52, 0.22);
}

.pmode-stage .bs-exec-view__eyebrow {
  margin-bottom: clamp(2px, 0.5vh, 4px);
}

.pmode-stage .bs-exec-view__message {
  font-size: clamp(0.8rem, 1.9vh, 1.05rem);
  line-height: 1.35;
  margin-bottom: clamp(4px, 0.8vh, 6px);
}

/* A nota técnica original (.bs-arch-note) permanece intacta e sempre
   visível no relatório em modo documento; no modo apresentação, sem
   botão próprio (removido), ela fica oculta para maximizar o espaço
   disponível para os cards no slide. */
.pmode-stage .report-section .bs-arch-note {
  display: none;
}

/* .bs-connections agora vive dentro da Visão Executiva, atrás do botão
   "Integrações mapeadas" -- some da tela principal por padrão (menos
   poluição visual) e só aparece com .is-open, como um cartão claro
   flutuando sobre o fundo escuro do banner. */
.pmode-stage .bs-connections {
  display: none;
  margin-top: 10px;
  padding: 12px 16px;
  background: var(--peers-white);
  border-radius: var(--radius-md);
}

.pmode-stage .bs-connections.is-open {
  display: block;
  animation: pmode-card-in 0.2s ease;
}

.pmode-stage .bs-connections__chip {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.pmode-stage .bs-connections__chip:hover {
  background: var(--peers-blue);
  border-color: var(--peers-blue);
  border-style: solid;
  color: var(--peers-white);
  transform: translateY(-1px);
}

.pmode-stage .report-section .bs-vertical-grid {
  order: 4;
  /* Cresce para ocupar todo o espaço vertical que sobra no slide (livre
     desde que o diagrama de conexões saiu da tela principal) e centraliza
     as linhas nesse espaço -- em vez de deixar vazio embaixo, cards maiores
     e mais espaçados preenchem melhor a área disponível. */
  flex: 1 1 auto;
  align-content: center;
}

.pmode-stage .report-section > .bs-vertical-card__source {
  order: 5;
  margin-top: 6px;
  padding-top: 4px;
  font-size: 0.68rem;
  opacity: 0.7;
}

/* Colunas fixas (não auto-fill): a seção tem sempre 12 verticais, então
   travar em 6 colunas garante sempre 2 linhas -- em telas mais estreitas
   (ex. notebook 1366px) auto-fill formava só 5 colunas e uma 3ª linha
   extra, estourando a altura do slide. A largura de cada card se ajusta
   ao espaço disponível (1fr); quem se adapta à tela é o padding/fonte
   abaixo, via clamp() com vh, não o número de colunas. */
/* Comportamento (hover, pop-up, hierarquia) já é o padrão global -- ver
   .bs-vertical-card em blueprint-sistemico.css. Aqui só entram os
   ajustes que fazem sentido só num slide de tela cheia: grade travada
   em 6 colunas (a seção tem sempre 12 verticais -- em auto-fill, telas
   mais estreitas como notebook 1366px formavam só 5 colunas e uma 3ª
   linha extra, estourando a altura do slide) e tamanhos via clamp()
   com vh, que encolhem/crescem com a altura real da tela em vez de
   ficarem fixos como no corpo do site. */
.pmode-stage .bs-vertical-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1.8vh, 22px);
}

.pmode-stage .bs-vertical-card {
  padding: clamp(8px, 1.8vh, 26px) 34px clamp(8px, 1.6vh, 24px) 18px;
  animation: pmode-card-in 0.35s ease both;
}

.pmode-stage .bs-vertical-card__title {
  font-size: clamp(0.88rem, 2.1vh, 1.4rem);
  margin-bottom: clamp(3px, 0.7vh, 8px);
}

.pmode-stage .bs-vertical-card__main {
  font-size: clamp(0.68rem, 1.5vh, 0.95rem);
  margin-bottom: clamp(4px, 0.9vh, 10px);
}

.pmode-stage .bs-vertical-card__summary {
  font-size: clamp(0.68rem, 1.5vh, 0.95rem);
}

.pmode-stage .bs-vertical-card__summary::after {
  margin-top: clamp(4px, 1vh, 14px);
  font-size: clamp(0.6rem, 1.3vh, 0.8rem);
}

.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(1) { animation-delay: 0.02s; }
.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(2) { animation-delay: 0.05s; }
.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(3) { animation-delay: 0.08s; }
.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(4) { animation-delay: 0.11s; }
.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(5) { animation-delay: 0.14s; }
.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(6) { animation-delay: 0.17s; }
.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(7) { animation-delay: 0.20s; }
.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(8) { animation-delay: 0.23s; }
.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(9) { animation-delay: 0.26s; }
.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(10) { animation-delay: 0.29s; }
.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(11) { animation-delay: 0.32s; }
.pmode-stage .bs-vertical-grid .bs-vertical-card:nth-child(12) { animation-delay: 0.35s; }

@keyframes pmode-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Pop-up de detalhe ----------
   Anexado direto no <body> (presentation-mode.js) -- funciona tanto no
   corpo normal do site quanto dentro do modo apresentação, por isso
   position:fixed (não relativo ao palco) e z-index acima do
   .pmode-overlay (9999), pra ficar por cima nos dois contextos. */

.pmode-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.pmode-modal.is-open {
  display: flex;
}

.pmode-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 19, 52, 0.45);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.pmode-modal.is-open .pmode-modal__backdrop {
  opacity: 1;
}

.pmode-modal__panel {
  position: relative;
  width: min(640px, 92%);
  max-height: 82%;
  overflow-y: auto;
  background: var(--peers-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(1, 19, 52, 0.35);
  padding: 30px 32px 26px;
  box-sizing: border-box;
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease;
}

.pmode-modal.is-open .pmode-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.pmode-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--grey-100);
  color: var(--grey-600);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.pmode-modal__close:hover {
  background: var(--peers-blue);
  color: var(--peers-white);
  transform: rotate(90deg);
}

.pmode-modal__tag {
  display: none;
  margin-bottom: 10px;
}

.pmode-modal__eyebrow {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin: 0 0 4px;
}

.pmode-modal__title {
  font-family: var(--font-secondary);
  font-size: 1.3rem;
  color: var(--peers-blue);
  margin: 0 0 16px;
  padding-right: 24px;
  line-height: 1.3;
}

.pmode-modal__body .bs-vertical-card__detail p {
  margin-top: 0;
}

.pmode-modal__body .bs-vertical-card__source {
  border-top: 1px dashed var(--grey-300);
}

.pmode-modal__body .bs-auto-detail {
  display: block;
}

/* Parágrafo-síntese (o "achado" em si), quando movido pro pop-up junto
   com o resto do detalhe -- ver openAutoModal() -- fica em destaque, à
   frente de Evidência/Recomendação/Status. */
.pmode-modal__body > p[data-pmode-lead-para] {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--peers-blue);
  line-height: 1.5;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--grey-300);
}

.pmode-modal__body .bs-auto-detail p:last-child {
  margin-bottom: 0;
}

@media (max-width: 620px) {
  .pmode-modal__panel {
    width: 94%;
    max-height: 88%;
    padding: 24px 20px 20px;
  }
}

.pmode-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #eaf0fa;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.pmode-nav-arrow:hover {
  background: rgba(255, 255, 255, 0.18);
}

.pmode-nav-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.pmode-nav-prev {
  left: var(--space-3);
}

.pmode-nav-next {
  right: var(--space-3);
}

.pmode-hint {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-2);
  color: #5c6b8a;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  z-index: 5;
}

/* ==========================================================================
   Matriz por Vertical (#matriz-vertical) — modo executivo/interativo.
   A Visão Executiva (mensagem já existente, ver .bs-exec-view acima)
   substitui o lead original enquanto apresenta; a tabela perde a cara
   de planilha (sem grade de bordas, linha inteira em destaque no
   hover para comparar Bel × Mundo) e cada célula mostra só a tag do
   sistema estruturante + o insight principal -- o resto vai para um
   pop-up (mesmo .pmode-modal usado pelos cards), sem perder nenhum
   texto original.
   ========================================================================== */

.pmode-stage #matriz-vertical .report-table-wrap {
  order: 2;
}

/* Comportamento (hover de linha, pop-up, pills) já é global -- ver
   .report-table e .bs-matrix-cell em blueprint-sistemico.css. Aqui só
   entram tamanhos via clamp() com vh, pra a tabela de 13 linhas caber
   melhor num slide de tela cheia. */
.pmode-stage #matriz-vertical .report-table {
  font-size: clamp(0.74rem, 1.5vh, 0.86rem);
}

.pmode-stage #matriz-vertical .report-table th,
.pmode-stage #matriz-vertical .report-table td {
  padding: clamp(6px, 1vh, 10px) 16px;
}

.pmode-stage #matriz-vertical .bs-matrix-cell__tag {
  margin-bottom: 3px;
}

.pmode-stage #matriz-vertical .bs-matrix-cell__insight {
  margin-bottom: 0;
}

.pmode-stage #matriz-vertical .report-table td:first-child {
  font-size: clamp(0.72rem, 1.4vh, 0.82rem);
}

.pmode-stage #matriz-vertical .bs-matrix-cell__more {
  font-size: clamp(0.64rem, 1.2vh, 0.72rem);
}

/* ==========================================================================
   Riscos Críticos (#riscos) — modo executivo/interativo. Tela inicial fica
   só com criticidade + framework (2º plano) + título -- o parágrafo-
   síntese some da face do card (só nesta tela; no modo documento normal
   continua visível) e entra no pop-up junto com Evidência/Recomendação/
   Status (ver openAutoModal/.pmode-modal__body em presentation-mode.js --
   nada é clonado ou perdido, só movido). Fundo dos cards é sempre branco;
   a única marca de criticidade é a faixa lateral colorida. Os 35 cards
   são ordenados por criticidade via `order` (Alta > Média > Resolvido) --
   puramente visual em CSS Grid, não mexe no DOM nem na ordem do modo
   documento normal. */
.pmode-stage .bs-risk-summary {
  order: 1;
  margin-bottom: clamp(6px, 1.2vh, 14px);
}

.pmode-stage .bs-risk-grid {
  order: 2;
  flex: 1 1 auto;
  align-content: flex-start;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(8px, 1.2vh, 14px);
}

.pmode-stage .bs-risk-card {
  padding: clamp(8px, 1.3vh, 13px) 13px;
  animation: pmode-card-in 0.3s ease both;
}

.pmode-stage .bs-risk-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

.pmode-stage .bs-risk-card.bs-risk-card--alta { order: 1; }
.pmode-stage .bs-risk-card.bs-risk-card--media { order: 2; }
.pmode-stage .bs-risk-card.bs-risk-card--resolvido { order: 3; }

.pmode-stage .bs-risk-card h4 {
  font-size: clamp(0.8rem, 1.7vh, 1rem);
  margin-bottom: 0;
}

/* Face do card fica só com badges + título -- o parágrafo-síntese (1º
   <p>) e o próprio botão "Ver detalhes" (redundante com o card inteiro
   já sendo clicável nesta tela) somem; o texto do parágrafo não é
   perdido, só oculto aqui -- ver openAutoModal(), que o move pro pop-up
   ao clicar. */
.pmode-stage .bs-risk-card__body > p:first-child,
.pmode-stage .bs-auto-detail__more {
  display: none;
}

@media (max-width: 760px) {
  .pmode-nav-arrow {
    display: none;
  }

  .pmode-stage {
    padding: var(--space-3);
  }

  .pmode-topbar__title,
  .pmode-hint {
    display: none;
  }
}