/* * Sistema de design tokens — Core layer (light/dark/contrast) * Variante propia derivada de Material Design 3. * Consume tokens de m3-ext.css (capa extendida). Orden de import: * m3-ext.css → m3-core.css * * La capa `component` no se materializa en este proyecto — los componentes * concretos del producto se derivan aplicando docs/00 §VIII. * * Usar atributo data-theme="dark" en o para tema oscuro. * Usar data-contrast="medium" | "high" para overrides de accesibilidad. */ /* === COLOR — LIGHT (default) ============================================ */ :root, [data-theme="light"] { --md-core-color-primary: var(--md-ext-palette-primary40); --md-core-color-on-primary: var(--md-ext-palette-primary100); --md-core-color-primary-container: var(--md-ext-palette-primary90); --md-core-color-on-primary-container: var(--md-ext-palette-primary30); --md-core-color-secondary: var(--md-ext-palette-secondary40); --md-core-color-on-secondary: var(--md-ext-palette-secondary100); --md-core-color-secondary-container: var(--md-ext-palette-secondary90); --md-core-color-on-secondary-container: var(--md-ext-palette-secondary30); --md-core-color-tertiary: var(--md-ext-palette-tertiary40); --md-core-color-on-tertiary: var(--md-ext-palette-tertiary100); --md-core-color-tertiary-container: var(--md-ext-palette-tertiary90); --md-core-color-on-tertiary-container: var(--md-ext-palette-tertiary30); --md-core-color-error: var(--md-ext-palette-error40); --md-core-color-on-error: var(--md-ext-palette-error100); --md-core-color-error-container: var(--md-ext-palette-error90); --md-core-color-on-error-container: var(--md-ext-palette-error30); --md-core-color-background: var(--md-ext-palette-neutral98); --md-core-color-on-background: var(--md-ext-palette-neutral10); --md-core-color-surface: var(--md-ext-palette-neutral98); --md-core-color-on-surface: var(--md-ext-palette-neutral10); --md-core-color-surface-variant: var(--md-ext-palette-neutral-variant90); --md-core-color-on-surface-variant: var(--md-ext-palette-neutral-variant30); --md-core-color-surface-dim: var(--md-ext-palette-neutral87); --md-core-color-surface-bright: var(--md-ext-palette-neutral98); --md-core-color-surface-container-lowest: var(--md-ext-palette-neutral100); --md-core-color-surface-container-low: var(--md-ext-palette-neutral96); --md-core-color-surface-container: var(--md-ext-palette-neutral94); --md-core-color-surface-container-high: var(--md-ext-palette-neutral92); --md-core-color-surface-container-highest: var(--md-ext-palette-neutral90); --md-core-color-outline: var(--md-ext-palette-neutral-variant50); --md-core-color-outline-variant: var(--md-ext-palette-neutral-variant80); --md-core-color-inverse-surface: var(--md-ext-palette-neutral20); --md-core-color-inverse-on-surface: var(--md-ext-palette-neutral95); --md-core-color-inverse-primary: var(--md-ext-palette-primary80); --md-core-color-scrim: var(--md-ext-palette-neutral0); --md-core-color-shadow: var(--md-ext-palette-neutral0); --md-core-color-primary-fixed: var(--md-ext-palette-primary90); --md-core-color-primary-fixed-dim: var(--md-ext-palette-primary80); --md-core-color-on-primary-fixed: var(--md-ext-palette-primary10); --md-core-color-on-primary-fixed-variant: var(--md-ext-palette-primary30); --md-core-color-secondary-fixed: var(--md-ext-palette-secondary90); --md-core-color-secondary-fixed-dim: var(--md-ext-palette-secondary80); --md-core-color-on-secondary-fixed: var(--md-ext-palette-secondary10); --md-core-color-on-secondary-fixed-variant: var(--md-ext-palette-secondary30); --md-core-color-tertiary-fixed: var(--md-ext-palette-tertiary90); --md-core-color-tertiary-fixed-dim: var(--md-ext-palette-tertiary80); --md-core-color-on-tertiary-fixed: var(--md-ext-palette-tertiary10); --md-core-color-on-tertiary-fixed-variant: var(--md-ext-palette-tertiary30); } /* === COLOR — DARK ====================================================== */ [data-theme="dark"] { --md-core-color-primary: var(--md-ext-palette-primary80); --md-core-color-on-primary: var(--md-ext-palette-primary20); --md-core-color-primary-container: var(--md-ext-palette-primary30); --md-core-color-on-primary-container: var(--md-ext-palette-primary90); --md-core-color-secondary: var(--md-ext-palette-secondary80); --md-core-color-on-secondary: var(--md-ext-palette-secondary20); --md-core-color-secondary-container: var(--md-ext-palette-secondary30); --md-core-color-on-secondary-container: var(--md-ext-palette-secondary90); --md-core-color-tertiary: var(--md-ext-palette-tertiary80); --md-core-color-on-tertiary: var(--md-ext-palette-tertiary20); --md-core-color-tertiary-container: var(--md-ext-palette-tertiary30); --md-core-color-on-tertiary-container: var(--md-ext-palette-tertiary90); --md-core-color-error: var(--md-ext-palette-error80); --md-core-color-on-error: var(--md-ext-palette-error20); --md-core-color-error-container: var(--md-ext-palette-error30); --md-core-color-on-error-container: var(--md-ext-palette-error90); --md-core-color-background: var(--md-ext-palette-neutral6); --md-core-color-on-background: var(--md-ext-palette-neutral90); --md-core-color-surface: var(--md-ext-palette-neutral6); --md-core-color-on-surface: var(--md-ext-palette-neutral90); --md-core-color-surface-variant: var(--md-ext-palette-neutral-variant30); --md-core-color-on-surface-variant: var(--md-ext-palette-neutral-variant80); --md-core-color-surface-dim: var(--md-ext-palette-neutral6); --md-core-color-surface-bright: var(--md-ext-palette-neutral24); --md-core-color-surface-container-lowest: var(--md-ext-palette-neutral4); --md-core-color-surface-container-low: var(--md-ext-palette-neutral10); --md-core-color-surface-container: var(--md-ext-palette-neutral12); --md-core-color-surface-container-high: var(--md-ext-palette-neutral17); --md-core-color-surface-container-highest: var(--md-ext-palette-neutral22); --md-core-color-outline: var(--md-ext-palette-neutral-variant60); --md-core-color-outline-variant: var(--md-ext-palette-neutral-variant30); --md-core-color-inverse-surface: var(--md-ext-palette-neutral90); --md-core-color-inverse-on-surface: var(--md-ext-palette-neutral20); --md-core-color-inverse-primary: var(--md-ext-palette-primary40); } /* === Auto dark via prefers-color-scheme (cuando no hay data-theme) ====== */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --md-core-color-primary: var(--md-ext-palette-primary80); --md-core-color-on-primary: var(--md-ext-palette-primary20); --md-core-color-primary-container: var(--md-ext-palette-primary30); --md-core-color-on-primary-container: var(--md-ext-palette-primary90); --md-core-color-secondary: var(--md-ext-palette-secondary80); --md-core-color-on-secondary: var(--md-ext-palette-secondary20); --md-core-color-secondary-container: var(--md-ext-palette-secondary30); --md-core-color-on-secondary-container: var(--md-ext-palette-secondary90); --md-core-color-tertiary: var(--md-ext-palette-tertiary80); --md-core-color-on-tertiary: var(--md-ext-palette-tertiary20); --md-core-color-tertiary-container: var(--md-ext-palette-tertiary30); --md-core-color-on-tertiary-container: var(--md-ext-palette-tertiary90); --md-core-color-error: var(--md-ext-palette-error80); --md-core-color-on-error: var(--md-ext-palette-error20); --md-core-color-error-container: var(--md-ext-palette-error30); --md-core-color-on-error-container: var(--md-ext-palette-error90); --md-core-color-background: var(--md-ext-palette-neutral6); --md-core-color-on-background: var(--md-ext-palette-neutral90); --md-core-color-surface: var(--md-ext-palette-neutral6); --md-core-color-on-surface: var(--md-ext-palette-neutral90); --md-core-color-surface-variant: var(--md-ext-palette-neutral-variant30); --md-core-color-on-surface-variant: var(--md-ext-palette-neutral-variant80); --md-core-color-surface-dim: var(--md-ext-palette-neutral6); --md-core-color-surface-bright: var(--md-ext-palette-neutral24); --md-core-color-surface-container-lowest: var(--md-ext-palette-neutral4); --md-core-color-surface-container-low: var(--md-ext-palette-neutral10); --md-core-color-surface-container: var(--md-ext-palette-neutral12); --md-core-color-surface-container-high: var(--md-ext-palette-neutral17); --md-core-color-surface-container-highest: var(--md-ext-palette-neutral22); --md-core-color-outline: var(--md-ext-palette-neutral-variant60); --md-core-color-outline-variant: var(--md-ext-palette-neutral-variant30); --md-core-color-inverse-surface: var(--md-ext-palette-neutral90); --md-core-color-inverse-on-surface: var(--md-ext-palette-neutral20); --md-core-color-inverse-primary: var(--md-ext-palette-primary40); } } /* === Overrides de contraste (aplican sobre light o dark base) =========== */ [data-contrast="medium"][data-theme="light"], :root[data-contrast="medium"] { --md-core-color-primary: var(--md-ext-palette-primary30); --md-core-color-on-primary: var(--md-ext-palette-primary100); } [data-contrast="high"][data-theme="light"] { --md-core-color-primary: var(--md-ext-palette-primary20); --md-core-color-secondary: var(--md-ext-palette-secondary20); --md-core-color-tertiary: var(--md-ext-palette-tertiary20); --md-core-color-error: var(--md-ext-palette-error20); --md-core-color-on-surface: var(--md-ext-palette-neutral0); --md-core-color-outline: var(--md-ext-palette-neutral-variant20); } [data-contrast="medium"][data-theme="dark"] { --md-core-color-primary: var(--md-ext-palette-primary90); --md-core-color-on-primary: var(--md-ext-palette-primary10); } [data-contrast="high"][data-theme="dark"] { --md-core-color-primary: var(--md-ext-palette-primary95); --md-core-color-secondary: var(--md-ext-palette-secondary95); --md-core-color-tertiary: var(--md-ext-palette-tertiary95); --md-core-color-error: var(--md-ext-palette-error95); --md-core-color-on-primary: var(--md-ext-palette-primary0); --md-core-color-on-surface: var(--md-ext-palette-neutral100); --md-core-color-outline: var(--md-ext-palette-neutral-variant95); } /* === TYPESCALE ========================================================= */ :root { /* Display Large */ --md-core-typescale-display-large-font: var(--md-ext-typeface-brand); --md-core-typescale-display-large-weight: var(--md-ext-typeface-weight-regular); --md-core-typescale-display-large-size: 3.5625rem; /* 57px */ --md-core-typescale-display-large-line-height: 4rem; /* 64px */ --md-core-typescale-display-large-tracking: -0.015625rem; /* -0.25px */ /* Display Medium */ --md-core-typescale-display-medium-font: var(--md-ext-typeface-brand); --md-core-typescale-display-medium-weight: var(--md-ext-typeface-weight-regular); --md-core-typescale-display-medium-size: 2.8125rem; /* 45px */ --md-core-typescale-display-medium-line-height: 3.25rem; /* 52px */ --md-core-typescale-display-medium-tracking: 0rem; /* Display Small */ --md-core-typescale-display-small-font: var(--md-ext-typeface-brand); --md-core-typescale-display-small-weight: var(--md-ext-typeface-weight-regular); --md-core-typescale-display-small-size: 2.25rem; /* 36px */ --md-core-typescale-display-small-line-height: 2.75rem; /* 44px */ --md-core-typescale-display-small-tracking: 0rem; /* Headline Large */ --md-core-typescale-headline-large-font: var(--md-ext-typeface-brand); --md-core-typescale-headline-large-weight: var(--md-ext-typeface-weight-regular); --md-core-typescale-headline-large-size: 2rem; /* 32px */ --md-core-typescale-headline-large-line-height: 2.5rem; /* 40px */ --md-core-typescale-headline-large-tracking: 0rem; /* Headline Medium */ --md-core-typescale-headline-medium-font: var(--md-ext-typeface-brand); --md-core-typescale-headline-medium-weight: var(--md-ext-typeface-weight-regular); --md-core-typescale-headline-medium-size: 1.75rem; /* 28px */ --md-core-typescale-headline-medium-line-height: 2.25rem; /* 36px */ --md-core-typescale-headline-medium-tracking: 0rem; /* Headline Small */ --md-core-typescale-headline-small-font: var(--md-ext-typeface-brand); --md-core-typescale-headline-small-weight: var(--md-ext-typeface-weight-regular); --md-core-typescale-headline-small-size: 1.5rem; /* 24px */ --md-core-typescale-headline-small-line-height: 2rem; /* 32px */ --md-core-typescale-headline-small-tracking: 0rem; /* Title Large */ --md-core-typescale-title-large-font: var(--md-ext-typeface-brand); --md-core-typescale-title-large-weight: var(--md-ext-typeface-weight-regular); --md-core-typescale-title-large-size: 1.375rem; /* 22px */ --md-core-typescale-title-large-line-height: 1.75rem; /* 28px */ --md-core-typescale-title-large-tracking: 0rem; /* Title Medium */ --md-core-typescale-title-medium-font: var(--md-ext-typeface-plain); --md-core-typescale-title-medium-weight: var(--md-ext-typeface-weight-medium); --md-core-typescale-title-medium-size: 1rem; /* 16px */ --md-core-typescale-title-medium-line-height: 1.5rem; /* 24px */ --md-core-typescale-title-medium-tracking: 0.009375rem;/* 0.15px */ /* Title Small */ --md-core-typescale-title-small-font: var(--md-ext-typeface-plain); --md-core-typescale-title-small-weight: var(--md-ext-typeface-weight-medium); --md-core-typescale-title-small-size: 0.875rem; /* 14px */ --md-core-typescale-title-small-line-height: 1.25rem; /* 20px */ --md-core-typescale-title-small-tracking: 0.00625rem; /* 0.1px */ /* Body Large */ --md-core-typescale-body-large-font: var(--md-ext-typeface-plain); --md-core-typescale-body-large-weight: var(--md-ext-typeface-weight-regular); --md-core-typescale-body-large-size: 1rem; /* 16px */ --md-core-typescale-body-large-line-height: 1.5rem; /* 24px */ --md-core-typescale-body-large-tracking: 0.03125rem; /* 0.5px */ /* Body Medium */ --md-core-typescale-body-medium-font: var(--md-ext-typeface-plain); --md-core-typescale-body-medium-weight: var(--md-ext-typeface-weight-regular); --md-core-typescale-body-medium-size: 0.875rem; /* 14px */ --md-core-typescale-body-medium-line-height: 1.25rem; /* 20px */ --md-core-typescale-body-medium-tracking: 0.015625rem; /* 0.25px */ /* Body Small */ --md-core-typescale-body-small-font: var(--md-ext-typeface-plain); --md-core-typescale-body-small-weight: var(--md-ext-typeface-weight-regular); --md-core-typescale-body-small-size: 0.75rem; /* 12px */ --md-core-typescale-body-small-line-height: 1rem; /* 16px */ --md-core-typescale-body-small-tracking: 0.025rem; /* 0.4px */ /* Label Large */ --md-core-typescale-label-large-font: var(--md-ext-typeface-plain); --md-core-typescale-label-large-weight: var(--md-ext-typeface-weight-medium); --md-core-typescale-label-large-size: 0.875rem; /* 14px */ --md-core-typescale-label-large-line-height: 1.25rem; /* 20px */ --md-core-typescale-label-large-tracking: 0.00625rem; /* 0.1px */ /* Label Medium */ --md-core-typescale-label-medium-font: var(--md-ext-typeface-plain); --md-core-typescale-label-medium-weight: var(--md-ext-typeface-weight-medium); --md-core-typescale-label-medium-size: 0.75rem; /* 12px */ --md-core-typescale-label-medium-line-height: 1rem; /* 16px */ --md-core-typescale-label-medium-tracking: 0.03125rem;/* 0.5px */ /* Label Small */ --md-core-typescale-label-small-font: var(--md-ext-typeface-plain); --md-core-typescale-label-small-weight: var(--md-ext-typeface-weight-medium); --md-core-typescale-label-small-size: 0.6875rem; /* 11px */ --md-core-typescale-label-small-line-height: 1rem; /* 16px */ --md-core-typescale-label-small-tracking: 0.03125rem;/* 0.5px */ } /* === SHAPE ============================================================= */ :root { --md-core-shape-corner-0: var(--md-ext-dimension-0); --md-core-shape-corner-4: var(--md-ext-dimension-4); --md-core-shape-corner-8: var(--md-ext-dimension-8); --md-core-shape-corner-12: var(--md-ext-dimension-12); --md-core-shape-corner-16: var(--md-ext-dimension-16); --md-core-shape-corner-20: var(--md-ext-dimension-20); --md-core-shape-corner-28: var(--md-ext-dimension-28); --md-core-shape-corner-32: var(--md-ext-dimension-32); --md-core-shape-corner-48: var(--md-ext-dimension-48); --md-core-shape-corner-pill: var(--md-ext-dimension-9999); /* Directionals (RTL-aware con start/end) */ --md-core-shape-directional-top-4: var(--md-ext-dimension-4) var(--md-ext-dimension-4) var(--md-ext-dimension-0) var(--md-ext-dimension-0); --md-core-shape-directional-top-16: var(--md-ext-dimension-16) var(--md-ext-dimension-16) var(--md-ext-dimension-0) var(--md-ext-dimension-0); --md-core-shape-directional-top-28: var(--md-ext-dimension-28) var(--md-ext-dimension-28) var(--md-ext-dimension-0) var(--md-ext-dimension-0); --md-core-shape-directional-start-16: var(--md-ext-dimension-16) var(--md-ext-dimension-0) var(--md-ext-dimension-0) var(--md-ext-dimension-16); --md-core-shape-directional-end-16: var(--md-ext-dimension-0) var(--md-ext-dimension-16) var(--md-ext-dimension-16) var(--md-ext-dimension-0); } /* === ELEVATION (valor lógico + sombras opcionales) ===================== */ :root { --md-core-elevation-level0: var(--md-ext-dimension-0); --md-core-elevation-level1: var(--md-ext-dimension-1); --md-core-elevation-level2: var(--md-ext-dimension-3); --md-core-elevation-level3: var(--md-ext-dimension-6); --md-core-elevation-level4: var(--md-ext-dimension-8); --md-core-elevation-level5: var(--md-ext-dimension-12); --md-core-elevation-shadow-level0: none; --md-core-elevation-shadow-level1: 0px 1px 2px 0px rgb(0 0 0 / 0.30), 0px 1px 3px 1px rgb(0 0 0 / 0.15); --md-core-elevation-shadow-level2: 0px 1px 2px 0px rgb(0 0 0 / 0.30), 0px 2px 6px 2px rgb(0 0 0 / 0.15); --md-core-elevation-shadow-level3: 0px 1px 3px 0px rgb(0 0 0 / 0.30), 0px 4px 8px 3px rgb(0 0 0 / 0.15); --md-core-elevation-shadow-level4: 0px 2px 3px 0px rgb(0 0 0 / 0.30), 0px 6px 10px 4px rgb(0 0 0 / 0.15); --md-core-elevation-shadow-level5: 0px 4px 4px 0px rgb(0 0 0 / 0.30), 0px 8px 12px 6px rgb(0 0 0 / 0.15); } /* === MOTION ============================================================ */ :root { /* Easing */ --md-core-motion-easing-linear: cubic-bezier(0, 0, 1, 1); --md-core-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-core-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --md-core-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --md-core-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-core-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --md-core-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-core-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1); --md-core-motion-easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1); --md-core-motion-easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1); /* Duration */ --md-core-motion-duration-short1: 50ms; --md-core-motion-duration-short2: 100ms; --md-core-motion-duration-short3: 150ms; --md-core-motion-duration-short4: 200ms; --md-core-motion-duration-medium1: 250ms; --md-core-motion-duration-medium2: 300ms; --md-core-motion-duration-medium3: 350ms; --md-core-motion-duration-medium4: 400ms; --md-core-motion-duration-long1: 450ms; --md-core-motion-duration-long2: 500ms; --md-core-motion-duration-long3: 550ms; --md-core-motion-duration-long4: 600ms; --md-core-motion-duration-extra-long1: 700ms; --md-core-motion-duration-extra-long2: 800ms; --md-core-motion-duration-extra-long3: 900ms; --md-core-motion-duration-extra-long4: 1000ms; } /* === OPACITY — la escala semiótica completa ============================ */ :root { /* Escala base (referencia por severidad) */ --md-core-opacity-level-0: 0; --md-core-opacity-level-08: 0.08; --md-core-opacity-level-10: 0.10; --md-core-opacity-level-12: 0.12; --md-core-opacity-level-16: 0.16; --md-core-opacity-level-32: 0.32; --md-core-opacity-level-38: 0.38; /* State layers — interacción */ --md-core-state-hover-state-layer-opacity: var(--md-core-opacity-level-08); --md-core-state-focus-state-layer-opacity: var(--md-core-opacity-level-10); --md-core-state-pressed-state-layer-opacity: var(--md-core-opacity-level-10); --md-core-state-selected-state-layer-opacity: var(--md-core-opacity-level-12); --md-core-state-activated-state-layer-opacity:var(--md-core-opacity-level-12); --md-core-state-dragged-state-layer-opacity: var(--md-core-opacity-level-16); /* Disabled — NO es state layer, son dos opacidades sobre el elemento */ --md-core-state-disabled-content-opacity: var(--md-core-opacity-level-38); --md-core-state-disabled-container-opacity: var(--md-core-opacity-level-12); /* Scrim — separación temporal modal */ --md-core-opacity-scrim: var(--md-core-opacity-level-32); --md-core-opacity-scrim-strong: 0.40; /* Otros mecanismos genuinamente distintos */ --md-core-opacity-drag-preview-ghost: 0.6; --md-core-opacity-skeleton-base: 0.04; --md-core-opacity-skeleton-shimmer: var(--md-core-opacity-level-12); } /* === FOCUS INDICATOR =================================================== */ :root { --md-core-state-focus-indicator-thickness: var(--md-ext-dimension-3); --md-core-state-focus-indicator-outer-offset: var(--md-ext-dimension-2); --md-core-state-focus-indicator-inner-offset: -3px; /* composición negativa: -1 × ext.dimension.3 */ --md-core-state-focus-indicator-color: var(--md-core-color-secondary); } /* === Z-INDEX ============================================================ */ :root { --md-core-z-index-base: 0; --md-core-z-index-raised: 10; --md-core-z-index-sticky: 20; --md-core-z-index-fixed: 30; --md-core-z-index-dropdown: 100; --md-core-z-index-overlay: 200; --md-core-z-index-modal: 300; --md-core-z-index-popover: 400; --md-core-z-index-tooltip: 500; --md-core-z-index-toast: 600; --md-core-z-index-debug: 9000; } /* === ICONS ============================================================= */ :root { /* Sistema: una sola decisión cambia todo el aspecto de iconos */ --md-core-icon-font-family: 'Material Symbols Outlined', sans-serif; /* Alternativas: 'Material Symbols Rounded' | 'Material Symbols Sharp' */ /* Tamaños semánticos */ --md-core-icon-size-16: var(--md-ext-dimension-16); --md-core-icon-size-18: var(--md-ext-dimension-18); --md-core-icon-size-20: var(--md-ext-dimension-20); --md-core-icon-size-24: var(--md-ext-dimension-24); /* default M3 (icon-button, app-bar, nav-bar) */ --md-core-icon-size-32: var(--md-ext-dimension-32); --md-core-icon-size-36: var(--md-ext-dimension-36); --md-core-icon-size-40: var(--md-ext-dimension-40); --md-core-icon-size-48: var(--md-ext-dimension-48); /* Ejes variables (Variable Font) */ --md-core-icon-axis-fill: 0; /* 0 outline, 1 filled */ --md-core-icon-axis-weight: 400; /* 100-700 */ --md-core-icon-axis-grade: 0; /* -50..200 */ --md-core-icon-axis-opsz: 24; /* debe coincidir con el size en px */ } /* Clase utility para iconos Material Symbols */ .md-icon { font-family: var(--md-core-icon-font-family); font-weight: normal; font-style: normal; font-size: var(--md-core-icon-size-24); line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' var(--md-core-icon-axis-fill), 'wght' var(--md-core-icon-axis-weight), 'GRAD' var(--md-core-icon-axis-grade), 'opsz' var(--md-core-icon-axis-opsz); } /* === SPACING ========================================================== * * core.spacing es un rol semántico DERIVADO de ext.dimension-relative. * Las dimensiones aquí expuestas pueden usarse para padding, margin, gap * y también width/height/max-width cuando el contexto lo justifique * (ej. ancho de sidebar, alto de sección). Para dimensiones que NO deben * escalar con accesibilidad (border, blur, elevation), usar ext.dimension. * ==================================================================== */ :root { --md-core-spacing-0: var(--md-ext-dimension-relative-0-0); --md-core-spacing-1: var(--md-ext-dimension-relative-4-0_25); --md-core-spacing-2: var(--md-ext-dimension-relative-8-0_5); --md-core-spacing-3: var(--md-ext-dimension-relative-12-0_75); --md-core-spacing-4: var(--md-ext-dimension-relative-16-1); --md-core-spacing-5: var(--md-ext-dimension-relative-20-1_25); --md-core-spacing-6: var(--md-ext-dimension-relative-24-1_5); --md-core-spacing-7: var(--md-ext-dimension-relative-28-1_75); --md-core-spacing-8: var(--md-ext-dimension-relative-32-2); --md-core-spacing-10: var(--md-ext-dimension-relative-40-2_5); --md-core-spacing-12: var(--md-ext-dimension-relative-48-3); /* touch target mínimo */ --md-core-spacing-14: var(--md-ext-dimension-relative-56-3_5); --md-core-spacing-16: var(--md-ext-dimension-relative-64-4); --md-core-spacing-20: var(--md-ext-dimension-relative-80-5); --md-core-spacing-24: var(--md-ext-dimension-relative-96-6); } /* === TOUCH TARGET ====================================================== */ :root { --md-core-touch-target-40: var(--md-ext-dimension-relative-40-2_5); /* densos */ --md-core-touch-target-48: var(--md-ext-dimension-relative-48-3); /* WCAG 2.5.5 (default) */ --md-core-touch-target-56: var(--md-ext-dimension-relative-56-3_5); /* acciones primarias */ } /* === MOTION DELAYS ===================================================== */ :root { --md-core-motion-delay-0: 0ms; --md-core-motion-delay-50: 50ms; --md-core-motion-delay-100: 100ms; --md-core-motion-delay-200: 200ms; } /* === MOTION PATTERNS =================================================== */ :root { /* Container transform */ --md-core-motion-pattern-container-transform-enter-duration: 300ms; --md-core-motion-pattern-container-transform-return-duration: 250ms; --md-core-motion-pattern-container-transform-easing: var(--md-core-motion-easing-emphasized); --md-core-motion-pattern-container-transform-outgoing-fade-duration: 90ms; --md-core-motion-pattern-container-transform-incoming-fade-duration: 210ms; --md-core-motion-pattern-container-transform-incoming-fade-delay: 90ms; /* Shared axis X (horizontal — siguiente/anterior, swipe) */ --md-core-motion-pattern-shared-axis-x-duration: 300ms; --md-core-motion-pattern-shared-axis-x-easing: var(--md-core-motion-easing-emphasized); --md-core-motion-pattern-shared-axis-x-translation-distance: var(--md-ext-dimension-30); --md-core-motion-pattern-shared-axis-x-outgoing-fade-duration: 100ms; --md-core-motion-pattern-shared-axis-x-incoming-fade-duration: 200ms; --md-core-motion-pattern-shared-axis-x-incoming-fade-delay: 100ms; /* Shared axis Y (vertical) */ --md-core-motion-pattern-shared-axis-y-duration: 300ms; --md-core-motion-pattern-shared-axis-y-easing: var(--md-core-motion-easing-emphasized); --md-core-motion-pattern-shared-axis-y-translation-distance: var(--md-ext-dimension-30); --md-core-motion-pattern-shared-axis-y-outgoing-fade-duration: 100ms; --md-core-motion-pattern-shared-axis-y-incoming-fade-duration: 200ms; --md-core-motion-pattern-shared-axis-y-incoming-fade-delay: 100ms; /* Shared axis Z (drill-down) */ --md-core-motion-pattern-shared-axis-z-duration: 300ms; --md-core-motion-pattern-shared-axis-z-easing: var(--md-core-motion-easing-emphasized); --md-core-motion-pattern-shared-axis-z-scale-enter-from: 0.80; --md-core-motion-pattern-shared-axis-z-scale-enter-to: 1.00; --md-core-motion-pattern-shared-axis-z-scale-exit-from: 1.00; --md-core-motion-pattern-shared-axis-z-scale-exit-to: 1.10; --md-core-motion-pattern-shared-axis-z-outgoing-fade-duration: 100ms; --md-core-motion-pattern-shared-axis-z-incoming-fade-duration: 200ms; --md-core-motion-pattern-shared-axis-z-incoming-fade-delay: 100ms; /* Fade through (top-level destinations) */ --md-core-motion-pattern-fade-through-duration: 300ms; --md-core-motion-pattern-fade-through-easing: var(--md-core-motion-easing-standard); --md-core-motion-pattern-fade-through-outgoing-fade-duration: 100ms; --md-core-motion-pattern-fade-through-incoming-fade-duration: 200ms; --md-core-motion-pattern-fade-through-incoming-fade-delay: 100ms; --md-core-motion-pattern-fade-through-incoming-scale-from: 0.92; --md-core-motion-pattern-fade-through-incoming-scale-to: 1.00; /* Fade (sutil, in-place) */ --md-core-motion-pattern-fade-enter-duration: 150ms; --md-core-motion-pattern-fade-exit-duration: 75ms; --md-core-motion-pattern-fade-easing: var(--md-core-motion-easing-linear); /* Skeleton shimmer */ --md-core-motion-pattern-skeleton-shimmer-loop-duration: 1500ms; --md-core-motion-pattern-skeleton-shimmer-easing: var(--md-core-motion-easing-linear); --md-core-motion-pattern-skeleton-shimmer-fade-in-duration: 200ms; --md-core-motion-pattern-skeleton-shimmer-fade-out-duration:150ms; --md-core-motion-pattern-skeleton-shimmer-opacity-base: var(--md-core-opacity-skeleton-base); --md-core-motion-pattern-skeleton-shimmer-opacity-peak: var(--md-core-opacity-skeleton-shimmer); } /* === BORDER ============================================================ */ :root { --md-core-border-width-0: var(--md-ext-dimension-0); --md-core-border-width-1: var(--md-ext-dimension-1); /* outlined default, divider */ --md-core-border-width-2: var(--md-ext-dimension-2); /* focused, error, active tab */ --md-core-border-width-4: var(--md-ext-dimension-4); /* énfasis fuerte (raro) */ } /* === ASPECT RATIO ====================================================== */ :root { --md-core-aspect-ratio-1-1: 1 / 1; --md-core-aspect-ratio-4-3: 4 / 3; --md-core-aspect-ratio-3-2: 3 / 2; --md-core-aspect-ratio-16-9: 16 / 9; --md-core-aspect-ratio-21-9: 21 / 9; --md-core-aspect-ratio-9-16: 9 / 16; } /* === AVATAR ============================================================ */ :root { --md-core-avatar-size-24: var(--md-ext-dimension-relative-24-1_5); /* inline mention */ --md-core-avatar-size-32: var(--md-ext-dimension-relative-32-2); /* dense list, app-bar */ --md-core-avatar-size-40: var(--md-ext-dimension-relative-40-2_5); /* DEFAULT list-item */ --md-core-avatar-size-56: var(--md-ext-dimension-relative-56-3_5); /* profile compact */ --md-core-avatar-size-72: var(--md-ext-dimension-relative-72-4_5); /* profile header */ --md-core-avatar-size-96: var(--md-ext-dimension-relative-96-6); /* profile detail / hero */ --md-core-avatar-shape: var(--md-core-shape-corner-pill); } /* === EFFECTS — BLUR & SCROLLBAR ======================================= */ :root { /* Backdrop blur (M3 Expressive glass) */ --md-core-effect-blur-0: var(--md-ext-dimension-0); --md-core-effect-blur-4: var(--md-ext-dimension-4); --md-core-effect-blur-8: var(--md-ext-dimension-8); --md-core-effect-blur-16: var(--md-ext-dimension-16); --md-core-effect-blur-24: var(--md-ext-dimension-24); /* Scrollbar — width.default-12 = 12px (default recomendado) */ --md-core-effect-scrollbar-width-default-12: var(--md-ext-dimension-12); --md-core-effect-scrollbar-track-color: var(--md-core-color-surface-container); --md-core-effect-scrollbar-thumb-color: var(--md-core-color-outline-variant); --md-core-effect-scrollbar-thumb-hover-color: var(--md-core-color-outline); --md-core-effect-scrollbar-shape: var(--md-core-shape-corner-pill); } /* Aplicación opcional de scrollbar styling */ ::-webkit-scrollbar { width: var(--md-core-effect-scrollbar-width-default-12); height: var(--md-core-effect-scrollbar-width-default-12); } ::-webkit-scrollbar-track { background: var(--md-core-effect-scrollbar-track-color); } ::-webkit-scrollbar-thumb { background: var(--md-core-effect-scrollbar-thumb-color); border-radius: var(--md-core-effect-scrollbar-shape); } ::-webkit-scrollbar-thumb:hover { background: var(--md-core-effect-scrollbar-thumb-hover-color); } /* === CONTENT MAX-WIDTH (reading width en ch) =========================== */ :root { --md-core-content-max-width-35: 35ch; /* sidebars, captions, tooltips ricos */ --md-core-content-max-width-45: 45ch; /* diálogos modales con texto */ --md-core-content-max-width-55: 55ch; /* cards de contenido medio */ --md-core-content-max-width-65: 65ch; /* DEFAULT body text */ --md-core-content-max-width-75: 75ch; /* artículos largos */ --md-core-content-max-width-85: 85ch; /* documentación técnica */ }