@use "tokens" as *;

// Estado vacío (portado de kontuan; tokens adaptados a EdC).
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $space-8 $space-4;
  text-align: center;

  &__icon {
    margin-bottom: $space-4;
    color: $text-3;
    svg { width: 40px; height: 40px; }
  }

  &__title {
    font-size: $fs-18;
    font-weight: $k-fw-semibold;
    color: $text-1;
    margin: 0 0 $space-1;
  }

  &__description {
    font-size: $fs-14;
    color: $text-3;
    max-width: 360px;
  }

  &__action { margin-top: $space-5; }
}