/* ═══ LA CAPA VIAJA CON LA HOJA (2026-07-20) ══════════════════════════════════ Esta hoja declara su @layer ACÁ ADENTRO. Antes la capa la ponía quien la importaba —`@import url(...) layer(lib)`, repetido en 4 emisores— así que la hoja caía en su capa SOLO si el importador acertaba, y cargarla por la dejaba SIN CAPA: en CSS lo no-capado le gana a todo lo capado. Con la capa acá la hoja es inmune a CÓMO se la cargue, y el puede usar (paralelo, y un fallo se ve en Network) en vez de @import (serial, render-blocking, y si falla se pierde EN SILENCIO — el defecto que dejaba el shell sin `container-type` y tiraba el layout a flujo plano). ═════════════════════════════════════════════════════════════════════════ */ @layer lib { /* mye-ui.css (Etapa B · headless) — la piel de los componentes Mye* ESTÁTICOS. NO es el mye-ui.css de V4 (aquel vestía modales/menús/forms del circuito): acá solo la lectura (mye-grid/mye-kpi) y los marcadores honestos. Tema-driven por tokens --mx-* (cero colores duros): entra al como capa `lib` vía PreviewKitContribution (AddMyEFUi). */ .mye-card { background: var(--mx-color-surface); border: 1px solid var(--mx-color-border); border-radius: var(--mx-radius-xl, 14px); padding: 16px 18px; } .mye-muted { color: var(--mx-color-text-muted); font-weight: 400; } /* ── la grilla estática ─────────────────────────────────────────────────────────────────────── */ .mye-grid__bar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .mye-card__title { font-weight: 700; font-size: var(--mx-text-base, 15px); color: var(--mx-color-text); } .mye-grid__empty { padding: 22px 0; text-align: center; color: var(--mx-color-text-muted); font-size: var(--mx-text-sm, 13px); } .mye-grid__scroll { overflow-x: auto; } .mye-table { width: 100%; border-collapse: collapse; font-size: var(--mx-text-sm, 13.5px); } .mye-table th { text-align: left; font-weight: 600; color: var(--mx-color-text-muted); padding: 6px 10px; border-bottom: 1px solid var(--mx-color-border); white-space: nowrap; } .mye-table td { padding: 8px 10px; border-bottom: 1px solid var(--mx-color-border); color: var(--mx-color-text); } .mye-table tbody tr:last-child td { border-bottom: 0; } .mye-pill { display: inline-block; padding: 1px 10px; border-radius: var(--mx-radius-full, 999px); font-size: var(--mx-text-xs, 12px); font-weight: 600; border: 1px solid var(--mx-color-border); color: var(--mx-color-text-muted); } .mye-pill--si { color: var(--mx-color-primary-dark); border-color: var(--mx-color-primary); } /* ── el kpi ─────────────────────────────────────────────────────────────────────────────────── */ .mye-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 130px; } .mye-kpi__value { font-size: var(--mx-text-lg, 28px); font-weight: 800; color: var(--mx-color-primary); line-height: 1.1; } .mye-kpi__label { font-size: var(--mx-text-sm, 13px); font-weight: 600; color: var(--mx-color-text); } .mye-kpi__hint { font-size: var(--mx-text-xs, 12px); color: var(--mx-color-text-muted); } /* ── los marcadores honestos (escritura aún sin canal — §6.1) ───────────────────────────────── */ .mye-placeholder { display: flex; flex-direction: column; gap: 6px; border-style: dashed; } .mye-placeholder__kicker { font-size: var(--mx-text-xs, 12px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mx-color-text-muted); } .mye-placeholder__title { font-weight: 700; color: var(--mx-color-text); } .mye-placeholder__body { font-size: var(--mx-text-sm, 13.5px); color: var(--mx-color-text-muted); line-height: 1.5; } .mye-placeholder__body code { font-family: var(--mx-font-mono, monospace); } .mye-submit-stub { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px dashed var(--mx-color-border); border-radius: var(--mx-radius-full, 999px); font-size: var(--mx-text-sm, 13px); color: var(--mx-color-text-muted); cursor: not-allowed; } .mye-submit-stub__why { font-size: var(--mx-text-xs, 12px); } } /* ═ LA PIEL DE OPERACIÓN de las PANTALLAS (.mye-screen — el visor kind:screen, 2026-07-31) ═ Las piezas Sx son de VITRINA: display gordo, aire de catálogo. Dentro de una pantalla de operación la DENSIDAD manda (pedido del dueño: «letras grandes… mucho espacio de sobra») — esta capa las compacta SIN tocar su casa: el sitio sigue viendo el precio gordo. */ /* 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 como siempre. El min-height:0 es el que deja que un Expand de adentro se encoja: sin él, el scroll interno no aparece nunca 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 invocacion se monta SUELTA, sin la cadena de alturas que la pantalla le daba (ZPad/ZStackVertical Height=100%), asi que una raiz con Expand (flex:1 1 0) resolvia a ALTO CERO: las cards estaban en el DOM y no se veia nada — la mentira visual exacta. En modo parte la jaula es el viewport (el iframe del preview o la pestana): height, no min-height, para que el flex del hijo tenga contra que resolver y el scroll quede adentro, como en la pantalla. */ .mye-screen--parte { height: 100vh; min-height: 0; } /* EL AVISO DE UNA ACCIÓN: flota, no empuja. Antes era un bloque debajo de la pantalla y cada mensaje —«agregado al ticket», y en la Caja eso es CADA producto— le robaba alto al área de trabajo y hacía scrollear al shell. 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 y desaparece — 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 el ROOT 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, que ya es la palanca de este vertical para adaptar las piezas de vitrina. Sin esto, la card del ticket queda corta arriba y deja un hueco blanco hasta el pie: el borde termina a media pantalla y el panel se ve roto aunque el layout esté bien. 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 hecha —cursor, hover con elevación, foco accesible y el tono— pero nace con densidad de TARJETA, y un ticket es una lista densa: con el padding de origen entraban cuatro renglones donde entran doce. Se compacta acá, en la piel de operación, por la misma razón que las cards del catálogo: la pieza sigue siendo la de siempre 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 (pedido 2026-07-31): 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 (2026-08-03) ═════════════════════════════════ ESTO ES UN CONTRATO DEL VERTICAL, NO DE UNA PANTALLA. Nació sirviendo a la Caja de abarrote y por un rato llevó su vocabulario —`__granel`, `__mostrador`— metido en la hoja del addon, que la carga TODO aplicativo MyEF de todo workspace: el dominio de un cliente filtrándose al motor. Los nombres pasaron a decir el ROL, y así 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 Lo que NO entra acá: nada que sea de un negocio. Si una regla necesita nombrar «granel» o «mostrador» para explicarse, es de la pantalla y no de este archivo. ═════════════════════════════════════════════════════════════════════════════════════════════ QUÉ ESTABA MAL: en la pantalla angosta la grilla de productos ya caía a UNA columna de 375px y se comía la pantalla entera, empujando el ticket, el total y el «Cobrar» fuera de vista. Y ahí el cajero no NAVEGA un catálogo: escanea. La grilla es del mostrador, no del teléfono. EL INTERRUPTOR ES @container, Y USA EL CONTENEDOR QUE YA EXISTE: `.az-shell-host` declara `container-type: inline-size` (az.css) y la casa ya corta en 640/641 —el mismo punto donde el shell pasa a cajón—, así que acá NO se declara ningún contenedor nuevo. Eso importa: declarar uno arrastra `contain:layout`, que convierte al elemento en bloque contenedor de todo `position:fixed` de adentro y su overflow se los traga. Reusar el del shell cuesta cero y hereda su breakpoint. POR QUÉ 800 Y NO 640: los dos umbrales tienen que ser EL MISMO PUNTO, y con MARGEN. El split apila cuando sus dos pisos ya no entran (300 + 360 + el gap), y el split mide el shell menos el riel menos los paddings — medido: riel 232 arriba de 1024, 62 entre 641 y 1024, 0 en cajón. Con el corte en 640 quedaba una BANDA MUERTA donde el split ya apilaba pero el modo comando todavía no entraba, y ahí la pantalla mostraba dos pantallas apiladas SIN señal de la segunda: medido a shell 760, el ticket arrancaba en y=978 y el «Cobrar» en y=1772 —772px bajo el pliegue— con una barra de 2px como único aviso de que existía. Eso es exactamente la mentira visual que la doctrina prohíbe. El número es 800 y no el punto exacto del apilado a propósito: ese punto se corre con el gap y con los subpíxeles (medido: a shell 766 el split mide 660 y apila; a 767 mide 661 y TAMBIÉN apila; a 780 mide 674 y ya no). Perseguir el píxel es frágil — con 800 el modo comando entra bastante ANTES de que el apilado sea posible, y arriba de 800 el split mide 695 o más, con lo que nunca apila. Las dos fronteras no se tocan, y entre ellas no queda ninguna banda. POR QUÉ CSS Y NO ESTADO: el modo tiene que responder a rotar la tablet y a colapsar el riel, no a un valor sembrado una vez al cargar. Los dos árboles viven en el DOM y sólo uno se pinta; el que se esconde es el GRANDE (la grilla), así que lo que queda en la pantalla chica es 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 (el modo comando), pero el visor de una parte (&parte=) muestra ESA pieza en el banco de trabajo: un panel angosto no puede dejar el banco vacio — cards en el DOM y nada a la vista, la mentira visual exacta (medido con PosGrilla en el preview del editor, 2026-08-04). Solo se exceptua el OCULTAR; la piel tactil y la densidad siguen aplicando igual. */ .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 y eso es correcto en el mostrador y suicida con el pulgar. VA A TODA LA PANTALLA, no sólo al bloque de la línea. Estuvo un rato limitada a `.mye-cli` y medido a 420px el resultado fue: 8 de 8 blancos táctiles del panel del ticket por debajo del mínimo —el vendedor en 25px y «Cobrar…» en 25px, que es EL botón de la pantalla en un teléfono—. Una caja donde el botón de cobrar mide media uña no es una caja. Los BOTONES suben a 44; los RENGLONES del ticket se quedan en su densidad a propósito: son anchos como la pantalla, un toque errado sólo elige el renglón de al lado y se deshace con otro toque, y llevarlos a 44 costaría un renglón visible de los cinco que hay. */ .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 (no hereda de una base: su raíz es un
pelado) — pero su PADRE sí, y el CSS baja. Ancho y tipografía se arreglan acá sin tocar la pieza. Los 16px NO son estéticos: por debajo de 16px iOS hace ZOOM al enfocar y el layout se rompe solo, con el bloque de abajo saliéndose de la pantalla. */ .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 de trabajo entera — que es lo correcto en la tablet, donde arriba hay un catálogo de verdad. Pero con la grilla fuera, el panel de la línea tiene tres renglones de contenido y se quedaba igual con LA PANTALLA COMPLETA: media pantalla en blanco y el ticket, el total y el «Cobrar» empujados abajo del pliegue, sin ninguna señal de que existen. Ése es el defecto que los tres jueces marcaron por unanimidad, y en el teléfono no se arregla apilando mejor: se arregla dejando de apilar. Acá la línea mide LO QUE OCUPA y el ticket se queda con todo lo que sobra, scrolleando adentro suyo. Una sola pantalla, sin scroll de nivel superior. Va en la piel de OPERACIÓN y no en la pieza: es una decisión de ESTA pantalla, no del componente —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. Medido a 420px: el panel del ticket queda en 425px, y el chrome de mostrador —vendedor, nota del ticket— más la reserva de 158px del área del elegido se comían 369 de ellos: el ZScroll de los renglones resolvía a CERO con 1359px de contenido. O sea una caja que no muestra lo que estás cobrando. Acá se cede lo que sobra: · vendedor y nota del ticket son gestos del mostrador (los hace quien tiene mouse y tiempo); · el área del elegido conserva su FUNCIÓN pero no su RESERVA. Los 158px existen para que el ticket no salte bajo el dedo al elegir un renglón —doctrina correcta con 900px de alto—, pero en 425px esa reserva vale el 37% del panel. En el teléfono el salto es el mal menor: elegir es un acto deliberado, y sin renglones visibles no hay nada que elegir. El !important es contra el MinHeight inline que el .guiz emite en el ZBox — un inline no lo dobla ninguna hoja de ninguna capa, 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. Medido a 420×880: se comía 151px —el 17% de la pantalla— porque `.cy-toolbar` es flex-wrap:nowrap y las placas del ticket se llevaban 330 de los 364 disponibles: la zona del título quedaba en 34px de ancho y «El Surtidor · Punto de venta» se apilaba en 135px de alto, encima cortado. Con el renglón propio son ~50px y esos 100px se los queda el listado del ticket, que es lo que el cajero necesita ver. El título no se oculta: la miga de pan dice dónde estás, pero no de qué NEGOCIO — y en una cadena de tres 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; } }