/* T063 - FactBox (Components/D365/FactBox). gate-3 §0.1.6 B1. */

.d365-factbox {
  width: 260px;
  flex-shrink: 0;
  border-left: 1px solid var(--m365-stroke-divider);
  background: var(--m365-surface-card);
  padding: var(--m365-space-3);
  overflow-y: auto;
}

.d365-factbox-title {
  font-size: var(--m365-fs-body-lg);
  font-weight: var(--m365-fw-semibold);
  margin-bottom: var(--m365-space-3);
  color: var(--m365-text-primary);
}

.d365-factbox-sections {
  display: flex;
  flex-direction: column;
  gap: var(--m365-space-1);
}

.d365-factbox-section {
  border-bottom: 1px solid var(--m365-stroke-divider);
}

.d365-factbox-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  padding: var(--m365-space-2) 0;
  font-size: var(--m365-fs-body);
  font-weight: var(--m365-fw-semibold);
  color: var(--m365-text-primary);
  text-align: left;
}

.d365-factbox-chevron {
  transition: transform 0.1s ease;
  color: var(--m365-text-secondary);
}

.d365-factbox-chevron.is-open {
  transform: rotate(180deg);
}

.d365-factbox-section-body {
  padding: 0 0 var(--m365-space-3);
  font-size: var(--m365-fs-body);
  color: var(--m365-text-primary);
}

.d365-factbox-section-empty {
  color: var(--m365-text-secondary);
  font-size: var(--m365-fs-caption);
}

/* Responsive (T165 adelantado): el FactBox es lo PRIMERO que colapsa. */
@media (max-width: 960px) {
  .d365-factbox {
    display: none;
  }
}