/* ============================================================================ PRICEFARMA — CAPA DE TOKENS Fase 1 del Epic 16 ============================================================================ QUÉ ES ESTO. Las decisiones de diseño de Pricefarma, escritas una sola vez como variables CSS. Prefijo `--pf-`, que CONVIVE con `--ci-` mientras se migra pantalla por pantalla. ESTE ARCHIVO NO CAMBIA NI UN PIXEL POR SÍ SOLO. Solo declara valores; nadie los consume todavía. Lo que se ve hoy lo sigue pintando `style.css`, que NO se toca (salvo el `@import` de la fuente, que se mudó al ``). LA FUENTE DE VERDAD NO ES ESTE ARCHIVO, es la nota del design system: Bóveda Desarrollo\01 Proyectos\Grupo Lemnos\Pricefarma\4. UI UX Design System.md Ahí está el porqué de cada valor y su contraste medido. Aquí solo está el valor. Si los dos discrepan, manda la nota. TODAS LAS CIFRAS DE CONTRASTE DE LOS COMENTARIOS ESTÁN MEDIDAS (WCAG 2.1), no estimadas. "página" = sobre #f0f2fc · "blanco" = sobre #FFFFFF. Actualizado: 2026-08-26 — se eliminó #545454 del contexto de la marca. ========================================================================= */ :root { /* ══ 1. LAS CUATRO ESCALAS ═════════════════════════════════════════════ Ningún color inventado: cada escalón es un color de marca aclarado u oscurecido. Los escalones NO son decorativos, son umbrales: 500 supera 3:1 bordes, iconos, texto grande, componentes 600 supera 4.5:1 texto normal (AA) 700 supera 7:1 alto contraste (AAA) Por debajo de 500 son rellenos y tintes: NUNCA texto. */ /* --- teal · marca, acción primaria y mejor precio --------------------- */ --pf-teal-50: #e4f5f0; --pf-teal-100: #d1ece4; --pf-teal-200: #aadacd; --pf-teal-300: #82c8b7; --pf-teal-400: #55b6a0; --pf-teal-500: #00a48b; /* ← color de marca. NUNCA texto: 3.14 en blanco */ --pf-teal-600: #00836F; /* 4.69 con texto blanco encima */ --pf-teal-700: #00614F; /* 7.44 blanco · 6.60 sobre el tinte */ --pf-teal-800: #014136; --pf-teal-900: #00231c; --pf-teal-950: #00140f; /* --- superficie · fondos, bordes, separadores Y TEXTO ----------------- Desde el 2026-08-26 esta escala también da el texto. Antes había una escala `neutral` aparte porque el texto era #545454 (gris puro, tono 0°) y el fondo azulado (tono 230°). Al pasar el texto a #4A4E63 —tono 230°, el mismo del fondo— esa razón desapareció y la escala neutral se retiró. */ --pf-sup-50: #F6F7FD; --pf-sup-100: #f0f2fc; /* ← color de marca. Fondo de la aplicación */ --pf-sup-200: #E8EAF5; --pf-sup-300: #DEE1F0; --pf-sup-400: #b6bacb; --pf-sup-500: #747A96; /* 3.79 página · 4.23 blanco */ --pf-sup-600: #646984; /* 4.83 página · 5.39 blanco */ --pf-sup-700: #4A4E63; /* 7.35 página · 8.20 blanco — AAA */ --pf-sup-800: #353a4c; --pf-sup-900: #232736; --pf-sup-950: #1B1E2B; /* --- rojo · SOLO error ------------------------------------------------ Uno de los dos únicos colores fuera de la marca. Un error no se puede señalar en teal. Se usa solo para esto: es la puerta por la que entrarían colores sueltos si se deja abierta. */ --pf-red-50: #fff1ed; --pf-red-100: #ffe2da; --pf-red-200: #ffc8ba; --pf-red-300: #ffa58d; --pf-red-400: #ff7d5e; --pf-red-500: #ff4f30; --pf-red-600: #cc0000; /* ← sirve en las DOS direcciones: 5.89 como texto sobre blanco y 5.89 con texto blanco encima */ --pf-red-700: #b60100; /* 6.37 sobre la banda roja */ --pf-red-800: #7c0b00; --pf-red-900: #4e1000; --pf-red-950: #370f00; /* --- ámbar · SOLO aviso ----------------------------------------------- */ --pf-amber-50: #fff2df; --pf-amber-100: #f7e6cc; --pf-amber-200: #ffcd6b; --pf-amber-300: #e9b33b; --pf-amber-400: #fbbc04; /* ← SOLO relleno. Como texto da 1.71 */ --pf-amber-500: #b58702; --pf-amber-600: #926c02; --pf-amber-700: #735400; /* 6.35 sobre la banda ámbar */ --pf-amber-800: #3f2e00; /* 7.68 sobre el relleno ámbar */ --pf-amber-900: #332401; --pf-amber-950: #261b00; /* ══ 2. CAPA SEMÁNTICA ═════════════════════════════════════════════════ Con los nombres de shadcn/ui, para que el Pricefarma greenfield (Next.js + Tailwind) los levante sin traducir nada. REGLA DE USO: en el código se usan ESTOS, no los escalones de arriba. Los escalones son la paleta; estos son el significado. */ --pf-background: var(--pf-sup-100); /* fondo de la app */ --pf-card: #FFFFFF; /* tarjetas y tablas */ --pf-foreground: var(--pf-sup-700); /* texto principal · 8.20 */ --pf-muted-foreground: var(--pf-sup-600); /* texto secundario · 5.39 */ --pf-brand: var(--pf-teal-500); /* marca, marcadores, iconos ⚠ NUNCA texto: 3.14 */ --pf-primary: var(--pf-teal-600); /* acción primaria · 4.69 con texto blanco encima */ --pf-accent: var(--pf-teal-50); /* fila ganadora y chips */ --pf-accent-foreground: var(--pf-teal-700); /* texto sobre el tinte · 6.60 */ --pf-border: var(--pf-sup-300); /* separadores · 1.30, decorativo */ --pf-input: var(--pf-sup-500); /* borde de CAMPO · 4.23 blanco · 3.79 página. Un campo es componente: necesita 3:1, y --pf-border no llega */ --pf-ring: var(--pf-teal-600); /* anillo de foco */ --pf-destructive: var(--pf-red-600); /* error, texto y relleno · 5.89 */ --pf-destructive-subtle: var(--pf-red-50); --pf-destructive-on-subtle: var(--pf-red-700); /* 6.37 */ --pf-warning: var(--pf-amber-400); /* aviso, SOLO relleno */ --pf-warning-foreground: var(--pf-amber-800); /* texto sobre el relleno · 7.68 */ --pf-warning-subtle: var(--pf-amber-50); --pf-warning-on-subtle: var(--pf-amber-700); /* 6.35 */ /* ══ 3. TIPOGRAFÍA ═════════════════════════════════════════════════════ ESCALA CERRADA DE 8. Su valor está en lo que prohíbe: hoy la v1 tiene 31 tamaños distintos (28 en style.css más los de app.js), y de ahí viene el aspecto desparejo. Si hace falta un noveno, se discute la escala; no se agrega el valor suelto. */ --pf-font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif; /* Plus Jakarta Sans se DECLARA aquí pero todavía NO SE CARGA: entra en la Fase 2, cuando el armazón la use (decisión de Gerardo, 2026-08-26). Hasta entonces cae al respaldo, que es la fuente del sistema. */ --pf-font-ui: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; --pf-fs-micro: 0.6875rem; /* 11px · etiquetas diminutas. ⚠ NUNCA información que haya que leer */ --pf-fs-xs: 0.75rem; /* 12px · notas al pie, metadatos */ --pf-fs-sm: 0.8125rem; /* 13px · texto secundario, celdas densas */ --pf-fs-base: 0.875rem; /* 14px · TEXTO BASE DE LA APLICACIÓN */ --pf-fs-md: 1rem; /* 16px · texto destacado */ --pf-fs-lg: 1.25rem; /* 20px · títulos de sección */ --pf-fs-xl: 1.5rem; /* 24px · título de pantalla */ --pf-fs-2xl: 1.875rem; /* 30px · cifras grandes del panel */ /* ══ 4. ESPACIADO ══════════════════════════════════════════════════════ De 4 en 4. Ocho pasos, y nada fuera de ellos. Hoy la v1 tiene 33 valores sueltos de padding y margin, sin ninguna escala. */ --pf-s-1: 4px; /* icono y texto */ --pf-s-2: 8px; /* interior de chips */ --pf-s-3: 12px; /* interior de campos */ --pf-s-4: 16px; /* interior de tarjeta */ --pf-s-5: 20px; --pf-s-6: 24px; /* separación entre bloques */ --pf-s-8: 32px; /* márgenes de sección */ --pf-s-10: 40px; /* aire mayor, cabeceras */ /* ══ 5. FORMA Y MOVIMIENTO ═════════════════════════════════════════════ Tres radios. Hoy la v1 tiene seis, con 999px y 99px haciendo lo mismo. */ --pf-r-sm: 6px; /* campos, botones, chips */ --pf-r-md: 10px; /* tarjetas, modales */ --pf-r-pill: 999px; /* etiquetas de estado, avatar */ /* Las sombras NO son negras: van teñidas del azul de marca. Es lo que evita el gris sucio sobre el fondo #f0f2fc. */ --pf-sh-xs: 0 1px 2px rgba(31,38,84,.05); --pf-sh-sm: 0 1px 2px rgba(31,38,84,.05), 0 2px 6px rgba(31,38,84,.05); --pf-sh-md: 0 8px 28px rgba(31,38,84,.14); --pf-t-fast: 140ms ease; /* ══ 6. ARMAZÓN ════════════════════════════════════════════════════════ LA FRANJA DE 780-899px MANDA. Ahí ya está medido que la tabla de precios obliga a desplazar horizontalmente, y la barra se come 248px. Por eso colapsa a 76px por debajo de 1100px. ⚠ No se aprueba ninguna pantalla del rediseño sin medir esa franja. */ --pf-sb-w: 248px; /* barra lateral expandida */ --pf-sb-w-collapsed: 76px; /* colapsada, bajo 1100px */ --pf-topbar-h: 72px; /* la franja del logotipo comparte esta altura con la barra superior: se leen como UNA banda */ /* ══ 7. BARRA LATERAL — OPCIÓN J, FIJADA AQUÍ ══════════════════════════ ESTO RESUELVE UN RIESGO CONCRETO del design system (§10): en el mockup los tokens --sb-* NO están en :root, viven dentro de cada variante A-J. Quien construyera a partir del CSS base sin aplicar explícitamente la J se quedaba sin definición — y varias variantes descartadas pintan el activo con el teal, que sobre este gris da 2.61 y NO cumple. Aquí la opción J es el valor por omisión, no una variante. REGLA MEDIDA, no opinable: el teal #00a48b da 2.61:1 sobre #4A4E63. DENTRO DE LA BARRA EL VERDE DE MARCA NO SE USA. Ni siquiera llega al mínimo de 3:1 de componentes. El teal se reserva para el contenido. */ --pf-sb-bg: var(--pf-sup-700); /* #4A4E63 */ --pf-sb-text: var(--pf-sup-100); /* #f0f2fc · 7.35 AAA */ --pf-sb-icon: var(--pf-sup-100); --pf-sb-muted: rgba(240,242,252,.86); /* etiquetas de grupo · 5.82 */ --pf-sb-line: rgba(255,255,255,.14); --pf-sb-hover: rgba(255,255,255,.10); /* La barra de desplazamiento de la navegación (decisión de Gerardo, 2026-08-26). Va APARTE de --pf-sb-line, que también dibuja los separadores de grupo y el filete del pie: aquellos deben quedarse tenues, esta no. POR QUÉ NO SIRVE UN TONO CERCANO AL FONDO: una barra de desplazamiento es un COMPONENTE DE INTERFAZ, y WCAG 1.4.11 le pide 3:1. Medido sobre el gris #4A4E63, los vecinos de la rampa no llegan — sup-600 da 1.52 y sup-500 da 1.94. Hay que saltar a sup-400. */ --pf-sb-scroll: var(--pf-sup-400); /* #b6bacb · 4.25 · CUMPLE 3:1 */ --pf-sb-scroll-hover: var(--pf-sup-300); /* #DEE1F0 · 6.30 */ --pf-sb-scroll-activo:var(--pf-sup-200); /* #E8EAF5 · 6.84 · al arrastrar */ --pf-sb-active-bg: rgba(255,255,255,.16); /* EL ACTIVO: mismo color de letra que los demás, en negrita, y la menta SOLO en el marcador del borde. Es lo que hace el mockup. CORREGIDO EL 2026-08-26. Estuvo un tiempo con la etiqueta en menta, justificado con que #5FD9C1 da 4.76 y cumple AA. Ese 4.76 estaba medido contra el GRIS DE LA BARRA, que no es el fondo que tiene detrás: el elemento activo lleva su propio fondo (blanco al 16%, o sea #676A7C). Sobre ESE, la menta da 3.10 y NO cumple AA para texto. El blanco da 5.34. La lección: medir contra la superficie que el elemento tiene detrás de verdad, no contra la del contenedor. */ --pf-sb-active-tx: #FFFFFF; /* 5.34 sobre el activo */ --pf-sb-active-mark: #5FD9C1; /* solo el marcador */ --pf-sb-avatar-bg: rgba(255,255,255,.16); --pf-sb-avatar-tx: #FFFFFF; --pf-sb-edge: transparent; /* sin borde derecho: el tono ya separa */ --pf-logo-word: var(--pf-sup-100); --pf-logo-mark: #5FD9C1; }