/**
 * GlobalCSS — Spacing
 * Tokens de gap/padding reutilizables.
 * Ref: design-style-guide.md §4 Espaciado y layout
 */

:root {
    --space-micro: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
}

/* Utility classes */
.gs-gap-micro  { gap: var(--space-micro); }
.gs-gap-xs     { gap: var(--space-xs); }
.gs-gap-sm     { gap: var(--space-sm); }
.gs-gap-md     { gap: var(--space-md); }
.gs-gap-lg     { gap: var(--space-lg); }
.gs-gap-xl     { gap: var(--space-xl); }

/* Layout containers */
.gs-layout-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.gs-layout-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Tab content padding — .tab-content loads after ObjectCSS, so we need .tab-content.gs-tab-content for specificity */
.tab-content.gs-tab-content {
    padding: var(--space-lg) var(--space-xl);
    flex-direction: column;
    gap: var(--space-xl);
}

.tab-content.gs-tab-content.active {
    display: flex;
}

@media (max-width: 768px) {
    .tab-content.gs-tab-content {
        padding: var(--space-md);
        gap: var(--space-md);
    }
}