/* ===== capa: base ===== */ /* ========================================================================= 1 · TOKENS (mismos nombres que el design system Athenea → tokens.json) Tema por . Layout por data-layout="foco|riel". ========================================================================= */ :root, [data-tema="noche"] { color-scheme: dark; --canvas: #050607; --surface-1: #0e1012; --surface-2: #16191c; --glass: rgba(18, 21, 24, 0.56); --glass-strong: rgba(10, 12, 14, 0.88); --glass-edge: rgba(255, 255, 255, 0.22); --line: rgba(255, 255, 255, 0.14); --line-strong: rgba(255, 255, 255, 0.46); --grid-dot: rgba(255, 255, 255, 0.075); --scrim: rgba(0, 0, 0, 0.55); --ink: #f5f6f7; --ink-2: #b7bcc2; --ink-3: #868c93; --on-ink: #050607; --focus: #f5f6f7; --signal-pending: #f5f6f7; --signal-picked: #38d989; --signal-notfound: #ff5d5d; --signal-unlocated: #f7cb46; --signal-insufficient: #ff9a3c; --signal-discounted: #3fe0ea; --signal-incomplete: #f7cb46; --on-signal: #050607; --aura-strength: 0.42; } [data-tema="dia"] { color-scheme: light; --canvas: #f4f4f1; --surface-1: #ffffff; --surface-2: #e9e9e5; --glass: rgba(255, 255, 255, 0.60); --glass-strong: rgba(250, 250, 248, 0.88); --glass-edge: rgba(255, 255, 255, 0.95); --line: rgba(10, 11, 12, 0.14); --line-strong: rgba(10, 11, 12, 0.55); --grid-dot: rgba(10, 11, 12, 0.11); --scrim: rgba(20, 22, 24, 0.30); --ink: #0a0b0c; --ink-2: #3d4247; --ink-3: #5d6369; --on-ink: #ffffff; --focus: #0a0b0c; --signal-pending: #0a0b0c; --signal-picked: #08703a; --signal-notfound: #c4262e; --signal-unlocated: #7d5a00; --signal-insufficient: #a84a00; --signal-discounted: #00707a; --signal-incomplete: #7d5a00; --on-signal: #ffffff; --aura-strength: 0.30; } :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --tap-min: 56px; --tap-primary: 76px; --blur-glass: 24px; --blur-dock: 32px; --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* Movimiento (no va en tokens.json: el formato no admite familia motion) */ --dur-press: 90ms; --dur-latch: 260ms; --dur-state: 360ms; --dur-sheet: 420ms; --dur-advance: 650ms; --ease-precise: cubic-bezier(.2, .8, .2, 1); --ease-physical: cubic-bezier(.3, 1.35, .5, 1); --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } /* ========================================================================= 2 · COMPONENTES (este bloque = components/bundle.css del design system) ========================================================================= */ * { box-sizing: border-box; } html { background: var(--canvas); -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; min-height: var(--app-h, 100dvh); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.35; -webkit-font-smoothing: antialiased; overflow-x: clip; /* Capa 0: retícula de 24 px (identidad Athenea) */ background: radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1.5px) 0 0 / 24px 24px, var(--canvas); } button, input, textarea { font: inherit; color: inherit; } button { -webkit-tap-highlight-color: transparent; cursor: pointer; touch-action: manipulation; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* Señal: el ÚNICO lugar donde entra color. data-signal elige el tono. */ [data-signal] { --sig: var(--signal-pending); } [data-signal="picked"] { --sig: var(--signal-picked); } [data-signal="notfound"] { --sig: var(--signal-notfound); } [data-signal="unlocated"] { --sig: var(--signal-unlocated); } [data-signal="insufficient"] { --sig: var(--signal-insufficient); } [data-signal="discounted"] { --sig: var(--signal-discounted); } [data-signal="incomplete"] { --sig: var(--signal-incomplete); } .signal { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--radius-sm); font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sig); border: 1.5px solid var(--sig); background: transparent; white-space: nowrap; } .signal .ico { width: 15px; height: 15px; } .signal--solid { background: var(--sig); color: var(--on-signal); } [data-signal="pending"] .signal, .signal[data-signal="pending"] { color: var(--ink-2); border-color: var(--line-strong); } /* ---- App shell ---- */ .app { min-height: var(--app-h, 100dvh); display: flex; flex-direction: column; padding: 0 var(--safe-r) 0 var(--safe-l); } /* ---- Regla de ruta (barra superior) ---- La muesca se esquiva con RELLENO, no con `top`: en el layout de foco el documento no se desplaza (scrollHeight = innerHeight), así que el `top` de un sticky nunca entra en juego y la barra se quedaba debajo de la muesca. El relleno vive en la capa `barras`, que es la que fija de verdad el de .route; el borde inferior ya se resolvía así con --safe-b en .dock. */ .route { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); background: var(--glass-strong); backdrop-filter: blur(var(--blur-dock)) saturate(1.5); -webkit-backdrop-filter: blur(var(--blur-dock)) saturate(1.5); border-bottom: 1px solid var(--line); } .route__ruler { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: none; display: flex; align-items: flex-end; gap: 10px; } .route__sec { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .route__sec-label { font: 700 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--ink-3); text-align: left; } .route__ticks { position: relative; display: flex; gap: 4px; align-items: flex-end; height: 26px; } .route__tick { position: relative; width: 8px; height: 14px; border-radius: 2px; border: 1.5px solid var(--line-strong); background: transparent; transition: height var(--dur-state) var(--ease-physical), background-color var(--dur-state) var(--ease-precise), border-color var(--dur-state); } .route__tick[data-signal]:not([data-signal="pending"]) { background: var(--sig); border-color: var(--sig); } .route__tick[data-signal="unlocated"], .route__tick[data-signal="insufficient"], .route__tick[data-signal="discounted"], .route__tick[data-signal="incomplete"] { background: transparent; border-width: 2.5px; } .route__tick.is-current { height: 26px; border-color: var(--ink); border-width: 2.5px; box-shadow: 0 0 0 3px var(--canvas), 0 0 14px 2px color-mix(in srgb, var(--sig) 55%, transparent); } .route__tick.is-pop { animation: tick-pop var(--dur-state) var(--ease-physical); } @keyframes tick-pop { 40% { transform: scaleY(1.5); } } .route__count { text-align: right; font-family: var(--font-mono); line-height: 1; } .route__count b { display: block; font-size: 22px; letter-spacing: -.02em; } .route__count span { font-size: 11px; color: var(--ink-3); letter-spacing: .08em; } .route__menu { width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--line); background: transparent; display: grid; place-items: center; } .route__menu .ico { width: 22px; height: 22px; } .route__flow { position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); } .route__flow::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--done, 0%); background: var(--ink); transition: width var(--dur-state) var(--ease-precise); } .route__flow::after { /* pulso de energía: recorre lo ya caminado hasta la parada actual */ content: ""; position: absolute; top: -1px; width: 18px; height: 4px; border-radius: 2px; left: 0; background: linear-gradient(90deg, transparent, var(--ink), transparent); animation: flow 2.6s linear infinite; max-width: var(--done, 0%); } @keyframes flow { from { transform: translateX(-18px); } to { transform: translateX(var(--flow-x, 0px)); } } /* ---- Escenario ---- */ .stage { position: relative; flex: 1; padding: var(--space-4) var(--space-4) calc(var(--dock-h, 170px) + var(--space-4)); overflow-x: clip; } /* FOCO: la parada cabe entera entre la regla y el dock; la foto toma lo que sobra */ [data-layout="foco"] .stage { flex: none; height: calc(var(--app-h, 100dvh) - var(--route-h, 66px) - var(--dock-h, 170px)); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; overflow-y: auto; } [data-layout="foco"] .stop { flex: 1; display: flex; min-height: 0; } [data-layout="foco"] .stop__card { flex: 1; display: flex; flex-direction: column; min-height: 0; } [data-layout="foco"] .stop__card > * { flex: none; } [data-layout="foco"] .stop__card > .stop__photo { flex: 1 1 0; min-height: 150px; aspect-ratio: auto; } /* ---- Parada (la tarea en foco) ---- */ .stop { position: relative; isolation: isolate; scroll-margin-top: calc(var(--route-h, 66px) + 12px); } .stop__aura { /* Capa 1: aura de estado detrás del vidrio */ position: absolute; inset: 40px -10px auto; height: 70%; z-index: -1; pointer-events: none; filter: blur(42px); opacity: var(--aura-strength); background: radial-gradient(60% 55% at 22% 30%, var(--sig), transparent 70%), radial-gradient(55% 50% at 82% 70%, var(--sig), transparent 72%); transition: opacity var(--dur-state), background var(--dur-state); } [data-signal="pending"] > .stop__aura { opacity: calc(var(--aura-strength) * .35); } .stop__card { /* Capa 2: vidrio */ position: relative; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--glass); backdrop-filter: blur(var(--blur-glass)) saturate(1.6); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.6); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px color-mix(in srgb, var(--sig) 18%, transparent), 0 30px 60px -30px rgba(0,0,0,.6); } .stop__card::before { /* borde de luz: más brillante arriba-izquierda, como un vidrio real */ content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(150deg, var(--glass-edge), transparent 38%, transparent 70%, color-mix(in srgb, var(--sig) 50%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .stop__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 28px; flex-wrap: wrap; } .stop__where { min-width: 0; } .stop__section { margin: 0 0 2px; font: 700 13px/1.2 var(--font-mono); letter-spacing: .12em; white-space: nowrap; color: var(--ink-3); text-transform: uppercase; } .stop__bin { margin: 0; font: 800 var(--bin-size, 64px)/0.95 var(--font-mono); letter-spacing: -.04em; white-space: nowrap; overflow: hidden; height: 1em; position: relative; } .stop__bin-text { display: block; } .stop__bin.is-rolling .stop__bin-text { animation: roll-in var(--dur-state) var(--ease-physical); } @keyframes roll-in { from { transform: translateY(100%); opacity: 0; } } [data-signal="unlocated"] .stop__bin { color: var(--sig); } .stop__bin { margin-top: 6px; } .stop__photo { /* Capa 3: la foto es sólida y nítida, nunca detrás de vidrio */ position: relative; margin: var(--space-3) calc(var(--space-4) * -1 + 6px) 0; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; box-shadow: 0 0 0 1px var(--line); } .gallery { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .gallery::-webkit-scrollbar { display: none; } .gallery img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: center; display: block; } .photo-tabs { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 6px; } .photo-tab { flex: 1; height: 34px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.28); background: rgba(8,9,10,.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; font: 700 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } .photo-tab[aria-selected="true"] { background: #f5f6f7; color: #050607; border-color: #f5f6f7; } .photo-zoom { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.28); background: rgba(8,9,10,.66); color: #fff; display: grid; place-items: center; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .photo-zoom .ico { width: 20px; height: 20px; } .stop__photo--empty { display: grid; place-items: center; color: var(--ink-3); font: 700 12px var(--font-mono); letter-spacing: .1em; } .stop__ident { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); } .stop__title { flex: 1; margin: 0; font: 700 22px/1.12 var(--font-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -.015em; overflow-wrap: anywhere; } .qty { flex: none; display: flex; align-items: baseline; gap: 2px; padding: 4px 10px 6px; border-radius: var(--radius-md); font-family: var(--font-mono); border: 1.5px solid var(--line-strong); } .qty__x { font-size: 24px; font-weight: 700; color: var(--ink-3); } .qty__n { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -.04em; } .qty--many { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } /* ≥2 unidades: bloque invertido, imposible de pasar por alto */ .qty--many .qty__x { color: inherit; opacity: .6; } .stop.is-arriving .qty--many { animation: qty-knock 520ms var(--ease-physical) 160ms; } @keyframes qty-knock { 30% { transform: scale(1.12); } 60% { transform: scale(.97); } } .stop__notice { margin: var(--space-3) 0 0; padding: 10px 12px; border-radius: var(--radius-md); border: 1.5px solid var(--sig); color: var(--ink); font-size: 15px; line-height: 1.35; } .stop__notice b { color: var(--sig); font-family: var(--font-mono); letter-spacing: .02em; } .stop__notice .alts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .alt { font: 700 14px/1 var(--font-mono); padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); } .alt small { color: var(--ink-3); font-weight: 600; margin-left: 4px; } .split { margin-top: var(--space-3); padding: 10px 12px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-2) 70%, transparent); border: 1px solid var(--line); display: flex; align-items: center; gap: var(--space-3); } .split__copy { flex: 1; min-width: 0; font-size: 14px; color: var(--ink-2); } .split__copy b { display: block; color: var(--ink); font-size: 15px; } .split__copy span { font-family: var(--font-mono); font-size: 13px; } .stepper { display: flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; flex: none; } .stepper button { width: 52px; height: 52px; border: 0; background: transparent; font: 700 26px/1 var(--font-mono); } .stepper button:active { background: var(--surface-2); } .stepper button:disabled { opacity: .3; } .stepper output { min-width: 40px; text-align: center; font: 800 26px/1 var(--font-mono); } /* Ciclo 4: la tarjeta ya no lleva stepper (el sistema decide cuanto se coge en cada parada). En su hueco va el numero a recoger, con el mismo peso visual. */ .split__count { flex: none; min-width: 52px; text-align: center; font: 800 26px/1 var(--font-mono); color: var(--ink); } .stop__meta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; margin-top: var(--space-3); border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--line); } .cell { background: color-mix(in srgb, var(--surface-1) 88%, transparent); padding: 7px 10px; min-width: 0; } .cell__k { display: block; font-size: 11px; color: var(--ink-3); } .cell__v { display: block; font: 600 13px/1.3 var(--font-mono); color: var(--ink-2); overflow-wrap: anywhere; } .stop__note { margin: var(--space-2) 0 0; font: 500 14px/1.35 var(--font-mono); color: var(--ink-2); } .stop__note::before { content: "NOTA · "; color: var(--sig); font-weight: 700; } /* Estados de la parada: animaciones de confirmación */ .stop.is-confirmed .stop__card { animation: settle var(--dur-state) var(--ease-physical); } @keyframes settle { 35% { transform: scale(.985); } } .stop.is-confirmed .stop__card::after { /* sello: anillo que se expande desde el centro */ content: ""; position: absolute; left: 50%; top: 45%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; border: 3px solid var(--sig); animation: stamp 620ms var(--ease-precise) forwards; pointer-events: none; } @keyframes stamp { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.4); opacity: 0; } } .stop.is-rejected .stop__card { animation: reject 380ms var(--ease-precise); } @keyframes reject { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } } .stop.enter-next { animation: enter-next var(--dur-state) var(--ease-precise); } .stop.enter-prev { animation: enter-prev var(--dur-state) var(--ease-precise); } @keyframes enter-next { from { transform: translateX(14%); opacity: 0; } } @keyframes enter-prev { from { transform: translateX(-14%); opacity: 0; } } .stop.is-closed .stop__photo { filter: grayscale(1) contrast(.9); opacity: .55; } /* ---- Dock de acción (Capa 4, zona del pulgar) ---- */ .dock { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 10px calc(var(--space-4) + var(--safe-r)) calc(var(--safe-b) + 12px) calc(var(--space-4) + var(--safe-l)); background: var(--glass-strong); backdrop-filter: blur(var(--blur-dock)) saturate(1.5); -webkit-backdrop-filter: blur(var(--blur-dock)) saturate(1.5); border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--glass-edge), 0 -20px 40px -20px rgba(0,0,0,.5); display: grid; gap: 10px; } .dock__row { display: grid; grid-template-columns: var(--tap-min) 1fr 1fr var(--tap-min); gap: 8px; } .action { position: relative; overflow: hidden; height: var(--tap-min); border-radius: var(--radius-md); border: 1.5px solid var(--line-strong); background: color-mix(in srgb, var(--surface-2) 70%, transparent); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -.005em; box-shadow: inset 0 1px 0 var(--glass-edge), 0 2px 0 0 var(--line); transition: transform var(--dur-press) var(--ease-precise), box-shadow var(--dur-press), background-color var(--dur-press); } .action .ico { width: 20px; height: 20px; } .action:active { transform: translateY(2px) scale(.98); box-shadow: inset 0 1px 0 transparent, 0 0 0 0 var(--line); } .action:disabled { opacity: .35; pointer-events: none; } .action--icon { padding: 0; } .action--icon .ico { width: 24px; height: 24px; } .action--primary { /* la acción física: bloque sólido, alto, con recorrido de tecla */ height: var(--tap-primary); border: 0; background: var(--ink); color: var(--on-ink); font-size: 21px; font-weight: 800; letter-spacing: -.01em; box-shadow: 0 5px 0 0 color-mix(in srgb, var(--ink) 38%, var(--canvas)), 0 16px 30px -12px rgba(0,0,0,.6); } .action--primary:active { transform: translateY(5px); box-shadow: 0 0 0 0 transparent, 0 6px 14px -8px rgba(0,0,0,.6); } .action__fill { position: absolute; inset: 0; background: var(--signal-picked); transform: scaleX(0); transform-origin: left; } .action__label, .action__qty, .action > .ico { position: relative; } .action__qty { font-family: var(--font-mono); font-weight: 800; padding: 3px 8px; border-radius: var(--radius-sm); border: 2px solid currentColor; font-size: 18px; } .action--primary.is-latching .action__fill { animation: latch var(--dur-latch) var(--ease-precise) forwards; } .action--primary.is-latching { color: var(--on-signal); } @keyframes latch { to { transform: scaleX(1); } } .check path { stroke-dasharray: 24; stroke-dashoffset: 24; } .is-latching .check path { animation: draw 240ms var(--ease-precise) 120ms forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } /* ---- Hoja (dialog) · Capa 5 ---- */ .sheet { position: fixed; inset: auto 0 0 0; z-index: 50; padding: 0; border: 0; margin: 0; width: 100%; max-width: 100%; max-height: 92dvh; background: transparent; color: var(--ink); overflow: visible; } .sheet[open] { animation: sheet-up var(--dur-sheet) var(--ease-physical); } @keyframes sheet-up { from { transform: translateY(100%); } } @keyframes fade { from { opacity: 0; } } .sheet__body { padding: 10px var(--space-4) calc(var(--safe-b) + 16px); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--glass-strong); backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6); border-top: 1px solid var(--glass-edge); box-shadow: 0 -30px 60px -20px rgba(0,0,0,.6); max-height: 92dvh; overflow-y: auto; } .sheet__grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto 12px; } .sheet__eyebrow { margin: 0; font: 700 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; } .sheet__title { margin: 6px 0 4px; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; } .sheet__desc { margin: 0 0 var(--space-4); color: var(--ink-2); font-size: 15px; } .sheet__actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: var(--space-4); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); } .chip { height: 44px; padding: 0 14px; border-radius: var(--radius-md); border: 1.5px solid var(--line-strong); background: transparent; font-weight: 600; font-size: 15px; } .chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .field { width: 100%; border-radius: var(--radius-md); border: 1.5px solid var(--line-strong); background: var(--surface-1); padding: 14px; font-size: 17px; } .field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 25%, transparent); } textarea.field { min-height: 88px; resize: none; } .bin-input { font: 800 34px/1 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; padding: 16px; height: 72px; } .bin-input::placeholder { color: var(--ink-3); font-weight: 600; } .suggest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; min-height: 60px; } .suggest__item { height: 56px; border-radius: var(--radius-md); border: 1.5px solid var(--line); background: color-mix(in srgb, var(--surface-2) 70%, transparent); font: 700 16px/1 var(--font-mono); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .suggest__item small { font: 600 10px/1 var(--font-mono); color: var(--ink-3); letter-spacing: .06em; } .suggest__item mark { background: none; color: var(--ink); text-decoration: underline 2px; text-underline-offset: 3px; } .suggest__item[aria-selected="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .suggest__item[aria-selected="true"] small, .suggest__item[aria-selected="true"] mark { color: inherit; } .suggest__empty { grid-column: 1 / -1; font: 600 13px var(--font-mono); color: var(--ink-3); padding: 8px 2px; } .move-row { display: flex; align-items: center; gap: 12px; margin-top: var(--space-4); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); } .move-row p { flex: 1; margin: 0; font-size: 15px; color: var(--ink-2); } .move-row b { display: block; color: var(--ink); } .route-list { list-style: none; margin: 0; padding: 0; } .route-list__sec { font: 700 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink-3); padding: 16px 0 8px; border-bottom: 1px solid var(--line); } .route-row { width: 100%; display: grid; grid-template-columns: 6px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; min-height: 60px; } .route-row__bar { width: 6px; height: 36px; border-radius: 2px; background: var(--sig); } .route-row[data-signal="pending"] .route-row__bar { background: transparent; border: 1.5px solid var(--line-strong); } .route-row__bin { font: 800 20px/1.1 var(--font-mono); } .route-row__title { display: block; font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .route-row__qty { font: 800 20px var(--font-mono); } .route-row.is-current { background: color-mix(in srgb, var(--ink) 7%, transparent); } .dir-opts { display: grid; gap: 8px; } .dir-opt { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; text-align: left; padding: 10px; border-radius: var(--radius-md); border: 1.5px solid var(--line); background: transparent; } .dir-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .dir-opt b { display: block; font: 800 16px var(--font-mono); letter-spacing: .06em; } .dir-opt span { font-size: 14px; color: var(--ink-2); } .dir-swatch { width: 56px; height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); } .zoom-img { width: 100%; border-radius: var(--radius-md); display: block; background: var(--surface-2); } /* ---- Toast ---- */ .toast { position: fixed; z-index: 40; left: var(--space-4); right: var(--space-4); bottom: calc(var(--safe-b) + 176px); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: var(--radius-md); background: var(--glass-strong); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--line-strong); box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); font-weight: 600; font-size: 15px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform var(--dur-state) var(--ease-physical), opacity 200ms; } .toast.is-on { transform: none; opacity: 1; pointer-events: auto; } .toast__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sig); flex: none; } .toast__msg { flex: 1; } .toast__undo { height: 44px; padding: 0 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong); background: transparent; font-weight: 700; } /* ---- Final de recorrido ---- */ .done { padding: var(--space-8) var(--space-2); } .done__big { font: 800 64px/.95 var(--font-mono); letter-spacing: -.04em; margin: 0; } .done p { color: var(--ink-2); font-size: 17px; } .done__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--space-6); } .done__cell { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; } .done__cell b { display: block; font: 800 36px var(--font-mono); color: var(--sig); } .done__cell span { font-size: 13px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; } /* ---- Layout RIEL: lista de paradas; la actual se expande ---- */ .rail { list-style: none; margin: 0; padding: 0; } .rail__sec { display: flex; align-items: baseline; gap: 10px; padding: 18px 0 8px; } .rail__sec b { font: 800 34px/1 var(--font-mono); letter-spacing: -.03em; } .rail__sec span { font: 700 12px var(--font-mono); letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; } .rail__sec::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); align-self: center; } .rail__item { margin-bottom: 8px; } .rail-row { width: 100%; display: grid; grid-template-columns: 5px auto 1fr auto; gap: 12px; align-items: center; min-height: 64px; padding: 8px 12px 8px 8px; border-radius: var(--radius-md); border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-1) 70%, transparent); text-align: left; } .rail-row__bar { width: 5px; align-self: stretch; border-radius: 2px; background: var(--sig); } .rail-row[data-signal="pending"] .rail-row__bar { background: var(--line-strong); } .rail-row__bin { font: 800 22px/1 var(--font-mono); letter-spacing: -.02em; } .rail-row__title { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-row__qty { font: 800 22px var(--font-mono); } .rail-row.is-closed { opacity: .6; } [data-layout="riel"] .stop__bin { --bin-size: 52px !important; } [data-layout="riel"] .stop__photo { aspect-ratio: 16 / 10; } .scrim-layer { position: fixed; inset: 0; z-index: 45; background: var(--scrim); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity var(--dur-sheet) var(--ease-precise); } .scrim-layer.is-on { opacity: 1; pointer-events: auto; } /* ---- Vitrina de escritorio: la app dentro de un teléfono real de 390 × 844 ---- */ .showcase { display: none; } @media (min-width: 820px) and (min-height: 640px) { :root { --app-h: min(844px, calc(100vh - 64px)); } body { height: 100vh; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 64px; padding: 0 32px; } .device { position: relative; flex: none; width: 390px; height: var(--app-h); border-radius: 46px; overflow-y: auto; overflow-x: hidden; transform: translateZ(0); /* los fixed (dock, toast, hojas) quedan dentro del teléfono */ background: radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1.5px) 0 0 / 24px 24px, var(--canvas); box-shadow: 0 0 0 10px #0b0c0d, 0 0 0 11px #3a3d41, 0 50px 90px -30px rgba(0,0,0,.7); scrollbar-width: none; } .device::-webkit-scrollbar { display: none; } .device .stage, .device .route, .device .dock { max-width: none; } .showcase { display: grid; gap: 18px; width: 300px; } .showcase__eyebrow { margin: 0; font: 700 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; } .showcase__name { margin: 0; font: 800 44px/.95 var(--font-mono); letter-spacing: -.04em; } .showcase p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; } .showcase__dirs { display: grid; gap: 8px; } .showcase__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .showcase__legend li { display: flex; } } @media (max-height: 700px) { [data-layout="foco"] .stop__bin { --bin-size: 52px !important; } [data-layout="foco"] .qty__n { font-size: 38px; } [data-layout="foco"] .stop__title { font-size: 19px; } [data-layout="foco"] .stop__meta { display: none; } } @media (min-width: 560px) { .stage, .route { max-width: 560px; margin: 0 auto; width: 100%; } .dock { max-width: 560px; margin: 0 auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 120ms !important; } .route__flow::after { display: none; } .stop.is-confirmed .stop__card::after { display: none; } } /* ===== capa: variante ===== */ /* VARIACIÓN 1 · FOTO PROTAGONISTA — el bin, el título y la cantidad no cambian */ :root { --photo-min-h: clamp(150px, 32dvh, 260px); } [data-layout="foco"] .stage { padding: var(--space-2) var(--space-3); } [data-layout="foco"] .stop__card { padding: var(--space-3) var(--space-4) 0; } [data-layout="foco"] .stop__card > .stop__photo { order: 10; min-height: var(--photo-min-h); margin: var(--space-3) calc(var(--space-4) * -1) 0; border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); box-shadow: 0 -1px 0 var(--line); } [data-layout="foco"] .stop__card > div[style] { order: 9; } [data-layout="foco"] .stop__meta { display: flex; gap: var(--space-3); margin-top: var(--space-2); border: 0; border-radius: 0; background: none; } [data-layout="foco"] .cell { display: flex; align-items: baseline; gap: 6px; padding: 0; background: none; } [data-layout="foco"] .cell:first-child { flex: 1; } [data-layout="foco"] .cell__k { font: 700 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } [data-layout="foco"] .cell__v { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-layout="foco"] .photo-tabs { left: 10px; right: auto; bottom: 10px; gap: 4px; } [data-layout="foco"] .photo-tab { flex: none; padding: 0 12px; } @media (max-height: 700px) { [data-layout="foco"] .stop__meta { display: none; } } /* VARIACIÓN 2 · DOCK MÁS FÍSICO — tecla con zócalo, recorrido largo y enganche */ :root { --tap-primary: 84px; --key-travel: 8px; --key-travel-sm: 3px; --key-plinth: color-mix(in srgb, var(--ink) 38%, var(--canvas)); } .dock { gap: 12px; } .toast { bottom: calc(var(--dock-h, 186px) + var(--space-2)); } /* …y la parada le cede ese hueco mientras el aviso está encendido, en vez de dejar que le tape el título (100 % a 390x844) o las pestañas de la foto (en apaisado). pickeo.js mide la intrusión real y la escribe en --aviso-hueco; en reposo vale 0 y aquí no cambia nada. */ :root { --aviso-hueco: 0px; } [data-layout="foco"] .stop { margin-bottom: var(--aviso-hueco); } .action { box-shadow: inset 0 1px 0 var(--glass-edge), 0 var(--key-travel-sm) 0 0 var(--line-strong); } .action:active { transform: translateY(var(--key-travel-sm)); box-shadow: inset 0 1px 0 transparent, 0 0 0 0 transparent; } .action--primary { margin-bottom: var(--key-travel); background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 90%, var(--canvas))); box-shadow: inset 0 -3px 0 rgba(0,0,0,.16), 0 var(--key-travel) 0 0 var(--key-plinth), 0 calc(var(--key-travel) + 14px) 28px -10px rgba(0,0,0,.75); transition: transform var(--dur-press) var(--ease-precise), box-shadow var(--dur-press); } .action--primary:active { transform: translateY(var(--key-travel)); box-shadow: inset 0 -1px 0 rgba(0,0,0,.16), 0 0 0 0 var(--key-plinth), 0 4px 10px -6px rgba(0,0,0,.6); } .action--primary.is-latching { transform: translateY(calc(var(--key-travel) * .6)); box-shadow: 0 calc(var(--key-travel) * .4) 0 0 color-mix(in srgb, var(--signal-picked) 45%, var(--canvas)), 0 0 0 4px color-mix(in srgb, var(--signal-picked) 32%, transparent), 0 12px 32px -6px color-mix(in srgb, var(--signal-picked) 60%, transparent); transition: transform var(--dur-latch) var(--ease-physical), box-shadow var(--dur-latch) var(--ease-precise); } .action--primary .check { transition: transform var(--dur-latch) var(--ease-physical); } .action--primary.is-latching .check { transform: scale(1.25); } /* VARIACIÓN 3 · VIDRIO Y AURA MÁS NOTABLES — el aura sale por los bordes; el vidrio bajo el texto se hace más denso */ :root, [data-tema="noche"] { --aura-strength: 0.64; --glass: rgba(18, 21, 24, 0.62); --glass-edge: rgba(255, 255, 255, 0.34); } [data-tema="dia"] { --aura-strength: 0.40; --glass: rgba(255, 255, 255, 0.68); } :root { --blur-glass: 36px; --aura-spread: 28px; --aura-pending: .35; } .stop__aura { inset: 0 calc(var(--aura-spread) * -1) 0; height: auto; filter: blur(48px); background: radial-gradient(70% 45% at 12% 18%, var(--sig), transparent 70%), radial-gradient(60% 45% at 92% 82%, var(--sig), transparent 72%), radial-gradient(45% 25% at 50% 104%, var(--sig), transparent 70%); } [data-signal="pending"] > .stop__aura { opacity: calc(var(--aura-strength) * var(--aura-pending)); } .stop__card { background: linear-gradient(180deg, color-mix(in srgb, var(--glass-edge) 22%, transparent), transparent 32%), var(--glass); backdrop-filter: blur(var(--blur-glass)) saturate(1.9); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.9); border-color: color-mix(in srgb, var(--sig) 22%, var(--line)); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px color-mix(in srgb, var(--sig) 28%, transparent), inset 0 -40px 60px -44px color-mix(in srgb, var(--sig) 40%, transparent), 0 30px 60px -30px rgba(0,0,0,.7); } .stop__card::before { padding: 1.5px; background: linear-gradient(150deg, var(--glass-edge), transparent 30%, transparent 62%, color-mix(in srgb, var(--sig) 80%, transparent)); } /* ===== capa: identidad ===== */ /* ========================================================================= IDENTIDAD 2 · liquid glass · mesh · compacto móvil · vista PC · movimiento ========================================================================= */ @property --mesh-angle { syntax: ""; inherits: false; initial-value: 0deg; } :root, [data-tema="noche"] { --lg-rim-hi: rgba(255,255,255,.62); --lg-rim-lo: rgba(255,255,255,.14); --lg-shade: rgba(0,0,0,.6); --lg-sheen: rgba(255,255,255,.09); --mesh-neutral: rgba(255,255,255,.9); } [data-tema="dia"] { --lg-rim-hi: rgba(255,255,255,1); --lg-rim-lo: rgba(10,11,12,.10); --lg-shade: rgba(20,22,24,.18); --lg-sheen: rgba(255,255,255,.6); --mesh-neutral: rgba(10,11,12,.6); } :root { --radius-lg: 22px; --radius-md: 12px; --radius-pill: 999px; --tap-min: 50px; --tap-primary: 64px; --key-travel: 6px; --blur-glass: 40px; --blur-dock: 40px; --mesh-w: 2px; --mesh-speed: 9s; --type-bin-scale: .8; --type-title: 18px; --type-qty: 36px; } body { background: radial-gradient(120% 50% at 50% -10%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 60%), radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1.5px) 0 0 / 24px 24px, var(--canvas); } .device { container: app / inline-size; } /* --- Liquid glass: sheen + rim alto/bajo + saturación --- */ .stop__card, .action:not(.action--primary), .rail-row, .split, .chip, .suggest__item, .dir-opt, .alt, .filter, .view-toggle { background: linear-gradient(180deg, var(--lg-sheen), transparent 45%), var(--glass); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(2); backdrop-filter: blur(var(--blur-glass)) saturate(2); } .route, .dock, .sheet__body, .toast { background: linear-gradient(180deg, var(--lg-sheen), transparent 60%), var(--glass-strong); -webkit-backdrop-filter: blur(var(--blur-dock)) saturate(2); backdrop-filter: blur(var(--blur-dock)) saturate(2); } .stop__card { border-color: color-mix(in srgb, var(--sig) 22%, var(--line)); box-shadow: inset 0 1px 0 var(--lg-rim-hi), inset 0 -1px 0 var(--lg-rim-lo), inset 0 18px 30px -26px var(--lg-rim-hi), inset 0 0 0 1px color-mix(in srgb, var(--sig) 26%, transparent), inset 0 -40px 60px -44px color-mix(in srgb, var(--sig) 45%, transparent), 0 24px 48px -24px var(--lg-shade); } .action:not(.action--primary), .rail-row, .chip, .suggest__item, .alt, .filter { border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--lg-rim-hi), inset 0 -1px 0 var(--lg-rim-lo), 0 var(--key-travel-sm) 0 0 var(--line), 0 8px 18px -10px var(--lg-shade); } .chip[aria-pressed="true"], .suggest__item[aria-selected="true"], .filter[aria-selected="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } /* --- Contornos mesh: anillo cónico que gira + halo mesh detrás --- */ .stop__card::before { inset: calc(var(--mesh-w) * -1); padding: var(--mesh-w); background: conic-gradient(from var(--mesh-angle) at 32% 42%, var(--sig), transparent 16%, var(--mesh-neutral) 28%, transparent 42%, var(--sig) 56%, color-mix(in srgb, var(--sig) 25%, transparent) 70%, var(--mesh-neutral) 84%, var(--sig)); animation: mesh-spin var(--mesh-speed) linear infinite; } .stop::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); z-index: -1; pointer-events: none; background: conic-gradient(from var(--mesh-angle), var(--sig), transparent 20%, var(--mesh-neutral) 35%, transparent 50%, var(--sig) 65%, transparent 82%, var(--sig)); filter: blur(18px); opacity: .5; animation: mesh-spin var(--mesh-speed) linear infinite reverse; } .stop[data-signal="pending"]::before { opacity: .16; } @keyframes mesh-spin { to { --mesh-angle: 360deg; } } .route, .dock { border-color: transparent; } .route::after, .dock::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; opacity: .55; background: linear-gradient(90deg, transparent, var(--mesh-neutral) 25%, transparent 45%, var(--mesh-neutral) 70%, transparent) 0 0 / 200% 100%; animation: mesh-slide 7s linear infinite; } .route::after { bottom: -1px; } .dock::before { top: -1px; } @keyframes mesh-slide { to { background-position: -200% 0; } } .action--primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--mesh-angle), color-mix(in srgb, var(--on-ink) 55%, transparent), transparent 30%, color-mix(in srgb, var(--on-ink) 25%, transparent) 55%, transparent 80%, color-mix(in srgb, var(--on-ink) 55%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: mesh-spin 5s linear infinite; } /* --- Identidad tech: pesos más finos y precisos --- */ .stop__bin { font-size: calc(var(--bin-size, 64px) * var(--type-bin-scale)); font-weight: 700; letter-spacing: -.035em; } .stop__title { font-size: var(--type-title); font-weight: 600; letter-spacing: -.01em; } .qty { padding: 2px 8px 4px; border-width: 1px; } .qty__n { font-size: var(--type-qty); font-weight: 700; } .qty__x { font-size: 18px; } .stop__section { font-size: 11px; letter-spacing: .14em; display: flex; align-items: center; gap: 6px; } .stop__section::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 8px var(--sig); animation: hud-dot 2.4s var(--ease-precise) infinite; } @keyframes hud-dot { 50% { opacity: .35; } } .signal { height: 24px; font-size: 11px; padding: 0 8px 0 6px; border-width: 1px; } .signal .ico { width: 13px; height: 13px; } /* --- Móvil compacto --- */ .route { padding: 8px var(--space-3); flex-wrap: wrap; row-gap: 8px; } .route__ruler { height: 38px; } .route__count b { font-size: 18px; } .route__menu { width: 40px; height: 40px; } .stop__card { padding: var(--space-3); } [data-layout="foco"] .stop__card { padding: var(--space-3) var(--space-3) 0; } [data-layout="foco"] .stop__card > .stop__photo { margin: var(--space-3) calc(var(--space-3) * -1) 0; } .stop__head { min-height: 24px; } .stop__ident { margin-top: 6px; } .stop__notice { font-size: 14px; padding: 8px 10px; margin-top: var(--space-2); } .alt { font-size: 13px; padding: 6px 8px; } .split { padding: 8px 10px; margin-top: var(--space-2); } .split__copy b { font-size: 14px; } .stepper button { width: 44px; height: 44px; font-size: 22px; } .stepper output { font-size: 22px; min-width: 32px; } .split__count { font-size: 22px; min-width: 40px; } .dock { padding: 8px calc(var(--space-3) + var(--safe-r)) calc(var(--safe-b) + 10px) calc(var(--space-3) + var(--safe-l)); gap: 10px; } .dock__row { gap: 6px; } .action { font-size: 15px; font-weight: 600; } .action--primary { font-size: 18px; font-weight: 700; } .action__qty { font-size: 15px; padding: 2px 7px; border-width: 1.5px; } .sheet__title { font-size: 22px; } .rail-row { min-height: 56px; } .rail-row__bin, .rail-row__qty { font-size: 18px; } .rail__sec b { font-size: 26px; } .done__big { font-size: 44px; } .done__cell b { font-size: 28px; } /* --- Barra de filtro por sección --- */ .filters { flex: 1 0 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--space-3) * -1); padding: 2px var(--space-3) 4px; } .filters::-webkit-scrollbar { display: none; } .filter { flex: none; height: 36px; padding: 0 5px 0 12px; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); font: 600 13px/1 var(--font-sans); color: var(--ink-2); transition: background-color var(--dur-state) var(--ease-precise), color var(--dur-state), transform var(--dur-press) var(--ease-precise); } .filter b { min-width: 26px; height: 26px; padding: 0 7px; border-radius: var(--radius-pill); display: grid; place-items: center; font: 700 11px/1 var(--font-mono); background: var(--surface-2); color: var(--ink); transition: inherit; } .filter[aria-selected="true"] b { background: var(--on-ink); color: var(--ink); } .filter:active { transform: scale(.95); } .route__sec { transition: opacity var(--dur-state) var(--ease-precise); } .route__sec.is-dim { opacity: .25; } /* --- «Otro bin» separado: borde punteado, icono de cambio, hoja DE → A --- */ .action--alt { border-style: dashed !important; border-width: 1.5px !important; border-color: var(--line-strong) !important; margin-left: 6px; } .action--alt::after { content: ""; position: absolute; left: -7px; top: 10px; bottom: 10px; width: 1px; background: var(--line-strong); } .bin-swap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 0 0 var(--space-3); padding: 12px; border-radius: var(--radius-md); border: 1.5px dashed var(--line-strong); } .bin-swap__k { display: block; font: 700 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink-3); margin-bottom: 6px; } .bin-swap__from { font: 700 22px/1 var(--font-mono); color: var(--ink-3); text-decoration: line-through 2px; } .bin-swap__to { display: inline-block; font: 800 24px/1 var(--font-mono); color: var(--ink-3); } .bin-swap__to.is-set { color: var(--ink); animation: chip-in var(--dur-state) var(--ease-physical); } .bin-swap .ico { width: 24px; height: 24px; color: var(--ink-2); } .bin-swap > div:last-child { text-align: right; } /* --- Movimiento: respuesta a acciones y a estado --- */ @keyframes enter-next { from { transform: translateX(10%) scale(.98); opacity: 0; filter: blur(8px); } } @keyframes enter-prev { from { transform: translateX(-10%) scale(.98); opacity: 0; filter: blur(8px); } } @keyframes rise { from { transform: translateY(10px); opacity: 0; } } @keyframes chip-in { from { transform: scale(.7); opacity: 0; } } .stop.is-arriving .stop__card > * { animation: rise 420ms var(--ease-precise) both; } .stop.is-arriving .stop__card > :nth-child(2) { animation-delay: 40ms; } .stop.is-arriving .stop__card > :nth-child(3) { animation-delay: 80ms; } .stop.is-arriving .stop__card > :nth-child(4) { animation-delay: 120ms; } .stop.is-arriving .stop__card > :nth-child(5) { animation-delay: 160ms; } .stop.is-arriving .stop__card > :nth-child(n+6) { animation-delay: 200ms; } .stop__head .signal { animation: chip-in 380ms var(--ease-physical) both; } .stop__notice { animation: notice-in 480ms var(--ease-physical) 120ms both; } @keyframes notice-in { from { transform: translateY(6px) scale(.98); opacity: 0; box-shadow: 0 0 0 8px color-mix(in srgb, var(--sig) 30%, transparent); } } .stop[data-signal="unlocated"] > .stop__aura, .stop[data-signal="insufficient"] > .stop__aura, .stop[data-signal="notfound"] > .stop__aura { animation: aura-breathe 2.8s var(--ease-precise) infinite; } @keyframes aura-breathe { 50% { opacity: calc(var(--aura-strength) * 1.4); transform: scale(1.04); } } .stop.is-confirmed > .stop__aura { animation: aura-flash 700ms var(--ease-precise); } @keyframes aura-flash { 30% { opacity: 1; transform: scale(1.08); } } .gallery img { animation: fade 500ms var(--ease-precise) both; } .action--primary[data-mode="pick"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%); background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--on-ink) 14%, transparent) 50%, transparent 65%); animation: sheen 3.4s var(--ease-precise) 1.2s infinite; } .action--primary.is-latching::after { display: none; } @keyframes sheen { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .action:not(.action--primary):active { transform: translateY(var(--key-travel-sm)) scale(.97); } .action:disabled { opacity: .3; filter: saturate(0); transition: opacity var(--dur-state), filter var(--dur-state); } .chip, .suggest__item, .rail-row, .route-row, .stepper button, .dir-opt { transition: transform var(--dur-press) var(--ease-precise), background-color var(--dur-state); } .chip:active, .suggest__item:active, .rail-row:active, .route-row:active, .dir-opt:active { transform: scale(.97); } .stepper button:active { transform: scale(.88); } .route__tick.is-current:not(.is-pop) { animation: tick-glow 2s ease-in-out infinite; } @keyframes tick-glow { 50% { box-shadow: 0 0 0 3px var(--canvas), 0 0 22px 4px color-mix(in srgb, var(--sig) 75%, transparent); } } .toast { overflow: hidden; } .toast::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--sig); transform-origin: left; transform: scaleX(0); } .toast.is-on::after { animation: countdown 5s linear forwards; } @keyframes countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } } .sheet[open] .sheet__body > * { animation: rise 420ms var(--ease-precise) both; } .sheet[open] .sheet__body > :nth-child(3) { animation-delay: 40ms; } .sheet[open] .sheet__body > :nth-child(4) { animation-delay: 80ms; } .sheet[open] .sheet__body > :nth-child(n+5) { animation-delay: 120ms; } /* --- Selector de vista (solo vitrina de escritorio) --- */ .view-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--lg-rim-hi); } .view-toggle button { height: 40px; border: 0; border-radius: calc(var(--radius-md) - 4px); background: transparent; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); transition: background-color var(--dur-state) var(--ease-precise), color var(--dur-state); } .view-toggle button .ico { width: 16px; height: 16px; } .view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); } @media (min-width: 820px) and (min-height: 640px) { html[data-view="pc"] { --app-h: min(900px, calc(100vh - 64px)); } .device { transition: width var(--dur-sheet) var(--ease-precise), border-radius var(--dur-sheet) var(--ease-precise); background: radial-gradient(120% 50% at 50% -10%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 60%), radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1.5px) 0 0 / 24px 24px, var(--canvas); } [data-view="pc"] body { gap: 40px; } [data-view="pc"] .showcase { width: 260px; } [data-view="pc"] .device { width: min(1280px, calc(100vw - 260px - 40px - 64px)); border-radius: 14px; box-shadow: 0 0 0 1px #3a3d41, 0 0 0 7px #0b0c0d, 0 0 0 8px #2a2d31, 0 50px 90px -30px rgba(0,0,0,.7); } } /* --- Vista PC: el contenedor del app decide, no el viewport --- */ @container app (min-width: 760px) { .app { --type-bin-scale: 1; --type-title: 26px; --type-qty: 52px; --tap-primary: 72px; --tap-min: 54px; } .stage, .route, .dock { max-width: none; } .stage, .route { width: 100%; } .route { padding: calc(var(--safe-t) + 12px) var(--space-6) 12px; } /* la muesca, también con el contenedor ancho */ .filters { margin: 0; padding: 2px 0 4px; } [data-layout="foco"] .stage { padding: var(--space-6) var(--space-6) var(--space-4); height: calc(var(--app-h, 100dvh) - var(--route-h, 66px) - var(--dock-h, 170px) - var(--space-4)); } [data-layout="foco"] .stop__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: repeat(9, auto) 1fr; column-gap: var(--space-6); align-content: start; padding: var(--space-6); } [data-layout="foco"] .stop__card > * { grid-column: 1; } [data-layout="foco"] .stop__card > .stop__photo { grid-column: 2; grid-row: 1 / -1; margin: 0; border-radius: var(--radius-md); min-height: 0; box-shadow: 0 0 0 1px var(--line); } [data-layout="foco"] .stop__meta { display: flex; } .stop__bin { font-size: clamp(56px, 7cqi, 104px); margin-top: var(--space-3); } .stop__ident { margin-top: var(--space-4); } .dock { left: 0; right: 0; bottom: var(--space-4); margin: 0 auto; width: min(980px, calc(100% - 48px)); border-radius: var(--radius-lg); border: 1px solid var(--line); grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); align-items: center; padding: 10px; } .dock::before { left: 24px; right: 24px; } .toast { left: 0; right: 0; margin: 0 auto; width: min(480px, calc(100% - 48px)); bottom: calc(var(--dock-h, 90px) + var(--space-8)); } .sheet { left: 0; right: 0; margin: 0 auto; width: min(620px, 100%); } [data-layout="riel"] .stage { max-width: 1080px; margin: 0 auto; width: 100%; } } @media (prefers-reduced-motion: reduce) { .stop__card::before, .stop::before, .route::after, .dock::before, .action--primary::before, .action--primary::after, .stop__aura, .route__tick.is-current, .stop__section::before, .toast.is-on::after { animation: none !important; } .action--primary::after { display: none; } } /* ===== capa: calma ===== */ /* ========================================================================= CALMA · tarjeta partida en cuadros pequeños y separados; menos brillo ========================================================================= */ :root, [data-tema="noche"] { --aura-strength: .40; } [data-tema="dia"] { --aura-strength: .26; } :root { --type-bin-scale: .7; --type-title: 16px; --type-qty: 30px; --tile-gap: 10px; --tile-pad: 10px 12px; } [data-layout="foco"] .stage { padding: var(--space-3) var(--space-4); } .stop__card, [data-layout="foco"] .stop__card { background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; display: flex; flex-direction: column; gap: var(--tile-gap); } .stop__card::before, .stop::before { display: none; } .tile, .stop__ident, .stop__meta, .stop__note, .split, .stop__notice { position: relative; margin: 0; padding: var(--tile-pad); border-radius: var(--radius-md); border: 1px solid var(--line); background: linear-gradient(180deg, var(--lg-sheen), transparent 50%), var(--glass); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.6); backdrop-filter: blur(var(--blur-glass)) saturate(1.6); box-shadow: inset 0 1px 0 var(--lg-rim-hi), inset 0 -1px 0 var(--lg-rim-lo), 0 10px 24px -16px var(--lg-shade); } .stop__notice { border-color: var(--sig); } .tile--where { border-color: color-mix(in srgb, var(--sig) 30%, var(--line)); } .tile--where::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--mesh-angle) at 30% 40%, var(--sig), transparent 22%, var(--mesh-neutral) 36%, transparent 55%, var(--sig) 75%, transparent 90%, var(--sig)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; animation: mesh-spin 12s linear infinite; } .stop[data-signal="pending"] .tile--where::before { opacity: .35; } .stop__bin { margin-top: 4px; } .stop__ident { margin: 0; } .stop__meta, [data-layout="foco"] .stop__meta { display: flex; gap: var(--space-3); border-radius: var(--radius-md); overflow: visible; } .stop__meta .cell { display: flex; align-items: baseline; gap: 6px; padding: 0; background: none; min-width: 0; } .stop__meta .cell:first-child { flex: 1; } .stop__meta .cell__k { font: 700 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } .stop__meta .cell__v { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stop__note { font-size: 13px; } [data-layout="foco"] .stop__card > .stop__photo { order: 5; margin: 0; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -16px var(--lg-shade); } [data-layout="foco"] .stop__card > .stop__note, [data-layout="foco"] .stop__card > .stop__meta { order: 11; } [data-layout="foco"] .stop__card > div[style] { order: 12; margin: 0 !important; } .route::after, .dock::before { animation: none; opacity: .3; } .stop__aura { filter: blur(56px); } @container app (min-width: 760px) { .app { --type-bin-scale: .9; --type-title: 22px; --type-qty: 44px; --tile-gap: 14px; --tile-pad: 14px 18px; } [data-layout="foco"] .stop__card { display: flex; flex-direction: column; position: relative; padding: 0; gap: var(--tile-gap); grid-template-rows: none; } [data-layout="foco"] .stop__card > * { margin-right: calc(54% + var(--space-6) / 2) !important; } [data-layout="foco"] .stop__card > .stop__photo { position: absolute; top: 0; right: 0; bottom: 0; width: calc(54% - var(--space-6) / 2); margin: 0 !important; min-height: 0; } .stop__bin { font-size: clamp(48px, 6cqi, 88px); } } @media (prefers-reduced-motion: reduce) { .tile--where::before { animation: none !important; } } /* ===== capa: minimo ===== */ /* MÍNIMO · todo más pequeño */ :root { --type-bin-scale: .55; --type-title: 14px; --type-qty: 24px; --tile-gap: 8px; --tile-pad: 8px 10px; --tap-min: 44px; --tap-primary: 54px; --key-travel: 4px; --photo-min-h: clamp(110px, 22dvh, 180px); } [data-layout="foco"] .stage { padding: var(--space-2) var(--space-3); } [data-layout="foco"] .stop__card > .stop__photo { flex: 0 1 auto; height: clamp(140px, 34dvh, 260px); max-height: 100%; } .stop__section { font-size: 10px; } /* El chip nunca cede: es el estado de la parada y se lee entero o no sirve. Quien se va a la linea de abajo es la seccion. */ .stop__head .signal { flex: none; } .signal { height: 20px; font-size: 10px; padding: 0 6px 0 5px; gap: 4px; } .signal .ico { width: 11px; height: 11px; } .stop__head { min-height: 20px; } .qty { padding: 1px 6px 3px; border-radius: var(--radius-sm); } .qty__x { font-size: 14px; } .stop__notice, .split__copy { font-size: 12px; } .split__copy b { font-size: 13px; } .alt { font-size: 12px; padding: 4px 6px; } .stepper button { width: 44px; height: 44px; font-size: 18px; } /* 44 = mínimo para un dedo */ .stepper output { font-size: 18px; min-width: 26px; } .photo-tab { height: 44px; font-size: 10px; padding: 0 8px; } /* 44 = mínimo para un dedo */ .photo-zoom { width: 44px; height: 44px; } /* 44 = mínimo para un dedo */ .photo-zoom .ico { width: 16px; height: 16px; } .route { padding: 6px var(--space-3); row-gap: 6px; } .route__ruler { height: 32px; } .route__tick { width: 6px; height: 11px; } .route__tick.is-current { height: 20px; } .route__ticks { height: 20px; } .route__count b { font-size: 15px; } .route__count span { font-size: 9px; } .route__menu { width: 36px; height: 36px; } .route__menu .ico { width: 18px; height: 18px; } .filter { height: 30px; font-size: 12px; padding: 0 4px 0 10px; gap: 6px; } .filter b { min-width: 22px; height: 22px; font-size: 10px; padding: 0 5px; } .dock { padding-top: 6px; gap: 8px; } .action { font-size: 13px; gap: 6px; } .action .ico { width: 16px; height: 16px; } .action--icon .ico { width: 20px; height: 20px; } .action--primary { font-size: 15px; } .action__qty { font-size: 13px; padding: 1px 6px; } .sheet__title { font-size: 19px; } .sheet__desc { font-size: 13px; } .chip { height: 44px; font-size: 13px; padding: 0 12px; } /* 44 = mínimo para un dedo */ .bin-input { font-size: 26px; height: 56px; } .suggest__item { height: 46px; font-size: 14px; } .bin-swap__from { font-size: 18px; } .bin-swap__to { font-size: 20px; } .rail-row { min-height: 46px; } .rail-row__bin, .rail-row__qty { font-size: 15px; } .rail-row__title { font-size: 12px; } .rail__sec b { font-size: 20px; } .toast { font-size: 13px; } .toast__undo { height: 44px; } /* 44 = mínimo para un dedo */ .done__big { font-size: 34px; } @container app (min-width: 760px) { .app { --type-bin-scale: .7; --type-title: 17px; --type-qty: 32px; --tile-gap: 10px; --tile-pad: 10px 14px; --tap-primary: 56px; --tap-min: 44px; } .stop__bin { font-size: clamp(40px, 4.5cqi, 64px); } [data-layout="foco"] .stage { padding: var(--space-4) var(--space-6) var(--space-3); } [data-layout="foco"] .stop__card > .stop__photo { height: auto; } } /* ===== capa: reparto ===== */ /* REPARTO · bin arriba, foto al centro, producto + cantidad abajo junto al pulgar */ :root { --tile-gap: 10px; } [data-layout="foco"] .stage { padding: var(--space-3) var(--space-3) var(--space-3); } [data-layout="foco"] .stop__card { justify-content: flex-start; } [data-layout="foco"] .stop__card > .tile--where { order: 1; } [data-layout="foco"] .stop__card > .stop__photo { order: 2; flex: 1 1 auto; height: auto; min-height: 140px; max-height: 300px; margin: auto 0 !important; } [data-layout="foco"] .stop__card > .stop__ident { order: 3; } [data-layout="foco"] .stop__card > .split { order: 4; } [data-layout="foco"] .stop__card > .stop__notice { order: 5; } [data-layout="foco"] .stop__card > .stop__note { order: 6; } [data-layout="foco"] .stop__card > .stop__meta { order: 7; } [data-layout="foco"] .stop__card > div[style] { order: 8; } .route { row-gap: 8px; padding-bottom: 8px; } @container app (min-width: 760px) { [data-layout="foco"] .stop__card > .stop__photo { margin: 0 !important; max-height: none; } [data-layout="foco"] .stop__card > .stop__ident { margin-top: auto; } } /* ===== capa: filtro-sku ===== */ /* FILTRO DESPLEGABLE + SKU PRIMERO */ .route { flex-wrap: nowrap; } .route__ruler { order: 1; } .route__count { order: 2; } .filters { order: 3; } .route__menu { order: 4; } .filters { flex: none; position: relative; display: block; margin: 0; padding: 0; overflow: visible; } .filter-btn { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); font: 600 12px/1 var(--font-sans); color: var(--ink); background: linear-gradient(180deg, var(--lg-sheen), transparent 50%), var(--glass); box-shadow: inset 0 1px 0 var(--lg-rim-hi), inset 0 -1px 0 var(--lg-rim-lo); transition: transform var(--dur-press) var(--ease-precise); } .filter-btn b { min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); display: grid; place-items: center; font: 700 10px/1 var(--font-mono); background: var(--surface-2); } .filter-btn .ico { width: 14px; height: 14px; color: var(--ink-2); transition: transform var(--dur-state) var(--ease-physical); } .filter-btn[aria-expanded="true"] .ico { transform: rotate(180deg); } .filter-btn:active { transform: scale(.95); } .filter-menu { position: absolute; z-index: 25; top: calc(100% + 8px); right: -44px; min-width: 200px; display: grid; gap: 4px; padding: 6px; border-radius: var(--radius-md); border: 1px solid var(--line); background: linear-gradient(180deg, var(--lg-sheen), transparent 60%), var(--glass-strong); -webkit-backdrop-filter: blur(var(--blur-dock)) saturate(2); backdrop-filter: blur(var(--blur-dock)) saturate(2); box-shadow: inset 0 1px 0 var(--lg-rim-hi), 0 20px 40px -16px var(--lg-shade); transform-origin: top right; animation: menu-in var(--dur-state) var(--ease-physical); } .filter-menu[hidden] { display: none; } @keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } } .filter-menu .filter { width: 100%; height: 40px; justify-content: space-between; border-radius: var(--radius-sm); box-shadow: none; background: transparent; border-color: transparent; } .filter-menu .filter[aria-selected="true"] { background: var(--ink); color: var(--on-ink); } [data-layout="foco"] .stop__card > .stop__meta, .stop__card > .stop__meta { order: 0 !important; display: flex !important; align-items: baseline; } .stop__meta .cell:first-child .cell__k { color: var(--ink-2); } .stop__meta .cell:first-child .cell__v { font: 700 15px/1.25 var(--font-mono); color: var(--ink); letter-spacing: .02em; padding-bottom: 4px; background: linear-gradient(90deg, var(--sig), var(--mesh-neutral), color-mix(in srgb, var(--sig) 40%, transparent), var(--mesh-neutral), var(--sig)) 0 100% / 200% 2px no-repeat; animation: sku-mesh 3.2s linear infinite; } .stop__meta, [data-layout="foco"] .stop__card > .stop__meta { flex-wrap: wrap; row-gap: 4px; } .stop__meta .cell:first-child { flex: 1 1 100%; } .stop__meta .cell:first-child .cell__v { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .stop__meta .cell:last-child { flex: none; } .stop__meta .cell:last-child .cell__v { font-size: 11px; color: var(--ink-3); } @keyframes sku-mesh { to { background-position: -200% 100%; } } @container app (min-width: 760px) { .stop__meta .cell:first-child .cell__v { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { .stop__meta .cell:first-child .cell__v { animation: none !important; } } /* ===== capa: vidrio-mate ===== */ /* VIDRIO MATE · glass notable sin contornos reflejantes; SKU con luz; pickear blanco neutro */ :root, [data-tema="noche"] { --sku-base: #9a9a9a; --sku-glow: #ffffff; --key-face: #fafafa; --key-face-ink: #0a0a0a; } [data-tema="dia"] { --sku-base: #0a0b0c; --sku-glow: #8a8a8a; --key-face: #0a0b0c; --key-face-ink: #ffffff; } .tile, .stop__meta, .stop__note, .split, .action:not(.action--primary), .rail-row, .chip, .suggest__item, .alt, .filter-btn, .dir-opt { border-color: transparent; background: color-mix(in srgb, var(--glass) 100%, transparent); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.8); backdrop-filter: blur(var(--blur-glass)) saturate(1.8); box-shadow: 0 12px 28px -18px var(--lg-shade); } .stop__notice { border-color: color-mix(in srgb, var(--sig) 45%, transparent); box-shadow: 0 12px 28px -18px var(--lg-shade); } .tile--where { border-color: transparent; } .tile--where::before, .action--primary::before { display: none; } .route::after, .dock::before { opacity: .12; } .route, .dock, .sheet__body, .toast, .filter-menu { box-shadow: 0 20px 40px -24px var(--lg-shade); border-color: transparent; } .filter-menu .filter { box-shadow: none; background: transparent; } .filter-menu .filter[aria-selected="true"] { background: var(--ink); } .chip[aria-pressed="true"], .suggest__item[aria-selected="true"] { background: var(--ink); } .action--alt { border: 1.5px dashed color-mix(in srgb, var(--line-strong) 70%, transparent) !important; } /* Producto + cantidad: sin cuadro, debajo de la foto */ .stop__ident { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 2px 4px 0; } /* SKU: sans pesada, grande, con barrido de luz blanca por las letras */ .stop__meta .cell:first-child .cell__k { font-size: 9px; color: var(--ink-3); } .stop__meta .cell:first-child .cell__v { font: 800 22px/1.1 var(--font-sans); letter-spacing: -.01em; padding: 0; animation: sku-light 3.6s var(--ease-precise) infinite; background: linear-gradient(100deg, var(--sku-base) 0%, var(--sku-base) 38%, var(--sku-glow) 50%, var(--sku-base) 62%, var(--sku-base) 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sku-glow) 22%, transparent)); } @keyframes sku-light { from { background-position: 100% 0; } to { background-position: -150% 0; } } @container app (min-width: 760px) { .stop__meta .cell:first-child .cell__v { font-size: 30px; } } @media (prefers-reduced-motion: reduce) { .stop__meta .cell:first-child .cell__v { animation: none !important; background: none; color: var(--ink); -webkit-text-fill-color: var(--ink); } } /* Pickear: blanco neutro, sin degradado */ .action--primary { background: var(--key-face); color: var(--key-face-ink); --key-plinth: color-mix(in srgb, var(--key-face) 42%, var(--canvas)); } /* ===== capa: info-junta ===== */ /* INFO JUNTA · SKU, bin, foto, nombre y cantidad en un solo panel; controles aparte */ .stop__info { position: relative; display: flex; flex-direction: column; gap: 10px; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.8); backdrop-filter: blur(var(--blur-glass)) saturate(1.8); box-shadow: 0 16px 36px -22px var(--lg-shade); } .stop__info > .tile, .stop__info > .stop__meta, .stop__info > .stop__note { padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; } .stop__info > .stop__meta { order: 0; display: block !important; } .stop__info > .tile--where { order: 1; } .stop__info > .stop__photo { order: 2; margin: 0; border-radius: var(--radius-md); } .stop__info > .stop__ident { order: 3; padding: 0; } .stop__info > .stop__note { order: 4; } [data-layout="foco"] .stop__info { flex: 1 1 auto; min-height: 0; } [data-layout="foco"] .stop__info > .stop__photo { flex: 1 1 auto; aspect-ratio: auto; min-height: 140px; max-height: 300px; } [data-layout="foco"] .stop__card > .stop__notice, [data-layout="foco"] .stop__card > .split { flex: none; } @container app (min-width: 760px) { html[data-layout="foco"] .stop__card > * { margin-right: 0 !important; } .stop__info { padding: var(--space-6); gap: 14px; } .stop__info > :not(.stop__photo) { margin-right: calc(54% + var(--space-3)); } html[data-layout="foco"] .stop__info > .stop__photo { position: absolute; top: var(--space-6); right: var(--space-6); bottom: var(--space-6); width: calc(54% - var(--space-6)); max-height: none; min-height: 0; } .stop__info > .stop__ident { margin-top: auto; } } /* ===== capa: centrado ===== */ /* CENTRADO + SIN PANEL · contenido al centro de la pantalla, separado por filetes de vidrio finos */ [data-layout="foco"] .stop__card { justify-content: center; } .stop__info, [data-layout="foco"] .stop__info { flex: none; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 var(--space-1); gap: 12px; } [data-layout="foco"] .stop__info > .stop__photo { flex: none; height: clamp(160px, 30dvh, 260px); max-height: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 16px 32px -20px var(--lg-shade); } .stop__info > .tile--where, .stop__info > .stop__ident { position: relative; padding-top: 12px; } .stop__info > .tile--where::after, .stop__info > .stop__ident::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 22%, transparent) 20%, color-mix(in srgb, var(--ink) 22%, transparent) 80%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--canvas) 60%, transparent); } .stop__info > .stop__ident::after { top: 0; } .stop[data-signal="pending"] > .stop__aura { opacity: 0; } @container app (min-width: 760px) { .stop__info, [data-layout="foco"] .stop__info { padding: 0; min-height: min(100%, 440px); } html[data-layout="foco"] .stop__info > .stop__photo { top: 0; right: 0; bottom: 0; height: auto; width: calc(54% - var(--space-3)); } } /* ===== capa: sku-grande ===== */ .stop__meta .cell:first-child .cell__v { font-size: 30px; line-height: 1.05; letter-spacing: -.02em; } @container app (min-width: 760px) { .stop__meta .cell:first-child .cell__v { font-size: 42px; } } /* ===== capa: aire ===== */ .stop__info, [data-layout="foco"] .stop__info { gap: 20px; } .stop__info > .tile--where, .stop__info > .stop__ident { padding-top: 18px; } [data-layout="foco"] .stop__card { gap: 16px; } @container app (min-width: 760px) { .stop__info, [data-layout="foco"] .stop__info { gap: 26px; } .stop__info > .tile--where, .stop__info > .stop__ident { padding-top: 24px; } } /* ===== capa: subir ===== */ [data-layout="foco"] .stop__card { justify-content: center; padding-top: 0; } /* ===== capa: barras ===== */ /* Dock y regla más grandes */ :root { --tap-min: 52px; --tap-primary: 66px; --key-travel: 5px; } .dock { padding-top: 10px; gap: 10px; } .dock__row { gap: 8px; } .action { font-size: 15px; gap: 8px; } .action .ico { width: 19px; height: 19px; } .action--icon .ico { width: 24px; height: 24px; } .action--primary { font-size: 18px; } .action__qty { font-size: 15px; padding: 2px 7px; } .route { padding: calc(var(--safe-t) + 10px) var(--space-3) 10px; } /* la muesca se esquiva aquí */ .route__ruler { height: 44px; } /* 44 = mínimo para un dedo */ .route__ticks { height: 26px; } .route__tick { width: 7px; height: 13px; } .route__tick.is-current { height: 26px; } .route__sec-label { font-size: 11px; } .route__count b { font-size: 19px; } .route__count span { font-size: 10px; } .route__menu { width: 44px; height: 44px; } .route__menu .ico { width: 22px; height: 22px; } .filter-btn { height: 44px; font-size: 14px; padding: 0 10px 0 14px; } .filter-btn b { min-width: 24px; height: 24px; font-size: 11px; } .filter-btn .ico { width: 16px; height: 16px; } @container app (min-width: 760px) { .app { --tap-min: 56px; --tap-primary: 68px; } } /* ===== capa: foto-grande ===== */ [data-layout="foco"] .stop__info { flex: 0 1 auto; min-height: 0; } [data-layout="foco"] .stop__info > .stop__photo { flex: 0 1 auto; height: clamp(200px, 40dvh, 360px); min-height: 160px; } /* ===== capa: dock-limpio ===== */ /* Dock transparente: mismo fondo que la pantalla */ .dock { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: 0 !important; } .dock::before { display: none; } /* ===== capa: estado-reactivo ===== */ /* ESTADO REACTIVO del chip · cada valor con su color y su animación */ :root, [data-tema="noche"] { --signal-waiting: #f7cb46; } [data-tema="dia"] { --signal-waiting: #7d5a00; } .stop__section::before { display: none; } @keyframes sig-glow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sig) 20%, transparent), 0 0 16px color-mix(in srgb, var(--sig) 45%, transparent); } } @keyframes sig-burst { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sig) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } } @keyframes sig-shake { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } } @keyframes sig-turn { 0%, 60%, 100% { transform: rotate(0); } 80% { transform: rotate(90deg); } } @keyframes sig-sheen { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, 0 0; } } .stop__head .signal { transition: color var(--dur-state), border-color var(--dur-state), background-color var(--dur-state); } /* Pendiente: amarillo, respira (esperando al operario) */ .stop__head .signal[data-signal="pending"] { --sig: var(--signal-waiting); color: var(--sig); border-color: var(--sig); background: color-mix(in srgb, var(--sig) 14%, transparent); animation: chip-in 380ms var(--ease-physical) both, sig-glow 2s ease-in-out 400ms infinite; } /* Hecha: estallido verde una vez */ .stop__head .signal[data-signal="picked"] { animation: chip-in 380ms var(--ease-physical) both, sig-burst 700ms var(--ease-precise) 120ms; } /* No está: sacudida + alerta roja lenta */ .stop__head .signal[data-signal="notfound"] { animation: chip-in 380ms var(--ease-physical) both, sig-shake 420ms var(--ease-precise) 200ms, sig-glow 1.6s ease-in-out 700ms infinite; } /* Stock insuficiente: pulso naranja */ .stop__head .signal[data-signal="insufficient"] { animation: chip-in 380ms var(--ease-physical) both, sig-glow 1.8s ease-in-out 400ms infinite; } /* Sin ubicación: el rombo gira buscando */ .stop__head .signal[data-signal="unlocated"] { animation: chip-in 380ms var(--ease-physical) both, sig-glow 2.2s ease-in-out 400ms infinite; } .stop__head .signal[data-signal="unlocated"] .ico { animation: sig-turn 2.4s var(--ease-physical) infinite; } /* Ya descontada: barrido de luz (lo hizo el sistema) */ .stop__head .signal[data-signal="discounted"] { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%) 150% 0 / 250% 100% no-repeat, var(--sig); animation: chip-in 380ms var(--ease-physical) both, sig-sheen 2.6s linear 400ms infinite; } @media (prefers-reduced-motion: reduce) { .stop__head .signal, .stop__head .signal .ico { animation: none !important; } } /* ===== capa: suave ===== */ /* ========================================================================= SUAVE · curvas y tiempos más suaves + ambiente de estado integrado al lienzo ========================================================================= */ @property --sig { syntax: ""; inherits: true; initial-value: transparent; } :root { --ease-precise: cubic-bezier(.22, 1, .36, 1); /* salida exponencial: arranca decidido, aterriza lento */ --ease-physical: cubic-bezier(.34, 1.28, .64, 1); /* rebote corto y amortiguado */ --ease-breath: cubic-bezier(.45, 0, .55, 1); /* seno: para pulsos continuos */ --dur-press: 140ms; --dur-state: 480ms; --dur-sheet: 520ms; --dur-ambient: 900ms; } /* El color de estado se interpola: aura, chip, bordes y ticks cambian en fundido, no de golpe */ .stop, .toast, .route__tick, .rail-row, .route-row { transition: --sig var(--dur-ambient) var(--ease-precise); } /* Ambiente: el color entra desde los bordes del lienzo y tiñe la retícula; no es una capa encima */ .stop__aura { position: fixed; inset: 0; height: auto; z-index: -1; filter: none; opacity: 1; background: radial-gradient(130% 55% at 50% -8%, color-mix(in srgb, var(--sig) 20%, transparent), transparent 72%), radial-gradient(120% 45% at 50% 108%, color-mix(in srgb, var(--sig) 12%, transparent), transparent 70%); transition: opacity var(--dur-ambient) var(--ease-precise); animation: ambient-in var(--dur-ambient) var(--ease-precise) both; } .stop__aura::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sig) 70%, transparent) 1px, transparent 1.6px) 0 0 / 24px 24px; -webkit-mask: radial-gradient(120% 50% at 50% -5%, #000, transparent 70%); mask: radial-gradient(120% 50% at 50% -5%, #000, transparent 70%); opacity: .55; } [data-tema="dia"] .stop__aura { mix-blend-mode: multiply; } .stop[data-signal="pending"] > .stop__aura { opacity: 0; } .stop[data-signal="unlocated"] > .stop__aura, .stop[data-signal="insufficient"] > .stop__aura, .stop[data-signal="notfound"] > .stop__aura { animation: ambient-in var(--dur-ambient) var(--ease-precise) both, ambient-breathe 4.8s var(--ease-breath) var(--dur-ambient) infinite; } .stop.is-confirmed > .stop__aura { animation: ambient-flash 1.1s var(--ease-precise); } @keyframes ambient-in { from { opacity: 0; } } @keyframes ambient-breathe { 50% { opacity: .7; } } @keyframes ambient-flash { 0% { opacity: 0; } 35% { opacity: 1; filter: brightness(1.5) saturate(1.2); } } /* Transiciones de parada: menos distancia, más duración, desenfoque leve */ .stop.enter-next, .stop.enter-prev { animation: none !important; } .stop.enter-next .stop__card { animation: enter-next var(--dur-state) var(--ease-precise); } .stop.enter-prev .stop__card { animation: enter-prev var(--dur-state) var(--ease-precise); } @keyframes enter-next { from { transform: translateX(6%); opacity: 0; filter: blur(4px); } } @keyframes enter-prev { from { transform: translateX(-6%); opacity: 0; filter: blur(4px); } } @keyframes rise { from { transform: translateY(8px); opacity: 0; } } .stop.is-arriving .stop__card > *, .stop.is-arriving .stop__info > * { animation: rise 560ms var(--ease-precise) both; } .stop.is-arriving .stop__info > :nth-child(2) { animation-delay: 60ms; } .stop.is-arriving .stop__info > :nth-child(3) { animation-delay: 120ms; } .stop.is-arriving .stop__info > :nth-child(n+4) { animation-delay: 180ms; } @keyframes chip-in { from { transform: scale(.86); opacity: 0; } } @keyframes sig-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig) 16%, transparent), 0 0 18px color-mix(in srgb, var(--sig) 38%, transparent); } } @keyframes sig-shake { 20% { transform: translateX(-2.5px); } 45% { transform: translateX(2px); } 70% { transform: translateX(-1px); } } @keyframes reject { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } } @keyframes settle { 40% { transform: scale(.99); } } @keyframes stamp { from { transform: scale(.5); opacity: .7; } to { transform: scale(2.2); opacity: 0; } } .stop.is-confirmed .stop__card::after { animation-duration: 900ms; border-width: 2px; } .stop__head .signal[data-signal="pending"], .stop__head .signal[data-signal="insufficient"], .stop__head .signal[data-signal="unlocated"], .stop__head .signal[data-signal="notfound"] { animation-timing-function: var(--ease-physical), var(--ease-breath); } .qty--many { transition: transform var(--dur-state) var(--ease-physical); } @keyframes qty-knock { 35% { transform: scale(1.08); } 70% { transform: scale(.99); } } /* Pulsaciones: todo baja y vuelve con la misma curva */ .action, .filter-btn, .chip, .suggest__item, .rail-row, .route-row, .stepper button, .dir-opt, .photo-tab, .photo-zoom, .route__menu { transition: transform var(--dur-press) var(--ease-precise), box-shadow var(--dur-press) var(--ease-precise), background-color var(--dur-state) var(--ease-precise), color var(--dur-state) var(--ease-precise), opacity var(--dur-state) var(--ease-precise); } .photo-tab:active, .photo-zoom:active, .route__menu:active { transform: scale(.94); } .action__fill { transition: none; } @keyframes latch { from { transform: scaleX(0); } to { transform: scaleX(1); } } .action--primary.is-latching .action__fill { animation-duration: 420ms; animation-timing-function: var(--ease-precise); } .toast { transition: transform var(--dur-state) var(--ease-physical), opacity 320ms var(--ease-precise); } .scrim-layer { transition: opacity var(--dur-sheet) var(--ease-precise); } .route__tick { transition: height var(--dur-state) var(--ease-physical), background-color var(--dur-ambient) var(--ease-precise), border-color var(--dur-ambient) var(--ease-precise); } @keyframes tick-glow { 0%, 100% { box-shadow: 0 0 0 3px var(--canvas), 0 0 8px 1px color-mix(in srgb, var(--sig) 40%, transparent); } 50% { box-shadow: 0 0 0 3px var(--canvas), 0 0 18px 3px color-mix(in srgb, var(--sig) 65%, transparent); } } .route__tick.is-current:not(.is-pop) { animation-timing-function: var(--ease-breath); animation-duration: 2.6s; } @media (prefers-reduced-motion: reduce) { .stop, .toast, .route__tick { transition: none; } .stop__aura { animation: none !important; } } /* ===== capa: regla-limpia ===== */ /* Regla superior integrada: sin panel, mismo lienzo */ .route { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: 0 !important; } .route::after { display: none; } .route__menu { border-color: transparent; } /* ########################################################################### CAPAS DE PRODUCCIÓN · e-inventory (2026-09-29) ########################################################################### Todo lo que va de aquí al final es lo que e-inventory añade sobre el prototipo de la parte de arriba. Está agrupado POR TEMA, no por orden de parche, y cada bloque dice qué resuelve. Cómo leer la cascada de aquí abajo: · Entre bloques no hay dos reglas que empaten en especificidad sobre la misma propiedad, salvo las que se señalan a propósito en el sitio. · `.pcrow > *` (bloque 4) reparte position/z-index a los cuatro hijos de la tarjeta; por eso ninguno de ellos declara `position`. · Los comentarios que explican el PORQUÉ de un arreglo (el transform de .device, el minmax(0,1fr) de las filas de la hoja, el relleno explícito de .sheet__body) son memoria de fallos reales encontrados por el arnés. No se borran. ########################################################################### */ /* =========================================================================== 1 · PRODUCCIÓN: fuera el marco de vitrina del prototipo El prototipo dibujaba un teléfono con mandos alrededor. En producción la app va borde a borde y en pantalla grande se centra (bloque 4). La container query de .device se conserva porque la usan las capas de arriba. =========================================================================== */ .showcase, .view-toggle, .showcase__dirs { display: none !important; } body { display: block; padding: 0; margin: 0; gap: 0; background: radial-gradient(120% 50% at 50% -10%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 60%), radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1.5px) 0 0 / 24px 24px, var(--canvas); } .device { width: 100%; max-width: none; min-height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; overflow: visible; container: app / inline-size; } /* =========================================================================== 2 · AMBIENTE DE ESTADO EN EL LIENZO (móvil) El color del estado no se pinta dentro del contenido: tiñe TODO el lienzo desde , así pasa por detrás de la regla superior y del dock sin cortes. Las barras quedan transparentes y el tinte se desvanece con una máscara en los bordes para que no parezca sobrepuesto. En PC se apaga (bloque 4). =========================================================================== */ html[data-signal] { --sig: var(--signal-pending); } html[data-signal="picked"] { --sig: var(--signal-picked); } html[data-signal="notfound"] { --sig: var(--signal-notfound); } html[data-signal="unlocated"] { --sig: var(--signal-unlocated); } html[data-signal="insufficient"] { --sig: var(--signal-insufficient); } html[data-signal="discounted"] { --sig: var(--signal-discounted); } html[data-signal="pending"] { --ambient-on: 0; } html[data-signal="picked"], html[data-signal="notfound"], html[data-signal="unlocated"], html[data-signal="insufficient"], html[data-signal="discounted"] { --ambient-on: 1; } /* el ambiente de la parada deja de pintarse dentro del contenido */ .stop__aura { display: none !important; } /* una sola capa de ambiente, fija al lienzo, por debajo de todo */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--ambient-on, 0); transition: opacity var(--dur-ambient, 900ms) var(--ease-precise), background-color var(--dur-ambient, 900ms) var(--ease-precise); background: radial-gradient(150% 62% at 50% -12%, color-mix(in srgb, var(--sig) 26%, transparent), transparent 74%), radial-gradient(130% 50% at 50% 112%, color-mix(in srgb, var(--sig) 16%, transparent), transparent 72%), radial-gradient(70% 40% at -10% 40%, color-mix(in srgb, var(--sig) 12%, transparent), transparent 70%), radial-gradient(70% 40% at 110% 60%, color-mix(in srgb, var(--sig) 12%, transparent), transparent 70%); -webkit-mask: linear-gradient(#000 0 0); animation: ambient-in var(--dur-ambient, 900ms) var(--ease-precise) both; } html[data-signal="unlocated"] body::after, html[data-signal="insufficient"] body::after, html[data-signal="notfound"] body::after { animation: ambient-in var(--dur-ambient,900ms) var(--ease-precise) both, ambient-breathe 4.8s var(--ease-breath) var(--dur-ambient,900ms) infinite; } [data-tema="dia"] body::after { mix-blend-mode: multiply; } /* la retícula también se tiñe, y se apaga hacia abajo para que no haga borde */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: calc(var(--ambient-on, 0) * .5); transition: opacity var(--dur-ambient, 900ms) var(--ease-precise); background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sig) 65%, transparent) 1px, transparent 1.6px) 0 0 / 24px 24px; -webkit-mask: radial-gradient(130% 60% at 50% -8%, #000, transparent 72%); mask: radial-gradient(130% 60% at 50% -8%, #000, transparent 72%); } /* el contenido va por encima del ambiente; las barras no lo cortan */ .device, .app { position: relative; z-index: 1; background: none !important; } /* .route ya recibió este mismo juego de !important en la capa `regla-limpia`; aquí lo que hace falta de verdad es el dock. */ .route, .dock { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* legibilidad bajo la regla y sobre el dock: un velo del propio lienzo, sin borde */ .route::before, .dock::after { content: ""; position: absolute; inset: -1px 0 auto; height: calc(100% + 18px); z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--canvas) 38%, color-mix(in srgb, var(--canvas) 55%, transparent) 72%, transparent); } .dock::after { inset: auto 0 -1px; background: linear-gradient(0deg, var(--canvas) 42%, color-mix(in srgb, var(--canvas) 60%, transparent) 76%, transparent); } /* =========================================================================== 3 · AVISO DE ESTADO CON MARCO DE ENERGÍA (.stop__notice, móvil) El cuadro de estado (ya descontada, sin ubicación, stock insuficiente) lleva un flujo de energía recorriendo el marco, y el vidrio de dentro refleja menos: sin filete de reflejo arriba, menos saturación, más mate. --flow-angle tiene que ser @property para poder animarse; lo reutiliza el marco de las tarjetas de PC (bloque 7). =========================================================================== */ @property --flow-angle { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes flow-spin { to { --flow-angle: 360deg; } } @keyframes flow-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } .stop__notice { /* vidrio mate + halo tenue del color del estado, por detrás del vidrio */ background: var(--glass); -webkit-backdrop-filter: blur(calc(var(--blur-glass) + 8px)) saturate(1.15); backdrop-filter: blur(calc(var(--blur-glass) + 8px)) saturate(1.15); border-color: transparent; box-shadow: 0 14px 30px -20px var(--lg-shade), 0 0 26px -14px color-mix(in srgb, var(--sig) 60%, transparent); isolation: isolate; } .stop__notice b { color: var(--sig); } /* marco de energía: dos capas cónicas girando a distinto ritmo */ .stop__notice::before, .stop__notice::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1.6px; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .stop__notice::before { background: conic-gradient(from var(--flow-angle) at 50% 50%, transparent 0%, color-mix(in srgb, var(--sig) 85%, transparent) 8%, var(--sig) 14%, color-mix(in srgb, var(--sig) 30%, transparent) 26%, transparent 40%, color-mix(in srgb, var(--sig) 55%, transparent) 62%, transparent 78%, color-mix(in srgb, var(--sig) 85%, transparent) 96%, transparent 100%); animation: flow-spin 4.2s linear infinite; } .stop__notice::after { background: conic-gradient(from calc(var(--flow-angle) * -1 - 120deg) at 50% 50%, transparent 0%, color-mix(in srgb, var(--ink) 40%, transparent) 10%, transparent 30%, color-mix(in srgb, var(--sig) 45%, transparent) 55%, transparent 72%); animation: flow-spin 7.5s linear infinite reverse, flow-breathe 3.6s var(--ease-breath, ease-in-out) infinite; opacity: .7; } @media (prefers-reduced-motion: reduce) { .stop__notice::before, .stop__notice::after { animation: none; } .stop__notice::before { background: linear-gradient(120deg, var(--sig), transparent 60%, color-mix(in srgb, var(--sig) 50%, transparent)); } } /* =========================================================================== 4 · VISTA PC · ESTRUCTURA A partir de 900 px no hay visor de una sola parada: se ven TODAS en fila y cada SKU lleva sus propios botones (.pclist / .pcrow). Tres cosas se arreglan aquí de una vez: · scroll: en PC el alto lo manda el contenido, no la ventana, y .stage deja de ser una caja con scroll propio (de ahí los !important: pisan al prototipo, que la dejaba a alto fijo). · ancho: la tarjeta es una banda horizontal, no un cuadro alto. · ambiente: en PC el lienzo se queda en su color; el estado se lee en el chip, el marco y el aviso de cada tarjeta. =========================================================================== */ /* El corte de la vista de PC no es solo el ancho: un teléfono grande tumbado mide 932 px y entraba aquí, así que mostraba la lista de escritorio y se llevaba la barra de acciones (`.dock { display: none }`), dejando al pickeador sin Pickear ni No está hasta girar el móvil. Con (pointer: fine) manda el aparato y no el ancho. `isPC()` en pickeo.js usa esta MISMA condición: si se toca una, se toca la otra. */ @media (min-width: 900px) and (pointer: fine) { /* --- scroll y lienzo --- */ html, body { height: auto; overflow-y: auto; } body::before, body::after { display: none !important; } .device, .app { min-height: 100dvh; height: auto; } .device { margin-inline: auto; box-shadow: 0 0 0 1px var(--line); } [data-layout="foco"] .stage, .stage { height: auto !important; max-height: none !important; flex: 1 1 auto !important; overflow: visible !important; display: block !important; padding: var(--space-6) var(--space-8) var(--space-12) !important; } .route { position: sticky; top: 0; } .dock { display: none !important; } /* --- la lista y sus separadores de sección --- */ .pclist { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: none; margin: 0 auto; } .pclist__sec { display: flex; align-items: baseline; gap: 12px; margin: 28px 4px 6px; font: 700 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .pclist__sec b { color: var(--ink-2); font-size: 12px; letter-spacing: .14em; } .pclist__sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); } /* --- la tarjeta: una banda horizontal, texto · cantidad · fotos · botones --- El fondo y el desenfoque se anulan aquí porque el vidrio lo pinta el aro ::after del bloque 7, no la caja. */ .pcrow { display: grid; grid-template-columns: minmax(280px, 1.15fr) auto minmax(0, 1.7fr) auto; grid-template-areas: "body qty gal acts"; align-items: center; gap: 0 24px; padding: 18px 24px; min-height: 0; border-radius: var(--radius-md); border: 0; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; position: relative; isolation: isolate; transition: border-color var(--dur-state) var(--ease-precise), background-color var(--dur-state) var(--ease-precise), opacity var(--dur-state); animation: rise 420ms var(--ease-precise) both; } /* los cuatro hijos por encima del vidrio y del flujo del marco. Ojo: esto empata en especificidad con .pcrow__body/__qty/__gal/__acts, así que va ANTES que ellos y ninguno vuelve a declarar position. */ .pcrow > * { position: relative; z-index: 1; } .pcrow[data-signal="picked"] { opacity: .45; } .pcrow[data-signal="notfound"], .pcrow[data-signal="unlocated"], .pcrow[data-signal="insufficient"], .pcrow[data-signal="discounted"] { border-color: color-mix(in srgb, var(--sig) 45%, transparent); } .pcrow.is-confirmed { animation: settle var(--dur-state) var(--ease-physical); } .pcrow.is-rejected { animation: reject 380ms var(--ease-precise); } } /* pantalla muy ancha: la tarjeta respira un poco más */ @media (min-width: 1500px) { .pcrow { padding: 20px 28px; } } /* pantalla justa: menos relleno */ @media (min-width: 900px) and (pointer: fine) and (max-width: 1180px) { .pcrow { padding: 16px 18px; } } /* =========================================================================== 5 · VISTA PC · IDENTIDAD Y CANTIDAD DE LA TARJETA El SKU manda: sans pesada con el mismo barrido de luz blanca que en móvil (keyframes sku-light, definido en la capa móvil). El título se recorta con puntos suspensivos en una línea; el aviso de estado toma el color --sig. La cantidad se separa de su celda con top/right: hereda position:relative de `.pcrow > *` (bloque 4), así que son desplazamientos relativos. =========================================================================== */ @media (min-width: 900px) and (pointer: fine) { .pcrow__top { display: flex; align-items: center; gap: 14px; grid-area: auto; margin: 0 0 8px; } .pcrow__body { grid-area: body; display: block; min-width: 0; } .pcrow__bin { font: 700 19px/1 var(--font-mono); letter-spacing: .08em; color: var(--ink); } /* Ciclo 4: la celda del bin anuncia la parada siguiente de la MISMA linea. Se trunca en vez de empujar al chip de senal fuera de la fila. */ .pcrow__next { font: 600 13px/1 var(--font-mono); letter-spacing: .06em; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pcrow__sku { margin: 0; font: 800 clamp(20px, 1.5vw, 26px)/1.15 var(--font-sans); letter-spacing: -.02em; overflow-wrap: anywhere; background: linear-gradient(100deg, var(--sku-base) 0%, var(--sku-base) 38%, var(--sku-glow) 50%, var(--sku-base) 62%, var(--sku-base) 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sku-glow) 22%, transparent)); animation: sku-light 3.6s var(--ease-precise) infinite; } .pcrow__title { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pcrow .pcrow__note { margin: 6px 0 0; font: 600 12px/1.35 var(--font-mono); color: var(--sig); position: relative; } .pcrow__qty { grid-area: qty; display: flex; align-items: baseline; gap: 2px; padding: 0 8px; color: var(--ink); top: 26px; right: 28px; } .pcrow__qty span { font: 600 15px/1 var(--font-mono); color: var(--ink-3); } .pcrow__qty b { font: 700 34px/1 var(--font-mono); } /* El progreso ocupa el sitio de la cantidad: «2/3» en vez de «x3». Mas estrecho porque lleva dos numeros y la barra. */ .pcrow__qty b.pcrow__prog { font-size: 26px; letter-spacing: -.02em; } @media (prefers-reduced-motion: reduce) { .pcrow__sku { animation: none; background: none; color: var(--ink); -webkit-text-fill-color: var(--ink); filter: none; } } } @media (min-width: 1500px) { .pcrow__sku { font-size: 28px; } } /* pantalla justa: la cantidad se pega más a la esquina. Va aquí y no arriba porque empata en especificidad con la regla de .pcrow__qty de este bloque. */ @media (min-width: 900px) and (pointer: fine) and (max-width: 1180px) { .pcrow__qty { top: 22px; right: 22px; } } /* =========================================================================== 6 · VISTA PC · FOTOS Las tres fotos en línea, cada una en su propio marco de vidrio y con la misma lupa de zoom que en el móvil. Sin fotos, un cuadro punteado. El tamaño lo da la rejilla de la tarjeta, no un ancho fijo. =========================================================================== */ @media (min-width: 900px) and (pointer: fine) { .pcrow__gal { grid-area: gal; align-self: center; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 12px; max-width: none; } .pcrow__gal figure { margin: 0; position: relative; /* ancla del figcaption y de la lupa */ border-radius: var(--radius-md); padding: 6px; background: transparent; box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--lg-rim-hi); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); transition: box-shadow var(--dur-press) var(--ease-precise), transform var(--dur-press) var(--ease-precise); } /* Con el dedo no existe «quitar el cursor»: tras un toque el navegador puede dejar :hover aplicado hasta que se toque en otro sitio, y el efecto se queda encendido en una fila que el operario ya no está mirando. Los efectos de cursor viven detrás de (hover: hover), que en táctil no se cumple. */ @media (hover: hover) { .pcrow__gal figure:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 var(--lg-rim-hi), 0 14px 28px -20px var(--lg-shade); } } .pcrow__gal figure:first-child { grid-column: auto; } .pcrow__gal img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 0; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 60%, transparent); cursor: zoom-in; display: block; transition: transform var(--dur-press) var(--ease-precise), border-color var(--dur-press); } @media (hover: hover) { /* ídem: efecto de cursor */ .pcrow__gal img:hover { transform: scale(1.03); border-color: var(--line-strong); } } .pcrow__gal figcaption { position: absolute; left: 12px; bottom: 12px; padding: 3px 6px; border-radius: 5px; background: color-mix(in srgb, var(--canvas) 78%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 8px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } /* lupa, igual que en el móvil */ .pcrow__gal figure::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 26px; height: 26px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity var(--dur-press); background: color-mix(in srgb, var(--canvas) 70%, transparent) url("data:image/svg+xml;utf8,") center / 15px no-repeat; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line); } @media (hover: hover) { /* ídem: efecto de cursor */ .pcrow__gal figure:hover::after { opacity: 1; } } /* sin fotos: el hueco mantiene el sitio de la rejilla. Lleva también la clase .pcrow__gal, así que el display/gap/columnas los pone la regla de arriba; aquí solo va lo propio del cuadro vacío. */ .pcrow__gal--empty { grid-area: gal; align-self: center; width: 132px; height: 96px; min-height: 0; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px dashed var(--line); font: 700 9px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink-3); } } @media (min-width: 900px) and (pointer: fine) and (max-width: 1240px) { .pcrow__gal--empty { width: 108px; } } /* =========================================================================== 7 · VISTA PC · MARCO DE LA TARJETA: VIDRIO + FLUJO DE ENERGÍA El interior de la tarjeta es transparente (bloque 4) y todo el material está en el borde, en dos pseudoelementos que se superponen: · ::after el aro de vidrio. Desenfoca lo que pasa por detrás y lleva el reflejo. Su máscara radial lo apaga hacia el centro, para que no quede el filo gris hacia dentro que salía cuando el aro era una franja recortada. · ::before el flujo de energía en el color del estado, por encima del aro. Gira despacio cuando la orden está pendiente, se para cuando ya está pickeada y se acelera al pasar el cursor. Los tonos del reflejo van en tokens propios (--pc-glint-*) con alfa real por tema: color-mix() clampa el porcentaje a 100 %, así que --lg-sheen (alfa .09 en noche) no se podía "subir" multiplicando por ahí. =========================================================================== */ :root, [data-tema="noche"] { --pc-glint-1: rgba(255,255,255,.52); --pc-glint-2: rgba(255,255,255,.22); --pc-glint-3: rgba(255,255,255,.34); --pc-glint-edge: rgba(255,255,255,.75); } [data-tema="dia"] { --pc-glint-1: rgba(255,255,255,.95); --pc-glint-2: rgba(255,255,255,.55); --pc-glint-3: rgba(255,255,255,.7); --pc-glint-edge: rgba(255,255,255,1); } @media (min-width: 900px) and (pointer: fine) { /* --- aro de vidrio --- */ .pcrow::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; padding: 0; pointer-events: none; -webkit-backdrop-filter: blur(46px) saturate(2.2) brightness(1.12); backdrop-filter: blur(46px) saturate(2.2) brightness(1.12); background: /* reflejo principal: luz diagonal desde la esquina superior izquierda */ linear-gradient(145deg, var(--pc-glint-edge) 0%, var(--pc-glint-1) 7%, var(--pc-glint-2) 16%, transparent 32%, transparent 60%, var(--pc-glint-2) 80%, var(--pc-glint-1) 92%, var(--pc-glint-edge) 100%), /* reflejo rasante desde la derecha */ linear-gradient(255deg, var(--pc-glint-3) 0%, transparent 30%), /* brillo especular corto en el canto superior */ linear-gradient(180deg, var(--pc-glint-2) 0%, transparent 14%); background-repeat: no-repeat; background-size: 165% 165%, 165% 165%, 100% 100%; background-position: 0% 0%, 100% 0%, 0 0; /* el aro existe solo cerca del filo y se apaga hacia el centro */ -webkit-mask-image: radial-gradient(125% 125% at 50% 50%, transparent 46%, rgba(0,0,0,.35) 66%, #000 88%); mask-image: radial-gradient(125% 125% at 50% 50%, transparent 46%, rgba(0,0,0,.35) 66%, #000 88%); -webkit-mask-composite: source-over; mask-composite: add; box-shadow: 0 26px 52px -30px var(--lg-shade); animation: glass-glint 9s var(--ease-breath, ease-in-out) infinite; } @media (hover: hover) { /* ídem: efecto de cursor */ .pcrow:hover::after { -webkit-backdrop-filter: blur(54px) saturate(2.4) brightness(1.16); backdrop-filter: blur(54px) saturate(2.4) brightness(1.16); } } /* el destello recorre el filo, muy lento */ @keyframes glass-glint { 0%, 100% { background-position: 0% 0%, 100% 0%, 0 0; } 50% { background-position: 22% 14%, 78% 6%, 0 0; } } /* canto luminoso de 1 px: el brillo del borde del cristal, sin gris */ .pcrow { box-shadow: inset 0 1px 0 var(--pc-glint-edge), inset 0 -1px 0 color-mix(in srgb, var(--pc-glint-1) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--lg-rim-hi) 45%, transparent); } /* --- flujo de energía del marco, por encima del aro --- */ .pcrow::before { content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from var(--flow-angle) at 50% 50%, transparent 0%, color-mix(in srgb, var(--sig) 70%, transparent) 9%, var(--sig) 15%, color-mix(in srgb, var(--sig) 22%, transparent) 28%, transparent 44%, color-mix(in srgb, var(--ink) 28%, transparent) 60%, transparent 74%, color-mix(in srgb, var(--sig) 70%, transparent) 95%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 1; animation: flow-spin 6.5s linear infinite; } .pcrow[data-signal="pending"]::before { opacity: .45; animation-duration: 11s; } .pcrow[data-signal="picked"]::before { opacity: .3; animation-play-state: paused; } @media (hover: hover) { /* ídem: efecto de cursor */ .pcrow:hover::before { opacity: 1; animation-duration: 3.4s; } } @media (prefers-reduced-motion: reduce) { .pcrow::after { animation: none; } .pcrow::before { animation: none; background: linear-gradient(120deg, var(--sig), transparent 55%, color-mix(in srgb, var(--sig) 45%, transparent)); } } } /* =========================================================================== 8 · VISTA PC · BOTONES DE ACCIÓN Sin borde ni fondo: las tres acciones van apiladas y pegadas, y lo que las divide es un separador de liquid glass de 3 px que se enciende con el cursor (el de arriba del botón y el del botón siguiente). La jerarquía la da la tipografía y el color, no un marco. Al pasar el cursor la luz recorre las LETRAS, con el mismo lenguaje que el SKU: degradado + background-clip:text. De ahí los !important, que tienen que pisar el `background: transparent !important` del reset de aquí arriba. Inactivo no se difumina: se apaga el texto y el separador se mantiene. =========================================================================== */ @media (min-width: 900px) and (pointer: fine) { .pcrow__acts { grid-area: acts; align-self: center; display: flex; flex-direction: column; gap: 0; min-width: 188px; } /* reset: ni borde, ni fondo, ni sombra, ni esquinas */ .pcrow__acts .action, .pcrow__acts .action--primary, .pcrow__acts .action--alt { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 !important; overflow: hidden; position: relative; isolation: isolate; -webkit-backdrop-filter: none; backdrop-filter: none; transition: color var(--dur-press, 140ms) var(--ease-precise, ease-out); } /* tamaño y jerarquía tipográfica. Va después del reset y antes de las variantes, porque .action y .action--primary empatan en especificidad. */ .pcrow__acts .action { height: 52px; width: 100%; min-width: 0; padding: 0 14px; font-size: 14.5px; font-weight: 650; letter-spacing: .01em; color: var(--ink-2) !important; --act-base: var(--ink-2); --act-glow: var(--sku-glow, #fff); } .pcrow__acts .action--primary { height: 62px; min-width: 0; font-size: 16.5px; font-weight: 800; color: var(--signal-picked) !important; --act-base: var(--signal-picked); } .pcrow__acts .action:active { transform: translateY(1px); } /* --- separador de liquid glass entre acciones --- */ .pcrow__acts .action::before { content: ""; position: absolute; top: 0; left: 4px; right: 4px; bottom: auto; height: 3px; padding: 0; /* la primaria hereda 1.5px del aro mesh de .action--primary::before */ border-radius: 999px; z-index: 2; pointer-events: none; -webkit-mask: none; mask: none; animation: none !important; -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.12); backdrop-filter: blur(12px) saturate(1.8) brightness(1.12); background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 16%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.45) 84%, transparent 100%), linear-gradient(180deg, rgba(255,255,255,.3), transparent 70%); background-repeat: no-repeat; background-size: 100% 1px, 100% 100%; background-position: 50% 50%, 0 0; opacity: .5; box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 var(--lg-rim-hi), 0 10px 22px -18px var(--lg-shade); transition: opacity var(--dur-state, 220ms) var(--ease-precise, ease-out), height var(--dur-state, 220ms) var(--ease-precise, ease-out), box-shadow var(--dur-state, 220ms) var(--ease-precise, ease-out); } /* la primaria es la primera: no lleva separador encima */ .pcrow__acts .action:first-child::before { display: none; } .pcrow__acts .action--primary::before { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--signal-picked) 75%, transparent), inset 0 1px 0 var(--lg-rim-hi), 0 12px 26px -18px var(--lg-shade); } .pcrow__acts .action--alt::before { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent), inset 0 1px 0 var(--lg-rim-hi); } /* se enciende el de arriba del botón y el del botón siguiente */ @media (hover: hover) { /* ídem: efecto de cursor */ .pcrow__acts .action:hover::before, .pcrow__acts .action:hover + .action::before { opacity: 1; height: 5px; box-shadow: 0 0 14px -2px rgba(255,255,255,.55); } } /* el barrido de luz ya no cruza el área del botón: solo las letras */ .pcrow__acts .action::after { display: none !important; } /* --- la luz recorre las letras al pasar el cursor --- */ @media (hover: hover) { /* ídem: efecto de cursor */ .pcrow__acts .action:hover:not([disabled]) { background: linear-gradient(100deg, var(--act-base) 0%, var(--act-base) 38%, var(--act-glow) 50%, var(--act-base) 62%, var(--act-base) 100%) 0 0 / 250% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--act-glow) 28%, transparent)); animation: sku-light 1.5s linear infinite; } } /* --- inactivo: texto apagado, sin opacidad ni filtro --- */ .pcrow__acts .action[disabled], .pcrow__acts .action:disabled { pointer-events: none; opacity: 1 !important; filter: none !important; color: color-mix(in srgb, var(--ink) 34%, transparent) !important; } .pcrow__acts .action--primary[disabled] { color: color-mix(in srgb, var(--signal-picked) 45%, transparent) !important; } @media (prefers-reduced-motion: reduce) and (hover: hover) { /* ídem: efecto de cursor */ .pcrow__acts .action:hover:not([disabled]) { animation: none; background: none !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink); filter: none; } } } /* pantalla mínima: las tres acciones se reparten el hueco */ @media (min-width: 900px) and (pointer: fine) and (max-width: 1080px) { .pcrow__acts .action { flex: 1; } } /* =========================================================================== 9 · VISTA PC · REGLA SUPERIOR Y CONTADOR La regla de ruta es el mapa del recorrido: en PC va grande y legible, con los ticks anchos y el actual bien marcado. El contador de progreso ocupa la esquina derecha, con un brillo que lo recorre. =========================================================================== */ @media (min-width: 900px) and (pointer: fine) { .route { padding: 16px var(--space-8); gap: var(--space-6); } .route__ruler { height: 62px; gap: 20px; align-items: flex-end; } .route__sec { gap: 8px; } .route__sec-label { font-size: 12px; letter-spacing: .18em; color: var(--ink-2); } .route__ticks { height: 40px; gap: 7px; } .route__tick { width: 14px; height: 22px; border-radius: 4px; border-width: 2px; } .route__tick[data-signal="unlocated"], .route__tick[data-signal="insufficient"], .route__tick[data-signal="discounted"] { border-width: 3px; } .route__tick.is-current { height: 40px; border-width: 3px; box-shadow: 0 0 0 4px var(--canvas), 0 0 20px 3px color-mix(in srgb, var(--sig) 60%, transparent); } .route__menu { width: 52px; height: 52px; } .route__menu .ico { width: 24px; height: 24px; } .filter-btn { height: 52px; font-size: 14px; padding: 0 18px; } .route__count { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .route__count b { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: .95; background: linear-gradient(100deg, color-mix(in srgb, var(--ink) 55%, transparent), var(--ink) 45%, color-mix(in srgb, var(--ink) 55%, transparent)); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: count-sheen 4.2s linear infinite; } .route__count span { font-size: 11px; letter-spacing: .18em; font-weight: 700; color: var(--ink-2); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } @keyframes count-sheen { to { background-position: 220% center; } } @media (prefers-reduced-motion: reduce) { .route__count b { animation: none; color: var(--ink); background: none; -webkit-text-fill-color: currentColor; } } } /* =========================================================================== 10 · HOJAS EN PC En PC la hoja dejaba de tener sentido: era una bottom sheet de teléfono, así que subía desde el borde inferior de la pantalla, muy lejos del botón que la abrió (se "iba al final de la lista"). Aquí es una tarjeta centrada que aparece en el sitio, con UNA sola animación compuesta en vez del escalonado de sus hijos, que era lo que producía el tirón inicial. Y entraba a tirones por otra razón: detrás hay ~20 tarjetas con dos capas de backdrop-filter cada una, más el scrim que desenfoca toda la ventana. Mientras una hoja está abierta se apagan esos desenfoques y se pausan las animaciones de las tarjetas: nadie las ve tras el scrim y el compositor queda libre para animar la hoja. =========================================================================== */ @media (min-width: 900px) and (pointer: fine) { .sheet[open] { display: grid; place-items: center; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; padding: 24px; pointer-events: none; /* el clic fuera lo recoge el scrim */ animation: none; /* fuera el deslizamiento desde abajo */ } .sheet__body { pointer-events: auto; width: min(560px, 100%); max-width: min(560px, 100%); max-height: min(80vh, 760px); padding: 26px 28px 28px; /* explicito: no existe --space-5 y una var sin resolver deja padding en 0 */ border-radius: var(--radius-lg); border-top: 0; box-shadow: 0 40px 80px -30px rgba(0,0,0,.65); animation: sheet-pop 240ms var(--ease-physical) both; } #zoomSheet .sheet__body { width: min(880px, 100%); max-width: min(880px, 100%); } .zoom-img { max-height: 70vh; } @keyframes sheet-pop { from { transform: translateY(14px) scale(.975); opacity: 0; } to { transform: none; opacity: 1; } } /* un solo movimiento: sin escalonado de los hijos (era el tirón) */ .sheet[open] .sheet__body > * { animation: none !important; } .sheet__grip { display: none; } .sheet[open] { will-change: transform; } .sheet[open] .sheet__body { will-change: transform, opacity; } /* el scrim se mantiene compuesto para que no se cree la capa al abrir */ .scrim-layer { will-change: opacity; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* con una hoja abierta, el compositor se libera de la lista de detrás */ body:has(dialog[open]) .pcrow::before, body:has(dialog[open]) .pcrow::after, body:has(dialog[open]) .pcrow__sku, body:has(dialog[open]) .pcrow__gal figure::after { animation-play-state: paused; } body:has(dialog[open]) .pcrow::after, body:has(dialog[open]) .pcrow__acts .action::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } @media (prefers-reduced-motion: reduce) { .sheet__body { animation: none; } } } /* =========================================================================== 11 · SALIDA DE LA FILA RESUELTA Y REASIGNACIÓN DE BIN Salida (pickeada o "no está" sin más bins): se desliza a la derecha, se apaga y colapsa su alto para que la lista cierre el hueco. Reasignación de bin: la etiqueta vieja sale por la izquierda, la nueva entra por la derecha y el marco pulsa en el color del estado. =========================================================================== */ .pcrow.is-leaving { overflow: hidden; pointer-events: none; transform: translateX(90px); opacity: 0; padding-block: 0; transition: height 420ms var(--ease-precise, cubic-bezier(.2,0,0,1)), margin-block 420ms var(--ease-precise, cubic-bezier(.2,0,0,1)), padding-block 420ms var(--ease-precise, cubic-bezier(.2,0,0,1)), transform 380ms var(--ease-physical, cubic-bezier(.2,.8,.2,1)), opacity 300ms linear; } .pcrow.is-leaving::before, .pcrow.is-leaving::after { animation: none !important; } .pcrow.is-rebinned { animation: rebin-pulse 1.2s var(--ease-precise, ease-out); } @keyframes rebin-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal-unlocated) 55%, transparent); } 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal-unlocated) 45%, transparent), 0 0 26px -6px color-mix(in srgb, var(--signal-unlocated) 60%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } } .pcrow__bin, .stop__bin { transition: transform 240ms var(--ease-precise, ease-out), opacity 240ms linear, color 240ms linear; } .pcrow__bin.bin-out, .stop__bin.bin-out { transform: translateX(-26px) skewX(-8deg); opacity: 0; } .pcrow__bin.bin-in, .stop__bin.bin-in { animation: bin-in 560ms var(--ease-physical, cubic-bezier(.2,.8,.2,1)); } @keyframes bin-in { 0% { transform: translateX(30px); opacity: 0; color: var(--signal-unlocated); } 55% { transform: none; opacity: 1; color: var(--signal-unlocated); } 100% { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pcrow.is-leaving, .pcrow.is-rebinned, .pcrow__bin.bin-out, .pcrow__bin.bin-in { animation: none !important; transition: none !important; } } /* =========================================================================== 12 · RECORRIDO TERMINADO: ESPERA DE ÓRDENES Solo COMPLETO y un pulso de radar que indica que la página sigue escuchando (la lista se refresca sola cada 2 minutos). Fuera los contadores de hechas / no está. =========================================================================== */ .done__grid { display: none !important; } .done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 52vh; } .waiting { position: relative; width: 132px; height: 132px; margin: 26px auto 10px; display: grid; place-items: center; } .waiting i { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 55%, transparent); animation: radar 3.2s var(--ease-precise, cubic-bezier(.2,0,0,1)) infinite; } .waiting i:nth-child(2) { animation-delay: 1.06s; } .waiting i:nth-child(3) { animation-delay: 2.12s; } .waiting b { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--ink) 70%, transparent); animation: waiting-beat 3.2s var(--ease-breath, ease-in-out) infinite; } @keyframes radar { 0% { width: 26px; height: 26px; opacity: 0; } 12% { opacity: .85; } 100% { width: 132px; height: 132px; opacity: 0; } } @keyframes waiting-beat { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.35); opacity: 1; } } .waiting__txt { margin: 0; color: var(--ink-2); font: 600 14px/1.3 var(--font-sans); letter-spacing: .02em; } @media (min-width: 900px) and (pointer: fine) { .waiting__txt { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .waiting i, .waiting b { animation: none; } .waiting i:first-child { width: 90px; height: 90px; opacity: .5; } } /* =========================================================================== 13 · NADA SE SALE DE SU CAJA Las filas de la hoja de ruta cortaban el título y empujaban la cantidad fuera del cuadro: una pista 1fr de grid tiene mínimo automático, así que no se encoge por debajo del ancho del texto. Con minmax(0,1fr) y min-width:0 el título se recorta con puntos suspensivos dentro del cuadro. =========================================================================== */ .route-row { grid-template-columns: 6px minmax(0, 1fr) auto; } .route-row > span:nth-of-type(2) { min-width: 0; } .route-row__bin, .route-row__title { max-width: 100%; } .route-row__bin { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-row { grid-template-columns: 5px auto minmax(0, 1fr) auto; } .rail-row__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .suggest__item, .dir-opt, .split, .chip { min-width: 0; } .dir-opt { grid-template-columns: 56px minmax(0, 1fr); } .dir-opt span, .dir-opt b { min-width: 0; overflow-wrap: anywhere; } /* nada dentro de una hoja puede desbordar su cuadro */ .sheet__body { overflow-x: hidden; } .sheet__body > * { max-width: 100%; } /* =========================================================================== 14 · EL ATRIBUTO hidden GANA `[hidden] { display: none }` vive en la hoja del navegador, así que CUALQUIER declaración de display del autor lo anula sin avisar. Inventario completo de los nodos que el código oculta por atributo, para que el bloque cubra todos los casos y no solo los que fueron apareciendo: · .dock (pickeo.js: dock.hidden = true) declara display:grid. No bastaba el atributo: con el recorrido terminado la barra de acciones seguía a la vista. · .move-row (#moveRow, pickeo.js:535 `hidden = st.qty < 2`) declara display:flex. En una línea de UNA unidad salía el selector «Unidades a mover» con su stepper, que no debe estar. · .bin-swap (#binSwap, pickeo.js:532 `hidden = unloc`) declara display:grid, así que el cuadro DE → A se veía también en las líneas sin ubicación, donde no hay bin de origen que tachar. · .filter-menu ya lo resuelve su propia regla `.filter-menu[hidden]` en la capa del prototipo; se lista aquí para tener el inventario en un solo sitio. · .toast hoy se oculta con la clase .is-on, no por atributo, pero declara display:flex y entraría en el mismo fallo. Esto solo hace que MANDE el atributo: sin atributo cada nodo vuelve a su display normal (el #binSwap tiene que verse en las líneas que ya tienen bin). =========================================================================== */ .dock[hidden], .toast[hidden], .move-row[hidden], .bin-swap[hidden], .filter-menu[hidden] { display: none !important; } /* =========================================================================== 15 · ANCLAJE FIJO DE LAS HOJAS A LA VENTANA El prototipo metía la app dentro de un teléfono dibujado y le ponía un transform a .device para que el dock, el toast y las hojas quedaran DENTRO de ese teléfono. En producción no hay teléfono, pero el transform seguía ahí a partir de 820px de ancho, y un ancestro transformado se convierte en el marco de referencia de todo lo posicionado de forma fija: las hojas se anclaban al largo de la lista (1605px) en vez de a la ventana, y aparecían por debajo del borde inferior. Encontrado por el arnés el 2026-09-29. =========================================================================== */ .device { transform: none !important; }