@charset "UTF-8";
/**
 * Do not edit directly, this file was auto-generated.
 *
 * Unidades: primitivos unitless, semántico/componente con calc(var(--p-...) * 1px)
 * (o * 1rem / 16 para font-size). REM_BASE = 16 (browser default).
 */

  :root {
  --fry-s-color-content-neutral-strong: var(--fry-p-color-yanbal-black-100); /** Color de contenido neutro de máxima prominencia. Texto principal y titulares críticos. */
  --fry-s-color-content-neutral-subtle: var(--fry-p-color-yanbal-black-50); /** Color de contenido neutro de baja prominencia. Texto secundario — metadatos y captions. */
  --fry-s-color-content-neutral-inverse: var(--fry-p-color-yanbal-black-10); /** Color de contenido neutro sobre superficies oscuras. */
  --fry-s-color-content-neutral-disabled: var(--fry-p-color-yanbal-black-40); /** Color de contenido neutro en estado deshabilitado. */
  --fry-s-color-content-neutral-base: var(--fry-p-color-yanbal-black-70); /** Color de contenido neutro estándar. Texto de párrafo y descripciones. */
  --fry-s-color-content-neutral-soft: var(--fry-p-color-yanbal-black-30); /** Color de contenido neutro mínimo. Texto terciario y placeholders. */
  --fry-s-color-content-neutral-disabled-soft: var(--fry-p-color-yanbal-black-20); /** Color de contenido neutro suave en estado deshabilitado. */
  --fry-s-color-content-action-primary-default: var(--fry-p-color-yanbal-black-10); /** Color de contenido del Call to Action primario. */
  --fry-s-color-content-action-primary-hover: var(--fry-p-color-yanbal-orange-20); /** Estado hover del contenido del Call to Action primario. */
  --fry-s-color-content-action-primary-pressed: var(--fry-p-color-yanbal-orange-30); /** Estado pressed del contenido del Call to Action primario. */
  --fry-s-color-content-action-primary-inverse: var(--fry-p-color-yanbal-black-100); /** Color de contenido del Call to Action primario sobre superficie oscura. */
  --fry-s-color-content-action-primary-inverse-hover: var(--fry-p-color-yanbal-black-80); /** Estado hover del contenido del Call to Action primario sobre superficie oscura. */
  --fry-s-color-content-action-primary-inverse-pressed: var(--fry-p-color-yanbal-black-60); /** Estado pressed del contenido del Call to Action primario sobre superficie oscura. */
  --fry-s-color-content-action-secondary-default: var(--fry-p-color-yanbal-black-100); /** Color de contenido de la acción secundaria. */
  --fry-s-color-content-action-secondary-hover: var(--fry-p-color-yanbal-black-80); /** Estado hover del contenido de la acción secundaria. */
  --fry-s-color-content-action-secondary-pressed: var(--fry-p-color-yanbal-black-60); /** Estado pressed del contenido de la acción secundaria. */
  --fry-s-color-content-action-secondary-inverse: var(--fry-p-color-yanbal-black-10); /** Color de contenido de la acción secundaria sobre superficie oscura. */
  --fry-s-color-content-action-secondary-inverse-hover: var(--fry-p-color-yanbal-black-20); /** Estado hover del contenido de la acción secundaria sobre superficie oscura. */
  --fry-s-color-content-action-secondary-inverse-pressed: var(--fry-p-color-yanbal-black-30); /** Estado pressed del contenido de la acción secundaria sobre superficie oscura. */
  --fry-s-color-content-action-ghost-default: var(--fry-p-color-yanbal-orange-80); /** Color de contenido del botón fantasma. */
  --fry-s-color-content-action-ghost-hover: var(--fry-p-color-yanbal-orange-90); /** Estado hover del contenido del botón fantasma. */
  --fry-s-color-content-action-ghost-pressed: var(--fry-p-color-yanbal-orange-100); /** Estado pressed del contenido del botón fantasma. */
  --fry-s-color-content-action-ghost-inverse: var(--fry-p-color-yanbal-black-10); /** Color de contenido del botón fantasma sobre superficie oscura. */
  --fry-s-color-content-action-ghost-inverse-hover: var(--fry-p-color-yanbal-black-20); /** Estado hover del contenido del botón fantasma sobre superficie oscura. */
  --fry-s-color-content-action-ghost-inverse-pressed: var(--fry-p-color-yanbal-black-30); /** Estado pressed del contenido del botón fantasma sobre superficie oscura. */
  --fry-s-color-content-action-link-default: var(--fry-p-color-yanbal-black-100); /** Color de contenido de hipervínculos textuales. */
  --fry-s-color-content-action-link-hover: var(--fry-p-color-yanbal-black-70); /** Estado hover del contenido de hipervínculos textuales. */
  --fry-s-color-content-action-link-pressed: var(--fry-p-color-yanbal-black-40); /** Estado pressed del contenido de hipervínculos textuales. */
  --fry-s-color-content-action-link-inverse: var(--fry-p-color-yanbal-black-10); /** Color de contenido de hipervínculos textuales sobre superficie oscura. */
  --fry-s-color-content-action-link-inverse-hover: var(--fry-p-color-yanbal-black-40); /** Estado hover del contenido de hipervínculos textuales sobre superficie oscura. */
  --fry-s-color-content-action-link-inverse-pressed: var(--fry-p-color-yanbal-black-70); /** Estado pressed del contenido de hipervínculos textuales sobre superficie oscura. */
  --fry-s-color-content-action-destructive-default: var(--fry-p-color-yanbal-black-10); /** Color de contenido de acciones destructivas e irreversibles. */
  --fry-s-color-content-action-destructive-hover: var(--fry-p-color-crimson-10); /** Estado hover del contenido de acción destructiva. */
  --fry-s-color-content-action-destructive-pressed: var(--fry-p-color-crimson-20); /** Estado pressed del contenido de acción destructiva. */
  --fry-s-color-content-feedback-info-strong: var(--fry-p-color-blue-100); /** Color de contenido informativo — tono de alta prominencia. */
  --fry-s-color-content-feedback-info-base: var(--fry-p-color-blue-70); /** Color de contenido informativo — tono base. */
  --fry-s-color-content-feedback-info-soft: var(--fry-p-color-blue-30); /** Color de contenido informativo — tono suave. */
  --fry-s-color-content-feedback-info-subtle: var(--fry-p-color-blue-50); /** Color de contenido informativo — tono sutil. */
  --fry-s-color-content-feedback-success-strong: var(--fry-p-color-mint-100); /** Color de contenido de confirmación — tono de alta prominencia. */
  --fry-s-color-content-feedback-success-base: var(--fry-p-color-mint-70); /** Color de contenido de confirmación — tono base. */
  --fry-s-color-content-feedback-success-soft: var(--fry-p-color-mint-30); /** Color de contenido de confirmación — tono suave. */
  --fry-s-color-content-feedback-success-subtle: var(--fry-p-color-mint-50); /** Color de contenido de confirmación — tono sutil. */
  --fry-s-color-content-feedback-warning-strong: var(--fry-p-color-marigold-100); /** Color de contenido de advertencia — tono de alta prominencia. */
  --fry-s-color-content-feedback-warning-base: var(--fry-p-color-marigold-70); /** Color de contenido de advertencia — tono base. */
  --fry-s-color-content-feedback-warning-soft: var(--fry-p-color-marigold-30); /** Color de contenido de advertencia — tono suave. */
  --fry-s-color-content-feedback-warning-subtle: var(--fry-p-color-marigold-50); /** Color de contenido de advertencia — tono sutil. */
  --fry-s-color-content-feedback-danger-strong: var(--fry-p-color-crimson-100); /** Color de contenido de error — tono de alta prominencia. */
  --fry-s-color-content-feedback-danger-base: var(--fry-p-color-crimson-70); /** Color de contenido de error — tono base. */
  --fry-s-color-content-feedback-danger-soft: var(--fry-p-color-crimson-30); /** Color de contenido de error — tono suave. */
  --fry-s-color-content-feedback-danger-subtle: var(--fry-p-color-crimson-50); /** Color de contenido de error — tono sutil. */
  --fry-s-color-content-feedback-neutral-strong: var(--fry-p-color-yanbal-black-100); /** Color de contenido de feedback sin carga semántica. */
  --fry-s-color-content-status-default-solid: var(--fry-p-color-yanbal-black-10); /** Color de contenido para estado sin clasificar — variante sólida. */
  --fry-s-color-content-status-default-soft: var(--fry-p-color-yanbal-black-90); /** Color de contenido para estado sin clasificar — variante suave. */
  --fry-s-color-content-status-default-subtle: var(--fry-p-color-yanbal-black-40); /** Color de contenido para estado sin clasificar — variante sutil. */
  --fry-s-color-content-status-completed-solid: var(--fry-p-color-mint-10); /** Color de contenido para estado completado o activo — variante sólida. */
  --fry-s-color-content-status-completed-soft: var(--fry-p-color-mint-90); /** Color de contenido para estado completado o activo — variante suave. */
  --fry-s-color-content-status-completed-subtle: var(--fry-p-color-mint-40); /** Color de contenido para estado completado o activo — variante sutil. */
  --fry-s-color-content-status-risk-solid: var(--fry-p-color-marigold-10); /** Color de contenido para estado en riesgo o inactivo — variante sólida. */
  --fry-s-color-content-status-risk-soft: var(--fry-p-color-marigold-90); /** Color de contenido para estado en riesgo o inactivo — variante suave. */
  --fry-s-color-content-status-risk-subtle: var(--fry-p-color-marigold-40); /** Color de contenido para estado en riesgo o inactivo — variante sutil. */
  --fry-s-color-content-status-blocked-solid: var(--fry-p-color-crimson-10); /** Color de contenido para estado bloqueado o con deuda — variante sólida. */
  --fry-s-color-content-status-blocked-soft: var(--fry-p-color-crimson-90); /** Color de contenido para estado bloqueado o con deuda — variante suave. */
  --fry-s-color-content-status-blocked-subtle: var(--fry-p-color-crimson-40); /** Color de contenido para estado bloqueado o con deuda — variante sutil. */
  --fry-s-color-content-status-new-solid: var(--fry-p-color-blue-10); /** Color de contenido para estado nuevo o recién ingresado — variante sólida. */
  --fry-s-color-content-status-new-soft: var(--fry-p-color-blue-90); /** Color de contenido para estado nuevo o recién ingresado — variante suave. */
  --fry-s-color-content-status-new-subtle: var(--fry-p-color-blue-40); /** Color de contenido para estado nuevo o recién ingresado — variante sutil. */
  --fry-s-color-content-status-reenroll-solid: var(--fry-p-color-wine-10); /** Color de contenido para estado de reincorporación a Yanbal — variante sólida. */
  --fry-s-color-content-status-reenroll-soft: var(--fry-p-color-wine-90); /** Color de contenido para estado de reincorporación a Yanbal — variante suave. */
  --fry-s-color-content-status-reenroll-subtle: var(--fry-p-color-wine-40); /** Color de contenido para estado de reincorporación a Yanbal — variante sutil. */
  --fry-s-color-content-status-brand-solid: var(--fry-p-color-yanbal-orange-10); /** Color de contenido para estado de reincorporación a Yanbal — variante sólida. */
  --fry-s-color-content-status-brand-subtle: var(--fry-p-color-yanbal-orange-40); /** Color de contenido para estado de reincorporación a Yanbal — variante sutil. */
  --fry-s-color-content-status-brand-soft: var(--fry-p-color-yanbal-orange-90); /** Color de contenido para estado de reincorporación a Yanbal — variante suave. */
  --fry-s-color-content-messaging-base: var(--fry-p-color-yanbal-black-10); /** Color de contenido sobre superficie de comunicación. */
  --fry-s-color-content-messaging-inverse: var(--fry-p-color-yanbal-black-100); /** Color de contenido sobre superficie de comunicación oscura. */
  --fry-s-color-content-state-selected-default: var(--fry-p-color-yanbal-black-10); /** Color de contenido del control seleccionado. */
  --fry-s-color-content-state-selected-hover: var(--fry-p-color-yanbal-black-20); /** Estado hover del contenido del control seleccionado. */
  --fry-s-color-content-state-selected-pressed: var(--fry-p-color-yanbal-black-30); /** Estado pressed del contenido del control seleccionado. */
  --fry-s-color-content-state-unselected-default: var(--fry-p-color-yanbal-black-100); /** Color de contenido del control no seleccionado. */
  --fry-s-color-content-state-unselected-hover: var(--fry-p-color-yanbal-black-90); /** Estado hover del contenido del control no seleccionado. */
  --fry-s-color-content-state-unselected-pressed: var(--fry-p-color-yanbal-black-80); /** Estado pressed del contenido del control no seleccionado. */
  --fry-s-color-content-state-inactive-default: var(--fry-p-color-yanbal-black-100); /** Color de contenido del control disponible pero inactivo. */
  --fry-s-color-content-state-inactive-hover: var(--fry-p-color-yanbal-black-90); /** Estado hover del contenido del control disponible pero inactivo. */
  --fry-s-color-content-state-inactive-pressed: var(--fry-p-color-yanbal-black-80); /** Estado pressed del contenido del control disponible pero inactivo. */
  --fry-s-color-content-state-active-default: var(--fry-p-color-yanbal-orange-80); /** Color de contenido del control activo. */
  --fry-s-color-content-state-active-hover: var(--fry-p-color-yanbal-orange-90); /** Estado hover del contenido del control activo. */
  --fry-s-color-content-state-active-pressed: var(--fry-p-color-yanbal-orange-100); /** Estado pressed del contenido del control activo. */
  --fry-s-color-content-interaction-empty-default: var(--fry-p-color-yanbal-black-100); /** Color de contenido en zona interactiva vacía — estado por defecto. */
  --fry-s-color-content-interaction-empty-hover: var(--fry-p-color-yanbal-black-80); /** Estado hover del contenido en zona interactiva vacía. */
  --fry-s-color-content-interaction-empty-pressed: var(--fry-p-color-yanbal-black-60); /** Estado pressed del contenido en zona interactiva vacía. */
  --fry-s-color-content-interaction-empty-subtle: var(--fry-p-color-yanbal-black-50); /** Color de contenido en zona interactiva vacía — variante sutil. */
  --fry-s-color-content-interaction-filled-default: var(--fry-p-color-yanbal-black-10); /** Color de contenido en zona interactiva con contenido — estado por defecto. */
  --fry-s-color-content-interaction-filled-hover: var(--fry-p-color-yanbal-black-20); /** Estado hover del contenido en zona interactiva con contenido. */
  --fry-s-color-content-interaction-filled-pressed: var(--fry-p-color-yanbal-black-30); /** Estado pressed del contenido en zona interactiva con contenido. */
  --fry-s-color-surface-neutral-strong: var(--fry-p-color-yanbal-black-70); /** Superficie neutra de alta prominencia. */
  --fry-s-color-surface-neutral-soft: var(--fry-p-color-yanbal-black-30); /** Superficie neutra de segunda jerarquía. */
  --fry-s-color-surface-neutral-disabled: var(--fry-p-color-yanbal-black-30); /** Superficie neutra en estado deshabilitado. */
  --fry-s-color-surface-neutral-base: var(--fry-p-color-yanbal-black-10); /** Superficie neutra base — fondo principal de página. */
  --fry-s-color-surface-neutral-inverse: var(--fry-p-color-yanbal-black-100); /** Superficie neutra oscura — modo inverso. */
  --fry-s-color-surface-neutral-skeleton-start: var(--fry-p-color-yanbal-black-20); /** Extremo inicial del gradiente de skeleton loading. */
  --fry-s-color-surface-neutral-skeleton-end: var(--fry-p-color-yanbal-black-30); /** Extremo final del gradiente de skeleton loading. */
  --fry-s-color-surface-neutral-subtle: var(--fry-p-color-yanbal-black-20); /** Superficie neutra de primera jerarquía. */
  --fry-s-color-surface-action-primary-default: var(--fry-p-color-yanbal-orange-80); /** Superficie del Call to Action primario. */
  --fry-s-color-surface-action-primary-hover: var(--fry-p-color-yanbal-orange-90); /** Estado hover de la superficie del Call to Action primario. */
  --fry-s-color-surface-action-primary-pressed: var(--fry-p-color-yanbal-orange-100); /** Estado pressed de la superficie del Call to Action primario. */
  --fry-s-color-surface-action-primary-inverse: var(--fry-p-color-yanbal-black-10); /** Superficie del Call to Action primario sobre fondo oscuro. */
  --fry-s-color-surface-action-primary-inverse-hover: var(--fry-p-color-yanbal-black-20); /** Estado hover de la superficie del Call to Action primario sobre fondo oscuro. */
  --fry-s-color-surface-action-primary-inverse-pressed: var(--fry-p-color-yanbal-black-30); /** Estado pressed de la superficie del Call to Action primario sobre fondo oscuro. */
  --fry-s-color-surface-action-secondary-default: var(--fry-p-color-yanbal-black-10); /** Superficie de la acción secundaria. */
  --fry-s-color-surface-action-secondary-hover: var(--fry-p-color-yanbal-black-20); /** Estado hover de la superficie de la acción secundaria. */
  --fry-s-color-surface-action-secondary-pressed: var(--fry-p-color-yanbal-black-30); /** Estado pressed de la superficie de la acción secundaria. */
  --fry-s-color-surface-action-secondary-inverse: var(--fry-p-color-yanbal-black-100); /** Superficie de la acción secundaria sobre fondo oscuro. */
  --fry-s-color-surface-action-secondary-inverse-hover: var(--fry-p-color-yanbal-black-80); /** Estado hover de la superficie de la acción secundaria sobre fondo oscuro. */
  --fry-s-color-surface-action-secondary-inverse-pressed: var(--fry-p-color-yanbal-black-60); /** Estado pressed de la superficie de la acción secundaria sobre fondo oscuro. */
  --fry-s-color-surface-action-destructive-default: var(--fry-p-color-crimson-60); /** Superficie de acción destructiva e irreversible. */
  --fry-s-color-surface-action-destructive-hover: var(--fry-p-color-crimson-80); /** Estado hover de la superficie de acción destructiva. */
  --fry-s-color-surface-action-destructive-pressed: var(--fry-p-color-crimson-100); /** Estado pressed de la superficie de acción destructiva. */
  --fry-s-color-surface-action-ghost-default: var(--fry-p-color-yanbal-black-10); /** Superficie del botón fantasma. */
  --fry-s-color-surface-action-ghost-hover: var(--fry-p-color-yanbal-orange-10); /** Estado hover de la superficie del botón fantasma. */
  --fry-s-color-surface-action-ghost-pressed: var(--fry-p-color-yanbal-orange-20); /** Estado pressed de la superficie del botón fantasma. */
  --fry-s-color-surface-action-ghost-inverse: var(--fry-p-color-yanbal-black-100); /** Superficie del botón fantasma sobre fondo oscuro. */
  --fry-s-color-surface-action-ghost-inverse-hover: var(--fry-p-color-yanbal-black-80); /** Estado hover de la superficie del botón fantasma sobre fondo oscuro. */
  --fry-s-color-surface-action-ghost-inverse-pressed: var(--fry-p-color-yanbal-black-60); /** Estado pressed de la superficie del botón fantasma sobre fondo oscuro. */
  --fry-s-color-surface-feedback-info-base: var(--fry-p-color-blue-10); /** Superficie de mensaje informativo. */
  --fry-s-color-surface-feedback-success-base: var(--fry-p-color-mint-10); /** Superficie de mensaje de confirmación. */
  --fry-s-color-surface-feedback-warning-base: var(--fry-p-color-marigold-10); /** Superficie de mensaje de advertencia. */
  --fry-s-color-surface-feedback-danger-base: var(--fry-p-color-crimson-10); /** Superficie de mensaje de error. */
  --fry-s-color-surface-feedback-neutral-base: var(--fry-p-color-yanbal-black-20); /** Superficie de feedback sin carga semántica. */
  --fry-s-color-surface-overlay-neutral-10: var(--fry-p-color-yanbal-black-overlay-10); /** Capa traslúcida de Yanbal Black al 10%. */
  --fry-s-color-surface-overlay-neutral-20: var(--fry-p-color-yanbal-black-overlay-20); /** Capa traslúcida de Yanbal Black al 20%. */
  --fry-s-color-surface-overlay-neutral-80: var(--fry-p-color-yanbal-black-overlay-80); /** Capa traslúcida de Yanbal Black al 80%. */
  --fry-s-color-surface-overlay-neutral-40: var(--fry-p-color-yanbal-black-overlay-40); /** Capa traslúcida de Yanbal Black al 40%. */
  --fry-s-color-surface-overlay-neutral-1: var(--fry-p-color-yanbal-black-overlay-1); /** Capa traslúcida de Yanbal Black al 10%. */
  --fry-s-color-surface-overlay-action-10: var(--fry-p-color-yanbal-orange-overlay-10); /** Capa traslúcida de Yanbal Orange al 10%. */
  --fry-s-color-surface-overlay-action-20: var(--fry-p-color-yanbal-orange-overlay-20); /** Capa traslúcida de Yanbal Orange al 20%. */
  --fry-s-color-surface-status-default-solid: var(--fry-p-color-yanbal-black-100); /** Superficie para estado sin clasificar — variante sólida. */
  --fry-s-color-surface-status-default-soft: var(--fry-p-color-yanbal-black-20); /** Superficie para estado sin clasificar — variante suave. */
  --fry-s-color-surface-status-completed-solid: var(--fry-p-color-mint-70); /** Superficie para estado completado o activo — variante sólida. */
  --fry-s-color-surface-status-completed-soft: var(--fry-p-color-mint-20); /** Superficie para estado completado o activo — variante suave. */
  --fry-s-color-surface-status-risk-solid: var(--fry-p-color-marigold-70); /** Superficie para estado en riesgo o inactivo — variante sólida. */
  --fry-s-color-surface-status-risk-soft: var(--fry-p-color-marigold-10); /** Superficie para estado en riesgo o inactivo — variante suave. */
  --fry-s-color-surface-status-risk-base: var(--fry-p-color-marigold-20); /** Superficie para estado en riesgo o inactivo — variante suave. */
  --fry-s-color-surface-status-blocked-solid: var(--fry-p-color-crimson-70); /** Superficie para estado bloqueado o con deuda — variante sólida. */
  --fry-s-color-surface-status-blocked-soft: var(--fry-p-color-crimson-20); /** Superficie para estado bloqueado o con deuda — variante suave. */
  --fry-s-color-surface-status-new-solid: var(--fry-p-color-blue-70); /** Superficie para estado nuevo o recién incorporado — variante sólida. */
  --fry-s-color-surface-status-new-soft: var(--fry-p-color-blue-20); /** Superficie para estado nuevo o recién incorporado — variante suave. */
  --fry-s-color-surface-status-reenroll-solid: var(--fry-p-color-wine-70); /** Superficie para estado de reincorporación a Yanbal — variante sólida. */
  --fry-s-color-surface-status-reenroll-soft: var(--fry-p-color-wine-20); /** Superficie para estado de reincorporación a Yanbal — variante suave. */
  --fry-s-color-surface-status-brand-solid: var(--fry-p-color-yanbal-orange-80); /** Superficie para estado de reincorporación a Yanbal — variante sólida. */
  --fry-s-color-surface-status-brand-soft: var(--fry-p-color-yanbal-orange-20); /** Superficie para estado de reincorporación a Yanbal — variante suave. */
  --fry-s-color-surface-messaging-base: var(--fry-p-color-yanbal-black-100); /** Superficie de banner o módulo de comunicación. */
  --fry-s-color-surface-messaging-inverse: var(--fry-p-color-yanbal-black-10); /** Superficie de banner o módulo de comunicación — modo inverso. */
  --fry-s-color-surface-system-scrollbar-track: var(--fry-p-color-yanbal-black-20); /** Track de scrollbar personalizado. */
  --fry-s-color-surface-system-scrollbar-thumb: var(--fry-p-color-yanbal-black-30); /** Thumb de scrollbar personalizado. */
  --fry-s-color-surface-system-loading: var(--fry-p-color-bone-10); /** Superficie de pantallas de carga global. */
  --fry-s-color-surface-state-unselected-default: var(--fry-p-color-yanbal-black-10); /** Superficie del control no seleccionado. */
  --fry-s-color-surface-state-unselected-hover: var(--fry-p-color-yanbal-black-20); /** Estado hover de la superficie del control no seleccionado. */
  --fry-s-color-surface-state-unselected-pressed: var(--fry-p-color-yanbal-black-30); /** Estado pressed de la superficie del control no seleccionado. */
  --fry-s-color-surface-state-selected-default: var(--fry-p-color-yanbal-black-100); /** Superficie del control seleccionado. */
  --fry-s-color-surface-state-selected-hover: var(--fry-p-color-yanbal-black-90); /** Estado hover de la superficie del control seleccionado. */
  --fry-s-color-surface-state-selected-pressed: var(--fry-p-color-yanbal-black-80); /** Estado pressed de la superficie del control seleccionado. */
  --fry-s-color-surface-interaction-empty-default: var(--fry-p-color-yanbal-black-20); /** Superficie de zona interactiva vacía — estado por defecto. */
  --fry-s-color-surface-interaction-empty-hover: var(--fry-p-color-yanbal-black-30); /** Estado hover de la superficie de zona interactiva vacía. */
  --fry-s-color-surface-interaction-empty-pressed: var(--fry-p-color-yanbal-black-40); /** Estado pressed de la superficie de zona interactiva vacía. */
  --fry-s-color-surface-interaction-empty-subtle: var(--fry-p-color-yanbal-black-10); /** Superficie de zona interactiva vacía — variante sutil. */
  --fry-s-color-surface-interaction-filled-default: var(--fry-p-color-yanbal-black-100); /** Superficie de zona interactiva con contenido — estado por defecto. */
  --fry-s-color-surface-interaction-filled-hover: var(--fry-p-color-yanbal-black-80); /** Estado hover de la superficie de zona interactiva con contenido. */
  --fry-s-color-surface-interaction-filled-pressed: var(--fry-p-color-yanbal-black-60); /** Estado pressed de la superficie de zona interactiva con contenido. */
  --fry-s-color-surface-navigation-active-default: var(--fry-p-color-yanbal-orange-80); /** Superficie de navegación activa. */
  --fry-s-color-surface-navigation-active-hover: var(--fry-p-color-yanbal-orange-90); /** Estado hover de la superficie de navegación activa. */
  --fry-s-color-surface-navigation-active-pressed: var(--fry-p-color-yanbal-orange-100); /** Estado pressed de la superficie de navegación activa. */
  --fry-s-color-surface-navigation-inactive-default: var(--fry-p-color-yanbal-black-20); /** Superficie de navegación disponible pero inactiva. */
  --fry-s-color-surface-navigation-inactive-hover: var(--fry-p-color-yanbal-black-30); /** Estado hover de la superficie de navegación disponible pero inactiva. */
  --fry-s-color-surface-navigation-inactive-pressed: var(--fry-p-color-yanbal-black-40); /** Estado pressed de la superficie de navegación disponible pero inactiva. */
  --fry-s-color-surface-navigation-menu-default: var(--fry-p-color-pearl-20); /** Superficie informativa — estado por defecto. */
  --fry-s-color-surface-navigation-menu-hover: var(--fry-p-color-pearl-50); /** Estado hover de la superficie informativa. */
  --fry-s-color-surface-navigation-menu-pressed: var(--fry-p-color-pearl-80); /** Estado pressed de la superficie informativa. */
  --fry-s-color-surface-informative-default: var(--fry-p-color-pearl-20); /** Superficie informativa — estado por defecto. */
  --fry-s-color-surface-informative-hover: var(--fry-p-color-pearl-50); /** Estado hover de la superficie informativa. */
  --fry-s-color-surface-informative-pressed: var(--fry-p-color-pearl-80); /** Estado pressed de la superficie informativa. */
  --fry-s-color-surface-informative-subtle: var(--fry-p-color-pearl-20); /** Superficie informativa — estado por defecto. */
  --fry-s-color-surface-informative-base: var(--fry-p-color-pearl-50); /** Estado hover de la superficie informativa. */
  --fry-s-color-surface-informative-dark: var(--fry-p-color-pearl-100); /** Estado pressed de la superficie informativa. */
  --fry-s-color-surface-informative-soft: var(--fry-p-color-pearl-40); /** Superficie informativa — estado por defecto. */
  --fry-s-color-surface-informative-strong: var(--fry-p-color-pearl-70); /** Estado hover de la superficie informativa. */
  --fry-s-color-border-neutral-strong: var(--fry-p-color-yanbal-black-100); /** Borde neutro de alta prominencia. */
  --fry-s-color-border-neutral-soft: var(--fry-p-color-yanbal-black-40); /** Borde neutro suave — separador de baja prominencia. */
  --fry-s-color-border-neutral-disabled: var(--fry-p-color-yanbal-black-50); /** Borde neutro en estado deshabilitado. */
  --fry-s-color-border-neutral-base: var(--fry-p-color-yanbal-black-70); /** Borde neutro estándar. */
  --fry-s-color-border-neutral-subtle: var(--fry-p-color-yanbal-black-20); /** Borde neutro sutil — separador casi imperceptible. */
  --fry-s-color-border-system-focus: var(--fry-p-color-blue-60); /** Focus ring de accesibilidad. */
  --fry-s-color-border-feedback-info-soft: var(--fry-p-color-blue-60); /** Borde de mensaje informativo — tono suave. */
  --fry-s-color-border-feedback-success-soft: var(--fry-p-color-mint-60); /** Borde de mensaje de confirmación — tono suave. */
  --fry-s-color-border-feedback-success-base: var(--fry-p-color-mint-80); /** Borde de mensaje de confirmación — tono base. */
  --fry-s-color-border-feedback-warning-soft: var(--fry-p-color-marigold-60); /** Borde de mensaje de advertencia — tono suave. */
  --fry-s-color-border-feedback-danger-soft: var(--fry-p-color-crimson-60); /** Borde de mensaje de error — tono suave. */
  --fry-s-color-border-feedback-danger-base: var(--fry-p-color-crimson-80); /** Borde de mensaje de error — tono base. */
  --fry-s-color-border-feedback-neutral-strong: var(--fry-p-color-yanbal-black-100); /** Borde de feedback sin carga semántica. */
  --fry-s-color-border-action-secondary-default: var(--fry-p-color-yanbal-black-100); /** Outline del botón secundario. */
  --fry-s-color-border-action-secondary-hover: var(--fry-p-color-yanbal-black-70); /** Estado hover del outline del botón secundario. */
  --fry-s-color-border-action-secondary-pressed: var(--fry-p-color-yanbal-black-50); /** Estado pressed del outline del botón secundario. */
  --fry-s-color-border-action-secondary-inverse-hover: var(--fry-p-color-yanbal-black-30); /** Estado hover del outline del botón secundario sobre fondo oscuro. */
  --fry-s-color-border-action-secondary-inverse: var(--fry-p-color-yanbal-black-10); /** Outline del botón secundario sobre fondo oscuro. */
  --fry-s-color-border-action-secondary-inverse-pressed: var(--fry-p-color-yanbal-black-50); /** Estado pressed del outline del botón secundario sobre fondo oscuro. */
  --fry-s-color-border-status-default-soft: var(--fry-p-color-yanbal-black-50); /** Outline de badge o tag sin clasificar. */
  --fry-s-color-border-status-completed-soft: var(--fry-p-color-mint-50); /** Outline de badge o tag completado o activo. */
  --fry-s-color-border-status-risk-soft: var(--fry-p-color-marigold-50); /** Outline de badge o tag en riesgo o inactivo. */
  --fry-s-color-border-status-blocked-soft: var(--fry-p-color-crimson-50); /** Outline de badge o tag bloqueado o con deuda. */
  --fry-s-color-border-status-informative-soft: var(--fry-p-color-blue-50); /** Outline de badge o tag informativo. */
  --fry-s-color-border-status-reenroll-soft: var(--fry-p-color-wine-50); /** Outline de badge o tag de reincorporación a Yanbal. */
  --fry-s-color-border-status-brand-soft: var(--fry-p-color-yanbal-orange-50); /** Outline de badge o tag de reincorporación a Yanbal. */
  --fry-s-color-border-state-unselected-default: var(--fry-p-color-yanbal-black-100); /** Outline del control no seleccionado. */
  --fry-s-color-border-state-unselected-hover: var(--fry-p-color-yanbal-black-90); /** Estado hover del outline del control no seleccionado. */
  --fry-s-color-border-state-unselected-pressed: var(--fry-p-color-yanbal-black-80); /** Estado pressed del outline del control no seleccionado. */
  --fry-s-color-border-state-inactive-default: var(--fry-p-color-yanbal-black-100); /** Outline del control inactivo. */
  --fry-s-color-border-state-inactive-hover: var(--fry-p-color-yanbal-black-90); /** Estado hover del outline del control inactivo. */
  --fry-s-color-border-state-inactive-pressed: var(--fry-p-color-yanbal-black-80); /** Estado pressed del outline del control inactivo. */
  --fry-s-color-border-state-active-default: var(--fry-p-color-yanbal-orange-80); /** Outline del control activo. */
  --fry-s-color-border-state-active-hover: var(--fry-p-color-yanbal-orange-90); /** Estado hover del outline del control activo. */
  --fry-s-color-border-state-active-pressed: var(--fry-p-color-yanbal-orange-100); /** Estado pressed del outline del control activo. */
  --fry-s-effect-state-layer-neutral-hover: var(--fry-s-color-surface-overlay-neutral-10);
  --fry-s-effect-state-layer-neutral-pressed: var(--fry-s-color-surface-overlay-neutral-20);
  --fry-s-effect-state-layer-action-hover: var(--fry-s-color-surface-overlay-action-10);
  --fry-s-effect-state-layer-action-pressed: var(--fry-s-color-surface-overlay-action-20);
  --fry-s-effect-focus-ring: var(--fry-s-color-border-system-focus);
  --fry-s-effect-focus-border: var(--fry-s-border-width-m);
  --fry-s-effect-skeleton-object-step-1: var(--fry-s-color-surface-neutral-skeleton-start);
  --fry-s-effect-skeleton-object-step-2: var(--fry-s-color-surface-neutral-skeleton-end);
  --fry-s-effect-disabled-content: var(--fry-s-color-content-neutral-disabled);
  --fry-s-effect-disabled-background: var(--fry-s-color-surface-neutral-disabled);
  --fry-s-effect-disabled-border: var(--fry-s-color-border-neutral-disabled);
  --fry-s-effect-shadow-color-background: var(--fry-p-color-yanbal-black-overlay-10);
  --fry-s-effect-shadow-number-none: calc(var(--fry-p-number-0) * 1px); /** = 0px */
  --fry-s-effect-shadow-number-xs: calc(var(--fry-p-number-1) * 1px); /** = 1px */
  --fry-s-effect-shadow-number-m: calc(var(--fry-p-number-8) * 1px); /** = 8px */
  --fry-s-effect-shadow-number-l: calc(var(--fry-p-number-12) * 1px); /** = 12px */
  --fry-s-effect-shadow-number-s: calc(var(--fry-p-number-4) * 1px); /** = 4px */
  --fry-s-effect-shadow-number-xl: calc(var(--fry-p-number-48) * 1px); /** = 48px */
  --fry-s-effect-shadow-number-2xl: calc(var(--fry-p-number-160) * 1px); /** = 160px */
  --fry-s-effect-divider-border: var(--fry-s-color-border-neutral-subtle);
  --fry-s-brand-logo: var(--fry-p-color-yanbal-black-100);
  --fry-s-font-family-primary: var(--fry-p-typography-font-family-maison-neue); /** Familia tipográfica principal del sistema. Maison Neue — typeface corporativo de FrYDA. */
  --fry-s-font-weight-400: var(--fry-p-typography-font-weight-book); /** Peso tipográfico regular. */
  --fry-s-font-weight-600: var(--fry-p-typography-font-weight-demi); /** Peso tipográfico semibold. */
  --fry-s-font-line-height-m: calc(var(--fry-p-number-20) * 1px); /** = 20px. Interlineado en escala m. */
  --fry-s-font-line-height-l: calc(var(--fry-p-number-24) * 1px); /** = 24px. Interlineado en escala l. */
  --fry-s-font-line-height-2xl: calc(var(--fry-p-number-32) * 1px); /** = 32px. Interlineado en escala 2xl. */
  --fry-s-font-line-height-3xl: calc(var(--fry-p-number-40) * 1px); /** = 40px. Interlineado en escala 3xl. */
  --fry-s-font-line-height-5xl: calc(var(--fry-p-number-60) * 1px); /** = 60px. Interlineado en escala 5xl. */
  --fry-s-font-line-height-6xl: calc(var(--fry-p-number-72) * 1px); /** = 72px. Interlineado en escala 6xl. */
  --fry-s-font-line-height-xl: calc(var(--fry-p-number-28) * 1px); /** = 28px. Interlineado en escala xl. */
  --fry-s-font-line-height-4xl: calc(var(--fry-p-number-48) * 1px); /** = 48px. Interlineado en escala 4xl. */
  --fry-s-font-line-height-s: calc(var(--fry-p-number-16) * 1px); /** = 16px. Interlineado en escala s. */
  --fry-s-font-size-m: calc(var(--fry-p-number-14) * 1rem / 16); /** = 0.875rem (14px). Tamaño de fuente en escala m. */
  --fry-s-font-size-l: calc(var(--fry-p-number-16) * 1rem / 16); /** = 1rem (16px). Tamaño de fuente en escala l. */
  --fry-s-font-size-3xl: calc(var(--fry-p-number-24) * 1rem / 16); /** = 1.5rem (24px). Tamaño de fuente en escala 3xl. */
  --fry-s-font-size-5xl: calc(var(--fry-p-number-32) * 1rem / 16); /** = 2rem (32px). Tamaño de fuente en escala 5xl. */
  --fry-s-font-size-6xl: calc(var(--fry-p-number-40) * 1rem / 16); /** = 2.5rem (40px). Tamaño de fuente en escala 6xl. */
  --fry-s-font-size-7xl: calc(var(--fry-p-number-56) * 1rem / 16); /** = 3.5rem (56px). Tamaño de fuente en escala 7xl. */
  --fry-s-font-size-8xl: calc(var(--fry-p-number-64) * 1rem / 16); /** = 4rem (64px). Tamaño de fuente en escala 8xl. */
  --fry-s-font-size-s: calc(var(--fry-p-number-12) * 1rem / 16); /** = 0.75rem (12px). Tamaño de fuente en escala s. */
  --fry-s-font-size-xl: calc(var(--fry-p-number-18) * 1rem / 16); /** = 1.125rem (18px). Tamaño de fuente en escala xl. */
  --fry-s-font-size-2xl: calc(var(--fry-p-number-20) * 1rem / 16); /** = 1.25rem (20px). Tamaño de fuente en escala 2xl. */
  --fry-s-font-size-4xl: calc(var(--fry-p-number-28) * 1rem / 16); /** = 1.75rem (28px). Tamaño de fuente en escala 4xl. */
  --fry-s-font-letter-spacing-s: calc(var(--fry-p-number-0-2) * 1px); /** = 0.2px. Espaciado entre letras en escala s. */
  --fry-s-spacing-s: calc(var(--fry-p-number-4) * 1px); /** = 4px. Espaciado en escala s. */
  --fry-s-spacing-m: calc(var(--fry-p-number-8) * 1px); /** = 8px. Espaciado en escala m. */
  --fry-s-spacing-xl: calc(var(--fry-p-number-12) * 1px); /** = 12px. Espaciado en escala xl. */
  --fry-s-spacing-2xl: calc(var(--fry-p-number-16) * 1px); /** = 16px. Espaciado en escala 2xl. */
  --fry-s-spacing-3xl: calc(var(--fry-p-number-24) * 1px); /** = 24px. Espaciado en escala 3xl. */
  --fry-s-spacing-4xl: calc(var(--fry-p-number-32) * 1px); /** = 32px. Espaciado en escala 4xl. */
  --fry-s-spacing-5xl: calc(var(--fry-p-number-40) * 1px); /** = 40px. Espaciado en escala 5xl. */
  --fry-s-spacing-6xl: calc(var(--fry-p-number-48) * 1px); /** = 48px. Espaciado en escala 6xl. */
  --fry-s-spacing-7xl: calc(var(--fry-p-number-56) * 1px); /** = 56px. Espaciado en escala 7xl. */
  --fry-s-spacing-8xl: calc(var(--fry-p-number-64) * 1px); /** = 64px. Espaciado en escala 8xl. */
  --fry-s-spacing-9xl: calc(var(--fry-p-number-80) * 1px); /** = 80px. Espaciado en escala 9xl. */
  --fry-s-spacing-10xl: calc(var(--fry-p-number-96) * 1px); /** = 96px. Espaciado en escala 10xl. */
  --fry-s-spacing-11xl: calc(var(--fry-p-number-120) * 1px); /** = 120px. Espaciado en escala 11xl. */
  --fry-s-spacing-none: calc(var(--fry-p-number-0) * 1px); /** = 0px. Espaciado nulo. */
  --fry-s-spacing-l: calc(var(--fry-p-number-10) * 1px); /** = 10px. Espaciado en escala l. */
  --fry-s-spacing-xs: calc(var(--fry-p-number-2) * 1px); /** = 2px. Espaciado en escala xs. */
  --fry-s-spacing-full: calc(var(--fry-p-number-9999) * 1px); /** = 9999px. Espaciado en escala 11xl. */
  --fry-s-sizing-height-xl: calc(var(--fry-p-number-24) * 1px); /** = 24px. Altura de componente en escala xl. */
  --fry-s-sizing-height-2xl: calc(var(--fry-p-number-32) * 1px); /** = 32px. Altura de componente en escala 2xl. */
  --fry-s-sizing-height-3xl: calc(var(--fry-p-number-40) * 1px); /** = 40px. Altura de componente en escala 3xl. */
  --fry-s-sizing-height-4xl: calc(var(--fry-p-number-48) * 1px); /** = 48px. Altura de componente en escala 4xl. */
  --fry-s-sizing-height-5xl: calc(var(--fry-p-number-56) * 1px); /** = 56px. Altura de componente en escala 5xl. */
  --fry-s-sizing-height-6xl: calc(var(--fry-p-number-64) * 1px); /** = 64px. Altura de componente en escala 6xl. */
  --fry-s-sizing-height-7xl: calc(var(--fry-p-number-80) * 1px); /** = 80px. Altura de componente en escala 7xl. */
  --fry-s-sizing-height-l: calc(var(--fry-p-number-16) * 1px); /** = 16px. Altura de componente en escala l. */
  --fry-s-sizing-height-m: calc(var(--fry-p-number-12) * 1px); /** = 12px. Altura de componente en escala m. */
  --fry-s-sizing-height-s: calc(var(--fry-p-number-8) * 1px); /** = 8px. Altura de componente en escala s. */
  --fry-s-sizing-height-8xl: calc(var(--fry-p-number-96) * 1px); /** = 96px. Altura de componente en escala 8xl. */
  --fry-s-sizing-height-9xl: calc(var(--fry-p-number-200) * 1px); /** = 200px. Altura de componente en escala 9xl. */
  --fry-s-sizing-height-10xl: calc(var(--fry-p-number-296) * 1px); /** = 296px. Altura de componente en escala 10xl. */
  --fry-s-sizing-height-11xl: calc(var(--fry-p-number-400) * 1px); /** = 400px. Altura de componente en escala 11xl. */
  --fry-s-sizing-height-12xl: calc(var(--fry-p-number-424) * 1px); /** = 424px. Altura de componente en escala 12xl. */
  --fry-s-sizing-height-13xl: calc(var(--fry-p-number-768) * 1px); /** = 768px. Altura de componente en escala 13xl. */
  --fry-s-sizing-height-14xl: calc(var(--fry-p-number-800) * 1px); /** = 800px. Altura de componente en escala 14xl. */
  --fry-s-sizing-height-xs: calc(var(--fry-p-number-4) * 1px); /** = 4px. Altura de componente en escala s. */
  --fry-s-sizing-width-l: calc(var(--fry-p-number-16) * 1px); /** = 16px. Ancho de componente en escala l. */
  --fry-s-sizing-width-xl: calc(var(--fry-p-number-24) * 1px); /** = 24px. Ancho de componente en escala xl. */
  --fry-s-sizing-width-2xl: calc(var(--fry-p-number-32) * 1px); /** = 32px. Ancho de componente en escala 2xl. */
  --fry-s-sizing-width-3xl: calc(var(--fry-p-number-40) * 1px); /** = 40px. Ancho de componente en escala 3xl. */
  --fry-s-sizing-width-4xl: calc(var(--fry-p-number-48) * 1px); /** = 48px. Ancho de componente en escala 4xl. */
  --fry-s-sizing-width-5xl: calc(var(--fry-p-number-56) * 1px); /** = 56px. Ancho de componente en escala 5xl. */
  --fry-s-sizing-width-6xl: calc(var(--fry-p-number-64) * 1px); /** = 64px. Ancho de componente en escala 6xl. */
  --fry-s-sizing-width-7xl: calc(var(--fry-p-number-80) * 1px); /** = 80px. Ancho de componente en escala 7xl. */
  --fry-s-sizing-width-m: calc(var(--fry-p-number-12) * 1px); /** = 12px. Ancho de componente en escala m. */
  --fry-s-sizing-width-14xl: calc(var(--fry-p-number-312) * 1px); /** = 312px. Ancho de componente en escala 14xl. */
  --fry-s-sizing-width-11xl: calc(var(--fry-p-number-240) * 1px); /** = 240px. Ancho de componente en escala 11xl. */
  --fry-s-sizing-width-s: calc(var(--fry-p-number-8) * 1px); /** = 8px. Ancho de componente en escala s. */
  --fry-s-sizing-width-8xl: calc(var(--fry-p-number-96) * 1px); /** = 96px. Ancho de componente en escala 8xl. */
  --fry-s-sizing-width-10xl: calc(var(--fry-p-number-200) * 1px); /** = 200px. Ancho de componente en escala 10xl. */
  --fry-s-sizing-width-12xl: calc(var(--fry-p-number-296) * 1px); /** = 296px. Ancho de componente en escala 12xl. */
  --fry-s-sizing-width-16xl: calc(var(--fry-p-number-400) * 1px); /** = 400px. Ancho de componente en escala 16xl. */
  --fry-s-sizing-width-17xl: calc(var(--fry-p-number-424) * 1px); /** = 424px. Ancho de componente en escala 17xl. */
  --fry-s-sizing-width-9xl: calc(var(--fry-p-number-144) * 1px); /** = 144px. Ancho de componente en escala 9xl. */
  --fry-s-sizing-width-15xl: calc(var(--fry-p-number-360) * 1px); /** = 360px. Ancho de componente en escala 15xl. */
  --fry-s-sizing-width-19xl: calc(var(--fry-p-number-600) * 1px); /** = 600px. Ancho de componente en escala 19xl. */
  --fry-s-sizing-width-23xl: calc(var(--fry-p-number-920) * 1px); /** = 920px. Ancho de componente en escala 23xl. */
  --fry-s-sizing-width-24xl: calc(var(--fry-p-number-1360) * 1px); /** = 1360px. Ancho de componente en escala 24xl. */
  --fry-s-sizing-width-18xl: calc(var(--fry-p-number-486) * 1px); /** = 486px. Ancho de componente en escala 18xl. */
  --fry-s-sizing-width-20xl: calc(var(--fry-p-number-630) * 1px); /** = 630px. Ancho de componente en escala 20xl. */
  --fry-s-sizing-width-21xl: calc(var(--fry-p-number-768) * 1px); /** = 768px. Ancho de componente en escala 21xl. */
  --fry-s-sizing-width-22xl: calc(var(--fry-p-number-776) * 1px); /** = 776px. Ancho de componente en escala 22xl. */
  --fry-s-sizing-width-13xl: calc(var(--fry-p-number-300) * 1px); /** = 300px. Ancho de componente en escala 13xl. */
  --fry-s-sizing-width-xs: calc(var(--fry-p-number-4) * 1px); /** = 4px. Ancho de componente en escala s. */
  --fry-s-border-radius-none: calc(var(--fry-p-number-0) * 1px); /** = 0px. Radio de borde nulo. Sin redondeo. */
  --fry-s-border-radius-s: calc(var(--fry-p-number-4) * 1px); /** = 4px. Radio de borde pequeño. Redondeo sutil. */
  --fry-s-border-radius-m: calc(var(--fry-p-number-8) * 1px); /** = 8px. Radio de borde medio. Redondeo moderado. */
  --fry-s-border-radius-l: calc(var(--fry-p-number-12) * 1px); /** = 12px. Radio de borde grande. Redondeo prominente. */
  --fry-s-border-radius-xl: calc(var(--fry-p-number-16) * 1px); /** = 16px. Radio de borde extragrande. Redondeo amplio. */
  --fry-s-border-radius-2xl: calc(var(--fry-p-number-24) * 1px); /** = 24px. Radio de borde doble extragrande. Redondeo generoso. */
  --fry-s-border-radius-pill: calc(var(--fry-p-number-9999) * 1px); /** = 9999px. Radio de borde píldora. Redondeo máximo. */
  --fry-s-border-width-s: calc(var(--fry-p-number-1) * 1px); /** = 1px. Grosor de borde delgado. */
  --fry-s-border-width-m: calc(var(--fry-p-number-2) * 1px); /** = 2px. Grosor de borde medio. */
  --fry-s-border-width-l: calc(var(--fry-p-number-4) * 1px); /** = 4px. Grosor de borde grueso. */
  --fry-s-z-index-base: calc(var(--fry-p-number-1) * 1px); /** = 1px. Stacking context normal. Contenedor raíz, sin overlay */
  --fry-s-z-index-sticky: calc(var(--fry-p-number-100) * 1px); /** = 100px. Permanecen visibles al scroll. Header, Footer, Sidebars fijos */
  --fry-s-z-index-dropdown: calc(var(--fry-p-number-200) * 1px); /** = 200px. Aparecen sobre contenido. Dropdown, Popover */
  --fry-s-z-index-tooltip: calc(var(--fry-p-number-300) * 1px); /** = 300px. Información flotante. Tooltip, Hint. Información flotante */
  --fry-s-z-index-floating: calc(var(--fry-p-number-400) * 1px); /** = 400px. Botones flotantes. Floating Action Button, Floating widgets */
  --fry-s-z-index-toast: calc(var(--fry-p-number-500) * 1px); /** = 500px. Notificaciones temporales. Toast, Snackbar, Notification */
  --fry-s-z-index-modal: calc(var(--fry-p-number-600) * 1px); /** = 600px. Contenido modal + backdrop integrado. Modal, Dialog, Alert, Drawer */
  --fry-s-text_style-title-s-book: 400 var(--fry-f-text-style-title-s-size)/var(--fry-f-text-style-title-s-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-title-s-book-letter-spacing: 0.2px;
  --fry-s-text_style-title-s-demi: var(--fry-f-text-style-weight-demi) var(--fry-f-text-style-title-s-size)/var(--fry-f-text-style-title-s-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-title-s-demi-letter-spacing: 0.2px;
  --fry-s-text_style-title-m-book: 400 var(--fry-f-text-style-title-m-size)/var(--fry-f-text-style-title-m-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-title-m-book-letter-spacing: 0.2px;
  --fry-s-text_style-title-m-demi: var(--fry-f-text-style-weight-demi) var(--fry-f-text-style-title-m-size)/var(--fry-f-text-style-title-m-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-title-m-demi-letter-spacing: 0.2px;
  --fry-s-text_style-title-l-book: 400 var(--fry-f-text-style-title-l-size)/var(--fry-f-text-style-title-l-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-title-l-book-letter-spacing: 0.2px;
  --fry-s-text_style-title-l-demi: var(--fry-f-text-style-weight-demi) var(--fry-f-text-style-title-l-size)/var(--fry-f-text-style-title-l-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-title-l-demi-letter-spacing: 0.2px;
  --fry-s-text_style-title-xl-book: 400 var(--fry-f-text-style-title-xl-size)/var(--fry-f-text-style-title-xl-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-title-xl-book-letter-spacing: 0.2px;
  --fry-s-text_style-title-xl-demi: var(--fry-f-text-style-weight-demi) var(--fry-f-text-style-title-xl-size)/var(--fry-f-text-style-title-xl-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-title-xl-demi-letter-spacing: 0.2px;
  --fry-s-text_style-title-2xl-book: 400 var(--fry-f-text-style-title-2xl-size)/var(--fry-f-text-style-title-2xl-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-title-2xl-book-letter-spacing: 0.2px;
  --fry-s-text_style-title-2xl-demi: var(--fry-f-text-style-weight-demi) var(--fry-f-text-style-title-2xl-size)/var(--fry-f-text-style-title-2xl-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-title-2xl-demi-letter-spacing: 0.2px;
  --fry-s-text_style-body-s-book: 400 var(--fry-f-text-style-body-s-size)/var(--fry-f-text-style-body-s-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-body-s-book-letter-spacing: 0.2px;
  --fry-s-text_style-body-s-demi: var(--fry-f-text-style-weight-demi) var(--fry-f-text-style-body-s-size)/var(--fry-f-text-style-body-s-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-body-s-demi-letter-spacing: 0.2px;
  --fry-s-text_style-body-m-book: 400 var(--fry-f-text-style-body-m-size)/var(--fry-f-text-style-body-m-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-body-m-book-letter-spacing: 0.2px;
  --fry-s-text_style-body-m-demi: var(--fry-f-text-style-weight-demi) var(--fry-f-text-style-body-m-size)/var(--fry-f-text-style-body-m-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-body-m-demi-letter-spacing: 0.2px;
  --fry-s-text_style-body-l-book: 400 var(--fry-f-text-style-body-l-size)/var(--fry-f-text-style-body-l-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-body-l-book-letter-spacing: 0.2px;
  --fry-s-text_style-body-l-demi: var(--fry-f-text-style-weight-demi) var(--fry-f-text-style-body-l-size)/var(--fry-f-text-style-body-l-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-body-l-demi-letter-spacing: 0.2px;
  --fry-s-text_style-caption-book: 400 var(--fry-f-text-style-caption-size)/var(--fry-f-text-style-caption-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-caption-book-letter-spacing: 0.2px;
  --fry-s-text_style-caption-demi: var(--fry-f-text-style-weight-demi) var(--fry-f-text-style-caption-size)/var(--fry-f-text-style-caption-line-height) 'var(--fry-f-text-style-font-family)';
  --fry-s-text_style-caption-demi-letter-spacing: 0.2px;
  }