/* ════════════════════════════════════════════════════════════════════════════ estilo-10.css · EL SISTEMA DE DISEÑO DE OHOS Encargo 758 · ronda 1 del Estándar de Recepción v2 · corrida 446 · 30-sep-2026 QUÉ ES ESTO Y POR QUÉ ES UN SOLO ARCHIVO. La sección 3 del estándar (conocimiento/estandar-recepcion-v2.md) pide «un solo archivo de variables, sin excepciones»: cinco tamaños de letra, espaciado en múltiplos de 4, un radio, dos sombras, un acento y sus estados. Hasta hoy cada pantalla traía sus medidas a mano —por eso la línea base medía 12 tamaños distintos en Hoy y 11 en Corte del día— y no había forma de cambiar una sin cazarla en tres hojas. Aquí viven las medidas; las pantallas las consumen. LO QUE ESTE ARCHIVO NO HACE, Y ES A PROPÓSITO: no declara un color propio. Los cinco temas de OHOS (app-31.js) funcionan cambiando el VALOR de las variables de :root de estilo-01.css, así que un color nuevo escrito aquí quedaría fuera del tema y sería el único que no cambia — justo la clase de discrepancia que el encargo 562 vino a cerrar. Cada token de color de aquí es un var() sobre el token del tema. Las dos excepciones se nombran donde están: el verde de «cuadra» y el gris terciario, que los temas tampoco tocan hoy (estilo-01.css, línea 60: «los verdes de estado ni siquiera son variables»). ALCANCE DE LA RONDA 1: el marco de la aplicación y las pantallas de recepción. Todo lo que cambia la forma de la página va colgado de body.ohm-opera —la clase que ohmPintaBarra() (app-51) ya prende cuando alguien está operando— o de body.ohpuerta, que prende app-54 en la pantalla de acceso. Fuera de esos dos estados esta hoja solo agrega tokens y no mueve un pixel del cuestionario, que no es de esta ronda. ════════════════════════════════════════════════════════════════════════ */ :root{ /* ── TIPOGRAFÍA · CINCO TAMAÑOS, DOS PESOS ────────────────────────────── Los nombres dicen para qué sirven y no cuánto miden: así una pantalla no puede pedir «14px» sino «cuerpo», y el día que el cuerpo mida 15 no hay que cazar treinta números. */ --o-nota:12px; /* etiqueta, pie de cifra, pastilla */ --o-cuerpo:14px; /* el texto de trabajo */ --o-cuerpo-f:16px; /* cuerpo destacado: nombre de huésped, total */ --o-titulo:20px; /* título de sección */ --o-cifra:32px; /* título de pantalla y cifra héroe */ --o-normal:400; --o-fuerte:600; /* ── ESPACIADO · MÚLTIPLOS DE 4 ─────────────────────────────────────── */ --o-e1:4px; --o-e2:8px; --o-e3:12px; --o-e4:16px; --o-e5:24px; --o-e6:32px; --o-e7:48px; /* ── FORMA · UN RADIO DE TARJETA, UNO DE CONTROL, DOS SOMBRAS ───────── */ --o-radio:12px; --o-radio-ctl:10px; --o-sombra:0 1px 2px rgba(22,35,44,.05); --o-sombra-alta:0 16px 40px rgba(22,35,44,.18); /* ── COLOR · TODO DERIVADO DEL TEMA ─────────────────────────────────── */ --o-fondo:var(--paper); --o-super:var(--card); --o-linea:rgba(22,35,44,.08); --o-linea-f:rgba(22,35,44,.16); --o-texto:var(--ink); --o-texto2:var(--pizarra); /* Terciario: el gris de las notas. No es del tema porque --acero se usa para bordes de control y bajarlo aquí cambiaría esos bordes. RONDA 3 · ERA #6E7B85 Y NO LLEGABA A AA, medido con la fórmula de WCAG sobre el fondo que de verdad tiene detrás: 3.98:1 contra el papel (#F6F5EF), 4.34 contra la tarjeta y 3.84 contra el acento suave. El piso de texto normal son 4.5, así que el indicador de canales («Al día», 12 px) y el hueco de cuarto sin asignar («Sin», 16 px) venían por debajo desde la ronda 1 — y la sección 6 pide contraste AA. #5E6A72 da 5.09 / 5.55 / 4.91 y es el gris que el sistema ya usa en sus gráficas (DOCPAL.gris, app-14), o sea que no es un tono nuevo: es el mismo, bien elegido. */ --o-texto3:#5E6A72; --o-acento:var(--teal); --o-acento-suave:rgba(24,131,150,.10); /* EL ACENTO PARA TEXTO SOBRE EL ACENTO SUAVE, que no es el mismo que para un botón lleno: el teal de la marca sobre su propio tinte da 3.93:1 y las pastillas de canal son de 12 px, o sea texto normal. Este da 7.47. Se usa SOLO donde el acento es tinta sobre un fondo teñido; el acento de un botón lleno, de un borde o de un estado activo sigue siendo el de la marca, y no se toca porque ahí el teal ES la marca. */ --o-acento-t:#0E5560; --o-atencion:var(--amber); /* Y lo mismo con el ámbar: #C8791E sobre su tinte da 2.67:1 y sobre blanco 3.38. Las dos por debajo del piso, y las dos llevan cifras que se leen para vender («A la venta: 1»). Este da 5.09 sobre el tinte y 6.44 sobre blanco. El rojo de alarma NO necesita gemelo: #A33A2E ya da 5.34 sobre su tinte, medido igual. */ --o-atencion-t:#8A5109; --o-alarma:var(--alarm); /* Verde de «cuadra / al día». Los temas no traen verde (estilo-01.css). */ --o-bien:#1C7A51; --o-bien-suave:rgba(28,122,81,.10); /* ── EL MARCO ───────────────────────────────────────────────────────── */ --o-lateral:240px; /* barra lateral de escritorio */ --o-abajo:60px; /* barra inferior de teléfono */ --o-ancho-max:1200px; /* ancho del contenido en escritorio */ /* ── MOVIMIENTO ─────────────────────────────────────────────────────── */ --o-mov:150ms; /* estados */ --o-mov-hoja:220ms; /* hojas y paneles */ --o-curva:cubic-bezier(.22,.61,.36,1); } /* Nada rebota y se respeta la preferencia del sistema (sección 3). */ @media(prefers-reduced-motion:reduce){ :root{--o-mov:1ms;--o-mov-hoja:1ms} } /* CIFRAS TABULARES EN TODO NÚMERO. Sin esto una lista de importes baila de renglón en renglón, que es la mitad de lo que se lee como «no alineado» en la línea base. Va en :root y se hereda. */ html{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* EL FOCO SE VE, SIEMPRE Y EN TODA LA APP. La rúbrica lo pide y no depende de estar operando: es accesibilidad, no diseño de una pantalla. */ :where(button,a,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--o-acento);outline-offset:2px;border-radius:var(--o-radio-ctl)} /* ══ LA PUERTA · H20 ════════════════════════════════════════════════════════ H20, textual: «Pantalla de acceso: la página no llena la ventana; a 1440 queda una franja crema debajo del pie». La causa no es el pie: es que el cuerpo mide lo que mide su contenido y, cuando eso no alcanza la ventana, el fondo del documento se ve abajo. Se resuelve con el cuerpo en columna y el pie empujado con margin-top:auto. VA CON CLASE Y NO EN body A SECAS porque los avisos de la app viven como hijos del cuerpo (.vercomo, .pendiente, .yaentraste, .menu, .ayov, .bar): todos son position:fixed y no entran a la columna, pero el día que alguno deje de serlo, un cuerpo flex global lo pondría en la fila. La clase la prende app-54 solo en la puerta. */ body.ohpuerta{min-height:100dvh;display:flex;flex-direction:column} body.ohpuerta>.wrap{flex:1 0 auto} body.ohpuerta>.pie{flex:0 0 auto;margin-top:auto} /* Y LA OTRA MITAD DE H20, QUE LA PRIMERA MEDICION DEJO VER: el cuerpo en columna acomoda el pie abajo, pero debajo del pie quedaban 104 px exactos de franja. No era un margen: es body{padding-bottom:104px} de estilo-01.css, el hueco que le guarda a la barra fija de abajo. Medido en Chromium el 30-sep-2026 a 1440 y a 390: en la puerta esa barra esta en display:none —body.pubmode .bar de estilo-03.css— asi que el hueco no lo ocupa nadie y se ve como fondo crema debajo del pie, 104 px arriba y abajo con la misma cifra. Se quita SOLO cuando las dos clases estan puestas: si un dia hubiera una pantalla de puerta donde la barra SI se pinta, el hueco se queda y la barra no tapa contenido. */ body.ohpuerta.pubmode{padding-bottom:0} /* ══ LA PUERTA, A TODO EL ANCHO Y EN AZUL · encargo 804 ═════════════════════ Eduardo, 30-sep-2026 22:47, viendo /sistema/ sin sesion en una ventana de unos 600 px: «porque sale con los lados como cortado en blanco?, prefiero toda la pantalla del mismo color azul». LA CAUSA ES EL ARREGLO DE ARRIBA, Y POR ESO VA PEGADO A EL. El H20 puso el cuerpo de la puerta en columna flex para empujar el pie al fondo. Un hijo de flex con margenes laterales AUTO —y .wrap trae «margin:0 auto» de estilo-01— no se estira: el auto desactiva el stretch y el ancho pasa a ser el del contenido. En modo publico .wrap ademas pierde su max-width (body.pubmode .wrap de estilo-03), asi que no quedaba nada que lo llevara al 100%. MEDIDO EN LA VISTA PREVIA DEL PR 380 (corrida 479) a 390, 430, 600, 834, 1180 y 1440: .wrap, #main y .ent median 385 px EN LOS SEIS, centrados, con 527 px de crema a cada lado a 1440. No era un max-width: era un ancho de contenido. El pie (footer#pie) ya media 1440 y ya era navy — lo unico que no llenaba la ventana era la puerta. EL ARREGLO ES «width:100%», NO «align-items:stretch»: el stretch sigue desactivado mientras los margenes sean auto, y quitarle el «margin:0 auto» a .wrap tocaria TODA la app. Con width:100% el max-width de .wrap sigue mandando donde existe, asi que las pantallas de puerta que NO son publicas (tab 'acceso') se quedan centradas y angostas exactamente como antes: esto devuelve el ancho de bloque que .wrap tenia antes del H20, no uno nuevo. Y EL AZUL VA EN LA RAIZ Y EN EL CUERPO POR LAS SAFE AREAS (punto 3). Con la app instalada, la barra de estado de arriba y la zona de gestos de abajo las pinta el fondo del elemento raiz, y html traia --paper de estilo-01: el manifest y theme-color ya son #1F3B4D y el cuerpo no coincidia. Se pone el mismo var(--navy) que usa .ent, no el numero a mano, para que la puerta siga al tema si algun dia cambia la paleta. LA CLASE ES ohpuertaent Y NO ohpuerta, Y LA DIFERENCIA IMPORTA: ohpuerta la prende app-54 para TODO lo que no tiene entrada, y ahi dentro cae tab='acceso', que pinta vAcceso() (app-10) —.mh y .panel sobre papel claro, no .ent—. Pintar el cuerpo de navy para todo ohpuerta habria puesto fondo azul detras de una pantalla clara. ohpuertaent la prende app-25 solo cuando lo que quedo dibujado en #main es de verdad un .ent, o sea las cuatro pantallas de la entrada: «Entrar a OHOS», «Te enviamos la liga» / «Escribe tu codigo», «Este correo todavia no tiene acceso» y el escogedor de propiedad. Las pantallas con sesion no la ven y no se tocan (punto 4). #main en display:block es por si acaso: en modo publico ya lo es (body.pubmode #main, estilo-03), pero si un dia un .ent sale fuera de pubmode, la rejilla de 6 columnas de estilo-01 no tiene por que decidir el ancho de la puerta. ══════════════════════════════════════════════════════════════════════════ */ html.ohpuertaent,body.ohpuertaent{background:var(--navy)} body.ohpuertaent>.wrap{width:100%} body.ohpuertaent #main{display:block} body.ohpuertaent #main>.ent{width:100%} /* OBJETIVOS DE 44 PX EN EL ENCABEZADO, EN OPERACION. Medido en la misma vuelta: el boton del logo mide 59x32 y el de la propiedad 270x17, los dos por debajo del minimo de la seccion 6. No se toca su tamano fuera de operacion —ahi el encabezado es de la portada y tiene su propio eje—; en el mostrador, donde se toca con el dedo, los dos suben a 44. */ body.ohm-opera .logohome{min-height:44px;display:flex;align-items:center} body.ohm-opera .pn .pnbtn{min-height:44px;display:inline-flex;align-items:center; text-align:left} /* ══ EL MARCO DE OPERACIÓN · SECCIÓN 4 ═════════════════════════════════════ Lo que se va, y cada línea trae su hallazgo: H21 · la barra fija de abajo que decía «Sesión de Laura Medina» y tapaba contenido. El nombre ya viaja en el encabezado (#pn), así que no hacía falta una segunda copia flotando. H22 · el botón flotante «? Ayuda», que a 390 tapaba texto. Ayuda es una sección del riel; un flotante encima sobra. H29 · el encabezado duplicado: «Hoy | Ayuda» arriba a la derecha (.hd-nav) y otra vez en el riel de pestañas. En operación manda el marco nuevo: barra lateral en escritorio, barra inferior en teléfono. H11 · el pie de sitio de marketing dentro de una herramienta de trabajo. Todo esto SOLO en operación: en el cuestionario la app se queda igual. */ body.ohm-opera .bar, body.ohm-opera .fab, body.ohm-opera .pie, body.ohm-opera .hd-nav, body.ohm-opera .rail{display:none} /* El espacio que dejaba la barra fija de abajo (body{padding-bottom:104px} de estilo-01.css) ya no tiene quién lo ocupe. En teléfono lo hereda la barra inferior de pestañas; en escritorio no hay nada abajo. RONDA 3 · Y SE QUEDABA UN PÍXEL CORTO. Medido en Chromium a 390 y a 430: la barra mide 61 px de alto y el hueco reservaba 60. El píxel que falta es su borde de arriba (border-top:1px), que --o-abajo no cuenta porque --o-abajo es el alto del ÁREA de toque, no el del elemento. Un píxel no se ve, pero es la diferencia entre «el marco le reserva su espacio» y «casi»: por ese hueco entra la última línea de la pantalla, y así es como una barra de marco se convierte en un flotante que tapa. Se cuenta el borde. */ body.ohm-opera{padding-bottom:calc(var(--o-abajo) + 1px + env(safe-area-inset-bottom))} @media(min-width:1180px){body.ohm-opera{padding-bottom:0}} /* El encabezado se queda —lleva el logo, la propiedad y quién entró— pero en operación es compacto: es una herramienta, no una portada. */ body.ohm-opera header .hd{padding-top:var(--o-e3);padding-bottom:var(--o-e2)} body.ohm-opera header .logohome img{height:26px;width:auto} body.ohm-opera .pn{padding-bottom:var(--o-e3)} /* ── LA BARRA LATERAL (1180 px o más) ───────────────────────────────────── */ .ohlat{display:none} body.ohm-opera .ohlat{ position:fixed;top:0;bottom:0;left:0;width:var(--o-lateral); background:var(--o-super);border-right:1px solid var(--o-linea); z-index:45;padding:var(--o-e4) 0; flex-direction:column;gap:var(--o-e1);overflow-y:auto} @media(min-width:1180px){ body.ohm-opera .ohlat{display:flex} /* EL ENCABEZADO NO SE REPITE. Medido en Chromium el 30-sep-2026 a 1440: con la barra lateral puesta, la franja de arriba decia OTRA VEZ el logotipo de OHOS, OTRA VEZ el nombre del hotel y OTRA VEZ el nombre de quien entro, que es H29 con otra ropa: dos encabezados diciendo lo mismo. En escritorio manda la barra lateral, que ya trae las tres cosas y ademas las secciones. EN TELEFONO EL ENCABEZADO SE QUEDA, y eso no es un olvido: ahi no hay barra lateral y es el unico lugar donde viven el logotipo, la propiedad y el nombre. */ body.ohm-opera header{display:none} body.ohm-opera .wrap{margin-left:var(--o-lateral);max-width:none; padding-left:var(--o-e6);padding-right:var(--o-e6); padding-top:var(--o-e6)} body.ohm-opera .wrap>main{max-width:var(--o-ancho-max);margin:0 auto} } .ohlat-m{display:flex;align-items:center;gap:var(--o-e2); padding:0 var(--o-e4) var(--o-e3);min-width:0} .ohlat-m img{height:24px;width:auto;flex:0 0 auto} .ohlat-m span{font-size:var(--o-nota);color:var(--o-texto3); font-weight:var(--o-fuerte);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ohlat-h{font-size:var(--o-cuerpo-f);font-weight:var(--o-fuerte);color:var(--o-texto); padding:0 var(--o-e4) var(--o-e4);line-height:1.25} .ohlat-b{display:flex;align-items:center;gap:var(--o-e3);width:100%; border:0;background:none;cursor:pointer;text-align:left; font:inherit;font-size:var(--o-cuerpo);color:var(--o-texto2); padding:var(--o-e3) var(--o-e4);border-radius:0 var(--o-radio-ctl) var(--o-radio-ctl) 0; margin-right:var(--o-e3);transition:background var(--o-mov) var(--o-curva), color var(--o-mov) var(--o-curva)} .ohlat-b:hover{background:var(--o-acento-suave);color:var(--o-texto)} .ohlat-b.on{background:var(--o-acento-suave);color:var(--o-acento-t); font-weight:var(--o-fuerte);box-shadow:inset 3px 0 0 var(--o-acento)} .ohlat-b svg{flex:0 0 auto;width:20px;height:20px} .ohlat-pie{margin-top:auto;padding:var(--o-e4) var(--o-e4) 0; border-top:1px solid var(--o-linea);display:grid;gap:var(--o-e2)} .ohlat-yo{font-size:var(--o-nota);color:var(--o-texto3);line-height:1.4} .ohlat-yo b{display:block;font-size:var(--o-cuerpo);color:var(--o-texto); font-weight:var(--o-fuerte)} .ohlat-x{border:1px solid var(--o-linea-f);background:var(--o-super); border-radius:var(--o-radio-ctl);font:inherit;font-size:var(--o-nota); color:var(--o-texto2);padding:var(--o-e2);cursor:pointer;width:100%; min-height:44px;transition:border-color var(--o-mov) var(--o-curva)} .ohlat-x:hover{border-color:var(--o-acento);color:var(--o-acento-t)} /* ── BUSCAR CON / ───────────────────────────────────────────────────────── */ .ohbus{margin:0 var(--o-e4) var(--o-e4);position:relative} /* El hueco de la derecha es para la tecla /: sin el, el texto de ayuda del campo pasa por debajo de la pastilla y se lee cortado («Buscar huesped, folio o cu/»). Medido en Chromium a 1440. */ .ohbus input{width:100%;box-sizing:border-box;font:inherit; font-size:var(--o-cuerpo);color:var(--o-texto); background:var(--o-fondo);border:1px solid var(--o-linea-f); border-radius:var(--o-radio-ctl); padding:var(--o-e2) 34px var(--o-e2) var(--o-e3);min-height:44px} .ohbus input::placeholder{color:var(--o-texto3)} .ohbus input::-webkit-search-cancel-button{display:none} .ohbus-k{position:absolute;right:var(--o-e2);top:50%;transform:translateY(-50%); font-size:var(--o-nota);color:var(--o-texto3);pointer-events:none; border:1px solid var(--o-linea-f);border-radius:6px;padding:0 5px;line-height:17px} .ohbus input:focus+.ohbus-k{display:none} .ohbus-r{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5; background:var(--o-super);border:1px solid var(--o-linea-f); border-radius:var(--o-radio);box-shadow:var(--o-sombra-alta); overflow:hidden;max-height:320px;overflow-y:auto} .ohbus-r button{display:block;width:100%;text-align:left;border:0;background:none; font:inherit;font-size:var(--o-cuerpo);color:var(--o-texto); padding:var(--o-e2) var(--o-e3);cursor:pointer; border-bottom:1px solid var(--o-linea)} .ohbus-r button:last-child{border-bottom:0} .ohbus-r button:hover{background:var(--o-acento-suave)} .ohbus-r button span{display:block;font-size:var(--o-nota);color:var(--o-texto3)} .ohbus-v{padding:var(--o-e2) var(--o-e3);font-size:var(--o-nota);color:var(--o-texto3)} /* ── LA BARRA INFERIOR DE TELÉFONO ──────────────────────────────────────── */ .ohbot{display:none} body.ohm-opera .ohbot{ position:fixed;left:0;right:0;bottom:0;z-index:45; display:flex;background:var(--o-super); border-top:1px solid var(--o-linea); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -1px 0 var(--o-linea)} @media(min-width:1180px){body.ohm-opera .ohbot{display:none}} .ohbot-b{flex:1 1 0;min-width:0;border:0;background:none;cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;padding:var(--o-e2) 2px;min-height:var(--o-abajo); font:inherit;font-size:10px;font-weight:var(--o-fuerte); color:var(--o-texto3);transition:color var(--o-mov) var(--o-curva)} .ohbot-b svg{width:22px;height:22px} .ohbot-b.on{color:var(--o-acento-t)} .ohbot-b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} /* ── LA BARRA FINA DE PROGRESO (sección 3, punto 4 del encargo) ─────────── */ .ohprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:70; background:transparent;pointer-events:none;opacity:0; transition:opacity var(--o-mov) var(--o-curva)} .ohprog.on{opacity:1} .ohprog i{display:block;height:100%;width:0;background:var(--o-acento); transition:width var(--o-mov-hoja) var(--o-curva)} /* ── ESQUELETOS ─────────────────────────────────────────────────────────── */ .ohsk{border-radius:6px;background:linear-gradient(90deg, var(--o-linea) 0%,rgba(22,35,44,.04) 50%,var(--o-linea) 100%); background-size:200% 100%;animation:ohskm 1.2s linear infinite;height:14px} @keyframes ohskm{0%{background-position:100% 0}100%{background-position:-100% 0}} @media(prefers-reduced-motion:reduce){.ohsk{animation:none}} .ohsk-l{height:var(--o-cifra)} .ohsk-m{height:20px} .ohsk-c{background:var(--o-super);border:1px solid var(--o-linea); border-radius:var(--o-radio);padding:var(--o-e3);display:grid;gap:var(--o-e2)} /* ── EL AVISO DISCRETO QUE SE VA SOLO ───────────────────────────────────── */ .ohtoast{position:fixed;left:50%;bottom:calc(var(--o-abajo) + 16px); transform:translate(-50%,16px);z-index:75; background:var(--o-texto);color:#fff;border-radius:var(--o-radio-ctl); padding:var(--o-e3) var(--o-e4);box-shadow:var(--o-sombra-alta); font-size:var(--o-cuerpo);max-width:min(92vw,520px); display:flex;align-items:center;gap:var(--o-e3); opacity:0;pointer-events:none; transition:opacity var(--o-mov-hoja) var(--o-curva), transform var(--o-mov-hoja) var(--o-curva)} .ohtoast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} @media(min-width:1180px){.ohtoast{bottom:24px;left:calc(50% + (var(--o-lateral)/2))}} .ohtoast button{border:0;background:none;font:inherit;font-size:var(--o-cuerpo); font-weight:var(--o-fuerte);color:#7FD4E0;cursor:pointer;flex:0 0 auto} /* ══ COMPONENTES DE PANTALLA ═══════════════════════════════════════════════ Son las piezas que las pantallas de recepción arman. Viven aquí y no en el JS de cada pieza porque las comparten Hoy, la hoja de reserva y —en la ronda 2— el calendario y el corte. */ /* El encabezado de pantalla: quién y cuándo a la izquierda, la ÚNICA acción principal a la derecha (principio 2 del estándar). */ .ohcab{display:flex;align-items:flex-start;justify-content:space-between; gap:var(--o-e4);flex-wrap:wrap;margin:0 0 var(--o-e5)} .ohcab h1{font-size:var(--o-cifra);font-weight:var(--o-fuerte); color:var(--o-texto);margin:0;line-height:1.15;letter-spacing:-.01em} .ohcab-s{font-size:var(--o-cuerpo);color:var(--o-texto3);margin-top:var(--o-e1)} /* ENCARGO 906 · LAS ACCIONES DEL ENCABEZADO VAN JUNTAS, NO REPARTIDAS. TEXTUAL DE EDUARDO (4-oct 20:59, mirando la vista previa de vivo/mejoras): «el boton Reporte de habitaciones y el de Nueva reserva salen separados y se ve raro. Tienen que ir juntos, en un mismo grupo arriba a la derecha, misma altura, mismo radio, alineados al mismo nivel, en Hoy y en Calendario.» LA CAUSA, medida y no supuesta: .ohcab es flex con space-between y hasta hoy tenia DOS hijos —el bloque del titulo y «Nueva reserva»—, que es para lo que se escribio. app-77 le cuelga un TERCER hijo, y space-between reparte el sobrante entre los tres: a 1440 ese sobrante cae justo entre los dos botones y los separa medio encabezado. No era el boton nuevo el que estaba mal puesto, era el reparto. EL GRUPO los vuelve UN solo hijo, asi que el sobrante regresa a donde siempre estuvo: entre el titulo y las acciones. La misma altura y el mismo radio ya los daba .ohb (min-height 44px, --o-radio-ctl) para los dos botones; lo que faltaba era el mismo nivel, y eso es align-items:center contra el flex-start del contenedor, que alineaba por la ceja del texto. VACIO NO EXISTE: el esqueleto del calendario y el Hoy del monitor pintan el grupo sin botones dentro —uno porque la pantalla todavia carga, el otro porque ahi no hay «Nueva reserva»— y sin :empty el gap de .ohcab dejaria un hueco a la derecha del titulo. */ .ohcab-ac{display:flex;align-items:center;justify-content:flex-end; gap:var(--o-e2);flex-wrap:wrap;max-width:100%} .ohcab-ac:empty{display:none} /* Botones. Uno lleno por pantalla; el resto contorno o texto. */ .ohb{font:inherit;font-size:var(--o-cuerpo);font-weight:var(--o-fuerte); border-radius:var(--o-radio-ctl);cursor:pointer;min-height:44px; padding:0 var(--o-e4);display:inline-flex;align-items:center; justify-content:center;gap:var(--o-e2); transition:background var(--o-mov) var(--o-curva), border-color var(--o-mov) var(--o-curva), color var(--o-mov) var(--o-curva)} .ohb-p{background:var(--o-acento);color:#fff;border:1px solid var(--o-acento)} .ohb-p:hover{background:#13707F;border-color:#13707F} .ohb-s{background:var(--o-super);color:var(--o-texto2); border:1px solid var(--o-linea-f)} .ohb-s:hover{border-color:var(--o-acento);color:var(--o-acento-t)} /* RONDA 3 · EL BOTON DE TEXTO ES TINTA, no marca: el teal sobre el papel da 4.07:1 y el piso son 4.5. Es «Contar caja y cerrar turno», o sea la accion con la que recepcion cierra su dinero. */ .ohb-t{background:none;border:0;color:var(--o-acento-t);padding:0 var(--o-e2)} .ohb-t:hover{text-decoration:underline} .ohb[disabled]{opacity:.5;cursor:default} .ohb[disabled]:hover{background:var(--o-acento);border-color:var(--o-acento)} .ohb-s[disabled]:hover{background:var(--o-super);border-color:var(--o-linea-f); color:var(--o-texto2)} /* La tarjeta, única forma de contenedor. */ .ohc{background:var(--o-super);border:1px solid var(--o-linea); border-radius:var(--o-radio);box-shadow:var(--o-sombra); padding:var(--o-e4);min-width:0} .ohc-t{font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-texto3); margin:0 0 var(--o-e3);display:flex;align-items:center; justify-content:space-between;gap:var(--o-e2)} .ohc-t b{font-size:var(--o-cuerpo-f);color:var(--o-texto);font-weight:var(--o-fuerte)} /* La cifra héroe: una por pantalla y contesta la pregunta de la pantalla. */ .ohhero{display:flex;align-items:flex-end;gap:var(--o-e5);flex-wrap:wrap; background:var(--o-super);border:1px solid var(--o-linea); border-radius:var(--o-radio);box-shadow:var(--o-sombra); padding:var(--o-e4);margin:0 0 var(--o-e4)} .ohhero-n{font-size:var(--o-cifra);font-weight:var(--o-fuerte); color:var(--o-texto);line-height:1;letter-spacing:-.02em} .ohhero-n i{font-style:normal;font-size:var(--o-titulo);color:var(--o-texto3); font-weight:var(--o-normal)} .ohhero-e{font-size:var(--o-cuerpo);color:var(--o-texto2);margin-top:var(--o-e1)} .ohhero-d{flex:1 1 180px;min-width:120px} .ohbarra{height:6px;border-radius:999px;background:var(--o-linea);overflow:hidden} .ohbarra i{display:block;height:100%;background:var(--o-acento); border-radius:999px;transition:width var(--o-mov-hoja) var(--o-curva)} /* El estado de los canales: la confianza se ve (principio 5). */ .ohsync{display:inline-flex;align-items:center;gap:var(--o-e2); font-size:var(--o-nota);color:var(--o-texto3)} .ohsync i{width:8px;height:8px;border-radius:50%;background:var(--o-bien); flex:0 0 auto} .ohsync.va i{background:var(--o-atencion)} .ohsync.mal i{background:var(--o-alarma)} /* Las tres listas del día. */ .ohg3{display:grid;gap:var(--o-e3);grid-template-columns:1fr;margin:0 0 var(--o-e4)} @media(min-width:768px){.ohg3{grid-template-columns:repeat(3,1fr)}} .ohg2{display:grid;gap:var(--o-e3);grid-template-columns:1fr;margin:0 0 var(--o-e4)} @media(min-width:768px){.ohg2{grid-template-columns:1fr 1fr}} /* Un renglón de huésped: nombre, cuarto, noches, canal, saldo. */ .ohr{display:flex;align-items:center;gap:var(--o-e3);width:100%; text-align:left;border:0;border-top:1px solid var(--o-linea); background:none;padding:var(--o-e3) 0;cursor:pointer;min-width:0; min-height:44px;transition:background var(--o-mov) var(--o-curva)} .ohc .ohr:first-of-type{border-top:0} .ohr:hover{background:var(--o-acento-suave)} .ohr-i{flex:1 1 auto;min-width:0} .ohr-n{display:block;font-size:var(--o-cuerpo-f);font-weight:var(--o-fuerte); color:var(--o-texto);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ohr-d{display:block;font-size:var(--o-nota);color:var(--o-texto3); margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ohr-x{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end; gap:var(--o-e1)} /* RONDA 3 · el saldo pendiente del huesped en tinta y no en marca: el ambar sobre la tarjeta blanca daba 3.38:1 y son 12 px. Es el renglon que le dice a recepcion cuanto le falta cobrarle a quien tiene enfrente. */ .ohr-s{font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-atencion-t)} /* Pastilla de canal: color suave con nombre, nunca el logotipo de un tercero. */ .ohp{display:inline-block;font-size:var(--o-nota);line-height:18px; padding:0 var(--o-e2);border-radius:999px;background:var(--o-linea); color:var(--o-texto2);max-width:120px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .ohp-casa{background:var(--o-acento-suave);color:var(--o-acento-t)} /* Estado vacío con intención: qué pasa y, si hay algo que hacer, el botón. */ .ohv{font-size:var(--o-cuerpo);color:var(--o-texto3);padding:var(--o-e2) 0} /* Cifras en fila: inicial, entradas, salidas, conteo. */ .ohnum{display:flex;gap:var(--o-e5);flex-wrap:wrap;margin:var(--o-e3) 0 0} .ohnum>div{min-width:0} .ohnum b{display:block;font-size:var(--o-titulo);font-weight:var(--o-fuerte); color:var(--o-texto);line-height:1.2} .ohnum span{display:block;font-size:var(--o-nota);color:var(--o-texto3)} .ohcifra{font-size:var(--o-cifra);font-weight:var(--o-fuerte);color:var(--o-texto); line-height:1.1;letter-spacing:-.02em} /* Pendientes: una lista de pendientes se lee como lista, no como tarjetas. */ .ohpend{display:grid;gap:0} .ohpend button,.ohpend div.ohpend-r{display:flex;align-items:center; justify-content:space-between;gap:var(--o-e3);width:100%;text-align:left; border:0;border-top:1px solid var(--o-linea);background:none; font:inherit;font-size:var(--o-cuerpo);color:var(--o-texto); padding:var(--o-e3) 0;min-height:44px;cursor:pointer} .ohpend>:first-child{border-top:0} .ohpend div.ohpend-r{cursor:default} .ohpend b{font-weight:var(--o-fuerte);flex:0 0 auto;color:var(--o-texto)} .ohpend button:hover{background:var(--o-acento-suave)} /* Error en lenguaje humano, con reintento. */ .oherr{background:var(--o-super);border:1px solid var(--o-linea-f); border-left:3px solid var(--o-alarma);border-radius:var(--o-radio); padding:var(--o-e3) var(--o-e4);font-size:var(--o-cuerpo);color:var(--o-texto2); display:flex;align-items:center;gap:var(--o-e3);flex-wrap:wrap; margin:0 0 var(--o-e4)} /* ══ LA HOJA LATERAL ══════════════════════════════════════════════════════ 480 px a la derecha en escritorio, pantalla completa en teléfono. Es la forma de toda captura de recepción a partir de aquí: la hoja de nueva reserva de esta ronda y la ficha del huésped de la ronda 2. */ .ohsh{position:fixed;inset:0;z-index:65;display:none} .ohsh.on{display:block} .ohsh-f{position:absolute;inset:0;background:rgba(22,35,44,.42); opacity:0;transition:opacity var(--o-mov-hoja) var(--o-curva)} .ohsh.on .ohsh-f{opacity:1} .ohsh-p{position:absolute;top:0;right:0;bottom:0;width:min(480px,100vw); background:var(--o-super);box-shadow:var(--o-sombra-alta); display:flex;flex-direction:column; transform:translateX(100%); transition:transform var(--o-mov-hoja) var(--o-curva)} .ohsh.on .ohsh-p{transform:translateX(0)} .ohsh-hd{display:flex;align-items:flex-start;justify-content:space-between; gap:var(--o-e3);padding:var(--o-e4);border-bottom:1px solid var(--o-linea)} .ohsh-hd h2{margin:0;font-size:var(--o-titulo);font-weight:var(--o-fuerte); color:var(--o-texto);line-height:1.2} .ohsh-hd p{margin:var(--o-e1) 0 0;font-size:var(--o-nota);color:var(--o-texto3)} .ohsh-x{border:0;background:none;cursor:pointer;font-size:var(--o-titulo); line-height:1;color:var(--o-texto3);width:44px;height:44px;flex:0 0 auto; border-radius:var(--o-radio-ctl)} .ohsh-x:hover{background:var(--o-linea);color:var(--o-texto)} .ohsh-b{flex:1 1 auto;overflow-y:auto;padding:var(--o-e4); display:grid;gap:var(--o-e4);align-content:start} .ohsh-pie{flex:0 0 auto;padding:var(--o-e4);border-top:1px solid var(--o-linea); display:flex;gap:var(--o-e3);align-items:center; padding-bottom:calc(var(--o-e4) + env(safe-area-inset-bottom))} .ohsh-pie .ohb-p{flex:1 1 auto} /* Campos. Etiqueta en tipo oración, siempre presente y siempre ligada. */ .ohf{display:grid;gap:var(--o-e1);min-width:0} .ohf>label{font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-texto2)} .ohf input,.ohf select,.ohf textarea{ font:inherit;font-size:var(--o-cuerpo-f);color:var(--o-texto); background:var(--o-super);border:1px solid var(--o-linea-f); border-radius:var(--o-radio-ctl);padding:var(--o-e2) var(--o-e3); min-height:44px;width:100%;box-sizing:border-box; transition:border-color var(--o-mov) var(--o-curva)} .ohf input:hover,.ohf select:hover{border-color:var(--o-texto3)} .ohf input:focus,.ohf select:focus{border-color:var(--o-acento)} .ohf-n{font-size:var(--o-nota);color:var(--o-texto3)} .ohf-m{font-size:var(--o-nota);color:var(--o-alarma);font-weight:var(--o-fuerte)} .ohf.mal input,.ohf.mal select{border-color:var(--o-alarma)} .ohf2{display:grid;gap:var(--o-e3);grid-template-columns:1fr 1fr} /* El total en vivo. */ .ohtot{background:var(--o-fondo);border-radius:var(--o-radio); padding:var(--o-e3) var(--o-e4);display:grid;gap:var(--o-e2)} .ohtot-r{display:flex;justify-content:space-between;gap:var(--o-e3); font-size:var(--o-cuerpo);color:var(--o-texto2)} .ohtot-r.f{font-size:var(--o-cuerpo-f);font-weight:var(--o-fuerte); color:var(--o-texto);border-top:1px solid var(--o-linea);padding-top:var(--o-e2)} /* Más detalles. */ .ohmas{border-top:1px solid var(--o-linea);padding-top:var(--o-e3)} .ohmas>summary{cursor:pointer;font-size:var(--o-cuerpo);font-weight:var(--o-fuerte); color:var(--o-acento-t);min-height:44px;display:flex;align-items:center; list-style:none} .ohmas>summary::-webkit-details-marker{display:none} .ohmas>summary::after{content:"+";margin-left:var(--o-e2);font-size:var(--o-cuerpo-f)} .ohmas[open]>summary::after{content:"-"} .ohmas-b{display:grid;gap:var(--o-e4);padding-top:var(--o-e3)} /* La hoja de atajos (tecla ?). */ .ohkeys{display:grid;gap:var(--o-e2)} .ohkeys>div{display:flex;align-items:center;gap:var(--o-e3); font-size:var(--o-cuerpo);color:var(--o-texto2)} .ohkeys kbd{font:inherit;font-size:var(--o-nota);font-weight:var(--o-fuerte); border:1px solid var(--o-linea-f);border-bottom-width:2px; border-radius:6px;padding:1px 7px;color:var(--o-texto); background:var(--o-fondo);min-width:22px;text-align:center;flex:0 0 auto} /* ══════════════════════════════════════════════════════════════════════════ RONDA 1.1 · LA LISTA DE ARQUI, PUNTO POR PUNTO Encargo 768 · corrida 453 · 30-sep-2026 · misma rama y mismo PR que el 758 La ronda 1 saco 6.2 de 10 contra una meta de 7. Los catorce puntos que Arqui devolvio estan aqui y en app-54, app-55 y app-56, cada uno con su numero. Va al FINAL del archivo a proposito: donde hay que cambiar una regla ya escrita arriba, gana esta por orden de cascada y la de arriba queda a la vista para saber de que se venia. Lo que es nuevo —la franja de cuatro cifras, el encabezado de telefono, el bloque del cuarto— se declara aqui una sola vez. ══════════════════════════════════════════════════════════════════════════ */ /* ── 5 · UNA SOLA FAMILIA, Y LA CAUSA MEDIDA ───────────────────────────── Arqui midio «nombres de huesped y cifras de las listas en Arial/Helvetica, el resto en IBM Plex». MEDIDO en Chromium el 30-sep a 1440 LEYENDO EL ESTILO CALCULADO, no suponiendo: 18 elementos salian con fontFamily «Arial» exactamente —.ohr-n, .ohr-d y .ohp—, y los tres viven DENTRO de