/* =============================================================================
   TYPOGRAPHY NORMALIZE
   Alinea las utilidades de texto de Tailwind CDN con la escala tipográfica
   del Design System (variables.css).

   Fuente de verdad: static/css/design-system/variables.css
   Escala DS:
     --ds-font-size-2xs:  0.625rem   (10px)
     --ds-font-size-xs:   0.6875rem  (11px)
     --ds-font-size-sm:   0.75rem    (12px)
     --ds-font-size-base: 0.8125rem  (13px)
     --ds-font-size-md:   0.875rem   (14px)
     --ds-font-size-lg:   1rem       (16px)
     --ds-font-size-xl:   1.125rem   (18px)
     --ds-font-size-2xl:  1.25rem    (20px)
     --ds-font-size-3xl:  1.5rem     (24px)
     --ds-font-size-kpi:  1.75rem    (28px)

   !important es necesario porque Tailwind CDN inyecta <style> inline
   con alta especificidad que no puede ser superada por CSS externo.
   ============================================================================= */


/* ─── Mapeo: Tailwind text-* → Escala DS ─── */

.text-xs {
    font-size: var(--ds-font-size-sm) !important;   /* 12px (sin cambio visual) */
}

.text-sm {
    font-size: var(--ds-font-size-sm) !important;    /* 12px (TW 14px → se compacta) */
}

.text-base {
    font-size: var(--ds-font-size-sm) !important;    /* 12px (TW 16px → se compacta) */
}

.text-lg {
    font-size: var(--ds-font-size-lg) !important;   /* 16px (sin cambio visual) */
}

.text-xl {
    font-size: var(--ds-font-size-xl) !important;   /* 18px (era 20px → se compacta) */
}

.text-2xl {
    font-size: var(--ds-font-size-2xl) !important;  /* 20px (era 24px → se compacta) */
}

.text-3xl {
    font-size: var(--ds-font-size-3xl) !important;  /* 24px (era 30px → se compacta) */
}


/* ─── Herencia: Párrafos sin clase de tamaño dentro de contenedores ───
   Corrige el caso más común: <p class="text-gray-800"> sin text-sm
   dentro de cards o contenedores blancos, que heredaba 16px de Tailwind.
   ─────────────────────────────────────────────────────────────────────── */

.clean-card p:not([class*="text-"]),
.clean-card dd:not([class*="text-"]),
.bg-white p:not([class*="text-"]),
.main-content p:not([class*="text-"]) {
    font-size: var(--ds-font-size-sm); /* 12px */
}

/* Labels y texto secundario sin clase explícita de tamaño */
.clean-card span:not([class*="text-"]):not([class*="clean-"]):not([class*="badge"]):not([class*="ds-"]),
.bg-white span:not([class*="text-"]):not([class*="clean-"]):not([class*="badge"]):not([class*="ds-"]) {
    font-size: var(--ds-font-size-sm); /* 12px */
}