/* ---------- Blueprint Sistêmico — estilos próprios desta página ---------- */

/* Só nesta página -- .report-header__subtitle é compartilhado com
   outras páginas de relatório via report.css, que mantêm o alinhamento
   original. */
.report-header__subtitle {
  text-align: justify;
  max-width: 900px;
}

.bs-lead {
  background: var(--peers-serene-02);
  border-left: 4px solid var(--peers-blue);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.88rem;
  color: var(--grey-800);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}

.bs-lead strong {
  color: var(--peers-blue);
}

/* ---------- Tags Bel / Mundo ---------- */

.bs-company-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  color: var(--peers-white);
}

.bs-company-tag--bel { background: var(--error-main); }
.bs-company-tag--mundo { background: var(--peers-blue); }

.bs-arch-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.bs-arch-head__meta {
  font-size: 0.82rem;
  color: var(--grey-600);
}

/* ---------- Frameworks (Objetivo) ---------- */

.bs-framework-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

@media (max-width: 980px) {
  .bs-framework-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .bs-framework-grid { grid-template-columns: 1fr; }
}

.bs-framework-card {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-lg);
  background: var(--grey-50);
  padding: 16px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.bs-framework-card:hover {
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  border-color: var(--peers-blue-04);
}

.bs-framework-card__letter {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 15px;
  color: var(--peers-white);
  margin-bottom: 10px;
}

.bs-framework-card__letter--cobit { background: var(--peers-blue); }
.bs-framework-card__letter--itil { background: var(--peers-pink); }
.bs-framework-card__letter--nist { background: var(--warning-main); }
.bs-framework-card__letter--legal { background: var(--info-main); }

.bs-framework-card h3 {
  font-family: var(--font-secondary);
  font-size: 1.02rem;
  color: var(--peers-blue);
  margin: 0 0 6px;
}

.bs-framework-card__app {
  font-size: 0.78rem;
  color: var(--grey-600);
  margin: 0 0 10px;
  line-height: 1.5;
  min-height: 52px;
}

.bs-framework-card__app strong { color: var(--peers-blue); }

.bs-framework-card ul {
  margin: 0;
  padding-left: 16px;
}

.bs-framework-card li {
  font-size: 0.78rem;
  color: var(--grey-600);
  margin-bottom: 6px;
  line-height: 1.45;
}

/* ---------- Governança ---------- */

.bs-org-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-2);
}

@media (max-width: 860px) {
  .bs-org-grid { grid-template-columns: 1fr; }
}

.bs-org-card {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--peers-white);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bs-org-card:hover {
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.bs-org-card--sponsor {
  grid-column: 1 / -1;
  border-style: dashed;
  background: var(--grey-50);
}

.bs-org-card--bel { border-left: 4px solid var(--error-main); }
.bs-org-card--mundo { border-left: 4px solid var(--peers-blue); }

.bs-org-card__role {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 3px;
}

.bs-org-card__name {
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 1rem;
  color: var(--peers-blue);
  margin-bottom: 3px;
}

.bs-org-card__meta {
  font-size: 0.78rem;
  color: var(--grey-600);
  margin-bottom: 8px;
}

.bs-org-card ul {
  margin: 0;
  padding-left: 16px;
}

.bs-org-card li {
  font-size: 0.78rem;
  color: var(--grey-600);
  line-height: 1.5;
  margin-bottom: 4px;
}

/* ---------- Cards de vertical (arquitetura Bel / Mundo) ---------- */

.bs-vertical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

@media (max-width: 860px) {
  .bs-vertical-grid { grid-template-columns: 1fr; }
}

/* Cards interativos por padrão -- tanto no corpo do site quanto no modo
   apresentação (ver presentation.css: só ajusta tamanhos via clamp()
   pra caber no slide, o comportamento é o mesmo). Tela inicial mostra
   só área + sistema/status + resumo; o detalhe completo + fonte vivem
   num pop-up (mesmo .pmode-modal), aberto ao clicar em qualquer lugar
   do card. Nada é removido -- só reorganizado em camadas de interação. */
.bs-vertical-card {
  position: relative;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-lg);
  padding: 16px 34px 14px 18px;
  background: var(--peers-white);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.bs-vertical-card:hover {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
  border-color: var(--peers-blue);
}

.bs-vertical-card:active {
  transform: translateY(-1px);
}

.bs-vertical-card--bel { border-left: 4px solid var(--error-main); }
.bs-vertical-card--mundo { border-left: 4px solid var(--peers-blue); }

/* Hierarquia: a área (o que muda de vertical pra vertical) é o
   destaque principal; o sistema/status por trás dela é a linha
   secundária -- o que importa pra leitura rápida é "que área é essa". */
.bs-vertical-card__title {
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--peers-blue);
  margin-bottom: 5px;
  line-height: 1.25;
}

.bs-vertical-card__main {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--grey-600);
  margin-bottom: 8px;
  line-height: 1.3;
}

.bs-vertical-card__summary {
  font-size: 0.84rem;
  color: var(--grey-700);
  line-height: 1.5;
  margin: 0;
}

.bs-vertical-card__summary::after {
  content: 'Ver detalhes \2192';
  display: block;
  margin-top: 9px;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--peers-blue-03);
  opacity: 0.75;
  transform: translateX(-2px);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.bs-vertical-card:hover .bs-vertical-card__summary::after {
  opacity: 1;
  transform: translateX(0);
  color: var(--peers-blue);
}

.bs-vertical-card::after {
  content: '\203A';
  position: absolute;
  top: 16px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--grey-100);
  color: var(--grey-500);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bs-vertical-card:hover::after {
  background: var(--peers-blue);
  color: var(--peers-white);
  transform: translateX(2px);
}

/* Ponto de atenção -- cards cujo detalhe já menciona um risco/achado
   crítico/gap (ver RISK_PATTERN em presentation-mode.js), sinalizados
   sem alterar o texto. */
.bs-vertical-card--risk::before {
  content: '';
  position: absolute;
  top: 19px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--error-main);
  box-shadow: 0 0 0 3px var(--peers-white), 0 0 0 4px rgba(255, 86, 48, 0.35);
}

/* O detalhe completo (+ fonte) só aparece dentro do pop-up -- ver
   .pmode-modal__body .bs-vertical-card__detail em presentation.css,
   que reexibe exatamente este mesmo conteúdo, movido (não clonado). */
.bs-vertical-card .bs-vertical-card__detail,
.bs-vertical-card .bs-vertical-card__source {
  display: none;
}

.bs-vertical-card__detail p {
  font-size: 0.86rem;
  color: var(--grey-700);
  line-height: 1.6;
  margin: 0 0 8px;
}

.bs-vertical-card__detail ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

.bs-vertical-card__detail li {
  font-size: 0.84rem;
  color: var(--grey-700);
  line-height: 1.55;
  margin-bottom: 6px;
}

.bs-vertical-card__source {
  font-size: 0.76rem;
  color: var(--grey-500);
  border-top: 1px dashed var(--grey-300);
  padding-top: 6px;
  margin-top: 6px;
}

.bs-arch-note {
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--grey-600);
  background: var(--grey-50);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  line-height: 1.5;
}

/* ---------- Visão executiva (só aparece no modo apresentação -- ver
   presentation.css. Fora dele, o relatório já mostra a mesma síntese
   via .bs-arch-note logo abaixo.) ---------- */

.bs-exec-view {
  display: none;
}

.bs-exec-view__eyebrow {
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--peers-lime);
  margin: 0 0 6px;
}

.bs-exec-view__message {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--peers-white);
  margin: 0 0 10px;
}

.bs-exec-view__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bs-exec-view__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-full);
  color: var(--peers-white);
  font-family: var(--font-primary);
  font-size: 0.72rem;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bs-exec-view__toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.bs-exec-view__toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.bs-exec-view__toggle[aria-expanded="true"] .bs-exec-view__toggle-icon {
  transform: rotate(180deg);
}

/* ---------- Conexões entre sistemas (idem -- só no modo apresentação) ---------- */

.bs-connections {
  display: none;
}

.bs-connections__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 6px;
}

.bs-connections__formal-caption {
  font-size: 0.86rem;
  color: var(--grey-700);
  line-height: 1.5;
  margin: 0 0 12px;
}

.bs-connections__formal-caption strong {
  color: var(--peers-blue);
  font-weight: 800;
}

.bs-connections__body {
  display: flex;
  flex-wrap: wrap;
}

.bs-connections__isolated {
  min-width: 0;
}

.bs-connections__isolated-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--grey-50);
  border: 1px dashed var(--grey-400);
  border-radius: var(--radius-full);
  color: var(--grey-700);
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.76rem;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bs-connections__isolated-toggle:hover {
  background: var(--grey-100);
}

.bs-connections__isolated-toggle[aria-expanded="true"] .bs-exec-view__toggle-icon {
  transform: rotate(180deg);
}

.bs-connections__chips {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.bs-connections__chips.is-open {
  display: flex;
}

.bs-connections__chip {
  font-family: var(--font-primary);
  font-size: 0.74rem;
  color: var(--grey-600);
  background: var(--peers-white);
  border: 1px dashed var(--grey-400);
  border-radius: var(--radius-full);
  padding: 4px 11px;
  cursor: pointer;
}

/* ---------- Riscos ---------- */

/* .status-pill não é definido em report.css nem em site.css -- só existe
   em home.css, que esta página não carrega. Base + variantes replicadas
   aqui (mesma paleta) para que os selos de criticidade (Alta/Média/
   Resolvido) e o "Status" do cronograma tenham estilo nesta página. */
.status-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: var(--radius-full);
}

.status-pill--lime { background: var(--peers-lime-02); color: #4a5a00; }
.status-pill--info { background: #cafdf5; color: #003768; }
.status-pill--warning { background: #fff5cc; color: #7a4100; }
.status-pill--error { background: #ffe9d5; color: #7a0916; }

/* Resumo quantitativo: 4 botões-filtro (Total/Alta/Média/Resolvido),
   coloridos por criticidade -- clicar filtra a grade abaixo (ver
   setRiskFilter em presentation-mode.js; nada é removido do DOM, só
   escondido via .bs-risk-card--filtered-out). Números são computados em
   tempo de execução por buildRiskSummary() a partir dos próprios cards,
   nunca hardcoded -- os 3 <span> originais abaixo ficam como fallback
   caso o JS não rode. */
.bs-risk-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.bs-risk-summary span {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--grey-600);
}

.bs-risk-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  background: var(--grey-50);
  border: 2px solid var(--grey-300);
  min-width: 84px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.bs-risk-summary__stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09);
}

.bs-risk-summary__stat:focus-visible {
  outline: 2px solid var(--peers-blue);
  outline-offset: 2px;
}

.bs-risk-summary__num {
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--peers-blue);
}

.bs-risk-summary__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--grey-600);
}

.bs-risk-summary__stat--alta { border-color: var(--error-main); background: #fff3ef; }
.bs-risk-summary__stat--alta .bs-risk-summary__num { color: var(--error-main); }
.bs-risk-summary__stat--media { border-color: var(--warning-main); background: #fff9ec; }
.bs-risk-summary__stat--media .bs-risk-summary__num { color: #a56300; }
.bs-risk-summary__stat--resolvido { border-color: var(--success-main); background: #eefdf3; }
.bs-risk-summary__stat--resolvido .bs-risk-summary__num { color: #15803d; }

/* Filtro ativo: preenchimento sólido na cor do nível, texto branco --
   estado claramente diferente de hover, sem depender só da borda. */
.bs-risk-summary__stat.is-active {
  background: var(--peers-blue);
  border-color: var(--peers-blue);
}
.bs-risk-summary__stat--alta.is-active { background: var(--error-main); border-color: var(--error-main); }
.bs-risk-summary__stat--media.is-active { background: var(--warning-main); border-color: var(--warning-main); }
.bs-risk-summary__stat--resolvido.is-active { background: var(--success-main); border-color: var(--success-main); }
.bs-risk-summary__stat.is-active .bs-risk-summary__num,
.bs-risk-summary__stat.is-active .bs-risk-summary__label {
  color: var(--peers-white);
}

.bs-risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-2);
}

.bs-risk-card {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--peers-white);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.bs-risk-card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
  border-color: var(--peers-blue-04);
}

/* Selector composto (.bs-risk-card + modificador) de propósito -- teria
   a mesma especificidade de .bs-risk-card sozinho, e como este último
   também define `display`, a ordem no arquivo decidiria o empate; assim
   fica imune a isso. */
.bs-risk-card.bs-risk-card--filtered-out {
  display: none;
}

/* Criticidade em destaque: faixa lateral colorida por nível (classe
   atribuída em tempo de execução por markRiskLevels(), a partir do texto
   do próprio .status-pill já existente no card -- nenhum dado novo). Os
   riscos "Resolvido" recebem leve redução de ênfase, já que não exigem
   mais atenção imediata. */
.bs-risk-card--alta { border-left: 4px solid var(--error-main); }
.bs-risk-card--media { border-left: 4px solid var(--warning-main); }
.bs-risk-card--resolvido { border-left: 4px solid var(--success-main); opacity: 0.86; }

/* O achado (1º parágrafo) fica sempre visível; Evidência/Recomendação/
   Status/Responsável (initAutoDetail em presentation-mode.js move os
   <p> seguintes pra cá em tempo de execução) só aparecem no pop-up. */
.bs-auto-detail {
  display: none;
}

.bs-auto-detail p {
  font-size: 0.8rem;
  color: var(--grey-700);
  line-height: 1.55;
  margin: 0 0 8px;
}

.bs-auto-detail b {
  color: var(--peers-blue);
}

.bs-auto-detail__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--peers-blue-03);
  cursor: pointer;
  transition: color 0.15s ease, gap 0.15s ease;
}

.bs-risk-card:hover .bs-auto-detail__more,
.bs-synergy-card:hover .bs-auto-detail__more {
  color: var(--peers-blue);
  gap: 7px;
}

/* Hierarquia visual: criticidade (status-pill) na frente, maior e mais
   forte; framework (NIST/COBIT/ITIL) em 2º plano -- mesma marcação HTML
   de sempre (nenhuma reordenação no DOM), só o `order` do flex inverte a
   leitura visual. Compartilhado com .bs-synergy-card (mesmo componente
   .bs-fw-badge), por consistência entre as duas seções de achados. */
.bs-risk-card__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bs-risk-card__badges .status-pill {
  order: -1;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 6px 14px;
}

.bs-fw-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 0.62rem;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  opacity: 0.78;
}

.bs-fw-badge--cobit,
.bs-fw-badge--itil,
.bs-fw-badge--nist {
  background: var(--grey-100);
  color: var(--grey-600);
}

.bs-risk-card h4 {
  font-family: var(--font-secondary);
  font-size: 0.92rem;
  color: var(--peers-blue);
  margin: 0 0 8px;
  line-height: 1.35;
}

.bs-risk-card__body p {
  font-size: 0.8rem;
  color: var(--grey-700);
  line-height: 1.55;
  margin: 0 0 6px;
}

.bs-risk-card__body b {
  color: var(--peers-blue);
}

/* ---------- Sinergias ---------- */

.bs-synergy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

@media (max-width: 860px) {
  .bs-synergy-grid { grid-template-columns: 1fr; }
}

.bs-synergy-card {
  border: 1px solid var(--grey-300);
  border-left: 4px solid var(--success-main);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--grey-50);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bs-synergy-card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

/* Só ganha o cursor de "clicável" quando initAutoDetail() realmente
   escondeu algo pra revelar (cards com 1 único parágrafo não têm
   pop-up). */
.bs-synergy-card:has(.bs-auto-detail__more) {
  cursor: pointer;
}

.bs-synergy-card h4 {
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  color: var(--peers-blue);
  margin: 8px 0 6px;
}

.bs-synergy-card p {
  font-size: 0.8rem;
  color: var(--grey-700);
  line-height: 1.55;
  margin: 0 0 6px;
}

.bs-synergy-card b { color: var(--peers-blue); }

/* ---------- Cronograma ---------- */

.bs-timeline-note {
  background: var(--grey-50);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.82rem;
  color: var(--grey-600);
  line-height: 1.55;
  margin-bottom: var(--space-2);
}

.bs-interview-card {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: var(--space-2);
  background: var(--peers-white);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bs-interview-card:hover {
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.bs-interview-card h4 {
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: var(--peers-blue);
  margin: 0 0 4px;
}

.bs-interview-card__meta {
  font-size: 0.78rem;
  color: var(--grey-500);
  margin-bottom: 10px;
}

.bs-interview-card__row {
  display: flex;
  gap: 8px;
  font-size: 0.82rem;
  margin-bottom: 6px;
  color: var(--grey-700);
}

.bs-interview-card__row b {
  flex: 0 0 130px;
  color: var(--grey-500);
  font-weight: 700;
}

.bs-interview-card__note {
  background: var(--grey-50);
  border-left: 3px solid var(--warning-main);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--grey-600);
  line-height: 1.55;
  margin-top: 8px;
}

/* ---------- Roadmap ---------- */

.bs-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (max-width: 860px) {
  .bs-roadmap-grid { grid-template-columns: 1fr; }
}

.bs-roadmap-col h4 {
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  color: var(--peers-blue);
  margin: 0 0 2px;
}

.bs-roadmap-col__when {
  font-size: 0.74rem;
  color: var(--grey-500);
  margin-bottom: 10px;
}

.bs-roadmap-col ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.bs-roadmap-col li {
  font-size: 0.82rem;
  color: var(--grey-700);
  line-height: 1.5;
  padding: 9px 0;
  border-top: 1px solid var(--grey-300);
}

.bs-roadmap-col li:first-child { border-top: none; }

/* ---------- Como usar / Contatos ---------- */

.bs-use-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bsuse;
}

.bs-use-list li {
  counter-increment: bsuse;
  position: relative;
  padding: 10px 0 10px 34px;
  font-size: 0.85rem;
  color: var(--grey-800);
  border-top: 1px solid var(--grey-300);
}

.bs-use-list li:first-child { border-top: none; }

.bs-use-list li::before {
  content: counter(bsuse);
  position: absolute;
  left: 0;
  top: 9px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-md);
  background: var(--peers-lime);
  color: var(--peers-blue);
  font-weight: 800;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Cadeia de valor (resumo) ---------- */

.bs-vc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--peers-blue);
  background: var(--peers-lime-02);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.bs-vc-stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}

@media (max-width: 980px) {
  .bs-vc-stages { grid-template-columns: repeat(2, 1fr); }
}

.bs-vc-stages div {
  background: var(--peers-blue);
  color: var(--peers-white);
  text-align: center;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 9px 6px;
  border-radius: var(--radius-md);
  line-height: 1.3;
}

.bs-vc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

@media (max-width: 980px) {
  .bs-vc-grid { grid-template-columns: repeat(2, 1fr); }
}

.bs-vc-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bs-vc-group {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--grey-50);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.bs-vc-group:hover {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.bs-vc-group h5 {
  font-family: var(--font-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--peers-blue);
  margin: 0 0 4px;
}

.bs-vc-group p {
  font-size: 0.74rem;
  color: var(--grey-600);
  line-height: 1.45;
  margin: 0 0 6px;
}

.bs-vc-group ul {
  margin: 0;
  padding-left: 14px;
}

.bs-vc-group li {
  font-size: 0.73rem;
  color: var(--grey-600);
  line-height: 1.4;
  margin-bottom: 3px;
}

.bs-vc-support {
  margin-top: var(--space-3);
}

.bs-vc-support-label {
  text-align: center;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--peers-blue);
  background: var(--grey-100);
  border-radius: var(--radius-md);
  padding: 8px;
  margin-bottom: 10px;
}

.bs-vc-support-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

@media (max-width: 980px) {
  .bs-vc-support-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Matriz por Vertical (#matriz-vertical) — célula estruturada.
   No relatório em modo documento tudo continua visível (só o "●" da
   versão anterior virou uma pill colorida); o botão "Ver detalhes" é
   inerte fora do modo apresentação, por isso fica oculto por padrão --
   ver presentation.css para o comportamento de pop-up. ---------- */

.bs-matrix-cell__tag {
  display: inline-block;
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--grey-100);
  color: var(--grey-600);
  margin-bottom: 5px;
}

.bs-matrix-cell__tag--core {
  background: var(--peers-blue);
  color: var(--peers-white);
}

.bs-matrix-cell__insight {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--peers-blue);
  line-height: 1.4;
}

/* O detalhe completo só aparece no pop-up (mesmo .pmode-modal dos
   cards) -- tanto no corpo do site quanto no modo apresentação. */
.bs-matrix-cell__detail {
  display: none;
}

.bs-matrix-cell__detail p {
  margin: 0;
  color: var(--grey-700);
  line-height: 1.5;
}

.bs-matrix-cell__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--peers-blue-03);
  cursor: pointer;
  transition: color 0.15s ease, gap 0.15s ease;
}

.report-table tbody tr:hover .bs-matrix-cell__more {
  color: var(--peers-blue);
  gap: 7px;
}

/* ---------- Tabelas do relatório -- menos "planilha", mais legível.
   Só nesta página (report.css é compartilhado com outras páginas de
   relatório, que mantêm o estilo de grade original). ---------- */
.report-table {
  border-spacing: 0;
}

.report-table th {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--peers-blue);
}

.report-table td {
  border: none;
  border-bottom: 1px solid var(--grey-200);
  vertical-align: top;
}

.report-table tbody tr {
  transition: background-color 0.15s ease;
}

.report-table tbody tr:hover td {
  background-color: var(--peers-serene-02);
}