/* ========================================================================== DENSIDAD DEL PANEL EN ESCRITORIO ========================================================================== QUE HACE Compacta toda la interfaz del panel a un 75% en cualquier ancho de escritorio. No es un parche para pantallas estrechas: es la densidad elegida para el panel. EMPEZO EN .80 Y BAJO A .75. El .80 se calibro a ojo dando por supuesto que se navegaba al 100%. Resulto que no: el navegador estaba al 75% de forma permanente, precisamente porque al 100% todo se veia grande. Con esa informacion la portada y /login se fijaron en .75 -- ver el bloque de la entrada, mas abajo -- y dejar el panel en .80 lo descuadraba frente a ellas. Los tres comparten ahora el mismo factor. POR QUE `zoom` Y NO REDUCIR CADA VALOR A MANO Una version anterior de este archivo bajaba a mano unos veinte tamanos fijos. Mejoraba, pero se topaba con un muro: a 943px la columna de texto de un KPI mide 69px y "Autorizados" necesita 91 a 16px de tipo. Para que entrase habria que bajar a 12px, que ya no es reducir sino esconder. El problema no era el tamano de las piezas sino la falta de pixeles CSS. `zoom` ataca eso: un contenedor con zoom .75 dentro de 943px maqueta a sus hijos como si dispusiera de 1257px, y ademas los dibuja mas pequenos. Es la misma primitiva que usa el zoom del navegador. Con ella los recortes de texto de los KPIs desaparecen sin tocar ni una tipografia. Ademas el CSS del panel tiene 902 valores en px frente a 35 en rem, asi que escalar por html{font-size} no habria movido casi nada. DOS CUIDADOS QUE HUBO QUE COMPROBAR, NO SUPONER 1. `height:100vh` NO se comporta bien bajo zoom: con zoom .8 el sidebar se quedaba en 640px sobre una ventana de 820 y dejaba un hueco de 180px abajo. Se compensa dividiendo la altura por el mismo factor. 2. El asistente EVOL (partials/evol.html) vive DENTRO de
, junto al sidebar. Aplicar el zoom a ese
tambien lo encogia (56px -> 44px). Por eso el zoom va sobre los contenedores de contenido y NUNCA sobre el
que los envuelve. POR QUE TRES SELECTORES El area de contenido no se llama igual en todas las pantallas: .content en las 7 construidas sobre el panel de inicio y .page-content en las 8 restantes. Con un solo selector se escalaria medio panel. DONDE EMPIEZA Solo desde 901px. Por debajo manda la maqueta movil, que ya tiene sus propios tamanos y donde comprimir mas seria contraproducente. PARA AJUSTAR Se tocan los DOS numeros de abajo, que tienen que ser el mismo: el valor de `zoom` y el divisor de la altura del sidebar. Van juntos por necesidad, no por estilo. No se usa una variable CSS porque dividir dentro de calc() por un var() no es fiable en todos los navegadores. IMPORTANTE AL EDITAR ESTE ARCHIVO Las plantillas piden el CSS con ?v=VERSION (app/config.py). Cambiar este archivo sin subir VERSION deja al navegador sirviendo la copia anterior y parece que el cambio "no hace nada". Ya paso dos veces. ========================================================================== */ @media (min-width: 901px) { .sidebar, .content, .page-content { zoom: .75; } /* Mismo numero que el zoom de arriba. Sin esto el sidebar se queda en el 80% de la ventana y deja un hueco visible abajo. El selector repite `main.app-shell-page > .sidebar` A PROPOSITO: esa es la forma exacta que usa components.css:823 para fijar height:100vh, y un `.sidebar` a secas pierde por especificidad. Con el selector corto la regla se escribia, se leia bien en el archivo y no aplicaba nada -- que es peor que no tenerla. */ main.app-shell-page > .sidebar { height: calc(100vh / .75); } /* El logo es la cabecera de marca. Bajo el zoom se quedaba en 106px reales (132 CSS x .8) y perdia presencia, asi que se recupera con holgura: se estrecha un poco el relleno lateral del sidebar para ganar sitio y se sube el clamp hasta llenarlo. 184 = 220 de ancho menos 18 de relleno a cada lado. El vh sigue ahi para que en ventanas muy bajas el logo ceda espacio al menu. */ .sidebar { padding-left: 18px; padding-right: 18px; } .sidebar-logo img { width: clamp(160px, 22vh, 184px); } } /* ========================================================================== DENSIDAD DE LA PAGINA DE ENTRADA (901px - 1279px) ========================================================================== La portada publica quedo fuera del ajuste de arriba: aquel escala .sidebar, .content y .page-content, y la entrada no usa ninguno de los tres -- construye sobre .entrada / .entrada-tarjeta. Resultado: el panel compactado al 80% y la portada al 100%, con el contraste a la vista. Medido a 1161x900, que es la ventana partida real de trabajo: alto de la pagina 1138px sobre una ventana de 900 -> con scroll tarjeta 560 x 1058 titulo 62px, 195px de alto en tres lineas El titulo manda: su clamp(38px, 9vw, 62px) llega al techo de 62 en cualquier pantalla por encima de ~690px de ancho. POR QUE 0.75 Y NO 0.80 COMO EL PANEL Es el primer factor con el que la portada CABE ENTERA sin desplazar: sin zoom 1138px no cabe 0.85 980px no cabe 0.80 928px no cabe por 28px 0.75 900px CABE 0.70 900px cabe, sin ganancia adicional En el panel el criterio era la proporcion entre tarjeta e icono; aqui es que lo primero que ve un visitante no le obligue a desplazarse. Por eso el numero difiere del de arriba a proposito. POR QUE SIN TOPE SUPERIOR Hubo un tope de 1279px, con este argumento: el panel es interno y su densidad puede fijarse, pero la portada la ve cualquier visitante, asi que no se le toca a quien tiene un monitor amplio. El argumento era malo y conviene dejar escrito por que, para no repetirlo. "Monitor amplio" no es lo que mide una media query. Las media queries miden PIXELES CSS, y tanto el zoom del navegador como el escalado de Windows los mueven. Un usuario con la ventana a 1255px fisicos y el navegador al 75% declara ~1673px CSS y cae fuera de la banda; el mismo usuario con escalado del sistema al 150% declara ~1116px y cae dentro. Misma pantalla, misma ventana, dos lados distintos del tope. Es decir: el tope no separaba pantallas grandes de pequenas, separaba configuraciones de zoom. Protegia a una categoria que no existe y dejaba fuera a la unica persona que habia reportado el problema. Por debajo de 901px manda la maqueta movil de entrada.css, que ya tiene sus propios tamanos. ========================================================================== */ @media (min-width: 901px) { /* El ancho se fija contra la tarjeta de /login, no a ojo. Medido a 1188x900: .access-card renderiza 500x784 y NO esta escalada (zoom 1); la portada con max-width 560 renderizaba 420x794. Ochenta pixeles de diferencia -- un 19% mas estrecha -- y por eso al lado se veia apretada. 560 / .75 = 420 render estrecha frente a login 667 / .75 = 500 render igual que login 860 / .75 = 645 render probado y descartado, demasiado Se escribe como calc(500px / .75) y no como 667px para que quede dicho QUE se persigue: 500px pintados. El divisor repite el zoom de arriba; si un dia cambia el zoom hay que cambiarlo aqui tambien. Ensanchar no la alarga, la ACORTA: cabe mas por linea, asi que el h1 baja de tres lineas a dos. 719px de alto frente a los 794 de antes. Gana a los 560px de entrada.css por orden de carga, no por especificidad: base.html carga esta hoja despues del bloque css de la plantilla. Sin !important a proposito. El parrafo no se toca: su max-width de 44ch en entrada.css es una medida de lectura deliberada. */ .entrada-tarjeta { zoom: .75; max-width: calc(500px / .75); } /* La tarjeta de /login recibe EL MISMO trato, no una caja igual. Igualar solo el ancho dejaba la portada al .75 y login al 100%: mismas cajas, distinto tamano de letra, y al pasar de una a otra se notaba el salto. Escalar las dos por igual hace coincidir ancho Y tipografia sin tocar ni un tamano de fuente. El min(100%, ...) conserva la intencion del ancho original de login.css -- que la tarjeta ceda en ventanas estrechas -- solo que ahora el tope se expresa en pixeles de maqueta, para que al pintarse al .75 midan los 500 de siempre. */ .access-card { zoom: .75; width: min(100%, calc(500px / .75)); /* Y el alto. La portada mide 773 pintados y login 571: tiene menos contenido, asi que su alto natural es menor. Igualarlos obliga a estirar el mas bajo -- 202px que hay que meter en algun sitio. Era 719 hasta el 2026-09-11. El titular nuevo y su lema, mas largo, la subieron a 788 sin que nadie volviera aqui -- login se quedo 69px mas baja --; al retirar el letrero "AI Powered Platform" y anadir el pie de soporte quedo en 773, medido a 1280x900 y a 1161x900 (con el ancho fijo, no depende de la ventana). Se reparten centrando el contenido en vertical, no dejandolos caer al fondo: asi la tarjeta se lee como una caja con aire, no como una caja a medio llenar. ESTO ACOPLA LAS DOS PAGINAS. El 773 es el alto que hoy tiene la portada; si a la portada se le anade o quita contenido, hay que volver aqui. Es el precio de que coincidan, y no se puede evitar entre dos paginas con contenido distinto. */ min-height: calc(773px / .75); display: flex; flex-direction: column; justify-content: center; } }