/* Drawer de navegacion del panel en movil. En el artifact el menu no abre: el script que escucha [data-cl-menu] guarda `document.documentElement` en una variable al cargarse, y el runtime del design canvas reconstruye el documento despues, asi que ese handler queda apuntando a un arbol viejo. Lo mismo deja muerto el boton de tema. Ademas el runtime reconcilia contra su plantilla los nodos que le pertenecen y le borra el data-open al aside apenas se lo ponen, asi que el estado del drawer vive en una clase del : de ahi cuelgan los selectores de abajo. panel-movil.js se encarga del comportamiento; aca va el aspecto: la barra queda arriba y la navegacion entra deslizandose. */ /* El grafico de Estadisticas deja la etiqueta del ultimo mes 18px afuera. Eso no solo permite scrollear de costado: en un telefono el viewport de LAYOUT se ensancha para contenerlo (390 -> 408) y con el se descoloca todo lo que mide contra window.innerWidth. Se recorta el area de contenido y no el : en la raiz, cualquier overflow distinto de visible se propaga al viewport y deja de pegar todo lo position:sticky (la barra superior). `clip` en vez de `hidden` porque no crea contenedor de scroll. */ .cl-main { overflow-x: clip; } @media (max-width: 900px) { /* Barra fija que queda a la vista con el drawer cerrado. La inyecta el JS. */ .cl-topbar { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--cl-blanco); border-bottom: 2px solid var(--cl-tinta); } .cl-topbar img { height: 34px; width: auto; display: block; } .cl-topbar-btn { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 2px solid var(--cl-tinta); border-radius: 999px; background: var(--cl-blanco); color: var(--cl-tinta); cursor: pointer; } .cl-topbar-btn i { font-size: 20px; line-height: 1; display: inline-flex; } /* El aside pasa de barra superior a panel lateral deslizante. */ .cl-side { position: fixed !important; inset: 0 auto 0 0 !important; width: min(86vw, 320px) !important; height: 100% !important; z-index: 60; border-right: 2px solid var(--cl-tinta) !important; border-bottom: none !important; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); transition: transform 320ms cubic-bezier(.2, .8, .3, 1); } body.cl-drawer-abierto .cl-side { transform: none; box-shadow: 6px 0 28px rgba(10, 42, 20, .22); } /* Dentro del drawer la navegacion y el pie estan siempre desplegados: los escondia el CSS del artifact, que los usaba como acordeon de la barra. */ .cl-side .cl-side-nav { display: flex !important; max-height: none; border-top: none; } .cl-side .cl-side-user { display: flex !important; } .cl-side .cl-side-brand { flex-direction: row !important; align-items: center !important; justify-content: space-between; padding: 16px !important; border-bottom: 2px solid var(--cl-tinta) !important; } .cl-drawer-fondo { position: fixed; inset: 0; z-index: 55; background: rgba(10, 42, 20, .45); opacity: 0; pointer-events: none; transition: opacity 280ms cubic-bezier(.2, .8, .3, 1); } body.cl-drawer-abierto .cl-drawer-fondo { opacity: 1; pointer-events: auto; } /* El aside trae el aspa de cerrar, pero el CSS del artifact la ata a [data-open], que el runtime borra, y el boton quedaba vacio. Se repite su mismo selector para empatarle en especificidad (los dos llevan !important) y ganarle por orden: dentro del drawer el boton cierra. */ .cl-side:not([data-open="1"]) .cl-ico-list { display: none !important; } .cl-side:not([data-open="1"]) .cl-ico-x { display: inline-flex !important; } /* Con el drawer abierto no se scrollea lo de atras. */ body.cl-drawer-abierto { overflow: hidden; } } /* De 901px para arriba el aside vuelve a ser la columna fija de siempre. */ @media (min-width: 901px) { .cl-topbar, .cl-drawer-fondo { display: none; } } @media (prefers-reduced-motion: reduce) { .cl-side, .cl-drawer-fondo { transition: none !important; } }