@layer xone-reset, xone-base, xone-responsive, xone-layout, xone-components, xone-project; @layer xone-reset { xone-island { display: block; } *, *::before, *::after { box-sizing: border-box; } } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Roboto-Regular.ttf') format('truetype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Roboto-Medium.ttf') format('truetype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Roboto-Bold.ttf') format('truetype'); } @layer xone-base { /* Layout primitives compartidas con el SPA (baselineCss.ts) vía @xone-web/css-engine → LAYOUT_PRIMITIVES_CSS (F1 §1.C, fuente única). */ body { display: flex; flex-direction: column; align-items: stretch; min-height: 100dvh; margin: 0; } /* El atributo `hidden` debe ganar SIEMPRE: el orchestrator lo togglea para `disablevisible` (paridad Android ControlsUtils.isPropertyVisible) y para grupos/tabs. Sin `!important`, `.xone-frame { display: flex }` (misma especificidad/capa) o `.xone-prop { display: flex }` pisan el `display:none` del UA y el elemento "oculto" sigue visible (bug modales flotantes Alivia). */ [hidden] { display: none !important; } /* ── Canvas — superficie raíz XOne (sistema responsive) ── container-type: size (no inline-size) expone cqw (consumido por --xone-p-unit en responsive) y cqh. El cqh es la referencia de ALTURA raíz (= la pantalla): un frame de nivel superior con height N% emite Ncqh y resuelve contra el alto del canvas (paridad ContentFramePage.java:344-345). */ .xone-canvas { display: flex; flex-direction: column; align-items: stretch; flex: 1 1 auto; /* ALTURA DEFINIDA = la pantalla (paridad Android: el root es el screen). Debe ser height (no solo min-height): las cascadas height:N% de los frames de nivel superior necesitan un alto de padre DEFINIDO para resolver — min-height NO cuenta como definido para % en CSS, así que sin esto toda la cadena height:100% colapsaba a la altura del contenido (bug paridad login/inicio 2026-05-30). dvh es absoluto (relativo al viewport), así que es definido sin depender de . El scroll de contenido que desborda va en frames con scroll="true", igual que Android. */ height: 100dvh; min-height: 100dvh; width: 100%; /* RECORTE A PANTALLA (paridad Android): el View system recorta los hijos a los bounds del padre (clipChildren default) y la pantalla NUNCA crece — el contenido que excede solo scrollea dentro de frames scroll="true" (ContentFramePage.java:344-353 dimensiona el root frame a nParentWidth/nParentHeight de la pantalla). Sin esto, un árbol cuyo diseño suma >100dvh (p.ej. Inicio mRed: header 8cqh + frmGeneral2 98cqh + márgenes) extiende el scrollHeight del body (1027px vs 900 de la referencia). */ overflow: clip; container-type: size; container-name: xoneCanvas; } /* Modo responsive base-FIJA (data-responsive="1" = web-resolution-width > 0). Tokens responsive: 1p = (1/base-width)*100cqw; 1 fontsize = font-factor * idem. La base la hornea el generador en --xone-base-width. Modo responsive base-AUTO (data-responsive="auto" = sin resolución declarada): NO se declara --xone-p-unit aquí (la base es desconocida pre-JS). El canvasSizer mide el tamaño natural del contenido, fija --xone-base-width y sobrescribe --xone-p-unit/--xone-font-unit inline. Sin JS, var(...,1px) cae a 1px = 1p=1px = tamaño natural del diseño (sin zoom). */ .xone-canvas[data-responsive="1"] { min-height: 100dvh; --xone-p-unit: calc(100cqw / var(--xone-base-width)); --xone-font-unit: calc(var(--xone-font-factor) * 100cqw / var(--xone-base-width)); } /* Modos de canvas y alineación: aplican a ambos modos responsive (la base --xone-base-width que necesitan fixed/letterbox la hornea el generador en "1" y la fija el canvasSizer tras medir en "auto"). */ .xone-canvas:is([data-responsive="1"],[data-responsive="auto"])[data-canvas-mode="fluid"] { width: min(100vw, var(--xone-canvas-max-width, 540px)); align-self: center; } .xone-canvas:is([data-responsive="1"],[data-responsive="auto"])[data-canvas-mode="viewport"] { width: 100vw; max-width: none; align-self: stretch; } .xone-canvas:is([data-responsive="1"],[data-responsive="auto"])[data-canvas-mode="fixed"] { width: calc(var(--xone-base-width) * 1px); height: calc(var(--xone-base-height) * 1px); flex: 0 0 auto; min-height: 0; align-self: center; } .xone-canvas:is([data-responsive="1"],[data-responsive="auto"])[data-canvas-mode="letterbox"] { aspect-ratio: var(--xone-base-width) / var(--xone-base-height); width: min(100vw, calc(100dvh * var(--xone-base-width) / var(--xone-base-height))); /* height:auto deja que aspect-ratio gobierne el alto (la base ahora fija height:100dvh, que rompería la relación de aspecto si no se neutraliza). */ height: auto; flex: 0 0 auto; min-height: 0; align-self: center; } .xone-canvas:is([data-responsive="1"],[data-responsive="auto"])[data-canvas-align="left"] { align-self: flex-start; } .xone-canvas:is([data-responsive="1"],[data-responsive="auto"])[data-canvas-align="right"] { align-self: flex-end; } .xone-canvas:is([data-responsive="1"],[data-responsive="auto"])[data-canvas-align="center"] { align-self: center; } /* ── Coll / Group / Frame: flex column por defecto ── */ .xone-coll, .xone-group, .xone-frame { display: flex; flex-direction: column; align-items: stretch; } /* La coll = la pantalla (no puede crecer más allá del canvas): height definido en vez de min-height para que la página mida exactamente la pantalla y el scroll viva en los frames scroll="true" (overflow:auto emitido por el lowering, visualStyle.ts:332-333 / applyVisualAttributes §1b), igual que en Android, donde nada se pinta fuera de pantalla. min-height:100% (anterior) dejaba crecer la coll y extendía el body (divergencia docHeight 1027 vs 900). */ .xone-coll { flex: 1 1 auto; height: 100%; min-height: 0; } /* Group raíz = MATCH_PARENT (paridad EditGroupView.java:104). Los groups inactivos (tabs) van con [hidden]/display:none y no consumen flex. */ .xone-coll > .xone-group { flex: 1 1 auto; min-height: 0; } /* position: relative para floating labels / overlays anclados al frame. */ .xone-frame { min-height: 0; position: relative; } /* ── Row wrapper: agrupa hijos consecutivos con newline="false" ── */ .xone-row { display: flex; flex-direction: row; align-items: stretch; align-self: stretch; width: 100%; gap: 0; flex: 0 0 auto; } /* La fila única de un group crece a su contenido (canónico: 1 1 auto). */ .xone-group > .xone-row { flex: 1 1 auto; } /* La row única de un frame con alto explícito ocupa todo ese alto. */ .xone-frame[style*="height"] > .xone-row:only-child { flex: 1 1 auto; } /* …salvo que el frame declare un align vertical: entonces el bloque de líneas NO debe estirarse a todo el alto, sino conservar su tamaño para que el posicionamiento vertical (top/center/bottom) lo coloque dentro del alto sobrante. Paridad Android EditFramePage.java:936 (vMainView.setGravity(sAlign) sobre LinearLayout VERTICAL: posiciona el bloque de líneas, no lo estira). P0-B: se pasa del frágil [style*="justify-content"]:only-child (que fallaba con varias filas y dependía del substring inline) a [data-xone-align*=...] emitido por frameRenderer, válido con N filas. */ .xone-frame[data-xone-align*="top"] > .xone-row, .xone-frame[data-xone-align*="bottom"] > .xone-row, .xone-frame[data-xone-align*="center"] > .xone-row { flex: 0 0 auto; } /* …EXCEPCIÓN: si el único contenido de la fila es una imagen full-bleed (cover/fill = imagen de fondo, p.ej. el fondo del login con width:100% height:100%), esa imagen es MATCH_PARENT y DEBE llenar el alto ignorando la gravity (en Android un hijo MATCH_PARENT llena; la gravity solo posiciona hijos WRAP_CONTENT). La fila vuelve a 1 1 auto para que height:100% de la imagen resuelva al alto del frame. Las imágenes contain (keep-aspect, p.ej. un logo) NO entran aquí → siguen centradas por gravity. */ .xone-frame[data-xone-align] > .xone-row:has(> img[style*="object-fit: fill"]:only-child), .xone-frame[data-xone-align] > .xone-row:has(> img[style*="object-fit: cover"]:only-child) { flex: 1 1 auto; } /* Frame de alto completo dentro de una fila horizontal: el ALTO lo da la resolución height:100% (ahora que el canvas tiene alto definido) o el align-items:stretch de la fila; el ANCHO lo da su atributo width (40%/60%…). ANTES esto era flex:1 1 0, que en una fila reparte el eje principal (ANCHO) a partes iguales con basis 0 → aplastaba el width% (p.ej. 40/60 se volvía 50/50). flex:0 0 auto respeta el width inline (bug 2026-05-30). */ .xone-row > .xone-frame[style*="height: 100%"] { flex: 0 0 auto; } /* ── Prop: bloque vertical (stack), ocupa ancho del padre por defecto ── */ .xone-prop { display: flex; flex-direction: column; width: 100%; min-height: 0; } .xone-prop-tl { display: block; width: 100%; } /* ── Pestañas de grupos (F2): modelo "un grupo visible" ── El chasis (un ) es flex column: [barra 0 0 auto][grupos 1 1 auto]. La barra se omite en SSR si hay <2 grupos normales o notab (R1). El JS solo conmuta hidden/aria-selected; el layout y el primer grupo funcionan sin JS. */ .xone-tabs-chassis { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .xone-tabs { display: flex; flex-direction: row; flex: 0 0 auto; overflow-x: auto; scrollbar-width: thin; background: var(--xone-tab-bg, transparent); } .xone-tabs[data-tab-orientation="bottom"] { order: 2; } .xone-tab { /* FIX-6: WRAP_CONTENT empaquetado a la izquierda — un prop/botón sin width jamás recibe MATCH_PARENT ni reparto implícito (paridad EditFramePage.java:1042: lp WRAP_CONTENT; misma regla que imágenes XOneImageView.java:271-281). Antes: flex 1 1 0 (reparto equitativo no canónico que estiraba cada tab a 1/N del ancho). */ flex: 0 0 auto; min-height: var(--xone-tab-height, auto); font-size: var(--xone-tab-fontsize, inherit); background: transparent; color: var(--xone-tab-fg, inherit); border: 0; border-bottom: 2px solid transparent; padding: 0.6em 1em; cursor: pointer; white-space: nowrap; font-family: inherit; } /* Si el proyecto declara tab-width, las pestañas pasan a ancho fijo + scroll. */ .xone-tabs[style*="--xone-tab-width"] .xone-tab { flex: 0 0 var(--xone-tab-width); } .xone-tab[aria-selected="true"] { color: var(--xone-tab-fg-selected, var(--xone-tab-fg, inherit)); border-bottom-color: var(--xone-tab-indicator, currentColor); } .xone-tab:focus-visible { outline: 2px solid var(--xone-tab-indicator, currentColor); outline-offset: -2px; } .xone-groups { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .xone-groups > .xone-group { flex: 1 1 auto; min-height: 0; } .xone-group[hidden] { display: none; } /* ── Grupos fijos (F3): bandas ancladas que restan espacio al centro ── El chasis es flex: las bandas (flex:0 0 auto) miden su contenido (WRAP) y el centro (flex:1 1 auto) ocupa el resto. Reproduce "pantalla − fijos − tabs" sin position:fixed. Banda oculta (disablevisible) → 0 espacio. */ .xone-coll-mid { display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; } .xone-coll-center { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; } .xone-fixed { display: flex; flex-direction: column; flex: 0 0 auto; } .xone-fixed-left, .xone-fixed-right { min-width: 0; } .xone-fixed[hidden] { display: none; } /* Banda con un grupo fixed de altura de relleno (height=100% / -1). El emisor (fixedGroupsRenderer) le pone esta clase para que la banda CREZCA en vez de medir contenido: así el height:100% del grupo resuelve contra una caja con alto real y no colapsa a 0. Paridad Android "fixed group = alto disponible" (EditViewHyper.createFixedGroup mide contra getMaxScreenHeight()). Caso raro: comparte el espacio del coll con el centro en vez de taparlo por completo. */ .xone-fixed-fill { flex: 1 1 auto; min-height: 0; } /* ── Grupos drawer (F4): panel off-canvas + scrim ── El contenido principal NO se desplaza (el drawer va position:fixed por encima). El JS solo togglea .is-open; el slide es por transform. width por grupo via --xone-drawer-width (default 100% = pantalla completa, paridad doc 01 §2.4.2). */ .xone-drawer { position: fixed; top: 0; bottom: 0; z-index: 1000; width: var(--xone-drawer-width, 100%); max-width: 100%; display: flex; flex-direction: column; background: #fff; will-change: transform; transition: transform 0.25s ease; overscroll-behavior: contain; } .xone-drawer-left { left: 0; transform: translateX(-100%); } .xone-drawer-right { right: 0; transform: translateX(100%); } .xone-drawer.is-open { transform: translateX(0); } .xone-drawer[hidden] { display: none; } .xone-drawer > .xone-group { flex: 1 1 auto; min-height: 0; } .xone-drawer-scrim { position: fixed; inset: 0; z-index: 999; background: rgb(0 0 0 / 0.32); opacity: 0; transition: opacity 0.25s ease; } .xone-drawer-scrim.is-open { opacity: 1; } .xone-drawer-scrim[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .xone-drawer, .xone-drawer-scrim { transition: none; } } /* MPA: fuente por defecto del canvas (en el SPA la pone ). */ .xone-canvas { font-family: 'Roboto', sans-serif; } /* Island = el box visible del control (paridad Android EditText/Button). :where() da especificidad (0,0,1) para que las clases del proyecto en @layer xone-project ganen sin esfuerzo. overflow:hidden evita que las esquinas del input rectangular asomen del border-radius. */ /* text-border-*: el borde del SUBVIEW de texto (EditText en Android) SOLO aplica a props de entrada de texto editables (T, N, N#, X, D, DT). El css-engine traduce text-border / text-border-lado / text-border-color / text-border-width a custom properties (--xone-text-border*) que SOLO esta regla consume; en el resto de props (B, IMG, NC, TL, ...) quedan inertes y no pintan borde (paridad XoneCSSTextBox: text-border es del EditText, no del frame — el frame usa border-* sin prefijo). Default text-border=true → solid (XoneCSSTextBox.java:132). Anchura por defecto 1px (no medium/3px del navegador), ampliable con text-border-width o border-width. Color por defecto currentColor. :where() da especificidad (0,0,1) para que el CSS del proyecto en @layer xone-project gane. */ xone-island:where(.xone-prop-t, .xone-prop-x, .xone-prop-n, .xone-prop-n1, .xone-prop-n2, .xone-prop-n3, .xone-prop-n4, .xone-prop-n5, .xone-prop-n6, .xone-prop-d, .xone-prop-dt) { border-style: var(--xone-text-border-top, var(--xone-text-border, solid)) var(--xone-text-border-right, var(--xone-text-border, solid)) var(--xone-text-border-bottom, var(--xone-text-border, solid)) var(--xone-text-border-left, var(--xone-text-border, solid)); border-width: var(--xone-text-border-width, 1px); border-color: var(--xone-text-border-color, currentColor); /* Color/bg del subview de texto (EditText): SOLO en inputs editables. Fallback inherit/revert-layer: sin text-* el input usa el color del control (forecolor) y su bg normal. El input interno hereda. */ color: var(--xone-text-forecolor, inherit); background-color: var(--xone-text-bgcolor, revert-layer); } /* Inner controls = llenan el island, heredan todo. NO contribuyen bordes/padding → una sola fuente visual (el island wrapper). */ xone-island input, xone-island textarea, xone-island select { width: 100% !important; height: 100%; padding: 0; border: none; border-radius: 0; background: transparent; color: inherit; font-family: inherit; font-size: inherit; outline: none; box-sizing: border-box; } /* Reset del