/* ========================================================================== iGEA LOGI :: design system Material / Flat 2.0 + acento por rol + glass en las capas flotantes. -------------------------------------------------------------------------- TRES REGLAS QUE MANDAN SOBRE EL GUSTO PERSONAL 1. SE USA CON UNA MANO Y CON GUANTES. Nada accionable mide menos de 48px. La navegacion y las acciones principales viven abajo, al alcance del pulgar; arriba solo va lo que se lee, nunca lo que se toca. 2. EL COLOR ES INFORMACION, NO DECORACION. --acc lo inyecta el rol al abrir sesion. Verde = entra stock, rojo = sale, ambar = conteo fisico. Si un color no significa algo, es gris. 3. EL GLASS VA SOLO EN LO QUE FLOTA. Barra superior, barra inferior y hojas modales. En una tarjeta con numeros el desenfoque solo estorba la lectura, y en tablets baratas cuesta frames. ========================================================================== */ /* -------------------------------------------------------------------------- TOKENS -------------------------------------------------------------------------- */ :root{ /* Acento: lo pisa JS con el color del rol. Este es el de reserva. */ --acc: #5B4FE9; --acc-ink: #ffffff; --acc-soft: rgba(91,79,233,.10); --acc-line: rgba(91,79,233,.28); /* Semanticos. Fijos: no dependen del rol porque significan una operacion. */ --ok: #12855A; --ok-soft: rgba(18,133,90,.10); --bad: #C62828; --bad-soft: rgba(198,40,40,.10); --warn: #B26A00; --warn-soft: rgba(178,106,0,.12); /* Superficies */ --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #FAFBFC; --line: #E3E6EA; --line-soft: #EEF0F3; /* Tinta */ --ink: #16191D; --ink-2: #5A6068; --ink-3: #8A9099; /* Glass */ --glass: rgba(255,255,255,.72); --glass-line: rgba(255,255,255,.55); --glass-blur: saturate(180%) blur(20px); /* Elevacion: sombras cortas y de baja opacidad. Flat 2.0 sugiere el relieve, no lo dibuja. */ --e1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05); --e2: 0 2px 6px rgba(16,24,40,.07), 0 4px 12px rgba(16,24,40,.06); --e3: 0 8px 24px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.08); /* Geometria: escala de 4, radios generosos */ --r-s: 10px; --r: 14px; --r-l: 20px; --r-xl:28px; /* Alturas fijas que otros calculos necesitan */ --h-top: 56px; --h-nav: 68px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* -------------------------------------------------------------------------- TEMA CLARO / OSCURO -------------------------------------------------------------------------- Tres estados, no dos: automatico (sigue al sistema), claro forzado y oscuro forzado. El automatico no basta porque la tablet del almacen suele quedarse en oscuro por la configuracion del turno de noche, y de dia bajo luz fluorescente el oscuro se lee peor, no mejor. JS pone data-theme en . Sin ese atributo manda el sistema. -------------------------------------------------------------------------- */ /* Los valores oscuros, en una sola lista reutilizada por las dos reglas de abajo. Si se cambian, se cambian una vez. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="claro"]){ --bg: #0F1216; --surface: #171B21; --surface-2: #1D222A; --line: #262C35; --line-soft: #1F242C; --ink: #EDEFF2; --ink-2: #A2AAB4; --ink-3: #6F7883; --glass: rgba(23,27,33,.72); --glass-line: rgba(255,255,255,.08); --e1: 0 1px 2px rgba(0,0,0,.4); --e2: 0 2px 8px rgba(0,0,0,.45); --e3: 0 10px 30px rgba(0,0,0,.55); --ok-soft: rgba(18,133,90,.18); --bad-soft: rgba(198,40,40,.18); --warn-soft: rgba(178,106,0,.20); } } /* Oscuro forzado: gana esté como esté el sistema. */ :root[data-theme="oscuro"]{ --bg: #0F1216; --surface: #171B21; --surface-2: #1D222A; --line: #262C35; --line-soft: #1F242C; --ink: #EDEFF2; --ink-2: #A2AAB4; --ink-3: #6F7883; --glass: rgba(23,27,33,.72); --glass-line: rgba(255,255,255,.08); --e1: 0 1px 2px rgba(0,0,0,.4); --e2: 0 2px 8px rgba(0,0,0,.45); --e3: 0 10px 30px rgba(0,0,0,.55); --ok-soft: rgba(18,133,90,.18); --bad-soft: rgba(198,40,40,.18); --warn-soft: rgba(178,106,0,.20); } /* Claro forzado: repite los valores de :root porque el @media de arriba ya los piso. El :not() de esa regla evita la pelea de especificidad. */ :root[data-theme="claro"]{ --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #FAFBFC; --line: #E3E6EA; --line-soft: #EEF0F3; --ink: #16191D; --ink-2: #5A6068; --ink-3: #8A9099; --glass: rgba(255,255,255,.72); --glass-line: rgba(255,255,255,.55); --e1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05); --e2: 0 2px 6px rgba(16,24,40,.07), 0 4px 12px rgba(16,24,40,.06); --e3: 0 8px 24px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.08); --ok-soft: rgba(18,133,90,.10); --bad-soft: rgba(198,40,40,.10); --warn-soft: rgba(178,106,0,.12); } /* Selector de tema de la pantalla Cuenta. */ .tema{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .tema-b{ padding:12px 6px; border-radius:var(--r); border:1.5px solid var(--line); background:var(--surface); display:flex; flex-direction:column; align-items:center; gap:5px; font-size:12px; font-weight:620; color:var(--ink-2); } .tema-b svg{ width:22px; height:22px; } .tema-b.on{ border-color:var(--acc); background:var(--acc-soft); color:var(--acc); } /* -------------------------------------------------------------------------- BASE -------------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family:var(--font); font-size:15px; line-height:1.45; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none; /* sin "pull to refresh" accidental */ } /* Nada de zoom por doble toque ni seleccion de texto al arrastrar: en el piso eso solo produce toques fantasma. Los campos de datos si son seleccionables. */ body{ touch-action:manipulation; user-select:none; -webkit-user-select:none; } input,textarea,[data-sel]{ user-select:text; -webkit-user-select:text; } button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; } a{ color:var(--acc); text-decoration:none; } /* Tamanio por defecto de CUALQUIER icono. Un con viewBox pero sin width/height no tiene tamanio intrinseco: dentro de un flex se estira hasta ocupar la fila entera. Casi todos los iconos reciben medida de una regla del padre (.btn svg, .mod-ic svg...), pero los que se usan sueltos —como el chevron de las filas— se quedaban sin ninguna. Esta linea cierra ese agujero de una vez; las reglas por clase siguen mandando porque tienen mas especificidad. */ svg{ width:20px; height:20px; flex:none; } /* Los numeros de cantidad se leen en columna: cifras de ancho fijo. */ .num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } ::-webkit-scrollbar{ width:6px; height:6px; } ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; } /* -------------------------------------------------------------------------- LAYOUT -------------------------------------------------------------------------- */ #app{ min-height:100%; display:flex; flex-direction:column; } .view{ flex:1; padding:calc(var(--h-top) + 8px) 14px calc(var(--h-nav) + 24px); max-width:760px; /* en tablet no se estira hasta ser ilegible */ width:100%; margin:0 auto; } .view.sin-nav{ padding-bottom:24px; } .view.sin-top{ padding-top:16px; } /* -------------------------------------------------------------------------- BARRA SUPERIOR (glass) -------------------------------------------------------------------------- */ .top{ position:fixed; inset:0 0 auto 0; z-index:40; height:var(--h-top); display:flex; align-items:center; gap:10px; padding:0 12px; background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--line); } /* Hilo de acento: identifica el rol sin ocupar espacio ni pedir atencion. */ .top::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--acc); } .top-t{ flex:1; min-width:0; } .top-t b{ display:block; font-size:15px; font-weight:650; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .top-t span{ display:block; font-size:11.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .icon-btn{ width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:12px; color:var(--ink-2); transition:background .15s; } .icon-btn:active{ background:var(--line-soft); } .icon-btn svg{ width:22px; height:22px; } /* -------------------------------------------------------------------------- BARRA INFERIOR (glass) -------------------------------------------------------------------------- */ .nav{ position:fixed; inset:auto 0 0 0; z-index:40; height:calc(var(--h-nav) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); display:flex; background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-top:1px solid var(--line); } .nav-i{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--ink-3); font-size:10.5px; font-weight:550; position:relative; } .nav-i svg{ width:23px; height:23px; } .nav-i span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px; } .nav-i.on{ color:var(--acc); } /* La pastilla de fondo marca la pestaña activa mejor que un color de icono solo, que a contraluz en el almacen casi no se distingue. */ .nav-i.on::before{ content:''; position:absolute; top:6px; width:52px; height:30px; border-radius:15px; background:var(--acc-soft); } .nav-i svg,.nav-i span{ position:relative; } /* Contador del carrito sobre su pestania. Es lo que queda del aviso "tienes un carrito a medias" cuando la barra flotante dejo de invadir las demas pantallas: informa desde cualquier sitio y, al vivir dentro de la pestania, no se pone encima de ningun control. Se escribe `.nav-i .nav-n` y no `.nav-n` a secas por la regla de arriba: `.nav-i span` empata en clases y gana por el elemento, asi que le devolvia el `position:relative` al globo. Volvia a la corriente del flex, se colocaba como un tercer renglon debajo del rotulo y empujaba la pestania entera. */ .nav-i .nav-n{ position:absolute; top:3px; left:calc(50% + 5px); min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:999px; background:var(--acc); color:var(--acc-ink); font-size:10.5px; font-weight:700; line-height:18px; text-align:center; overflow:visible; max-width:none; /* Sobre la pastilla de la pestania activa, que es un ::before del mismo contenedor y si no le gana el apilado. */ z-index:2; /* El toque es de la pestania entera: el globo no debe partirlo en dos. */ pointer-events:none; } /* -------------------------------------------------------------------------- TARJETAS -------------------------------------------------------------------------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--e1); overflow:hidden; } .card + .card{ margin-top:10px; } .card-p{ padding:14px; } .card-btn{ width:100%; text-align:left; display:block; } .card-btn:active{ transform:scale(.985); } .card,.card-btn{ transition:transform .12s ease, box-shadow .15s ease; } /* Tarjeta de modulo del inicio: la franja de color la ata al rol. */ .mod{ display:flex; align-items:center; gap:13px; padding:15px 14px; border-left:3px solid var(--acc); } .mod-ic{ width:42px; height:42px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--acc-soft); color:var(--acc); } .mod-ic svg{ width:22px; height:22px; } .mod-t{ flex:1; min-width:0; } .mod-t b{ display:block; font-size:15px; font-weight:620; } .mod-t span{ display:block; font-size:12.5px; color:var(--ink-2); line-height:1.35; } .mod-go{ width:20px; height:20px; flex:none; color:var(--ink-3); } /* -------------------------------------------------------------------------- FILA DE ARTICULO -------------------------------------------------------------------------- */ .item{ display:flex; align-items:center; gap:12px; padding:11px 13px; } .item + .item{ border-top:1px solid var(--line-soft); } .thumb{ width:46px; height:46px; flex:none; border-radius:11px; object-fit:cover; background:var(--surface-2); border:1px solid var(--line-soft); } .item-t{ flex:1; min-width:0; } .item-t b{ display:block; font-size:14px; font-weight:600; line-height:1.3; /* Dos lineas: los nombres de repuestos y abarrotes rara vez caben en una. */ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .item-t span{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px; } /* Stock a la derecha, siempre en el mismo sitio: se escanea la columna sin leer. */ .item-s{ flex:none; text-align:right; min-width:62px; } .item-s b{ display:block; font-size:17px; font-weight:680; letter-spacing:-.02em; } .item-s span{ display:block; font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; } .item-s.cero b{ color:var(--ink-3); } .item-s.neg b{ color:var(--bad); } /* -------------------------------------------------------------------------- CHIPS :: filtros y estados -------------------------------------------------------------------------- */ .chips{ display:flex; gap:7px; overflow-x:auto; padding:2px 0 8px; margin:0 -14px; padding-left:14px; padding-right:14px; } .chips::-webkit-scrollbar{ display:none; } .chip{ flex:none; height:34px; padding:0 13px; border-radius:17px; display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); font-size:12.5px; font-weight:550; color:var(--ink-2); white-space:nowrap; } .chip.on{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); } .chip svg{ width:15px; height:15px; } .tag{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:6px; font-size:11px; font-weight:650; letter-spacing:.02em; } .tag.ok { background:var(--ok-soft); color:var(--ok); } .tag.bad { background:var(--bad-soft); color:var(--bad); } .tag.warn{ background:var(--warn-soft); color:var(--warn); } .tag.mute{ background:var(--line-soft); color:var(--ink-2); } /* -------------------------------------------------------------------------- BOTONES -------------------------------------------------------------------------- */ .btn{ height:50px; padding:0 20px; border-radius:var(--r-s); display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:620; letter-spacing:-.01em; background:var(--surface); color:var(--ink); border:1px solid var(--line); transition:transform .1s, opacity .15s; } .btn:active{ transform:scale(.97); } .btn:disabled{ opacity:.45; pointer-events:none; } .btn svg{ width:19px; height:19px; } .btn.pri{ background:var(--acc); color:var(--acc-ink); border-color:transparent; box-shadow:var(--e2); } .btn.ok { background:var(--ok); color:#fff; border-color:transparent; } .btn.bad{ background:var(--bad); color:#fff; border-color:transparent; } .btn.ghost{ background:transparent; border-color:transparent; color:var(--ink-2); } .btn.full{ width:100%; } .btn.lg{ height:56px; font-size:16px; } /* Boton flotante del escaner. Es la accion mas repetida del turno y por eso es la unica que tiene tamaño propio. */ .fab{ position:fixed; right:16px; z-index:45; bottom:calc(var(--h-nav) + env(safe-area-inset-bottom) + 16px); width:58px; height:58px; border-radius:19px; display:flex; align-items:center; justify-content:center; background:var(--acc); color:var(--acc-ink); box-shadow:var(--e3); } .fab:active{ transform:scale(.93); } .fab svg{ width:26px; height:26px; } /* -------------------------------------------------------------------------- CAMPOS -------------------------------------------------------------------------- */ .field{ margin-bottom:13px; } .field > label{ display:block; font-size:12px; font-weight:620; color:var(--ink-2); margin:0 0 6px 2px; letter-spacing:.01em; } .inp{ width:100%; height:50px; padding:0 14px; border:1.5px solid var(--line); border-radius:var(--r-s); background:var(--surface); color:var(--ink); font-size:16px; /* 16px o iOS hace zoom al enfocar */ font-family:inherit; transition:border-color .15s, box-shadow .15s; appearance:none; -webkit-appearance:none; } .inp:focus{ outline:0; border-color:var(--acc); box-shadow:0 0 0 3.5px var(--acc-soft); } .inp::placeholder{ color:var(--ink-3); } textarea.inp{ height:auto; min-height:86px; padding:12px 14px; resize:vertical; line-height:1.45; } select.inp{ background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; padding-right:40px; } .hint{ font-size:11.5px; color:var(--ink-3); margin:5px 2px 0; line-height:1.4; } .hint.bad{ color:var(--bad); } /* Buscador con lupa e icono de camara integrados. */ .search{ position:relative; margin-bottom:10px; } .search .inp{ padding-left:44px; padding-right:50px; } .search-ic{ position:absolute; left:13px; top:15px; color:var(--ink-3); pointer-events:none; } .search-ic svg{ width:20px; height:20px; } .search-cam{ position:absolute; right:5px; top:5px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:9px; color:var(--acc); } /* -------------------------------------------------------------------------- SELECTOR DE MODO :: ingresar / retirar / ajustar -------------------------------------------------------------------------- Los tres modos son la decision mas delicada de todo el flujo: equivocarse aqui mueve stock al reves. Por eso no es un a proposito. Ya existe `.res .kv.falta b`, donde la clase va en la FILA entera; una regla suelta `.falta` tenniria tambien su etiqueta y el resumen del cobro saldria todo en rojo. */ b.falta{ color:var(--bad); } /* -------------------------------------------------------------------------- INTERRUPTOR -------------------------------------------------------------------------- El unico control de encendido/apagado de la app. La pastilla mide 28px de alto, muy por debajo de los 48 que pide el sistema para el pulgar, asi que quien recibe el clic es la BARRA entera; el interruptor solo dibuja. -------------------------------------------------------------------------- */ .swbar{ display:flex; align-items:center; gap:11px; padding:12px 2px; cursor:pointer; -webkit-tap-highlight-color:transparent; } .swbar > svg{ width:20px; height:20px; flex:none; color:var(--ink-3); } .swbar b{ display:block; font-size:13.5px; font-weight:620; line-height:1.3; } .swbar span{ display:block; font-size:11.5px; color:var(--ink-3); } .sw{ flex:none; width:46px; height:28px; padding:3px; border:none; border-radius:14px; background:var(--line); display:flex; align-items:center; transition:background .18s; } .sw i{ width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:var(--e1); transition:transform .18s; } .sw[aria-checked="true"] { background:var(--acc); } .sw[aria-checked="true"] i { transform:translateX(18px); } /* -------------------------------------------------------------------------- AVISO DE VERSION NUEVA -------------------------------------------------------------------------- Sustituye a la barra que ocupaba el ancho de la pantalla. Un cartel grande a media venta se lee como un error y la reaccion es cerrarlo sin leerlo; un punto no interrumpe y no se va hasta que se actualiza. Ambar y no rojo: no hay nada roto, hay algo pendiente. -------------------------------------------------------------------------- */ .icon-btn.upd{ position:relative; color:var(--warn); } .icon-btn.upd::after{ content:''; position:absolute; top:9px; right:9px; width:9px; height:9px; border-radius:50%; background:var(--warn); border:2px solid var(--bg); animation:latir 2.4s ease-in-out infinite; } /* Un latido lento y corto: llama la atencion al mirar, no mientras se cobra. */ @keyframes latir{ 0%,70%,100% { transform:scale(1); opacity:1; } 85% { transform:scale(1.25); opacity:.75; } } @media (prefers-reduced-motion: reduce){ .icon-btn.upd::after{ animation:none; } } /* La version, en la ficha del usuario. Al pie no la veia nadie y es el primer dato que se pide por telefono cuando algo va raro. */ .ver-pill{ display:inline-flex; align-items:center; gap:5px; margin-top:5px; padding:2px 8px; border-radius:999px; background:var(--line-soft); color:var(--ink-3); font-size:11px; font-weight:650; letter-spacing:.02em; } /* Con actualizacion pendiente deja de ser un dato y pasa a ser una accion. */ .ver-pill.hay{ background:var(--warn-soft); color:var(--warn); cursor:pointer; } .ver-pill.hay::after{ content:' · toca para actualizar'; font-weight:600; } /* -------------------------------------------------------------------------- CONVERSION DE UNIDADES (editor de linea) -------------------------------------------------------------------------- Segmentado pequenio, alineado con el titulo "Cantidad". Solo cambia en que unidad se TECLEA; el almacen siempre recibe su unidad de stock. -------------------------------------------------------------------------- */ .con-uni{ display:flex; align-items:center; gap:10px; } .uni{ display:inline-flex; flex:none; padding:2px; border-radius:999px; background:var(--line-soft); } .uni-b{ padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:650; letter-spacing:.01em; color:var(--ink-3); white-space:nowrap; } .uni-b.on{ background:var(--surface); color:var(--acc); box-shadow:var(--e1); } /* Precio y descuento comparten fila: sin esto las dos columnas se estiran distinto segun cuanto ocupe cada texto de ayuda. */ #item-pd{ align-items:flex-start; gap:12px; } #item-pd > div{ min-width:0; } /* Fecha de vencimiento del credito. No es un campo editable: es la cuenta ya hecha, al lado de los dias. Se le da la misma altura que un input para que la fila no baile. */ .vence{ display:flex; align-items:center; height:50px; padding:0 14px; border-radius:var(--r-s); background:var(--surface-2); border:1px solid var(--line); font-size:15px; font-weight:620; color:var(--ink); font-variant-numeric:tabular-nums; } /* -------------------------------------------------------------------------- FILA RESALTADA CON EL TECLADO -------------------------------------------------------------------------- Tiene que verse de un vistazo desde medio metro y sin buscarla: barra de acento a la izquierda mas fondo suave. Solo con el fondo no se distingue bajo la luz del local. -------------------------------------------------------------------------- */ #grid .item.sel{ background:var(--acc-soft); box-shadow:inset 3px 0 0 var(--acc); } #grid .item.sel .item-t b{ color:var(--acc); } /* -------------------------------------------------------------------------- CONFIRMACION AL ANADIR SIN LIMPIAR -------------------------------------------------------------------------- Con el ajuste "Mantener la lista" la grilla no desaparece al anadir, y lo unico que cambia en la fila es el "Quedan N" — un numero de 11px que no se ve desde la altura a la que se trabaja. Sin senial, tocar dos veces se siente como que la app no respondio, y el cajero toca una tercera. Verde y corto: confirma, no interrumpe. Se respeta a quien pidio menos movimiento en el sistema. -------------------------------------------------------------------------- */ @keyframes entro{ from{ background:var(--ok-soft) } to{ background:transparent } } #grid .item.entro{ animation:entro .55s ease-out; } @media (prefers-reduced-motion: reduce){ #grid .item.entro{ animation:none; } } /* -------------------------------------------------------------------------- EL CARRITO SE DESPLAZA, EL TOTAL NO -------------------------------------------------------------------------- Solo las lineas llevan scroll. El total vive fuera de el, asi que sigue a la vista con veinte articulos igual que con uno: es la cifra que el cajero dice en voz alta, no puede depender de cuanto haya bajado. overscroll-behavior evita que al llegar al final el gesto siga arrastrando la pagina de detras, que en un movil se siente como si la app se moviera sola. -------------------------------------------------------------------------- */ #carro-lineas{ max-height:50vh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* -------------------------------------------------------------------------- CONTADOR DE PEDIDOS EN ESPERA -------------------------------------------------------------------------- Numero sobre el icono de la barra superior. Lleva cifra y no un punto como el aviso de version: ahi solo importa que HAY algo; aqui importa CUANTOS, porque de eso depende si el cajero recuerda a quien esta atendiendo. -------------------------------------------------------------------------- */ .icon-btn.cola{ position:relative; /* Color de acento y fondo suave, no el gris de los demas iconos: mientras haya pedidos esperando es informacion viva, no una accion mas de la barra. Con el gris de .icon-btn se perdia contra el fondo, en claro y en oscuro. */ color:var(--acc); background:var(--acc-soft); } .icon-btn.cola .cnt{ position:absolute; top:4px; right:2px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--acc); color:var(--acc-ink); border:2px solid var(--bg); font-size:10px; font-weight:720; line-height:13px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; } /* -------------------------------------------------------------------------- PRODUCTOS MAS VENDIDOS (globitos de la pantalla de venta) -------------------------------------------------------------------------- Ocupan el sitio del cartel "Busca o escanea" mientras el buscador esta vacio. Son globitos y no filas a proposito: una fila por articulo llena la pantalla con cuatro sugerencias y obliga a bajar; en globitos entran doce sin scroll y se reconocen por la foto, que es como se busca de verdad en un mostrador. Nada de colores, radios ni sombras escritos a mano: todo sale de las variables, y por eso el modo oscuro no necesita una sola linea aqui. -------------------------------------------------------------------------- */ .sug{ padding:2px 0 4px; } .sug-h{ display:flex; align-items:baseline; gap:8px; padding:0 4px; margin-bottom:10px; } .sug-h b{ font-size:13px; font-weight:660; color:var(--ink-2); letter-spacing:.01em; } .sug-h span{ font-size:11px; color:var(--ink-3); } /* auto-fill y no un numero fijo de columnas: el mismo bloque tiene que servir en un telefono de 360px y en la tablet apaisada donde el carrito ya ocupa media pantalla. */ .sug-g{ display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:10px; } .bub{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px 10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e1); cursor:pointer; text-align:center; font:inherit; color:inherit; transition:transform var(--fast), box-shadow var(--fast); /* Muy por encima del minimo tactil: aqui se toca con el pulgar y sin mirar. */ min-height:132px; /* Sin esto la cuadricula se sale de la pantalla: en un grid, la anchura minima de cada celda es la de su palabra mas larga —"INTIPALKA"— y no el 1fr que se le pidio. Con min-width:0 manda la columna. */ min-width:0; overflow:hidden; } .bub:active{ transform:scale(.96); box-shadow:var(--e2); } .bub-img{ width:56px; height:56px; margin-bottom:6px; border-radius:var(--pill); object-fit:cover; background:var(--surface-2); border:1px solid var(--line-soft); } .bub-vacio{ display:flex; align-items:center; justify-content:center; color:var(--ink-3); } .bub-vacio svg{ width:24px; height:24px; } /* Dos lineas y el resto abreviado en el JS: con tres, los globitos de una misma fila dejan de tener la misma altura y la cuadricula se descuadra. */ .bub-n{ font-size:11.5px; font-weight:600; line-height:1.25; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; } .bub-p{ margin-top:auto; padding-top:5px; font-size:13.5px; font-weight:720; letter-spacing:-.02em; color:var(--ink); } /* Sin stock no se esconde: se puede vender igual —o no, segun la empresa— y esconderlo obligaria a buscarlo a mano para descubrir lo mismo. */ .bub.sin{ opacity:.68; } .bub-x{ margin-top:3px; padding:1px 7px; border-radius:var(--pill); background:var(--bad-soft); color:var(--bad); font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; } @media (min-width:900px){ .sug-g{ grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); } .bub-img{ width:64px; height:64px; } .bub-n{ font-size:12px; } }