/* estilo-11.css - RONDA 2 DEL ESTANDAR DE RECEPCION V2 (encargo 779, corrida 457). ══════════════════════════════════════════════════════════════════════════ VA DESPUES DE estilo-10.css Y DEPENDE DE QUE ASI SEA: redeclara reglas suyas con la MISMA especificidad, asi que gana por orden. No trae ni un color propio: todo sale de los tokens del sistema (estilo-10), para que los cinco temas sigan mandando. POR QUE UN ARCHIVO NUEVO Y NO AL FINAL DE estilo-10: estilo-10 va en 48,306 bytes y el tope por pieza son 60 KB. Meterle la ronda 2 lo deja a 4 KB del tope, o sea a una ronda de tener que partirlo a media entrega. ══════════════════════════════════════════════════════════════════════════ */ /* ── B2 · LAS TRES COLUMNAS SE CORTABAN, Y NO SOLO A 834 ───────────────── TEXTUAL DE ARQUI: «A 834 las tres columnas cortan nombres ("Famili...", "Estándar King,..."): a menos de 1000 px las listas van en una columna, o en dos con la tercera abajo.» MEDIDO EN CHROMIUM ANTES DE TOCAR NADA (corrida 457, ?demo=1, recepcion), contando elementos con scrollWidth mayor que clientWidth dentro de #main: 1440 px -> contenido 1200, columnas de 371, .ohr-i de 206 -> 0 recortes 1180 px -> contenido 940, columnas de 284, .ohr-i de 119 -> 8 recortes 834 px -> contenido 834, columnas de 254, .ohr-i de 89 -> 9 recortes 390 px -> una columna de 362 -> 1 recorte O SEA QUE EL DEFECTO NO ES DE 834: ES DE 1180 PARA ABAJO, y justo a 1180 la barra lateral de 240 px se come el ancho que faltaba. Una regla escrita a «menos de 1000 px» habria dejado 1180 cortando nombres y la ronda 3 lo habria devuelto otra vez. POR ESO LA REGLA NO MIDE LA VENTANA, MIDE LA COLUMNA: repeat(auto-fit, minmax(330px,1fr)) parte la rejilla cuando la COLUMNA baja de 330 px, que es donde .ohr-i deja de caber, este la barra lateral puesta o no. El resultado medido: 1200 -> 3 columnas de 371; 940 -> 2 de 458 con la tercera abajo; 834 -> 2 de 405; 362 -> 1 de 362. Exactamente lo que pidio Arqui, y ademas a 1180, que no estaba en el encargo porque no se habia medido. El min() es el cinturon: en una ventana mas angosta que 330 px la rejilla se desbordaria a lo ancho en vez de encogerse. */ .ohg3{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))} @media(min-width:768px){.ohg3{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}} .ohg2{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))} @media(min-width:768px){.ohg2{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}} /* ── B3 · EL HUECO DEL FLOTANTE, QUE YA NO HACE FALTA ──────────────────── Aqui vivian las tres reglas del flotante: el hueco de 68 px al final del contenido, el encogido a circulo al desplazar y su transicion. La ronda 3 QUITO el flotante (estilo-10, «AQUI VIVIA EL BOTON FLOTANTE»), asi que las tres se fueron con el: reservar un hueco para un boton que no existe deja una franja en blanco al final de cada pantalla, y una transicion sin nodo que la use es peso muerto que el que sigue tiene que leer para descubrir que no hace nada. La clase ohm-fab tambien se dejo de prender (app-57). */ /* ── A · EL ESQUELETO DE LA SECCION QUE ABRE ───────────────────────────── «cada seccion abre su pantalla, con barra fina de progreso y esqueleto». La barra fina es ohfProg (app-54) y ya existia; esto es el esqueleto. Usa la MISMA familia .ohsk que ya tenia Hoy: una segunda familia de esqueletos es una segunda cosa que se desincroniza. */ .ohesq{padding-top:var(--o-e3)} .ohesq .ohsk{margin-bottom:var(--o-e3)} .ohsk-t{height:28px;width:min(46%,320px);margin-bottom:var(--o-e4)} .ohesq .ohsk-c{padding:var(--o-e4);display:grid;gap:var(--o-e3)} .ohesq .ohsk-c .ohsk{height:14px;margin:0} .ohesq .ohsk-c .ohsk:last-child{width:62%} .oheq-oculto{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} /* ── B2 bis · LA NOTA DE LA CUARTA CIFRA TAMPOCO SE CORTA ──────────────── MEDIDO con la rejilla ya arreglada: quedaba UN recorte a 1180 y a 390, y no era de las tres columnas: era .ohfr-s, la nota de «Libres para vender» («sin Estándar King libres · 1 fuera de servicio»), que pedia 234 px y tenia 147. Traia ellipsis, o sea que se cortaba A PROPOSITO — y una nota cortada con puntos suspensivos es exactamente el defecto que Arqui nombro con «Famili...»: dice que hay algo mas y no lo dice. Son dos renglones de nota, no un titulo: caben. */ .ohfr-s{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35} /* ── B4 · LOS CONTROLES PROPIOS DE LA HOJA ─────────────────────────────── Las pastillas de origen reusan .ohpz, que la ronda 1.1 ya hizo para la categoria: una segunda familia de pastillas es una segunda cosa que mantener. Lo unico nuevo es la lista de cuartos. POR QUE UNA REJILLA Y NO UNA LISTA DE RENGLONES: un cuarto se elige por su NUMERO, y los numeros en rejilla se recorren de un vistazo. La rejilla se parte sola por ancho de celda, igual que las columnas de Hoy. */ .ohcu{display:grid;gap:var(--o-e2); grid-template-columns:repeat(auto-fill,minmax(min(132px,100%),1fr))} .ohcu-b{display:grid;gap:2px;text-align:left;cursor:pointer;font:inherit; background:var(--o-super);border:1px solid var(--o-linea-f); border-radius:var(--o-radio-ctl);padding:var(--o-e3);min-height:44px; color:var(--o-texto); transition:border-color var(--o-mov) var(--o-curva), background var(--o-mov) var(--o-curva)} .ohcu-b:hover{border-color:var(--o-acento)} .ohcu-b.on{border-color:var(--o-acento);background:var(--o-acento-suave); box-shadow:inset 0 0 0 1px var(--o-acento)} .ohcu-n{font-size:var(--o-cuerpo-f);font-weight:var(--o-fuerte);line-height:1.2} .ohcu-t{font-size:var(--o-nota);color:var(--o-texto3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* El estado se dice CON PALABRA, no solo con color: un color sin palabra deja fuera a quien no los distingue, y esta es la decision que aprueba o rechaza una reserva. */ .ohcu-e{font-size:var(--o-nota);font-weight:var(--o-fuerte);color:var(--o-bien)} .ohcu-b.ocu{background:var(--o-fondo);border-style:dashed} .ohcu-b.ocu .ohcu-n,.ohcu-b.ocu .ohcu-t{color:var(--o-texto3)} .ohcu-b.ocu .ohcu-e{color:var(--o-alarma)} .ohcu-d .ohcu-n{color:var(--o-texto3)} /* La explicacion del boton apagado. Va junto al boton —es el .ohsh-k del pie, el mismo hueco donde vive «Ctrl + Enter para guardar»— y cuando explica un boton apagado se pone del color de atencion, porque ya no es una ayuda: es la razon por la que no se puede seguir. */ .ohsh-k-av{color:var(--o-atencion);font-weight:var(--o-fuerte)} /* Y LA EXPLICACION VA EN SU PROPIO RENGLON, MEDIDO ROTO PRIMERO. Escrita como estaba —en el hueco del atajo, que es «flex:0 0 auto» con «margin-right:auto»— una frase larga empujaba Cancelar y Guardar fuera del pie: en la captura de 1440 el boton salia cortado a la mitad («Ca»). Y ABAJO DE 1180 NI SIQUIERA SE VEIA, porque ese hueco es display:none en telefono — que es exactamente lo que Arqui nombro con «deja el boton deshabilitado sin explicar abajo». Asi que cuando el texto es la RAZON de un boton apagado, y solo entonces, ocupa su propio renglon completo encima de los botones, en los tres anchos. El atajo «Ctrl + Enter para guardar» se queda como estaba: ese si es una ayuda al lado del boton, no un impedimento. */ .ohsh-pie{flex-wrap:wrap} .ohsh-pie .ohsh-k-av{display:block;flex:1 1 100%;order:-1;margin-right:0; margin-bottom:var(--o-e1)}