/**
 * GlobalCSS — Typography
 * Escala tipográfica global con soporte para --app-text-scale.
 * Ref: design-style-guide.md §3 Tipografía
 *
 * Todos los tamaños escalan con el slider de Personalizar.
 * Los módulos usan var(--gs-font-*) en vez de valores hardcodeados.
 */

:root {
    /* ── Escala tipográfica completa ── */
    --gs-font-micro:   calc(0.5rem    * var(--app-text-scale, 1));  /*  8px */
    --gs-font-tiny:    calc(0.5625rem * var(--app-text-scale, 1));  /*  9px */
    --gs-font-small:   calc(0.625rem  * var(--app-text-scale, 1));  /* 10px */
    --gs-font-caption: calc(0.6875rem * var(--app-text-scale, 1));  /* 11px */
    --gs-font-label:   calc(0.75rem   * var(--app-text-scale, 1));  /* 12px */
    --gs-font-body:    calc(0.8125rem * var(--app-text-scale, 1));  /* 13px */
    --gs-font-heading: calc(0.875rem  * var(--app-text-scale, 1));  /* 14px */
    --gs-font-title:   calc(1.125rem  * var(--app-text-scale, 1));  /* 18px */
    --gs-font-value:   calc(1.15rem   * var(--app-text-scale, 1));  /* 18.4px */
}

/* Título de módulo */
.gs-title {
    font-size: var(--gs-font-title);
    font-weight: 600;
    color: var(--color-text, #1d1d1f);
    letter-spacing: -0.003em;
    line-height: 1.08;
    margin: 0;
}

/* Subtítulo / sección */
.gs-subtitle {
    font-size: var(--gs-font-heading);
    font-weight: 600;
    color: var(--color-text, #1d1d1f);
    line-height: 1.08;
    margin: 0;
}

/* Panel header h4 */
.gs-heading {
    font-size: var(--gs-font-heading);
    font-weight: 600;
    color: var(--color-text, #1d1d1f);
    letter-spacing: -0.01em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.gs-heading i {
    font-size: var(--gs-font-heading);
    color: var(--color-primary, #007aff);
    opacity: 0.7;
}

/* Body text */
.gs-text {
    font-size: var(--gs-font-body);
    font-weight: 400;
    color: var(--color-text, #1d1d1f);
    line-height: 1.45;
}

/* Label / hint */
.gs-label {
    font-size: var(--gs-font-label);
    font-weight: 500;
    color: var(--color-text-secondary, #6e6e73);
}

/* Caption / metadata */
.gs-caption {
    font-size: var(--gs-font-caption);
    font-weight: 400;
    color: var(--color-text-tertiary, #aeaeb2);
}

/* Valores KPI / totales */
.gs-value {
    font-size: var(--gs-font-value);
    font-weight: 700;
    color: var(--color-text, #1d1d1f);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Table header uppercase */
.gs-th-label {
    font-size: var(--gs-font-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #6e6e73);
}

/* Counter badge inline */
.gs-count {
    font-size: var(--gs-font-caption);
    font-weight: 500;
    color: var(--color-text-secondary, #6e6e73);
    white-space: nowrap;
}