/* * Estilos del boton "Maximizar" y del estado maximizado de las tablas. * * El controlador JS (tabla-maximizada.js) agrega: * - la clase `tabla-maximizada` en cuando el modo esta activo. * - un boton .tabla-maximizar-btn en cada tabla (en su header * `.fi-ta-header-toolbar`/`.fi-ta-header-ctn` o, en las tablas marcadas con * `data-tabla-maximizar-flotante`, flotante sobre el wrapper `.fi-ta`). * El icono visible (maximizar vs restaurar) se resuelve por CSS segun la clase * del , sin re-renderizar el SVG en JS. Funciona en modo claro y oscuro * reutilizando las variables de color de Filament. */ /* * Override de ancho al maximizar. El layout de Filament aplica la clase de ancho * (`fi-width-7xl` por defecto) sobre el
`.fi-main`, que es un selector de * clase simple; `body.tabla-maximizada .fi-main` lo gana en especificidad y, con * !important, asegura pisar la utility pase lo que pase. Al colapsar la sidebar el * propio layout de Filament corre el contenido hacia la izquierda, asi que solo * hace falta soltar el max-width para ocupar toda la pantalla. */ body.tabla-maximizada .fi-main { max-width: 100% !important; } /* * Boton de maximizar. Estilado como un icon-button sutil para que se vea nativo * aunque las clases internas de Filament cambien. En estado maximizado se tinta * con el color primario para reforzar que el modo esta activo. */ .tabla-maximizar-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 0.5rem; background-color: transparent; color: rgb(var(--gray-400, 156 163 175)); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .tabla-maximizar-btn:hover { color: rgb(var(--gray-700, 55 65 81)); background-color: rgb(var(--gray-100, 243 244 246)); } .dark .tabla-maximizar-btn { color: rgb(var(--gray-500, 107 114 128)); } .dark .tabla-maximizar-btn:hover { color: rgb(var(--gray-200, 229 231 235)); background-color: rgb(var(--gray-700, 55 65 81)); } body.tabla-maximizada .tabla-maximizar-btn { color: rgb(var(--primary-500, 245 158 11)); } .tabla-maximizar-btn svg { width: 1.25rem; height: 1.25rem; } /* * Solo uno de los dos iconos es visible a la vez, segun el estado del . Por * defecto (no maximizado) se muestra el de maximizar; al maximizar, el de * restaurar. */ .tabla-maximizar-btn .icono-restaurar { display: none; } body.tabla-maximizada .tabla-maximizar-btn .icono-maximizar { display: none; } body.tabla-maximizada .tabla-maximizar-btn .icono-restaurar { display: block; } /* * Caso flotante: la tabla no tiene header visible (toolbar vacia que Filament * oculta, p. ej. la de items de proyeccion). Se reserva una franja superior en el * wrapper para que el boton no se monte sobre el encabezado de la tabla. */ .tabla-maximizar-anchor { position: relative; padding-top: 2.5rem; } .tabla-maximizar-btn.flotante { position: absolute; top: 0.375rem; right: 0.5rem; z-index: 20; }