/* /ayuda (help/show): a card per guide, its title and button side by side, its steps folded underneath */
.help-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);

  .btn {
    flex-shrink: 0;
  }
}

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

.help-steps {
  font-size: var(--text-sm);

  summary {
    cursor: pointer;
    color: var(--color-primary-text);
    font-weight: var(--weight-medium);
  }

  ol {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-left: var(--space-5);
    list-style: decimal;
    color: var(--color-text-muted);
  }

  strong {
    color: var(--color-text);
  }
}