/* LAS FORMAS DEL SISTEMA. Cuatro maneras de acomodar la misma pantalla. Se elige por cliente en Personalización → Cómo se ve, y lo guardado está en settings.negocio.apariencia.forma (ver negocio.py). COMO FUNCIONA ------------- app.js le pone data-forma="..." al . Todo lo de este archivo cuelga de ese atributo. La forma 'clasico' no aparece acá: es el CSS de siempre, sin nada encima. LA REGLA DE ORO DE ESTE ARCHIVO ------------------------------- ACA NO SE TOCA NINGUNA PANTALLA. Solo el armazón: la barra del menú, la cabecera, el espaciado y el aspecto de las tarjetas. El día que necesites mover un botón adentro de una pantalla para que una forma funcione, esa forma está mal pensada: lo que cambia es dónde está cada cosa en el ARMAZON, no en el contenido. Si agregás una forma: agregala a negocio.FORMAS, escribila acá, y fijate que el corte de celular de abajo la contemple. EL CELULAR MANDA Y VUELVE A LO CLASICO -------------------------------------- Abajo de 760px ninguna de estas formas se aplica. En un teléfono el menú es un cajón que se abre, y una barra horizontal con doce entradas o un menú de iconos de 76px no entran ni sirven. Está al final del archivo, en un solo lugar. */ /* ====================================================== LOS ICONOS Comun a las cuatro formas. El SVG toma el color del texto que lo rodea, asi anda en claro y en oscuro sin que nadie haga nada. */ .ic svg { width: 1.15em; height: 1.15em; display: block; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ic { display: inline-flex; align-items: center; justify-content: center; } .ic-letra { width: 1.5em; height: 1.5em; border-radius: 5px; font-size: .68em; font-weight: 700; letter-spacing: -.02em; background: var(--card-hover); color: var(--text-dim); } .side-item.on .ic-letra { background: var(--brand, #EF9F27); color: #fff; } /* ============================================= FORMA: BARRA ARRIBA El menu deja de estar al costado y pasa a ser una fila arriba de todo. El contenido gana los 238px que ocupaba la barra, que es lo que se nota en las tablas anchas. El menu se dibuja PLANO (sin grupos que se abren y se cierran): una fila horizontal con doce entradas y titulos de grupo adentro no se puede leer. De eso se ocupa pintarMenu() en app.js mirando la forma. */ html[data-forma="barra-arriba"] #app { flex-direction: column; } html[data-forma="barra-arriba"] .side { width: auto; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 4px; border-right: none; border-bottom: 1px solid var(--border); padding: 0 14px; height: 52px; } html[data-forma="barra-arriba"] .side-head { border-bottom: none; padding: 0 14px 0 0; flex: 0 0 auto; border-right: 1px solid var(--border); height: 100%; } html[data-forma="barra-arriba"] .side-logo img { width: 26px; height: 26px; } html[data-forma="barra-arriba"] .side-usuario { display: none; } html[data-forma="barra-arriba"] .side-nombre { white-space: nowrap; } /* El buscador de pantallas no entra en una barra. Se llega igual con el atajo de teclado, que es como lo usa el que lo usa. */ html[data-forma="barra-arriba"] .side-buscar { display: none; } html[data-forma="barra-arriba"] .side-nav { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; padding: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } html[data-forma="barra-arriba"] .side-nav::-webkit-scrollbar { height: 0; } html[data-forma="barra-arriba"] .side-nav .ni { width: auto; flex: 0 0 auto; white-space: nowrap; height: 52px; padding: 0 12px; border-radius: 0; border-bottom: 2px solid transparent; font-size: 12.5px; } html[data-forma="barra-arriba"] .side-nav .ni.on { background: transparent; box-shadow: none; border-bottom-color: var(--brand, #EF9F27); } html[data-forma="barra-arriba"] .side-nav .ni:hover { background: var(--card-hover); } /* En plano no hay grupos. Si alguno se cuela, que no ocupe lugar. */ html[data-forma="barra-arriba"] .side-grupo, html[data-forma="barra-arriba"] .side-sep { display: none; } html[data-forma="barra-arriba"] .side-sub { display: contents; } html[data-forma="barra-arriba"] .side-pie { border-top: none; padding: 0 0 0 10px; flex: 0 0 auto; border-left: 1px solid var(--border); margin-left: 6px; } html[data-forma="barra-arriba"] .side-pie .bt { flex: 0 0 auto; } /* =================================================== FORMA: PLANILLA Se van las tarjetas. Quedan rayas finas, titulos en versalita y los numeros grandes sueltos sobre el fondo. POR QUE EL FONDO DE LA TARJETA SE VA Y NO SE PONE GRIS: porque media tinta es lo peor de los dos mundos. O la tarjeta separa de verdad, o no esta. Acá la separación la hace el espacio en blanco. */ html[data-forma="planilla"] .cd { background: transparent; border: none; border-radius: 0; padding: 0 0 18px; margin-bottom: 4px; } html[data-forma="planilla"] .cd + .cd { border-top: 1px solid var(--border); padding-top: 18px; } html[data-forma="planilla"] .grilla { gap: 0 34px; } /* Los numeros grandes, sin cajita y mas aire entre ellos. */ html[data-forma="planilla"] .kpi { padding: 0; } html[data-forma="planilla"] .kpi .k { font-size: 10.5px; letter-spacing: .09em; } html[data-forma="planilla"] .kpi .v { font-size: 27px; font-weight: 700; } /* El titulo de seccion pasa a ser un renglon con raya abajo, que es lo que le da la cara de planilla. */ html[data-forma="planilla"] .seccion-tit { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; padding-bottom: 7px; margin-bottom: 2px; border-bottom: 1.5px solid var(--text); } html[data-forma="planilla"] .seccion-tit .ic { display: none; } /* Las filas de las listas, con hilo fino y numeros alineados. */ html[data-forma="planilla"] .carrito-item, html[data-forma="planilla"] .tarea-fila { border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; } html[data-forma="planilla"] .tb th { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; border-bottom: 1.5px solid var(--text); } html[data-forma="planilla"] .tb tbody tr:nth-child(even) { background: transparent; } html[data-forma="planilla"] .tb td { border-bottom: 1px solid var(--border); } /* La barra lateral, sin relleno: el menu tambien es una lista. */ html[data-forma="planilla"] .side { background: var(--bg); } html[data-forma="planilla"] .side-item { border-radius: 0; } html[data-forma="planilla"] .side-item.on { background: transparent; } /* ==================================================== FORMA: MOSAICO Todo mas grande y el menu reducido a iconos con el nombre abajo. Para tocar con el dedo y leer de lejos. ENTRA MENOS Y ESTA BIEN. Es la unica forma que a proposito muestra menos informacion: el que la usa esta parado, con una mano ocupada y a un metro de la pantalla. */ html[data-forma="mosaico"] .side { width: 84px; flex: 0 0 84px; } html[data-forma="mosaico"] .side-head { padding: 12px 6px; justify-content: center; } html[data-forma="mosaico"] .side-ident { display: none; } html[data-forma="mosaico"] .side-buscar { display: none; } html[data-forma="mosaico"] .side-nav { padding: 8px 6px; } html[data-forma="mosaico"] .side-nav .ni { flex-direction: column; gap: 4px; padding: 9px 2px; border-radius: 12px; text-align: center; line-height: 1.15; } html[data-forma="mosaico"] .side-nav .ni .ic { font-size: 20px; } html[data-forma="mosaico"] .side-nav .ni .tx { font-size: 9.5px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } html[data-forma="mosaico"] .side-grupo, html[data-forma="mosaico"] .side-sep { display: none; } html[data-forma="mosaico"] .side-sub { display: contents; } html[data-forma="mosaico"] .side-pie { flex-direction: column; } html[data-forma="mosaico"] .side-pie .bt { font-size: 11px; padding: 7px 2px; } /* EL MENU DEL MOSAICO TIENE QUE ENTRAR ENTERO. Con dos renglones por entrada, doce entradas no entran en una pantalla de notebook: las ultimas quedaban cortadas abajo y, como la barra no muestra que se puede bajar, parecian no existir. Un renglon por entrada y con puntos suspensivos si no entra. Se pierde la palabra larga ("Dónde está la plata" queda "Dónde…"), y esta bien: el icono es el que manda en esta forma, y el nombre completo aparece al pasar el mouse. */ html[data-forma="mosaico"] .side-nav .ni .tx { -webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } html[data-forma="mosaico"] .side-nav .ni { padding: 6px 2px; gap: 2px; } html[data-forma="mosaico"] .side-nav .ni .ic { font-size: 18px; } html[data-forma="mosaico"] .side-nav { gap: 1px; display: flex; flex-direction: column; } /* Y SI AUN ASI NO ENTRA, que se vea que se puede bajar. Con quince modulos prendidos no hay forma de que entren todos en una columna de 84px: va a haber que bajar. Lo que no puede pasar es que NO SE NOTE -- una barra sin marca parece una lista que termina ahi, y las ultimas pantallas desaparecen para el que la usa. Asi que en esta forma la barra del costado se ve siempre. */ html[data-forma="mosaico"] .side-nav::-webkit-scrollbar { width: 6px; } html[data-forma="mosaico"] .side-nav::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; border: 0; } html[data-forma="mosaico"] .side-nav { scrollbar-width: thin; } /* Y el contenido, al doble. */ html[data-forma="mosaico"] .top-titulo { font-size: 21px; } html[data-forma="mosaico"] .cd { border-radius: 18px; padding: 20px 22px; } html[data-forma="mosaico"] .kpi { padding: 20px 22px; } html[data-forma="mosaico"] .kpi .k { font-size: 12px; font-weight: 600; } html[data-forma="mosaico"] .kpi .v { font-size: 36px; } html[data-forma="mosaico"] .kpi .s { font-size: 12.5px; } html[data-forma="mosaico"] .g4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } html[data-forma="mosaico"] .bt { padding: 13px 22px; font-size: 15px; border-radius: 12px; } html[data-forma="mosaico"] .ip { padding: 13px 16px; font-size: 16px; border-radius: 12px; } html[data-forma="mosaico"] .chip { padding: 9px 16px; font-size: 14px; } html[data-forma="mosaico"] .carrito-item { padding: 14px 16px; font-size: 15px; } /* EL CARRITO NO SE AGRANDA, Y ES A PROPOSITO. Todo lo demas del mosaico crece. El panel de cobrar NO: tiene una altura fija (la ventana) y adentro van los totales, seis botones de medio de pago y el boton de Cobrar. Agrandando todo eso, "Cobrar" se iba abajo del borde y no se podia cobrar. Lo vio el dueno. Asi que el carrito se queda como en la forma clasica, y lo unico que crece es el TOTAL, que es el numero que se lee de lejos. */ html[data-forma="mosaico"] .pos-der .bt { padding: 10px 16px; font-size: 13px; } html[data-forma="mosaico"] .pago-b { padding: 9px 6px; font-size: 12px; } html[data-forma="mosaico"] .btn-cobrar { padding: 15px; font-size: 17px; } html[data-forma="mosaico"] .totales .ln.big { font-size: 28px; } html[data-forma="mosaico"] .pos-der .ip { padding: 9px 12px; font-size: 14px; } /* Y si aun asi no entra -- una pantalla baja, un carrito largo -- que el panel se pueda bajar en vez de cortarse. El boton de Cobrar queda siempre abajo de todo y a la vista. */ html[data-forma="mosaico"] .pos-der { overflow-y: auto; } html[data-forma="mosaico"] .seccion-tit { font-size: 15px; } html[data-forma="mosaico"] .tb td, html[data-forma="mosaico"] .tb th { padding: 12px 10px; font-size: 14px; } /* ================================================= EN EL TELEFONO, NADA Abajo de 760px el menu es un cajon que se abre encima de todo, y ninguna de las tres formas de arriba tiene sentido: una barra horizontal con doce entradas no entra, y un menu de iconos de 84px se come un cuarto de la pantalla. Asi que se vuelve a lo clasico. Va al FINAL del archivo para que gane sobre todo lo de arriba, y en un solo lugar para que agregar una forma nueva no obligue a acordarse de esto. */ @media (max-width: 760px) { html[data-forma] #app { flex-direction: row; } html[data-forma] .side { width: 260px; flex: 0 0 260px; height: auto; flex-direction: column; align-items: stretch; gap: 0; border-right: 1px solid var(--border); border-bottom: none; padding: 0; } html[data-forma] .side-head { border-bottom: 1px solid var(--border); border-right: none; padding: 14px; justify-content: flex-start; height: auto; } html[data-forma] .side-ident, html[data-forma] .side-usuario, html[data-forma] .side-buscar { display: block; } html[data-forma] .side-head { display: flex; } html[data-forma] .side-nav { display: block; padding: 8px 8px 16px; overflow-y: auto; } html[data-forma] .side-nav .ni { width: 100%; height: auto; flex-direction: row; gap: 10px; padding: 9px 10px; border-radius: 8px; border-bottom: none; text-align: left; font-size: 13px; } html[data-forma] .side-nav .ni .tx { font-size: 13px; -webkit-line-clamp: none; } html[data-forma] .side-grupo { display: flex; } html[data-forma] .side-sub { display: block; } html[data-forma] .side-pie { flex-direction: row; border-top: 1px solid var(--border); border-left: none; padding: 10px; margin-left: 0; } html[data-forma] .side-pie .bt { flex: 1; } }