.report {
  max-width: 52rem;
}

.report-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 4);
}

.report-cards {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 2);
  padding: calc(var(--spacing-unit) * 5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
}

.report-card h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
}

.report-score {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand);
}

.report-score-muted {
  color: var(--color-muted-foreground);
}

.report-tag {
  align-self: flex-start;
  padding: 0 calc(var(--spacing-unit) * 2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-accent);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

.report-definitions {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 4);
  font-size: var(--text-sm);
}

.report-definitions dt {
  color: var(--color-muted-foreground);
}

.report-definitions dd {
  margin: 0;
}

@media (max-width: 30rem) {
  .report-definitions {
    grid-template-columns: 1fr;
  }
}

/* Plan de acción (punto de extensión): la siguiente acción del cliente, destacada con el color de marca. */
.action-plan {
  padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 5);
  border: 1px solid var(--color-brand-deep);
  border-left: 4px solid var(--color-brand);
  border-radius: var(--radius);
  background: var(--color-card);
}

.action-plan h2 {
  margin: 0;
}

.action-plan p {
  margin: 0;
}

.action-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit) * 3);
  align-items: center;
}

.action-plan-actions .button-primary,
.action-plan-actions .button-secondary {
  align-self: auto;
  justify-content: center;
}

.action-plan-status:empty {
  display: none;
}

@media (max-width: 30rem) {
  .action-plan-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

.action-plan-preparing {
  color: var(--color-muted-foreground);
}