/* ╔══════════════════════════════════════════════════════════════════════════╗ ║ ascua-tokens.css — EL sistema visual de Ascua. Fuente ÚNICA. ║ ║ (INC-5R16) ║ ║ ║ ║ POR QUÉ EXISTE · el Plano tenía su crema y el Pedido otra. Parecían dos ║ ║ productos. A partir de aquí hay UN sistema: el Plano y el Pedido beben ║ ║ de estos tokens, y si mañana cambia el fondo, cambia en los dos a la vez ║ ║ porque es literalmente el mismo valor. ║ ║ ║ ║ DE DÓNDE SALEN LOS VALORES · del Plano V2 APROBADO (css/plano-v2.css). ║ ║ No se ha inventado ninguna paleta: se le ha puesto nombre a la que Pedro ║ ║ ya dio por buena. ║ ║ --p2-canvas #F7F4EF → --ascua-bg ║ ║ --p2-chip #FFFFFF → --ascua-card ║ ║ --p2-acento #F56820 → --ascua-orange (brasa Ember) ║ ║ --p2-libre #16A34A → --ascua-kitchen-green ║ ║ ║ ║ CLARO y OSCURO cambian VALORES, nunca estructura. ║ ╚══════════════════════════════════════════════════════════════════════════╝ */ :root{ /* ── Superficies · la escala de profundidad ───────────────────────────── */ --ascua-bg: #F7F4EF; /* = --p2-canvas del Plano aprobado */ --ascua-surface: #FBF9F5; /* paneles */ --ascua-surface-raised: #FFFFFF; /* lo que flota sobre el panel */ --ascua-card: #FFFFFF; /* = --p2-chip */ --ascua-border: rgba(90, 85, 76, 0.16); /* = --p2-chip-borde */ --ascua-border-strong: rgba(90, 85, 76, 0.30); /* ── Texto ────────────────────────────────────────────────────────────── */ --ascua-text: #23201B; /* = --p2-chip-texto */ --ascua-text-secondary: #6E6862; /* = --p2-chip-sec */ /* Tercer escalón de texto. La jerarquía real de una pantalla densa no son dos niveles, son TRES: lo que se lee (--ascua-text), lo que acompaña (--ascua-text-muted) y lo que solo está por si acaso —contadores, metadatos— (--ascua-text-secondary). En claro los dos últimos casi coinciden; en oscuro NO, y por eso esto existe: allí --ascua-text-secondary se quedaba corto para una descripción de 12px. */ --ascua-text-muted: #57514B; /* ── Marca · el naranja NO cambia entre temas ─────────────────────────── */ --ascua-orange: #F56820; /* = --p2-acento · brasa Ember */ --ascua-orange-hover: #FF7A35; --ascua-orange-pressed: #D4530F; --ascua-orange-soft: rgba(245, 104, 32, 0.10); /* = --p2-sel-bg */ --ascua-on-orange: #FFFFFF; /* = --p2-acento-texto */ /* ── Aviso · el ÚNICO ámbar del sistema ─────────────────────────────── Semántica real: «esto está a medias o pide una mirada». NO es el naranja de marca y NO compite con él — el naranja marca y selecciona, el ámbar avisa. Aprobado en el gate visual de CONFIG-V2-01 (escaparate de estados). Vive aquí, no en la pantalla que lo estrenó, porque cualquier módulo puede necesitarlo. */ --ascua-warn: #B26A00; --ascua-on-warn: #FFFFFF; /* ── Peligro · el ÚNICO rojo del sistema ────────────────────────────── Solo acciones DESTRUCTIVAS de verdad: cierre Z, borrar una impresora, anular. No es un estado de error de formulario ni un adorno. Existe porque la alternativa era seguir repartiendo #dc2626, #ef4444, #f87171 y #991b1b por los estilos en línea, que es lo que había. */ --ascua-danger: #C0392B; --ascua-on-danger: #FFFFFF; /* ── Cocina · el ÚNICO verde del sistema ──────────────────────────────── */ --ascua-kitchen-green: #16A34A; /* = --p2-libre */ --ascua-kitchen-hover: #15803D; --ascua-kitchen-pressed:#166534; /* ── Radios ───────────────────────────────────────────────────────────── */ --ascua-radius-sm: 10px; --ascua-radius-md: 14px; --ascua-radius-lg: 20px; /* ── Sombras · las del Plano ──────────────────────────────────────────── */ --ascua-shadow-sm: 0 2px 6px rgba(35, 32, 27, 0.10); /* = --p2-sombra-chip */ --ascua-shadow-md: 0 4px 14px rgba(35, 32, 27, 0.14); /* = --p2-sombra-chip-2 */ /* ── Espaciado ────────────────────────────────────────────────────────── */ --ascua-space-1: 4px; --ascua-space-2: 8px; --ascua-space-3: 12px; --ascua-space-4: 16px; --ascua-space-5: 24px; /* ── Medidas de la pantalla de pedido ─────────────────────────────────── */ /* La altura del footer y el ancho del panel viven AQUÍ porque los usan dos reglas distintas cada uno. Tenerlos sueltos fue justo lo que provocó que el footer se metiera por debajo del panel: `right:282px` contra un panel de 320px. Un solo valor, y el solape deja de ser posible. */ --ascua-footer-h: 84px; --ascua-panel-w: 368px; /* el pedido se lee de un vistazo, no es una columna administrativa */ /* ── Rol tipográfico del precio · INC-5R18 ──────────────────────────── El precio se veía apagado porque `.prod-pre-badge` heredaba `--bone` (#EFE9E0, el hueso del tema OSCURO) sobre una tarjeta blanca: contraste de 1,1:1, prácticamente invisible. Ahora tiene ROL propio: peso secundario FUERTE, nunca apagado y NUNCA con opacidad baja (eso lo leería el ojo como deshabilitado). */ --ascua-price: #3A342C; /* contraste alto sobre tarjeta clara */ --ascua-price-weight: 700; /* ── Cabecera · las tres acciones miden lo MISMO ─────────────────────── Ventas, Último y Subtotal comparten regla y medidas: un solo sitio. */ --ascua-header-action-w: 116px; --ascua-header-action-h: 46px; /* ── Icono de información del producto · INC-5R20 ───────────────────── Acción AUXILIAR, no CTA: tiene que verse y leerse, sin competir con el naranja. Rol propio para que no dependa de un gris casual de la tarjeta. Antes lo pintaba un negro al 45 % sobre la foto —y en la otra rama, un circulo BLANCO sobre tarjeta BLANCA: 1,0:1, invisible— y al pulsarlo bajaba la opacidad a 0,7, que se lee como deshabilitado. (Sin llaves en este comentario a proposito: un parser ingenuo que busque el primer cierre truncaria el bloque de tokens aqui mismo. Me paso.) */ --ascua-info-icon-bg: #3A342C; /* circulo OSCURO sobre tarjeta clara */ --ascua-info-icon-fg: #FAF6F0; --ascua-info-icon-border: rgba(255, 253, 249, 0.55); /* Objetivo táctil mínimo. */ --ascua-tap: 44px; } /* ════ OSCURO · CARBÓN CÁLIDO ══════════════════════════════════════════════ INC-5R19B · el oscuro seguía leyéndose NEGRO en pantalla, y no era cosa de estos tokens: el lienzo central lo pintaba OTRA regla, y con `!important`. css/tpv.css:1731 body.dark .ped-main { background:#0D0C0A !important } css/tpv.css:1931 body.dark .prods-grid,.col-prods { background:var(--carbon) } css/tpv.css:1730 body.dark #pg-ped { background:#0D0C0A !important } O sea: mi `#pg-ped{background:var(--ascua-bg)}` no perdía la cascada — es que los HIJOS se pintaban encima de él en negro. Cambiar el token nunca podía arreglarlo, y por eso tres intentos no movieron nada en pantalla. Se corrige en DOS capas: 1) aquí, redefiniendo también las variables LEGACY del tema oscuro, para que todo lo que use `var(--carbon)` caiga solo en la escala nueva; 2) en css/pedido-v2.css, neutralizando las reglas con hex a pelo. Escala nueva (punto de partida de Pedro, ajustada): claramente más clara, cálida, y con los escalones separados para que la profundidad se VEA. */ body.dark{ --ascua-bg: #302C29; /* fondo de la app y lienzo del catálogo */ --ascua-surface: #38332F; /* paneles */ --ascua-card: #403A35; /* tarjetas de producto, líneas */ --ascua-surface-raised: #49423C; /* lo que flota o responde al dedo */ --ascua-border: rgba(240, 232, 220, 0.13); --ascua-border-strong: rgba(240, 232, 220, 0.24); --ascua-text: #F3EDE4; /* hueso cálido, nunca blanco puro */ --ascua-text-muted: #D6CCBC; /* descripciones: legible sin ser blanco */ --ascua-text-secondary: #BCB2A4; /* beige cálido · contadores y metadatos */ --ascua-warn: #E0A040; /* el ámbar, aclarado para fondo oscuro */ --ascua-on-warn: #2B2723; --ascua-danger: #E8705F; /* el rojo, aclarado para fondo oscuro */ --ascua-on-danger: #2B2723; --ascua-price: #F0E9DE; --ascua-orange-soft: rgba(245, 104, 32, 0.22); /* El icono de info, invertido: circulo claro sobre tarjeta oscura. */ --ascua-info-icon-bg: #EFE8DD; /* y CLARO sobre tarjeta oscura */ --ascua-info-icon-fg: #2B2723; --ascua-info-icon-border: rgba(43, 39, 35, 0.45); --ascua-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30); --ascua-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.40); /* ── VARIABLES LEGACY DEL TEMA OSCURO ────────────────────────────────── `--carbon` (#0D0C0A) y compañía son el near-black de Ember, y los usan decenas de reglas antiguas. Redirigirlas a la escala nueva arregla de una vez todo lo que las consume, sin perseguir regla por regla. */ --carbon: #302C29; --ash: #38332F; --ash-elevado: #403A35; --borde-fuerte: rgba(240, 232, 220, 0.26); --surface: #38332F; --surface-elev: #49423C; --barra-bg: #38332F; } /* ════ EL PLANO BEBE DE AQUÍ ═══════════════════════════════════════════════ Los tokens del Plano se REDIRIGEN al sistema en vez de duplicar valores. El Plano no cambia de aspecto —los valores son los suyos— pero deja de ser una isla: ahora comparte fondo con el Pedido por construcción, no por casualidad. */ :root{ --p2-canvas: var(--ascua-bg); --p2-chip: var(--ascua-card); --p2-chip-borde: var(--ascua-border); --p2-chip-texto: var(--ascua-text); --p2-chip-sec: var(--ascua-text-secondary); --p2-acento: var(--ascua-orange); --p2-sel-bg: var(--ascua-orange-soft); --p2-sombra-chip: var(--ascua-shadow-sm); --p2-sombra-chip-2: var(--ascua-shadow-md); }