/* ============================================================================ REGISTRADORA — tokens del sistema POS para comercios de mostrador. Primer rubro: carnicería. Fuente visual: la maqueta aprobada (lab/registradora/maqueta/project/). Los colores de la maqueta venían en oklch(); acá van en hex, convertidos desde ese oklch, porque el medidor solo mide hex. El oklch de origen va en el comentario de cada primitivo. Cerrado: 2026-10-05 (fase 0 del PRP-001). Todos los contrastes de este archivo están MEDIDOS con .claude/skills/sistema-de-diseno/resources/medir.mjs — peor par por fondo. Fondos de página medidos: --fondo, --superficie y --superficie-2. ============================================================================ */ :root { /* --------------------------------------------------------------------- 1. PRIMITIVOS — valores crudos. Ningún componente los toca. --------------------------------------------------------------------- */ /* Papel */ --blanco: #FFFFFF; /* tarjetas y tiles */ --crema-100: #FAF6EE; /* el fondo */ --crema-200: #F5F1E7; /* banda, chip, superficie hundida */ --crema-300: #EDE7D8; /* fondo de deshabilitado · trama */ --crema-400: #DDD5C2; /* trama (placeholder de foto) */ /* Piedra y tinta — los neutros salen todos del mismo marrón de la tinta */ --piedra-200: #DFDCD4; /* línea suave · equivale a tinta al 12% sobre crema. Decorativa */ --piedra-300: #CDCAC3; /* línea fuerte · tinta al 20%. Decorativa */ --piedra-500: #8A8272; /* ⚠ 3.37 peor par — NO es texto. Es el borde de control (≥3.0) */ --piedra-600: #6E6757; /* 4.98 peor par — el gris más claro que se lee */ --piedra-700: #4A463C; /* 8.34 peor par */ --tinta-800: #383227; /* hover del botón tinta · oklch(0.32 0.02 80) */ --tinta-900: #1B1A16; /* 15.44 peor par */ /* Oliva — la acción. oklch(0.52 0.14 145) es el de la maqueta */ --oliva-100: #D7F5D7; /* oklch(0.94 0.05 145) · fondo de aviso ok */ --oliva-200: #C2EBC2; /* oklch(0.90 0.07 145) · selección de texto */ --oliva-500: #399E43; /* oklch(0.62 0.16 145) · punto "en línea". Solo gráfico */ --oliva-600: #267D30; /* oklch(0.52 0.14 145) · fondo de botón. Con blanco 5.17 */ --oliva-700: #0F641D; /* oklch(0.44 0.13 145) · texto oliva (6.51) y hover del botón (blanco 7.34) */ /* Ámbar — lo pendiente, lo que hay que mirar */ --ambar-100: #FFE9D4; /* oklch(0.95 0.04 62) · fondo de aviso */ --ambar-200: #FFD4AF; /* oklch(0.90 0.07 62) · banda "sin conexión" */ --ambar-500: #E28E3A; /* oklch(0.72 0.14 62) · relleno con tinta encima (6.77). Con blanco 2.57: NO */ --ambar-800: #763C00; /* oklch(0.42 0.11 62) · texto ámbar (7.70) */ /* Rojo — error, faltante, diferencia de caja */ --rojo-100: #FFE0D8; /* oklch(0.94 0.05 30) · fondo de aviso de error */ --rojo-500: #F05653; /* oklch(0.66 0.19 25) · punto "sin conexión" y alarma. Solo gráfico */ --rojo-700: #A8442F; /* texto (5.27) y fondo con blanco (5.94) */ /* Azul — información y foco. oklch(0.40 0.10 250) de la maqueta (cuenta corriente) */ --azul-100: #CEEFFF; /* oklch(0.94 0.06 250) */ --azul-300: #7CB3EB; /* oklch(0.75 0.10 250) · foco sobre superficies oscuras */ --azul-700: #124A7B; /* oklch(0.40 0.10 250) · texto info (8.13) y anillo de foco */ /* --------------------------------------------------------------------- 2. SEMÁNTICOS — lo que usan los componentes --------------------------------------------------------------------- */ --fondo: var(--crema-100); --superficie: var(--blanco); /* tarjeta, tile, ticket */ --superficie-2: var(--crema-200); /* banda, chip, campo de solo lectura */ --superficie-honda: var(--tinta-900); /* la barra superior */ --superficie-apagada: var(--crema-300); /* fondo de lo deshabilitado */ --texto: var(--tinta-900); /* 15.44 */ --texto-2: var(--piedra-700); /* 8.34 */ --texto-3: var(--piedra-600); /* 4.98 — el límite. Más claro no hay texto */ --texto-oliva: var(--oliva-700); /* 6.51 — precios en el tile, montos a favor */ --texto-ok: var(--oliva-700); /* 6.51 */ --texto-alerta: var(--ambar-800); /* 7.70 */ --texto-error: var(--rojo-700); /* 5.27 */ --texto-info: var(--azul-700); /* 8.13 */ --enlace: var(--oliva-700); /* 6.51 */ --enlace-hover: var(--tinta-900); --texto-sobre-accion: var(--blanco); /* 5.17 sobre oliva-600 */ --texto-sobre-oscuro: var(--crema-100); /* 16.15 sobre tinta */ --texto-2-sobre-oscuro: #C6C4BD; /* 10.6 sobre tinta · reemplaza el rgba(crema,.7) de la maqueta */ --texto-sobre-senal: var(--tinta-900); /* 6.77 sobre ámbar-500 */ --texto-sobre-error: var(--blanco); /* 5.94 sobre rojo-700 */ --texto-sobre-ok-suave: var(--oliva-700); /* 6.27 */ --texto-sobre-alerta-suave: var(--ambar-800); /* 7.39 */ --texto-sobre-banda-offline: var(--ambar-800); /* 6.33 */ --texto-sobre-error-suave: var(--rojo-700); /* 4.79 */ --texto-sobre-info-suave: var(--azul-700); /* 7.60 */ --texto-sobre-apagado: var(--piedra-600); /* 4.55 — texto de botón deshabilitado */ --accion: var(--oliva-600); /* fondo del botón primario: Cobrar, Confirmar */ --accion-hover: var(--oliva-700); --accion-densa: var(--tinta-900); /* botón tinta: Tomar peso, Ingresar, Cerrar caja */ --accion-densa-hover: var(--tinta-800); --senal: var(--ambar-500); /* contador de pendientes, "IA", destacado. Texto encima: tinta */ --error: var(--rojo-700); /* fondo de botón destructivo y contador de faltantes */ --ok-suave: var(--oliva-100); --alerta-suave: var(--ambar-100); --error-suave: var(--rojo-100); --info-suave: var(--azul-100); --banda-offline: var(--ambar-200); --linea: var(--piedra-200); /* separador de lista, borde de tarjeta. Decorativa */ --linea-fuerte: var(--piedra-300); /* separador de bloque. Decorativa */ --linea-control: var(--piedra-500); /* borde de input y de botón contorno: 3.37, informa */ /* Indicador de conexión — los puntos son gráficos (≥3.0), el texto va siempre al lado */ --punto-en-linea: var(--oliva-500); /* 5.10 sobre tinta · 3.17 sobre crema */ --punto-sin-conexion: var(--rojo-500); /* 5.11 sobre tinta · 3.16 sobre crema */ --punto-sincronizando: var(--ambar-500); /* 6.77 sobre tinta */ /* Decorativos: no llevan texto encima, por eso no tienen mínimo */ --trama-a: var(--crema-400); --trama-b: var(--crema-300); --trama: repeating-linear-gradient(45deg, var(--trama-a) 0 5px, var(--trama-b) 5px 10px); /* --------------------------------------------------------------------- 3. TIPOGRAFÍA Public Sans hace todo, cifras incluidas (con tabular-nums: la fuente trae tnum, verificado en el woff2). IBM Plex Mono es la voz de la etiqueta: rótulos en mayúscula, códigos, número de ticket. --------------------------------------------------------------------- */ --f-texto: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace; /* Escala por rol. Piso 12px: la maqueta tenía rótulos de 9 y 10px que no se leen a un metro de la pantalla de la caja. */ --t-xs: 0.75rem; /* 12 · etiqueta mono en mayúscula. El mínimo absoluto */ --t-sm: 0.875rem; /* 14 · secundario, filas de tabla en el celular */ --t-base: 1rem; /* 16 · cuerpo e inputs (menos de 16 y el iPhone hace zoom) */ --t-md: 1.125rem; /* 18 · nombre de producto y precio en el tile */ --t-lg: 1.375rem; /* 22 · título de pantalla, botón Cobrar */ --t-xl: 1.75rem; /* 28 · cifra de tarjeta del dashboard */ --t-2xl: 2.5rem; /* 40 · peso tipeado, vuelto */ --t-3xl: 3.25rem; /* 52 · total a cobrar */ --peso-normal: 400; --peso-medio: 600; /* botones secundarios, nombres */ --peso-fuerte: 700; /* botones, precios, títulos */ --peso-negro: 800; /* cifras grandes y la palabra Registradora */ --leading-cuerpo: 1.5; --leading-titulo: 1.15; --leading-cifra: 1; --tracking-cifra: -0.03em; /* solo de --t-xl para arriba */ --tracking-titulo: -0.02em; --tracking-etiqueta: 0.14em; /* mono en mayúscula */ /* --------------------------------------------------------------------- 4. ESPACIADO — base 4 --------------------------------------------------------------------- */ --e-1: 0.25rem; /* 4 */ --e-2: 0.5rem; /* 8 */ --e-3: 0.75rem; /* 12 */ --e-4: 1rem; /* 16 · margen lateral en el celular */ --e-5: 1.25rem; /* 20 */ --e-6: 1.5rem; /* 24 */ --e-8: 2rem; /* 32 */ --e-10: 2.5rem; /* 40 */ --e-12: 3rem; /* 48 */ --e-16: 4rem; /* 64 */ /* --------------------------------------------------------------------- 5. ALTURAS — manos ocupadas o sucias, tocando una pantalla de mostrador --------------------------------------------------------------------- */ --alto-min: 44px; /* lo mínimo táctil. Solo en el dashboard denso del celular */ --alto-control: 48px; /* inputs, selects, botones comunes */ --alto-caja: 64px; /* todo lo que se toca durante una venta: Cobrar, teclas, medios de pago */ --alto-tile: 84px; /* tile de producto, mínimo */ /* --------------------------------------------------------------------- 6. BORDES, RADIOS Y SOMBRA --------------------------------------------------------------------- */ --borde: 1px solid var(--linea); --borde-control: 1.5px solid var(--linea-control); --borde-grosor: 1.5px; /* Radios. La maqueta usaba doce valores (2 a 18 px); quedan cinco. */ --radio-mini: 3px; /* marcas de leyenda y barras de gráfico */ --radio-control: 10px; /* inputs, botones, teclas */ --radio-bloque: 12px; /* tile de producto, aviso, botón de caja */ --radio-tarjeta: 14px; /* tarjeta, panel del dashboard */ --radio-modal: 18px; /* modal y hoja inferior */ --radio-pastilla: 999px; /* chips, contadores, pestañas, indicador de conexión */ /* Sombra: solo lo que flota. Las tarjetas se separan con borde, no con sombra. */ --sombra-tarjeta: none; --sombra-flotante: 0 24px 60px rgba(27, 26, 22, 0.30); /* modal, hoja, toast */ /* --------------------------------------------------------------------- 7. MOVIMIENTO — corto. Una caja no hace esperar a nadie. --------------------------------------------------------------------- */ --t-rapida: 150ms; /* hover, cambio de color */ --t-normal: 200ms; /* aparición de modal, toast */ --easing: cubic-bezier(0.2, 0.8, 0.2, 1); --pulso-vivo: 1.6s; /* SOLO el punto "en vivo" del dashboard */ /* --------------------------------------------------------------------- SUPERFICIES DEL NAVEGADOR --------------------------------------------------------------------- */ --seleccion-fondo: var(--oliva-200); /* con tinta: 13.23 */ --seleccion-texto: var(--tinta-900); --cursor: var(--oliva-600); /* dónde escribo = acción */ --foco-pagina: var(--azul-700); /* dónde estoy: 8.13 peor par. Distinto de la acción */ --foco-sobre-oscuro: var(--azul-300); /* 7.88 sobre tinta */ --foco-color: var(--foco-pagina); --foco-grosor: 3px; /* 3 y no 2: la pantalla de la caja se mira de lejos */ --foco-offset: 2px; --subrayado-offset: 0.18em; } /* La barra superior es tinta: ahí el azul da 1.90 y se pierde. */ .superficie-honda, [data-superficie="honda"] { --foco-color: var(--foco-sobre-oscuro); --cursor: var(--oliva-500); } /* --------------------------------------------------------------------------- TEMA OSCURO — solo el dashboard del dueño, como en la maqueta. La caja es siempre clara. (Pregunta abierta: ¿entra al MVP?) Origen: oklch(0.17 / 0.19 / 0.213 0.012-0.014 95) de la maqueta. --------------------------------------------------------------------------- */ [data-tema="oscuro"] { --fondo: #110F09; /* oklch(0.17 0.012 95) */ --superficie: #1B1912; /* oklch(0.213 0.014 95) */ --superficie-2: #15140E; /* oklch(0.19 0.012 95) */ --superficie-apagada: #2D2B24; --texto: #EDEBE5; /* oklch(0.94 0.008 95) */ --texto-2: #C6C4BD; /* oklch(0.82 0.01 95) */ --texto-3: #959288; /* oklch(0.66 0.015 95) */ --texto-oliva: #6ED274; /* oklch(0.78 0.16 145) */ --texto-ok: #6ED274; --texto-alerta: #E28E3A; --texto-error: #F97770; /* oklch(0.72 0.16 25) */ --texto-info: #7CB3EB; --enlace: #6ED274; --enlace-hover: #EDEBE5; --texto-sobre-apagado: #959288; --linea: #2D2B24; /* oklch(0.29 0.014 95). Decorativa */ --linea-fuerte: #3A372F; --linea-control: #747268; /* 3.64 peor par */ --seleccion-fondo: #0F641D; --seleccion-texto: #EDEBE5; --foco-pagina: var(--azul-300); /* 8.35 peor par */ /* Los compuestos se redeclaran: una var() se resuelve donde se declara, así que heredados de :root seguirían apuntando a los valores claros. */ --foco-color: var(--foco-pagina); --borde: 1px solid var(--linea); --borde-control: 1.5px solid var(--linea-control); --cursor: #6ED274; } /* Aplicación de las superficies del navegador */ ::selection { background: var(--seleccion-fondo); color: var(--seleccion-texto); } :where(input, textarea, select, [contenteditable]) { caret-color: var(--cursor); } :focus-visible { outline: var(--foco-grosor) solid var(--foco-color); outline-offset: var(--foco-offset); } a { color: var(--enlace); text-underline-offset: var(--subrayado-offset); } a:hover { color: var(--enlace-hover); } /* Cifras. En un POS es lo más importante del archivo: precio, kilos, vuelto, arqueo. Public Sans trae los números proporcionales por defecto; sin esto, $1.111 es más angosto que $8.888 y las columnas bailan. */ .cifra, td, th, output, input[inputmode="decimal"], input[inputmode="numeric"] { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { :root { --t-rapida: 0ms; --t-normal: 0ms; --pulso-vivo: 0s; } } /* ========================================================================== LAS REGLAS QUE LOS NÚMEROS IMPONEN (no son gusto: son consecuencia de los contrastes medidos) 1. #8A8272 era el gris de las etiquetas de la maqueta (166 usos). Da 3.37 sobre --superficie-2: no se lee. Pasó a ser el BORDE de los controles, donde 3.0 alcanza. El texto más claro es --texto-3 (#6E6757, 4.98). 2. Ámbar-500 nunca lleva texto blanco (2.57) ni va como texto sobre crema (2.39). Relleno con tinta encima (6.77), o texto en --texto-alerta. 3. El rojo de alarma (#F05653) con blanco da 3.41: los contadores rojos de la maqueta no pasaban. Contador y botón destructivo → --error (#A8442F) con blanco, 5.94. El #F05653 queda como punto, nunca como fondo de texto. 4. Los rojos de texto de la maqueta (oklch 0.62 0.17 25 y 0.55 0.19 25) se unifican en --texto-error. El primero daba 3.49. 5. Oliva-600 con blanco da 5.17: alcanza para el botón, pero el precio en oliva va en --texto-oliva (oliva-700, 6.51), no en oliva-600 (4.59). 6. El foco es azul y no oliva: un anillo oliva alrededor de Cobrar, que ya es oliva, desaparece. Sobre la barra tinta el azul da 1.90 → azul-300. 7. Ningún texto por debajo de --t-xs (12px). ========================================================================== */