/* ========================================================================== Don Esquite POS — SHELL + PANTALLA POS Grid: [ productos 1fr ] [ categorías 212px ] [ carrito 380px ] (invertible con ) ========================================================================== */ /* ========================================================================== SHELL ========================================================================== */ .app { display: grid; grid-template-rows: var(--topbar) 1fr; height: 100vh; height: 100dvh; } /* ---------- Barra superior ---------- */ .topbar { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); min-width: 0; } .brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .brand__logo { width: 34px; height: 34px; border-radius: var(--r-xs); object-fit: cover; background: #000; box-shadow: var(--sh-sm); flex-shrink: 0; } .brand__nombre { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-tight); white-space: nowrap; } .brand__tag { font-size: var(--text-2xs); color: var(--text-muted); letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap; } /* Navegación entre módulos (Fase 2+: bodega, auditoría, historial…) */ .modulos { display: flex; gap: 2px; padding: 3px; background: var(--surface-1); border-radius: var(--r-full); box-shadow: var(--sh-xs); min-width: 0; /* puede encogerse antes que los chips de la derecha */ overflow: hidden; } .modulos button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--s-3); border-radius: var(--r-full); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: all var(--t-fast) var(--ease-out); } .modulos button svg { width: 16px; height: 16px; } .modulos button:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-2); } .modulos button[aria-current="page"] { background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-brand); } .modulos button:disabled { opacity: 0.38; cursor: not-allowed; } .topbar__sep { flex: 1; min-width: var(--s-2); } .topbar__right { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; } /* Pantallas medianas: los módulos se quedan solo con el ícono para que el estado de conexión nunca se corte. */ @media (max-width: 1320px) { .modulos button span { display: none; } .modulos button { padding: 0 var(--s-2); } } /* Chip del evento activo. Solo se muestra cuando se está vendiendo fuera del kiosko: en la tienda principal no aporta nada y quita espacio. */ .chip-evento { display: inline-flex; align-items: center; gap: var(--s-2); height: 38px; padding: 0 var(--s-3) 0 var(--s-2); background: var(--brand-soft); border-radius: var(--r-full); box-shadow: var(--sh-xs); font-size: var(--text-sm); font-weight: 700; color: var(--brand-text); max-width: 240px; flex-shrink: 0; transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .chip-evento[hidden] { display: none; } .chip-evento:hover { box-shadow: var(--sh-sm); } .chip-evento:active { transform: scale(0.96); } .chip-evento__icono { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); flex-shrink: 0; } .chip-evento__icono svg { width: 14px; height: 14px; } .chip-evento__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Chip interactivo del punto de venta */ .chip-punto { display: inline-flex; align-items: center; gap: var(--s-2); height: 38px; padding: 0 var(--s-3) 0 var(--s-2); background: var(--surface-1); border-radius: var(--r-full); box-shadow: var(--sh-xs); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); max-width: 240px; flex-shrink: 0; cursor: pointer; border: 1px solid var(--hairline); transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .chip-punto[hidden] { display: none; } .chip-punto:hover { box-shadow: var(--sh-sm); background: var(--surface-2); } .chip-punto:active { transform: scale(0.96); } .chip-punto__ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-secondary); flex-shrink: 0; } .chip-punto__ico svg { width: 14px; height: 14px; } .chip-punto__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Estado de conexión / cola offline */ .estado-conn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 var(--s-3); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 700; background: var(--surface-1); box-shadow: var(--sh-xs); white-space: nowrap; } .estado-conn .dot { width: 8px; height: 8px; border-radius: var(--r-full); flex-shrink: 0; } .estado-conn[data-estado="online"] { color: var(--success); } .estado-conn[data-estado="online"] .dot { background: var(--success); } .estado-conn[data-estado="offline"] { color: var(--warning); } .estado-conn[data-estado="offline"] .dot { background: var(--warning); animation: pulseSoft 1.8s infinite; } .estado-conn[data-estado="demo"] { color: var(--info); } .estado-conn[data-estado="demo"] .dot { background: var(--info); } /* Avatar del cajero */ .cajero { display: inline-flex; align-items: center; gap: var(--s-2); height: 38px; padding: 0 var(--s-3) 0 4px; background: var(--surface-1); border-radius: var(--r-full); box-shadow: var(--sh-xs); font-size: var(--text-sm); font-weight: 600; } .cajero__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); font-size: var(--text-xs); font-weight: 800; flex-shrink: 0; } .cajero { transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .cajero:hover { box-shadow: var(--sh-sm); } .cajero:active { transform: scale(0.95); } .cajero[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--brand-soft), var(--sh-sm); } /* ========================================================================== MENÚ DEL PERFIL Se abre desde el avatar. En celular es la única forma de cambiar de módulo, porque la barra completa no entra en la pantalla. ========================================================================== */ .perfil { position: relative; flex-shrink: 0; } .menu-perfil { position: absolute; top: calc(100% + 10px); right: 0; width: 280px; max-width: calc(100vw - var(--s-6)); padding: var(--s-2); /* Más opaco que los modales: este menú cae sobre las tarjetas de producto, que son muy saturadas, y con el vidrio de los modales se traslucían. */ background: color-mix(in srgb, var(--surface-1) 94%, transparent); -webkit-backdrop-filter: saturate(140%) blur(20px); backdrop-filter: saturate(140%) blur(20px); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--sh-xl); z-index: 700; /* Crece desde la esquina del avatar, como un menú nativo */ transform-origin: top right; animation: menuAbre var(--t-normal) var(--ease-spring) both; } .menu-perfil[hidden] { display: none; } .menu-perfil--cerrando { animation: menuCierra var(--t-fast) var(--ease-out) both; } @keyframes menuAbre { from { opacity: 0; transform: scale(0.88) translateY(-8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes menuCierra { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.94) translateY(-6px); } } /* Cabecera con quién está en turno: 3 líneas (nombre, rol, correo) */ .menu-perfil__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); margin-bottom: var(--s-2); border-radius: var(--r-sm); background: var(--surface-2); } .menu-perfil__av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); font-size: var(--text-md); font-weight: 800; flex-shrink: 0; } .menu-perfil__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .menu-perfil__nombre { display: block; font-size: var(--text-md); font-weight: 700; line-height: var(--leading-tight); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-perfil__rol { display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; line-height: var(--leading-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-perfil__correo { display: block; font-size: var(--text-2xs); color: var(--text-faint); line-height: var(--leading-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-perfil__titulo { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--text-2xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .menu-perfil__sep { height: 1px; margin: var(--s-2) var(--s-2); background: var(--hairline); } /* Cada opción del menú */ .menu-item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--text-md); font-weight: 600; color: var(--text-primary); text-align: left; transition: background var(--t-fast) var(--ease-out); /* Entran escalonadas, como un menú de iOS */ animation: fadeUp var(--t-normal) var(--ease-out) both; } .menu-item:hover:not(:disabled) { background: var(--surface-2); } .menu-item:active:not(:disabled) { background: var(--surface-3); } .menu-item:disabled { opacity: 0.42; cursor: not-allowed; } .menu-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-secondary); } .menu-item__txt { flex: 1; min-width: 0; } .menu-item__fase { font-size: var(--text-2xs); font-weight: 700; color: var(--text-faint); white-space: nowrap; } .menu-item[aria-current="true"] { background: var(--brand-soft); color: var(--brand-text); } .menu-item[aria-current="true"] svg { color: var(--brand-text); } .menu-item__check { width: 17px; height: 17px; color: var(--brand); flex-shrink: 0; } /* ========================================================================== ÁREA DE TRABAJO — el grid de 3 columnas ========================================================================== */ .workspace { display: grid; grid-template-columns: 1fr var(--col-nav) var(--col-cart); gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); min-height: 0; } /* Orden alterno: carrito a la izquierda (como la captura de referencia) */ body[data-layout="carrito-izquierda"] .workspace { grid-template-columns: var(--col-cart) var(--col-nav) 1fr; } body[data-layout="carrito-izquierda"] .panel-carrito { order: 1; } body[data-layout="carrito-izquierda"] .panel-nav { order: 2; } body[data-layout="carrito-izquierda"] .panel-productos { order: 3; } /* Panel base: blanco, esquinas muy redondeadas, sombra difuminada, sin bordes duros */ .panel { display: flex; flex-direction: column; min-height: 0; background: var(--surface-1); border-radius: var(--r-xl); box-shadow: var(--sh-sm); overflow: hidden; } /* ========================================================================== PANEL IZQUIERDO — PRODUCTOS ========================================================================== */ .panel-productos { min-width: 0; } .productos__head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--hairline); flex-shrink: 0; } .productos__titulo { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-tight); white-space: nowrap; } .productos__conteo { color: var(--text-muted); font-weight: 500; font-size: var(--text-sm); } .productos__head .search { flex: 1; max-width: 300px; margin-left: auto; } .productos__grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); grid-auto-rows: min-content; gap: var(--s-4); padding: var(--s-5); align-content: start; } /* ---------- Tarjeta de producto ---------- */ .producto { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: 0 0 var(--s-3); background: var(--surface-1); border-radius: var(--r-lg); box-shadow: var(--sh-sm); text-align: center; animation: fadeUp var(--t-normal) var(--ease-out) both; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .producto:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); } .producto:active { transform: translateY(-1px) scale(0.985); transition-duration: 80ms; } .producto:focus-visible { outline-offset: 3px; } /* Imagen o placeholder con degradado + emoji */ .producto__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; } /* `contain` y no `cover`: las fotos del producto son tomas completas y con `cover` la tarjeta las recortaba —del esquite embolsado se veía la mitad—. El fondo de la tarjeta rellena lo que sobra, así que se ve intencional. */ .producto__media img { width: 100%; height: 100%; object-fit: contain; } .producto__emoji { font-size: 2.5rem; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.18)); user-select: none; } /* Píldora de precio flotante — esquina superior derecha */ .producto__precio { position: absolute; top: 8px; right: 8px; padding: 4px 9px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); color: #1c1c1e; font-size: var(--text-xs); font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); font-variant-numeric: tabular-nums; } .producto__nombre { padding: 0 var(--s-3); font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-snug); letter-spacing: -0.01em; color: var(--text-primary); } /* Marca de "ya está en el carrito" */ .producto__enCarrito { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); font-size: var(--text-2xs); font-weight: 800; box-shadow: var(--sh-brand); animation: popIn var(--t-fast) var(--ease-spring) both; } /* Badge de producto con opciones (variantes/extras) */ .producto__opciones { position: absolute; bottom: 8px; left: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #1c1c1e; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); } .producto__opciones svg { width: 13px; height: 13px; } /* ========================================================================== PANEL CENTRAL — RAIL DE GRUPOS + CATEGORÍAS ========================================================================== */ .panel-nav { display: grid; grid-template-columns: var(--rail) 1fr; overflow: hidden; } /* Rail vertical de iconos: Comida / Bebidas / Extras */ .rail { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-3) 0; background: var(--surface-2); } .rail button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); color: var(--text-muted); transition: all var(--t-fast) var(--ease-out); } .rail button svg { width: 20px; height: 20px; } .rail button:hover { background: var(--surface-3); color: var(--text-primary); } .rail button[aria-selected="true"] { background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-brand); } /* Lista de categorías */ .categorias { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); overflow-y: auto; } .categoria { display: block; width: 100%; min-height: 52px; padding: var(--s-3) var(--s-2); border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-snug); letter-spacing: -0.01em; color: var(--text-secondary); text-align: center; transition: all var(--t-fast) var(--ease-out); } .categoria:hover { background: var(--surface-2); color: var(--text-primary); } .categoria:active { transform: scale(0.97); } .categoria[aria-selected="true"] { background: var(--brand-soft); color: var(--brand-text); font-weight: 700; } /* ========================================================================== PANEL DERECHO — CARRITO ========================================================================== */ .panel-carrito { min-width: 0; } .carrito__head { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--hairline); flex-shrink: 0; } .carrito__titulo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-tight); color: var(--text-primary); cursor: pointer; transition: opacity 0.15s; } .carrito__titulo:hover { opacity: 0.8; } .carrito__titulo svg { width: 18px; height: 18px; color: var(--text-secondary); } .carrito__n { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-text); font-size: var(--text-xs); font-weight: 800; font-style: normal; font-variant-numeric: tabular-nums; } /* Lista de ítems — lista plana con líneas divisorias, estilo iOS */ .carrito__items { flex: 1; display: flex; flex-direction: column; padding: 0; min-height: 0; /* Solo scroll vertical. Sin esto la lista quedaba con 22px de desborde lateral y se podía arrastrar de costado sin querer en pantalla táctil. */ overflow-x: hidden; } /* ---------- Ítem del carrito ---------- Estructura: el

es el riel fijo y aloja el botón rojo al fondo; .citem__desliza es la capa que se mueve al arrastrar hacia la izquierda. */ .citem { position: relative; overflow: hidden; /* el botón rojo vive detrás, recortado */ animation: entraFila var(--t-normal) var(--ease-out) both; } /* El rojo (riel + botón) existe SOLO mientras la fila se mueve o está abierta. En reposo no hay un solo pixel rojo pintado en la lista. */ .citem--deslizando, .citem--abierto, .citem--saliendo { background: var(--error); } .citem--deslizando .citem__accion, .citem--abierto .citem__accion, .citem--saliendo .citem__accion { visibility: visible; } /* Botón "Eliminar" que queda debajo, revelado al deslizar. `visibility: hidden` en reposo NO es decorativo: el botón queda justo debajo de la capa blanca, y en pantallas de densidad 2x los bordes de las dos capas no caen en el mismo pixel físico, así que el rojo se asomaba como una rayita bajo cada ítem. Si no se pinta, no se puede asomar — a ninguna densidad. */ .citem__accion { position: absolute; top: 0; right: 0; bottom: 0; width: var(--swipe-ancho); visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--error); color: #fff; font-size: var(--text-2xs); font-weight: 700; letter-spacing: -0.01em; transition: filter var(--t-fast) var(--ease-out); } .citem__accion:hover { filter: brightness(0.92); } .citem__accion:active { filter: brightness(0.84); } .citem__accion svg { width: 18px; height: 18px; } /* Capa deslizable: es la que lleva el contenido y la línea divisoria */ .citem__desliza { position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface-1); touch-action: pan-y; /* el scroll vertical sigue siendo nativo */ user-select: none; /* que arrastrar no seleccione texto */ transition: transform var(--t-normal) var(--ease-out); will-change: transform; } /* La línea delgada entre pedidos (nunca arriba del primero) */ .citem + .citem .citem__desliza { border-top: 1px solid var(--hairline); } /* Mientras el dedo está abajo, el movimiento sigue al dedo sin transición */ .citem--deslizando .citem__desliza { transition: none; } /* Abierto: se queda mostrando el botón de eliminar */ .citem--abierto .citem__desliza { transform: translateX(calc(var(--swipe-ancho) * -1)); } /* Deslizado a fondo: sale de pantalla y se borra */ .citem--saliendo .citem__desliza { transform: translateX(-100%); opacity: 0; transition: transform 190ms var(--ease-out), opacity 190ms var(--ease-out); } .citem__info { min-width: 0; } .citem__nombre { font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; line-height: var(--leading-snug); } .citem__variante { color: var(--text-muted); font-weight: 500; } /* Extras en viñetas, como en la referencia */ .citem__extras { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-1); } .citem__extra { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--text-xs); color: var(--text-muted); } .citem__extra::before { content: "•"; color: var(--text-faint); } .citem__extra b { margin-left: auto; color: var(--success); font-weight: 700; } .citem__nota { display: block; margin-top: var(--s-2); font-size: var(--text-xs); font-weight: 600; color: var(--brand-text); text-align: left; transition: opacity var(--t-fast) var(--ease-out); } .citem__nota:hover { opacity: 0.7; } .citem__nota--puesta { display: flex; align-items: flex-start; gap: 5px; color: var(--text-secondary); font-style: italic; font-weight: 500; } .citem__nota svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 2px; } /* Columna derecha: precio unitario, stepper y total de línea */ .citem__precios { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); white-space: nowrap; } .citem__unit { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; } .citem__total { font-size: var(--text-md); font-weight: 800; color: var(--success); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* Stepper de cantidad */ .stepper { display: inline-flex; align-items: center; background: var(--surface-2); border-radius: var(--r-full); padding: 2px; } .stepper button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); color: var(--text-secondary); transition: all var(--t-fast) var(--ease-out); } .stepper button:hover { background: var(--surface-1); color: var(--brand-text); box-shadow: var(--sh-xs); } .stepper button:active { transform: scale(0.88); } .stepper button svg { width: 14px; height: 14px; } .stepper__n { min-width: 26px; text-align: center; font-size: var(--text-md); font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------- Estado vacío ---------- */ .vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-8) var(--s-6); text-align: center; animation: fadeIn var(--t-slow) var(--ease-out) both; } .vacio__icono { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-full); background: var(--surface-2); font-size: 2rem; } .vacio__titulo { font-size: var(--text-lg); font-weight: 600; color: var(--text-secondary); } .vacio__texto { font-size: var(--text-sm); color: var(--text-muted); max-width: 240px; } /* ---------- Pie del carrito ---------- */ .carrito__pie { flex-shrink: 0; padding: var(--s-3); border-top: 1px solid var(--hairline); background: var(--surface-1); } .carrito__resumen { display: flex; flex-direction: column; gap: var(--s-1); padding: 0 var(--s-2) var(--s-3); } .carrito__linea { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); color: var(--text-muted); } .carrito__linea b { color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; } .carrito__linea--descuento b { color: var(--error); } .carrito__acciones { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-2); } .carrito__acciones .btn--lg { box-shadow: var(--sh-brand); } .btn-vaciar { display: grid; place-items: center; height: 54px; border-radius: var(--r-md); background: var(--error-soft); color: var(--error); transition: all var(--t-fast) var(--ease-out); } .btn-vaciar:hover:not(:disabled) { background: var(--error); color: #fff; } .btn-vaciar:active:not(:disabled) { transform: scale(0.94); } .btn-vaciar:disabled { opacity: 0.4; cursor: not-allowed; } .btn-vaciar svg { width: 19px; height: 19px; } /* ========================================================================== RESPONSIVE — tablet y móvil (kiosko con tablet chica / celular en evento) ========================================================================== */ @media (max-width: 1180px) { :root { --col-cart: 330px; --col-nav: 180px; } .productos__grid { grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); gap: var(--s-3); } .productos__head .search { max-width: 200px; } } /* Pantallas grandes: tarjetas más generosas en vez de dejar hueco muerto */ @media (min-width: 1600px) { .productos__grid { grid-template-columns: repeat(auto-fill, minmax(166px, 1fr)); } } @media (min-width: 1900px) { .productos__grid { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); } :root { --col-cart: 420px; --col-nav: 232px; } } /* ========================================================================== MÓVIL (< 920px) -------------------------------------------------------------------------- Reorganización, no solo encogimiento: · Barra superior compacta (el logo y lo imprescindible) · Categorías pasan de columna vertical a barra horizontal deslizable · Productos ocupan toda la pantalla · El pedido vive en una hoja inferior, con barra fija de resumen ========================================================================== */ @media (max-width: 920px) { /* ---------- Barra superior ---------- */ .topbar { gap: var(--s-2); padding: 0 var(--s-3); } .brand__tag { display: none; } .brand__nombre { font-size: var(--text-md); } /* La barra completa no entra; se cambia de módulo desde el avatar */ .modulos { display: none; } /* El tema vive dentro del menú del avatar: tenerlo además suelto en la barra es duplicar el control y gastar espacio que en 412px no sobra. */ #btnTema { display: none; } /* Se esconde el NOMBRE, no el avatar. Apuntar a `span` a secas los ocultaba a los dos y dejaba un muñón vacío en la esquina. */ .cajero__nombre { display: none; } .cajero { padding: 0 4px; } /* La píldora de conexión aparte ya no entra bien junto al avatar en una pantalla angosta: se reemplaza por un punto sobre la esquina del avatar, como el "en línea" de un chat. Mismo color/estado, mucho menos ancho. */ .estado-conn { display: none; } .cajero__av { position: relative; } .cajero__av::after { content: ""; position: absolute; bottom: -1px; left: -1px; width: 10px; height: 10px; border-radius: var(--r-full); border: 2px solid var(--surface-1); background: var(--text-faint); } .cajero[data-conexion="online"] .cajero__av::after { background: var(--success); } .cajero[data-conexion="offline"] .cajero__av::after { background: var(--warning); animation: pulseSoft 1.8s infinite; } .cajero[data-conexion="demo"] .cajero__av::after { background: var(--info); } /* ---------- Área de trabajo: nav arriba, productos abajo ---------- */ .workspace { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--s-2); padding: 0 var(--s-2) var(--s-2); } .panel-nav { order: 1; } .panel-productos { order: 2; } /* ---------- Categorías: de columna a barra horizontal ---------- */ .panel-nav { display: flex; flex-direction: row; align-items: center; border-radius: var(--r-lg); overflow: hidden; } .rail { flex-direction: row; gap: var(--s-1); padding: var(--s-2); flex-shrink: 0; border-right: 1px solid var(--hairline); } .rail button { width: 36px; height: 36px; } .rail button svg { width: 18px; height: 18px; } .categorias { flex-direction: row; gap: var(--s-2); padding: var(--s-2); overflow-x: auto; overflow-y: hidden; flex: 1; scrollbar-width: none; /* la barra estorba en 380px */ scroll-snap-type: x proximity; } .categorias::-webkit-scrollbar { display: none; } .categoria { width: auto; min-height: 36px; padding: 0 var(--s-4); white-space: nowrap; display: flex; align-items: center; border-radius: var(--r-full); background: var(--surface-2); scroll-snap-align: start; } .categoria[aria-selected="true"] { background: var(--brand); color: var(--on-brand); } /* ---------- Productos ---------- */ .productos__head { padding: var(--s-3); gap: var(--s-2); flex-wrap: wrap; } .productos__titulo { font-size: var(--text-md); } .productos__head .search { max-width: none; flex-basis: 100%; margin-left: 0; } .productos__grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--s-3); padding: var(--s-3); padding-bottom: 92px; /* aire para la barra fija */ } .producto__nombre { font-size: var(--text-xs); } /* ---------- El pedido: hoja inferior completa ---------- */ .panel-carrito { position: fixed; left: 0; right: 0; bottom: 0; height: 88dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.28); transform: translateY(101%); transition: transform var(--t-slow) var(--ease-out); z-index: 520; visibility: hidden; } .panel-carrito.abierto { transform: translateY(0); visibility: visible; } .carrito__pie { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); } } /* Agarradera de la hoja (solo móvil): se lee como hoja nativa y además cierra */ .hoja-agarradera { display: none; } @media (max-width: 920px) { .hoja-agarradera { display: block; width: 100%; padding: 11px 0 7px; flex-shrink: 0; } .hoja-agarradera::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: var(--r-full); background: var(--surface-3); transition: background var(--t-fast) var(--ease-out); } .hoja-agarradera:active::before { background: var(--text-faint); } } /* Fondo oscuro detrás de la hoja del pedido */ .hoja-fondo { position: fixed; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 510; animation: fadeIn var(--t-normal) var(--ease-out) both; } .hoja-fondo[hidden] { display: none; } @media (min-width: 921px) { .hoja-fondo { display: none; } } /* ========================================================================== BARRA FIJA DE RESUMEN (solo móvil) Reemplaza al asomo de la hoja, que mostraba la cabecera y no servía para nada: acá se ve el total y se entra al pedido de un toque. ========================================================================== */ .barra-movil { display: none; } .barra-movil[hidden] { display: none !important; } @media (max-width: 920px) { .barra-movil { position: fixed; left: var(--s-3); right: var(--s-3); bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 54px; padding: 0 var(--s-4); border-radius: var(--r-md); background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-brand), 0 8px 28px rgba(0, 0, 0, 0.18); z-index: 480; animation: fadeUp var(--t-normal) var(--ease-spring) both; transition: transform var(--t-fast) var(--ease-out); } .barra-movil:active { transform: scale(0.98); } .barra-movil__info { display: flex; align-items: center; gap: var(--s-3); } .barra-movil__n { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.24); font-size: var(--text-sm); font-weight: 800; font-variant-numeric: tabular-nums; } .barra-movil__txt { font-size: var(--text-md); font-weight: 700; } .barra-movil__total { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } } /* ========================================================================== MÓVIL ANGOSTO (< 400px) — Galaxy S24 y similares en vertical ========================================================================== */ @media (max-width: 400px) { .productos__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); } .brand__nombre { display: none; } .productos__head { padding: var(--s-2) var(--s-3); } .rail { padding: var(--s-2) var(--s-1); } .rail button { width: 32px; height: 32px; } .categoria { padding: 0 var(--s-3); font-size: var(--text-xs); } } /* Título de un grupo de opciones, con su pista a la derecha. */ .opciones__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); } .opciones__pista { font-size: var(--text-2xs); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-faint); } /* ========================================================================== SIN EXISTENCIAS La tarjeta se apaga pero NO se esconde: el cajero tiene que poder decirle al cliente "ese se acabó" en vez de no encontrarlo y dudar del sistema. ========================================================================== */ .producto--agotado { cursor: not-allowed; opacity: 0.55; filter: saturate(0.35); } .producto--agotado:hover { transform: none; box-shadow: var(--sh-sm); } .producto--agotado .producto__media { position: relative; } /* Misma pastilla que el precio, en rojo. */ .producto__agotado { position: absolute; top: var(--s-2); right: var(--s-2); padding: 3px 10px; border-radius: var(--r-full); background: var(--error); color: #fff; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.01em; box-shadow: var(--sh-sm); white-space: nowrap; } /* Una opción del modal cuyo insumo está en cero. */ .opcion--agotada { opacity: 0.5; cursor: not-allowed; } .opcion--agotada:hover { background: var(--surface-1); border-color: var(--hairline); } .opcion__precio--agotado { color: var(--error); font-weight: 700; } /* ========================================================================== CHIP DEL PUNTO DE VENTA Dónde está parada esta caja. Va siempre visible: vender del inventario equivocado es un error que no se nota hasta el cierre. ========================================================================== */ .chip-punto { display: inline-flex; align-items: center; gap: 6px; max-width: 190px; padding: 5px 12px; border-radius: var(--r-full); background: var(--surface-2); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; } .chip-punto[hidden] { display: none; } .chip-punto__ico { display: inline-flex; } .chip-punto__ico svg { width: 14px; height: 14px; } .chip-punto__txt { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .chip-punto { max-width: 110px; } }