/* ==========================================================================
   Agendas & Rituais de Alinhamento — estilos próprios da página.
   Reaproveita os tokens de design de site.css (cores, tipografia, espaçamento,
   raios, sombras) — nenhuma paleta nova é introduzida, exceto as cores de
   identificação de empresa (BEL / Mundo / PB), que são específicas deste
   conteúdo de diagnóstico e não fazem parte do design system core.
   ========================================================================== */

/* ---------- Nav de agendas em lista suspensa ----------
   23 agendas não cabem como lista vertical fixa (mesmo sticky, overflowa a
   tela) nem como faixa horizontal no mobile. Vira um <details> -- colapsado
   por padrão, sem nenhum JS dedicado além do genérico em report-nav.js que
   fecha o <details> ao clicar num link (guardado por closest('details'),
   não afeta as demais páginas que reaproveitam .report-nav como lista
   simples). */

/* .agenda-layout substitui o layout padrão de duas colunas (nav estreito
   fixo + conteúdo largo) por uma pilha vertical de largura total -- o nav
   deixa de ser uma barra lateral de 260px e passa a ser uma faixa
   horizontal de largura cheia, colada embaixo do cabeçalho (ambos
   sticky, empilhados). O conteúdo ganha toda a largura da tela. */
.agenda-layout {
  flex-direction: column;
  gap: var(--space-2);
}

.agenda-layout .report-content {
  width: 100%;
}

.agenda-nav {
  width: 100%;
  padding: 0;
  overflow: hidden;
}

/* Cabeçalho + nav colados um no outro, fixos no topo -- só a partir daqui,
   onde o título cabe numa linha e a altura de cada um é previsível (ver
   nota acima). Os valores de "top" são a altura real medida de cada
   elemento (site-header 52px, este cabeçalho 83px) -- ajustar os dois
   juntos se o conteúdo do cabeçalho mudar de altura. */
@media (min-width: 861px) {
  .agenda-header {
    position: sticky;
    top: calc(var(--env-banner-h, 0px) + 52px);
    z-index: 495;
  }

  .agenda-nav {
    position: sticky;
    top: calc(var(--env-banner-h, 0px) + 52px + 83px);
    z-index: 490;
  }

  /* Sem isso, o botão "Modo Apresentação" quebra pra uma segunda linha em
     larguras estreitas (report-header__row tem flex-wrap:wrap por
     padrão), o que varia a altura do cabeçalho e desalinha o nav sticky
     (top fixo em pixel, calculado pra uma altura única). Trunca o
     título/meta em vez de deixar o botão quebrar -- garante altura
     constante em qualquer largura >=861px. */
  .agenda-header .report-header__row {
    flex-wrap: nowrap;
  }

  .agenda-header .report-header__row > div:first-child {
    min-width: 0;
    overflow: hidden;
  }

  .agenda-header .report-header__title,
  .agenda-header__meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.agenda-nav__dd {
  width: 100%;
}

.agenda-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.agenda-nav__summary::-webkit-details-marker {
  display: none;
}

.agenda-nav__summary-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.agenda-nav__summary-eyebrow {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-500);
}

.agenda-nav__summary-current {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--peers-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-nav__chev {
  flex-shrink: 0;
  color: var(--grey-500);
  transition: transform 0.2s ease;
}

.agenda-nav__dd[open] .agenda-nav__chev {
  transform: rotate(180deg);
}

.agenda-nav__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px;
  max-height: min(50vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border-top: 1px solid var(--grey-200);
}

/* ---------- Cabeçalho fixo e compacto ----------
   O cabeçalho original (título + subtítulo de 3 linhas + grid de 4 cards,
   um deles com um parágrafo inteiro listando as 23 agendas) passava de
   250px de altura -- inviável de fixar no topo sem tomar a tela. Vira uma
   única linha de meta-dados compacta (data · escopo · contagem · legenda
   de nomenclatura) no lugar do subtítulo e do grid inteiro; a lista de
   agendas já está completa e numerada no dropdown abaixo, então o card
   "Agendas mapeadas" ficou redundante e foi removido, não só encolhido.

   O cabeçalho e o nav só ficam sticky (colados um no outro, embaixo do
   .site-header) a partir de 861px -- ver bloco de media query mais abaixo.
   Abaixo disso o título quebra linha (mais estreito que o texto) e a
   altura do cabeçalho vira variável; sticky com "top" fixo em pixel só
   funciona com altura previsível (título em 1 linha), então no mobile os
   três ficam em fluxo normal (o dropdown já resolve o problema original
   de altura por conta própria, sem precisar de sticky). */

.agenda-header {
  padding-top: 10px;
  padding-bottom: 10px;
}

.agenda-header .report-breadcrumb {
  margin-bottom: 2px;
}

.agenda-header .report-header__title {
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  margin-bottom: 2px;
}

.agenda-header__meta {
  font-size: 0.78rem;
  color: var(--grey-600);
  margin: 0;
  line-height: 1.4;
}

.agenda-header__meta strong {
  color: var(--peers-blue);
}

/* ---------- Cabeçalho de cada agenda (data + objetivo + presentes) ---------- */

.agenda-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--grey-50);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.agenda-meta__desc {
  font-size: 0.82rem;
  color: var(--grey-700);
  margin: 0;
  line-height: 1.55;
  flex: 1 1 420px;
}

.agenda-meta__desc strong {
  color: var(--peers-blue);
}

.agenda-meta__people {
  font-size: 0.76rem;
  color: var(--grey-600);
  margin: 0;
  line-height: 1.5;
  text-align: right;
  flex: 1 1 280px;
  max-width: 420px;
}

/* ---------- Layout de duas colunas: caixas de achados + cards de sistema ---------- */

.agenda-two-col {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: var(--space-3);
  align-items: start;
}

.agenda-col-left,
.agenda-col-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* No modo apresentação o palco fica bem mais largo e mais baixo (altura de
   tela, não de documento) -- o grid de duas colunas com a esquerda
   estreita e fixa (minmax(260px,380px)) sobra largura à direita mas faz a
   esquerda (3-5 caixas de achados) empilhar alto demais, cortando o final
   da seção mesmo com o palco já sendo rolável. Solução: as duas colunas
   dividem a largura ~meio a meio e cada uma vira grid responsivo (não só
   a direita como antes) -- caixas/cards fluem em 2+ colunas internas em
   vez de uma pilha vertical única. Complementado por padding/fonte via
   clamp(vh), que encolhem com a altura real da tela.  */
.pmode-stage .agenda-two-col {
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.6vh, 24px);
}

.pmode-stage .agenda-col-left,
.pmode-stage .agenda-col-right {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  align-content: start;
  gap: clamp(6px, 1.2vh, 10px);
}

.pmode-stage .agenda-meta {
  padding: clamp(8px, 1.4vh, 12px) 16px;
  margin-bottom: clamp(8px, 1.4vh, 16px);
}

.pmode-stage .agenda-box,
.pmode-stage .agenda-sys-card {
  padding: clamp(8px, 1.4vh, 11px) 14px;
}

.pmode-stage .agenda-box h4,
.pmode-stage .agenda-sys-card__name {
  font-size: clamp(0.76rem, 1.7vh, 0.85rem);
}

.pmode-stage .agenda-box li,
.pmode-stage .agenda-sys-card p {
  font-size: clamp(0.7rem, 1.4vh, 0.8rem);
  line-height: 1.4;
}

.pmode-stage .agenda-finding {
  padding: clamp(6px, 1vh, 8px) 10px;
  font-size: clamp(0.68rem, 1.3vh, 0.77rem);
}

.pmode-stage .agenda-cross {
  padding: clamp(8px, 1.4vh, 12px) 16px;
}

.pmode-stage .agenda-cross p {
  font-size: clamp(0.72rem, 1.4vh, 0.8rem);
}

.agenda-box {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--peers-white);
}

.agenda-box--warn {
  border-color: #f3b7b7;
  background: #fff8f8;
}

.agenda-box h4 {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--peers-blue);
  margin: 0 0 8px;
  line-height: 1.3;
}

.agenda-box ul {
  margin: 0;
  padding-left: 18px;
}

.agenda-box li {
  font-size: 0.8rem;
  color: var(--grey-600);
  line-height: 1.5;
  margin-bottom: 5px;
}

.agenda-box li:last-child {
  margin-bottom: 0;
}

.agenda-box li strong {
  color: var(--peers-blue);
}

/* ---------- Cards de sistema ---------- */

.agenda-sys-card {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  background: var(--peers-white);
}

.agenda-sys-card--alert {
  border-color: #f3b7b7;
}

.agenda-sys-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.agenda-sys-card__name {
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--peers-blue);
}

.agenda-sys-card p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--grey-600);
  line-height: 1.5;
}

.agenda-finding {
  border-left: 3px solid var(--warning-main);
  background: #fff8ec;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 8px;
  font-size: 0.77rem;
  color: #7a4100;
  line-height: 1.45;
}

.agenda-finding--info {
  border-left-color: var(--info-main);
  background: #eafcff;
  color: #003768;
}

.agenda-finding strong {
  color: inherit;
}

/* ---------- Cruzamento com o Blueprint ---------- */

.agenda-cross {
  background: var(--peers-serene-02);
  border-left: 4px solid var(--peers-blue);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: 4px;
}

.agenda-cross h4 {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--peers-blue);
  margin: 0 0 6px;
  line-height: 1.3;
}

.agenda-cross p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--grey-800);
  line-height: 1.55;
}

.agenda-cross p strong {
  color: var(--peers-blue);
}

/* ---------- Fonte / rodapé de cada seção ---------- */

.agenda-source {
  margin: var(--space-3) 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--grey-300);
  font-size: 0.74rem;
  color: var(--grey-500);
}

/* ---------- Tags de empresa (BEL / Mundo / PB / risco / ok / jurídico) ---------- */

.agenda-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.5;
}

.agenda-tag--bel { background: #fce4ef; color: #e83e8c; }
.agenda-tag--mundo { background: #e7f1f4; color: #021240; }
.agenda-tag--pb { background: #fdf3e1; color: #8a5a00; }
.agenda-tag--risk { background: #ffe9d5; color: #7a0916; }
.agenda-tag--ok { background: #d3fcd2; color: #065e49; }
.agenda-tag--legal { background: #f1e6fb; color: #5b2a86; }

/* ---------- Consolidado & Pontos de Atenção ----------
   Uma única tabela grande, clusterizada por pilar (linha de grupo com
   th[colspan]) em vez do antigo grid solto de cartões (.agenda-cons-grid /
   .agenda-cons-card, removidos) -- com ~30 achados de 18 agendas, uma
   tabela agrupada por tema lê muito melhor que cartões soltos sem ordem
   temática. */

.agenda-cons-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-lg);
}

.agenda-cons-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--peers-white);
}

.agenda-cons-table thead th {
  position: sticky;
  top: 0;
  background: var(--peers-blue);
  color: var(--peers-white);
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 10px 14px;
  z-index: 1;
}

.agenda-cons-table tbody td {
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--grey-700);
  line-height: 1.5;
  border-top: 1px solid var(--grey-200);
  vertical-align: top;
}

.agenda-cons-table tbody td:nth-child(2) {
  white-space: nowrap;
  color: var(--info-main);
  font-weight: 600;
}

.agenda-cons-table tbody td:nth-child(2) a {
  color: inherit;
}

.agenda-cons-table tbody td:last-child {
  white-space: nowrap;
}

.agenda-cons-table tbody tr:hover td {
  background: var(--peers-serene-02, var(--grey-100));
}

.agenda-cons-table__group th {
  background: var(--grey-100);
  color: var(--peers-blue);
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 8px 14px;
  border-top: 2px solid var(--grey-300);
}

.agenda-cons-followups {
  margin-top: var(--space-3);
  padding: 12px 14px;
  background: var(--grey-50);
  border-radius: var(--radius-md);
}

.agenda-cons-followups h4 {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--peers-blue);
  margin: 0 0 6px;
}

.agenda-cons-followups p {
  font-size: 0.78rem;
  color: var(--grey-600);
  line-height: 1.5;
  margin: 0;
}

/* ---------- Responsivo ---------- */

/* Neutraliza o flex/overflow-x horizontal que report.css aplica a
   .report-nav no mobile -- o dropdown já funciona igual em qualquer
   largura, não precisa da faixa de pills rolável. */
@media (max-width: 860px) {
  .agenda-nav {
    display: block;
    overflow: hidden;
    padding: 0;
  }

  .agenda-nav__list {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
  }

  .agenda-nav a {
    border-bottom: none;
  }
}

@media (max-width: 760px) {
  .agenda-two-col {
    grid-template-columns: 1fr;
  }

  .agenda-meta__people {
    text-align: left;
    max-width: none;
  }
}