/* ════════════════════════════════════════════════════════════════════════════ estilo-13.css · RONDA 3 DEL ESTÁNDAR DE RECEPCIÓN v2 Encargo 790 · corrida 464 · 30-sep-2026 La ronda 2.2 pasó con 8.6 de 10. La meta de esta ronda es 9 o más en los diez criterios, y lo que falta es de detalle: que en teléfono nada tape contenido, que el movimiento sea el que dice la sección 3, que el turno de noche tenga su modo nocturno, y que el total de la reserva se vea sin desplazar. POR QUÉ UNA HOJA NUEVA Y NO MÁS RENGLONES EN estilo-10: estilo-10 va en 44,672 B y el tope duro de una pieza son 61,440. El modo nocturno solo son ~9 KB, pero la lección de las siete piezas a menos de 1 KB del tope (encargo 526) es que la siguiente corrida que toque el archivo es la que se estrella, y esa corrida no es la que decidió apretarlo. ORDEN DE CARGA: va DESPUÉS de estilo-12, así que gana por orden de fuente sin necesidad de subir especificidad a la fuerza. Todo cuelga de body.ohm-opera —la clase de quien está operando— salvo el modo nocturno, que además se encierra en su media query. ════════════════════════════════════════════════════════════════════════ */ /* ══ 1 · LA ACCIÓN PRINCIPAL EN EL ENCABEZADO COMPACTO ═════════════════════ PUNTO 1 DEL ENCARGO, textual: «En Hoy a 390 el botón "Nueva reserva" flota sobre la lista y tapa la pastilla del canal de Sra. Villarreal. El plan dice sin botones flotantes: en teléfono "Nueva reserva" va en el encabezado compacto (icono + texto). Cero elementos que tapen contenido a 390 y 430.» El flotante se fue completo (estilo-10, estilo-11, app-54 y app-57). Aquí está su reemplazo: el mismo botón lleno, en el encabezado compacto, que se desplaza con el contenido. Un botón que se desplaza NO PUEDE tapar un renglón — no es que tape menos, es que no puede. EL ENCABEZADO AHORA TIENE DOS RENGLONES, y el segundo solo aparece cuando se pide buscar. En reposo mide lo mismo que medía: 34 px de franja. */ body.ohm-opera .ohtel{display:block;padding:var(--o-e3) 0 var(--o-e4)} /* Y NO EN ESCRITORIO, QUE ES DONDE VIVE LA BARRA LATERAL. Esta regla no sobra: estilo-10 ya escondia .ohtel arriba de 1180 px, pero dentro de una consulta de medios, que NO suma especificidad — asi que el display:block de aqui, por venir despues, le ganaba. MEDIDO en Chromium a 1440 en la corrida 464: el encabezado de telefono salia ENCIMA del contenido repitiendo el logotipo, el nombre del hotel y el estado de canales que la barra lateral ya dice, y con «Nueva reserva» DOS VECES en la misma pantalla — que es exactamente lo que el principio 2 prohibe y lo que la ronda 1.1 vino a arreglar. Una hoja que carga al final gana por orden de fuente y eso incluye lo que no queria ganar. */ @media(min-width:1180px){body.ohm-opera .ohtel{display:none}} body.ohm-opera .ohtel-r{display:flex;align-items:center;gap:var(--o-e2); min-width:0} /* El nombre de la propiedad cede el espacio: la acción y el estado son de ancho fijo y el nombre es el único que puede recortarse con puntos. */ body.ohm-opera .ohtel-r .ohsync{margin-left:auto} body.ohm-opera .ohtelb{display:inline-flex;align-items:center;gap:var(--o-e1); flex:0 0 auto;border:0;border-radius:999px;cursor:pointer; background:var(--o-acento);color:#fff;font:inherit;font-size:var(--o-nota); font-weight:var(--o-fuerte);padding:0 var(--o-e3) 0 var(--o-e2); min-height:34px;white-space:nowrap; transition:background var(--o-mov) var(--o-curva)} body.ohm-opera .ohtelb:hover{background:#13707F} body.ohm-opera .ohtelb svg{width:18px;height:18px;stroke:currentColor;fill:none; stroke-width:1.8;flex:0 0 auto} /* EL OBJETIVO DE TOQUE SON 44 PX Y LA FRANJA MIDE 34. No se estira la franja: se le agrega el área que falta con un pseudo-elemento que sobresale arriba y abajo, que es lo que el dedo toca. La sección 6 pide 44 px de objetivo, no 44 px de botón visible. */ body.ohm-opera .ohtelb::after, body.ohm-opera .ohtelq-b::after{content:'';position:absolute;left:0;right:0; top:-5px;bottom:-5px} body.ohm-opera .ohtelb, body.ohm-opera .ohtelq-b{position:relative} /* La lupa: mismo alto, sin relleno de texto. */ body.ohm-opera .ohtelq-b{display:inline-flex;align-items:center; justify-content:center;flex:0 0 auto;width:34px;height:34px; border:1px solid var(--o-linea-f);border-radius:999px;background:var(--o-super); color:var(--o-texto2);cursor:pointer;padding:0; transition:border-color var(--o-mov) var(--o-curva), color var(--o-mov) var(--o-curva)} body.ohm-opera .ohtelq-b:hover{border-color:var(--o-acento);color:var(--o-acento-t)} body.ohm-opera .ohtelq-b svg{width:18px;height:18px;stroke:currentColor;fill:none; stroke-width:1.6} body.ohm-opera .ohtelq-b[aria-expanded="true"]{border-color:var(--o-acento); color:var(--o-acento-t);background:var(--o-acento-suave)} /* El segundo renglón: el campo de buscar. Sobre fondo claro, no sobre la barra oscura, porque aquí es contenido y no barra lateral. */ body.ohm-opera .ohtel-q{display:none} body.ohm-opera .ohtel-q.on{display:block;margin-top:var(--o-e3)} body.ohm-opera .ohtel-q .ohbus{margin:0} body.ohm-opera .ohtel-q .ohbus input{background:var(--o-super); border-color:var(--o-linea-f);color:var(--o-texto);padding-right:var(--o-e3)} body.ohm-opera .ohtel-q .ohbus input::placeholder{color:var(--o-texto3)} @media(min-width:1180px){body.ohm-opera .ohtel-q{display:none}} /* ══ 2 · MOVIMIENTO ═══════════════════════════════════════════════════════ PUNTO 2, textual: «150 ms en estados, 220 ms en hojas y paneles, curva de salida estándar, nada rebota; la barra nueva aparece en el calendario con 220 ms al guardar; se respeta reducir movimiento.» Los dos tiempos y la curva ya viven en :root (estilo-10) y las hojas ya los usan. Lo que faltaba es lo que NO tenía transición y por eso cambiaba de golpe: los renglones de huésped, las celdas del calendario al arrastrar, las pastillas de canal y el estado de los canales. Y una barra nueva que aparece de la nada al guardar, que es el único movimiento que el encargo nombra por su nombre. */ @media(prefers-reduced-motion:no-preference){ body.ohm-opera .ohr, body.ohm-opera .ohkbant, body.ohm-opera .ohqm tbody tr{ transition:background var(--o-mov) var(--o-curva)} body.ohm-opera .ohsync i{ transition:background var(--o-mov) var(--o-curva)} /* LA BARRA QUE ACABA DE NACER. Se le pone la clase al pintar el calendario después de guardar (app-61) y se quita al terminar; no es un keyframe infinito, es una entrada de 220 ms que pasa una vez. */ body.ohm-opera .ohkg .ohkbar.ohknace{animation:ohknace var(--o-mov-hoja) var(--o-curva) both} } @keyframes ohknace{ from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} } /* NADA REBOTA, y esto es una comprobación y no un deseo: la curva de :root es cubic-bezier(.22,.61,.36,1), que no pasa de 1 en ningún punto. La animación de arriba tampoco: va de .96 a 1 sin sobrepasarse. Con reducir movimiento la barra aparece puesta, sin animación, porque la regla vive dentro del no-preference. */ /* ══ 3 · EL TOTAL DE LA RESERVA, SIN DESPLAZAR ════════════════════════════ PUNTO 8, primera mitad: «la hoja de nueva reserva con el total en vivo (noches por tarifa, impuestos y total) visible sin desplazar a 1440». MEDIDO ANTES, a 1440 con la hoja abierta: el cuerpo de la hoja mide más que su ventana en cuanto la validación en línea agrega un renglón, y el total vive DESPUÉS de los cinco campos, así que se iba abajo del pliegue. Se pega al fondo del cuerpo de la hoja: siempre visible, sin sacarlo de su lugar en el orden de lectura ni del orden de tabulación. EL FONDO ES OPACO A PROPÓSITO: pegado y translúcido, el texto de lo que pasa por debajo se lee encima del total, que es peor que no pegarlo. POR QUE EL SELECTOR DICE #ohnTot Y NO .ohtot (encargo 875, corrida 519, 4-oct-2026). Esta regla se escribio cuando .ohtot existia en UN solo lugar: el total en vivo de la hoja de nueva reserva, que es el ULTIMO bloque de su hoja, y pegarlo al fondo no tapaba nada. Desde el 2-oct la FICHA de la reserva tiene DOS .ohtot mas y ninguno es el ultimo: app-58/app-64 pintan el de «Folio ... Importe de la reserva» arriba, y app-76 (encargo 855) agrega al final el de «Pagado / Saldo / Codigo de descuento». Las dos hojas comparten .ohsh-b, asi que la regla los alcanzaba a los tres y el ultimo se quedaba pegado al fondo ENCIMA del campo de la nota y del boton «Guardar la nota» de app-75 (encargo 852), que viven entre los dos. MEDIDO POR ARQUI 15 el 2-oct 14:00 a 1456 px en operadorhospitality.com, abriendo cualquier reserva: el textarea sale cortado por el recuadro. El id es el candado correcto y no una casualidad: ohnTotalHTML (app-56) es el UNICO que pone id="ohnTot", y lo pone justo en el bloque para el que se escribio esta regla. Los .ohtot de la ficha fluyen en su lugar, que es lo que pidio el encargo, y el total de nueva reserva sigue visible sin desplazar a 1440, que es lo que pedia el punto 8. Un .ohtot que nazca manana en otra hoja tampoco se pega sin pedirlo. */ body.ohm-opera .ohsh-b #ohnTot{position:sticky;bottom:calc(var(--o-e4) * -1); z-index:2;background:var(--o-super); margin-bottom:0;padding-top:var(--o-e3);padding-bottom:var(--o-e3); box-shadow:0 -1px 0 var(--o-linea),0 -12px 16px -12px rgba(22,35,44,.18)} /* ══ 4 · LA MUESTRA DE PLAZA ══════════════════════════════════════════════ PUNTO 7: el selector de muestra. Vive en el encabezado de pantalla y SOLO en ?demo=1: en una propiedad de verdad no hay nada que escoger. */ .ohmu{display:none} body.ohm-opera .ohmu{display:flex;align-items:center;gap:var(--o-e2); flex-wrap:wrap;background:var(--o-super);border:1px solid var(--o-linea); border-radius:var(--o-radio);padding:var(--o-e2) var(--o-e3); margin:0 0 var(--o-e4);font-size:var(--o-nota);color:var(--o-texto3)} .ohmu b{font-weight:var(--o-fuerte);color:var(--o-texto2)} .ohmu-g{display:flex;gap:var(--o-e1);flex-wrap:wrap;margin-left:auto} .ohmu-g button{font:inherit;font-size:var(--o-nota);font-weight:var(--o-fuerte); color:var(--o-texto2);background:var(--o-fondo); border:1px solid var(--o-linea-f);border-radius:999px; padding:0 var(--o-e3);min-height:32px;cursor:pointer; transition:background var(--o-mov) var(--o-curva), border-color var(--o-mov) var(--o-curva), color var(--o-mov) var(--o-curva)} .ohmu-g button:hover{border-color:var(--o-acento);color:var(--o-acento)} /* LA MUESTRA ESCOGIDA NO SE PINTA DE MARCA, y no es capricho: texto blanco sobre el teal de la marca da 4.44:1 contra un piso de 4.5 —el encargo 553.002, que espera una decision de Eduardo— y esta pastilla mide 12 px. Se usa el mismo relleno de tinta con el que el sistema ya marca la categoria escogida en la hoja (.ohpz button.on), que da 15:1 y ademas dice lo mismo: «esta es la que esta puesta». Un elemento nuevo no estrena un problema que ya tiene dueno. */ .ohmu-g button.on{background:var(--o-texto);border-color:var(--o-texto); color:var(--o-super)} /* ══ 5 · MODO NOCTURNO ════════════════════════════════════════════════════ PUNTO 4, textual: «sigue la preferencia del sistema, con el mismo sistema de variables; recepción trabaja de noche. Contraste AA en los dos modos.» CÓMO SE HACE, Y POR QUÉ ASÍ. app-31 dejó dicho el 13-sep-2026 que un tema oscuro DE VERDAD para toda la app no se puede hacer moviendo variables: --navy se usa 63 veces como color de TEXTO y 21 como FONDO, y esas dos familias piden valores opuestos. Eso sigue siendo cierto y no se toca. PERO las pantallas de recepción v2 no usan --navy: usan los tokens --o-*, que es justo lo que la sección 3 pedía al exigir «un solo archivo de variables, sin excepciones». Así que aquí el modo nocturno es lo que tenía que ser: se le cambia el VALOR a doce tokens dentro de body.ohm-opera, y ninguna regla de acomodo se mueve. El cuestionario, el Assessment y el resto de la app no se enteran, que es exactamente el alcance que esta ronda tiene. LO QUE NO SALE DE LOS TOKENS, y por eso está escrito uno por uno más abajo: las mezclas rgba() que suponían una superficie clara debajo, y los cinco lugares donde el texto era #fff sobre un acento OSCURO. Al aclarar el acento para que contraste contra el fondo oscuro, el blanco encima deja de contrastar: mismo botón, texto oscuro. Sin esto el modo nocturno pasaría el contraste del texto normal y lo tronaría justo en la acción principal. LOS NÚMEROS, MEDIDOS CON LA FÓRMULA DE WCAG (no a ojo) sobre el fondo #0D161D y la tarjeta #18262F: texto #E8EDF0 → 15.3 / 13.6 · secundario #B4C1CA → 9.8 / 8.7 terciario #8A99A4 → 6.2 / 5.5 · acento #58C7D8 → 9.1 / 8.1 cuadra #4FD08A → 9.2 / 8.2 · atención #F0B24A → 9.6 / 8.5 alarma #FF8A7A → 7.9 / 7.0 · tinta sobre acento → 9.1 El piso AA de texto son 4.5 y el de texto grande 3. El más bajo de la lista es 5.5. */ /* modo-dia-noche */ @media(prefers-color-scheme:dark){ :where(html:not(.oh-dia)) body.ohm-opera{ --o-fondo:#0D161D; --o-super:#18262F; --o-linea:rgba(255,255,255,.10); --o-linea-f:rgba(255,255,255,.20); --o-texto:#E8EDF0; --o-texto2:#B4C1CA; /* El terciario nocturno subio de #8A99A4 a #9AA9B4 por lo mismo que el claro: medido, #8A99A4 daba 3.96:1 sobre el tinte del acento (#213D47), que es el fondo del cuadro del cuarto sin asignar. #9AA9B4 da 4.85 ahi, 6.0 sobre la tarjeta y 6.8 sobre el fondo. */ --o-texto3:#9AA9B4; --o-acento:#58C7D8; --o-acento-suave:rgba(88,199,216,.14); --o-atencion:#F0B24A; --o-alarma:#FF8A7A; /* LOS DOS TONOS DE TINTA SE INVIERTEN, y esto es la prueba de que los tokens estaban bien puestos: en claro son versiones OSCURAS del acento y del ámbar, para leerse sobre un tinte claro; en nocturno el tinte es oscuro, así que la tinta es el tono CLARO — el mismo del acento. No hay un tercer valor: hay dos fondos y cada uno pide su contrario. */ --o-acento-t:#58C7D8; --o-atencion-t:#F0B24A; --o-bien:#4FD08A; --o-bien-suave:rgba(79,208,138,.14); /* Las sombras no se ven sobre fondo oscuro: lo que separa una tarjeta del fondo es su línea. La de reposo se apaga y la de elevación se queda, más profunda, porque una hoja que flota sí tiene que leerse como capa. */ --o-sombra:0 0 0 0 rgba(0,0,0,0); --o-sombra-alta:0 18px 44px rgba(0,0,0,.55); /* EL FONDO DE LA PÁGINA NO ES UN TOKEN: es el de , que lo pone estilo-01 con --paper. Se le pone aquí para que la franja de abajo de la ventana no salga crema debajo de una pantalla oscura. */ background:#0D161D; color:#E8EDF0; } /* LA TINTA SOBRE EL ACENTO, en los cinco lugares donde era blanca. El acento claro con texto blanco da 2.0:1 — ilegible. Con la tinta del fondo da 9.1:1. Es el mismo botón, no otro. */ :where(html:not(.oh-dia)) body.ohm-opera .ohb-p, :where(html:not(.oh-dia)) body.ohm-opera .ohtelb, :where(html:not(.oh-dia)) body.ohm-opera .ohmu-g button.on, :where(html:not(.oh-dia)) body.ohm-opera .ohkseg button.on, :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.rec{color:#0D161D} :where(html:not(.oh-dia)) body.ohm-opera .ohb-p:hover, :where(html:not(.oh-dia)) body.ohm-opera .ohtelb:hover{background:#7ED6E4;border-color:#7ED6E4} /* La pastilla de categoría encendida usaba el color del TEXTO como fondo, que en nocturno es claro: su texto pasa a la tinta. */ :where(html:not(.oh-dia)) body.ohm-opera .ohpz button.on{background:var(--o-texto); border-color:var(--o-texto);color:#0D161D} /* El aviso que se va solo: mismo caso. Y su «Deshacer» ya no necesita el azul claro de antes, porque el fondo ahora es claro. */ :where(html:not(.oh-dia)) body.ohm-opera .ohtoast{background:#E8EDF0;color:#0D161D} :where(html:not(.oh-dia)) body.ohm-opera .ohtoast button{color:#0E5560} /* LAS MEZCLAS QUE SUPONÍAN UNA SUPERFICIE CLARA. Un 12% de ámbar sobre blanco es una pastilla ámbar pálida; sobre #18262F es una mancha sucia sin contraste. Suben a 20% y su texto es el token, ya aclarado. */ :where(html:not(.oh-dia)) body.ohm-opera .ohr-h.sin{background:rgba(240,178,74,.20)} :where(html:not(.oh-dia)) body.ohm-opera .ohe-va, :where(html:not(.oh-dia)) body.ohm-opera .ohqestado.sin{background:rgba(240,178,74,.20)} :where(html:not(.oh-dia)) body.ohm-opera .ohe-mal, :where(html:not(.oh-dia)) body.ohm-opera .ohqestado.mal{background:rgba(255,138,122,.18)} :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkc.una{background:rgba(240,178,74,.20)} :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkc.cero{background:rgba(255,138,122,.18)} /* El esqueleto: su brillo iba de la línea a un negro al 4%, que sobre fondo oscuro es invisible. Va de la línea a un blanco al 8%. */ :where(html:not(.oh-dia)) body.ohm-opera .ohsk{background:linear-gradient(90deg, var(--o-linea) 0%,rgba(255,255,255,.08) 50%,var(--o-linea) 100%); background-size:200% 100%} /* El velo de la hoja: más oscuro, porque la página de abajo ya lo es. */ :where(html:not(.oh-dia)) body.ohm-opera .ohsh-f{background:rgba(0,0,0,.62)} /* LA BARRA DE UN BLOQUEO. Era --sand (gris claro) con texto oscuro, a propósito, para que «Mantenimiento» se leyera sobre el rayado. En nocturno eso sigue siendo cierto y además la vuelve el elemento más claro de la rejilla, que es lo que un cuarto fuera de venta tiene que ser: lo que salta. Se le baja un poco el brillo para que no deslumbre de noche. */ :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.blo{background:#B8C2C8;color:#16232C} :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.blo .s{color:#3A4A54} /* La barra de un canal: --pizarra (#325A6B) con blanco da 6.6:1 y se queda igual en los dos modos. Lo único es que sobre fondo oscuro se distingue poco de una celda libre, así que gana su propia línea. */ :where(html:not(.oh-dia)) body.ohm-opera .ohkg .ohkbar.canal{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} /* EL LOGOTIPO QUE SE SIRVE ES BLANCO. En claro se le da la tinta con un filtro (estilo-10); en nocturno el blanco es justo lo que se necesita, así que el filtro se retira. No se recolorea la marca: se deja como viene. */ :where(html:not(.oh-dia)) body.ohm-opera .ohtel img{filter:none} /* La barra lateral ya era #14222C y sigue sirviendo: en nocturno queda casi al nivel del contenido, así que se separa con su línea y un tono apenas más oscuro. */ :where(html:not(.oh-dia)) body.ohm-opera .ohlat{background:#0A1219;border-right-color:rgba(255,255,255,.10)} :where(html:not(.oh-dia)) body.ohm-opera .ohbot{background:#0A1219;border-top-color:rgba(255,255,255,.10); box-shadow:none} /* El campo de buscar del encabezado compacto: sobre la tarjeta oscura. */ :where(html:not(.oh-dia)) body.ohm-opera .ohtel-q .ohbus input{background:#0D161D} } /* la misma, cuando se elige Noche en el menu */ :where(html.oh-noche) body.ohm-opera{ --o-fondo:#0D161D; --o-super:#18262F; --o-linea:rgba(255,255,255,.10); --o-linea-f:rgba(255,255,255,.20); --o-texto:#E8EDF0; --o-texto2:#B4C1CA; /* El terciario nocturno subio de #8A99A4 a #9AA9B4 por lo mismo que el claro: medido, #8A99A4 daba 3.96:1 sobre el tinte del acento (#213D47), que es el fondo del cuadro del cuarto sin asignar. #9AA9B4 da 4.85 ahi, 6.0 sobre la tarjeta y 6.8 sobre el fondo. */ --o-texto3:#9AA9B4; --o-acento:#58C7D8; --o-acento-suave:rgba(88,199,216,.14); --o-atencion:#F0B24A; --o-alarma:#FF8A7A; /* LOS DOS TONOS DE TINTA SE INVIERTEN, y esto es la prueba de que los tokens estaban bien puestos: en claro son versiones OSCURAS del acento y del ámbar, para leerse sobre un tinte claro; en nocturno el tinte es oscuro, así que la tinta es el tono CLARO — el mismo del acento. No hay un tercer valor: hay dos fondos y cada uno pide su contrario. */ --o-acento-t:#58C7D8; --o-atencion-t:#F0B24A; --o-bien:#4FD08A; --o-bien-suave:rgba(79,208,138,.14); /* Las sombras no se ven sobre fondo oscuro: lo que separa una tarjeta del fondo es su línea. La de reposo se apaga y la de elevación se queda, más profunda, porque una hoja que flota sí tiene que leerse como capa. */ --o-sombra:0 0 0 0 rgba(0,0,0,0); --o-sombra-alta:0 18px 44px rgba(0,0,0,.55); /* EL FONDO DE LA PÁGINA NO ES UN TOKEN: es el de , que lo pone estilo-01 con --paper. Se le pone aquí para que la franja de abajo de la ventana no salga crema debajo de una pantalla oscura. */ background:#0D161D; color:#E8EDF0; } :where(html.oh-noche) body.ohm-opera .ohb-p, :where(html.oh-noche) body.ohm-opera .ohtelb, :where(html.oh-noche) body.ohm-opera .ohmu-g button.on, :where(html.oh-noche) body.ohm-opera .ohkseg button.on, :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.rec{color:#0D161D} :where(html.oh-noche) body.ohm-opera .ohb-p:hover, :where(html.oh-noche) body.ohm-opera .ohtelb:hover{background:#7ED6E4;border-color:#7ED6E4} :where(html.oh-noche) body.ohm-opera .ohpz button.on{background:var(--o-texto); border-color:var(--o-texto);color:#0D161D} :where(html.oh-noche) body.ohm-opera .ohtoast{background:#E8EDF0;color:#0D161D} :where(html.oh-noche) body.ohm-opera .ohtoast button{color:#0E5560} :where(html.oh-noche) body.ohm-opera .ohr-h.sin{background:rgba(240,178,74,.20)} :where(html.oh-noche) body.ohm-opera .ohe-va, :where(html.oh-noche) body.ohm-opera .ohqestado.sin{background:rgba(240,178,74,.20)} :where(html.oh-noche) body.ohm-opera .ohe-mal, :where(html.oh-noche) body.ohm-opera .ohqestado.mal{background:rgba(255,138,122,.18)} :where(html.oh-noche) body.ohm-opera .ohkg .ohkc.una{background:rgba(240,178,74,.20)} :where(html.oh-noche) body.ohm-opera .ohkg .ohkc.cero{background:rgba(255,138,122,.18)} :where(html.oh-noche) body.ohm-opera .ohsk{background:linear-gradient(90deg, var(--o-linea) 0%,rgba(255,255,255,.08) 50%,var(--o-linea) 100%); background-size:200% 100%} :where(html.oh-noche) body.ohm-opera .ohsh-f{background:rgba(0,0,0,.62)} :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.blo{background:#B8C2C8;color:#16232C} :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.blo .s{color:#3A4A54} :where(html.oh-noche) body.ohm-opera .ohkg .ohkbar.canal{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} :where(html.oh-noche) body.ohm-opera .ohtel img{filter:none} :where(html.oh-noche) body.ohm-opera .ohlat{background:#0A1219;border-right-color:rgba(255,255,255,.10)} :where(html.oh-noche) body.ohm-opera .ohbot{background:#0A1219;border-top-color:rgba(255,255,255,.10); box-shadow:none} :where(html.oh-noche) body.ohm-opera .ohtel-q .ohbus input{background:#0D161D} /* ══ 6 · EL SALTO AL ENTRAR, Y DE DÓNDE SALÍA ══════════════════════════════ PUNTO 5, textual: «CLS menor a 0.05. Esqueletos en todo lo que carga.» MEDIDO ANTES, en Chromium a 1440 con la muestra: 0.266, que es cinco veces el tope. Y no era un esqueleto de la medida equivocada — era el marco. Los tres saltos que registró el navegador, con sus nodos y su instante: t=2,009 ms · 0.177 · .rail, .pie, .bar t=2,217 ms · 0.089 · .wrap O sea: la página pinta PRIMERO el armazón de siempre —encabezado alto, riel de pestañas viejo, pie de sitio y barra de abajo— y cuando la aplicación se declara en operación, `body.ohm-opera` los esconde de golpe y además le mueve a `.wrap` el margen izquierdo de 240 px de la barra lateral. Todo el contenido se desplaza hacia arriba y hacia la derecha a los dos segundos, con alguien ya leyendo. Es EXACTAMENTE la misma falla que el encargo 553 curó con el color: se pintaba el tema de siempre y se veía cambiar. Y SE CURA IGUAL, con la misma receta que ya está probada en esta página: un guion de tres renglones en el que decide ANTES del primer dibujo. `?demo=1` siempre acaba en el sistema (cargaDemo pone tab='os', app-14), así que en la muestra no hay nada que adivinar: se marca el documento y el hueco del marco queda reservado desde el primer pixel. LO QUE ESTO RESERVA Y LO QUE NO. Reserva SOLO lo que mueve el acomodo: el encabezado, el riel viejo, el pie y la barra de abajo se van, y `.wrap` estrena su margen. NO pinta la barra lateral ni la de pestañas —esas las llena app-54 cuando sabe quién entró—: reservar su espacio es lo que quita el salto; dibujarlas antes de saber sería inventar un riel. Y SE QUITA SI RESULTA QUE NO. app-54 borra el atributo en el primer dibujo en que ohmOpera() dice que no se está operando, así que una pantalla que no es de operación no se queda con el hueco de un marco que no tiene. */ html[data-opera="1"] header, html[data-opera="1"] .bar, html[data-opera="1"] .fab, html[data-opera="1"] .pie, html[data-opera="1"] .hd-nav, html[data-opera="1"] .rail{display:none} html[data-opera="1"] body{ padding-bottom:calc(var(--o-abajo) + 1px + env(safe-area-inset-bottom))} @media(min-width:1180px){ html[data-opera="1"] body{padding-bottom:0} html[data-opera="1"] .wrap{margin-left:var(--o-lateral);max-width:none; padding-left:var(--o-e6);padding-right:var(--o-e6);padding-top:var(--o-e6)} html[data-opera="1"] .wrap>main{max-width:var(--o-ancho-max);margin:0 auto} }