/* ===================================================================== Laboratorio - Armazon Franja de entorno, cabecera, contenido y pie. Parte de la hoja de estilos del Laboratorio, que se sirve en varios archivos enlazados en orden desde src/views/_estilos.php. El orden importa: la cascada es la concatenacion de todos ellos. ===================================================================== */ /* -------------------------------------------------------------------- Franja de entorno Igual que en legacy_blue: solo se pinta fuera de produccion, para que nadie confunda la copia de pruebas con la sala real. -------------------------------------------------------------------- */ .franja-entorno { background: var(--rojo); color: #fff; text-align: center; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; } /* -------------------------------------------------------------------- Cabecera -------------------------------------------------------------------- */ .cabecera { position: relative; z-index: 100; background: var(--banda); color: #fff; box-shadow: var(--sombra); /* La línea de la sala, cruzando el pie de la banda. Va con --acento y no con --acento-banda porque este borde se ve contra el contenido, que es claro, no contra la banda. */ border-bottom: 3px solid var(--acento); } .cabecera-int { max-width: 1500px; margin: 0 auto; padding: 0 18px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-height: 54px; } /* El primer renglon de la cabecera: marca, sala, usuario, campanita y el boton del menu. En pantalla ancha esto NO es una caja. `display: contents` la disuelve y sus cinco hijos siguen siendo elementos flex de .cabecera-int, con el mismo `order` y el mismo gap de siempre: la cabecera de escritorio no cambio en nada. Existe por el telefono. Ahi .cabecera-int arma varios renglones -el menu, el buscador y el bloque de la derecha ocupan la fila entera con `flex: 0 0 100%`- y eso traia un problema: envolver NO achica. Flexbox primero corta el renglon y recien despues reparte lo que sobra o lo que falta, asi que un nombre largo -«Todas las salas»- empujaba en vez de ceder y la hamburguesa se caia sola al renglon de abajo, debajo del FS. Agrupados en esta caja, el primer renglon es UN renglon y no se corta nunca: lo que no entra se achica. Cual se achica lo decide angosto.css. --------------------------------------------------------------------- */ /* La barra se queda arriba mientras se recorre la pantalla: el menu, la sala y la campanita a un golpe de vista en cualquier parte de una lista de doscientas filas, sin volver al tope. `sticky` y no `fixed`: la barra sigue ocupando su lugar en el flujo, asi que no hay que compensarla con un margen de arriba que despues quede viejo. Donde no se pega -el telefono, la impresion, la pared, que no tiene cabecera- vuelve sola a ser una barra comun. POR QUE VA ATADA A `html.js` --------------------------- Lo que se pega DENTRO del contenido -el titulo con las pestañas de Reparaciones y de Base Slots- tiene que empezar JUSTO debajo de la barra, no atras. Ese "justo debajo" es --alto-cabecera, y la barra no mide siempre lo mismo: con seis secciones, entre los 700 y los 1000 px el menu se va a dos renglones y pasa de 57 a mas de 100. Medido: 56 a 1280 px, 101 a 900, 125 a 780. El valor exacto solo lo sabe el navegador, y quien se lo pregunta es fs.js. Sin JavaScript no hay quien mida, y una barra pegada con una medida equivocada tapa las pestañas. Asi que sin JavaScript la barra no se pega y la pantalla queda exactamente como estaba: se pierde una comodidad, no se rompe nada. Es la misma regla que el menu del telefono. El z-index la deja por encima de todo lo que pasa por debajo. Los desplegables que nacen dentro de la barra -la campanita- son hijos y viajan con ella; los del contenido se abren siempre hacia abajo, lejos. */ html.js .cabecera { position: sticky; top: 0; } /* Cuando el navegador trae algo a la vista por su cuenta -Tab hasta un campo que estaba abajo del borde- deja libre lo que ocupan las barras pegadas. Sin esto, el campo que acaba de recibir el foco aparece justo atras de una de ellas y parece que el Tab no hizo nada. Son DOS sumadas: la barra de la aplicacion y, en la ficha de reparacion, su cabecera, que tambien se queda a la vista. --alto-ficha vale cero en todas las demas pantallas. */ html.js { scroll-padding-top: calc(var(--alto-cabecera) + var(--alto-ficha)); } .cabecera-barra { display: contents; } .marca { order: 1; color: #fff; font-family: var(--fuente-display); font-weight: 600; font-size: 1.12rem; letter-spacing: .05em; white-space: nowrap; } /* La sala, pegada a la marca. Va en BLANCO y no en el color de la sala, que fue lo primero que se probó: el color claro sobre la banda da 8:1 de contraste, de sobra, pero es el mismo tono que el fondo y el nombre se diluye igual. Un número no arregla lo que el ojo ve. El color de la sala sigue estando en la cabecera, donde sí se despega: la línea que cruza el pie de la banda y la barra de la sección abierta. El blanco va al 80%: la marca es blanco pleno, y esa diferencia de brillo ordena las dos -primero el sistema, después la sala-. Y va del tamaño de la marca, separada por una barra fina, porque con el tamaño del menú se leía como una opción más: misma condensada, mismas mayúsculas, mismo cuerpo. La sala no es un lugar al que se va, es dónde estás; tiene que leerse pegada a la marca y no en la fila de al lado. El marcado son dos: una pastilla para quien tiene una sola sala y un selector para quien las ve todas; las dos se dibujan igual para que la cabecera no cambie de forma según el rol de quien mira. */ .sala-marca { order: 1; display: flex; align-items: center; /* Encerrada entre dos barras. La de la izquierda la separa de la marca, la de la derecha del menú: así la sala no se lee ni como parte del nombre del sistema ni como la primera opción del menú, que es exactamente entre esas dos cosas donde está. El margen negativo la acerca a la marca -el gap de la cabecera son 20px- para que las barras queden entre los tres bloques y no colgando. */ margin-left: -8px; padding: 0 11px; border-left: 1px solid rgba(255, 255, 255, .25); border-right: 1px solid rgba(255, 255, 255, .25); } .marca:hover { text-decoration: none; opacity: .9; } .nav { order: 2; display: flex; gap: 0; flex-wrap: wrap; flex: 1; align-self: stretch; } /* Los enlaces ocupan todo el alto de la banda, que es lo que permite marcar el abierto con una barra abajo en vez de con una pastilla rellena. */ .nav a { display: flex; align-items: center; color: #c8d4e4; padding: 0 13px; font-family: var(--fuente-display); font-size: .97rem; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; } .nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; } /* El acceso a la pared es sólo un ícono, y entre enlaces de texto gris se perdía. Va blanco dentro de un recuadro con el borde del color de la sala, como la línea de la banda: se lee como botón en los dos temas, porque la banda es oscura en ambos. Sin display:block el SVG se alinea como texto y queda corrido hacia arriba. */ .nav-pared svg { display: block; } .nav-pared-icono { display: flex; align-items: center; justify-content: center; width: 36px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px var(--acento-banda); color: #fff; } .nav a.nav-pared:hover { background: none; } .nav a.nav-pared:hover .nav-pared-icono { background: rgba(255, 255, 255, .22); } /* La sección abierta: letra blanca y una barra del color de la sala abajo. La barra va con --acento-banda, la variante clara: esta SÍ se dibuja encima de la banda, y en el tema claro el acento a secas es oscuro sobre oscuro. */ .nav a.activo { color: #fff; font-weight: 600; box-shadow: inset 0 -3px 0 var(--acento-banda); } /* Botón hamburguesa: escondido en pantalla ancha, aparece solo en el teléfono Y solo con JavaScript (ver el bloque @media). Las tres barras se dibujan con el propio span más su ::before y ::after, sin imágenes. Es un