/* Diagramas do relatório; estes estilos complementam os componentes gerais. */
.diagram { container-type: inline-size; margin: 24px 0; padding: 20px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); min-width: 0; }
.diagram figcaption { margin-bottom: 20px; }
.diagram figcaption strong { display: block; font-size: 18px; line-height: 1.5; }
.diagram figcaption p { margin: 8px 0 0; color: var(--content-secondary); font-size: 14px; }
.diagram-canvas { position: relative; min-width: 0; padding: 24px; }
.diagram .diagram-connections-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.diagram-connections-svg path { fill: none; stroke: var(--content-primary); stroke-width: 1.75; vector-effect: non-scaling-stroke; }
.diagram-connections-svg .diagram-edge--exception { stroke-dasharray: 4 4; }
.diagram-connections-svg .diagram-arrowhead { fill: var(--content-primary); stroke: none; }
.diagram-nodes { position: relative; display: grid; grid-template-columns: 1fr; gap: 48px; margin: 0; padding: 0; list-style: none; }
.diagram-node { min-width: 0; margin: 0; border: 1px solid var(--content-secondary); border-radius: 8px; background: var(--surface-bg); }
.diagram-node-link, .diagram-node-content { display: block; min-height: 44px; padding: 16px; color: var(--content-primary); text-decoration: none; }
.diagram-node-link:hover { background: var(--color-roxo-soft); color: var(--content-primary); border-radius: 8px; }
.diagram-node-code { display: block; margin-bottom: 8px; font: 500 14px/1.5 var(--font-mono); color: var(--color-roxo-dark); }
.diagram-node-title { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.diagram-node-description { display: block; font-size: 14px; line-height: 1.7; }
.diagram-node--action { border-left: 4px solid var(--brand-primary); }
.diagram-node--exception { border-style: dashed; }
.diagram-node--exception .diagram-node-code { color: var(--content-primary); }
.diagram-edge-label { position: absolute; z-index: 1; padding: 4px 8px; border: 1px solid var(--border-default); border-radius: 4px; background: var(--surface-bg); color: var(--content-primary); font-size: 14px; line-height: 1.5; pointer-events: none; }
.diagram-connections { margin: 20px 0 0; padding-left: 20px; font-size: 14px; color: var(--content-secondary); }
.diagram-connections li { margin-bottom: 8px; }
.diagram--inventory { grid-column: 1 / -1; width: 100%; }
.diagram-eyebrow { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-roxo-dark); }
.diagram .diagram-node-link { display: block; min-width: 0; height: 100%; text-decoration: none; }
.diagram-node--step { border-top: 3px solid var(--brand-primary); }
.diagram-node--decision { border: 2px solid var(--color-indigo); background: var(--color-perola-light); }
.diagram-node--pending { border-style: dashed; }
.diagram-node--outcome { background: var(--color-roxo-soft); }
.diagram-node-destination { display: block; margin-top: 12px; font-size: 12px; color: var(--color-roxo-dark); }
.diagram-node-description { font-size: 13px; line-height: 1.5; }
.diagram-node-title { font-size: 15px; line-height: 1.4; }
.diagram .diagram-relations { margin: 12px 0; border: 0; border-top: 1px solid var(--border-default); border-radius: 0; background: transparent; }
.diagram .diagram-relations > summary { display: list-item; padding: 12px 0; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--color-roxo-dark); }
.diagram-note { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--content-secondary); }
.diagram-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 12px; font-size: 13px; }
.diagram-sources a { display: inline-flex; align-items: center; min-height: 44px; }
.diagram--compact { padding: 0; margin: 24px 0; border: 0; background: transparent; }
.diagram--compact .diagram-node-link, .diagram--compact .diagram-node-content { padding: 12px; }
.diagram--compact .diagram-node-destination { margin-top: 4px; }
.diagram--compact .diagram-eyebrow { display: none; }
.diagram--compact .diagram-canvas { padding: 24px; }
.diagram--compact .diagram-nodes { gap: 48px; }
.diagram--compact .diagram-note { font-size: 12px; }
@media (max-width: 520px) {
  .diagram { padding: 12px; }
  .diagram-canvas { padding: 20px; }
  .diagram--compact { padding: 0; }
}
@media print {
  .diagram .diagram-relations { display: block; }
  .diagram-relations > :not(summary) { display: block !important; }
  .diagram-relations > summary { display: none !important; }
  .diagram-canvas { padding: 0; }
  .diagram-node-destination { display: none; }
  .diagram-sources a::after { content: none !important; }
}
@container (min-width: 640px) {
  .diagram-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
  .diagram-node { grid-column: auto; grid-row: auto; }
}
@container (min-width: 800px) {
  .diagram-nodes { grid-template-columns: repeat(var(--diagram-columns, 3), minmax(0, 1fr)); gap: 48px; }
  .diagram-node { grid-column: var(--node-column, auto); grid-row: var(--node-row, auto); }
}
@media (forced-colors: active) {
  .diagram, .diagram-node, .diagram-edge-label { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .diagram-node-link { color: LinkText; }
  .diagram-connections-svg path { stroke: CanvasText; }
  .diagram-connections-svg .diagram-arrowhead { fill: CanvasText; stroke: none; }
}
@media print {
  .diagram { container-type: normal; padding: 12pt; break-inside: auto; }
  .diagram .diagram-connections-svg, .diagram-edge-label { display: none !important; }
  .diagram-nodes { display: block; }
  .diagram-node { margin-bottom: 12pt; break-inside: avoid; }
  .diagram-node-link, .diagram-node-content { display: block; padding: 8pt; }
  .diagram-connections { display: block; font-size: 9pt; }
}