/* GENERADO por build/build.py - no editar a mano. Origen: tokens/tokens.json, generado a su vez por bin/wf-generar-tokens.py Arbitro: ds/01-tokens.md */ /* Orden de capas. Se declara una sola vez y manda aunque las capas se rellenen despues, desde otros archivos. */ @layer wf-base, wf-woo, wf-componentes, wf-utilidades, wf-alias; /* ============================================================ ARCHIVO - la familia de marca, con su nombre real (N2). Variable wght 100..900, con el eje wdth PINEADO en 100 y el eje sacado del binario: el sistema no usa ancho variable y el eje costaba 330 KB sobre el TTF de origen. El default del eje wght se movio de 600 (el que traia el TTF de Google Fonts) a 400, que es el peso del cuerpo. Eso es lo que hace que nameID 1 sea "Archivo" y no "Archivo SemiBold", que es el nombre por el que placaME resuelve (N2.2). Features que sobreviven al subset, VERIFICADAS con fontTools: latin GSUB case,ccmp,frac,liga,locl,pnum,tnum,zero GPOS kern,mark,mkmk latin-ext GSUB case,ccmp,locl GPOS kern,mark,mkmk tnum esta, que es la que sostiene la regla "todo importe lleva tabular-nums". En latin-ext no esta y esta bien: ese rango no tiene cifras. lnum tampoco sobrevive, y tambien esta bien: en Archivo es una feature de cero lookups porque las cifras YA son lining por defecto. Lo mismo rvrn, que se descarto. ============================================================ */ @font-face{ font-family:"Archivo"; src:url("fonts/archivo-latin.woff2") format("woff2-variations"), url("fonts/archivo-latin.woff2") format("woff2"); font-weight:400 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20A0-20BF,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Archivo"; src:url("fonts/archivo-latin-ext.woff2") format("woff2-variations"), url("fonts/archivo-latin-ext.woff2") format("woff2"); font-weight:400 900; font-style:normal; font-display:swap; unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ============================================================ ROBOTO MONO - la monoespaciada del B2B. Variable wght 100..700. Solo latin: el B2B no compone prosa, compone SKU y numeros. OJO con lo que decia 01 §2.3.3: "features del subset kern,ccmp, tnum,lnum,zero" era IMPOSIBLE. Roboto Mono 3.001 no tiene GPOS y su GSUB trae UNA sola feature, smcp, que el sistema no usa. El subset queda entonces con CERO features, y es correcto: los 1229/2048 de avance son identicos en las 26 letras y en las 10 cifras (medido), o sea que tabular-nums no tiene nada que corregir y lining-nums tampoco. font-variant-numeric sobre --wf-font-datos queda como no-op inofensivo. ============================================================ */ @font-face{ font-family:"Roboto Mono"; src:url("fonts/roboto-mono-latin.woff2") format("woff2-variations"), url("fonts/roboto-mono-latin.woff2") format("woff2"); font-weight:100 700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20A0-20BF,U+2212,U+FEFF,U+FFFD; } /* ============================================================ FALLBACK METRICO DE ARCHIVO. size-adjust 101.37% = 0.4962 / 0.4895, el avance medio a-z de Archivo a wght 400 sobre el de Arial. Los dos numeros estan medidos con fontTools sobre los binarios, no citados. El 106.26% anterior se habia calculado a wght 600 -el default del TTF de origen, no el peso del cuerpo- y hacia que el fallback renderizara 4.8% mas ancho: un titulo con line-clamp:2 ocupaba dos lineas en el fallback y una en Archivo, y la tarjeta SALTABA al hacer swap. El par que se vendia como "CLS cero" producia CLS. ============================================================ */ @font-face{ font-family:"Archivo Fallback"; src:local("Arial"),local("ArialMT"), local("Helvetica Neue"),local("HelveticaNeue"), local("Liberation Sans"),local("LiberationSans"); size-adjust:101.37%; /* 0.4962 / 0.4895 */ ascent-override:86.61%; /* (878/1000) / 1.0137 */ descent-override:20.72%; /* (210/1000) / 1.0137 */ line-gap-override:0%; /* Archivo tiene sTypoLineGap = 0 (verificado) */ } /* ============================================================ FALLBACK METRICO DE ROBOTO MONO - ya no queda pendiente. 01 §2.3.3 dejaba los tres overrides comentados "hasta que ese numero este en el PR". El numero esta: el avance de la cifra de Roboto Mono es 1229/2048 = 0.60010 em, UNICO para las 10 cifras y para las 26 letras. Contra que se mide: SFMono-Regular encabeza la lista pero en macOS NO es alcanzable desde contenido web -es una familia reservada del sistema- asi que el primer eslabon que de verdad resuelve es Menlo, 1233/2048 = 0.60205 em. De ahi 99.68%. Consolas (Windows) es 0.55 em y queda 9% corta: un solo size-adjust no puede servir a las dos. Se elige la que resuelve en el equipo desde donde se opera el mayorista y se deja dicho. ============================================================ */ /* EL BUG QUE TENIA EL BLOQUE DE 01 §2.3.3, MEDIDO EN CHROME: local() matchea el NOMBRE COMPLETO (nameID 4) o el nombre PostScript (nameID 6) de la fuente. NUNCA el nombre de familia. El documento escribia local("Menlo"): eso es la FAMILIA, no matchea nada, y como ninguno de los cuatro local() resolvia, la cara entera quedaba muerta y el navegador caia a su serif por defecto. Medido: 10 cifras a 48px = 240.00px, o sea 0.5 em por cifra = Times. Roboto Mono da 288.05px: el fallback era 16.7% MAS ANGOSTO y la tabla de SKU saltaba en el swap. local("Menlo") -> 240.00 (no resuelve: es familia) local("Menlo Regular") -> 288.98 (resuelve: nombre completo) local("Menlo-Regular") -> 288.98 (resuelve: PostScript) local("SFMono-Regular") -> 240.00 (no alcanzable desde la web) Arial se salvaba de casualidad: su nombre completo es "Arial". Se listan los dos nombres de cada una para no depender de eso. */ @font-face{ font-family:"Roboto Mono Fallback"; src:local("Menlo Regular"),local("Menlo-Regular"), local("SFMono-Regular"), local("Consolas"), local("Liberation Mono"),local("LiberationMono"); size-adjust:99.68%; /* 0.60010 / 0.60205 */ ascent-override:105.13%; /* (2146/2048) / 0.9968 */ descent-override:27.19%; /* (555/2048) / 0.9968 */ line-gap-override:0%; /* Roboto Mono tiene sTypoLineGap = 0 (verificado) */ } /* --- SIN CAPA a proposito: tiene que ganarle al :root de Astra --- */ :root { color-scheme: light; /* ===== PRIMITIVO - CAPA 1 - primitivos (01 §2.1). Nadie los consume en un componente. */ --wf-blanco: #FFFFFF; --wf-neutral-50: #F8F8FA; --wf-neutral-100: #F0F0F3; --wf-neutral-200: #E1E0E7; --wf-neutral-300: #CCCBD4; --wf-neutral-400: #B0AFBB; --wf-neutral-500: #94929F; --wf-neutral-600: #777582; --wf-neutral-700: #615F6B; --wf-neutral-800: #4C4A54; --wf-neutral-900: #37363E; --wf-neutral-950: #252429; --wf-azul-50: #F6F8FF; --wf-azul-100: #ECEFFF; --wf-azul-200: #D8E0FF; --wf-azul-300: #BDC9FF; --wf-azul-400: #9AA9FF; --wf-azul-500: #7785FF; --wf-azul-600: #5452FF; --wf-azul-700: #463FE2; --wf-azul-800: #362EB7; --wf-azul-900: #262288; --wf-azul-950: #18165E; --wf-violeta-50: #FAF7FF; --wf-violeta-100: #F3EDFF; --wf-violeta-200: #E7DAFF; --wf-violeta-300: #D6BFFF; --wf-violeta-400: #C09AFB; --wf-violeta-500: #A579E5; --wf-violeta-600: #885AC7; --wf-violeta-700: #7145AA; --wf-violeta-800: #593488; --wf-violeta-900: #422666; --wf-violeta-950: #2C1846; --wf-magenta-50: #FFF5FA; --wf-magenta-100: #FFE9F5; --wf-magenta-200: #FFD2EB; --wf-magenta-300: #FFB0DE; --wf-magenta-400: #FE7BCD; --wf-magenta-500: #E651B3; --wf-magenta-600: #C52995; --wf-magenta-700: #A80C7D; --wf-magenta-800: #860163; --wf-magenta-900: #640249; --wf-magenta-950: #450331; --wf-cian-50: #F0FBFC; --wf-cian-100: #DEF5F9; --wf-cian-200: #BDEBF2; --wf-cian-300: #91DAE6; --wf-cian-400: #5AC2D1; --wf-cian-500: #13A6B7; --wf-cian-600: #008695; --wf-cian-700: #006E7A; --wf-cian-800: #005660; --wf-cian-900: #003F47; --wf-cian-950: #002B30; --wf-menta-50: #F1FCF5; --wf-menta-100: #DFF7E8; --wf-menta-200: #C0EED2; --wf-menta-300: #97DFB5; --wf-menta-400: #64C892; --wf-menta-500: #2DAD72; --wf-menta-600: #008D58; --wf-menta-700: #007447; --wf-menta-800: #005B37; --wf-menta-900: #004327; --wf-menta-950: #002D19; --wf-ambar-50: #FEF7ED; --wf-ambar-100: #FDEED7; --wf-ambar-200: #FADDB1; --wf-ambar-300: #F1C47F; --wf-ambar-400: #DEA542; --wf-ambar-500: #C28700; --wf-ambar-600: #9C6C00; --wf-ambar-700: #805800; --wf-ambar-800: #654500; --wf-ambar-900: #4B3200; --wf-ambar-950: #332100; --wf-escarlata-50: #FFF6F5; --wf-escarlata-100: #FFEBE7; --wf-escarlata-200: #FFD6CF; --wf-escarlata-300: #FFB8AC; --wf-escarlata-400: #FF8A79; --wf-escarlata-500: #F15A49; --wf-escarlata-600: #D13527; --wf-escarlata-700: #B21C12; --wf-escarlata-800: #8F1008; --wf-escarlata-900: #6B0B06; --wf-escarlata-950: #490704; /* ===== MEDIDO - Colores medidos de negocio (01 §2.2). Fuera de la escalera, por medicion comercial. */ --wf-envio-hoy: #008741; --wf-envio-manana: #007538; --wf-envio-wash: #E7F9EF; --wf-envio-wash-tinta: #006631; --wf-campana-relleno: #E32453; --wf-campana-precio: #D2214D; --wf-campana-rotulo: #F04C75; --wf-campana-fondo: #0C1A38; --wf-urgencia-relleno: #B95E05; --wf-urgencia-tinta: #FFFFFF; --wf-off-relleno: #D93175; --wf-off-tinta: #FFFFFF; --wf-cta-grad-1: #962BE2; --wf-cta-grad-2: #D93175; --wf-wa-marca: #25D366; --wf-masfull-amarillo: #F1D900; --wf-masfull-tinta: #453E08; --wf-masfull-wash: #FDF7C9; /* ===== TIPO - Tipografia (01 §2.3). La familia se llama Archivo; la mono, Roboto Mono. */ --wf-font-ui: "Archivo","Archivo Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --wf-font-datos: "Roboto Mono","Roboto Mono Fallback",ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace; --wf-font-campana: var(--wf-font-ui); --wf-font-numeros: var(--wf-font-ui); --wf-fw-regular: 400; --wf-fw-medium: 500; --wf-fw-semibold: 600; --wf-fw-bold: 700; --wf-fw-display: 800; --wf-fs-11: .6875rem; --wf-fs-12: .75rem; --wf-fs-14: .875rem; --wf-fs-16: 1rem; --wf-fs-18: 1.125rem; --wf-fs-20: 1.25rem; --wf-fs-22: 1.375rem; --wf-fs-24: 1.5rem; --wf-fs-28: 1.75rem; --wf-fs-34: 2.125rem; --wf-fs-44: 2.75rem; --wf-fs-56: 3.5rem; --wf-lh-11: 1rem; --wf-lh-12: 1rem; --wf-lh-14: 1.25rem; --wf-lh-16: 1.5rem; --wf-lh-18: 1.75rem; --wf-lh-20: 1.75rem; --wf-lh-22: 1.1; --wf-lh-24: 2rem; --wf-lh-28: 2.25rem; --wf-lh-34: 1.1; --wf-lh-44: 3rem; --wf-lh-56: 3.5rem; --wf-lh-prosa: 1.6; --wf-ls-0: 0; --wf-ls-micro: .015em; --wf-ls-18: -.005em; --wf-ls-20: -.01em; --wf-ls-24: -.014em; --wf-ls-28: -.016em; --wf-ls-34: -.018em; --wf-ls-44: -.022em; --wf-ls-56: -.024em; --wf-ls-caps-s: .06em; --wf-ls-caps-m: .04em; --wf-ls-caps-l: .02em; --wf-cur-gap: .16em; --wf-strike-h: .075em; --wf-fs-precio: var(--wf-fs-22); --wf-t-legal: var(--wf-fw-regular) var(--wf-fs-11)/var(--wf-lh-11) var(--wf-font-ui); --wf-t-sku: var(--wf-fw-medium) var(--wf-fs-11)/var(--wf-lh-11) var(--wf-font-ui); --wf-t-tag: var(--wf-fw-bold) var(--wf-fs-11)/var(--wf-lh-11) var(--wf-font-ui); --wf-t-meta: var(--wf-fw-medium) var(--wf-fs-12)/var(--wf-lh-12) var(--wf-font-ui); --wf-t-meta-strong: var(--wf-fw-bold) var(--wf-fs-12)/var(--wf-lh-12) var(--wf-font-ui); --wf-t-tachado: var(--wf-fw-regular) var(--wf-fs-12)/var(--wf-lh-12) var(--wf-font-ui); --wf-t-off: var(--wf-fw-regular) var(--wf-fs-12)/var(--wf-lh-12) var(--wf-font-ui); --wf-t-body-s: var(--wf-fw-regular) var(--wf-fs-14)/var(--wf-lh-14) var(--wf-font-ui); --wf-t-body: var(--wf-fw-regular) var(--wf-fs-16)/var(--wf-lh-16) var(--wf-font-ui); --wf-t-label: var(--wf-fw-medium) var(--wf-fs-14)/var(--wf-lh-14) var(--wf-font-ui); --wf-t-off-ficha: var(--wf-fw-regular) var(--wf-fs-18)/var(--wf-lh-18) var(--wf-font-ui); --wf-t-title-s: var(--wf-fw-semibold) var(--wf-fs-20)/var(--wf-lh-20) var(--wf-font-ui); --wf-t-precio: var(--wf-fw-bold) var(--wf-fs-22)/var(--wf-lh-22) var(--wf-font-ui); --wf-t-tachado-ficha: var(--wf-fw-regular) var(--wf-fs-24)/var(--wf-lh-24) var(--wf-font-ui); --wf-t-title: var(--wf-fw-semibold) var(--wf-fs-24)/var(--wf-lh-24) var(--wf-font-ui); --wf-t-title-l: var(--wf-fw-semibold) var(--wf-fs-28)/var(--wf-lh-28) var(--wf-font-ui); --wf-t-precio-ficha: var(--wf-fw-display) var(--wf-fs-34)/var(--wf-lh-34) var(--wf-font-ui); --wf-t-display: var(--wf-fw-display) var(--wf-fs-44)/var(--wf-lh-44) var(--wf-font-ui); --wf-t-display-l: var(--wf-fw-display) var(--wf-fs-56)/var(--wf-lh-56) var(--wf-font-ui); /* ===== ESPACIO - Espaciado base 4 con medio paso de 2 (01 §2.4). */ --wf-sp-1: 2px; --wf-sp-2: 4px; --wf-sp-3: 8px; --wf-sp-4: 12px; --wf-sp-5: 16px; --wf-sp-6: 20px; --wf-sp-7: 24px; --wf-sp-8: 32px; --wf-sp-9: 40px; --wf-sp-10: 48px; --wf-sp-11: 64px; --wf-gap-grupo: var(--wf-sp-2); --wf-gap-bloque: var(--wf-sp-3); /* ===== RADIO - Radios (01 §2.5 - D5). */ --wf-r-lista-movil: 0; --wf-r-chip: 4px; --wf-r-badge: 6px; --wf-r-control: 8px; --wf-r-media: var(--wf-r-control); --wf-r-tarjeta: 13px; --wf-r-panel: 16px; --wf-r-seccion: 20px; --wf-r-pastilla: 999px; /* ===== SOMBRA - Sombras (01 §2.6). Ninguna usa negro puro. */ --wf-sombra-tarjeta: 0 2px 4px rgba(37,36,41,.08); --wf-sombra-tarjeta-hover: 0 2px 8px 2px rgba(37,36,41,.16); --wf-sombra-panel: 0 8px 24px rgba(37,36,41,.14); --wf-sombra-modal: 0 16px 48px rgba(37,36,41,.24); /* ===== BORDE - Grosores de borde (01 §2.7). */ --wf-bw-1: 1px; --wf-bw-2: 2px; /* ===== CAPA - Z-index (01 §2.8). */ --wf-z-base: 0; --wf-z-elevado: 10; --wf-z-pegajoso: 100; --wf-z-chrome: 200; --wf-z-velo: 800; --wf-z-modal: 900; --wf-z-toast: 1000; /* ===== MOV - Duraciones y curvas (01 §2.9). */ --wf-dur-rapida: 120ms; --wf-dur-media: 180ms; --wf-dur-lenta: 240ms; --wf-ease: cubic-bezier(.2,0,0,1); --wf-ease-sale: cubic-bezier(.4,0,1,1); --wf-ease-entra: cubic-bezier(0,0,.2,1); /* ===== LAYOUT - Breakpoints, contenedores y medidas de chrome (01 §2.10). */ --wf-bp-sm: 480px; --wf-bp-md: 768px; --wf-bp-lg: 1024px; --wf-bp-xl: 1280px; --wf-cont-max: 1280px; --wf-cont-pad: 16px; --wf-grid-gap: 20px; --wf-rail: 310px; --wf-header-alto: 72px; --wf-toast-top: 90px; --wf-toast-top-movil: 76px; --wf-agotado-blur: 3px; /* ===== GRADIENTE - Gradientes del sistema (01 §5.10). Se verifican contra su parada MAS CLARA. */ --wf-grad-cta: linear-gradient(90deg,#962BE2 0%,#D93175 100%); --wf-grad-cta-hover: linear-gradient(90deg,#7D1FC0 0%,#B8215D 100%); --wf-grad-chrome: linear-gradient(180deg,#362EB7 0%,#262288 100%); --wf-grad-campana: linear-gradient(160deg,#0C1A38 0%,#101A33 60%,#0B1630 100%); --wf-grad-scrim: linear-gradient(180deg,rgba(37,36,41,0) 0%,rgba(37,36,41,.45) 45%,rgba(37,36,41,.82) 72%,rgba(37,36,41,.94) 100%); --wf-grad-skeleton: linear-gradient(90deg,#F0F0F3 0%,#F8F8FA 50%,#F0F0F3 100%); /* ===== SEMANTICO - CAPA 2 - semantica (01 §5). Es lo unico que un componente puede consumir. */ --wf-sup-pagina: var(--wf-blanco); --wf-sup-archive: var(--wf-neutral-50); --wf-sup-tarjeta: var(--wf-blanco); --wf-sup-hundida: var(--wf-neutral-100); --wf-sup-inversa: var(--wf-neutral-950); --wf-sup-chrome: var(--wf-azul-800); --wf-sup-chrome-pie: var(--wf-azul-900); --wf-txt-principal: var(--wf-neutral-950); --wf-txt-secundario: var(--wf-neutral-800); --wf-txt-terciario: var(--wf-neutral-700); --wf-txt-apagado: var(--wf-neutral-600); --wf-txt-sobre-oscuro: var(--wf-blanco); --wf-txt-sobre-oscuro-2: var(--wf-neutral-300); --wf-txt-enlace: var(--wf-azul-700); --wf-cta-fondo: var(--wf-grad-cta); --wf-cta-txt: var(--wf-blanco); --wf-cta-fondo-hover: var(--wf-grad-cta-hover); --wf-accion: var(--wf-magenta-600); --wf-accion-hover: var(--wf-magenta-700); --wf-accion-active: var(--wf-magenta-800); --wf-accion-txt: var(--wf-blanco); --wf-sec-fondo: var(--wf-magenta-50); --wf-sec-fondo-hover: var(--wf-magenta-100); --wf-sec-txt: var(--wf-magenta-600); --wf-sec-borde: var(--wf-magenta-600); --wf-accion-sobre-oscuro-bg: var(--wf-blanco); --wf-accion-sobre-oscuro-fg: var(--wf-magenta-700); --wf-foco-exterior: var(--wf-neutral-950); --wf-foco-interior: var(--wf-blanco); --wf-borde-control: var(--wf-neutral-600); --wf-borde-tarjeta: var(--wf-neutral-200); --wf-borde-divisor: var(--wf-neutral-200); --wf-borde-fuerte: var(--wf-neutral-300); --wf-borde-activo: var(--wf-magenta-600); --wf-borde-error: var(--wf-escarlata-700); --wf-precio: var(--wf-neutral-950); --wf-precio-tachado: var(--wf-neutral-600); --wf-off-bg: var(--wf-off-relleno); --wf-off-fg: var(--wf-off-tinta); --wf-envio-chip-bg: var(--wf-envio-wash); --wf-envio-chip-fg: var(--wf-envio-wash-tinta); --wf-envio-grafico: var(--wf-menta-600); --wf-cuotas-txt: var(--wf-azul-700); --wf-cuotas-bg: var(--wf-azul-100); --wf-cuotas-fg: var(--wf-azul-800); --wf-urgencia-bg: var(--wf-urgencia-relleno); --wf-urgencia-fg: var(--wf-urgencia-tinta); --wf-agotado-bg: rgba(37,36,41,.86); --wf-agotado-fg: var(--wf-blanco); --wf-info-bg: var(--wf-cian-100); --wf-info-fg: var(--wf-cian-800); --wf-exito-bg: var(--wf-menta-100); --wf-exito-fg: var(--wf-menta-800); --wf-error-bg: var(--wf-escarlata-100); --wf-error-fg: var(--wf-escarlata-800); --wf-error-solido: var(--wf-escarlata-700); --wf-sel-bg: var(--wf-magenta-100); --wf-sel-fg: var(--wf-magenta-800); --wf-hover-fila: var(--wf-neutral-50); --wf-deshab-bg: var(--wf-neutral-200); --wf-deshab-borde: var(--wf-neutral-600); --wf-deshab-txt: var(--wf-neutral-700); --wf-tercero-wa-bg: var(--wf-wa-marca); --wf-tercero-wa-fg: var(--wf-neutral-950); /* ===== REGISTRO - Registro mayorista B2B (01 §3). N4: la rampa pastel ES el paso -200 del sistema. */ --wf-b2b-accion-fill: var(--wf-azul-200); --wf-b2b-accion-ink: var(--wf-azul-800); --wf-b2b-accion-fill-hover: var(--wf-azul-100); --wf-b2b-aten-fill: var(--wf-ambar-200); --wf-b2b-aten-ink: var(--wf-ambar-900); --wf-b2b-aten-fill-hover: var(--wf-ambar-100); --wf-b2b-ok-fill: var(--wf-menta-200); --wf-b2b-ok-ink: var(--wf-menta-800); --wf-b2b-borde-ctrl: var(--wf-neutral-600); --wf-b2b-vol-1: var(--wf-violeta-100); --wf-b2b-vol-2: var(--wf-violeta-200); --wf-b2b-vol-3: var(--wf-violeta-300); --wf-b2b-vol-ink: var(--wf-violeta-800); --wf-b2b-vol-riel: var(--wf-violeta-700); --wf-b2b-vol-barra: var(--wf-violeta-700); --wf-b2b-vol-track: var(--wf-neutral-200); /* ===== CAMPANA - Campana (D7). */ --wf-campana-badge-bg: var(--wf-campana-relleno); --wf-campana-badge-fg: var(--wf-blanco); /* ===== TAG - CAPA 3 - tags por tipo (01 §5.12.1). Un tipo de mensaje, un color. Todos var(), ninguno hex. */ --wf-tag-envio-fill: var(--wf-envio-hoy); --wf-tag-envio-txt: var(--wf-blanco); --wf-tag-envio-alt-bg: var(--wf-envio-chip-bg); --wf-tag-envio-alt-borde: var(--wf-envio-hoy); --wf-tag-envio-alt-txt: var(--wf-envio-chip-fg); --wf-tag-cuotas-fill: var(--wf-azul-800); --wf-tag-cuotas-txt: var(--wf-blanco); --wf-tag-cuotas-linea: var(--wf-cuotas-txt); --wf-tag-descuento-fill: var(--wf-off-bg); --wf-tag-descuento-txt: var(--wf-off-fg); --wf-tag-campana-fill: var(--wf-campana-badge-bg); --wf-tag-campana-txt: var(--wf-campana-badge-fg); --wf-tag-urgencia-fill: var(--wf-urgencia-bg); --wf-tag-urgencia-txt: var(--wf-urgencia-fg); /* ===== MASFULL - CAPA 3 - +masfull (01 §5.12.2). El amarillo es letra del sello o borde, nunca relleno con letra blanca. */ --wf-masfull-borde: var(--wf-masfull-amarillo); --wf-masfull-badge-bg: var(--wf-neutral-950); --wf-masfull-badge-txt: var(--wf-masfull-amarillo); /* ===== MUESTRA - CAPA 3 - muestras de variacion (01 §5.12.3). */ --wf-muestra-tam: 16px; --wf-muestra-tam-ficha: 56px; --wf-muestra-borde: var(--wf-borde-divisor); --wf-muestra-anillo: var(--wf-azul-600); /* ===== TARJETA - CAPA 3 - borde de tarjeta, estilo Fravega (01 §5.12.4). */ --wf-tarjeta-borde: var(--wf-borde-tarjeta); --wf-tarjeta-borde-hover: var(--wf-borde-control); /* ===== ALIAS - ALIAS DE NOMBRE. Mismo rol, nombre viejo. Se emiten como var(--canonico). */ --wf-foco-ext: var(--wf-foco-exterior); --wf-foco-int: var(--wf-foco-interior); --wf-fuente: var(--wf-font-ui); --wf-fuente-mono: var(--wf-font-datos); --wf-campana-fuente: var(--wf-font-campana); --wf-lh-prose: var(--wf-lh-prosa); --wf-dur-lento: var(--wf-dur-lenta); --wf-ease-salida: var(--wf-ease-sale); --wf-t-micro: var(--wf-t-legal); --wf-t-price-s: var(--wf-t-precio); --wf-t-display-s: var(--wf-t-title-l); --wf-r-0: var(--wf-r-lista-movil); --wf-r-xs: var(--wf-r-chip); --wf-r-sm: var(--wf-r-badge); --wf-r-md: var(--wf-r-control); --wf-r-lg: var(--wf-r-control); --wf-r-b2b: var(--wf-r-control); --wf-r-xl: var(--wf-r-panel); --wf-r-pill: var(--wf-r-pastilla); --wf-cta-grad: var(--wf-cta-fondo); --wf-cta-grad-hover: var(--wf-cta-fondo-hover); --wf-cta-fg: var(--wf-cta-txt); --wf-cta-alt-bg: var(--wf-sec-fondo); --wf-cta-alt-bg-hover: var(--wf-sec-fondo-hover); --wf-cta-alt-borde: var(--wf-sec-borde); --wf-cta-alt-txt: var(--wf-sec-txt); --wf-seleccion-bg: var(--wf-sel-bg); --wf-seleccion-fg: var(--wf-sel-fg); --wf-campana-grad: var(--wf-grad-campana); --wf-urgencia-chip-bg: var(--wf-urgencia-bg); --wf-urgencia-chip-fg: var(--wf-urgencia-fg); --wf-accion-chapa: var(--wf-off-bg); --wf-tinta-tachado: var(--wf-precio-tachado); --wf-chip: var(--wf-r-chip); --wf-tinta: var(--wf-txt-principal); --wf-tinta-suave: var(--wf-txt-secundario); --wf-fondo: var(--wf-sup-pagina); --wf-fondo-suave: var(--wf-sup-archive); --wf-borde: var(--wf-borde-divisor); --wf-nav: var(--wf-sup-chrome); --wf-envio-txt: var(--wf-envio-hoy); --wf-envio-txt-2: var(--wf-envio-manana); --wf-b2b-azul-fill: var(--wf-b2b-accion-fill); --wf-b2b-azul-ink: var(--wf-b2b-accion-ink); --wf-b2b-azul-borde: var(--wf-b2b-borde-ctrl); --wf-b2b-menta-fill: var(--wf-b2b-ok-fill); --wf-b2b-menta-ink: var(--wf-b2b-ok-ink); --wf-b2b-menta-borde: var(--wf-b2b-borde-ctrl); --wf-b2b-mag-fill: var(--wf-b2b-vol-2); --wf-b2b-mag-ink: var(--wf-b2b-vol-ink); --wf-b2b-mag-borde: var(--wf-b2b-borde-ctrl); --wf-vol-t1: var(--wf-b2b-vol-1); --wf-vol-t2: var(--wf-b2b-vol-2); --wf-vol-t3: var(--wf-b2b-vol-3); --wf-vol-ink: var(--wf-b2b-vol-ink); --wf-vol-borde: var(--wf-b2b-vol-riel); --wf-vol-barra: var(--wf-b2b-vol-barra); --wf-ok-fill: var(--wf-b2b-ok-fill); --wf-ok-ink: var(--wf-b2b-ok-ink); --wf-ok-borde: var(--wf-b2b-borde-ctrl); /* Captura de la paleta global de Astra. Reapuntar estos 9 arrastra botones, enlaces, titulos y fondos del tema sin tocar el tema. */ --ast-global-color-0: #C52995; --ast-global-color-1: #962BE2; --ast-global-color-2: #252429; --ast-global-color-3: #4C4A54; --ast-global-color-4: #F8F8FA; --ast-global-color-5: #FFFFFF; --ast-global-color-6: #E1E0E7; --ast-global-color-7: #252429; --ast-global-color-8: #252429; /* La MISMA paleta, en la copia que Astra le pasa a Elementor. Astra la escribe con los hex del Customizer y no como var(), asi que pisar solo --ast-global-color-N dejaba a Elementor en la paleta vieja: 24 colores de la home. Sale de la misma fila de ASTRA: no pueden divergir. */ --e-global-color-astglobalcolor0: #C52995; --e-global-color-astglobalcolor1: #962BE2; --e-global-color-astglobalcolor2: #252429; --e-global-color-astglobalcolor3: #4C4A54; --e-global-color-astglobalcolor4: #F8F8FA; --e-global-color-astglobalcolor5: #FFFFFF; --e-global-color-astglobalcolor6: #E1E0E7; --e-global-color-astglobalcolor7: #252429; --e-global-color-astglobalcolor8: #252429; } /* Los globales del kit de Elementor. Elementor los declara en .elementor-kit-N, sobre el body, no en :root. body[class*=...] pesa (0,1,1) y le gana a (0,1,0) sin depender del orden de carga. Va fuera de @layer: lo que esta en una capa pierde contra lo que no, y el CSS de Elementor no esta en ninguna. */ body[class*="elementor-kit-"] { --e-global-color-primary: #252429; --e-global-color-secondary: #C52995; --e-global-color-text: #777582; --e-global-color-accent: #C52995; --e-global-color-d7e9760: #E32453; } /* --- WooCommerce y los campos del tema. VA FUERA DE CAPA a proposito: el CSS de Woo y el de Astra tampoco estan en ninguna, y lo que vive en una capa pierde contra lo que no, por mas que cargue despues. --- */ /* Astra declara --ast-border-color #dddddd y lo consumen 74 reglas: tablas, fieldset, separadores de articulo Y los campos. Como divisor decorativo pasa al token de divisor; los CONTROLES se resuelven abajo, porque un borde de control necesita 3:1 y el divisor da 1.31 (01 §1.2, aviso del -6). */ :root{ --ast-border-color: var(--wf-borde-divisor); } /* (0,4,1) contra el (0,1,1) de Astra: gana sin !important. Se excluyen los input que son botones y las casillas, que tienen su propio tratamiento. */ input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]), select,textarea{ border-color: var(--wf-borde-control); } /* El asterisco de campo obligatorio venia en rojo puro del CSS de Woo (#FF0000, 3.9985 sobre blanco: no llega a AA). Pasa al error del sistema. */ .woocommerce form .form-row abbr.required, .woocommerce-page form .form-row abbr.required{ color: var(--wf-error-fg); } @media (prefers-reduced-motion:reduce){ :root{ --wf-dur-rapida:1ms; --wf-dur-media:1ms; --wf-dur-lenta:1ms; } } /* --- Contextos: REDEFINEN semantica, no declaran primitivos (01 §0.3) --- */ /* === R-FOCO-1 v2 · EL PAR DEL ANILLO SE DECLARA POR SUPERFICIE =========== S = contraste de la superficie contra blanco. S<4.5 -> exterior oscuro; S>=4.5 -> exterior blanco. El interior es siempre el opuesto, y el par es binario (blanco <-> neutral-950), asi que entre aros hay 15.4068:1 fijos. Van en el SCOPE y no en :focus-visible del control: asi el anidamiento lo decide la herencia, que entrega la superficie mas cercana al control. SUPERFICIES CLARAS (el default de :root ya es este par): pagina/tarjeta blanco S=1.0000 · archive neutral-50 S=1.0607 hundida neutral-100 S=1.1374 · pasteles del B2B S=1.2804-1.3401 Se enumeran igual para que RESETEEN cuando cuelgan de una superficie oscura — una tarjeta blanca dentro de .wf-seccion-campana es el caso que la version anterior dejaba con anillo blanco sobre blanco (1.0000). */ .wf-card,.wf-sup-pagina,.wf-sup-tarjeta,.wf-sup-archive,.wf-sup-hundida{ --wf-foco-exterior:var(--wf-neutral-950); /* 15.4068 blanco · 14.5255 n-50 */ --wf-foco-interior:var(--wf-blanco); } /* SUPERFICIE OSCURA declarada sin clase de contexto: el marcado la senala. */ .wf-sup-inversa,[data-wf-sobre-color]{ --wf-foco-exterior:var(--wf-blanco); /* 15.4068 sobre neutral-950 */ --wf-foco-interior:var(--wf-neutral-950); } /* --wf-txt-apagado y el tachado fallan sobre superficie tintada: saltan un paso. */ .wf-sup-archive,.wf-sup-hundida,.wf-resumen,.wf-minicarrito,.wf-checkout{ --wf-txt-apagado:var(--wf-neutral-700); /* 5.8969 / 5.4992 */ --wf-precio-tachado:var(--wf-neutral-700); } /* La ficha sube el precio de 22 a 34 (01 §2.3.4). */ .wf-ficha{ --wf-fs-precio:var(--wf-fs-34); } .wf-chrome-oscuro{ --wf-txt-principal:var(--wf-blanco); /* 9.4110 sobre azul-800 */ --wf-txt-secundario:var(--wf-neutral-300); /* 7.8360 sobre azul-900 */ --wf-txt-enlace:var(--wf-azul-200); /* 7.1820 sobre azul-800 */ --wf-borde-divisor:rgba(255,255,255,.18); --wf-foco-exterior:var(--wf-blanco); /* 9.4110 azul-800 · 12.5994 azul-900 */ --wf-foco-interior:var(--wf-neutral-950); /* R-FOCO-1 v2: el par es binario */ --wf-cta-fondo:var(--wf-blanco); /* el boton se INVIERTE */ --wf-cta-txt:var(--wf-magenta-700); /* 6.9682 */ } /* El exterior era azul-200 (13.1609 sobre el fondo, correcto) pero rompia la binariedad del par: sobre una tarjeta blanca dentro de la seccion daba 1.3074. Con el par binario + el reset de .wf-card, los dos casos cierran. */ .wf-seccion-campana{ --wf-foco-exterior:var(--wf-blanco); /* 17.2061 sobre #0C1A38 */ --wf-foco-interior:var(--wf-neutral-950); } /* N4: el B2B no trae un solo primitivo nuevo. Es el paso -200 del sistema. */ [data-wf-registro="b2b"]{ --wf-sup-chrome:var(--wf-neutral-950); --wf-sup-chrome-pie:var(--wf-neutral-900); --wf-sup-archive:var(--wf-neutral-50); --wf-cta-fondo:var(--wf-b2b-accion-fill); --wf-cta-txt:var(--wf-b2b-accion-ink); --wf-sec-borde:var(--wf-b2b-borde-ctrl); --wf-sec-txt:var(--wf-b2b-accion-ink); --wf-sec-fondo:var(--wf-blanco); --wf-sec-fondo-hover:var(--wf-b2b-accion-fill-hover); --wf-txt-enlace:var(--wf-b2b-accion-ink); --wf-borde-activo:var(--wf-b2b-borde-ctrl); --wf-sel-bg:var(--wf-b2b-accion-fill); --wf-sel-fg:var(--wf-b2b-accion-ink); --wf-font-numeros:var(--wf-font-datos); --wf-foco-exterior:var(--wf-neutral-950); --wf-foco-interior:var(--wf-blanco); } [data-wf-registro="b2b"].wf-chrome-oscuro{ --wf-foco-exterior:var(--wf-blanco); --wf-foco-interior:var(--wf-neutral-950); } /* --- Componentes: DENTRO de la capa, para no pisar lo no migrado --- */ @layer wf-componentes { /* El CTA es degradado; la chapa de %OFF es plana. Lo que los separa es la FORMA, no el matiz: entre si dan 1.1264:1. */ /* box-sizing explicito: el borde de 2px del alternativo entraba EN la caja y el primario la sumaba, asi que D10 (misma caja) se rompia por 4px. */ .wf-cta{background:var(--wf-cta-fondo);color:var(--wf-cta-txt);box-sizing:border-box;border-radius:var(--wf-r-control);border:var(--wf-bw-2) solid transparent} /* brightness(1.07) ACLARA y tira la parada magenta de 4.52 a 4.02: rompe AA justo cuando el dedo esta encima. El hover del primario OSCURECE. */ .wf-cta:hover{background:var(--wf-cta-fondo-hover)} /* D10: MISMA caja, solo cambia el relleno. */ .wf-cta--alt{background:var(--wf-sec-fondo);color:var(--wf-sec-txt);border:var(--wf-bw-2) solid var(--wf-sec-borde);border-radius:var(--wf-r-control)} .wf-cta--alt:hover{background:var(--wf-sec-fondo-hover);color:var(--wf-accion-hover);border-color:var(--wf-accion-hover)} /* --- ANILLO DE FOCO · R-FOCO-1 v2 (01 §5.4 reescrita · 02 §1.1) ------- LA CONDICION ES DE LA SUPERFICIE QUE RODEA AL CONTROL, NO DE SU RELLENO. Sea S el contraste de esa superficie contra blanco: S < 4.5 superficie CLARA -> exterior neutral-950 · interior BLANCO S >= 4.5 superficie OSCURA -> exterior BLANCO · interior neutral-950 Barrido de L de la superficie en 1e-4: el exterior contra la superficie nunca baja de 3. Peor caso 3.4247 (L=0.1834, justo bajo el umbral). El par es de DOS valores, asi que el contraste ENTRE aros es invariante: 15.4068:1. Esa es la garantia — uno de los dos contrasta siempre. Los aros son ADYACENTES: interior 0-2px pegado al relleno, exterior 2-4px pegado al interior y a la superficie. Antes el spread era de 1px contra un offset de 2px y entre los dos aros se colaba 1px de superficie: el par no se tocaba y la garantia no era visual. */ :where(.wf-foco,:focus-visible){outline:var(--wf-bw-2) solid var(--wf-foco-exterior);outline-offset:var(--wf-bw-2);box-shadow:0 0 0 var(--wf-bw-2) var(--wf-foco-interior)} /* NO HAY MAS OVERRIDES POR COMPONENTE. El par se declara en el SCOPE DE SUPERFICIE (arriba, fuera de la capa, junto a las otras redefiniciones de contexto) y el anidamiento lo resuelve la HERENCIA, que siempre entrega el scope mas cercano al control — o sea, la superficie sobre la que el aro realmente cae. Lo que se retira, y por que ya no hace falta: · .wf-cta:not(:where(.wf-cta--alt)):focus-visible -> F1. Ataba el exterior al relleno degradado del CTA (R=4.5195) y lo pintaba BLANCO sobre pagina blanca: 1.0000. La exclusion del secundario protegia de que ese blanco cayera sobre magenta-50; con la regla nueva ningun CTA toma el exterior de su relleno, asi que no queda nada de que excluir y el resultado que la exclusion cuidaba se conserva: en superficie clara los dos CTA reciben exterior neutral-950 (15.4068 sobre blanco). · .wf-chrome-oscuro :focus-visible y .wf-seccion-campana :focus-visible -> eran DESCENDIENTES, asi que alcanzaban tambien a un control dentro de una tarjeta BLANCA puesta adentro de la seccion de campana, y ahi el exterior blanco daba 1.0000 contra la tarjeta. Como scope, la tarjeta se resetea sola. · [data-wf-registro="b2b"] :where(...):focus-visible -> el B2B entero ya declara el par en su scope. Enumerar clases de control era la forma de compensar que la regla vivia en el elemento. · la excepcion I2 del chrome del B2B -> su RESULTADO se conserva intacto (exterior blanco, 15.4068 / 11.9340 sobre neutral-950 / neutral-900), pero ahora sale de .wf-chrome-oscuro por herencia y de la regla de misma-clase [data-wf-registro="b2b"].wf-chrome-oscuro. Ya no hace falta ganarle por especificidad a nada, porque nada compite. · la enumeracion (0,4,0) de .wf-cta--alt -> con la regla nueva era ACTIVAMENTE DAÑINA: forzaba exterior neutral-950 sobre el chrome (1.2901) y sobre la campana (1.1168). Su resultado bueno —que el secundario no reciba blanco cuando esta en superficie clara— lo da ahora el scope, y en superficie oscura el exterior blanco es correcto porque cae sobre el chrome (9.4110) mientras el interior neutral-950 es el que toca el relleno magenta-50 (14.4482). */ /* --- I3 - GEOMETRIA DE LA TARJETA (02 §4.3.3 · R-GEO-1/2/3) ----------- Aritmetica publicada en 02 §3.6, a 360px de viewport: tarjeta = (360 - 16*2 gutter - 8 gap) / 2 = 160px contenido= 160 - 8*2 padding = 144px franja = 160 - 8*2 inset = 144px La GRILLA que produce ese 160 no se emite aca: .wf-grid es de componentes.json y declarar una segunda seria un tercer origen. De aca sale solo R-GEO-1/2/3, que es lo que faltaba emitir. EL CONTENEDOR ES LA TARJETA, NO LA FOTO. El bloque publicado en 02 ponia container-type en .wf-card__media, y ahi R-GEO-1 no podia funcionar por dos motivos: (a) una container query solo alcanza a los DESCENDIENTES del contenedor, y .wf-card__cuerpo es hermano de .wf-card__media, asi que la mitad que baja el chip al flujo no matcheaba nunca; (b) R-GEO-1 mide "por debajo de 208px de TARJETA", y la foto no es la tarjeta: difieren en los 2x8px de padding. Medido en Chrome: con el contenedor en la foto, el chip quedaba display:none EN LAS DOS SEDES — invisible, no reubicado. El contenedor se nombra para que una tarjeta anidada no lo capture. */ .wf-card{container-type:inline-size;container-name:wf-card} .wf-card__media{position:relative} /* R-GEO-2: el ancho de las esquinas NO se expresa en porcentaje. Un % en una ranura absoluta resuelve contra el bloque contenedor —la foto, 160px— y no contra la franja de 144: esa ambiguedad es la que producia el calc(50% - 4px) = 68.0px, mas chico que cualquiera de las dos piezas que tenia que contener (badge 69.2 · chip 80.1). La fila es un flex. */ .wf-card__esquinas{position:absolute;inset:var(--wf-sp-3) var(--wf-sp-3) auto; display:flex;justify-content:space-between;align-items:flex-start; gap:var(--wf-sp-3);pointer-events:none} /* R-GEO-3: el badge de marca nunca se achica ni se elipsa —"RELAMPAB..." es peor que no ponerlo—; el de urgencia si, porque su carga esta en el numero. */ .wf-badge--campana{flex:0 0 auto;white-space:nowrap} .wf-badge--urgencia{flex:0 1 auto;min-width:0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} /* Por defecto la urgencia vive en la esquina; el cuerpo esta apagado. */ .wf-card__cuerpo .wf-badge--urgencia{display:none} /* R-GEO-1: por debajo de 208px de TARJETA la fila superior tiene UNA sola esquina: el chip de urgencia deja la foto y baja al flujo, bajo el titulo, donde dispone de los 144px enteros de la caja de contenido. 208 = 69.2 (campana) + 8 (gap) + 114.3 ("ULTIMA UNIDAD") + 8 + 8 (insets) = 207.5, redondeado al entero superior de la grilla de 4. El 208 va LITERAL: una container query, igual que una @media, se evalua antes de que exista valor computado y NO puede leer var(). Mismo I1. */ @container wf-card (max-width:207.98px){ .wf-card__esquinas .wf-badge--urgencia{display:none} .wf-card__cuerpo .wf-badge--urgencia{display:inline-flex} } /* Respaldo sin container queries: el mismo umbral por viewport. A 360px la tarjeta mide 160px y ninguna grilla del sistema da >=208px de tarjeta por debajo de --wf-bp-md (768px), asi que el corte cae en el mismo lugar. 768 literal, no var(--wf-bp-md): I1. */ @supports not (container-type:inline-size){ @media (max-width:767.98px){ .wf-card__esquinas .wf-badge--urgencia{display:none} .wf-card__cuerpo .wf-badge--urgencia{display:inline-flex} } } .wf-chip-off{background:var(--wf-off-bg);color:var(--wf-off-fg);border-radius:var(--wf-r-chip);font:var(--wf-t-off);padding:2px 6px} .wf-ficha .wf-chip-off{font:var(--wf-t-off-ficha);padding:3px 5px} /* line-through, no border-bottom: el border se parte cuando el precio envuelve a dos lineas (D9d). */ .wf-tachado{color:var(--wf-precio-tachado);text-decoration-line:line-through;text-decoration-thickness:var(--wf-strike-h);text-decoration-color:currentColor} /* Tarjeta: 8px medidos + 5px que pidio el cliente (D5). */ .wf-card{border-radius:var(--wf-r-tarjeta);box-shadow:var(--wf-sombra-tarjeta)} .wf-card figure,.wf-card-foto{border-radius:var(--wf-r-media)} /* La vista lista de movil va a filo: override explicito (D5). */ /* I1: 767.98 LITERAL. Una media query se evalua antes de que exista valor computado, asi que calc(var(--wf-bp-md) - .02px) no es que falle: la condicion entera es invalida y el bloque se descarta. */ @media (max-width:767.98px){ .wf-card--lista{border-radius:var(--wf-r-lista-movil);box-shadow:none; border:0;border-bottom:var(--wf-bw-1) solid var(--wf-borde-divisor)} .wf-toast-stack{top:var(--wf-toast-top-movil)} .wf-card--agotado{--wf-agotado-blur:1.5px}} /* El B2B alinea SKU y columnas numericas: la mono es un token del modulo. */ .wfm-sku,.wfm-mono{font-family:var(--wf-font-datos);font-variant-numeric:tabular-nums} /* Unico !important del sistema (01 §3.4): exclusion de contexto sobre componentes que pueden llegar impresos inline desde PHP. */ [data-wf-registro="b2b"] .wf-badge--campana, [data-wf-registro="b2b"] .wf-badge--envio, [data-wf-registro="b2b"] .wf-precio__tachado, [data-wf-registro="b2b"] .wf-precio__off, [data-wf-registro="b2b"] .wf-contador{display:none !important} }