/* mye-screen.css: the operation skin of screens (.mye-screen, the kind:screen viewer) and their command mode. One copy for everyone: the preview kit adds it to the of the .guiz preview, and the app hosts link it before mye-ui.css. Unlayered on purpose (it was, inside mye-ui.css): it compacts the site pieces for operation. */ /* ═ La piel de operación de las pantallas (.mye-screen, el visor kind:screen) ═ Las piezas Sx son de vitrina: display grande, aire de catálogo. En una pantalla de operación manda la densidad: esta capa las compacta sin tocar su casa (el sitio sigue viendo el precio grande). */ /* El área de trabajo de la pantalla: columna flex que ocupa el alto disponible del main del shell. min-height (no height) a propósito: una pantalla corta no se estira, una larga crece y el shell scrollea. El min-height:0 deja que un Expand de adentro se encoja; sin él el scroll interno no aparece y el desborde sube hasta el shell. */ .mye-screen { display: flex; flex-direction: column; min-height: 100%; min-width: 0; position: relative; } /* El visor de una parte (&parte=): la invocación se monta suelta, sin la cadena de alturas de la pantalla (ZPad/ZStackVertical Height=100%), y una raíz con Expand (flex:1 1 0) resolvería a alto cero (en el DOM y sin verse). En modo parte la jaula es el viewport: height, no min-height, para que el flex del hijo tenga contra qué resolver y el scroll quede adentro. */ .mye-screen--parte { height: 100vh; min-height: 0; } /* El aviso de una acción flota, no empuja: un bloque debajo de la pantalla le robaría alto al área de trabajo con cada mensaje. Absolute contra .mye-screen: su ancla es el área de trabajo, no la ventana. */ .mye-screen__aviso { position: absolute; right: 16px; bottom: 16px; z-index: 20; max-width: min(46ch, 60%); padding: 8px 14px; border-radius: 999px; background: var(--mx-color-surface); color: var(--mx-color-text); border: var(--mx-border-width, 1px) solid var(--mx-color-border); box-shadow: 0 6px 20px color-mix(in srgb, var(--mx-color-text) 14%, transparent); font-size: 12.5px; line-height: 1.4; /* se anuncia y se va: 4s visibles, sin robarle un clic al cajero para cerrarlo */ animation: mye-aviso 4.5s ease forwards; pointer-events: none; } .mye-screen__aviso.is-muted { color: var(--mx-color-text-muted); } @keyframes mye-aviso { 0% { opacity: 0; transform: translateY(6px); } 8% { opacity: 1; transform: translateY(0); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .mye-screen__aviso { animation: none; } } /* el host del axml es display:contents, así que la raíz del .guiz es el hijo flex real de acá */ /* La card de un área expandida ocupa el área. SxCard no tiene clase base (no admite Height desde el .guiz), así que el alto va acá, en la piel de operación. Sin esto la card queda corta y deja un hueco blanco hasta el pie; con esto el borde llega abajo y los renglones nuevos empujan desde arriba. */ .mye-screen .z-scroll > .sx-card { min-height: 100%; box-sizing: border-box; } /* El renglón seleccionable. CxCard trae la interacción (cursor, hover con elevación, foco accesible, tono) pero con densidad de tarjeta, y un ticket es una lista densa. Se compacta acá, en la piel de operación; la pieza sigue igual en el resto de la casa. */ .mye-screen .cx-card { border-radius: 8px; box-shadow: none; } .mye-screen .cx-card__body { padding: 4px 8px; } .mye-screen .cx-card--clickable:hover { transform: none; box-shadow: none; } .mye-screen .sx-columns { gap: 8px; } .mye-screen .sx-card { padding: 8px 10px; border-radius: 8px; } .mye-screen .sx-card__title { font-size: 13.5px; line-height: 1.3; margin: 0 0 4px; } .mye-screen .sx-card__text { font-size: 11px; color: var(--mx-color-text-muted); } .mye-screen .sx-precio__monto { font-size: 14px; font-weight: 700; } .mye-screen .sx-precio__nota { font-size: 10.5px; } .mye-screen .cx-btn { font-size: 11px; padding: 3px 9px; min-height: 0; line-height: 1.5; } .mye-screen .cx-btn .cx-icon { width: 12px; height: 12px; } .mye-screen .sx-banner { padding: 8px 12px; font-size: 12.5px; border-radius: 8px; } .mye-screen .sx-badge { font-size: 10.5px; } .mye-screen .cx-btn { white-space: nowrap; } /* las líneas del ticket: renglones de una línea, número alineado a la derecha */ .mye-screen .sx-card__text .z-flex { padding: 2px 0; } .mye-screen .sx-precio { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; } .mye-screen .sx-precio__monto { white-space: nowrap; } /* «$ 42.5» jamás se parte */ /* cards de tamaño fijo y más largas: el grid estira las filas parejas, el min-height las alarga y el botón se ancla abajo (título arriba, precio al medio, acción al pie). */ .mye-screen .sx-columns > .sx-card { min-height: 172px; } .mye-screen .sx-card__body { display: flex; flex-direction: column; height: 100%; } .mye-screen .sx-card__text { display: flex; flex-direction: column; flex: 1 1 auto; gap: 4px; } .mye-screen .sx-card__text .cx-btn { margin-top: auto; align-self: stretch; justify-content: center; } /* ═ El modo comando de una pantalla de operación ═══════════════════════════════════════════════ Es un contrato del vertical, no de una pantalla: la hoja la carga todo aplicativo MyEF, así que los nombres dicen el rol y cualquier pantalla `kind: screen` puede pedirlo: .mye-cli el bloque de la línea de captura (se agranda al tacto en angosto) .mye-cli__grid lo que se navega con espacio y estorba sin él; se va en angosto .mye-cli__res los candidatos de la línea; sólo en angosto (en ancho manda la grilla) .mye-cli__ancho lo que sólo tiene sentido con lugar; se va en angosto .mye-cli__fija un área con alto reservado; la reserva se suelta en angosto Nada de un negocio entra acá: si una regla necesita nombrar «granel» o «mostrador», es de la pantalla. ═════════════════════════════════════════════════════════════════════════════════════════════ En angosto el cajero no navega un catálogo, escanea: la grilla es del mostrador, no del teléfono. El interruptor es @container, sobre el contenedor que ya existe (`.az-shell-host`, `container-type: inline-size` en az.css): declarar uno nuevo arrastraría `contain:layout`, que vuelve al elemento bloque contenedor de todo `position:fixed` de adentro y su overflow se los traga. 800 y no 640: el umbral del modo comando tiene que caer antes del punto donde el split apila (cuando sus dos pisos, 300 + 360 + gap, ya no entran; ese punto se corre con el riel, el gap y los subpíxeles). Con 640 quedaba una banda donde el split apilaba sin modo comando y el «Cobrar» quedaba cientos de px bajo el pliegue. Arriba de 800 el split nunca apila: las dos fronteras no se tocan. CSS y no estado: el modo responde a rotar la tablet y a colapsar el riel. Los dos árboles viven en el DOM y se esconde el grande (la grilla), así que en la pantalla chica queda lo mínimo. */ /* ancho (default): manda la grilla — los candidatos de la línea sobran, filtran por lo mismo */ /* :not(--parte): el taller no esconde la pieza. Los mye-cli__* responden al ancho de la pantalla, pero el visor de una parte (&parte=) muestra esa pieza en el banco de trabajo, y un panel angosto no puede dejar el banco vacío. Sólo se exceptúa el ocultar; la piel táctil y la densidad siguen aplicando. */ .mye-screen:not(.mye-screen--parte) .mye-cli__res { display: none; } @container (max-width: 800px) { /* chico: fuera la grilla y sus pasillos; entra la lista de candidatos */ .mye-screen:not(.mye-screen--parte) .mye-cli__grid { display: none; } .mye-screen .mye-cli__res { display: flex; } /* el campo «peso kg» es del mostrador: en el teléfono los kilos se piden solos, con sus botones */ .mye-screen:not(.mye-screen--parte) .mye-cli__ancho { display: none; } /* La piel táctil. La piel de operación comprime todo para el mouse: correcto en el mostrador, imposible con el pulgar. Va a toda la pantalla, no sólo a la línea: a 420px los botones del ticket (el vendedor, «Cobrar…») quedaban en 25px. Los botones suben a 44; los renglones del ticket se quedan en su densidad a propósito (son anchos, un toque errado se deshace con otro, y a 44 se perdería un renglón visible). */ .mye-screen .cx-btn { min-height: 44px; font-size: 14px; padding: 10px 14px; } .mye-screen .cx-btn .cx-icon { width: 16px; height: 16px; } .mye-screen .mye-cli .cx-card__body { padding: 10px 12px; } .mye-screen .sx-badge { font-size: 12px; } } /* CxSearch no acepta Class ni Style (su raíz es un
pelado), pero su padre sí y el CSS baja. Los 16px no son estéticos: por debajo de 16px iOS hace zoom al enfocar y rompe el layout. */ .mye-screen .mye-cli .cx-search { display: flex; width: 100%; min-width: 0; } .mye-screen .mye-cli .cx-search__input { width: 100%; } @container (max-width: 800px) { .mye-screen .mye-cli .cx-search__input { font-size: 16px; padding: 12px 10px; } } /* En el teléfono el split deja de ser dos pantallas y pasa a ser una. Apilado, cada panel mide una pantalla entera, correcto en la tablet; pero con la grilla fuera el panel de la línea tiene tres renglones y el ticket, el total y el «Cobrar» quedarían bajo el pliegue. Acá la línea mide lo que ocupa y el ticket se queda con lo que sobra, con scroll propio: una sola pantalla, sin scroll de nivel superior. Va en la piel de operación y no en la pieza: un split de dos catálogos sí quiere sus dos pantallas. */ @container (max-width: 800px) { .mye-screen .cy-splitpane--auto { flex-direction: column; flex-wrap: nowrap; overflow: hidden; /* ya no hay una segunda pantalla adonde ir */ } .mye-screen .cy-splitpane--auto > .cy-splitpane__pane--start { flex: 0 0 auto; /* la línea mide lo que ocupa */ height: auto; box-shadow: none; /* el separador de dos pantallas ya no aplica */ border-bottom: var(--mx-border-width, 1px) solid var(--mx-color-border); overflow: visible; /* tres renglones no necesitan su propio scroll */ } .mye-screen .cy-splitpane--auto > .cy-splitpane__pane--end { flex: 1 1 0; /* el ticket se queda con todo lo que sobra */ height: auto; min-height: 0; } } /* En el teléfono el listado del ticket es el rey: el chrome del mostrador (vendedor, nota del ticket) y la reserva de 158px del área del elegido dejarían sin alto al ZScroll de los renglones. Se cede lo que sobra: · vendedor y nota son gestos del mostrador (los hace quien tiene mouse y tiempo); · el área del elegido conserva su función pero no su reserva: la reserva evita que el ticket salte bajo el dedo, correcto con 900px de alto; en un panel de 425px el salto es el mal menor. El !important es contra el MinHeight inline que el .guiz emite en el ZBox (un inline no lo dobla ninguna hoja), y sacar la prop dejaría al mostrador sin su contrato de no-salto. */ @container (max-width: 800px) { .mye-screen .mye-cli__fija { min-height: 0 !important; } } /* La toolbar en el teléfono: `.cy-toolbar` es flex-wrap:nowrap y las placas del ticket dejaban al título en unas decenas de px, apilado y cortado. Con su renglón propio la toolbar ocupa ~50px y el resto se lo queda el listado del ticket. El título no se oculta: dice de qué negocio es, y en una cadena de sucursales eso importa. */ @container (max-width: 800px) { .mye-screen .cy-toolbar { flex-wrap: wrap; row-gap: 4px; } .mye-screen .cy-toolbar__start { flex: 1 0 100%; min-width: 0; } .mye-screen .cy-toolbar__title { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }