/* ==========================================================================
   Blueprint Sistêmico V2 — estilos próprios desta página.
   Reaproveita os tokens de site.css e as cores de empresa/grupo já
   definidas em blueprint-sistemico.css (bs-company-tag, status-pill) —
   nenhuma paleta nova. Prefixo bs2- exclusivo desta página; o conteúdo
   (sistemas, integrações, textos) vem de assets/js/mapa-sistemico.js via
   window.bsSystemData, nunca duplicado aqui.
   ========================================================================== */

/* ---------- Como ler (cards de introdução) ---------- */

.bs2-howto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
}

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

.bs2-howto-card {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-lg);
  background: var(--grey-50);
  padding: 16px;
}

.bs2-howto-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--peers-serene-02);
  color: var(--peers-blue);
  margin-bottom: 10px;
}

.bs2-howto-card h3 {
  font-family: var(--font-secondary);
  font-size: 0.92rem;
  color: var(--peers-blue);
  margin: 0 0 6px;
}

.bs2-howto-card p {
  font-size: 0.8rem;
  color: var(--grey-600);
  line-height: 1.5;
  margin: 0;
}

/* ---------- Legenda ---------- */

.bs2-legend-title {
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  color: var(--peers-blue);
  margin: 0 0 10px;
}

.bs2-legend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

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

.bs2-legend-col__label {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin: 0 0 8px;
}

.bs2-legend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bs2-legend-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 4px 11px;
  border-radius: var(--radius-full);
}

.bs2-edge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}

.bs2-edge-chip--ok { background: #d3fcd2; color: #065e49; }
.bs2-edge-chip--pending { background: var(--grey-200); color: var(--grey-600); }
.bs2-edge-chip--risk { background: #ffe9d5; color: #7a0916; }

/* ---------- Faixa de destaque (processos críticos comparados) ---------- */

.bs2-highlight {
  border: 1.5px dashed var(--error-main);
  border-radius: var(--radius-lg);
  background: #fff8f7;
  padding: 4px 16px 14px;
  margin: var(--space-2) 0;
}

.bs2-highlight__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--error-main);
  margin: 12px 0 10px;
}

/* ---------- Camadas (details/summary) ---------- */

.bs2-lanes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bs2-lane {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-lg);
  background: var(--peers-white);
  overflow: hidden;
}

.bs2-lane__summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  background: var(--peers-blue);
  color: var(--peers-white);
}

.bs2-lane__summary::-webkit-details-marker {
  display: none;
}

.bs2-lane__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--peers-lime);
  color: var(--peers-blue);
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.bs2-lane__icon::before {
  content: "\2212"; /* − quando aberto */
}

.bs2-lane:not([open]) .bs2-lane__icon::before {
  content: "+";
}

.bs2-lane__text {
  flex: 1;
  min-width: 0;
}

.bs2-lane__title {
  display: block;
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.3;
}

.bs2-lane__desc {
  display: block;
  font-size: 0.78rem;
  color: var(--peers-blue-04);
  margin-top: 2px;
  line-height: 1.4;
}

.bs2-lane__count {
  flex-shrink: 0;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  white-space: nowrap;
}

.bs2-lane__body {
  padding: 16px 18px;
  border-top: 1px solid var(--grey-200);
}

/* ---------- Cards de sistema (chips clicáveis) ---------- */

.bs2-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bs2-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 168px;
  max-width: 240px;
  text-align: left;
  font-family: var(--font-primary);
  background: var(--grey-50);
  border: 1px solid var(--grey-300);
  border-left: 4px solid var(--grey-400);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.bs2-chip:hover {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
  border-color: var(--peers-blue-04);
}

.bs2-chip--bel { border-left-color: var(--error-main); }
.bs2-chip--mundo { border-left-color: var(--peers-blue); }
.bs2-chip--ext { border-left-color: #8a5a00; }
.bs2-chip--belxmun { border-left-color: var(--warning-main); }

.bs2-chip__company {
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey-500);
}

.bs2-chip__name {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--peers-blue);
  line-height: 1.3;
}

.bs2-chip__status {
  font-size: 0.72rem;
  color: var(--grey-600);
  line-height: 1.35;
}

.bs2-chip--risk::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--error-main);
  box-shadow: 0 0 0 2px var(--peers-white);
}

/* ---------- Grupos de integração ---------- */

.bs2-edge-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-2);
}

.bs2-edge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bs2-edge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: 0.78rem;
  color: var(--grey-800);
  background: var(--peers-white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.bs2-edge-btn:hover {
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
  border-color: var(--peers-blue-04);
}

.bs2-edge-btn__arrow {
  color: var(--grey-400);
}

.bs2-edge-btn--risk {
  border-color: #f3b7b7;
  background: #fff8f8;
}

.bs2-edge-btn--pending {
  border-style: dashed;
}

.bs2-edge-btn__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bs2-edge-btn--ok .bs2-edge-btn__dot { background: var(--success-main); }
.bs2-edge-btn--pending .bs2-edge-btn__dot { background: var(--grey-400); }
.bs2-edge-btn--risk .bs2-edge-btn__dot { background: var(--error-main); }

/* ---------- Pop-up (reaproveita .pmode-modal, ver presentation.css) ---------- */

.bs2-popup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.bs2-popup-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.bs2-popup-status {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--peers-blue);
  margin: 0 0 8px;
}

.bs2-popup-desc {
  font-size: 0.86rem;
  color: var(--grey-700);
  line-height: 1.6;
  margin: 0 0 10px;
}

.bs2-popup-edge-pair {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.bs2-popup-edge-node {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.bs2-popup-edge-node h5 {
  font-family: var(--font-secondary);
  font-size: 0.82rem;
  color: var(--peers-blue);
  margin: 0 0 4px;
}

.bs2-popup-edge-node p {
  font-size: 0.78rem;
  color: var(--grey-600);
  line-height: 1.45;
  margin: 0;
}

.bs2-popup-source {
  font-size: 0.76rem;
  color: var(--grey-500);
  border-top: 1px dashed var(--grey-300);
  padding-top: 8px;
  margin-top: 6px;
}

/* ---------- Modo Apresentação -- ajustes específicos desta página ---------- */

.pmode-stage .bs2-howto-grid,
.pmode-stage .bs2-legend-grid {
  margin: clamp(8px, 1.4vh, 16px) 0;
}

.pmode-stage .bs2-lane__summary {
  padding: clamp(9px, 1.6vh, 14px) 16px;
}

.pmode-stage .bs2-lane__title {
  font-size: clamp(0.82rem, 1.8vh, 0.95rem);
}

.pmode-stage .bs2-lane__desc {
  font-size: clamp(0.7rem, 1.4vh, 0.78rem);
}

.pmode-stage .bs2-lane__body {
  padding: clamp(10px, 1.8vh, 16px) 16px;
}

.pmode-stage .bs2-chip {
  padding: clamp(7px, 1.2vh, 9px) 10px;
  min-width: 150px;
}

.pmode-stage .bs2-chip__name {
  font-size: clamp(0.76rem, 1.6vh, 0.84rem);
}

.pmode-stage .bs2-chip__status {
  font-size: clamp(0.66rem, 1.3vh, 0.72rem);
}

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

@media (max-width: 620px) {
  .bs2-lane__summary {
    flex-wrap: wrap;
  }

  .bs2-lane__count {
    order: 3;
  }

  .bs2-chip {
    max-width: none;
    flex: 1 1 100%;
  }
}