/* ══════════════════════════════════════════════════════════════════════════ estilo-15.css · RONDA 2.4 DEL ESTANDAR DE RECEPCION V2 Encargo 792 · corrida 468 · 30-sep-2026 Las reglas de lo que app-63 agrega: el punto de color del cuarto dentro del calendario y el menu corto que se abre al tocar su numero. VA DESPUES de estilo-14 y gana por ORDEN DE FUENTE, no por especificidad: redeclara .ohkg .ohkl b con la misma forma que estilo-12, porque el numero del cuarto dejo de ser un a secas y ahora vive dentro de un boton. Hoja aparte y no renglones mas en estilo-10 por el tope de 60 KB por pieza. NI UN COLOR PROPIO: todo sale de los tokens --o-* de estilo-10, para que los cinco temas y el modo nocturno de estilo-13 sigan mandando sin que esta hoja se entere. Y todo cuelga de body.ohm-opera salvo el menu flotante, que vive colgado del cuerpo — igual que la confirmacion del arrastre de estilo-14. ══════════════════════════════════════════════════════════════════════════ */ /* ══ 1 · EL NUMERO DEL CUARTO, AHORA CON SU PUNTO ══════════════════════════ El boton no se disfraza de boton: la columna de cuartos es una lista de numeros y un recuadro por renglon la volveria un tablero de botones. Lo que si tiene es area de toque de 44 px —la del renglon completo— y foco visible, porque es un control de verdad. */ body.ohm-opera .ohkg .ohkl .ohqn{ font:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer; display:inline-flex;align-items:center;gap:var(--o-e1); min-height:44px;color:inherit;text-align:left} /* LA COLUMNA NO CRECE PARA DARLE LUGAR AL PUNTO, Y ESO SE MIDIO: con el punto de 10 px y los huecos de 8, el contenido de .ohkl media 83 px en una columna de 78 a 1440 y de 66 a 390 — o sea que el numero del cuarto, que es lo unico que esa columna existe para decir, se salia. La columna es de ancho fijo (--ohk-lab) porque la rejilla la usa como primera pista del grid; ensancharla le quita dias al calendario. Asi que lo que se aprieta es lo de dentro: los huecos bajan de 8 a 4 y el relleno de los lados de 12 a 8. Medido: 75 en 78. Y EN EL TELEFONO SE VA EL ICONO DEL BANO. A 390 la columna mide 66 px y con el icono no cabe ni apretado (75). Se escoge quitar el icono y no el punto porque el punto dice como esta el cuarto HOY —que es lo que se mira en el mostrador— y el bano es identidad del cuarto, no cambia con el turno, y sigue estando escrito completo en el nombre del tipo, que el menu corto ensena al tocar el numero («Doble con tina»). El icono sigue intacto de 700 px arriba. Es la misma decision que la ronda 2.1 tomo en esta misma columna cuando quito el nombre del tipo del renglon. */ body.ohm-opera .ohkg .ohkl{gap:var(--o-e1);padding:0 var(--o-e2)} @media(max-width:699px){ body.ohm-opera .ohkg .ohkl > svg{display:none} } body.ohm-opera .ohkg .ohkl .ohqn b{font-size:var(--o-cuerpo-f); font-weight:var(--o-fuerte);color:var(--o-texto)} body.ohm-opera .ohkg .ohkl .ohqn:hover b{color:var(--o-acento-t)} body.ohm-opera .ohkg .ohkl .ohqn:focus-visible{outline:2px solid var(--o-acento); outline-offset:2px;border-radius:var(--o-radio-ctl)} /* EL PUNTO. 10 px con borde, y el borde NO es adorno: en el modo nocturno el verde y el ambar sobre el fondo oscuro pierden orilla, y un punto sin orilla a 10 px se lee como una manchita. */ body.ohm-opera .ohqp{width:10px;height:10px;border-radius:999px; display:inline-block;flex:0 0 auto; border:1px solid var(--o-linea-f);background:var(--o-fondo)} body.ohm-opera .ohqp.p-ok{background:var(--o-bien);border-color:var(--o-bien)} body.ohm-opera .ohqp.p-su{background:var(--o-atencion);border-color:var(--o-atencion)} body.ohm-opera .ohqp.p-pr{background:var(--o-acento);border-color:var(--o-acento)} /* FUERA DE SERVICIO NO ES UN COLOR MAS: es rayado, el mismo lenguaje con el que la rejilla ya dibuja un bloqueo. Un color solido mas seria una cuarta cosa que hay que aprenderse; el rayado ya significa «no esta a la venta». */ body.ohm-opera .ohqp.p-fs{border-color:var(--o-texto3); background:repeating-linear-gradient(135deg,var(--o-texto3) 0 2px, var(--o-fondo) 2px 4px)} /* SIN MARCAR se ve como lo que es: un hueco. No verde, que seria afirmar que esta limpio (encargo 751, H18). */ body.ohm-opera .ohqp.p-sm{background:var(--o-fondo); border-style:dashed;border-color:var(--o-texto3)} /* ══ 2 · EL MENU CORTO ════════════════════════════════════════════════════ Flota junto al numero en la computadora del mostrador. EN TELEFONO NO FLOTA: se pega abajo y de orilla a orilla, por la misma razon medida en la ronda 2.3 —a 390 px una tarjeta flotante junto a la columna de cuartos tapa justo la rejilla que la persona esta mirando. */ .ohqf{position:fixed;z-index:63;max-width:min(320px,calc(100vw - 16px))} .ohqf.abajo{left:8px;right:8px;top:auto;max-width:none; bottom:calc(var(--o-abajo,60px) + 12px + env(safe-area-inset-bottom))} @media(min-width:1180px){.ohqf.abajo{bottom:16px}} .ohqm{background:var(--o-super);border:1px solid var(--o-linea-f); border-radius:var(--o-radio);box-shadow:var(--o-sombra-alta,0 16px 40px rgba(22,35,44,.18)); padding:var(--o-e3);font-size:var(--o-cuerpo);color:var(--o-texto); animation:ohqEntra var(--o-mov-hoja,220ms) var(--o-curva) both} @media(prefers-reduced-motion:reduce){.ohqm{animation:none}} @keyframes ohqEntra{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} .ohqm-h{display:flex;align-items:baseline;gap:var(--o-e2); margin:0 0 var(--o-e2)} .ohqm-h b{font-size:var(--o-cuerpo-f);font-weight:var(--o-fuerte)} /* min-width:0 NO ES ADORNO: sin el, un hijo de flex no encoge por debajo de su contenido y el text-overflow de arriba no se activa nunca. Medido: el encabezado del menu media 265 px en 253 con «Doble dos camas». */ .ohqm-h span{font-size:var(--o-nota);color:var(--o-texto3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; min-width:0;flex:1 1 auto} .ohqm-h b{flex:0 0 auto} /* LA EQUIS NO SE SALE DE SU CAJA. Traia dos margenes negativos de 12 px para pegarse a la orilla del panel, y eso hacia que el encabezado midiera 265 px de contenido en una caja de 253 —medido en Chromium a 1440 y 360 en 348 a 390—. Un hijo que se sale de su caja no es un detalle de estilo: es desplazamiento horizontal o recorte, segun lo que el navegador decida ese dia. Se queda dentro del relleno del panel: el area de toque sigue siendo de 44 px, que es lo que de verdad importaba. */ .ohqm-x{margin:0 0 0 auto;font:inherit;font-size:var(--o-titulo);line-height:1; background:none;border:0;color:var(--o-texto3);cursor:pointer; min-width:44px;min-height:44px;flex:0 0 auto} .ohqm-x:hover{color:var(--o-texto)} .ohqm-e{display:flex;align-items:center;gap:var(--o-e2); font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-texto2); padding:0 0 var(--o-e3);border-bottom:1px solid var(--o-linea)} /* El punto del menu NO se vuelve a declarar: el menu cuelga del cuerpo, asi que las reglas .ohqp de arriba —que cuelgan de body.ohm-opera— tambien lo alcanzan. Declararlo dos veces es tener dos verdades sobre el mismo punto. */ /* LOS BOTONES EN COLUMNA, uno por renglon y de ancho completo: son cuatro acciones de texto largo y a 390 px en fila se parten en dos letras. */ .ohqm-g{display:grid;gap:var(--o-e1);margin:var(--o-e3) 0 0} .ohqm-g button{font:inherit;font-size:var(--o-cuerpo);font-weight:var(--o-fuerte); text-align:left;color:var(--o-texto);background:var(--o-fondo); border:1px solid var(--o-linea-f);border-radius:var(--o-radio-ctl); padding:0 var(--o-e3);min-height:44px;cursor:pointer; transition:border-color var(--o-mov) var(--o-curva), color var(--o-mov) var(--o-curva)} .ohqm-g button:hover:not([disabled]){border-color:var(--o-acento); color:var(--o-acento-t)} .ohqm-g button[disabled]{opacity:.5;cursor:default} .ohqm-g button.pri{background:var(--o-texto);border-color:var(--o-texto); color:var(--o-super)} .ohqm-n,.ohqm-p{font-size:var(--o-nota);color:var(--o-texto3); margin:var(--o-e3) 0 0;line-height:1.45} .ohqm-p{margin:var(--o-e3) 0 0;color:var(--o-texto2)} .ohqm-p b{font-weight:var(--o-fuerte);color:var(--o-texto)} .ohqm-err,.ohqm-av{font-size:var(--o-nota);line-height:1.45; margin:var(--o-e3) 0 0;padding:var(--o-e2) var(--o-e3); border-radius:var(--o-radio-ctl)} /* El aviso en rojo usa EL MISMO par que el sistema ya tiene medido para esto (.ohe-mal, estilo-10): no se estrena un token --o-alarma-suave que no existe, que es como nacen las variables fantasma. */ .ohqm-err{background:rgba(163,58,46,.10);color:var(--o-alarma); font-weight:var(--o-fuerte)} .ohqm-av{background:var(--o-acento-suave);color:var(--o-acento-t)} /* LA LISTA DE RESERVAS DEL CUARTO. Cada renglon abre la ficha por el mismo data-ohkb con el que se abre desde la rejilla. */ .ohqm-l{display:grid;gap:var(--o-e1);margin:var(--o-e3) 0 0; max-height:40vh;overflow:auto} .ohqm-l button{font:inherit;text-align:left;background:var(--o-fondo); border:1px solid var(--o-linea);border-radius:var(--o-radio-ctl); padding:var(--o-e2) var(--o-e3);cursor:pointer;display:grid;gap:2px; min-height:44px;color:var(--o-texto)} .ohqm-l button:hover{border-color:var(--o-acento)} .ohqm-l b{font-size:var(--o-cuerpo);font-weight:var(--o-fuerte); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ohqm-l span{font-size:var(--o-nota);color:var(--o-texto3)} /* ══ 3 · EL NOMBRE DENTRO DE LA BARRA (encargo 793) ══════════════════════ DOS REGLAS Y CADA UNA PARA UN CASO. La primera: donde el nombre CABE pero se pasa por poco, el corte se ve. Sin text-overflow el navegador corta a la mitad de una letra y no queda marca de que falta algo — que es justo lo que la medicion de la corrida 466 conto como scrollWidth mayor que clientWidth. La segunda: en una barra de UNA noche no cabe nada legible, asi que no se ensena texto. La clase la pone app-63 leyendo el span del nodo. La barra sigue diciendo de donde viene por su color, y el nombre llega al tocarla. */ body.ohm-opera .ohkg .ohkbar .n, body.ohm-opera .ohkg .ohkbar .s{overflow:hidden;text-overflow:ellipsis; white-space:nowrap;min-width:0} /* SOLO EN EL TELEFONO. La medicion del 793 conto desbordes a 390 y a 834, y ninguno a 1440. Con los puntos suspensivos de la regla de arriba, a 834 y a 1440 el nombre se lee cortado pero SE LEE; a 390 una columna mide 42 px y no caben tres letras, y ahi es donde «G…» deja de informar. Esconder el texto tambien a 1440 seria esconder algo que si cabe: eso lo midio esta corrida y por eso este renglon esta dentro de la consulta. El limite es el mismo que ya usa calAngosta() para decidir cuantos dias se ven: 700 px. */ @media(max-width:699px){ body.ohm-opera .ohkg .ohkbar.ohqang .n, body.ohm-opera .ohkg .ohkbar.ohqang .s{display:none} } /* ══ 4 · EL RENGLON DEL PAPEL EN LA MUESTRA ═══════════════════════════════ Es el mismo renglon de la muestra (.ohmu, estilo-13) con otro rotulo, asi que no trae reglas propias: solo lo pega al de arriba para que los dos se lean como un par y no como dos avisos. */ body.ohm-opera .ohmu.ohqpap{margin-top:calc(var(--o-e3) * -1)} /* ══ 5 · EL CALENDARIO A 390, QUE EMPEZABA A 752 PX ════════════════════════ Encargo 798 punto 5 · corrida 472 · 1-oct-2026 LO QUE SE MIDIO ANTES DE TOCAR NADA, en Chromium a 390x844 sobre la vista previa de esta rama, con la muestra de Plaza puesta y el papel recepcion: la rejilla empezaba en y=752 y solo DOS de los 27 cuartos quedaban enteros dentro de la pantalla. El encargo decia 600 px; son 752, porque la franja de la muestra tambien cuenta y el que la mide en el telefono la trae puesta. Quien abre el calendario en el telefono ve encabezado, barra, leyenda — y un cuarto y medio del hotel. La pantalla cuyo trabajo es ensenar 27 renglones gastaba el 89% del alto en no ensenarlos. LOS TRES BLOQUES QUE LA EMPUJABAN, cada uno medido: el encabezado 75 px, la barra Hoy/Mes/Bloquear 102 px —se partia en dos renglones porque .ohkbar2 envuelve y «Bloquear» se iba abajo con todo y su margin-left:auto— y la leyenda 96 px, que son sus cuatro pastillas en dos renglones. LA CURA NO ESCONDE NADA, y eso es a proposito: a 390 no sobra ninguno de los cuatro controles. Lo que sobra es que se APILEN. Los dos bloques que se partian pasan a UN renglon que se desliza de lado, que es la salida que el propio encargo ofrece para la leyenda y que aqui sirve igual para la barra. Deslizar de lado conserva los cuatro filtros alcanzables; esconderlos detras de un boton «Colores» habria costado un toque de mas para ver la leyenda que explica los colores que ya se estan viendo. SOLO A 390. De 700 px para arriba no se toca una linea: a 834 y a 1440 los tres bloques caben de sobra y ahi no habia nada que arreglar. */ @media(max-width:699px){ /* El encabezado, mas junto: el titulo baja un escalon y el subtitulo del rango se queda en su mismo bloque, pegado al titulo en vez de a 8 px. */ .ohcab{margin-bottom:var(--o-e2)} .ohcab h1{font-size:var(--o-titulo);line-height:1.15;margin:0} .ohcab-s{margin:2px 0 0;font-size:var(--o-nota)} /* UN SOLO RENGLON QUE SE DESLIZA. nowrap es lo que mete a «Bloquear» de vuelta en la fila de Hoy/Mes; el overflow-x es lo que evita que al no envolver se desborde la pagina (medido: sin el, scrollWidth > 390). El padding de abajo le deja aire a la barra de desplazamiento cuando el sistema la pinta encima. */ .ohkbar2{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;scrollbar-width:none; padding-bottom:2px;margin-bottom:var(--o-e2)} .ohkbar2::-webkit-scrollbar{display:none} /* Ninguno de los tres se deja encoger: un «Bloquear» a medias no es un boton y un selector de mes aplastado no se puede leer. Que se deslice, no que se aplaste. */ .ohkbar2>*{flex:0 0 auto} /* margin-left:auto empuja contra el borde del contenido desbordado y deja un hueco raro al deslizar; a este ancho «Bloquear» va justo despues del mes. */ .ohkbar2 .ohkder{margin-left:var(--o-e2)} /* La leyenda, igual: una fila que se desliza. Sigue filtrando y sigue teniendo sus cuatro pastillas; lo unico que pierde es el segundo renglon. */ .ohkleg{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;scrollbar-width:none; padding-bottom:2px;margin-bottom:var(--o-e2)} .ohkleg::-webkit-scrollbar{display:none} .ohkleg button{flex:0 0 auto;white-space:nowrap} } /* ════════════════════════════════════════════════════════════════════════════ RONDA 2.6 · ENCARGO 800 · CORRIDA 473 · 1-oct-2026 DEFECTO 8 DE ARQUI: «LAS BARRAS PASAN ENCIMA DEL ENCABEZADO DE DIAS». Y NO ERA EL ORDEN DE PINTADO, que es lo primero que uno toca. MEDIDO en Chromium a 1440 con la rejilla desplazada 250 px, con elementFromPoint sobre el punto exacto donde la barra de Emilio Najera cruza la banda del encabezado: el elemento de arriba es «ohkd hoy», no la barra. El encabezado SI gana — position:sticky con z-index 3 contra la barra en position:relative con z-index auto. Subirle el z-index al encabezado no habria cambiado un pixel, y habria quedado escrito como si lo hubiera arreglado. LA CAUSA MEDIDA ES EL COLOR: la celda de HOY del encabezado se pinta con --o-acento-suave, que es rgba(24,131,150,.10) en claro y rgba(88,199,216,.14) en nocturno. Diez por ciento de opacidad. Las otras trece celdas contestaron rgb(255,255,255) y rgb(238,237,231) —opacas— y por eso tapan bien; la de hoy deja ver lo que pasa por debajo. La barra no esta encima: se ve a traves. LA CURA conserva el tono de hoy y le pone un piso opaco debajo, en la misma declaracion: dos capas de fondo, la tinta translucida sobre el color de la celda. Sigue siendo el mismo acento —no se aclara ni se oscurece el tono que Eduardo ya aprobo— y deja de ser una ventana. Va por variables, asi que nocturno queda cubierto por la misma regla. ════════════════════════════════════════════════════════════════════════════ */ body.ohm-opera .ohkg .ohkd.hoy{ background: linear-gradient(var(--o-acento-suave),var(--o-acento-suave)), var(--o-super); } /* Un sabado que es hoy se sigue viendo como hoy, y su piso es el del fin de semana: si se le pusiera --o-super, la celda de hoy saltaria de color justo en la columna donde el resto de la rejilla cambia de tono. */ body.ohm-opera .ohkg .ohkd.fs.hoy{ background: linear-gradient(var(--o-acento-suave),var(--o-acento-suave)), var(--o-finde); } /* El cuadro de la esquina y los renglones de cuarto ya son opacos (medido: rgb(255,255,255)), asi que no se tocan. El encabezado de grupo tampoco cruza barras: ocupa su propio renglon de la rejilla. */