/* Arquitetura de Sistemas — prefixo as- */

.as-cta-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: 600;
  color: var(--peers-blue);
  text-decoration: none;
  border-bottom: 2px solid var(--peers-lime);
  padding-bottom: 2px;
}
.as-cta-link:hover { color: var(--peers-blue-02); }

/* ---------- 1. Mapa de capacidades ---------- */
.as-capability-map {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.as-capability-lane {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-lg);
  background: var(--grey-50);
  padding: var(--space-2) var(--space-3);
}
.as-capability-lane__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.as-capability-lane__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--peers-blue);
  color: var(--peers-white);
  font-weight: 700;
  font-size: 13px;
}
.as-capability-lane__title { display: block; font-weight: 700; color: var(--peers-blue); }
.as-capability-lane__desc { display: block; font-size: 12.5px; color: var(--grey-600); }
.as-capability-lane--comercial .as-capability-lane__num { background: var(--info-main); }
.as-capability-lane--corporativo .as-capability-lane__num { background: var(--grey-700); }

.as-capability-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.as-capability-chip {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--peers-blue);
  background: var(--peers-white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-full);
  padding: 5px 12px;
}

/* ---------- 2. Blueprint de processos & sistemas ---------- */
.as-blueprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.as-blueprint-col {
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-lg);
  background: var(--peers-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.as-blueprint-col h4 {
  margin: 0;
  padding: var(--space-2);
  background: var(--peers-blue);
  color: var(--peers-white);
  font-size: 13.5px;
}
.as-blueprint-col__systems {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  padding: var(--space-2);
  flex: 1;
}
.as-blueprint-col__empty {
  font-size: 12px;
  font-style: italic;
  color: var(--grey-500);
}

.as-sys-chip {
  font-family: inherit;
  border: none;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  color: var(--peers-white);
  white-space: normal;
  text-align: left;
  line-height: 1.25;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.as-sys-chip:hover,
.as-sys-chip:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(1, 19, 52, 0.25);
}
.as-sys-chip--bel { background: #7a0916; }
.as-sys-chip--mundo { background: #003768; }

/* ---------- Macro-domínios (agrupam as áreas de negócio) ---------- */
.as-domain-blueprint {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}
.as-domain-block {
  border: 1px solid var(--grey-300);
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: var(--radius-lg);
  background: var(--grey-50);
  padding: var(--space-3);
}
.as-domain-block[data-as-domain="front-office"] { border-left-color: var(--info-main); }
.as-domain-block[data-as-domain="core-business"] { border-left-color: var(--peers-blue); }
.as-domain-block[data-as-domain="back-office"] { border-left-color: var(--warning-main); }
.as-domain-block[data-as-domain="fundacoes"] { border-left-color: var(--grey-600); }

.as-domain-block__head {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.as-domain-block__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--peers-blue);
  color: var(--peers-white);
  font-weight: 700;
  font-size: 13px;
}
.as-domain-block__head h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--peers-blue);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.as-domain-block__tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-600);
  background: var(--peers-white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius-full);
  padding: 2px 10px;
}
.as-domain-block__desc {
  margin: 0;
  font-size: 12.5px;
  font-style: italic;
  color: var(--grey-600);
}
.as-domain-block .as-blueprint-grid { margin: 0; }

.as-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: 12.5px;
  color: var(--grey-700);
}
.as-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.as-legend__item .as-sys-chip { width: 20px; padding: 3px 0; }

/* ---------- 3. Visão abrangente por domínio ---------- */
.as-domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.as-domain-card {
  border: 1px solid var(--grey-300);
  border-left: 4px solid var(--peers-blue);
  border-radius: var(--radius-lg);
  background: var(--peers-white);
  padding: var(--space-3);
}
.as-domain-card h3 { margin: 0 0 6px; font-size: 15px; color: var(--peers-blue); }
.as-domain-card__systems {
  font-size: 12px;
  color: var(--grey-600);
  margin: 0 0 var(--space-2);
}
.as-domain-card p:last-child { margin: 0; font-size: 13.5px; color: var(--grey-700); }

/* ---------- 4. Transição evolutiva ---------- */
.as-transition-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
@media (max-width: 900px) {
  .as-transition-grid { grid-template-columns: 1fr; }
}
.as-transition-stage {
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  border: 1px solid var(--grey-300);
}
.as-transition-stage__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-2); }
.as-transition-stage__badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.as-transition-stage h3 { margin: 0; font-size: 15px; }
.as-transition-stage ul { margin: 0; padding-left: 18px; }
.as-transition-stage li { font-size: 13px; color: var(--grey-700); margin-bottom: 6px; }

.as-transition-stage--asis { background: var(--grey-100); }
.as-transition-stage--asis .as-transition-stage__badge { background: var(--grey-400); color: var(--peers-blue); }
.as-transition-stage--asis h3 { color: var(--grey-700); }

.as-transition-stage--transitoria { background: #fff8e6; border-color: #ffe0a3; }
.as-transition-stage--transitoria .as-transition-stage__badge { background: var(--warning-main); color: var(--peers-blue); }
.as-transition-stage--transitoria h3 { color: #7a5200; }

.as-transition-stage--futura { background: #eafff2; border-color: #b7f0cd; }
.as-transition-stage--futura .as-transition-stage__badge { background: var(--success-main); color: var(--peers-white); }
.as-transition-stage--futura h3 { color: #0f6b3a; }

/* ---------- Modo Apresentação: fontes maiores em tela cheia ----------
   No modo documento normal os tamanhos acima já são adequados para
   leitura de perto; em tela cheia projetada, ficam pequenos demais.
   clamp() com vh escala com a altura real da tela, mesmo padrão já usado
   em agendas-entrevistas.css/blueprint-sistemico-v2.css. */
.pmode-stage .report-section__lead { font-size: clamp(0.85rem, 1.8vh, 1.05rem); }
.pmode-stage .bs-lead { font-size: clamp(0.85rem, 1.8vh, 1.05rem); }

.pmode-stage .as-capability-lane__title { font-size: clamp(0.9rem, 1.9vh, 1.1rem); }
.pmode-stage .as-capability-lane__desc { font-size: clamp(0.72rem, 1.5vh, 0.9rem); }
.pmode-stage .as-capability-chip { font-size: clamp(0.72rem, 1.5vh, 0.9rem); padding: 6px 14px; }

.pmode-stage .as-blueprint-col h4 { font-size: clamp(0.85rem, 1.7vh, 1.05rem); padding: clamp(8px, 1.4vh, 14px); }
.pmode-stage .as-sys-chip { font-size: clamp(0.72rem, 1.5vh, 0.92rem); padding: clamp(5px, 0.9vh, 8px) clamp(10px, 1.3vh, 14px); }
.pmode-stage .as-blueprint-col__empty { font-size: clamp(0.72rem, 1.5vh, 0.9rem); }
.pmode-stage .as-domain-block__head h3 { font-size: clamp(0.95rem, 2vh, 1.2rem); }
.pmode-stage .as-domain-block__tag { font-size: clamp(0.65rem, 1.3vh, 0.8rem); }
.pmode-stage .as-domain-block__desc { font-size: clamp(0.72rem, 1.5vh, 0.9rem); }

.pmode-stage .as-domain-card h3 { font-size: clamp(1rem, 2.1vh, 1.3rem); }
.pmode-stage .as-domain-card__systems { font-size: clamp(0.72rem, 1.4vh, 0.9rem); }
.pmode-stage .as-domain-card p:last-child { font-size: clamp(0.8rem, 1.7vh, 1.05rem); }

.pmode-stage .as-transition-stage h3 { font-size: clamp(1rem, 2.1vh, 1.3rem); }
.pmode-stage .as-transition-stage__badge { font-size: clamp(0.7rem, 1.4vh, 0.85rem); }
.pmode-stage .as-transition-stage li { font-size: clamp(0.8rem, 1.7vh, 1.05rem); margin-bottom: clamp(4px, 1vh, 8px); }

.pmode-stage .report-table { font-size: clamp(0.82rem, 1.7vh, 1.05rem); }
.pmode-stage .report-table th,
.pmode-stage .report-table td { padding: clamp(8px, 1.4vh, 14px) clamp(10px, 1.4vh, 16px); }
.pmode-stage .bs-vertical-card__source { font-size: clamp(0.68rem, 1.3vh, 0.82rem); }